From c9e45cde8b4e0cad887bee70d4f2182402ade450 Mon Sep 17 00:00:00 2001 From: laurelfulford Date: Fri, 28 Dec 2018 21:21:48 +0000 Subject: [PATCH] Twenty Nineteen: Push right-aligned image block outside of text column. Update right-aligned image block styles to push them outside of the text column on the front end, to match the original design and how the block looks in the editor. Props kjellr, joen, allancole. Fixes #45716. git-svn-id: https://develop.svn.wordpress.org/trunk@44371 602fd350-edb4-49c9-b593-d223f7449a82 --- .../twentynineteen/sass/blocks/_blocks.scss | 26 +++++++++++-- .../themes/twentynineteen/style-rtl.css | 37 ++++++++++++++++++- .../themes/twentynineteen/style.css | 37 ++++++++++++++++++- 3 files changed, 93 insertions(+), 7 deletions(-) diff --git a/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss b/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss index 72822b1263..7c843a13c6 100644 --- a/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss +++ b/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss @@ -505,20 +505,40 @@ //! Image .wp-block-image { + max-width: 100%; img { display: block; } - &.alignleft, - &.alignright { - max-width: 100%; + .aligncenter { + + @include postContentMaxWidth(); + + @include media(tablet) { + margin: 0; + width: $size__site-tablet-content; + + img { + margin: 0 auto; + } + } + + @include media(desktop) { + width: $size__site-desktop-content; + + img { + margin: 0 auto; + } + } } &.alignfull img { width: 100vw; + max-width: calc( 100% + (2 * #{$size__spacing-unit})); @include media(tablet) { + max-width: calc( 125% + 150px ); margin-left: auto; margin-right: auto; } diff --git a/src/wp-content/themes/twentynineteen/style-rtl.css b/src/wp-content/themes/twentynineteen/style-rtl.css index c5ca35cdd5..f4569a3f30 100644 --- a/src/wp-content/themes/twentynineteen/style-rtl.css +++ b/src/wp-content/themes/twentynineteen/style-rtl.css @@ -3944,20 +3944,53 @@ body.page .main-navigation { } } +.entry .entry-content .wp-block-image { + max-width: 100%; +} + .entry .entry-content .wp-block-image img { display: block; } -.entry .entry-content .wp-block-image.alignleft, .entry .entry-content .wp-block-image.alignright { - max-width: 100%; +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-image .aligncenter { + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-image .aligncenter { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-image .aligncenter { + margin: 0; + width: calc(8 * (100vw / 12) - 28px); + } + .entry .entry-content .wp-block-image .aligncenter img { + margin: 0 auto; + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-image .aligncenter { + width: calc(6 * (100vw / 12) - 28px); + } + .entry .entry-content .wp-block-image .aligncenter img { + margin: 0 auto; + } } .entry .entry-content .wp-block-image.alignfull img { width: 100vw; + max-width: calc( 100% + (2 * 1rem)); } @media only screen and (min-width: 768px) { .entry .entry-content .wp-block-image.alignfull img { + max-width: calc( 125% + 150px); margin-right: auto; margin-left: auto; } diff --git a/src/wp-content/themes/twentynineteen/style.css b/src/wp-content/themes/twentynineteen/style.css index 6d593e38f1..c10e8701b2 100644 --- a/src/wp-content/themes/twentynineteen/style.css +++ b/src/wp-content/themes/twentynineteen/style.css @@ -3956,20 +3956,53 @@ body.page .main-navigation { } } +.entry .entry-content .wp-block-image { + max-width: 100%; +} + .entry .entry-content .wp-block-image img { display: block; } -.entry .entry-content .wp-block-image.alignleft, .entry .entry-content .wp-block-image.alignright { - max-width: 100%; +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-image .aligncenter { + max-width: calc(8 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-image .aligncenter { + max-width: calc(6 * (100vw / 12) - 28px); + } +} + +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-image .aligncenter { + margin: 0; + width: calc(8 * (100vw / 12) - 28px); + } + .entry .entry-content .wp-block-image .aligncenter img { + margin: 0 auto; + } +} + +@media only screen and (min-width: 1168px) { + .entry .entry-content .wp-block-image .aligncenter { + width: calc(6 * (100vw / 12) - 28px); + } + .entry .entry-content .wp-block-image .aligncenter img { + margin: 0 auto; + } } .entry .entry-content .wp-block-image.alignfull img { width: 100vw; + max-width: calc( 100% + (2 * 1rem)); } @media only screen and (min-width: 768px) { .entry .entry-content .wp-block-image.alignfull img { + max-width: calc( 125% + 150px); margin-left: auto; margin-right: auto; }