mirror of
https://github.com/WordPress/WordPress.git
synced 2024-11-09 20:30:43 +01:00
90a29fbc46
The dimension attributes `width` and `height` should be present on every image in order to avoid layout shifts and be able to leverage WordPress core's image loading optimization functionality. This changeset adds dimension attributes to the `core/image` blocks used in block patterns in Twenty Twenty-Two, where this is particularly critical as WordPress core cannot backfill the attributes for those images, as their sources are not part of the Media Library. Props spacedmonkey, thekt12, mukesh27, flixos90. Fixes #59256. Built from https://develop.svn.wordpress.org/trunk@56613 git-svn-id: http://core.svn.wordpress.org/trunk@56125 1a063a9b-81f0-0310-95a4-ce76da25c4cd
42 lines
2.4 KiB
PHP
42 lines
2.4 KiB
PHP
<?php
|
|
/**
|
|
* Wide image with introduction and buttons block pattern
|
|
*/
|
|
return array(
|
|
'title' => __( 'Wide image with introduction and buttons', 'twentytwentytwo' ),
|
|
'categories' => array( 'featured', 'columns' ),
|
|
'content' => '<!-- wp:group {"align":"wide"} -->
|
|
<div class="wp-block-group alignwide"><!-- wp:image {"width":2100,"height":994,"sizeSlug":"large"} -->
|
|
<figure class="wp-block-image size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-gray-a.jpg" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '" width="2100" height="994"/></figure>
|
|
<!-- /wp:image -->
|
|
|
|
<!-- wp:columns {"verticalAlignment":null} -->
|
|
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"bottom"} -->
|
|
<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:heading {"style":{"typography":{"fontSize":"clamp(3.25rem, 8vw, 6.25rem)","lineHeight":"1.15"}}} -->
|
|
<h2 style="font-size:clamp(3.25rem, 8vw, 6.25rem);line-height:1.15"><em>' . wp_kses_post( __( 'Welcome to<br>the Aviary', 'twentytwentytwo' ) ) . '</em></h2>
|
|
<!-- /wp:heading --></div>
|
|
<!-- /wp:column -->
|
|
|
|
<!-- wp:column {"verticalAlignment":"bottom","style":{"spacing":{"padding":{"bottom":"6rem"}}}} -->
|
|
<div class="wp-block-column is-vertically-aligned-bottom" style="padding-bottom:6rem"><!-- wp:paragraph -->
|
|
<p>' . esc_html__( 'A film about hobbyist bird watchers, a catalog of different birds, paired with the noises they make. Each bird is listed by their scientific name so things seem more official.', 'twentytwentytwo' ) . '</p>
|
|
<!-- /wp:paragraph -->
|
|
|
|
<!-- wp:spacer {"height":20} -->
|
|
<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
|
|
<!-- /wp:spacer -->
|
|
|
|
<!-- wp:buttons -->
|
|
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
|
|
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">' . esc_html__( 'Learn More', 'twentytwentytwo' ) . '</a></div>
|
|
<!-- /wp:button -->
|
|
|
|
<!-- wp:button {"className":"is-style-outline"} -->
|
|
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link">' . esc_html__( 'Buy Tickets', 'twentytwentytwo' ) . '</a></div>
|
|
<!-- /wp:button --></div>
|
|
<!-- /wp:buttons --></div>
|
|
<!-- /wp:column --></div>
|
|
<!-- /wp:columns --></div>
|
|
<!-- /wp:group -->',
|
|
);
|