Make WordPress Core

Changeset 51209


Ignore:
Timestamp:
06/22/2021 10:14:08 PM (3 years ago)
Author:
ryelle
Message:

Twenty Nineteen: Update margins on full- and wide-aligned blocks in the editor.

Previously, full width blocks would cause a horizontal scrollbar, and nesting full width blocks would cause the content to be pulled off the screen. Now wide and full width blocks can be nested without any visual issues.

Props aleperez92, Boniu91, onemaggie, hellofromTonya.
Fixes #53428.

Location:
trunk/src/wp-content/themes/twentynineteen
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentynineteen/style-editor.css

    r51098 r51209  
    584584body .wp-block[data-align="full"],
    585585body .wp-block.alignfull {
    586   width: calc(100% + 20px);
    587   max-width: calc(100% + 20px);
     586  max-width: calc(100% + 16px);
     587  width: calc(100% + 16px);
    588588}
    589589
     
    621621  body .wp-block[data-align="full"],
    622622  body .wp-block.alignfull {
    623     width: calc( 125% + 20px);
    624     max-width: calc( 125% + 20px);
     623    width: calc(125% + 16px);
     624    max-width: calc(125% + 16px);
    625625    position: relative;
    626626    left: -12.5%;
     627  }
     628  body .wp-block[data-align="wide"] .wp-block[data-align="full"],
     629  body .wp-block[data-align="full"] .wp-block[data-align="full"],
     630  body .wp-block.alignwide .wp-block.alignfull,
     631  body .wp-block.alignfull .wp-block.alignfull {
     632    left: 0;
     633    margin-left: 0;
     634    margin-right: 0;
    627635  }
    628636}
     
    15611569  }
    15621570}
     1571
     1572.wp-block-post-template .wp-block[data-align="full"],
     1573.wp-block-post-template .wp-block.alignfull {
     1574  left: 0;
     1575  max-width: 100%;
     1576  padding-left: 0;
     1577  padding-right: 0;
     1578  width: 100%;
     1579}
  • trunk/src/wp-content/themes/twentynineteen/style-editor.scss

    r51098 r51209  
    1414    .wp-block[data-align="full"],
    1515    .wp-block.alignfull {
    16         width: calc(100% + 20px);
    17         max-width: calc(100% + 20px);
     16        max-width: calc(100% + 16px);
     17        width: calc(100% + 16px);
    1818    }
    1919
     
    5555        .wp-block[data-align="full"],
    5656        .wp-block.alignfull {
    57             width: calc( 125% + 20px );
    58             max-width: calc( 125% + 20px );
     57            width: calc(125% + 16px);
     58            max-width: calc(125% + 16px);
    5959            position: relative;
    6060            left: -12.5%;
     61        }
     62
     63        .wp-block[data-align="wide"] .wp-block[data-align="full"],
     64        .wp-block[data-align="full"] .wp-block[data-align="full"],
     65        .wp-block.alignwide .wp-block.alignfull,
     66        .wp-block.alignfull .wp-block.alignfull {
     67            left: 0;
     68            margin-left: 0;
     69            margin-right: 0;
    6170        }
    6271    }
     
    972981        }
    973982    }
     983
     984.wp-block-post-template {
     985
     986    .wp-block[data-align="full"],
     987    .wp-block.alignfull {
     988        left: 0;
     989        max-width: 100%;
     990        padding-left: 0;
     991        padding-right: 0;
     992        width: 100%;
     993    }
     994}
Note: See TracChangeset for help on using the changeset viewer.