From 6bec9ed8f63a2a8f8c484db7ed683b0745208d29 Mon Sep 17 00:00:00 2001
From: desrosj <desrosj@git.wordpress.org>
Date: Mon, 17 Dec 2018 15:46:52 +0000
Subject: [PATCH] =?UTF-8?q?Twenty=20Sixteen:=20Update=20theme=E2=80=99s=20?=
 =?UTF-8?q?wide=20image=20styles=20to=20include=20Image=20Blocks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Twenty Sixteen includes functionality and styles that make full-size images extend wider than the content when they are added to posts, and appear below the post meta. This update adds the same behavior to image blocks and their captions.

Merges [43911] to trunk.

Props laurelfulford.
Fixes: #45380.
Built from https://develop.svn.wordpress.org/trunk@44263


git-svn-id: http://core.svn.wordpress.org/trunk@44093 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 .../themes/twentysixteen/css/blocks.css       | 23 +++++++++++++++++++
 .../twentysixteen/css/editor-blocks.css       |  5 ++++
 .../themes/twentysixteen/js/functions.js      | 17 ++++++++++++--
 wp-includes/version.php                       |  2 +-
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/wp-content/themes/twentysixteen/css/blocks.css b/wp-content/themes/twentysixteen/css/blocks.css
index 11ac299230..093109a4de 100644
--- a/wp-content/themes/twentysixteen/css/blocks.css
+++ b/wp-content/themes/twentysixteen/css/blocks.css
@@ -25,6 +25,11 @@ Description: Used to style Gutenberg Blocks.
 	font-style: italic;
 	line-height: 1.6153846154;
 	padding-top: 0.5384615385em;
+	text-align: left;
+}
+
+.rtl [class^="wp-block-"] figcaption {
+	text-align: right;
 }
 
 /*--------------------------------------------------------------
@@ -37,6 +42,24 @@ p.has-drop-cap:not(:focus)::first-letter {
 	font-size: 5em;
 }
 
+/* Image */
+
+@media screen and (min-width: 61.5625em) {
+	body:not(.search-results) article:not(.type-page) .wp-block-image figcaption.below-entry-meta {
+		clear: both;
+		display: block;
+		float: none;
+		margin-right: 0;
+		margin-left: -40%;
+		max-width: 140%;
+	}
+
+	body.rtl:not(.search-results) article:not(.type-page) .wp-block-image figcaption.below-entry-meta {
+		margin-left: 0;
+		margin-right: -40%;
+	}
+}
+
 /* Gallery */
 
 .wp-block-gallery {
diff --git a/wp-content/themes/twentysixteen/css/editor-blocks.css b/wp-content/themes/twentysixteen/css/editor-blocks.css
index 1d020c72b3..16d94386e0 100644
--- a/wp-content/themes/twentysixteen/css/editor-blocks.css
+++ b/wp-content/themes/twentysixteen/css/editor-blocks.css
@@ -262,6 +262,11 @@ Description: Used to style Gutenberg Blocks in the editor.
 	font-style: italic;
 	line-height: 1.6153846154;
 	padding-top: 0.5384615385em;
+	text-align: left;
+}
+
+.rtl [class^="wp-block-"] figcaption {
+	text-align: right;
 }
 
 /*--------------------------------------------------------------
diff --git a/wp-content/themes/twentysixteen/js/functions.js b/wp-content/themes/twentysixteen/js/functions.js
index 8610561355..a15af117cb 100644
--- a/wp-content/themes/twentysixteen/js/functions.js
+++ b/wp-content/themes/twentysixteen/js/functions.js
@@ -148,26 +148,37 @@
 				entryFooterPos       = entryFooter.offset(),
 				entryFooterPosBottom = entryFooterPos.top + ( entryFooter.height() + 28 ),
 				caption              = element.closest( 'figure' ),
+				figcaption           = element.next( 'figcaption' ),
 				newImg;
 
 			// Add 'below-entry-meta' to elements below the entry meta.
 			if ( elementPosTop > entryFooterPosBottom ) {
 
 				// Check if full-size images and captions are larger than or equal to 840px.
-				if ( 'img.size-full' === param ) {
+				if ( 'img.size-full' === param || '.wp-block-image img' === param ) {
 
 					// Create an image to find native image width of resized images (i.e. max-width: 100%).
 					newImg = new Image();
 					newImg.src = element.attr( 'src' );
 
 					$( newImg ).on( 'load.twentysixteen', function() {
-						if ( newImg.width >= 840  ) {
+						if ( newImg.width >= 840 ) {
+
+							// Check if an image in an image block has a width attribute; if its value is less than 840, return.
+							if ( '.wp-block-image img' === param && element.is( '[width]' ) && element.attr( 'width' ) < 840 ) {
+								return;
+							}
+
 							element.addClass( 'below-entry-meta' );
 
 							if ( caption.hasClass( 'wp-caption' ) ) {
 								caption.addClass( 'below-entry-meta' );
 								caption.removeAttr( 'style' );
 							}
+
+							if ( figcaption ) {
+								figcaption.addClass( 'below-entry-meta' );
+							}
 						}
 					} );
 				} else {
@@ -190,11 +201,13 @@
 				resizeTimer = setTimeout( function() {
 					belowEntryMetaClass( 'img.size-full' );
 					belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
+					belowEntryMetaClass( '.wp-block-image img' );
 				}, 300 );
 				onResizeARIA();
 			} );
 
 		belowEntryMetaClass( 'img.size-full' );
 		belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
+		belowEntryMetaClass( '.wp-block-image img' );
 	} );
 } )( jQuery );
diff --git a/wp-includes/version.php b/wp-includes/version.php
index d59bde9e81..6fce29ddb3 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.1-alpha-44262';
+$wp_version = '5.1-alpha-44263';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.