Block metadata in WordPress

Block metadata are set in block.json.

This file is crucial for managing block settings in WordPress. It includes key configurations, such as attributes, styles, and editor settings, into one accessible location.

This approach results in a more organized and maintainable block development process, improving the overall efficiency and quality of the WordPress project.

Example of the file from in a block:

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "my-block/content",
	"version": "0.1.0",
	"title": "Content",
	"category": "widgets",
	"icon": "format-aside",
	"description": "Content for Block.",
	"parent": [ "my-block/container" ],
	"supports": {
		"html": false
	},
	"textdomain": "my-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

See official documentation for more information about metadata in block.json.

Metadata

A brief information about metadata in the file.

$schema

This property specifies the JSON schema URL for the block.json file, ensuring that the block structure adheres to WordPress standards. It provides validation and guidance during block development.

apiVersion

The apiVersion property indicates the version of the block API being used, allowing developers to utilize the appropriate features and functionalities. The value "2" represents the latest API version.

name

This property defines the unique identifier for the block, following the format "namespace/block-name". It is used for registration and reference purposes throughout the project.

version

The version property indicates the current version of the block, allowing developers to track updates and revisions efficiently.

title

The title property provides a human-readable name for the block, which is displayed in the block inserter and other user interfaces within the WordPress editor.

category

This property assigns the block to a specific category, such as "widgets," helping users find and organize their blocks in the editor.

icon

The icon property specifies a visual representation for the block, which appears alongside the block's title in the WordPress editor's user interface.

To change a block icon, use of Dashicons library:

1. In Dashicons website, locate icon to use in block. For instance, cover image in Block Editor section.
2. Click on icon to focus and view information about the icon. The information section displays a large size of icon, with section title, slug, char code, and help links.
3. Copy the dashicon slug, but without the dashicons- prefix. For example, not dashicons-cover-image but cover-image.

description

This property offers a brief explanation of the block's purpose, assisting users in understanding the block's functionality within the editor.

keywords

The keywords property is an array of terms that can be used to improve the discoverability of the block in the editor. These keywords help users find the block when searching in the block inserter.

parent

The parent property is an array that lists the allowed parent blocks for the current block, establishing a hierarchical relationship and nested structure.

supports

The supports property is an object that defines various optional features and settings for the block, such as whether it should allow custom HTML editing ("html": false).

attributes

The attributes property is an object that defines the block's data sources and their types. Attributes store data and control the block's dynamic behavior.

providesContext

The providesContext property is an object that lists the context values provided by the block to its descendants, enabling data sharing between nested blocks.

usesContext

The usesContext property is an array that specifies which context values the block consumes from its ancestors. This allows the block to access shared data from parent blocks.

textdomain

The textdomain property sets the text domain for the block, facilitating localization and internationalization of the block's content.

editorScript

The editorScript property references the JavaScript file used in the editor, typically the index.js file, which contains the block's code and logic.

editorStyle

This property points to the CSS file that contains the block's styles specifically for the editor view, helping to maintain visual consistency between the editor and the frontend.

style

The style property refers to the CSS file used to style the block on the frontend, ensuring that the block's appearance aligns with the overall website design.