• What is a Block ?

In the new Gutenberg editor of WordPress, the blocks are units by using which a webpage is created.

Everything from a paragraph, to a video, to the site title is represented as a block.

If we look at how the posts are stored by opening the html of this page,

This is how it looks, but when rendered it looks very different than this!,

The HTML comments are used to parse the block and display the actual HTML, but to store this in database they are serialized like this.

Let’s take example of the paragraph block, it is written as

<!-- wp:paragraph -->
<p> Something something </p>
<!-- /wp:paragraph -->

This is the serialized version of the paragraph to be stored in the database, but for it to render in the editor, we convert it into an array of objects which is stored in the memory.

Each block has edit function, that will return the component related to that block so it can be displayed.

• How to create a block?

To create a block, we have to follow some steps:-

• We have to first create a plugin which will be responsible for adding the blocks.
• Add block.json for describing the block and its metadata
• Add a block.js to render the react component

For this, I have created blocks directory in my plugin and added myfirst block in it.

I am using api version 3, which is the latest version since WP:6.3 , read more about block version from here : https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/

The name attribute must be prefixed, I am using mlb prefix for this, if you look at core blocks they are prefixed as core/

Category is the category of the block, we can select from available categories like, text , media , design, embeds etc.

The editorScripts requires a script file that will be loaded whenever we load our block in the editor, I have her created a block.js file

We can use the function

 register_block_type( __DIR__ . '/blocks/myfirst' );

To let the WordPress know about our block.

This will also enqueue the script block.js we created, but for that to work we have to create a file block.asset.php and return the dependency of wp-blocks

var registerBlockType = wp.blocks.registerBlockType;

registerBlockType('mlb/myfirst', {
	edit: function () {
		return "edit";

	},
	save: function () {
		return "save";
	}
});

<?php
return array(
	"dependencies" => array('wp-blocks'),
	"version" => "1.0",
);

Now, we can check in the block editor, if our block is showing or not.

We have created our first block, but we are still using ES5 Js. For this to be according to WP docs, we have to setup environment accordingly.

Using index in key value can cause unexpected behavior, In my todo app I was using index as key and adding new tasks at index 0.

Due to this, newly added tasks always had key = 0 , which caused bugs when trying to edit them, the value of previous task was being shows as react did not re render the component due to same key value.

tasks.map((task, i) => (
              <li className="list-group-item" key={i}>
                <Task task={task} onDelete={deleteTask} onEdit={editTask} />
              </li>
            ))

To fix this issue, I used the id of the task itself as key!

Links I referred today

• https://wordpress.org/documentation/article/blocks-list/
• https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/
• https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/