Here’s a comprehensive list of commonly supported block names in the WordPress Block Editor (Gutenberg). Each block name is explained, along with its attributes and example code for usage in the Gutenberg Block Format.
Table of Supported Block Names
| Block Name | Description | Common Attributes | Example Use Case |
|---|---|---|---|
core/paragraph | Adds a text paragraph. Supports basic formatting like bold, italic, and links. | align, placeholder | Text content with inline formatting. |
core/heading | Adds a heading block (H1-H6). | level, align, placeholder | Section headings. |
core/list | Creates ordered or unordered lists. | ordered, align | Bullet or numbered lists. |
core/image | Embeds an image with captions and alt text. | url, align, alt, id | Adding visual content. |
core/quote | Adds a styled quote. | value, citation, align | Highlighting key quotes. |
core/gallery | Displays a grid of images. | ids, columns, align | Showcasing photo collections. |
core/video | Embeds a video file. | src, poster, align | Adding self-hosted videos. |
core/audio | Embeds an audio file. | src, align, autoplay | Playing audio clips. |
core/code | Displays preformatted code snippets. | content, align | Sharing code. |
core/html | Adds custom HTML content. | None | Custom HTML structures. |
core/embed | Embeds external content like YouTube, Twitter. | url, type, align | Embedding social media or videos. |
core/table | Creates a table with rows and columns. | align, hasFixedLayout | Organizing tabular data. |
core/button | Adds a styled button with a link. | text, url, align | Call-to-action buttons. |
core/separator | Adds a horizontal divider. | align, className | Dividing sections. |
core/spacer | Adds adjustable vertical space. | height | Adding spacing. |
core/columns | Creates a column layout. | columns, align | Structuring content into columns. |
core/group | Groups multiple blocks together. | align, className | Grouping blocks for styling. |
Examples for Each Block
1. Paragraph (core/paragraph)
[
"blockName" => "core/paragraph",
"attrs" => [],
"innerHTML" => "<p>This is a sample paragraph with <strong>bold</strong> and <em>italic</em> text.</p>",
"innerBlocks" => [],
"innerContent" => [
"<p>This is a sample paragraph with <strong>bold</strong> and <em>italic</em> text.</p>"
]
]
2. Heading (core/heading)
[
"blockName" => "core/heading",
"attrs" => ["level" => 2],
"innerHTML" => "<h2>Sample Heading</h2>",
"innerBlocks" => [],
"innerContent" => [
"<h2>Sample Heading</h2>"
]
]
3. List (core/list)
[
"blockName" => "core/list",
"attrs" => ["ordered" => false],
"innerHTML" => "<ul><li>Item 1</li><li>Item 2</li></ul>",
"innerBlocks" => [],
"innerContent" => [
"<ul><li>Item 1</li><li>Item 2</li></ul>"
]
]
4. Image (core/image)
[
"blockName" => "core/image",
"attrs" => ["url" => "https://example.com/image.jpg", "alt" => "Sample Image"],
"innerHTML" => "<figure><img src='https://example.com/image.jpg' alt='Sample Image'/></figure>",
"innerBlocks" => [],
"innerContent" => [
"<figure><img src='https://example.com/image.jpg' alt='Sample Image'/></figure>"
]
]
5. Quote (core/quote)
[
"blockName" => "core/quote",
"attrs" => [],
"innerHTML" => "<blockquote><p>Inspirational quote goes here.</p><cite>Author Name</cite></blockquote>",
"innerBlocks" => [],
"innerContent" => [
"<blockquote><p>Inspirational quote goes here.</p><cite>Author Name</cite></blockquote>"
]
]
6. Gallery (core/gallery)
[
"blockName" => "core/gallery",
"attrs" => ["ids" => [1, 2, 3], "columns" => 3],
"innerHTML" => "<figure class='wp-block-gallery columns-3'>...</figure>",
"innerBlocks" => [],
"innerContent" => [
"<figure class='wp-block-gallery columns-3'>...</figure>"
]
]
7. Button (core/button)
[
"blockName" => "core/button",
"attrs" => ["text" => "Click Me", "url" => "https://example.com"],
"innerHTML" => "<a href='https://example.com' class='wp-block-button__link'>Click Me</a>",
"innerBlocks" => [],
"innerContent" => [
"<a href='https://example.com' class='wp-block-button__link'>Click Me</a>"
]
]
How to Use This in Laravel
You can structure the content as a JSON-encoded array and pass it to the WordPress REST API when creating or updating posts. Here’s an example of how to send multiple blocks:
$content = [
[
"blockName" => "core/paragraph",
"attrs" => [],
"innerHTML" => "<p>This is a paragraph block.</p>",
"innerBlocks" => [],
"innerContent" => [
"<p>This is a paragraph block.</p>"
]
],
[
"blockName" => "core/heading",
"attrs" => ["level" => 2],
"innerHTML" => "<h2>Heading Block</h2>",
"innerBlocks" => [],
"innerContent" => [
"<h2>Heading Block</h2>"
]
]
];
// Pass $content as JSON to the API.
$data = [
'title' => 'Post with Blocks',
'content' => json_encode($content),
'status' => 'publish'
];
Let me know if you’d like additional examples or a deeper explanation of any specific block!
