block.json
Below is an example of the typical block.json for a block.
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "og/example-block",
"title": "Example",
"category": "og-containers",
"icon": "<svg viewBox=\"0 0 448 512\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m0 88c0-48.6 39.4-88 88-88h304c30.9 0 56 25.1 56 56v288c0 22.3-13.1 41.6-32 50.6v69.4h8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-344c-44.2 0-80-35.8-80-80 0-2.7.1-5.4.4-8h-.4zm80 312c-17.7 0-32 14.3-32 32s14.3 32 32 32h288v-64zm-32-41.3c9.8-4.3 20.6-6.7 32-6.7h312c4.4 0 8-3.6 8-8v-288c0-4.4-3.6-8-8-8h-304c-22.1 0-40 17.9-40 40zm104-246.7h176c13.3 0 24 10.7 24 24s-10.7 24-24 24h-176c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80h176c13.3 0 24 10.7 24 24s-10.7 24-24 24h-176c-13.3 0-24-10.7-24-24s10.7-24 24-24z\"/></svg>",
"description": "This is an example block registered in the origins theme.",
"keywords": [
"Example",
"origins-blocks"
],
"acf": {
"mode": "preview",
"postTypes": [
"post",
"page",
"pm_pattern"
],
"renderCallback": "Og\\Blocks\\Factory::render"
},
"example": {
"attributes": {
"message": ""
}
},
"supports": {
"align": true,
"jsx": false,
"anchor": true,
"customClassName": true
}
}
You can visit https://schemas.wp.org/trunk/block.json to see all of the attributes and values that can be changed in the block.json. The schema being included in the block.json file allows for your IDE to make autosuggestions while editing.
Some attributes that are frequently edited when building blocks for a site include:
-
Extending block availability to specific post types by adding them to the postTypes array.
-
Enabling jsx for InnerBlocks in supports.
-
Dictating block alignment (see example below which makes the block full screen by default and removes the ability for the user to change the block alignment off of full screen.)
"supports": {
"align": ["full"],
"jsx": true,
"anchor": true,
"customClassName": true
},
"attributes": {
"align": {
"type": "string",
"default": "full"
}
}
- Allowing only certain blocks to be used within an InnerBlocks component.
"name": "og/components-accordion",
"title": "Accordion",
"allowedBlocks": ["og/components-accordion-content"],
- Providing a description of what the block is and how to use it.
It can also be used to define additional styles for blocks in the gutenberg editor (like how core/buttons have by defualt), define which functionalities it supports (mirroring options that you may see in the theme.json), and much more.
Edit Tooltip for Blocks
You can add an optional link for blocks where the content is edited in different locations using the "example" key in the block.json.
"example": {
"attributes": {
"editLink": "/wp-admin/edit.php?post_type=testimonial",
"editTooltip": "Choose testimonials using the ACF field. Testimonials can be edited or added on the Testimonials page. Click to open Testimonials.",
"message": ""
}
},
The code above inserts a button with an edit pencil, which links to the page where you can edit testimonials in a new tab. The editTooltip key shows on hover to provide information to the editor.
The edit button can be customized by editing the editor.css file using the following class names: