If you’re a WordPress developer who is getting started writing custom content blocks for Gutenberg, you’ll find that this is a very different kind of development than you are used to doing. Gutenberg relies heavily and JavaScript and React instead of PHP, and the underlying architecture is unique. When I first started writing custom blocks for Gutenberg, I was copying and pasting from tutorials and code samples, and it took me a while to understand what was actually happening under the hood because it is so different from anything I have done before. In this tutorial, I will explain the anatomy of a WordPress custom block. When you create a block, the JavaScript file that builds your block has three main sections: A list of block attributes The edit function, which describes how the block looks in the editor The save function, which describes how the block looks on the front end Here is a very simple example of a block, borrowed from WordPress’s Gutenberg handbook with a few modifications: var el = wp.element.createElement, registerBlockType = wp.blocks.registerBlockType, blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' }; registerBlockType(
Share This

We are using cookies on our website

Please confirm, if you accept our tracking cookies. You can also decline the tracking, so you can continue to visit our website without any data sent to third party services.