{"id":1439,"date":"2025-01-04T13:24:33","date_gmt":"2025-01-04T13:24:33","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=1439"},"modified":"2025-01-04T13:24:35","modified_gmt":"2025-01-04T13:24:35","slug":"html-code-for-wordpress-block-editor-gutenberg-for-api-work-laravel-wordpress-rest-api-client","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/html-code-for-wordpress-block-editor-gutenberg-for-api-work-laravel-wordpress-rest-api-client\/","title":{"rendered":"HTML code for WordPress Block Editor (Gutenberg) for API work laravel-wordpress-rest-api-client"},"content":{"rendered":"\n

Here\u2019s a comprehensive list of commonly supported block names in the WordPress Block Editor (Gutenberg)<\/strong>. Each block name is explained, along with its attributes and example code for usage in the Gutenberg Block Format<\/strong>.<\/p>\n\n\n\n

\n\n\n\n

Table of Supported Block Names<\/strong><\/h3>\n\n\n\n
Block Name<\/th>Description<\/th>Common Attributes<\/th>Example Use Case<\/th><\/tr><\/thead>
core\/paragraph<\/code><\/td>Adds a text paragraph. Supports basic formatting like bold, italic, and links.<\/td>align<\/code>, placeholder<\/code><\/td>Text content with inline formatting.<\/td><\/tr>
core\/heading<\/code><\/td>Adds a heading block (H1-H6).<\/td>level<\/code>, align<\/code>, placeholder<\/code><\/td>Section headings.<\/td><\/tr>
core\/list<\/code><\/td>Creates ordered or unordered lists.<\/td>ordered<\/code>, align<\/code><\/td>Bullet or numbered lists.<\/td><\/tr>
core\/image<\/code><\/td>Embeds an image with captions and alt text.<\/td>url<\/code>, align<\/code>, alt<\/code>, id<\/code><\/td>Adding visual content.<\/td><\/tr>
core\/quote<\/code><\/td>Adds a styled quote.<\/td>value<\/code>, citation<\/code>, align<\/code><\/td>Highlighting key quotes.<\/td><\/tr>
core\/gallery<\/code><\/td>Displays a grid of images.<\/td>ids<\/code>, columns<\/code>, align<\/code><\/td>Showcasing photo collections.<\/td><\/tr>
core\/video<\/code><\/td>Embeds a video file.<\/td>src<\/code>, poster<\/code>, align<\/code><\/td>Adding self-hosted videos.<\/td><\/tr>
core\/audio<\/code><\/td>Embeds an audio file.<\/td>src<\/code>, align<\/code>, autoplay<\/code><\/td>Playing audio clips.<\/td><\/tr>
core\/code<\/code><\/td>Displays preformatted code snippets.<\/td>content<\/code>, align<\/code><\/td>Sharing code.<\/td><\/tr>
core\/html<\/code><\/td>Adds custom HTML content.<\/td>None<\/td>Custom HTML structures.<\/td><\/tr>
core\/embed<\/code><\/td>Embeds external content like YouTube, Twitter.<\/td>url<\/code>, type<\/code>, align<\/code><\/td>Embedding social media or videos.<\/td><\/tr>
core\/table<\/code><\/td>Creates a table with rows and columns.<\/td>align<\/code>, hasFixedLayout<\/code><\/td>Organizing tabular data.<\/td><\/tr>
core\/button<\/code><\/td>Adds a styled button with a link.<\/td>text<\/code>, url<\/code>, align<\/code><\/td>Call-to-action buttons.<\/td><\/tr>
core\/separator<\/code><\/td>Adds a horizontal divider.<\/td>align<\/code>, className<\/code><\/td>Dividing sections.<\/td><\/tr>
core\/spacer<\/code><\/td>Adds adjustable vertical space.<\/td>height<\/code><\/td>Adding spacing.<\/td><\/tr>
core\/columns<\/code><\/td>Creates a column layout.<\/td>columns<\/code>, align<\/code><\/td>Structuring content into columns.<\/td><\/tr>
core\/group<\/code><\/td>Groups multiple blocks together.<\/td>align<\/code>, className<\/code><\/td>Grouping blocks for styling.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n

Examples for Each Block<\/strong><\/h3>\n\n\n\n

1. Paragraph (core\/paragraph<\/code>)<\/strong><\/h4>\n\n\n\n
[\n    \"blockName\" => \"core\/paragraph\",\n    \"attrs\" => [],\n    \"innerHTML\" => \"<p>This is a sample paragraph with <strong>bold<\/strong> and <em>italic<\/em> text.<\/p>\",\n    \"innerBlocks\" => [],\n    \"innerContent\" => [\n        \"<p>This is a sample paragraph with <strong>bold<\/strong> and <em>italic<\/em> text.<\/p>\"\n    ]\n]\n<\/code><\/pre>\n\n\n\n
2. Heading (core\/heading<\/code>)<\/strong><\/h4>\n\n\n\n
[\n    \"blockName\" => \"core\/heading\",\n    \"attrs\" => [\"level\" => 2],\n    \"innerHTML\" => \"<h2>Sample Heading<\/h2>\",\n    \"innerBlocks\" => [],\n    \"innerContent\" => [\n        \"<h2>Sample Heading<\/h2>\"\n    ]\n]\n<\/code><\/pre>\n\n\n\n
3. List (core\/list<\/code>)<\/strong><\/h4>\n\n\n\n
[\n    \"blockName\" => \"core\/list\",\n    \"attrs\" => [\"ordered\" => false],\n    \"innerHTML\" => \"<ul><li>Item 1<\/li><li>Item 2<\/li><\/ul>\",\n    \"innerBlocks\" => [],\n    \"innerContent\" => [\n        \"<ul><li>Item 1<\/li><li>Item 2<\/li><\/ul>\"\n    ]\n]\n<\/code><\/pre>\n\n\n\n
4. Image (core\/image<\/code>)<\/strong><\/h4>\n\n\n\n
[\n    \"blockName\" => \"core\/image\",\n    \"attrs\" => [\"url\" => \"https:\/\/example.com\/image.jpg\", \"alt\" => \"Sample Image\"],\n    \"innerHTML\" => \"<figure><img src='https:\/\/example.com\/image.jpg' alt='Sample Image'\/><\/figure>\",\n    \"innerBlocks\" => [],\n    \"innerContent\" => [\n        \"<figure><img src='https:\/\/example.com\/image.jpg' alt='Sample Image'\/><\/figure>\"\n    ]\n]\n<\/code><\/pre>\n\n\n\n
5. Quote (core\/quote<\/code>)<\/strong><\/h4>\n\n\n\n
[\n    \"blockName\" => \"core\/quote\",\n    \"attrs\" => [],\n    \"innerHTML\" => \"<blockquote><p>Inspirational quote goes here.<\/p><cite>Author Name<\/cite><\/blockquote>\",\n    \"innerBlocks\" => [],\n    \"innerContent\" => [\n        \"<blockquote><p>Inspirational quote goes here.<\/p><cite>Author Name<\/cite><\/blockquote>\"\n    ]\n]\n<\/code><\/pre>\n\n\n\n
6. Gallery (core\/gallery<\/code>)<\/strong><\/h4>\n\n\n\n
[\n    \"blockName\" => \"core\/gallery\",\n    \"attrs\" => [\"ids\" => [1, 2, 3], \"columns\" => 3],\n    \"innerHTML\" => \"<figure class='wp-block-gallery columns-3'>...<\/figure>\",\n    \"innerBlocks\" => [],\n    \"innerContent\" => [\n        \"<figure class='wp-block-gallery columns-3'>...<\/figure>\"\n    ]\n]\n<\/code><\/pre>\n\n\n\n
7. Button (core\/button<\/code>)<\/strong><\/h4>\n\n\n\n
[\n    \"blockName\" => \"core\/button\",\n    \"attrs\" => [\"text\" => \"Click Me\", \"url\" => \"https:\/\/example.com\"],\n    \"innerHTML\" => \"<a href='https:\/\/example.com' class='wp-block-button__link'>Click Me<\/a>\",\n    \"innerBlocks\" => [],\n    \"innerContent\" => [\n        \"<a href='https:\/\/example.com' class='wp-block-button__link'>Click Me<\/a>\"\n    ]\n]\n<\/code><\/pre>\n\n\n\n
\n\n\n\n
How to Use This in Laravel<\/strong><\/h3>\n\n\n\n
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:<\/p>\n\n\n\n
$content = [\n    [\n        \"blockName\" => \"core\/paragraph\",\n        \"attrs\" => [],\n        \"innerHTML\" => \"<p>This is a paragraph block.<\/p>\",\n        \"innerBlocks\" => [],\n        \"innerContent\" => [\n            \"<p>This is a paragraph block.<\/p>\"\n        ]\n    ],\n    [\n        \"blockName\" => \"core\/heading\",\n        \"attrs\" => [\"level\" => 2],\n        \"innerHTML\" => \"<h2>Heading Block<\/h2>\",\n        \"innerBlocks\" => [],\n        \"innerContent\" => [\n            \"<h2>Heading Block<\/h2>\"\n        ]\n    ]\n];\n\n\/\/ Pass $content as JSON to the API.\n$data = [\n    'title' => 'Post with Blocks',\n    'content' => json_encode($content),\n    'status' => 'publish'\n];\n<\/code><\/pre>\n\n\n\n
Let me know if you’d like additional examples or a deeper explanation of any specific block!<\/p>\n","protected":false},"excerpt":{"rendered":"
Here\u2019s a comprehensive list of commonly supported block names in the WordPress Block Editor (Gutenberg). Each block name is explained,<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1439","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/1439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=1439"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/1439\/revisions"}],"predecessor-version":[{"id":1440,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/1439\/revisions\/1440"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=1439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=1439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=1439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}