register_block_type() │ WP 5.0.0

This example shows how to register a block in a class context. The block will output the posts.

new Gutenberg_Block_Example(); // initialize

class Gutenberg_Block_Example {

	public function __construct() {
		add_action( 'init', [ $this, 'gutenberg_block_register_block' ] );
		add_action( 'enqueue_block_editor_assets', [ $this, 'gutenberg_block_editor_scripts' ] );
	}

	public function gutenberg_block_register_block() {

		register_block_type( 'gutenberg-block/example', [
			'render_callback' => [ $this, 'gutenberg_block_render_callback' ],
			'attributes'      => [
				'posts_per_page' => [
					'type'    => 'number',
					'default' => 3,
				],
				'order'        => [
					'type'    => 'string',
					'default' => 'desc',
				],
			],

		] );
	}

	public function gutenberg_block_editor_scripts() {

		wp_register_script(
			'example',
			plugins_url( 'build/index.js', __FILE__ ),
			['wp-blocks']
		);

		wp_enqueue_script( 'example' );

	}

	public function gutenberg_block_render_callback( $attributes, $content ) {

		$args = [
			'posts_per_page' => $attributes['postsPerPage'],
			'post_status'    => 'publish',
			'order'          => $attributes['order'],
		];

		$posts = get_posts( $args );

		$html = '<div>';

		if ( $posts ) {
			$html .= '<ul>';

			foreach ( $posts as $item ) {
				$html .= '<li><a href="' . get_the_permalink( $item->ID ) . '">' . $item->post_title . '</a></li>';
			}

			$html .= '</ul>';
		} else {
			$html .= '<h3>' . __( 'No posts!', 'gutenberg-blocks' ) . '</h3>';
		}

		$html .= '</div>';

		return $html;

	}

}

add_action( 'init', 'gutenberg_block_register_block' );
add_action( 'enqueue_block_editor_assets', 'gutenberg_block_editor_scripts' );

// Register the new side type
function gutenberg_block_register_block() {
	register_block_type( 'gutenberg-block/example', [] );
}

// Register the main script for the block
function gutenberg_block_editor_scripts() {
	wp_register_script(
		'example',
		plugins_url( 'build/index.js', __FILE__ ),
		['wp-blocks']
	);

	wp_enqueue_script( 'example' );
}

You can pass your attributes $attributes, which can be used both in the editor and on the front-end in render_callback:

register_block_type( 'my_namespace/my_block', [
	'render_callback' => 'render_callback',
	'attributes'      => [
		'some_string' => [
			'default' => 'default string',
			'type'    => 'string'
		],
		'some_array'  => [
			'type'  => 'array',
			'items' => [
				'type' => 'string',
			],
		]
	],
	'render_callback' => 'render_block_my_custom_blocks_calendar',
	'editor_script'   => 'calendar-editor-js',
	'editor_style'    => 'calendar-editor-css',
	'script'          => 'calendar-frontend-js',
	'style'           => 'calendar-frontend-css',
] );

Important (tested in 5.0.3): It is mandatory to specify the parameter type, otherwise a notice will be issued.

class My_Blocks {

	public function setup_hooks(): void {
		add_action( 'acf/init', [ $this, 'register_blocks' ] );
		add_filter( 'block_categories_all', [ $this, 'register_block_category' ] );
	}

	public function register_blocks(): void {

		$blocks = glob( __DIR__ . '/Blocks/*/block.json');

		if ( ! $blocks ) {
			return;
		}

		foreach ( $blocks as $block ) {
			register_block_type( $block );
		}
	}

}

( new My_Blocks() )->setup_hooks();

Example .json file:

{
  "name": "ice-cream/slider",
  "title": "Ice Cream Slider",
  { "description": "Simple customizable image slider",
  "style": "block.css", 
  "category": "ice-cream",
  "icon": "images-alt",
  "apiVersion": 2,
  "keywords": [],
  "acf": {
	"mode": "preview",
	"renderTemplate": "render.php"
  },
  "styles": [],
  "supports": {
	"align": false,
	"anchor": false,
	"alignContent": false,
	"color": {
	  "text": false,
	  "background": true,
	  "link": false
	},
	"alignText": false,
	"fullHeight": false
  }
}

Read more here: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/

To do this, specify an icon without the prefix dashicons- in $args in the parameter icon:

add_action( 'init', 'wpkama_register_block' );

function wpkama_register_block(){
	register_block_type(
		__DIR__ . '/build.json',
		[
			'icon' => 'admin-home', /* omit 'dashicons-' prefix */
		]
	);
}

All Dashicons names: https://developer.wordpress.org/resource/dashicons/

Creating the src folder

1. Run the command:

   npx @wordpress/create-block@latest my-blocks --variant=dynamic
   cd my-blocks

   For more details, see the manual https://developer.wordpress.org/block-editor/getting-started/tutorial/

2. Move the contents of the src directory to a subdirectory, for example block-a: src/block-a.

3. Duplicate the block-a subdirectory to create a second block, and name it, for example, block-b.

4. Update the block.json files in each subdirectory to meet the block requirements.

   The structure should look like this:

   my-blocks
   ├── package.json
   ├── package-lock.json
   └── src
   	├── block-a
   	│   ├── block.json
   	│   ├── edit.js
   	│   ├── editor.scss
   	│   ├── index.js
   	│   ├── render.php
   	│   ├── style.scss
   	│   └── view.js
   	└── block-b
   		├── block.json
   		├── edit.js
   		├── editor.scss
   		├── index.js
   		├── render.php
   		├── style.scss
   		└── view.js

   Example content of block.json:

   {
   	"$schema": "https://schemas.wp.org/trunk/block.json",
   	"apiVersion": 3,
   	"name": "create-block/block-a",
   	"version": "0.1.0",
   	"title": "Block A",
   	"category": "widgets",
   	"icon": "smiley",
   	"description": "Example block scaffolded with Create Block tool.",
   	"example": {},
   	"supports": {
   		"html": false
   	},
   	"textdomain": "wpkama",
   	"render": "file:./render.php",
   	"editorScript": "file:./index.js",
   	"editorStyle": "file:./index.css",
   	"viewStyle": "file:./style-index.css",
   	"viewScript": "file:./view.js"
   }

5. Run the command npm run build in the my-blocks directory. Corresponding directories will be created in the my-blocks/build folder.

Registering blocks

Now you need to register the blocks in PHP, pointing to the corresponding directory in the build folder:

add_action( 'init', 'wpdocs_create_blocks_mysite_block_init' );

function wpdocs_create_blocks_mysite_block_init() {

	register_block_type( __DIR__ . '/build/block-a' );
	register_block_type( __DIR__ . '/build/block-b' );
}

Moving the blocks folder inside the project

If your npm packages folder node_modules is located somewhere above, and the blocks should be inside, for example in the theme folder, you can specify the paths where the sources are located and where to output the builds.

To do this, add options to the build and start scripts in the package.json file:

"scripts": {
	"build": "wp-scripts build --webpack-src-dir=path/to/my-blocks/src/ --output-path=path/to/my-blocks/build/ --webpack-copy-php",
	"start": "wp-scripts start --webpack-src-dir=path/to/my-blocks/src/ --output-path=path/to/my-blocks/build/ --webpack-copy-php",
	...
}

Now npm run build can be run from the folder where package.json is located, and the blocks will be built in the internal folder (where you specified).