Skip to content
Permalink
Browse files

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.

git-svn-id: https://develop.svn.wordpress.org/branches/5.0@44428 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information...
SergeyBiryukov committed Jan 7, 2019
1 parent 190ef35 commit 9e05b92447a18d535d131ea9b37f6b794c1ee975
@@ -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;
}
@@ -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;
}
@@ -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;
}

0 comments on commit 9e05b92

Please sign in to comment.
You can’t perform that action at this time.