From 7a3648a1e8b549810359962c024295c30981826b Mon Sep 17 00:00:00 2001
From: laurelfulford <laurelfulford@git.wordpress.org>
Date: Fri, 28 Dec 2018 21:22:51 +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.


Built from https://develop.svn.wordpress.org/trunk@44371


git-svn-id: http://core.svn.wordpress.org/trunk@44201 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../twentynineteen/sass/blocks/_blocks.scss   | 26 +++++++++++--
 .../themes/twentynineteen/style-rtl.css       | 37 ++++++++++++++++++-
 wp-content/themes/twentynineteen/style.css    | 37 ++++++++++++++++++-
 wp-includes/version.php                       |  2 +-
 4 files changed, 94 insertions(+), 8 deletions(-)

diff --git a/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss b/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
index 72822b1263..7c843a13c6 100644
--- a/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
+++ b/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/wp-content/themes/twentynineteen/style-rtl.css b/wp-content/themes/twentynineteen/style-rtl.css
index c5ca35cdd5..f4569a3f30 100644
--- a/wp-content/themes/twentynineteen/style-rtl.css
+++ b/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/wp-content/themes/twentynineteen/style.css b/wp-content/themes/twentynineteen/style.css
index 6d593e38f1..c10e8701b2 100644
--- a/wp-content/themes/twentynineteen/style.css
+++ b/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;
   }
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 5d73be06ab..fa0a819744 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.1-alpha-44370';
+$wp_version = '5.1-alpha-44371';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.