Block Icons, Naming, & Categories

Naming

The Name of a block is the primary namespace and identifier for a given block. Though it might be tempting to include the plugin name as part of the block name, this should be avoided since a Collection can be used to denote that grouping. Ideally the name of a BU block should be limited to its most basic descriptor, and additional identifiers should only be thrown in if the use of collections and the BU Red icon styling are not enough to differentiate it from an existing block. For example a BU Button block is named just “Button” same as core WP Button block, but the BU version has a red icon to differentiate it.

Categories

A Category is the name space to which a given block is grouped to. The block will appear under that category in the Inserter Menu. A block can only be registered to one category.

Categories are created in php and assigned via the “category” node in block.json.

WordPress Documentation

public function custom_block_category( $categories ) {
	array_unshift(
		$categories,
		array(
			'slug'  => 'theme-or-plugin-slug-block-category',
			'title' => 'BU: Theme Starter Block Category (PHP)',
		)
	);

	return $categories;
}
add_filter( 'block_categories_all', 'custom_block_category' );

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "theme-or-plugin-slug-block-collection/example-block",
	"version": "0.1.0",
	"title": "BU: Theme Starter 1",
	"category": "theme-or-plugin-slug-block-category"
}

Collections

Collections allow specific block types to be grouped together for added visibility in the editor’s Inserter menu, regardless of their categories. A block can only be registered to one collection.

For instance take two different BU Blocks; the Lead-In block could be registered to the Layout category and the BUniverse block might be registered under the Embeds category. By registering a collection for the BU Blocks namespace, these blocks would appear in the Inserter under their respective categories but also grouped under a BU Blocks collection. So while a block is registered to one Category, it can appear under multiple areas of the Inserter Menu thru the use of Collections.

Collections are created in js and assigned via the “namespace” node in block.json (must match the first argument of “registerBlockCollection”). The collection will have all blocks registered as namespace/*.

WordPress Documentation

registerBlockCollection( 'theme-or-plugin-slug-block-collection', {
	title: 'BU: Theme Starter Blocks Collection (JS)',
} );

Block Icon

To keep BU developed block consistent and recognizable in the block selection panel, we’ve provided a template for creating their SVG icons.