HTML code for WordPress Block Editor (Gutenberg) for API work laravel-wordpress-rest-api-client

Posted on by

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 NameDescriptionCommon AttributesExample Use Case
core/paragraphAdds a text paragraph. Supports basic formatting like bold, italic, and links.align, placeholderText content with inline formatting.
core/headingAdds a heading block (H1-H6).level, align, placeholderSection headings.
core/listCreates ordered or unordered lists.ordered, alignBullet or numbered lists.
core/imageEmbeds an image with captions and alt text.url, align, alt, idAdding visual content.
core/quoteAdds a styled quote.value, citation, alignHighlighting key quotes.
core/galleryDisplays a grid of images.ids, columns, alignShowcasing photo collections.
core/videoEmbeds a video file.src, poster, alignAdding self-hosted videos.
core/audioEmbeds an audio file.src, align, autoplayPlaying audio clips.
core/codeDisplays preformatted code snippets.content, alignSharing code.
core/htmlAdds custom HTML content.NoneCustom HTML structures.
core/embedEmbeds external content like YouTube, Twitter.url, type, alignEmbedding social media or videos.
core/tableCreates a table with rows and columns.align, hasFixedLayoutOrganizing tabular data.
core/buttonAdds a styled button with a link.text, url, alignCall-to-action buttons.
core/separatorAdds a horizontal divider.align, classNameDividing sections.
core/spacerAdds adjustable vertical space.heightAdding spacing.
core/columnsCreates a column layout.columns, alignStructuring content into columns.
core/groupGroups multiple blocks together.align, classNameGrouping 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!