{"id":4795,"date":"2022-05-30T10:24:04","date_gmt":"2022-05-30T10:24:04","guid":{"rendered":"https:\/\/learncode.tinjurewp.com\/?p=4795"},"modified":"2022-05-31T10:24:29","modified_gmt":"2022-05-31T10:24:29","slug":"block-editor-understanding-blockgap","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/block-editor-understanding-blockgap\/","title":{"rendered":"Block Editor: Understanding BlockGap"},"content":{"rendered":"<p class=\"note icon-note\">Note: This post is part of understanding new features in full site editing (FSE) interface. This learning post is still in active development and updated regularly.<\/p>\n<p>Block Editor\u00a0<code>BlockGap<\/code>\u00a0(also known as spacing)\u00a0<a title=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/36797#issuecomment-978965318\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/36797#issuecomment-978965318\">adds<\/a>\u00a0&#8220;the gap blocks using margins (top margins) because there&#8217;s no &#8220;gap&#8221; support in regular <code>divs<\/code> (no flex or grid)&#8221;.<\/p>\n<p>In the\u00a0<a title=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-layout-and-spacing-options\/#h-blockgap\" href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-layout-and-spacing-options\/#h-blockgap\">Full Site Editing<\/a>, Carolina describes\u00a0<a title=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-layout-and-spacing-options\/#h-blockgap\" href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-layout-and-spacing-options\/#h-blockgap\">BlockGap<\/a>:<\/p>\n<p>The <code>blockGap<\/code> setting in\u00a0<code>theme.json<\/code>\u00a0sets the vertical spacing between blocks by adjusting the margins depending on the position of the block:<\/p>\n<ul>\n<li>The first block on the webpage and the first inner block or child block have no top or bottom margin.<\/li>\n<li>The following blocks have a top margin that corresponds to the value in the\u00a0<code>theme.json<\/code>\u00a0setting, and no bottom margin.<\/li>\n<\/ul>\n<p>Block Gap was initially introduced in\u00a0<a title=\"https:\/\/make.wordpress.org\/core\/2021\/09\/01\/whats-new-in-gutenberg-11-4-1-september\/\" href=\"https:\/\/make.wordpress.org\/core\/2021\/09\/01\/whats-new-in-gutenberg-11-4-1-september\/\">Gutenberg 11.4<\/a>\u00a0for spacing control in column blocks to handle gaps between the items, as\u00a0<a title=\"https:\/\/make.wordpress.org\/core\/files\/2021\/09\/Gap-Changes.mp4\" href=\"https:\/\/make.wordpress.org\/core\/files\/2021\/09\/Gap-Changes.mp4\">shown in this video link<\/a>. However, this created a problem.<!--more--><\/p>\n<h6>Why it is Important?<\/h6>\n<p>Recently, I was trying to add a featured image cover block at the top in a single post template with background, it creates an annoying gap at the top (see below).<\/p>\n<figure id=\"attachment_4796\" aria-describedby=\"caption-attachment-4796\" style=\"width: 1000px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"size-full wp-image-4796 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-blockGap.jpg\" alt=\"\" width=\"1000\" height=\"332\" \/><figcaption id=\"caption-attachment-4796\" class=\"wp-caption-text\"><noscript><img decoding=\"async\" class=\"size-full wp-image-4796 lazyload\" src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-blockGap.jpg\" alt=\"\" width=\"1000\" height=\"332\" srcset=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-blockGap.jpg 1000w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-blockGap-300x100.jpg 300w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-blockGap-768x255.jpg 768w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-blockGap-200x66.jpg 200w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/noscript> Screenshot showing to gap.<\/figcaption><\/figure>\n<p>I spent almost an entire day trying to eliminate the top gap, but in vain. Therefore, I decided to dig in deeper in GitHub discussion threads and understand how this problem is solved.<\/p>\n<p><code>BlockGap<\/code> creates problem handling top and bottom block margin, as discussed in detail in <a title=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/37344\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/37344\">this GitHub PR #37344<\/a>. This is especially <code>true<\/code>, when we want to\u00a0<a title=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/37344#issuecomment-1039658987\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/37344#issuecomment-1039658987\">stack colored layout blocks<\/a>\u00a0(Group, Column) on top of each other while creating a theme.<\/p>\n<p>In\u00a0<a title=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/37344#issuecomment-1039658987\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/37344#issuecomment-1039658987\">this GitHub PR<\/a>, discusses stacking colored layout blocks on the top of each other without creating gap\u00a0<a title=\"https:\/\/user-images.githubusercontent.com\/6458278\/153959313-bd410f46-e99b-4e20-8525-c34282ff9c84.mp4\" href=\"https:\/\/user-images.githubusercontent.com\/6458278\/153959313-bd410f46-e99b-4e20-8525-c34282ff9c84.mp4\">as demonstrated in this sort video<\/a>.<\/p>\n<p>Other related discussions on <code>blockGap<\/code> feature is available following the GitHub PRs listed under Resource section.<\/p>\n<h6><strong>Using BlockGap in <code>theme.json<\/code><\/strong><\/h6>\n<p>In\u00a0<code>theme.json<\/code>\u00a0blockGap can be enabled with its value set to\u00a0<code>true<\/code>\u00a0under \u201c<code>settings<\/code>\u201c.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-json\">{\n\t&quot;version&quot;: 2,\n    ...\n    ...\n\t&quot;settings&quot;: {\n\t\t&quot;spacing&quot;: {\n\t\t\t&quot;blockGap&quot;: true\n\t\t}\n\t}\n   ...\n   ...\n}<\/code><\/pre>\n<p>However, if the\u00a0<code>appearanceTools<\/code>\u00a0in the\u00a0<code>settings<\/code>\u00a0is set to\u00a0<code>true<\/code>, then\u00a0<code>blockGap<\/code>\u00a0is also set to\u00a0<code>true<\/code>\u00a0and don&#8217;t require setting <code>blockGap<\/code>\u00a0separately.<\/p>\n<p>By default,\u00a0<code>blockGap<\/code>\u00a0value is set to\u00a0<code>false<\/code> or disabled by default. It&#8217;s an opt-in property, just like other\u00a0<code>appearanceTolls<\/code>\u00a0items.<\/p>\n<p><strong>Default <code>blockGap<\/code> Value<\/strong><\/p>\n<p>In the\u00a0<code>theme.json<\/code>\u00a0the default\u00a0<code>blockGap<\/code>\u00a0value is set under the\u00a0<code>styles<\/code>\u00a0section as shown below:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-json\">{\n\t&quot;version&quot;: 2,\n    ...\n    ...\n\t&quot;styles&quot;: {\n\t\t&quot;spacing&quot;: {\n\t\t\t&quot;blockGap&quot;: &quot;1.5rem&quot;\n\t\t}\n\t}\n    ...\n    ...\n}<\/code><\/pre>\n<p>Here is an\u00a0<a title=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/blob\/trunk\/theme.json#L325-L327\" href=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/blob\/trunk\/theme.json#L325-L327\">example<\/a>\u00a0from Twenty Twenty-Two theme, where\u00a0<code>blockGap<\/code>\u00a0default value is set to\u00a0<code>1.5rem<\/code>.<\/p>\n<h6>Learning from Others<\/h6>\n<p>With this background, I started digging other block themes like <a href=\"https:\/\/github.com\/wpengine\/frost\" target=\"_blank\" rel=\"noopener\">Frost<\/a>, <a href=\"https:\/\/github.com\/Automattic\/themes\/tree\/trunk\/pendant\" target=\"_blank\" rel=\"noopener\">pendant<\/a>, <a href=\"https:\/\/github.com\/Automattic\/themes\/tree\/trunk\/archeo\" target=\"_blank\" rel=\"noopener\">archeo<\/a> and others to understand how this problem was solved in those themes. In my local test site, I was using the latest versions of the WordPress 6.1 and Gutenberg 13.0, and the blockGap PR was already merged in the core.<\/p>\n<p>After experimenting these themes and comparing with mine for sometimes, I realized that indeed my bug was related with my template structure, rather than the proper use of <code>blockGap<\/code> feature in my block theme.<\/p>\n<figure id=\"attachment_4797\" aria-describedby=\"caption-attachment-4797\" style=\"width: 723px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-4797 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-single-cover.jpg\" alt=\"\" width=\"723\" height=\"485\" \/><figcaption id=\"caption-attachment-4797\" class=\"wp-caption-text\"><noscript><img decoding=\"async\" class=\"size-full wp-image-4797 lazyload\" src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-single-cover.jpg\" alt=\"\" width=\"723\" height=\"485\" srcset=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-single-cover.jpg 723w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-single-cover-300x201.jpg 300w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2022\/05\/scrn-single-cover-200x134.jpg 200w\" sizes=\"(max-width: 723px) 100vw, 723px\" \/><\/noscript> Screenshot showing cover image without the gap.<\/figcaption><\/figure>\n<p>As shown in the following code snippets, the <code>header-single-cover pattern<\/code> (line 3) was called before the &#8220;main&#8221; group which created the gap.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-markup\">&lt;!-- wp:template-part {&quot;slug&quot;:&quot;header-small-dark&quot;,&quot;tagName&quot;:&quot;header&quot;} \/--&gt;\n\n&lt;!-- wp:pattern {&quot;slug&quot;:&quot;khesara\/header-single-cover&quot;} \/--&gt;\n\n    &lt;!-- wp:group {&quot;tagName&quot;:&quot;main&quot;,&quot;style&quot;:{&quot;spacing&quot;:{&quot;margin&quot;:{&quot;top&quot;:&quot;0&quot;},&quot;padding&quot;:{&quot;bottom&quot;:&quot;80px&quot;}}},&quot;className&quot;:&quot;site-content&quot;} --&gt;\n    &lt;main class=&quot;wp-block-group site-content&quot; style=&quot;margin-top:0;padding-bottom:80px&quot;&gt;\n      \n     ...\n     ...<\/code><\/pre>\n<p>But when the <code>header-single-cover<\/code> pattern was called after the &#8220;main&#8221; group (line: 6), the top margin was eliminated because of the &#8220;margin-top: 0px&#8221; inline value of the &#8220;main&#8221; group.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-markup\">&lt;!-- wp:template-part {&quot;slug&quot;:&quot;header-small-dark&quot;,&quot;tagName&quot;:&quot;header&quot;} \/--&gt;\n\n    &lt;!-- wp:group {&quot;tagName&quot;:&quot;main&quot;,&quot;style&quot;:{&quot;spacing&quot;:{&quot;margin&quot;:{&quot;top&quot;:&quot;0&quot;},&quot;padding&quot;:{&quot;bottom&quot;:&quot;80px&quot;}}},&quot;className&quot;:&quot;site-content&quot;} --&gt;\n    &lt;main class=&quot;wp-block-group site-content&quot; style=&quot;margin-top:0;padding-bottom:80px&quot;&gt;\n      \n  &lt;!-- wp:pattern {&quot;slug&quot;:&quot;khesara\/header-single-cover&quot;} \/--&gt;\n ....\n ....<\/code><\/pre>\n<h6>Wrapping Up<\/h6>\n<p>In this short learning-note post, discussion on <code>blockGap<\/code> features and how it can be used to eliminate top- and bottom- margins in templates was explored.<\/p>\n<h6>Resources<\/h6>\n<p>Before starting to create my own block patterns, I did a brief google search for useful guide and tutorials on creating patterns and found the following useful for my project.<\/p>\n<ul>\n<li><a title=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-layout-and-spacing-options\/#h-blockgap\" href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-layout-and-spacing-options\/#h-blockgap\">Theme.json layout and spacing options<\/a>\u00a0| Full Site Editing<\/li>\n<li><a title=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/37459\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/37459\">Add block gap support for group blocks #37459<\/a>\u00a0| GitHub<\/li>\n<li><a title=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/37344\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/37344\">Group Blocks: Add margin support (top\/bottom). #37344<\/a>\u00a0| GitHub<\/li>\n<li><a title=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/36797\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/36797\">Site Editor: Can&#8217;t remove group block margins #36797<\/a>\u00a0| GitHub<\/li>\n<li><a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/group-block\/\" target=\"_blank\" rel=\"noopener\">Group Block<\/a> | WordPress Support<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post is part of understanding new features in full site editing (FSE) interface. This learning post is still in active development and updated regularly. Block Editor\u00a0BlockGap\u00a0(also known as spacing)\u00a0adds\u00a0&#8220;the gap blocks using margins (top margins) because there&#8217;s no &#8220;gap&#8221; support in regular divs (no flex or grid)&#8221;. In the\u00a0Full Site Editing, Carolina describes\u00a0BlockGap: [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-4795","post","type-post","status-publish","format-standard","hentry","category-general"],"_links":{"self":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/4795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/comments?post=4795"}],"version-history":[{"count":0,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/4795\/revisions"}],"wp:attachment":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/media?parent=4795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/categories?post=4795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/tags?post=4795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}