WordPress.org

Make WordPress Core

Changeset 44263


Ignore:
Timestamp:
12/17/2018 03:45:05 PM (11 months 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk

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

    r44152 r44263  
    2626    line-height: 1.6153846154;
    2727    padding-top: 0.5384615385em;
     28    text-align: left;
     29}
     30
     31.rtl [class^="wp-block-"] figcaption {
     32    text-align: right;
    2833}
    2934
     
    3641p.has-drop-cap:not(:focus)::first-letter {
    3742    font-size: 5em;
     43}
     44
     45/* Image */
     46
     47@media screen and (min-width: 61.5625em) {
     48    body:not(.search-results) article:not(.type-page) .wp-block-image figcaption.below-entry-meta {
     49        clear: both;
     50        display: block;
     51        float: none;
     52        margin-right: 0;
     53        margin-left: -40%;
     54        max-width: 140%;
     55    }
     56
     57    body.rtl:not(.search-results) article:not(.type-page) .wp-block-image figcaption.below-entry-meta {
     58        margin-left: 0;
     59        margin-right: -40%;
     60    }
    3861}
    3962
  • trunk/src/wp-content/themes/twentysixteen/css/editor-blocks.css

    r44152 r44263  
    263263    line-height: 1.6153846154;
    264264    padding-top: 0.5384615385em;
     265    text-align: left;
     266}
     267
     268.rtl [class^="wp-block-"] figcaption {
     269    text-align: right;
    265270}
    266271
  • trunk/src/wp-content/themes/twentysixteen/js/functions.js

    r40851 r44263  
    149149                entryFooterPosBottom = entryFooterPos.top + ( entryFooter.height() + 28 ),
    150150                caption              = element.closest( 'figure' ),
     151                figcaption           = element.next( 'figcaption' ),
    151152                newImg;
    152153
     
    155156
    156157                // Check if full-size images and captions are larger than or equal to 840px.
    157                 if ( 'img.size-full' === param ) {
     158                if ( 'img.size-full' === param || '.wp-block-image img' === param ) {
    158159
    159160                    // Create an image to find native image width of resized images (i.e. max-width: 100%).
     
    162163
    163164                    $( newImg ).on( 'load.twentysixteen', function() {
    164                         if ( newImg.width >= 840  ) {
     165                        if ( newImg.width >= 840 ) {
     166
     167                            // Check if an image in an image block has a width attribute; if its value is less than 840, return.
     168                            if ( '.wp-block-image img' === param && element.is( '[width]' ) && element.attr( 'width' ) < 840 ) {
     169                                return;
     170                            }
     171
    165172                            element.addClass( 'below-entry-meta' );
    166173
     
    168175                                caption.addClass( 'below-entry-meta' );
    169176                                caption.removeAttr( 'style' );
     177                            }
     178
     179                            if ( figcaption ) {
     180                                figcaption.addClass( 'below-entry-meta' );
    170181                            }
    171182                        }
     
    191202                    belowEntryMetaClass( 'img.size-full' );
    192203                    belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
     204                    belowEntryMetaClass( '.wp-block-image img' );
    193205                }, 300 );
    194206                onResizeARIA();
     
    197209        belowEntryMetaClass( 'img.size-full' );
    198210        belowEntryMetaClass( 'blockquote.alignleft, blockquote.alignright' );
     211        belowEntryMetaClass( '.wp-block-image img' );
    199212    } );
    200213} )( jQuery );
Note: See TracChangeset for help on using the changeset viewer.