For the library to work and register blocks dynamically, a specific folder structure and naming must be followed. Individual blocks are placed in the
Your custom block structure should look like this:
| | |____block-name-editor.js
| | |____block-name-options.js
| | |____block-name-toolbar.js
For example, you can check storybook.
Components folder holds three files
block-name-toolbars.js. Each of these files represents a part of the Block Editor block that is used in the editor. We have separated options, editor and toolbar in separate components for the sake of readability and reusing components in different projects.
This file represents the
edit callback method used in WordPress
We are not using the
save callback component because this library is used to create dynamic blocks. The
edit method describes how your block will be rendered in the editor once the block is used.
This file will pass the properties you've set in the
block-name.js and use the
render_block_view() method from the eightshift libs. It is used to provide front-end layout for your block.
Holds only the editor styling for the block. You should be using this file to override styles in the editor set by the component. In 90% of cases, you will not need to write any overrides here. But if you are using any columns layout like a grid, flex, etc., you may need to add some corrections.
Corrections in the columns layout are necessary because Block Editor editor adds its additional HTML and you can't change it. This file is optional.
Holds all the front-end and editor styling for the component. Like the above file, in most cases, it can be avoided. This file is optional.
This file contains all the configuration required for a block to work. It's used in WordPress
registerBlockType method to register a block.
It looks like this:
"description" : "Button block with custom settings.",
For manifest.json details please check this link.