Skip to content

Commit d4cf682

Browse files
felixarntzfelixarntz
committed
Bundled Theme: Add missing dimension attributes to images in Twenty Twenty-Two patterns.
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. git-svn-id: https://develop.svn.wordpress.org/trunk@56613 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 414a123 commit d4cf682

13 files changed

Lines changed: 28 additions & 28 deletions

‎src/wp-content/themes/twentytwentytwo/inc/patterns/general-divider-dark.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
'title' => __( 'Divider with image and color (dark)', 'twentytwentytwo' ),
77
'categories' => array( 'featured' ),
88
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"1rem","right":"0px","bottom":"1rem","left":"0px"}}},"backgroundColor":"primary"} -->
9-
<div class="wp-block-group alignfull has-primary-background-color has-background" style="padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px"><!-- wp:image {"id":473,"sizeSlug":"full","linkDestination":"none"} -->
10-
<figure class="wp-block-image size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/divider-white.png" alt="" class="wp-image-473"/></figure>
9+
<div class="wp-block-group alignfull has-primary-background-color has-background" style="padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px"><!-- wp:image {"id":473,"width":3001,"height":246,"sizeSlug":"full","linkDestination":"none"} -->
10+
<figure class="wp-block-image size-full is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/divider-white.png" alt="" class="wp-image-473" width="3001" height="246"/></figure>
1111
<!-- /wp:image --></div>
1212
<!-- /wp:group -->',
1313
);

‎src/wp-content/themes/twentytwentytwo/inc/patterns/general-divider-light.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
'title' => __( 'Divider with image and color (light)', 'twentytwentytwo' ),
77
'categories' => array( 'featured' ),
88
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"1rem","right":"0px","bottom":"1rem","left":"0px"}}},"backgroundColor":"secondary"} -->
9-
<div class="wp-block-group alignfull has-secondary-background-color has-background" style="padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px"><!-- wp:image {"id":473,"sizeSlug":"full","linkDestination":"none"} -->
10-
<figure class="wp-block-image size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/divider-black.png" alt="" class="wp-image-473"/></figure>
9+
<div class="wp-block-group alignfull has-secondary-background-color has-background" style="padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px"><!-- wp:image {"id":473,"width":3001,"height":246,"sizeSlug":"full","linkDestination":"none"} -->
10+
<figure class="wp-block-image size-full is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/divider-black.png" alt="" class="wp-image-473" width="3001" height="246"/></figure>
1111
<!-- /wp:image --></div>
1212
<!-- /wp:group -->',
1313
);

‎src/wp-content/themes/twentytwentytwo/inc/patterns/general-two-images-text.php‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
'categories' => array( 'featured', 'columns', 'gallery' ),
88
'content' => '<!-- wp:columns {"align":"wide"} -->
99
<div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0rem","right":"0rem","bottom":"0rem","left":"0rem"}}}} -->
10-
<div class="wp-block-column" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem"><!-- wp:image {"sizeSlug":"large"} -->
11-
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/bird-on-salmon.jpg" alt="' . esc_attr__( 'Illustration of a bird sitting on a branch.', 'twentytwentytwo' ) . '"/></figure>
10+
<div class="wp-block-column" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem"><!-- wp:image {"width":984,"height":1426,"sizeSlug":"large"} -->
11+
<figure class="wp-block-image size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/bird-on-salmon.jpg" alt="' . esc_attr__( 'Illustration of a bird sitting on a branch.', 'twentytwentytwo' ) . '" width="984" height="1426"/></figure>
1212
<!-- /wp:image --></div>
1313
<!-- /wp:column -->
1414
1515
<!-- wp:column {"style":{"spacing":{"padding":{"top":"0rem","right":"0rem","bottom":"0rem","left":"0rem"}}}} -->
16-
<div class="wp-block-column" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem"><!-- wp:image {"sizeSlug":"large"} -->
17-
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/bird-on-green.jpg" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '"/></figure>
16+
<div class="wp-block-column" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem"><!-- wp:image {"width":984,"height":1426,"sizeSlug":"large"} -->
17+
<figure class="wp-block-image size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/bird-on-green.jpg" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '" width="984" height="1426"/></figure>
1818
<!-- /wp:image -->
1919
2020
<!-- wp:spacer {"height":30} -->

‎src/wp-content/themes/twentytwentytwo/inc/patterns/general-wide-image-intro-buttons.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
'title' => __( 'Wide image with introduction and buttons', 'twentytwentytwo' ),
77
'categories' => array( 'featured', 'columns' ),
88
'content' => '<!-- wp:group {"align":"wide"} -->
9-
<div class="wp-block-group alignwide"><!-- wp:image {"sizeSlug":"large"} -->
10-
<figure class="wp-block-image size-large"><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' ) . '"/></figure>
9+
<div class="wp-block-group alignwide"><!-- wp:image {"width":2100,"height":994,"sizeSlug":"large"} -->
10+
<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>
1111
<!-- /wp:image -->
1212
1313
<!-- wp:columns {"verticalAlignment":null} -->

