Add "Bordered" style and "Media & Text article title" block pattern #150
Conversation
kjellr
added
[Type] Enhancement
inc/block-patterns.php
Outdated
| 'title' => __( 'Media & Text Article Title', 'twentytwentyone' ), | ||
| 'categories' => array( 'twentytwentyone' ), | ||
| 'viewportWidth' => 1440, | ||
| 'content' => '<!-- wp:media-text {"mediaId":1752,"mediaLink":"' . esc_url( get_template_directory_uri() ) . '/assets/images/the_poplars_at_saint_remy.jpg","mediaType":"image","className":"is-style-twentytwentyone-border"} --><div class="wp-block-media-text alignwide is-stacked-on-mobile is-style-twentytwentyone-border"><figure class="wp-block-media-text__media"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/the_poplars_at_saint_remy.jpg" alt="' . esc_attr__( '"The Poplars at Saint-Rémy" by Vincent Van Gogh (1889)', 'twentytwentyone' ) . '" class="wp-image-1752 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"align":"center"} --><h2 class="has-text-align-center">' . wp_kses_post( __( 'The Poplars at<br>Saint-Rémy', 'twentytwentyone' ) ) . '</h2><!-- /wp:heading --><!-- wp:separator --><hr class="wp-block-separator"/><!-- /wp:separator --><!-- wp:paragraph {"align":"center","fontSize":"small"} --><p class="has-text-align-center has-small-font-size">' . wp_kses_post( __( 'Vincent van Gogh<br>(Dutch, 1853-1890)', 'twentytwentyone' ) ) . '</p><!-- /wp:paragraph --></div></div><!-- /wp:media-text -->', |
There was a problem hiding this comment.
wp_kses_post( __( 'The Poplars at<br>Saint-Rémy', 'twentytwentyone' ) )
^ Is that the right way to escape + translate this? It's just normal post content.
There was a problem hiding this comment.
Yes this works well, since there is HTML inside of it.
|
Can we add some padding to the image caption here, or should that be a new PR?
|
|
Yeah any padding we could add here would help:
(Group block) |
|
@melchoyce Should be all set in b4e6027.
I noticed some weirdness with Group block spacing in the front end too (the container had some extra padding by default), so I took that out in the same commit:
|
|
When I insert the media and text block pattern, there is a block validation error in the editor. (Gutenberg is not active) |
|
@carolinan Mind giving this another try? I recreated the pattern without the plugin active, and now it seems to work fine in both contexts. |
|
The pattern works now, but the border color has reverted back to black. |
Just needed to be synced up with Thanks, all! |
This PR tackles another one of the block patterns from #50:
Media & Text article title
In doing so, it also adds a new "Bordered" block style for the media and text block. I extended this for use in the Group and Cover blocks too, since those will come in handy for other block patterns. #140 added a similar style for the Image block, but it mandates some padding. For completeness, I added this plain, unpadded border style to the image block too.
Screenshots
Block Pattern
Block Styles