WordPress.org
Get WordPress

Make WordPress Core

Changeset 56613


Ignore:
Timestamp:
09/18/2023 05:36:51 PM (13 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.

Location:
trunk/src/wp-content/themes/twentytwentytwo/inc/patterns
Files:
13 edited

Legend:

Unmodified
Added
Removed

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

    r52375 r56613  
    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 -->',

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

    r52375 r56613  
    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 -->',

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

    r52392 r56613  
    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

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

    r52392 r56613  
    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

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

    r52589 r56613  
    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} -->

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

    r52589 r56613  
    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 -->

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

    r52375 r56613  
    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);

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

    r52430 r56613  
    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);

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

    r52555 r56613  
    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

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

    r52555 r56613  
    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

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

    r52555 r56613  
    3939                    <!-- /wp:group -->
    4040
    41                     <!-- wp:image {"align":"full","style":{"color":{}}} -->
    42                     <figure class="wp-block-image alignfull"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-a.png" alt="' . esc_attr__( 'An illustration of a bird in flight', 'twentytwentytwo' ) . '"/></figure>
     41                    <!-- wp:image {"align":"full","width":2400,"height":1178,"style":{"color":{}}} -->
     42                    <figure class="wp-block-image alignfull is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-transparent-a.png" alt="' . esc_attr__( 'An illustration of a bird in flight', 'twentytwentytwo' ) . '" width="2400" height="1178"/></figure>
    4343                    <!-- /wp:image -->
    4444

  • trunk/src/wp-content/themes/twentytwentytwo/inc/patterns/page-sidebar-blog-posts-right.php

    r52555 r56613  
    5555
    5656                    <!-- wp:column {"width":"33.33%"} -->
    57                     <div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
    58                     <figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-salmon.jpg" alt="' . esc_attr__( 'Illustration of a flying bird.', 'twentytwentytwo' ) . '"/></figure>
     57                    <div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"width":768,"height":1160,"sizeSlug":"large","linkDestination":"none"} -->
     58                    <figure class="wp-block-image size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/flight-path-on-salmon.jpg" alt="' . esc_attr__( 'Illustration of a flying bird.', 'twentytwentytwo' ) . '" width="768" height="1160"/></figure>
    5959                    <!-- /wp:image -->
    6060

  • trunk/src/wp-content/themes/twentytwentytwo/inc/patterns/page-sidebar-poster.php

    r52430 r56613  
    2323                    <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":"5%"}}} -->
    2424                    <div class="wp-block-columns alignwide"><!-- wp:column {"width":"70%","style":{"spacing":{"padding":{"bottom":"32px"}}}} -->
    25                     <div class="wp-block-column" style="padding-bottom:32px;flex-basis:70%"><!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
    26                     <figure class="wp-block-image size-full"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/bird-on-salmon.jpg" alt="' . esc_attr__( 'Image of a bird on a branch', 'twentytwentytwo' ) . '"/></figure>
     25                    <div class="wp-block-column" style="padding-bottom:32px;flex-basis:70%"><!-- wp:image {"width":984,"height":1426,"sizeSlug":"full","linkDestination":"none"} -->
     26                    <figure class="wp-block-image size-full is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/bird-on-salmon.jpg" alt="' . esc_attr__( 'Image of a bird on a branch', 'twentytwentytwo' ) . '" width="984" height="1426"/></figure>
    2727                    <!-- /wp:image --></div>
    2828                    <!-- /wp:column -->
Note: See TracChangeset for help on using the changeset viewer.