![\"\"](\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/10\/GutenbergBlockCover-1-300x300.png\")
<\/figure><\/div>\n\n\n\nFor a really effective blogging workflow, you\u2019ll need to build new blocks to extent the functionalities of the editor. For another blog I own (https:\/\/robotsbench.com\/<\/a>), I wanted to use the HTML <aside> tag that\u2019s not available in the default blocks so I could give it a specific style in my theme.<\/p>\n\n\n\n It involved more code than I expected and there are many steps. A good surprise still, the majority of the code the plugin is in React (JavaScript) instead of the PHP scripts used for standard plugins. You\u2019ll still need a tiny bit of PHP to package it as a WordPress plugin, but it\u2019s mostly boilerplate that can be generated.<\/p>\n\n\n\n This tutorial will walk you through the creation of plugin to use the <aside> tag. We\u2019ll see how to:<\/p>\n\n\n\n Before we get started creating the plugin template, you\u2019ll need to install the following on your computer to follow along.<\/p>\n\n\n\n You\u2019ll already have all of this if you\u2019re already developing in JavaScript and own a blog, but here is it for completeness\u2019 sake:<\/p>\n\n\n\n We are going to use a tool called create-guten-block<\/em> (https:\/\/github.com\/ahmadawais\/create-guten-block<\/a>) to create a template for our new plugin and upload it to your blog to test the whole process first. It will only contain a single block in this tutorial, but you could add all your custom blocks in a single plugin.<\/p>\n\n\n\n In the command line, use the following command to generate a plugin named cp-aside-gutenberg-block<\/em>.<\/p>\n\n\n\n \n\nYour newly created plugin will be in a cp-aside-gutenberg-block<\/em> subfolder of the current folder. To prepare your plugin to upload on your WordPress installation, navigate to the plugin folder and build it.\n\n<\/p>\n\n\n\n \n\nTo deploy the plugin, add the following files in the cp-aside-gutenberg-block<\/em> folder to a .zip file:\n\n<\/p>\n\n\n\n You could include all the other files for the sake of having the complete source code of your plugin on your blog, but they won\u2019t be used by WordPress. If you do include them, ignore the \\node_modules<\/em> folder: it\u2019s a pretty big folder and you can always download the content again using the npm install <\/em>command if you need to recreate it.<\/p>\n\n\n\n Deploy it like you would deploy any other plugin, using the Plugins\/Add new <\/em>menu in WordPress and clicking the Upload Plugin<\/em> button to select the .zip file you just created. Activate it and it should now be shown as active in your list of plugins.<\/p>\n\n\n\n \n\nFrom there on, the new block will appear in the list of blocks when you edit a post.\n\n<\/p>\n\n\n\n \n\nThe block can be rendered differently in the editor and in the final blog post. With the boilerplate, it will show up in the editor as the following:\n\n<\/p>\n\n\n\n \n\nAnd in the real post (or in the post preview):\n\n<\/p>\n\n\n\n The template has generated many files for the plugin. Here is what\u2019s included in the plugin we just tried out from the generated template:<\/p>\n\n\n\n Many things here will be familiar to you if you\u2019ve worked on a React application before. Here are the most interesting parts:<\/p>\n\n\n\n The most interesting part is the src\/block\/block.js<\/em> file that contains the JavaScript for the plugin:<\/p>\n\n\n\n The Gutenberg Block API used to extend the editor makes the registerBlockType <\/em>method available to add your own blocks. The registerBlockType <\/em>method describes the block and what happens when displaying for the editor or from a post.<\/p>\n\n\n\n It includes metadata about the block such as its title<\/em>, icon <\/em>and category <\/em>in the editor. It also includes the following two functions where most of the logic of the block lives:<\/p>\n\n\n\n Now that a basic block is available, let\u2019s modify it to display content as an <aside> HTML tag. At the same time, we\u2019ll also add an editable rich text field so we can add this content from the editor.<\/p>\n\n\n\n To add the editable field, the block must now store a value in the block since it needs to render it. In the Block API, values are registered as a list of attributes in the registerBlockType <\/em>method.<\/p>\n\n\n\n Attributes behave similarly to the state in React, but they contain some extra information so they can be managed by the Block API. The definition of the attribute specifies how to map the rendered content saved into the block to the content.<\/p>\n\n\n\n This block will have only one attribute named content<\/em>. This attribute will look for the children inside the element described by the .cp-aside-gutenberg-block-content <\/em>selector. The type of the content is an array because the block will contain many paragraphs (<p>) created by the rich text editor.<\/p>\n\n\n\n The following documentation includes all the data type supported by the attributes<\/em> property : https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-attributes\/<\/a>.<\/p>\n\n\n\n When editing the post in Gutenberg, the edit <\/em>method will receive the current value of the attributes <\/em>as a parameter so it can show the controls needed to edit them. It also receives a setAttributes <\/em>to update the current value of the attributes when the control is edited.<\/p>\n\n\n\n Those values will be used to initialize the RichText <\/em>control already available with Gutenberg (see the complete example at the bottom of the post to see how to import it in your block) .<\/p>\n\n\n\n Since it\u2019s a React control, the name of the attribute for CSS class of the control is className <\/em>instead of class <\/em>in HTML. You can also specify which tag type is the parent of the control, so in that case we\u2019ll use <aside> to get the result we wish.<\/p>\n\n\n\n When the content of the editor change, the method specified in the onChange <\/em>attribute of the RichText <\/em>control is called and the current value is updated.<\/p>\n\n\n\n When the save <\/em>method is called to render the control and save the result, it also receives the current value of the attributes <\/em>as a parameter (but not the setAttributes <\/em>method since it won\u2019t change the current value).<\/p>\n\n\n\n It then uses the RichText.Content <\/em>control to render the value correctly as rich text so it can be displayed later, so the parameters are similar to the RichText <\/em>editor control.<\/p>\n\n\n\n To complete the plugin, let\u2019s add this little bit of CSS in src\\block\\style.scss<\/em> to show a small border around the aside block. I\u2019ve kept it simple since it will be most likely edited at the theme level.<\/p>\n\n\n\n This style is applied in the editor and in the post preview; there is also a src\\block\\editor.scss<\/em> file already created for styles specific to the editor.<\/p>\n\n\n\n Here is the complete plugin. Notice the import to be able to use the RichText <\/em>control that I mentioned earlier.<\/p>\n\n\n\n \n\nHere is a GitHub repository with the full code of the plugin and more comments: https:\/\/github.com\/CindyPotvin\/cp-aside-gutenberg-block<\/a>.\n\n<\/p>\n\n\n\nSetting up the Environment<\/h2>\n\n\n\n
Generate an Empty Plugin Template<\/h2>\n\n\n\n
npx create-guten-block cp-aside-gutenberg-block\n<\/pre>\n\n\n\n
cd cp-aside-gutenberg-block\nnpm run build\n<\/pre>\n\n\n\n
\\dist \n\\src\nplugin.php\n<\/pre>\n\n\n\n
![\"\"](\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/10\/installed-1024x66-1024x66.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/10\/blocklist.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/10\/backend.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/10\/frontend.png\")
<\/figure><\/div>\n\n\n\nWhat\u2019s in the Boilerplate?<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2019\/10\/GenTemp-Files.png\")
<\/figure><\/div>\n\n\n\nimport '.\/style.scss';\nimport '.\/editor.scss';\n\nconst { __ } = wp.i18n;\nconst { registerBlockType } = wp.blocks;\n\nregisterBlockType('cgb\/block-cp-aside-gutenberg-block', {\n title: __('cp-aside-gutenberg-block'),\n icon: 'shield', \/\/ Icon used for the block from Dashicons\n category: 'common',\n edit: function(props) {\n return (\n <div className={ props.className }>Hello from the backend.<\/div>\n );\n },\n save: function(props) {\n return (<div>Hello from the frontend.<\/div>);\n },\n} );\n<\/pre>\n\n\n\nAdding a Rich Text Field<\/h2>\n\n\n\n
attributes: {\n content: {\n type: 'array',\n source: 'children',\n selector: '.cp-aside-gutenberg-block-content'\n }\n},\n<\/pre>\n\n\n\nEditing the Content of the Block<\/h3>\n\n\n\n
edit: ({ attributes, setAttributes }) => {\n const updateContent = (value) => {\n setAttributes({content: value})\n }\n\n return (\n <RichText tagName=\"aside\" \n multiline=\"p\" \n value={attributes.content} \n className=\"cp-aside-gutenberg-block-content\" \n onChange={updateContent} \/>\n );\n}\n<\/pre>\n\n\n\nSaving the Content of the Block<\/h3>\n\n\n\n
save: (props) => {\n return (\n <RichText.Content tagName=\"aside\" \n value={props.attributes.content} \n className=\"cp-aside-gutenberg-block-content\" \/>\n );\n}\n<\/pre>\n\n\n\nCSS for the Block<\/h3>\n\n\n\n
.cp-aside-gutenberg-block-content {\n border:3px dashed #160c28;\n margin: 1.5em 3em 1.5em 3em;\n padding: 1em;\n background-color: #e1efe6;\n}\n<\/pre>\n\n\n\nFinal Version of the Block<\/h3>\n\n\n\n
import '.\/style.scss';\nimport '.\/editor.scss';\n\nconst { __ } = wp.i18n; \/\/ Import __() from wp.i18n\nconst { registerBlockType } = wp.blocks;\nconst { RichText } = wp.editor;\n\nregisterBlockType('com-cindypotvin\/cp-aside-gutenberg-block', {\n title: 'Aside Box',\n description: 'Block showing a <aside> HTML element.',\n icon: 'editor-justify',\n category: 'formatting',\n attributes: {\n content: {\n type: 'array',\n source: 'children',\n selector: '.cp-aside-gutenberg-block-content'}\n },\n edit: ({ attributes, setAttributes }) => {\n const updateContent = (value) => {\n setAttributes({content: value})\n }\n return (\n <RichText tagName=\"aside\" \n multiline=\"p\" \n value={attributes.content} \n className=\"cp-aside-gutenberg-block-content\" \n onChange={updateContent} \/>\n );\n },\n save: (props) => {\n return (\n <RichText.Content tagName=\"aside\" \n value={props.attributes.content} \n className=\"cp-aside-gutenberg-block-content\" \/>\n );\n }\n});\n<\/pre>\n\n\n\n