{"id":27,"date":"2019-11-08T16:15:43","date_gmt":"2019-11-08T16:15:43","guid":{"rendered":"https:\/\/potatodie.nl\/diffuse-write-ups\/?p=27"},"modified":"2020-06-02T15:49:05","modified_gmt":"2020-06-02T15:49:05","slug":"gutenberg-group-blocks-full-width-containers","status":"publish","type":"post","link":"https:\/\/potatodie.nl\/diffuse-write-ups\/gutenberg-group-blocks-full-width-containers\/","title":{"rendered":"Use Gutenberg Group blocks for full-width containers"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">With the WordPress Gutenberg editor it is easy to create full-width blocks. We can use them to create rows that span the whole width of a page. Then we can set a background colour or image for that row, while its content aligns with the content of regular (normal width) blocks. This is often used for headers, footers, navigation bars as well as sections that need to stand out.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We&#8217;ll need Group blocks,  present in Gutenberg Core since WordPress 5.3. For older versions you&#8217;ll need the Gutenberg plug-in.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We will also need theme support for full-width alignment. Check if support is present by examining a Group block:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"391\" height=\"258\" src=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/01\/group-wide.png\" alt=\"\" class=\"wp-image-195\" srcset=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/01\/group-wide.png 391w, https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2020\/01\/group-wide-300x198.png 300w\" sizes=\"auto, (max-width: 391px) 100vw, 391px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If the alignment options don&#8217;t show up, activate this feature for the theme with the following line in <code>functions.php<\/code>:<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-php\">\n      PHP    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-2119039129\" \n    id=\"codemirror-2119039129\"\n  >add_theme_support(&#039;align-wide&#039;);<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-2119039129'), {\n      mode: 'php',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: false,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Editing with Gutenberg<\/h2>\n\n\n\n<p class=\"my-full-width-container wp-block-paragraph\">Creating the full-width row in the block editor is now a piece of cake. In fact, we have already done that above for the greatest part.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Create a Group block<\/li><li>Change its alignment to <em>Full Width.<\/em><\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The only thing left is to add a class to the Group block to determine the background. You could do this using the color settings of the Inspector controls. Or set a classname manually:<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\"><li> In the <em>Advanced<\/em> panel of the Inspector controls, set an additional CSS class <code>my-full-width-container<\/code>.  <br><br><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"486\" class=\"wp-image-198\" style=\"width: 250px;\" src=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2019\/11\/group-advanced.png\" alt=\"\" srcset=\"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2019\/11\/group-advanced.png 276w, https:\/\/potatodie.nl\/diffuse-write-ups\/wp-content\/uploads\/2019\/11\/group-advanced-154x300.png 154w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/li><li>Save.<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s it. The rest is styling.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Stretching to full width<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Changing the alignment to <em>Full Width<\/em> basically adds a CSS class <code>alignfull<\/code> to the block. There are several ways to style a full-width block to make it actually stretch from the left to the right side of the page. Here I will just set the width to the width of the viewport and position the block relatively.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Relative to what?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The calculation of the relative position depends on the margin and padding of the container. In (default) WordPress themes this wrapper often has class <code>entry-content<\/code>. Suppose we have the following CSS for the wrapper:<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-css\">\n      CSS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-2142025799\" \n    id=\"codemirror-2142025799\"\n  >.entry-content {\n\tpadding-left: 15px;\n\tpadding-right: 15px;\n    \n\tmargin: 0 1rem;\n\tmax-width: calc(100% - 2rem);\n\t\n\t@media only screen and (min-width: 768px) {\n\t\tmargin: 0 10%;\n\t\tmax-width: 80%;\n\t}\n\t\n\t@media only screen and (min-width: 1500px) {\n\t\tmargin: 0 auto;\n\t\tmax-width: 1200px;\n\t}\t\t\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-2142025799'), {\n      mode: 'css',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Calculate the <code>left<\/code> property of the <code>alignfull<\/code> class by just taking  minus the sum of the element&#8217;s left margin and padding:<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-css\">\n      CSS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-2106794894\" \n    id=\"codemirror-2106794894\"\n  >.alignfull {\n    left: calc(-1rem - 15px);\n    position: relative;\n    \n    max-width: 100vw;\n    width: 100vw;\n    \n\t@media only screen and (min-width: 768px) {\n        left: calc(-1.25 * (10% + 15px));\n    }\n\n\t@media only screen and (min-width: 1500px) {\n        left: calc(-50vw + 50%); \n    }\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-2106794894'), {\n      mode: 'css',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">That puts the full-width row on the spot where we want it. A problem that may arise is that browsers don&#8217;t fully agree whether 100vw is in- or excluding the vertical scrollbar. In Firefox for instance the full-width row would be a little too wide. You might want to add <code>overflow: hidden<\/code> to a containing element like <code>main<\/code> to solve this.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Colourful full width<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To style the new full-width row, edit the CSS for the class defined in step 3 above.<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-css\">\n      CSS    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-1584197399\" \n    id=\"codemirror-1584197399\"\n  >.my-full-width-container {\n    background: rgb(241, 149, 32);\n    padding-left: 0;\n    padding-right: 0;\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-1584197399'), {\n      mode: 'css',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: false,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Align inner container<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Group block very conveniently adds an inner container with class  <code>.wp-block-group__inner-container<\/code>. Match margins and padding of the inner container with those of the regular content blocks, by duplicating the style definitions of <code>.entry-content<\/code> above for the inner container.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now child blocks inside the full-width Group block will align with the content in regular blocks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">SCSS version<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For completeness here are the styles given above in Sass flavour.<\/p>\n\n\n<div class=\"wp-block-advanced-gutenberg-blocks-code\">\n  <header class=\"wp-block-advanced-gutenberg-blocks-code__header\">\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__lang is-lang-sass\">\n      Sass    <\/div>\n    <div class=\"wp-block-advanced-gutenberg-blocks-code__file\">\n          <\/div>\n  <\/header>\n  <textarea \n    class=\"wp-block-advanced-gutenberg-blocks-code__source\" \n    name=\"codemirror-15993328\" \n    id=\"codemirror-15993328\"\n  >$grid-gutter-width: 30px;\n$spacer: 1rem;\n\n%wrap {\n\tpadding-left: $grid-gutter-width \/ 2;\n\tpadding-right: $grid-gutter-width \/ 2;\n\t\n\tmax-width: calc(100% - (2 * #{ $spacer }));\n\tmargin: 0 $spacer;\n\t\n\t@include media(tablet) {\n\t\tmax-width: 80%;\n\t\tmargin: 0 10%;\n\t}\n\t\n\t@include media(wide) {\n\t\tmax-width: 1200px;\n\t\tmargin: 0 auto;\n\t}\t\t\n}\n\n.entry-content {\n\t@extend %wrap;\n}\n\n.alignfull {\n    position: relative;\n    left: calc(-#{$spacer} - #{$grid-gutter-width}\/2);\n    width: 100vw;\n    max-width: 100vw;\n    \n    @include media(tablet) {\n        left: calc(-1.25 * (10% + #{$grid-gutter-width}\/2));\n    }\n\n    @include media(wide) {\n        left: calc(-50vw + 50%); \n    } \n\n\t.wp-block-group__inner-container {   \n\t\t@extend %wrap;\n\t}\n}<\/textarea>\n  <script>\n    CodeMirror.fromTextArea( document.getElementById('codemirror-15993328'), {\n      mode: 'sass',\n      readOnly: true,\n      theme: 'hopscotch', \n      lineNumbers: true,\n      firstLineNumber: 1,\n      matchBrackets: true,\n      indentUnit: 4,\n      tabSize: 4,\n      lineWrapping: true,\n    } ); \n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>With the WordPress Gutenberg editor it is easy to create full-width blocks. We can use them to create rows that span the whole width of a page. Then we can set a background colour or image for that row, while its content aligns with the content of regular (normal width) blocks. This is often used [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,7,4],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-gutenberg","category-web-development","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":28,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":602,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/posts\/27\/revisions\/602"}],"wp:attachment":[{"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/potatodie.nl\/diffuse-write-ups\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}