WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Twenty Nineteen: Push right-aligned image block outside of text column. 

Update right-aligned image block styles to push them outside of the text column on the front end, to match the original design and how the block looks in the editor.

Props kjellr, joen, allancole.
Merges [44371] to the 5.0 branch.
Fixes #45716.
Built from https://develop.svn.wordpress.org/branches/5.0@44428


git-svn-id: http://core.svn.wordpress.org/branches/5.0@44258 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2019-01-07 16:06:45 +00:00
parent 69ca1a8227
commit ef2e5af1f6
4 changed files with 94 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
View File

@ -505,20 +505,40 @@
//! Image
.wp-block-image {
max-width: 100%;
img {
display: block;
}
&.alignleft,
&.alignright {
max-width: 100%;
.aligncenter {
@include postContentMaxWidth();
@include media(tablet) {
margin: 0;
width: $size__site-tablet-content;
img {
margin: 0 auto;
}
}
@include media(desktop) {
width: $size__site-desktop-content;
img {
margin: 0 auto;
}
}
}
&.alignfull img {
width: 100vw;
max-width: calc( 100% + (2 * #{$size__spacing-unit}));
@include media(tablet) {
max-width: calc( 125% + 150px );
margin-left: auto;
margin-right: auto;
}

37
wp-content/themes/twentynineteen/style-rtl.css
View File

@ -3982,20 +3982,53 @@ body.page .main-navigation {
}
}
.entry .entry-content .wp-block-image {
max-width: 100%;
}
.entry .entry-content .wp-block-image img {
display: block;
}
.entry .entry-content .wp-block-image.alignleft, .entry .entry-content .wp-block-image.alignright {
max-width: 100%;
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(8 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image .aligncenter {
margin: 0;
width: calc(8 * (100vw / 12) - 28px);
}
.entry .entry-content .wp-block-image .aligncenter img {
margin: 0 auto;
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
width: calc(6 * (100vw / 12) - 28px);
}
.entry .entry-content .wp-block-image .aligncenter img {
margin: 0 auto;
}
}
.entry .entry-content .wp-block-image.alignfull img {
width: 100vw;
max-width: calc( 100% + (2 * 1rem));
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image.alignfull img {
max-width: calc( 125% + 150px);
margin-right: auto;
margin-left: auto;
}

37
wp-content/themes/twentynineteen/style.css
View File

@ -3994,20 +3994,53 @@ body.page .main-navigation {
}
}
.entry .entry-content .wp-block-image {
max-width: 100%;
}
.entry .entry-content .wp-block-image img {
display: block;
}
.entry .entry-content .wp-block-image.alignleft, .entry .entry-content .wp-block-image.alignright {
max-width: 100%;
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(8 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image .aligncenter {
margin: 0;
width: calc(8 * (100vw / 12) - 28px);
}
.entry .entry-content .wp-block-image .aligncenter img {
margin: 0 auto;
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
width: calc(6 * (100vw / 12) - 28px);
}
.entry .entry-content .wp-block-image .aligncenter img {
margin: 0 auto;
}
}
.entry .entry-content .wp-block-image.alignfull img {
width: 100vw;
max-width: calc( 100% + (2 * 1rem));
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image.alignfull img {
max-width: calc( 125% + 150px);
margin-left: auto;
margin-right: auto;
}

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.0.3-alpha-44427';
$wp_version = '5.0.3-alpha-44428';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.