‎src/wp-content/themes/twentytwentytwo/inc/patterns/header-large-dark.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
<!-- /wp:heading --></div>
2626
<!-- /wp:group -->
2727
28-
<!-- wp:image {"align":"full","sizeSlug":"full","linkDestination":"none"} -->
29-
<figure class="wp-block-image alignfull size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-c.png" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '"/></figure>
28+
<!-- wp:image {"align":"full","width":2400,"height":1020,"sizeSlug":"full","linkDestination":"none"} -->
29+
<figure class="wp-block-image alignfull size-full is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-c.png" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '" width="2400" height="1020"/></figure>
3030
<!-- /wp:image --></div>
3131
<!-- /wp:group --><!-- wp:spacer {"height":66} -->
3232
<div style="height:66px" aria-hidden="true" class="wp-block-spacer"></div>

‎src/wp-content/themes/twentytwentytwo/inc/patterns/header-small-dark.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
<!-- /wp:group --></div>
2222
<!-- /wp:group -->
2323
24-
<!-- wp:image {"align":"wide","sizeSlug":"full","linkDestination":"none"} -->
25-
<figure class="wp-block-image alignwide size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-d.png" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '"/></figure>
24+
<!-- wp:image {"align":"wide","width":2000,"height":474,"sizeSlug":"full","linkDestination":"none"} -->
25+
<figure class="wp-block-image alignwide size-full is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-d.png" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '" width="2000" height="474"/></figure>
2626
<!-- /wp:image --></div>
2727
<!-- /wp:group -->
2828
<!-- wp:spacer {"height":66} -->

‎src/wp-content/themes/twentytwentytwo/inc/patterns/hidden-bird.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
return array(
99
'title' => __( 'Heading and bird image', 'twentytwentytwo' ),
1010
'inserter' => false,
11-
'content' => '<!-- wp:image {"align":"wide","sizeSlug":"full","linkDestination":"none"} -->
12-
<figure class="wp-block-image alignwide size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-d.png" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '"/></figure>
11+
'content' => '<!-- wp:image {"align":"wide","width":2000,"height":474,"sizeSlug":"full","linkDestination":"none"} -->
12+
<figure class="wp-block-image alignwide size-full is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-d.png" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '" width="2000" height="474"/></figure>
1313
<!-- /wp:image -->',
1414
);

‎src/wp-content/themes/twentytwentytwo/inc/patterns/hidden-heading-and-bird.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<!-- /wp:heading --></div>
1616
<!-- /wp:group -->
1717
18-
<!-- wp:image {"align":"full","sizeSlug":"full","linkDestination":"none"} -->
19-
<figure class="wp-block-image alignfull size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-c.png" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '"/></figure>
18+
<!-- wp:image {"align":"full","width":2400,"height":1020,"sizeSlug":"full","linkDestination":"none"} -->
19+
<figure class="wp-block-image alignfull size-full is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-c.png" alt="' . esc_attr__( 'Illustration of a bird flying.', 'twentytwentytwo' ) . '" width="2400" height="1020"/></figure>
2020
<!-- /wp:image -->',
2121
);

‎src/wp-content/themes/twentytwentytwo/inc/patterns/page-about-large-image-and-buttons.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
'title' => __( 'About page with large image and buttons', 'twentytwentytwo' ),
77
'categories' => array( 'pages', 'buttons' ),
88
'content' => '<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"layout":{"inherit":true}} -->
9-
<div class="wp-block-group alignfull" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:image {"align":"wide","sizeSlug":"full","linkDestination":"none"} -->
10-
<figure class="wp-block-image alignwide size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-gray-b.jpg" alt=""/></figure>
9+
<div class="wp-block-group alignfull" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:image {"align":"wide","width":2100,"height":1260,"sizeSlug":"full","linkDestination":"none"} -->
10+
<figure class="wp-block-image alignwide size-full is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-gray-b.jpg" alt="" width="2100" height="1260"/></figure>
1111
<!-- /wp:image -->
1212
1313
<!-- wp:columns {"align":"wide"} -->

‎src/wp-content/themes/twentytwentytwo/inc/patterns/page-layout-image-and-text.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
<!-- /wp:heading --></div>
1212
<!-- /wp:group -->
1313
14-
<!-- wp:image {"align":"full","style":{"color":{}}} -->
15-
<figure class="wp-block-image alignfull"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-b.png" alt="' . esc_attr_x( 'TBD', 'Short for to be determined', 'twentytwentytwo' ) . '"/></figure>
14+
<!-- wp:image {"align":"full","width":2400,"height":1800,"style":{"color":{}}} -->
15+
<figure class="wp-block-image alignfull is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-b.png" alt="' . esc_attr_x( 'TBD', 'Short for to be determined', 'twentytwentytwo' ) . '" width="2400" height="1800"/></figure>
1616
<!-- /wp:image -->
1717
1818
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"2rem","bottom":"var(--wp--custom--spacing--large, 8rem)"}}},"layout":{"inherit":true}} -->

0 commit comments

Comments
 (0)