rtCamp notes, day 56 of undefined

Blocks

edit and save properties

When registering our block in the entry file [ index.js ], we pass the edit and save functions to the second parameter [in JS ]. Now these specify the functions to be called at the edit and save action.

edit

The edit is said in the context of the editor. -> While our block is in the editor, the edit function is used. To render and to listen to the actions on the blocks.

The properties which the edit function receive are.

attributes

The attributes contains the attributes linked to our block, the ones we specified in the block.json and are saved in the database. The attributes are then stored in the block markup itself.

isSelected

It specifies if our block is currently selected in the editor [ focused ]

setAttributes

The setAttributes method can be used to change the value of the attributes we receive.

Block Props

the useBlockProps react hook would provide us with the blockProps [properties ] this would contain the classes for our block <div> tags. We can specify additional content with the blockProps by using it like the syntax below

const blockProps = useBlockProps( {
            className: 'our-custom-class',
        } );

Save

This function should render the output for the front-end, this is called when we save our post and this generates the final markup for our block and saves it in the post_content column of the posts table to be rendered in the front end.
The data we return from it would be escaped if we are returning it in the plain text format.

We can get the attributes in the save function to generate the markup based on the attributes.

Metadata in blocks
The metadata contains the data realted to our block, e.g. the title, category, icon etc.
Now as our blocks are registered at two places, the front-end and the PHP, both sharing the common block.json would be the ideal way of registering our block. The frontend CSS and JavaScript assets added in the metadata are only added when the block is rendered in the block.

Dynamic Block

Now the second type of the block is the Dynamic Block.
Now imagine you want a block to display the recent posts, now the recent posts would be different at the time of saving the block and they would be different at the time of rendering the post, so to overcome this issue. We have the dynamic blocks

In dynamic blocks, the content is generated at the runtime -> when the block is rendered.

In Dynamic block, we don’t need to pass the save functions instead at the time of registering our block in the PHP we have to pass the render_callback function as the array in the second parameter.

function create_block_gutenpride_block_init() {
	register_block_type(
		__DIR__ . '/build',
		array(
			'render_callback' => 'aryan_callback',
		)
	);
	register_block_type( __DIR__ . '/build2' );
}

This render_callback function should return the content for the block and it will render the returned content at the runtime.

function aryan_callback( $attributes, $content, $block ) {
	return '<p>our good block content hehe</p>';
}

This would return this in the block content.

Attributes

The attributes we save at edit are not directly saved into the database. We have to define a configuration in our block.json file to support them. We must define which attributes we are using first in the block.son file

"attributes": {
		"setting": {
			"type": "string",
			"default": "test"
		}
	}