{"id":2106,"date":"2021-11-01T10:00:00","date_gmt":"2021-11-01T10:00:00","guid":{"rendered":"https:\/\/marcosrego.com\/account\/?p=2106"},"modified":"2022-02-27T15:55:43","modified_gmt":"2022-02-27T15:55:43","slug":"block-editor-features-theme","status":"publish","type":"post","link":"https:\/\/marcosrego.com\/account\/blog\/block-editor-features-theme\/","title":{"rendered":"Get 5 official block editor features with any theme"},"content":{"rendered":"\n<p class=\"\">Use Mr.Dev.&#8217;s FW to enable block editor features such as templates creation, responsive embeds, wide alignments, custom line-heights, custom spacing and more&#8230;<\/p>\n\n\n\n<!--more-- class=\" \">\n<!--noteaser-->\n\n\n\n<p class=\"\">The block editor (aka Gutenberg) is the default site builder of WordPress but some handy features might be hidden, waiting for your theme to declare support.<\/p>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><ul class=\"toc_list\"><li><a href=\"#which_block_editor_features_can_be_enabled\"><span class=\"toc_number toc_depth_1\">1<\/span> Which block editor features can be enabled?<\/a><\/li><li><a href=\"#how_to_get_those_block_editor_features\"><span class=\"toc_number toc_depth_1\">2<\/span> How to get those block editor features?<\/a><ul><li><a href=\"#block_templates\"><span class=\"toc_number toc_depth_2\">2.1<\/span> Block templates<\/a><\/li><li><a href=\"#responsive_embeds\"><span class=\"toc_number toc_depth_2\">2.2<\/span> Responsive embeds<\/a><\/li><li><a href=\"#wide_alignment\"><span class=\"toc_number toc_depth_2\">2.3<\/span> Wide Alignment<\/a><\/li><li><a href=\"#custom_line-height\"><span class=\"toc_number toc_depth_2\">2.4<\/span> Custom Line-Height<\/a><\/li><li><a href=\"#custom_spacing\"><span class=\"toc_number toc_depth_2\">2.5<\/span> Custom Spacing<\/a><\/li><\/ul><\/li><li><a href=\"#getting_mrdev8217s_framework\"><span class=\"toc_number toc_depth_1\">3<\/span> Getting Mr.Dev.&#8217;s Framework<\/a><\/li><li><a href=\"#comments\"><span class=\"toc_number toc_depth_1\">4<\/span> Comments<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\"><span id=\"which_block_editor_features_can_be_enabled\"><strong>Which block editor features can be enabled?<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">Features such as <strong>creation of block templates, responsive embeds, wide alignments for images, custom line-heights and custom spacing<\/strong> usually must be enabled by <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-support\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-support\/\" rel=\"noreferrer noopener\">adding some code snippets into your theme<\/a>.<\/p>\n\n\n\n<p class=\"\">But what if you don&#8217;t have control over your theme code? What if you want to always have those features despite the theme you use?<\/p>\n\n\n\n<p class=\"\">Since the version 0.9.492 of <a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\" data-type=\"post\" data-id=\"403\">Mr.Dev.&#8217;s Framework<\/a>, that you can enable all those features without touching any code.<\/p>\n\n\n\n<aside class=\"       wp-block-group sidebar has-main-text-color-color has-aside-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<section class=\"    wp-block-group has-main-text-color-color has-main-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"   has-main-text-color-color has-text-color wp-block-heading\"><strong>Did you know?<\/strong><\/h3>\n\n\n\n<figure class=\"    wp-block-image size-large\"><a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"538\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-1024x538.png\" alt=\"Mr.Dev.&#039;s Framework Opengraph Image\" class=\"wp-image-1026\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph-768x403.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><\/figure>\n\n\n\n<p class=\"  has-main-text-color-color has-text-color\">When <strong>Mr.Dev.<\/strong> sells his <strong>framework<\/strong>, <strong>one unique payment<\/strong> gives you <strong>updates forever<\/strong> and for <strong>unlimited websites<\/strong>!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\"><strong>Know more<\/strong><\/a><\/div>\n<\/div>\n<\/div><\/section>\n<\/div><\/aside>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"how_to_get_those_block_editor_features\"><strong>How to get those block editor features?<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">On the <strong>Configuration tab<\/strong> of <strong><a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\" data-type=\"post\" data-id=\"403\">Mr.Dev.&#8217;s Framework<\/a><\/strong>, located in <strong>Settings > Mr.Dev.<\/strong> <em>(Instead of Mr.Dev. you might see your site name, depending of the whitelabel configuration)<\/em>, you can find the section <strong>Styles Configuration<\/strong> with the dropdown <strong>Blocks Styles Picker<\/strong> and also the section <strong>Layout configuration<\/strong> with the dropdown <strong>Layout Control<\/strong>.<\/p>\n\n\n\n<figure class=\"  wp-block-gallery columns-1 is-cropped wp-block-gallery-4 is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/mrdev-framework-block-features.png\"><img decoding=\"async\" loading=\"lazy\" width=\"1008\" height=\"611\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/mrdev-framework-block-features.png\" alt=\"Mr.Dev.&#039;s Framework - Block Features\" data-id=\"2137\" data-full-url=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/mrdev-framework-block-features.png\" data-link=\"https:\/\/marcosrego.com\/account\/blog\/block-editor-features-theme\/attachment\/mrdev-framework-block-features\/\" class=\"wp-image-2137\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/mrdev-framework-block-features.png 1008w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/mrdev-framework-block-features-300x182.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/mrdev-framework-block-features-768x466.png 768w\" sizes=\"(max-width: 1008px) 100vw, 1008px\" title=\"-\"><\/a><figcaption class=\"blocks-gallery-item__caption\">Block Styles Picker also allows to enable extra features of the block editor (aka Gutenberg).<br>(Screenshot taken on October 2021)<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"\">Depending of the option you choose on those dropdowns, different features will be enabled:<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"block_templates\"><strong>Block templates<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">If your theme already enables block templates, you can leave the dropdown <strong>Layout Control<\/strong> with the option &#8220;Disabled \/ Theme Controlled&#8221;, otherwise you can select &#8220;Enable block templates (Recommended)&#8221;.<\/p>\n\n\n\n<p class=\"\">You&#8217;ll also need to have WordPress 5.8 or above. <\/p>\n\n\n\n<p class=\"\">The <strong>Block templates<\/strong> feature, allows to add blocks inside template parts such as header and footer. All changes you do on a block inside a template part will apply to all pages using that template.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-8\">\n<div class=\" mr-phone-hide  wp-block-column mr-phone-hide is-layout-flow\" style=\"flex-basis:16%\">\n<figure class=\"    wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"298\" height=\"688\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-template-option.png\" alt=\"-\" class=\"wp-image-2145\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-template-option.png 298w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-template-option-130x300.png 130w\" sizes=\"(max-width: 298px) 100vw, 298px\" title=\"-\"><\/figure>\n<\/div>\n\n\n\n<div class=\"  wp-block-column is-layout-flow\" style=\"flex-basis:78%\">\n<figure class=\"    wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"482\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-template-editor-1024x482.png\" alt=\"Block editor template editor\" class=\"wp-image-2146\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-template-editor-1024x482.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-template-editor-300x141.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-template-editor-768x362.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-template-editor-1536x724.png 1536w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-template-editor.png 1908w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"responsive_embeds\"><strong>Responsive embeds<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">This block editor feature will be enabled if you select one of this options:<\/p>\n\n\n\n<ul class=\"\"><li><strong>Disabled but with extra block features<\/strong> &#8211; It will not show the colors and sizes created using the framework (or the customizer) inside the block editor.<\/li><li><strong>Enabled with extra block features and allow custom styles<\/strong><\/li><li><strong>Enabled with extra block features<\/strong><\/li><\/ul>\n\n\n\n<p class=\"\">The <strong>Responsive embeds<\/strong> feature, automatically applies styles to embedded content to reflect the aspect ratio of content that is embedded in an iFrame, using the class <em>wp-embed-responsive<\/em> on the &lt;body&gt;.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"wide_alignment\"><strong>Wide Alignment<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">This block editor feature will be enabled if you select one of this options:<\/p>\n\n\n\n<ul class=\"\"><li><strong>Disabled but with extra block features<\/strong> &#8211; It will not show the colors and sizes created using the framework (or the customizer) inside the block editor.<\/li><li><strong>Enabled with extra block features and allow custom styles<\/strong><\/li><li><strong>Enabled with extra block features<\/strong><\/li><\/ul>\n\n\n\n<p class=\"\">The <strong>Wide Alignment <\/strong>feature, gives the possibility of defining &#8220;wide&#8221; and &#8220;full&#8221; alignments to certain blocks, such as the image block.<\/p>\n\n\n\n<figure class=\"    wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"578\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-wide-alignment-1024x578.png\" alt=\"Block editor wide alignment\" class=\"wp-image-2152\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-wide-alignment-1024x578.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-wide-alignment-300x169.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-wide-alignment-768x433.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-wide-alignment.png 1453w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"custom_line-height\"><strong>Custom Line-Height<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">This block editor feature will be enabled if you select one of this options:<\/p>\n\n\n\n<ul class=\"\"><li><strong style=\"color: var(--main-text-color) ; font-family: var(--text-font, &quot;Arial,Helvetica Neue,Helvetica&quot;); background-color: var(--main-background-color, #dfdfd0);\">Enabled with extra block features and allow custom styles<\/strong><\/li><li><strong><strong>Enabled and allow custom styles per block<\/strong><\/strong><\/li><\/ul>\n\n\n\n<p class=\"\">The <strong>Custom Line-Height<\/strong> feature, allows to customize the line height of certain blocks, such as the paragraph and headings.<\/p>\n\n\n\n<figure class=\"    wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"776\" height=\"280\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-paragraph-line-height.png\" alt=\"Block editor paragraph line-height\" class=\"wp-image-2153\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-paragraph-line-height.png 776w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-paragraph-line-height-300x108.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-paragraph-line-height-768x277.png 768w\" sizes=\"(max-width: 776px) 100vw, 776px\" title=\"-\"><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"custom_spacing\"><strong>Custom Spacing<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">This block editor feature will be enabled if you select one of this options:<\/p>\n\n\n\n<ul class=\"\"><li><strong style=\"color: var(--main-text-color) ; font-family: var(--text-font, &quot;Arial,Helvetica Neue,Helvetica&quot;); background-color: var(--main-background-color, #dfdfd0);\">Enabled with extra block features and allow custom styles<\/strong><\/li><li><strong><strong>Enabled and allow custom styles per block<\/strong><\/strong><\/li><\/ul>\n\n\n\n<p class=\"\">The <strong>Custom Spacing<\/strong> feature, will show padding controls in certain blocks, such as the column block. You can change the value for individual sides or keep the same for all sides.<\/p>\n\n\n\n<figure class=\"    wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"774\" height=\"599\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-padding-spacing.png\" alt=\"Block editor padding spacing\" class=\"wp-image-2156\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-padding-spacing.png 774w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-padding-spacing-300x232.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/block-editor-padding-spacing-768x594.png 768w\" sizes=\"(max-width: 774px) 100vw, 774px\" title=\"-\"><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<p class=\"\"><strong><span style=\"color: var(--main-text-color) ; font-family: var(--text-font, &quot;Arial,Helvetica Neue,Helvetica&quot;); background-color: var(--main-background-color, #dfdfd0);\">And the <\/span><em>Enabled<\/em><span style=\"color: var(--main-text-color) ; font-family: var(--text-font, &quot;Arial,Helvetica Neue,Helvetica&quot;); background-color: var(--main-background-color, #dfdfd0);\"> option on the dropdown?<\/span><\/strong><\/p>\n\n\n\n<p class=\"\">It&#8217;s not part of this post&#8217;s topic, but if you prefer to let your theme\/plugins decide most of the available features, but still want to show the colors and sizes created using the framework (or the customizer) on the block editor, then that option is for you.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"getting_mrdev8217s_framework\"><strong>Getting Mr.Dev.&#8217;s Framework<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">If this easy method to enable block editor features despite the theme sounds good to you, but you don&#8217;t have this framework yet, then you can know more about it and get it anytime:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=mrdevs-framework\">Get it now<\/a><\/div>\n\n\n\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-main-background-color-color has-main-text-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\">Know more<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h2><span id=\"comments\"><b>Comments<\/b><\/span><\/h2>\n<div id=\"disqus_thread\"><\/div>\n<script>\nif(mrGetCookie('cookielawinfo-checkbox-functional') == 'yes') {\n    var disqus_config = function () {\n        this.page.url = (location.protocol+'\/\/'+location.host+location.pathname).replace(\"\/account\/\", \"\/\");\n        this.page.identifier = document.querySelector(\"article\").id.replace(\"post-\", \"\");\n    };\n    \n    (function() {\n    var d = document, s = d.createElement('script');\n    s.src = 'https:\/\/marcosrego-web.disqus.com\/embed.js';\n    s.setAttribute('data-timestamp', +new Date());\n    (d.head || d.body).appendChild(s);\n    })();\n} else {\n    document.querySelector('#disqus_thread').innerHTML = 'You cannot view or add comments because you did not consent to the use of functional cookies: <a class=\"  cli_manage_current_consent\" style=\"cursor:pointer;\">Manage your consent.<\/a>';\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Use Mr.Dev.&#8217;s FW to enable block editor features such as templates creation, responsive embeds, wide alignments, custom line-heights, custom spacing and more&#8230;<\/p>\n","protected":false},"author":1,"featured_media":2158,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[75,71,26,69,65,23],"_links":{"self":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2106"}],"collection":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/comments?post=2106"}],"version-history":[{"count":2,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2106\/revisions"}],"predecessor-version":[{"id":2222,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/2106\/revisions\/2222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media\/2158"}],"wp:attachment":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media?parent=2106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/categories?post=2106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/tags?post=2106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}