There is a boilerplate available for developing custom blocks that you want to publish as package on a registry (like npm). This boilerplate allows you to build the builder part of your block in the folder
./src/builder and the base class of the runner part (that contains all the non-UI-related code of a block) in the folder
This boilerplate has the same package structure as the packages of the stock blocks. The idea behind it is to maximize code reusability. All the block code not specific for a particular runner UI should be in the package. Runners can then use these block packages and only have to implement the UI rendering (that is specific for a runner) for each block.
🚀 Get started
To use the boilerplate, follow these steps:
- Download or clone the repository to your local machine:
git clone https://gitlab.com/tripetto/blocks/boilerplate.git
npm installinside the downloaded/cloned folder:
- Start the builder and load the block in developer (test) mode:
This command starts the local builder server and tries to open the URL
http://localhost:3333 in your default browser. If no browser opens, open the browser and navigate to this URL. By default, the builder loads the form definition located at
Next, open your favorite code editor/IDE and start working on your block. When a source code change is detected, the block should automatically recompile, and the builder in the browser should refresh.
📦 Publish your block
When your block is ready to share with the world, you may want to publish it. Make sure to update the name and description in
package.json before doing so. Also, set the
private property to
false (currently, it is set to
true to preserve unwanted publication).
Next, run the following command to increment the package version number, do a production build and publish the package to the npm registry.
Make sure to replace the
README.md file of the boilerplate with your own version. Also, update the package name and description in
package.json before publishing it!
npm run publish:patch
Tripetto uses the GNU gettext system. If you want to create translations for your block, you first need to generate the
POT file for it. Run the following command to do so:
npm run pot
This generates a file
template.pot in the
translations folder of your block. Use that file to translate your block (for example, using POEdit), and then store the translations in the