Services - four columns with background

[alaczek]

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2020/08/marble_flipped-1.jpg","id":2042,"dimRatio":0,"focalPoint":{"x":"0.50","y":"0.50"},"align":"full"} -->
<div class="wp-block-cover alignfull" style="background-image:url(https://dotcompatterns.files.wordpress.com/2020/08/marble_flipped-1.jpg);background-position:50% 50%"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"width":33.3} -->
<div class="wp-block-column" style="flex-basis:33.3%"><!-- wp:heading {"level":3,"style":{"color":{"text":"#111111"}}} -->
<h3 class="has-text-color" style="color:#111111">LET'S WORK TOGETHER</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#111111"}}} -->
<p class="has-text-color" style="color:#111111">I help busy people to achieve their best health, through a unique combination of life, wellness, and nutrition coaching.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"style":{"color":{"background":"#3a4f41"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background no-border-radius" style="background-color:#3a4f41">FREE CONSULTATION</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":2037,"sizeSlug":"large","className":"margin-bottom-none"} -->
<figure class="wp-block-image size-large margin-bottom-none"><img src="https://dotcompatterns.files.wordpress.com/2020/08/coaching_square.jpg?w=1024" alt="" class="wp-image-2037"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","className":"margin-top-none","style":{"color":{"text":"#111111","background":"#ffffff"}}} -->
<p class="has-text-align-center margin-top-none has-text-color has-background" style="background-color:#ffffff;color:#111111">LIFE COACHING</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":2044,"sizeSlug":"large","className":"margin-bottom-none"} -->
<figure class="wp-block-image size-large margin-bottom-none"><img src="https://dotcompatterns.files.wordpress.com/2020/08/wellness_square-1.jpg?w=595" alt="" class="wp-image-2044"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","className":"margin-top-none","style":{"color":{"text":"#111111","background":"#ffffff"}}} -->
<p class="has-text-align-center margin-top-none has-text-color has-background" style="background-color:#ffffff;color:#111111">WELLNESS</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":2039,"sizeSlug":"large","className":"margin-bottom-none"} -->
<figure class="wp-block-image size-large margin-bottom-none"><img src="https://dotcompatterns.files.wordpress.com/2020/08/nutrition_square.jpg?w=600" alt="" class="wp-image-2039"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","className":"margin-top-none","style":{"color":{"text":"#111111","background":"#ffffff"}}} -->
<p class="has-text-align-center margin-top-none has-text-color has-background" style="background-color:#ffffff;color:#111111">NUTRITION</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

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

[ianstewart]

I'm impressed that this is possible with Gutenberg. Imagine imagining this a few years ago. 👍

[pablohoneyhoney]

A few notes:

1. Images are a bit stocky.
2. Button has little padding.
3. Hierarchy of heading and body can be higher.
4. Worth trying other fonts. This feels little intentional and a bit generic.
5. The current background image is a bit noisy along the thumbnails, text, buttons, etc. Worth reducing visual disturbance.

[alaczek]

Hi Pablo, thanks for taking a look. Good points on typography and images adjustments, we'll get on fixing those as best as we can.

Some of the things you mention we'd love to do, but it is not possible yet due to Gutenberg's limitations. Part of our work is to find those issues, and report them so that we can work towards elevating the quality of design over time.

For example, this pattern has two button-related issues open:

• Add full-width button style: https://github.com/WordPress/gutenberg/issues/24705,
• Add font-size controls: https://github.com/WordPress/gutenberg/issues/24776

One thing that's on our radar too is going through older patterns and seeing if we can improve them with better tools we have now.

As for the font choice, this is largely theme-dependent. The screenshot in this issue comes from our official pattern site, but when applied to (or previewed on) a different site it would take on whatever font pairing is defined in the theme or global styles. This greatly limits our control when it comes to typography. For comparison, this is the Figma design for this pattern: