Assembler - Remove blockGap between header/sections/footer in new assembler theme

[miksansegundo]

Related WordPress/gutenberg#51242

What

Remove the block gap only between header/sections/footer in BC3:

• from the editor

BEFORE	AFTER

• from the front

BEFORE	AFTER

Note that I changed the background color of the site to orange to show the gap.

Why

Because users cannot remove that gap easily.

It can be removed by setting the margin as 0 on each pattern container group. However, this option is not viable because there is a bug that doesn't allow this to work on template parts and the assembler puts the header and footer in template parts.

A downside

Without the gap between patterns, users won't see the following button to add patterns from the canvas:

Users will have to add patterns using the List view options to add before/after:

How

Check first the status of the Gutenberg issue Post Content block adds additional margin one can not remove through the UI because they may remove the gap.

We can add site-wide custom CSS in theme.json or style.css to remove the gap only between header/sections/footer:

• from the editor

.editor-styles-wrapper :where(.wp-site-blocks) > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

• from the front

:where(.wp-site-blocks) > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

• from the assembler will also remove this gap, we use the variable --pattern-large-preview-block-gap.

[miksansegundo]

What do you think about this solution? @alaczek @Automattic/lego

[alaczek]

Would your solution leave the gap between patterns (within the homepage section) or did we take care of that already?

[miksansegundo]

Yes, this solution removes the gap between the first-level patterns, including between homepage sections.

[miksansegundo]

@arthur791004, just a note for checking that we load these styles in the assembler from the new theme when it's done.

For now, we have the blockGap added manually on the large preview.

[miksansegundo]

About removing the gap between the first-level elements with CSS from Creatio theme.

Here is the current structure of the homepage created with the assembler:

• <header>
• --- gap ---
• <main>section/section/...</main>
• --- gap ---
• <footer>

Here are the tasks to make it work in all previews (assembler, editor, and site front):

• Add the CSS mentioned in the issue to Creatio style.css to remove the gap in the editor canvas and the front of the site.
• Detect when the assembler is using Creatio to remove the gap in the large preview

The assembler adds the gap to the header and footer using a variable so it's easy to update.

It'd be better to make it dynamic instead of detecting Creatio to apply this hack in the large preview but we are limited here because we don't use a single iframe with all patterns in the preview. Therefore, I suggest taking the easy path here and iterating later.

[alaczek]

Hey Miguel! I added the code to Creatio here: Automattic/themes#7237

[miksansegundo]

Thanks Ola, I'll test it soon and update the assembler hack to make sure it works fine.

[alaczek]

It actually doesn't :| The gap is only removed in the site preview, but not in the editor or the assembler.

This seems to be because our rule from style.css is being overridden: