Changeset 44263

Timestamp:

12/17/2018 03:45:05 PM (8 years ago)

Author:

desrosj

Message:

Twenty Sixteen: Update theme’s wide image styles to include Image Blocks

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.

Location:

trunk

Files:

• . (modified) (1 prop)
• src/wp-content/themes/twentysixteen/css/blocks.css (modified) (2 diffs)
• src/wp-content/themes/twentysixteen/css/editor-blocks.css (modified) (1 diff)
• src/wp-content/themes/twentysixteen/js/functions.js (modified) (6 diffs)

trunk/src/wp-content/themes/twentysixteen/css/blocks.css

@@ -26 +26 @@
         line-height: 1.6153846154;
         padding-top: 0.5384615385em;
+        text-align: left;
+}
+
+.rtl [class^="wp-block-"] figcaption {
+        text-align: right;
 }
 
@@ -36 +41 @@
 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%;
+        }
 }
 

trunk/src/wp-content/themes/twentysixteen/css/editor-blocks.css

@@ -263 +263 @@
         line-height: 1.6153846154;
         padding-top: 0.5384615385em;
+        text-align: left;
+}
+
+.rtl [class^="wp-block-"] figcaption {
+        text-align: right;
 }
 

trunk/src/wp-content/themes/twentysixteen/js/functions.js

@@ -149 +149 @@
                                 entryFooterPosBottom = entryFooterPos.top + ( entryFooter.height() + 28 ),
                                 caption              = element.closest( 'figure' ),
+                                figcaption           = element.next( 'figcaption' ),
                                 newImg;
 
@@ -155 +156 @@
 
                                 // 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%).
@@ -162 +163 @@
 
                                         $( 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' );
 
@@ -168 +175 @@
                                                                 caption.addClass( 'below-entry-meta' );
                                                                 caption.removeAttr( 'style' );
+                                                        }
+
+                                                        if ( figcaption ) {
+                                                                figcaption.addClass( 'below-entry-meta' );
                                                         }
                                                 }
@@ -191 +202 @@
                                         belowEntryMetaClass( 'img.size-full' );
                                         belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
+                                        belowEntryMetaClass( '.wp-block-image img' );
                                 }, 300 );
                                 onResizeARIA();
@@ -197 +209 @@
                 belowEntryMetaClass( 'img.size-full' );
                 belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
+                belowEntryMetaClass( '.wp-block-image img' );
         } );
 } )( jQuery );