search

bobbingwide / fizzie

Fizzie theme - a Full Site Editing theme using Gutenberg blocks
9 stars 1 forks source link

CSS styling - unexpected grey background between template parts #15

Closed bobbingwide closed 2 years ago

bobbingwide commented 4 years ago

In #core-editor Slack I asked some simple questions which resulted in quite a few replies. The result of this was that I decided to extract the navigation menus into separate template parts. I started with the footer template part and converted the wp:navigation into a new template part called footer-menu.html. Rather than embedding this directly into the footer template part I decided I'd just put it after the footer in each template.

But I found a problem with the CSS styling. The footer and footer-menu template were separated with a light grey background between them

I intially thought it was a problem with unexpected characters between the HTML tags. But these were just line feed characters ( \n aka hex 0a ).

I discovered that it was due to the margin property set on the nested paragraph and list blocks. I have no idea why the margin on the paragraph was applied the way it did. That's the wonder of CSS for you I suppose.

bobbingwide commented 4 years ago

It would appear that this behaviour is explained by Margin collapsing.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

bobbingwide commented 2 years ago

I don't believe this problem still exists in its original form. The spacing is now caused by the CSS generated by Gutenberg to separate the top level blocks in a template. 

.wp-site-blocks > * + * {
    margin-top: var( --wp--style--block-gap );
}

I've already dealt with this for the header. See https://github.com/bobbingwide/fizzie/commit/a3402f08e4b4078f5a1ec85250b123fb62eec9b1 Now to apply the similar logic to the template parts that make up the footer section