To check the block.json for eg or import component in edit.js :

https://github.com/WordPress/gutenberg/tree/trunk/packages/components

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src

$ npx @wordpress/create-block@latest blocks --template @wordpress/create-block-interactive-template
$ cd blocks/src/
$ mkdir "blockname"
$ mv * in "blockname" 

Duplicate the “whatever blockname” in the src folder to add new blocks.

In functions.php:

foreach ( glob( get_stylesheet_directory() . '/blocks/build/*' ) as $block_directory ) {
		register_block_type( $block_directory );
}

A convenient way to display the block in the editor :

import ServerSideRender from '@wordpress/server-side-render';

export default function Edit( { attributes, setAttributes } ) {

return (

     <ServerSideRender
          block="dev/some-block"
          attributes={attributes}
     />

);

}

Without module : <wp.blockEditor.ServerSideRender block="custom/menu-display" attributes={attributes} />

Source: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-server-side-render/

• $content
• $attributes (defined in block.json)
• $block

in index.js :

registerBlockType(
	metadata,
	{
		icon: {
			src: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" enable-background="new 0 0 512 512">
				<g>
					<g>
						<path d="...
					</g>
				</g>
			</svg>
		},
		edit: Edit,
		save: Save
	}
)

Source: https://rudrastyh.com/gutenberg/custom-svg-icons.html

Option 1: InnerBlocks component

index.js:

import { InnerBlocks } from '@wordpress/block-editor';

registerBlockType( metadata.name, {
	edit: Edit,
	save: props => { return <InnerBlocks.Content /> }
):

render.php:

<?php echo $content; ?>

in edit.js:

return (  <InnerBlocks { ...blockProps } /> )

Option 2: useInnerBlocksProps hook

This allow more control on the editor site. In edit.js:

import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

export default function Edit( { attributes, setAttributes } ) {

	const MC_TEMPLATE = [
		[ 'core/image', {} ],
		[ 'core/paragraph', { content: 'Text content' } ]
	];
	const blockProps = useBlockProps( { className: 'sim-slide sim-slide-single-editor' } );
	const innerBlocksProps = useInnerBlocksProps(
        blockProps,
		{ template: MC_TEMPLATE },
	);

	return (
		<div { ...innerBlocksProps } />
	);

}

Source:

• https://learn.wordpress.org/lesson/work-with-the-innerblocks-component/
• https://make.wordpress.org/core/2021/12/28/take-more-control-over-inner-block-areas-as-a-block-developer/
• https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/

With an attribute in block.json as attributes: { foo: { type: string, default: bar } }

In edit.js :

import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function Edit( { attributes, setAttributes } ) {
	const blockProps = useBlockProps();

	return (
		<RichText
			{ ...useBlockProps() }
			tagName="p"
			onChange={ val => setAttributes( { foo: val } ) }
			value={ attributes.content }
			placeholder="Enter some text here..."
		/>
	);
}

In render.php

echo attributes['foo'];

Sources:

• https://learn.wordpress.org/lesson/make-the-block-interactive/
• https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/heading/block.json

in block.json:

{ ...
  "attributes": {
    "foo": {
      "type": "string",
      "default": "bar"
    }
  }
}

in render.php, the data is accessible simply with echo $attributes['foo'];

In edit.js

import { TextControl, Panel, PanelBody } from '@wordpress/components';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';

export default function Edit( { attributes, setAttributes } ) {
	const blockProps = useBlockProps();

	return (
		<p { ...blockProps }>
			<InspectorControls key="setting">
				<Panel>
					<PanelBody title="Champs" initialOpen={true}>
						<TextControl className="blocks-base-control__input"
							label={"Foo"}
							value={attributes.foo}
							onChange={(val) => setAttributes({foo: val})}
						/>
					</PanelBody>
				</Panel>
			</InspectorControls>
			{ attributes.heading }
		</p>
	);
}

Adding toggle button, for an attribute defined as { foo: { type: "boolean", default: true } }

 <ToggleControl
    label="Toggle Content"
    checked={ showContent }
    onChange={ (newValue) => setAttributes( { foo: newValue } )  }
/>

A range button :

<InspectorControls>
    <PanelBody>
        <RangeControl
            label="Columns"
            value={ columnCount }
            onChange={ onChangeColumnCount }
            min={ 2 }
            max={ 6 }
         />
   </PanelBody>
</InspectorControls>

NB: To extend useBlockProps hooks, just send new data as parameter:

{ ...useBlockProps( { style: columnStyles } ) }

Sources:

• https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/heading/block.json
• https://learn.wordpress.org/lesson/create-custom-inspector-panel-controls/
• Color Panel : https://learn.wordpress.org/lesson/add-configuration-options-for-the-style-variations/

npx @wordpress/create-block@latest blockname --template @wordpress/create-block-interactive-template

Some other options :

npx @wordpress/create-block@latest blockname --variant dynamic
npx @wordpress/create-block@latest blockname --variant dynamic --template es5 → no node module, great for simple block, remove –variant for a static one.

To register the block : register_block_type( ${path of directory containing the block.json} );

In case of several block, optional but perfomance improving : wp_register_block_metadata_collection( $path, $manifest );

To generate a manifest : wp-scripts build-blocks-manifest

Sources:

• https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/
• https://make.wordpress.org/core/2024/10/17/new-block-type-registration-apis-to-improve-performance-in-wordpress-6-7/

Populate dynamically blocks (button, image, paragraph and heading), by setting the source, from meta field or php logic.

meta field

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"core/post-meta",
				"args":{
					"key":"book-genre"
				}
			}
		}
	}
} -->
<p></p>
<!-- /wp:paragraph -->

register_meta(
    'post',
    'book-genre',
    array(
        'show_in_rest' => true,
        'single'       => true,
        'type'         => 'string',
        'default'      => 'Default text field',
    )
);

php logic

$source_name = 'namespace/name';
$source_properties = array(
	'label'	=> 'Name',
	'get_value_callback' => 'fn',
	'uses_context' => ['postId']
);

register_block_bindings_source(
	string $source_name,
	array $source_properties
);

projectslug_bindings_callback(
	array $source_args, 
	WP_Block $block_instance, 
	string $attribute_name
);

Source: https://make.wordpress.org/core/2024/03/06/new-feature-the-block-bindings-api/

$block = array(
	'blockName'	=> 'dev/blockname',
	'attrs' => array(
		'name'	=> 'dev/blockname',
		'data'	=> array(
			'ACF__field' => get_field( 'ACF__field' )
		)
	),
);
$html_output = render_block($block);

To know what data send as parameter for the $block object, one can use the render_block filter

add_filter( 'render_block', 'dev__paragraph_add_block', 10, 2 );
function dev__paragraph_add_block( $block_content, $block ){

	if ( 'dw/icon' === $block['blockName'] ){
		echo '<pre>';
		var_dump($block);
		echo '</pre>';
	}

	return $block_content;

}

Source : https://www.itsupportguides.com/knowledge-base/wordpress/using-wordpress-render_block-php-function/