Block spacing/layout/is-layout-flow: Top margin also added inside flex items #49914
Description
When a container block has "flow" layout, its innerblocks are subject to this CSS:
:where(body .is-layout-flow) > * {
margin-block-start: 1.5rem;
margin-block-end: 0;
}
There seems to be missing something like this, or at least in the use case I'm about to describe, it's not taking hold:
:where(body .is-layout-flow) > *:first-child {
margin-block-start: 0;
}
What I'm seeing is that when using any block inside a columns block, top margin is applied to the first block inside. Take the following example
That's 3 columns with background colors, and a "Test" Cover block in the 3rd column. As you can see there's top margin applied there, when there shouldn't be:
I can zero that out using the margin tool on the cover, but I shouldn't have to. The first block in a stack should not have top margin.
Example code:
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0","left":"0"}}}} -->
<div class="wp-block-columns"><!-- wp:column {"backgroundColor":"primary"} -->
<div class="wp-block-column has-primary-background-color has-background"><!-- wp:paragraph -->
<p>1</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"backgroundColor":"tertiary"} -->
<div class="wp-block-column has-tertiary-background-color has-background"><!-- wp:paragraph -->
<p>1</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>2</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>3</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"backgroundColor":"secondary","textColor":"base"} -->
<div class="wp-block-column has-base-color has-secondary-background-color has-text-color has-background" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:cover {"overlayColor":"pale-cyan-blue","minHeight":100,"minHeightUnit":"%","isDark":false,"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:100%"><span aria-hidden="true" class="wp-block-cover__background has-pale-cyan-blue-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">test</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->