fix: make sure wide blocks don't overflow containers #2063

laurelfulford · 2023-03-18T00:28:00Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR fixes some too-wide wide block issues that were introduced in #2047 -- prior to that change, wide blocks nested inside of narrower group or columns blocks would stay inside of them, but afterwards they'd overflow. This doesn't line up with the editor preview, and caused some unexpected display issues!

This PR should really just address edge cases, hopefully without introducing any new fun problems 😬 I tried being as thorough as possible with my testing and I've included my test content below as a starting point, but please add to it any horrible block nesting decisions you can think of... and logical ones, too!

Testing code!

<!-- wp:group {"backgroundColor":"light-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-light-gray-background-color has-background"><!-- wp:heading -->
<h2>A normal heading in a group block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a group block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a group block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>A normal heading in a columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a columns block</h2>
<!-- /wp:heading -->

<!-- wp:buttons {"align":"full"} -->
<div class="wp-block-buttons alignfull"><!-- wp:button {"width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link wp-element-button">Regular Button 100%</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link wp-element-button">Wide Button 100%</a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link wp-element-button">Full-width Button 100%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"NORMAL WIDHT"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"WIDE WIDTH","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"FULL WIDTH","align":"full"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"wide","backgroundColor":"light-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-light-gray-background-color has-background"><!-- wp:heading -->
<h2>A normal heading in a wide group block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a wide group block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a wide group block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>A normal heading in a wide columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a wide columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a wide columns block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"NORMAL WIDTH"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"WIDE WIDTH","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"FULL WIDTH","align":"full"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:group {"align":"full","backgroundColor":"light-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-light-gray-background-color has-background"><!-- wp:heading -->
<h2>A normal heading in a full-width group block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a full-width group block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a full-width group block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>A normal heading in a full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"Normal width"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"Wide width","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"Full width","align":"full"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>A normal heading in a full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>A normal heading in a full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"NORMAL WIDTH"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"WIDE WIDTH","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postsToShow":1,"sectionHeader":"FULL WIDTH","align":"full"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"backgroundColor":"light-gray"} -->
<div class="wp-block-columns has-light-gray-background-color has-background"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Normal header in a one-column normal columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">Wide header block in a one-column normal columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">Full-width header block in a one-column normal columns block</h2>
<!-- /wp:heading -->

<!-- wp:group {"backgroundColor":"secondary","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-secondary-background-color has-text-color has-background"><!-- wp:paragraph -->
<p>This is a regular width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"color":{"background":"#7293c0"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-white-color has-text-color has-background" style="background-color:#7293c0"><!-- wp:paragraph -->
<p>This is a wide width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"color":{"background":"#bb71bf"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-color has-text-color has-background" style="background-color:#bb71bf"><!-- wp:paragraph -->
<p>This is a full width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide","backgroundColor":"primary"} -->
<div class="wp-block-columns alignwide has-primary-background-color has-background"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2> Normal header in a one-column wide columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">Wide header block in a one-column wide columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">Full-width header block in a one-column wide columns block</h2>
<!-- /wp:heading -->

<!-- wp:group {"backgroundColor":"secondary","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-secondary-background-color has-text-color has-background"><!-- wp:paragraph -->
<p>This is a regular width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"color":{"background":"#7293c0"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-white-color has-text-color has-background" style="background-color:#7293c0"><!-- wp:paragraph -->
<p>This is a wide width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"color":{"background":"#bb71bf"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-color has-text-color has-background" style="background-color:#bb71bf"><!-- wp:paragraph -->
<p>This is a full width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full","backgroundColor":"primary"} -->
<div class="wp-block-columns alignfull has-primary-background-color has-background"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Normal header block in a one-column full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">Wide header block in a one-column full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">Full-width header block in a one-column full-width columns block</h2>
<!-- /wp:heading -->

<!-- wp:group {"backgroundColor":"secondary","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-secondary-background-color has-text-color has-background"><!-- wp:paragraph -->
<p>This is a regular width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"color":{"background":"#7293c0"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-white-color has-text-color has-background" style="background-color:#7293c0"><!-- wp:paragraph -->
<p>This is a wide width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"color":{"background":"#bb71bf"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-color has-text-color has-background" style="background-color:#bb71bf"><!-- wp:paragraph -->
<p>This is a full width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Regular width HPB"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Wide width HPB","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","typeScale":3,"sectionHeader":"Full width HPB","align":"full"} /-->

<!-- wp:group {"backgroundColor":"light-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-light-gray-background-color has-background"><!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Regular width HPB in a group block"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Wide width HPB in a group block","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","typeScale":3,"sectionHeader":"Full width HPB in a group block","align":"full"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","backgroundColor":"light-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-light-gray-background-color has-background"><!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Regular width HPB in a group block"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Wide width HPB in a group block","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","typeScale":3,"sectionHeader":"Full width HPB in a group block","align":"full"} /--></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","backgroundColor":"light-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-light-gray-background-color has-background"><!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Regular width HPB in a group block"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Wide width HPB in a group block","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":4,"postsToShow":4,"typeScale":3,"sectionHeader":"Full width HPB in a group block","align":"full"} /--></div>
<!-- /wp:group -->

<!-- wp:columns {"backgroundColor":"primary"} -->
<div class="wp-block-columns has-primary-background-color has-background"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Regular width HPB in a Columns block"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Wide width HPB in a Columns block","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","typeScale":3,"sectionHeader":"Full width HPB in a Columns block","align":"full"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide","backgroundColor":"primary"} -->
<div class="wp-block-columns alignwide has-primary-background-color has-background"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Regular width HPB in a Columns block"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","typeScale":3,"sectionHeader":"Wide width HPB","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","typeScale":3,"sectionHeader":"Full width HPB","align":"full"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full","backgroundColor":"primary"} -->
<div class="wp-block-columns alignfull has-primary-background-color has-background"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"sectionHeader":"Regular width HPB in a Columns block"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","typeScale":3,"sectionHeader":"Wide width HPB in a Columns block","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showExcerpt":false,"showAuthor":false,"showAvatar":false,"showCategory":true,"postLayout":"grid","columns":4,"postsToShow":4,"typeScale":3,"sectionHeader":"Full width HPB in a Columns block","align":"full"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:cover {"url":"https://cldup.com/ZewN90udWx.thumb.jpg","id":79,"dimRatio":50,"overlayColor":"white","isDark":false} -->
<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-white-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-79" alt="" src="https://cldup.com/ZewN90udWx.thumb.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","fontSize":"large"} -->
<h2 class="has-text-align-center has-large-font-size">Normal width Cover block</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>A normal heading in a cover block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a cover block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a cover block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:newspack-blocks/homepage-articles {"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"imageScale":1,"sectionHeader":"Normal width HPB"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"imageScale":1,"sectionHeader":"Wide width HPB","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"imageScale":1,"sectionHeader":"Full width HPB","align":"full"} /-->

<!-- wp:group {"backgroundColor":"secondary","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-secondary-background-color has-text-color has-background"><!-- wp:paragraph -->
<p>This is a regular width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"color":{"background":"#7293c0"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-white-color has-text-color has-background" style="background-color:#7293c0"><!-- wp:paragraph -->
<p>This is a wide width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"color":{"background":"#bb71bf"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-color has-text-color has-background" style="background-color:#bb71bf"><!-- wp:paragraph -->
<p>This is a full width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"https://cldup.com/ZewN90udWx.thumb.jpg","id":79,"dimRatio":50,"overlayColor":"white","isDark":false,"align":"wide"} -->
<div class="wp-block-cover alignwide is-light"><span aria-hidden="true" class="wp-block-cover__background has-white-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-79" alt="" src="https://cldup.com/ZewN90udWx.thumb.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","fontSize":"large"} -->
<h2 class="has-text-align-center has-large-font-size">Wide width Cover block</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>A normal heading in a cover block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a cover block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a cover block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:newspack-blocks/homepage-articles {"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"imageScale":1,"sectionHeader":"Normal width HPB"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"imageScale":1,"sectionHeader":"Wide width HPB","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"imageScale":1,"sectionHeader":"Full width HPB","align":"full"} /-->

<!-- wp:group {"backgroundColor":"secondary","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-secondary-background-color has-text-color has-background"><!-- wp:paragraph -->
<p>This is a regular width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"color":{"background":"#7293c0"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-white-color has-text-color has-background" style="background-color:#7293c0"><!-- wp:paragraph -->
<p>This is a wide width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"color":{"background":"#bb71bf"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-color has-text-color has-background" style="background-color:#bb71bf"><!-- wp:paragraph -->
<p>This is a full width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"https://cldup.com/ZewN90udWx.thumb.jpg","id":79,"dimRatio":50,"overlayColor":"white","isDark":false,"align":"full"} -->
<div class="wp-block-cover alignfull is-light"><span aria-hidden="true" class="wp-block-cover__background has-white-background-color has-background-dim"></span><img class="wp-block-cover__image-background wp-image-79" alt="" src="https://cldup.com/ZewN90udWx.thumb.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","fontSize":"large"} -->
<h2 class="has-text-align-center has-large-font-size">Full-width Cover block</h2>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>A normal heading in a cover block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"wide"} -->
<h2 class="alignwide">A wide heading in a cover block</h2>
<!-- /wp:heading -->

<!-- wp:heading {"align":"full"} -->
<h2 class="alignfull">A full-width heading in a cover block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A regular width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A wide width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>A full width columns block that's amazing and there's some extra text.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"full","id":66,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignfull size-large"><img src="https://cldup.com/ZewN90udWx.thumb.jpg" alt="" class="wp-image-66"/><figcaption class="wp-element-caption">Full-width image</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>Just a column block that's inside of this columns block so you can see how it looks.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:newspack-blocks/homepage-articles {"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"imageScale":1,"sectionHeader":"Normal width HPB"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"imageScale":1,"sectionHeader":"Wide width HPB","align":"wide"} /-->

<!-- wp:newspack-blocks/homepage-articles {"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":3,"imageScale":1,"sectionHeader":"Full width HPB","align":"full"} /-->

<!-- wp:group {"backgroundColor":"secondary","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-secondary-background-color has-text-color has-background"><!-- wp:paragraph -->
<p>This is a regular width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"wide","style":{"color":{"background":"#7293c0"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-white-color has-text-color has-background" style="background-color:#7293c0"><!-- wp:paragraph -->
<p>This is a wide width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","style":{"color":{"background":"#bb71bf"}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-color has-text-color has-background" style="background-color:#bb71bf"><!-- wp:paragraph -->
<p>This is a full width group block</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

How to test the changes in this Pull Request:

Create two different pages, and assign one the one column template, and the other the one column wide template (you can also toggle between the templates on one page).
Copy paste the test content to your page(s) and your homepage, too, just to be safe! The test content includes a series of group, columns and cover blocks of varying widths, with more blocks (more groups, images, HPB) of varying widths nested inside of them.
Add some more nested blocks into the mix, to try to spook out things I may have missed -- try some that can be made wide, or not, and just stick them in in random spots.
Review the pages on the front-end, and in the editor -- this is the behaviour you should see:
- Nested blocks don't exceed the width of their container -- so wide and full block should not display at full size when nested inside of a narrower block.
- Ditto content in columns -- content should not exceed its container.
- When group or cover blocks are set to wide or full, their contents, by default, should match the width of the content. So on the full-with template, the blocks nested inside one of these blocks should be a maximum of 1200px wide (unless they are also set to display wide or full). On the one column template, they should be 780px;
- Columns blocks are a bit of an outlier with this -- I tested out the same max-width, but it meant that content inside of a full-width columns block didn't actually fill the column on larger screens. Because of this, I made content inside of columns fill the space; there are some one-column columns blocks in the mix so you can see this -- it's counter to how the other full-width blocks behave, but I think it makes sense for this particular block.

Screenshots to illustrate the difference in widths of nested blocks in Group blocks vs. Columns blocks

Group blocks (regular, wide, full-width) - the inner block's max width should be 1200px, unless they're wide or full width

One column columns block - the inner block's max width should be 100%, regardless of their width settings - this looks a little strange with one column like this, compared to the group block, but I think makes more sense than an inner block being narrower than a really wide column.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

leogermani · 2023-03-22T14:51:27Z

I think this could use a review from someone with more experience with editor as well.

From what I've seen, this fixes the layout issues when testing the same content on master.

I'm not sure what's the expected behavior, but for Full width groups, they are always full width no matter which page template I choose.

I noticed that the image captions are misaligned when they are too wide:

laurelfulford · 2023-03-22T17:07:37Z

Thanks @leogermani! Totally understand -- it's A Lot to verify. Even if you're not 100% sure about it, though, the extra eyes are a huge help!

I'm not sure what's the expected behavior, but for Full width groups, they are always full width no matter which page template I choose.

This is correct for the One Column & One Column Wide templates! The full-width blocks should be hitting the edge of the browser window; the wide blocks should be somewhere in between, and are narrower when the content is narrower (so they're not quite as wide in the One Column template as they are in the One Column Wide template). The only template you shouldn't see this with is the default template with the sidebar, which wasn't part of the testing steps so hopefully that's not where you're still seeing the full-width groups 😅

I noticed that the image captions are misaligned when they are too wide:

Ah, that's a good catch! This is kind of intentional, so when you have a wide or full width image stacked on top of paragraphs of content, the caption lines up with the width of the content and isn't sitting so far to the left and right. Like this:

... but it seems weird when you see it nested inside of other blocks, especially inside of a column like in your screenshot, where it doesn't line up with the normal width blocks. I'm going to revisit that in the meantime and at least get the widths more consistent in columns!

leogermani

Approving since I don't see anything broken and it fixes the issue

laurelfulford · 2023-03-28T18:57:00Z

Thanks @leogermani!

## [1.69.4-alpha.1](v1.69.3...v1.69.4-alpha.1) (2023-03-31) ### Bug Fixes * display underwriters with default placement value ([#2061](#2061)) ([265c049](265c049)) * make sure wide blocks don't overflow containers ([#2063](#2063)) ([5fea5cf](5fea5cf))

matticbot · 2023-03-31T13:59:20Z

🎉 This PR is included in version 1.69.4-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.69.4](v1.69.3...v1.69.4) (2023-04-10) ### Bug Fixes * display underwriters with default placement value ([#2061](#2061)) ([265c049](265c049)) * make sure wide blocks don't overflow containers ([#2063](#2063)) ([5fea5cf](5fea5cf))

matticbot · 2023-04-10T19:51:21Z

🎉 This PR is included in version 1.69.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

laurelfulford added 2 commits March 17, 2023 10:28

fix: update wide block styles

20a9dc6

fix: adjusting width of groups in blocks

c0b4b32

laurelfulford added [Type] Bug Incorrect behavior or functionality [Status] Needs Review The issue or pull request needs to be reviewed labels Mar 18, 2023

laurelfulford requested a review from a team as a code owner March 18, 2023 00:28

fix: cover block corrections

4e17871

fix: correct caption widths in columns

d0fefb8

leogermani approved these changes Mar 28, 2023

View reviewed changes

github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Mar 28, 2023

laurelfulford merged commit 5fea5cf into master Mar 28, 2023

laurelfulford deleted the fix/nested-wide-blocks branch March 28, 2023 18:57

matticbot added the released on @alpha label Mar 31, 2023

matticbot added the released label Apr 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: make sure wide blocks don't overflow containers #2063

fix: make sure wide blocks don't overflow containers #2063

laurelfulford commented Mar 18, 2023 •

edited

Loading

leogermani commented Mar 22, 2023

laurelfulford commented Mar 22, 2023

leogermani left a comment

laurelfulford commented Mar 28, 2023

matticbot commented Mar 31, 2023

matticbot commented Apr 10, 2023

fix: make sure wide blocks don't overflow containers #2063

fix: make sure wide blocks don't overflow containers #2063

Conversation

laurelfulford commented Mar 18, 2023 • edited Loading

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

leogermani commented Mar 22, 2023

laurelfulford commented Mar 22, 2023

leogermani left a comment

Choose a reason for hiding this comment

laurelfulford commented Mar 28, 2023

matticbot commented Mar 31, 2023

matticbot commented Apr 10, 2023

laurelfulford commented Mar 18, 2023 •

edited

Loading