Ever so often you need to build WordPress plug-ins with not just one but a collection of Gutenberg blocks. The @wordpress/create-block package is very handy in term of getting the build off the ground quickly. However the file structure created by @wordpress/create-block can be frustrating and confusing especially for the beginners because it’s optimised for the plug-ins which contain only one block. Of course you can have as many block as you wish in a plug-in. But you will need a better scaffolder. There were some very useful discussions regarding the file structure for plug-ins with multiple Gutenberg blocks in WordPress’ dev community. Just to make your life slightly easier (so you don’t have to dive into a massive code base in Github just to understand the very basic) I’ve created a demo project in Github (click here!) showing what the end product looks like.
There are a couple of things you might want to be aware of.
The basic stuffs
If you built the project in Github as it is you will get a plug-in called WP Plugin Product View. The plug-in contains two Gutenberg blocks: Product View – Categories and Product View – Product List.
The source code of the blocks is in folder ./src/block-library. While there are standard script files in each of the block folder (index.js, edit.js and save.js) you can find the master script file index.js in folder ./src. Responsibility of the master script is ensure your blocks are registered properly in WordPress. The code in the scripts is bare minimum – just enough for the plug-in and the blocks to show up in WordPress properly. The good thing is they are all every easy to read and understand. In case you have any question, please just email me or leave a comment below.
Plug-in name, version and author
The Github project is meant to be used as a scaffolder. I haven’t gone so far as creating a installable package like @Wordpress/create-block. So you will have to change the value of the attributes according to your needs manually. Changing the name of the blocks is easy. They are defined in the Settings attribute in the local index.js (the ones inside the block folder). However changing the name, version and author of the plug-in is a bit more tricky because it’s not obvious where they are defined. I cannot believe why WordPress did this but the values of those attributes are actually hidden in the comment of the main php file, wp-plugin-product-view.php in this case. Knowing where those attributes are it’s a piece of cake to change their values o whatever you prefer.
Don’t forget to register the blocks in the php
You will still see the plug-in in WordPress (assuming you’ve registered the script) even if you forgot to register the block types in the php file. But you won’t be able to see the blocks in the editor (which effectively make them useless). In my demo project I registered two custom block type under the master script ‘create-block-wp-plugin-product-view-block-editor‘.
Please bear in mind that ‘create-block-wp-plugin-product-view-block-editor’ is the name I gave to the master script.
Please feel free to rename it to whatever more appropriate for your project. After that, you will just need to replace the blocks with your own block definitions. Hope this helps.
Top Cloud Solutions 