Let’s go step by step through the Caterpillar Block. You might not need every technique used in this example, but it covers a lot of common features you may need in developing your own blocks.<\/p>\n\n\n\n
In the command terminal, from the root of your project run This will start a series of prompts. Here’s what was used to make this block:<\/p>\n\n\n\n When this is done there will be a new block in the folder You can learn more about what is happening in this step here<\/a>.<\/p>\n\n\n\n This ensures the styles for your new block will be bundled with the other block styles when the theme serves the bundled style file.<\/p>\n\n\n\n Now it’s time to start work on the block itself.<\/p>\n\n\n\n Check out Block Architecture page<\/a> for an overview of all the files in this directory. Otherwise, get ready to get your feet wet!<\/p>\n\n\n\n Simplifies the process of defining and registering a block by using the same block\u2019s definition in JSON format to register the block on both the server and the client. <\/p>\n\n\n\n We defined most things here through the command line create-block command, but there are a few things we need to add.<\/p>\n\n\n\n Below the description key, let’s add example data for the block. This data is used to construct a preview for the block to be shown in the Inspector Help Panel when the user mouses over the block.<\/p>\n\n\n\n Block Supports is the API that allows a block to declare support for certain features.<\/p>\n\n\n\n link to docs…<\/p>\n\n\n\n Right below the example we just added, let’s add support for HTML:<\/p>\n\n\n\n Block attributes provide information about the data stored by a block. For example, rich content, a list of image URLs, a background color, or a button title.<\/p>\n\n\n\n link to docs…<\/p>\n\n\n\n We want to run some JS in the frontend, so we will need to add that here<\/p>\n\n\n\n These files are all optional and will not be used in this tutorial. Feel free to play around with them though!<\/p>\n\n\n\n You can put whatever you want here. I’ve added a few just to visually confirm that the file is loading as intended.<\/em><\/p>\n\n\n\n SCSS partial that contains all of the base (structural) styles for this block. These are compiled both individually and in a bundle.<\/p>\n\n\n\n @todo more about this…<\/em><\/p>\n\n\n\n https:\/\/github.com\/bu-ist\/block-sandbox\/blob\/sandbox\/src\/blocks\/caterpillar\/block-base.scss<\/a><\/p>\n\n\n\n Styles that are applied inside the editor only.<\/p>\n\n\n\n If you are not using this, remove the https:\/\/github.com\/bu-ist\/block-sandbox\/blob\/sandbox\/src\/blocks\/caterpillar\/editor.scss<\/a><\/p>\n\n\n\n Basically the same as the It is included @todo<\/p>\n\n\n\n Styles that are applied both on the front of your site and in the editor. Our block template @imports some common tools and the If you are not using this, remove the Contains the React component responsible for rendering the block\u2019s editing user interface, allowing users to interact with and customize the block\u2019s content and settings in the Block Editor. This component gets passed to the edit property of the registerBlockType function in the index.js file.<\/p>\n\n\n\n If you are not using this, remove the The entry point file for JavaScript that should only get loaded in the Block Editor. It\u2019s responsible for calling the registerBlockType function to register the block on the client and typically imports the edit.js and save.js files to get the functions required for block registration.<\/p>\n\n\n\n <\/p>\n\n\n\n Use this file for JavaScript code that you want to run in the front-end on posts\/pages that contain this block. <\/p>\n\n\n\n If you are not using this, remove the PHP file to use when rendering the block type on the server to show on the front end. See Render Template<\/a><\/p>\n\n\n\n <\/p>\n\n\n\n if we make the repo public we can embed gists using https:\/\/emgithub.com\/<\/a><\/p>\n\n\n\n todo: find a good tutorial style and mimic it… maybe https:\/\/web.dev\/articles\/building\/a-dialog-component<\/a> or https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/dialog<\/a><\/p>\n\n\n\nnpm run new-id-block<\/code>.<\/p>\n\n\n\n\/src\/blocks\/caterpillar<\/code>.<\/p>\n\n\n\nStep 2: Update Bundled Styles<\/h2>\n\n\n\n
\/src\/blocks<\/code><\/li>blocks-bundled.scss<\/code><\/li>\/\/ Import Block Styles<\/code><\/li>@import 'caterpillar\/block-base';<\/code><\/li><\/ul>\n\n\n\nStep 3: Updating the Files<\/h2>\n\n\n\n
block.json<\/code> <\/h3>\n\n\n\nexample<\/h4>\n\n\n\n
\"example\": {\n \"attributes\": {\n \"message\": \"hungry hungry\"\n }\n }<\/code><\/pre>\n\n\n\nsupports<\/h4>\n\n\n\n
\"supports\": {\n\t\t\"html\": true\n\t},<\/code><\/pre>\n\n\n\nattributes<\/h4>\n\n\n\n
\"attributes\": {\n\t\t\"textField\": {\n\t\t\t\"type\": \"string\"\n\t\t}\n\t},<\/code><\/pre>\n\n\n\nviewScript<\/h4>\n\n\n\n
\"viewScript\": \"file:.\/view.js\"<\/code><\/pre>\n\n\n\n
\n\n\n\nStyles<\/h2>\n\n\n\n
block-base.scss<\/code><\/h3>\n\n\n\neditor.scss<\/code> (block.json: editorStyle)<\/h3>\n\n\n\neditorStyle<\/code> entry from block.json<\/code>.<\/p>\n\n\n\nmodules\/inspector-editor.scss<\/code><\/h3>\n\n\n\neditor.scss<\/code> above, but specific to the editor-partials code.<\/p>\n\n\n\nstyle.scss<\/code> (block.json: style)<\/h3>\n\n\n\nblock-base.scss<\/code> in order to stay DRY.<\/p>\n\n\n\nstyle<\/code> entry from block.json<\/code>.<\/p>\n\n\n\n
\n\n\n\nScripts<\/h2>\n\n\n\n
edit.js<\/code> (block.json: editorScript)<\/h3>\n\n\n\n???<\/code> entry from block.json<\/code>.<\/p>\n\n\n\nindex.js<\/code> <\/h3>\n\n\n\nmodules<\/code>\/inspector.js<\/code><\/h3>\n\n\n\nview.js<\/code> (block.json: viewScript)<\/h3>\n\n\n\nviewScript<\/code> entry from block.json<\/code>.<\/p>\n\n\n\n
\n\n\n\nPHP<\/h2>\n\n\n\n
render.php<\/code> (block.json: render)<\/h3>\n\n\n\n
\n\n\n\n