Changeset 56613 for trunk/src/wp-content/themes/twentytwentytwo/inc/patterns/general-two-images-text.php

Timestamp:

09/18/2023 05:36:51 PM (20 months ago)

Author:

flixos90

Message:

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.

File:

• trunk/src/wp-content/themes/twentytwentytwo/inc/patterns/general-two-images-text.php (modified) (1 diff)

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

@@ -8 +8 @@
     'content'    => '<!-- wp:columns {"align":"wide"} -->
                     <div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0rem","right":"0rem","bottom":"0rem","left":"0rem"}}}} -->
-                    <div class="wp-block-column" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem"><!-- wp:image {"sizeSlug":"large"} -->
-                    <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>
+                    <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"} -->
+                    <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>
                     <!-- /wp:image --></div>
                     <!-- /wp:column -->
 
                     <!-- wp:column {"style":{"spacing":{"padding":{"top":"0rem","right":"0rem","bottom":"0rem","left":"0rem"}}}} -->
-                    <div class="wp-block-column" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:0rem"><!-- wp:image {"sizeSlug":"large"} -->
-                    <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>
+                    <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"} -->
+                    <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>
                     <!-- /wp:image -->