WordPress.org

Make WordPress Core

Changeset 45606


Ignore:
Timestamp:
07/07/2019 08:48:03 PM (5 months ago)
Author:
laurelfulford
Message:

Twenty Thirteen: Add styles for the new Group block.

Add styles for the new Group block to the theme, to make sure nested blocks display correctly when using the wide and full alignments.

Props @kjellr.
Fixes #46778.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentythirteen/css/blocks.css

    r44381 r45606  
    405405}
    406406
     407/* Group Block: Default Alignment */
     408
     409.wp-block-group,
     410.wp-block-group.has-background {
     411    margin-bottom: 24px;
     412}
     413
     414.wp-block-group:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > * {
     415    width: 604px;
     416    max-width: 100%;
     417    margin-left: 0;
     418    margin-right: 0;
     419}
     420
     421.wp-block-group.has-background:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > .alignfull {
     422    width: calc(100% + 60px);
     423    max-width: calc(100% + 60px);
     424    margin-left: -30px;
     425}
     426
     427.wp-block-group:not(.alignfull) .wp-block-columns.alignfull {
     428    margin-left: auto;
     429    margin-right: auto;
     430}
     431
     432/* Group Block: Wide Alignment */
     433
     434.wp-block-group.alignwide > .wp-block-group__inner-container > *,
     435.wp-block-group.alignwide > .wp-block-group__inner-container > .alignwide,
     436.wp-block-group.alignwide > .wp-block-group__inner-container > .alignfull {
     437    max-width: 604px;
     438    margin-left: auto;
     439    margin-right: auto;
     440}
     441
     442.wp-block-group.alignwide > .wp-block-group__inner-container > .alignwide,
     443.wp-block-group.alignwide > .wp-block-group__inner-container > .alignfull {
     444    width: 100%;
     445    max-width: 100%;
     446}
     447
     448.wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull {
     449    width: calc(100% + 60px);
     450    max-width: calc(100% + 60px);
     451    margin-left: -30px;
     452}
     453
     454@media (max-width: 664px) {
     455    .wp-block-group:not(.has-background).alignwide {
     456        margin-left: 0;
     457        margin-right: 0;
     458    }
     459
     460    .wp-block-group:not(.has-background).alignwide > .wp-block-group__inner-container > .alignwide,
     461    .wp-block-group:not(.has-background).alignwide > .wp-block-group__inner-container > .alignfull {
     462        width: auto;
     463        max-width: 1600px;
     464        margin-left: calc(25% - 25vw);
     465        margin-right: calc(25% - 25vw);
     466    }
     467}
     468
     469/* Group Block: Full Alignment */
     470
     471@media (max-width: 664px) {
     472    .wp-block-group:not(.has-background).alignfull {
     473        margin-left: 0;
     474        margin-right: 0;
     475    }
     476
     477    .wp-block-group.has-background.alignfull > *:not(.alignfull) {
     478        margin-left: auto;
     479        margin-right: auto;
     480    }
     481}
     482
     483@media (max-width: 999px) {
     484    body.sidebar .wp-block-group.alignfull:not(.has-background) {
     485        margin-left: 0;
     486        margin-right: 0;
     487    }
     488
     489    body.sidebar .wp-block-group.alignfull.has-background > .wp-block-group__inner-container {
     490        max-width: 604px;
     491        margin: 0 auto;
     492    }
     493
     494    body.sidebar .wp-block-group.alignfull:not(.has-background) > .wp-block-group__inner-container > .alignfull {
     495        margin-left: calc(50% - 50vw);
     496        margin-right: calc(50% - 50vw);
     497    }
     498}
     499
     500@media (min-width: 665px) {
     501    body:not(.sidebar) .wp-block-group.alignfull,
     502    body:not(.sidebar) .wp-block-group.has-background.alignfull {
     503        padding: 20px calc( (100vw - 604px ) / 2 ); /* Reproduces the padding of entry-content, so that default block rules apply properly inside of this block. */
     504    }
     505}
     506
     507@media (min-width: 1600px) {
     508    body:not(.sidebar) .wp-block-group.alignfull,
     509    body:not(.sidebar) .wp-block-group.has-background.alignfull {
     510        padding: 20px 498px; /* Above 1600px, these need fixed left/right padding. This works out to ((1600px - 604px) / 2) */
     511    }
     512}
     513
    407514/* Media & Text */
    408515
  • trunk/src/wp-content/themes/twentythirteen/css/editor-blocks.css

    r44381 r45606  
    362362}
    363363
     364/* Group */
     365
     366.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block {
     367    max-width: 634px;
     368}
     369
     370.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="wide"] {
     371    max-width: 1100px;
     372}
     373
     374.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     375    max-width: 100%;
     376}
     377
     378.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
     379    width: calc(100% + 60px);
     380    max-width: calc(100% + 60px);
     381}
     382
    364383/*--------------------------------------------------------------
    3653847.0 Blocks - Widgets
Note: See TracChangeset for help on using the changeset viewer.