Quotes

[iamtakashi]

Background: Automattic/view-design#40

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":68} -->
<div class="wp-block-column" style="flex-basis:68%"><!-- wp:heading {"style":{"typography":{"lineHeight":"1.2","fontSize":31}}} -->
<h2 style="font-size:31px;line-height:1.2"><strong>What Our Customers Are Saying</strong></h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"width":32} -->
<div class="wp-block-column" style="flex-basis:32%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":6,"style":{"typography":{"lineHeight":"1.5","fontSize":16}}} -->
<h6 style="font-size:16px;line-height:1.5"><strong>LIZ S.</strong></h6>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":15}}} -->
<p style="font-size:15px">Working with Alisa on my fitness has been great. I always feels like it’s had a thorough workout. I very much appreciate the help and advice. I can’t recommend this place enough. Thank you, Alisa!</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/rating-star {"rating":5} -->
<figure class="wp-block-jetpack-rating-star" style="text-align:left"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></figure>
<!-- /wp:jetpack/rating-star --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":6,"style":{"typography":{"fontSize":15,"lineHeight":"1.5"}}} -->
<h6 style="font-size:15px;line-height:1.5"><strong>MIKE A.</strong></h6>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":15}}} -->
<p style="font-size:15px">I've been training with Alisa for about 9 month now. The best part about training with her is the nutrition info that Alisa has given me. I've learnt so much about what I should be eating.  </p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/rating-star {"rating":5,"className":"margin-bottom-half"} -->
<figure class="wp-block-jetpack-rating-star margin-bottom-half" style="text-align:left"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></figure>
<!-- /wp:jetpack/rating-star --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":6,"style":{"typography":{"fontSize":16}}} -->
<h6 style="font-size:16px"><strong>KAREN P.</strong></h6>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":15}}} -->
<p style="font-size:15px">I can't thank her enough for working with me at my level and keeping me motivated. She has dealt with my out of shape and not so young body extremely well. I couldn't ask for a better instructor.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/rating-star {"rating":5,"className":"margin-bottom-half"} -->
<figure class="wp-block-jetpack-rating-star margin-bottom-half" style="text-align:left"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></figure>
<!-- /wp:jetpack/rating-star --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

[iamtakashi]

If you're not so sure about the quote, I'll remove it and keep it simple :)

[iamtakashi]

Updated

[ianstewart]

Works for me.

[alaczek]

I added this one to an atomic site and I'm getting this error:

I thought layout grid block would be automatically available via Jetpack? What am I missing here?

[iamtakashi]

I don't think the block is via Jetpack, but it should be available automatically. What do you see if you search layout grid in the plugin screen in your Atomic test site? Is your atomic site recently setup or it's been for a long time?

[iamtakashi]

I removed Layout Grid as the text becomes too wide at some point. I also made the heading bigger to give more contrast with everything else in the pattern.

[rickybanister]

How does the vertical spacing work here? It seems like there's a spacer between the headline and the testimonials? That's probably the right approach since customers can easily change it, but there may be too much default space between the headline and columns.

At least, I could see the headline being quite close to the content above it and the testimonials pushed off. Being able to control margins on a group block would be a nice way to ensure that I guess.

[iamtakashi]

How does the vertical spacing work here?

Thanks for asking! This has been bugging me for some time. Here is what's happening with the giant vertical space, and what I'd do as a workaround for now.

As a default, without a spacer block between the heading and the column block that houses the testimonials, the margins from the heading and the column block collapse.

This is usually fine, but some time like this pattern, we want to have a little more vertical space between the heading and the column block. This is when a spacer block is useful. But, at the moment, spacer block has a minimum of 20px height — i.e. we can't have a spacer block that is 5px height, for example.

And when we add a spacer block between the heading and the column block, the margins won't collapse anymore — that creates a big gap. This was what you saw above.

--

As a workaround, I'm going to use a custom CSS class margin-bottom-none that has been baked in Varia themes and Seedlet to get rid of one of the margins. And then increase the spacer height to match with one of the margins left.

Yes, if the pattern is used in non Varia themes or Seedlet, the big gap will appear there, but I think this is the best we can do for now?

What do you think?

BTW, this is the Gutenberg issue about the minimum height of a spacer block: WordPress/gutenberg#18906

[iamtakashi]

Looks like the PR removing the minimum height for a spacer block has merged: WordPress/gutenberg#25528

When this lands in WP.com, I'll update the pattern to remove the custom CSS class so that the spacing will be more or less the same in a wider range of themes.

[rickybanister]

That makes perfect sense and I agree it seems like the best short term compromise. Looking forward to wrestling more of this stuff out of the theme's control.