Changeset 44428 for branches/5.0/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

Timestamp:

01/07/2019 04:05:48 PM (7 years ago)

Author:

SergeyBiryukov

Message:

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.
Merges [44371] to the 5.0 branch.
Fixes #45716.

Location:

branches/5.0

Files:

• . (modified) (1 prop)
• src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss (modified) (2 diffs)

branches/5.0/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

@@ -506 +506 @@
     //! Image
     .wp-block-image {
+        max-width: 100%;
 
         img {
@@ -511 +512 @@
         }
 
-        &.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;