Changeset 44371 for trunk

Timestamp:

12/28/2018 09:21:48 PM (7 years ago)

Author:

laurelfulford

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.
Fixes #45716.

Location:

trunk/src/wp-content/themes/twentynineteen

Files:

• sass/blocks/_blocks.scss (modified) (2 diffs)
• style-rtl.css (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/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;

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

@@ -3945 +3945 @@
 }
 
+.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;

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

@@ -3957 +3957 @@
 }
 
+.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;