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%;