mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-04-14 17:12:13 +02:00
Code Issues Actions22 Packages Projects Releases Wiki Activity

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

Browse Source 
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 .

git-svn-id: https://develop.svn.wordpress.org/branches/5.0@44428 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov 2019-01-07 16:05:48 +00:00
parent 190ef35bc9
commit 9e05b92447
3 changed files with 93 additions and 7 deletions
src/wp-content/themes/twentynineteen
sass/blocks
_blocks.scss
style-rtl.cssstyle.css

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

@ -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
src/wp-content/themes/twentynineteen/style-rtl.css

@ -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
src/wp-content/themes/twentynineteen/style.css

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