{"id":57,"date":"2025-09-26T08:50:57","date_gmt":"2025-09-26T08:50:57","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/element-block\/"},"modified":"2025-09-26T09:36:26","modified_gmt":"2025-09-26T09:36:26","slug":"element-block","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/element-block\/","title":{"rendered":"Element block"},"content":{"rendered":"\n<p class=\"lead\">The Element block is a block that can contain other blocks.<\/p>\n\n\n\n<p>By default the HTML tag name <code>div<\/code> is used, but it can be changed using the <strong>Element type<\/strong> block controls:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-1.png\" alt=\"\" class=\"wp-image-205\"\/><\/figure>\n\n\n\n<p>The block also supports receiving any custom attributes:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-2.png\" alt=\"\" class=\"wp-image-206\"\/><\/figure>\n\n\n\n<p>As with most blocks, the block also accepts Tailwind classes.<\/p>\n\n\n\n<p>In combination with a custom tag name, custom attributes and any Tailwind classes, the Element block can be used to create almost anything you could normally write manually in plain HTML.<\/p>\n\n\n\n<p>Most commonly you may wish to display items in a row:<\/p>\n\n\n\n<p><code>flex flex-col sm:flex-row gap-4<\/code><\/p>\n\n\n\n<p>or in a grid:<\/p>\n\n\n\n<p><code>grid sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6<\/code><\/p>\n\n\n\n<p>For simplicity, the block also supports adding a background image or video directly from the WordPress media library by selecting <strong>Add background<\/strong> from the block toolbar:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-4.png\" alt=\"\" class=\"wp-image-208\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>In ska-blocks plugin options under <strong>General<\/strong> it is possible to use <code>ska\/element<\/code> block as the default grouping block. This allows you to easily wrap multiple selected blocks in the Element block:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-3.png\" alt=\"\" class=\"wp-image-207\"\/><\/figure>\n\n\n\n<p>While the WordPress <code>core\/group<\/code> block is capable of displaying items in a &#8220;Row&#8221;, &#8220;Stack&#8221; or a &#8220;Grid&#8221; by using simple button controls, you may find that when it&#8217;s needed to more granularly customize the behavior (such as flex direction, justification, gap, column\/row spanning, etc) on different screen sizes, it will become confusing to mix the &#8220;WordPress way&#8221; of doing things and additional Tailwind classes (for features that WP doesn&#8217;t support), that is why using the <code>ska\/element<\/code> block from the get go you will only have Tailwind classes and know exactly what behavior you are getting and where to change it. If everything is defined using Tailwind classes you are also able to create Presets to later reuse that behavior elsewhere.<\/p>\n\n\n\n<p>Transforming a block to Element block will also wrap the block that is being &#8220;transformed&#8221;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-5.png\" alt=\"\" class=\"wp-image-209\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The Element block is a block that can contain other blocks. By default the HTML tag name div is used, but it can be changed using the Element type block controls: The block also supports receiving any custom attributes: As with most blocks, the block also accepts Tailwind classes. In combination with a custom tag&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[4],"class_list":["post-57","post","type-post","status-publish","format-standard","hentry","category-ska-blocks","tag-blocks"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":1,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/57\/revisions"}],"predecessor-version":[{"id":199,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/57\/revisions\/199"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=57"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=57"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}