The element package provides an abstraction layer over react, we can use it the same way we use react but it is specifically for WordPress.

It has similar API just like react,

The edit and save functions:-

var registerBlockType = wp.blocks.registerBlockType;

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

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

The edit function should return a react element that will be displayed on the editor

The save function should return a react element that will be displayed on the front-end

Dynamic blocks are blocks that build their structure and content on the fly when the block is rendered on the front end.

The dynamic blocks save functions returns null so that only the block attributes are stored in the database, the backend callback handles the actual rendering of the data.

We can give the render callback when registering the block

register_block_type(
    __DIR__ . '/notice',
    array(
        'render_callback' => 'render_block_core_notice',
    )
);

Properties that can be added to block.json file for adding block metadata

API Version : The version of the Block API used by the block. The most recent version is 3 and it was introduced in WordPress 6.3.

Name

{ "name": "mlb/myblock" }

The name for a block is a unique string that identifies a block. Names have to be structured as namespace/block-name, where namespace is the name of your plugin or theme.

Title:

Title of the block, this will be displayed in the editor

{ "title": "Movies" }

Category:

This describes in which category the block belongs to, below are in built categories

• text
• media
• design
• widgets
• theme
• embed

{ "category": "text" }

Icon

An icon property should be specified to make it easier to identify a block. These can be any of WordPress’ Dashicons (slug serving also as a fallback in non-js contexts).

{ "icon": "video" }

Block attributes provide information about the data stored by a block. For example, rich content, a list of image URLs, a background colour, or a button title.

A block can contain any number of attributes, and these are specified by the attributes field – an object where each key is the name of the attribute, and the value is the attribute definition.

The edit function of our block is passed those attributes which we can access and use to render the block, for example:-

registerBlockType('mlb/myfirst', {
	edit: function ({attributes }) {
		return "edit : " + attributes.title;

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

We can add inline style to the block edit function directly, but we will have to repeat the same for save function also!

The better approach to this is to enqueue the styles and also use the class names in our blocks, to enqueue the style sheet we can add it in the block.json file.

Use the editorStyle property to a CSS file you want to load in the editor view, and use the style property for a CSS file you want to load on the frontend when the block is used.

{
    "editorStyle": "file:./editor.css",
    "style": "file:./style.css"
}

Block Supports

Block supports can be added in the block.json file, there are a lot of inbuilt core customizations that our block can opt in for, we can use them.

"supports": {
        "color": {
            "text": true,
            "background": true,
        }
    }

This will add support for text color, background color etc.

This is really helpful when we want to offer this customization in our block but don’t want to duplicate the code used for this.