From 1b14dfa064bcf74050ff41781271ec0f3971fb41 Mon Sep 17 00:00:00 2001
From: Jonathan Desrosiers <desrosj@git.wordpress.org>
Date: Mon, 17 Dec 2018 15:45:05 +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.

git-svn-id: https://develop.svn.wordpress.org/trunk@44263 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../themes/twentysixteen/css/blocks.css       | 23 +++++++++++++++++++
 .../twentysixteen/css/editor-blocks.css       |  5 ++++
 .../themes/twentysixteen/js/functions.js      | 17 ++++++++++++--
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/wp-content/themes/twentysixteen/css/blocks.css b/src/wp-content/themes/twentysixteen/css/blocks.css
index 11ac299230..093109a4de 100644
--- a/src/wp-content/themes/twentysixteen/css/blocks.css
+++ b/src/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/src/wp-content/themes/twentysixteen/css/editor-blocks.css b/src/wp-content/themes/twentysixteen/css/editor-blocks.css
index 1d020c72b3..16d94386e0 100644
--- a/src/wp-content/themes/twentysixteen/css/editor-blocks.css
+++ b/src/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/src/wp-content/themes/twentysixteen/js/functions.js b/src/wp-content/themes/twentysixteen/js/functions.js
index 8610561355..a15af117cb 100644
--- a/src/wp-content/themes/twentysixteen/js/functions.js
+++ b/src/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 );