Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-12-23 09:37:42 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
desrosj 2018-12-17 15:46:52 +00:00
parent 4f86a03258
commit 6bec9ed8f6
4 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
wp-content/themes/twentysixteen/css/blocks.css
View File

@ -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 {

5
wp-content/themes/twentysixteen/css/editor-blocks.css
View File

@ -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;
}
/*--------------------------------------------------------------

17
wp-content/themes/twentysixteen/js/functions.js
View File

@ -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 );

2
wp-includes/version.php
View File

@ -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.