WordPress.org

Make WordPress Core

Changeset 44428


Ignore:
Timestamp:
01/07/2019 04:05:48 PM (11 months ago)
Author:
SergeyBiryukov
Message:

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.

Location:
branches/5.0
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0

  • branches/5.0/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss

    r44424 r44428  
    506506    //! Image
    507507    .wp-block-image {
     508        max-width: 100%;
    508509
    509510        img {
     
    511512        }
    512513
    513         &.alignleft,
    514         &.alignright {
    515             max-width: 100%;
     514        .aligncenter {
     515           
     516            @include postContentMaxWidth();
     517
     518            @include media(tablet) {
     519                margin: 0;
     520                width: $size__site-tablet-content;
     521
     522                img {
     523                    margin: 0 auto;
     524                }
     525            }
     526
     527            @include media(desktop) {
     528                width: $size__site-desktop-content;
     529
     530                img {
     531                    margin: 0 auto;
     532                }
     533            }
    516534        }
    517535
    518536        &.alignfull img {
    519537            width: 100vw;
     538            max-width: calc( 100% + (2 * #{$size__spacing-unit}));
    520539
    521540            @include media(tablet) {
     541                max-width: calc( 125% + 150px );
    522542                margin-left: auto;
    523543                margin-right: auto;
  • branches/5.0/src/wp-content/themes/twentynineteen/style-rtl.css

    r44427 r44428  
    39833983}
    39843984
     3985.entry .entry-content .wp-block-image {
     3986  max-width: 100%;
     3987}
     3988
    39853989.entry .entry-content .wp-block-image img {
    39863990  display: block;
    39873991}
    39883992
    3989 .entry .entry-content .wp-block-image.alignleft, .entry .entry-content .wp-block-image.alignright {
    3990   max-width: 100%;
     3993@media only screen and (min-width: 768px) {
     3994  .entry .entry-content .wp-block-image .aligncenter {
     3995    max-width: calc(8 * (100vw / 12) - 28px);
     3996  }
     3997}
     3998
     3999@media only screen and (min-width: 1168px) {
     4000  .entry .entry-content .wp-block-image .aligncenter {
     4001    max-width: calc(6 * (100vw / 12) - 28px);
     4002  }
     4003}
     4004
     4005@media only screen and (min-width: 768px) {
     4006  .entry .entry-content .wp-block-image .aligncenter {
     4007    margin: 0;
     4008    width: calc(8 * (100vw / 12) - 28px);
     4009  }
     4010  .entry .entry-content .wp-block-image .aligncenter img {
     4011    margin: 0 auto;
     4012  }
     4013}
     4014
     4015@media only screen and (min-width: 1168px) {
     4016  .entry .entry-content .wp-block-image .aligncenter {
     4017    width: calc(6 * (100vw / 12) - 28px);
     4018  }
     4019  .entry .entry-content .wp-block-image .aligncenter img {
     4020    margin: 0 auto;
     4021  }
    39914022}
    39924023
    39934024.entry .entry-content .wp-block-image.alignfull img {
    39944025  width: 100vw;
     4026  max-width: calc( 100% + (2 * 1rem));
    39954027}
    39964028
    39974029@media only screen and (min-width: 768px) {
    39984030  .entry .entry-content .wp-block-image.alignfull img {
     4031    max-width: calc( 125% + 150px);
    39994032    margin-right: auto;
    40004033    margin-left: auto;
  • branches/5.0/src/wp-content/themes/twentynineteen/style.css

    r44427 r44428  
    39953995}
    39963996
     3997.entry .entry-content .wp-block-image {
     3998  max-width: 100%;
     3999}
     4000
    39974001.entry .entry-content .wp-block-image img {
    39984002  display: block;
    39994003}
    40004004
    4001 .entry .entry-content .wp-block-image.alignleft, .entry .entry-content .wp-block-image.alignright {
    4002   max-width: 100%;
     4005@media only screen and (min-width: 768px) {
     4006  .entry .entry-content .wp-block-image .aligncenter {
     4007    max-width: calc(8 * (100vw / 12) - 28px);
     4008  }
     4009}
     4010
     4011@media only screen and (min-width: 1168px) {
     4012  .entry .entry-content .wp-block-image .aligncenter {
     4013    max-width: calc(6 * (100vw / 12) - 28px);
     4014  }
     4015}
     4016
     4017@media only screen and (min-width: 768px) {
     4018  .entry .entry-content .wp-block-image .aligncenter {
     4019    margin: 0;
     4020    width: calc(8 * (100vw / 12) - 28px);
     4021  }
     4022  .entry .entry-content .wp-block-image .aligncenter img {
     4023    margin: 0 auto;
     4024  }
     4025}
     4026
     4027@media only screen and (min-width: 1168px) {
     4028  .entry .entry-content .wp-block-image .aligncenter {
     4029    width: calc(6 * (100vw / 12) - 28px);
     4030  }
     4031  .entry .entry-content .wp-block-image .aligncenter img {
     4032    margin: 0 auto;
     4033  }
    40034034}
    40044035
    40054036.entry .entry-content .wp-block-image.alignfull img {
    40064037  width: 100vw;
     4038  max-width: calc( 100% + (2 * 1rem));
    40074039}
    40084040
    40094041@media only screen and (min-width: 768px) {
    40104042  .entry .entry-content .wp-block-image.alignfull img {
     4043    max-width: calc( 125% + 150px);
    40114044    margin-left: auto;
    40124045    margin-right: auto;
Note: See TracChangeset for help on using the changeset viewer.