From 43275e1af5d480e96d44f8f89d3df06ce978d7f3 Mon Sep 17 00:00:00 2001 From: Jb Audras Date: Sat, 12 Mar 2022 22:51:52 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@52927 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentynineteen/sass/blocks/_blocks.scss | 13 +++++++++---- src/wp-content/themes/twentynineteen/style-rtl.css | 14 ++++++++++++-- src/wp-content/themes/twentynineteen/style.css | 14 ++++++++++++-- 3 files changed, 33 insertions(+), 8 deletions(-) diff --git a/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss b/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss index 806df3a760..9162cfcd03 100644 --- a/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss +++ b/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss @@ -546,10 +546,13 @@ } // If an image does not have a left/center/right alignment, - // it's a direct child of .wp-block-img. If it has no other - // alignment added, we want to make sure the image does not - // extend beyond the width of the text column. - &:not(.alignwide):not(.alignfull) > img { + // it's a direct child of .wp-block-image. If it has no other + // alignment added, we want to make sure the image and its + // caption do not extend beyond the width of the text column. + &:not(.alignwide):not(.alignfull) > img, + &:not(.alignwide):not(.alignfull) > a > img, + &:not(.alignwide):not(.alignfull) > img + figcaption, + &:not(.alignwide):not(.alignfull) > a + figcaption { @include postContentMaxWidth(); } @@ -803,6 +806,8 @@ } // Ensure images do not expand beyond the column. + .wp-block-image:not(.alignwide):not(.alignfull) > img, + .wp-block-image:not(.alignwide):not(.alignfull) > a > img, .wp-block-image > img:not(.alignwide):not(.alignfull), .wp-block-image > figure { diff --git a/src/wp-content/themes/twentynineteen/style-rtl.css b/src/wp-content/themes/twentynineteen/style-rtl.css index 9382635db7..10b62e13b4 100644 --- a/src/wp-content/themes/twentynineteen/style-rtl.css +++ b/src/wp-content/themes/twentynineteen/style-rtl.css @@ -5847,13 +5847,19 @@ body.page .main-navigation { } @media only screen and (min-width: 768px) { - .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img { + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a > img, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img + figcaption, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a + figcaption { max-width: calc(8 * (100vw / 12) - 28px); } } @media only screen and (min-width: 1168px) { - .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img { + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a > img, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img + figcaption, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a + figcaption { max-width: calc(6 * (100vw / 12) - 28px); } } @@ -6181,6 +6187,8 @@ body.page .main-navigation { } @media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > img, + .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > a > img, .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull), .entry .entry-content .wp-block-columns .wp-block-image > figure { max-width: 100%; @@ -6188,6 +6196,8 @@ body.page .main-navigation { } @media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > img, + .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > a > img, .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull), .entry .entry-content .wp-block-columns .wp-block-image > figure { max-width: 100%; diff --git a/src/wp-content/themes/twentynineteen/style.css b/src/wp-content/themes/twentynineteen/style.css index dc2ea1ddb8..73a5ce75e7 100644 --- a/src/wp-content/themes/twentynineteen/style.css +++ b/src/wp-content/themes/twentynineteen/style.css @@ -5859,13 +5859,19 @@ body.page .main-navigation { } @media only screen and (min-width: 768px) { - .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img { + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a > img, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img + figcaption, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a + figcaption { max-width: calc(8 * (100vw / 12) - 28px); } } @media only screen and (min-width: 1168px) { - .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img { + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a > img, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img + figcaption, + .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > a + figcaption { max-width: calc(6 * (100vw / 12) - 28px); } } @@ -6193,6 +6199,8 @@ body.page .main-navigation { } @media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > img, + .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > a > img, .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull), .entry .entry-content .wp-block-columns .wp-block-image > figure { max-width: 100%; @@ -6200,6 +6208,8 @@ body.page .main-navigation { } @media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > img, + .entry .entry-content .wp-block-columns .wp-block-image:not(.alignwide):not(.alignfull) > a > img, .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull), .entry .entry-content .wp-block-columns .wp-block-image > figure { max-width: 100%;