WordPress.org
Get WordPress

Make WordPress Core

Changeset 52927


Ignore:
Timestamp:
03/12/2022 10:51:52 PM (3 years ago)
Author:
audrasjb
Message:

Twenty Nineteen: Display Image block at the same size whether the image is linked or not.

This change makes sure the max-width value is assigned for linked images.

Props JarretC, sabernhardt.
Fixes #48697.

Location:
trunk/src/wp-content/themes/twentynineteen
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

    r48073 r52927  
    547547
    548548        // If an image does not have a left/center/right alignment,
    549         // it's a direct child of .wp-block-img.  If it has no other
    550         // alignment added, we want to make sure the image does not
    551         // extend beyond the width of the text column.
    552         &:not(.alignwide):not(.alignfull) > img {
     549        // it's a direct child of .wp-block-image.  If it has no other
     550        // alignment added, we want to make sure the image and its
     551        // caption do not extend beyond the width of the text column.
     552        &:not(.alignwide):not(.alignfull) > img,
     553        &:not(.alignwide):not(.alignfull) > a > img,
     554        &:not(.alignwide):not(.alignfull) > img + figcaption,
     555        &:not(.alignwide):not(.alignfull) > a + figcaption {
    553556            @include postContentMaxWidth();
    554557        }
    … …  
    804807
    805808        // Ensure images do not expand beyond the column.
     809        .wp-block-image:not(.alignwide):not(.alignfull) > img,
     810        .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
    806811        .wp-block-image > img:not(.alignwide):not(.alignfull),
    807812        .wp-block-image > figure {

  • trunk/src/wp-content/themes/twentynineteen/style-rtl.css

    r52618 r52927  
    58485848
    58495849@media only screen and (min-width: 768px) {
    5850   .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5850  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img,
     5851  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
     5852  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img + figcaption,
     5853  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a + figcaption {
    58515854    max-width: calc(8 * (100vw / 12) - 28px);
    58525855  }
    … …  
    58545857
    58555858@media only screen and (min-width: 1168px) {
    5856   .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5859  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img,
     5860  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
     5861  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img + figcaption,
     5862  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a + figcaption {
    58575863    max-width: calc(6 * (100vw / 12) - 28px);
    58585864  }
    … …  
    61826188
    61836189@media only screen and (min-width: 768px) {
     6190  .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > img,
     6191  .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
    61846192  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull),
    61856193  .entry .entry-content .wp-block-columns .wp-block-image > figure {
    … …  
    61896197
    61906198@media only screen and (min-width: 1168px) {
     6199  .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > img,
     6200  .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
    61916201  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull),
    61926202  .entry .entry-content .wp-block-columns .wp-block-image > figure {

  • trunk/src/wp-content/themes/twentynineteen/style.css

    r52618 r52927  
    58605860
    58615861@media only screen and (min-width: 768px) {
    5862   .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5862  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img,
     5863  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
     5864  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img + figcaption,
     5865  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a + figcaption {
    58635866    max-width: calc(8 * (100vw / 12) - 28px);
    58645867  }
    … …  
    58665869
    58675870@media only screen and (min-width: 1168px) {
    5868   .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
     5871  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img,
     5872  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
     5873  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img + figcaption,
     5874  .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a + figcaption {
    58695875    max-width: calc(6 * (100vw / 12) - 28px);
    58705876  }
    … …  
    61946200
    61956201@media only screen and (min-width: 768px) {
     6202  .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > img,
     6203  .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
    61966204  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull),
    61976205  .entry .entry-content .wp-block-columns .wp-block-image > figure {
    … …  
    62016209
    62026210@media only screen and (min-width: 1168px) {
     6211  .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > img,
     6212  .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > a > img,
    62036213  .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull),
    62046214  .entry .entry-content .wp-block-columns .wp-block-image > figure {
Note: See TracChangeset for help on using the changeset viewer.