block.json

Anchors let you link directly to a specific block on a page. This property adds a field to define an id for the block and a button to copy the direct link.

This property adds block controls which allow to change block’s alignment.

This property allows to enable wide alignment for your theme. To disable this behavior for a single block, set this flag to false.

This property adds UI controls which enable the user to select allowed child blocks for a block container. Note: To use this feature, pass attributes.allowedBlocks as the allowedBlocks property in the options object of useInnerBlocksProps.

ARIA-labels let you define an accessible label for elements. This property allows enabling the definition of an aria-label for the block, without exposing a UI field.

By default, the class .wp-block-your-block-name is added to the root element of your saved markup. This helps having a consistent mechanism for styling blocks that themes and plugins can rely on. If, for whatever reason, a class is not desired on the markup, this functionality can be disabled.

This value signals that a block supports some of the properties related to color. When it does, the block editor will show UI controls for the user to set their values.

Note that the background and text keys have a default value of true, so if the color property is present they’ll also be considered enabled

This property adds a field to define a custom className for the block's wrapper.

This property adds a field to define custom CSS for the block instance.

This value signals that a block supports some of the CSS style properties related to dimensions. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.

When the block declares support for a specific dimensions property, its attributes definition is extended to include the style attribute.

This value signals that a block supports some of the properties related to filters. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.

When the block declares support for a specific filter property, its attributes definition is extended to include the style attribute.

This value signals that a block supports some of the CSS style properties related to background. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.

When the block declares support for a specific background property, its attributes definition is extended to include the style attribute.

By default, a block’s markup can be edited individually. To disable this behavior, set html to false.

By default, all blocks will appear in the inserter, block transforms menu, Style Book, etc. To hide a block from all parts of the user interface so that it can only be inserted programmatically, set inserter to false.

By default, a block can be renamed by a user from the block 'Options' dropdown or the 'Advanced' panel. To disable this behavior, set renaming to false.

By default, a block can be hidden by a user from the block 'Options' dropdown. To disable this behavior, set visibility to false.

This value only applies to blocks that are containers for inner blocks. If set to true the layout type will be flow. For other layout types it's necessary to set the type explicitly inside the default object.

A non-multiple block can be inserted into each post, one time only. For example, the built-in ‘More’ block cannot be inserted again if it already exists in the post being edited. A non-multiple block’s icon is automatically dimmed (unclickable) to prevent multiple instances.

A block may want to disable the ability of being converted into a reusable block. By default all blocks can be converted to a reusable block. If supports reusable is set to false, the option to convert the block into a reusable block will not appear.

A block may want to disable the ability to toggle the lock state. It can be locked/unlocked by a user from the block 'Options' dropdown by default. To disable this behavior, set lock to false.

This value signals that a block supports some of the CSS style properties related to position. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.

When the block declares support for a specific position property, its attributes definition is extended to include the style attribute.

This value signals that a block supports some of the CSS style properties related to spacing. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.

When the block declares support for a specific spacing property, its attributes definition is extended to include the style attribute.

Allow blocks to define a box shadow.

This value signals that a block supports some of the CSS style properties related to typography. When it does, the block editor will show UI controls for the user to set their values if the theme declares support.

When the block declares support for a specific typography property, its attributes definition is extended to include the style attribute.

Indicates if the block is using Interactivity API features.

This property marks the block itself as content. It is intended primarily for blocks that do not declare content attributes, or whose content is expressed only through their inner blocks. When enabled, content-only editing modes can still edit these blocks and allow inner blocks to be added or removed.

This property enables a dedicated List View panel in the block inspector for the block. When enabled, the inspector shows a List View tree for the block's inner blocks, allowing users to inspect, reorder, and manage the block's items from the sidebar instead of only using the global document List View.

This property indicates whether the block can split when the Enter key is pressed or when blocks are pasted.

The primary CSS class to apply to the block. This replaces the .wp-block-name class if set.

Custom CSS selector used to generate rules for the block's theme.json border styles.

Custom CSS selector used to generate rules for the block's theme.json color styles.

Custom CSS selector used to generate rules for the block's theme.json dimensions styles.

Custom CSS selector used to generate rules for the block's theme.json spacing styles.

Custom CSS selector used to generate rules for the block's theme.json typography styles.

Custom CSS selector used when generating the block's custom CSS rules set via Global Styles.

The viewportWidth controls the width of the iFrame container in which the block preview will get rendered

Set the attributes for the block example

Set the inner blocks that should be used within the block example. The blocks should be defined as a nested array like this:

[ { "name": "core/heading", "attributes": { "content": "This is an Example" } } ]

Where each block itself is an object that contains the block name, the block attributes, and the blocks inner blocks.