Text List and Media

[onuro]

<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"layout":{"inherit":true},"fontSize":"small"} -->
<div class="wp-block-group alignfull has-small-font-size" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"style":{"spacing":{"blockGap":{"top":"40px","left":"40px"}},"typography":{"lineHeight":1.4}},"layout":{"contentSize":"280px"}} -->
<div class="wp-block-group" style="line-height:1.4"><!-- wp:group {"style":{"spacing":{"blockGap":{"top":"12px","left":"12px"}}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600","fontSize":"1.1rem"}},"textColor":"foreground"} -->
<p class="has-foreground-color has-text-color" style="font-size:1.1rem;font-style:normal;font-weight:600">→  Aerial Photography</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">A picture is worth a thousand words.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"12px","left":"12px"}}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600","fontSize":"1.1rem"}},"textColor":"foreground"} -->
<p class="has-foreground-color has-text-color" style="font-size:1.1rem;font-style:normal;font-weight:600">→  Nature and Animals</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">A picture is worth a thousand words.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"12px","left":"12px"}}}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600","fontSize":"1.1rem"}},"textColor":"foreground"} -->
<p class="has-foreground-color has-text-color" style="font-size:1.1rem;font-style:normal;font-weight:600">→  Wild Life</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">A picture is worth a thousand words.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"65%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:65%"><!-- wp:cover {"url":"https://appletondemo.files.wordpress.com/2022/05/photographer.jpeg","id":48,"dimRatio":0,"minHeight":550,"contentPosition":"bottom left","isDark":false,"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"}}}} -->
<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-left" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;min-height:550px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-48" alt="" src="https://appletondemo.files.wordpress.com/2022/05/photographer.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"padding":{"top":"2vw","right":"2vw","bottom":"2vw","left":"2vw"},"margin":{"top":"0px","bottom":"0px"}}},"backgroundColor":"background","layout":{"inherit":false,"contentSize":"580px"}} -->
<div class="wp-block-group has-background-background-color has-background" style="margin-top:0px;margin-bottom:0px;padding-top:2vw;padding-right:2vw;padding-bottom:2vw;padding-left:2vw"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":""} -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"600","lineHeight":"1.3","fontSize":"2.2rem"}},"textColor":"foreground"} -->
<h2 class="has-foreground-color has-text-color" style="font-size:2.2rem;font-style:normal;font-weight:600;line-height:1.3">15 years<br>of experience</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5"}},"textColor":"foreground","fontSize":"small"} -->
<p class="has-foreground-color has-text-color has-small-font-size" style="line-height:1.5">John Appleton is an award-winning nature photographer. He lives in Tucson, Arizona, with his family and enjoys long hikes and black coffee.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Tested with dark mode themes as well.

https://dotcompatterns.wordpress.com/?p=5727&preview=true

[alaczek]

I think in patterns we need to stay away from defining text color if we're not also defining background color - in this pattern the text in the bottom right gets invisible on a site with a dark background.

I know Appleton had a slightly lighter color applied to the body text, but I think in a pattern we should stick to using the foreground color and drop that nuance, in favor of better adaptability across different themes.

[onuro]

@alaczek yeah I've been following that rule as well, avoiding custom text colors. Somehow I seem to have missed the custom color on that paragraph. Fixing shortly

[onuro]

Updated w color fix on that paragraph

[alaczek]

Yes, this is better! One more thing I noticed is the explicitly set width on the group block - I would use wide or full width setting instead to better blend in.

[onuro]

Yep. Updated w custom width into wide-align.

[alaczek]

Alright, then feel free to publish.

[iamtakashi]

Let's reconsider the use of the vw unit for the paddings in the area overlapping the image. The pattern loses its tension when it's viewed on a large monitor because of that.

I think I said this before, but it might be good to align the text on the left either vertically top or bottom instead of the centre it feels floating.