Pattern Submission: Media & Text with split text

[melchoyce]

I'd like to propose this Media & Text pattern, which shows off how to make unique sections for portfolios, galleries, magazine issues, or other similar sites. Also made WordPress/gutenberg#32521 and WordPress/gutenberg#32522 to help improve the implementation. As-is, we can use a spacer block, but it would be ideal to improve the Media & Text block itself in the future.

Pattern Title

Half-width image of artistic squares with text

Pattern Categories

Media & Text

Screenshots

Image Credits

Composition with Large Blue Plane, Red, Black, Yellow, and Gray (1921) by Piet Mondrian. CC0.
https://www.rawpixel.com/image/3219929/free-illustration-image-white-art-vintage-pattern-bauhaus

[melchoyce]

Potential markup:

<!-- wp:media-text {"align":"full","mediaId":3016,"mediaLink":"https://mywptesting.site/2021/06/08/half-width-image-of-artistic-squares-with-text/image-from-rawpixel-id-3219929-jpeg-1/","mediaType":"image","imageFill":true,"style":{"color":{"background":"#f1f2f6"}}} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile is-image-fill has-background" style="background-color:#f1f2f6"><figure class="wp-block-media-text__media" style="background-image:url(https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-3219929-jpeg-1-838x1024.jpg);background-position:50% 50%"><img src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-3219929-jpeg-1-838x1024.jpg" alt="" class="wp-image-3016 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"top"} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:spacer {"height":20} -->
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p><meta charset="utf-8"><strong>ABSTRACT</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

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

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:heading {"style":{"typography":{"fontSize":"48px"}}} -->
<h2 style="font-size:48px">Piet Mondrian</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>Composition with Large Blue Plane, Red, Black, Yellow, and Gray,</em> painted in 1921.</p>
<!-- /wp:paragraph -->

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

[kjellr]

Thanks, @melchoyce! This has been added to the directory here:

https://wordpress.org/patterns/pattern/half-width-image-of-artistic-squares-with-text/