Get WordPress

Make WordPress Core

Timestamp:
11/11/2019 08:54:49 PM (5 years ago)
Author:
SergeyBiryukov
Message:

Twenty Twenty: Make CSS adjustments to account for the latest editor changes and ensure that group blocks work in expected ways.

Props williampatton, allancole, karmatosed, pierlo, joen, ianbelanger.
Fixes #48557.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentytwenty/style.css

    r46701 r46711  
    23852385.post-meta-wrapper {
    23862386    margin-top: 2rem;
     2387
     2388
     2389
     2390
    23872391}
    23882392
    … …  
    25452549.author-bio {
    25462550    margin-top: 4rem;
     2551
     2552
     2553
     2554
    25472555}
    25482556
    … …  
    27872795}
    27882796
    2789 .wp-block-archives,
    2790 .wp-block-categories,
     2797.wp-block-archives,
     2798.wp-block-categories,
    27912799.wp-block-code,
    2792 .wp-block-columns,
    2793 .wp-block-cover,
    2794 .wp-block-embed,
    2795 .wp-block-gallery,
    2796 .wp-block-group,
    2797 .wp-block-latest-comments,
    2798 .wp-block-latest-posts,
    2799 .wp-block-media-text,
     2800.wp-block-columns:not(.alignwide):not(.alignfull),
     2801.wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2802.wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2803.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2804.wp-block-group:not(.has-background):not(.alignwide):not(.alignfull),
     2805.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2806.wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright),
     2807.wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright),
     2808.wp-block-media-text:not(.alignwide):not(.alignfull),
    28002809.wp-block-preformatted,
    2801 .wp-block-pullquote,
     2810.wp-block-pullquote,
    28022811.wp-block-quote,
    28032812.wp-block-quote.is-large,
    28042813.wp-block-quote.is-style-large,
    28052814.wp-block-verse,
    2806 .wp-block-video {
     2815.wp-block-video {
    28072816    margin-bottom: 3rem;
    28082817    margin-top: 3rem;
    … …  
    30203029
    30213030/* Block: Gallery ---------------------------- */
    3022 
    3023 ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignleft) {
    3024     margin-left: 0;
    3025 }
    30263031
    30273032.wp-block-gallery ul {
    … …  
    32223227    max-width: calc(100vw - 4rem);
    32233228    position: relative;
    3224     left: calc(50% - 50vw + 2rem);
    3225     width: calc(100vw - 4rem);
     3229    width: 100%;
    32263230}
    32273231
    … …  
    32933297    border: none;
    32943298    padding: 0;
     3299
     3300
    32953301}
    32963302
    … …  
    33153321/* Block: Widget Latest Comments ------------- */
    33163322
    3317 .entry-content .wp-block-latest-comments,
    33183323.entry-content .wp-block-latest-comments li {
    3319     margin-left: 0;
     3324    margin 0;
    33203325}
    33213326
    … …  
    33823387.entry-content {
    33833388    line-height: 1.5;
    3384     max-width: 58rem;
     3389}
     3390
     3391.entry-content > * {
     3392    margin-left: auto;
     3393    margin-right: auto;
     3394    margin-bottom: 1.25em;
    33853395}
    33863396
    … …  
    34093419.entry-content h5,
    34103420.entry-content h6 {
    3411     margin: 3.5rem 0 2rem;
     3421    margin: 3.5rem 2rem;
    34123422}
    34133423
    … …  
    34203430
    34213431.entry-content hr {
    3422     margin: 4rem 0;
     3432    margin: 4rem ;
    34233433}
    34243434
    … …  
    34523462/* Alignment Classes ------------------------- */
    34533463
     3464
     3465
     3466
     3467
     3468
     3469
     3470
     3471
     3472
     3473
    34543474.alignnone,
    34553475.aligncenter,
    34563476.alignleft,
    3457 .alignright {
    3458     margin: 3rem 0;
     3477.alignright,
     3478.alignwide {
     3479    margin-top: 4rem;
     3480    margin-right: auto;
     3481    margin-bottom: 4rem;
     3482    margin-left: auto;
     3483}
     3484
     3485[class*="__inner-container"] > *:not(.alignwide):not(.alignfull) {
     3486    margin-left: auto;
     3487    margin-right: auto;
     3488}
     3489
     3490/* Full */
     3491
     3492.alignfull {
     3493    margin-top: 5rem;
     3494    margin-right: auto;
     3495    margin-bottom: 5rem;
     3496    margin-left: auto;
     3497    max-width: 100vw;
     3498    position: relative;
     3499    width: 100%;
     3500}
     3501
     3502[class*="__inner-container"] > .alignfull {
    34593503    max-width: 100%;
    34603504}
     3505
     3506
     3507
     3508
     3509
     3510
     3511
     3512
     3513
     3514
     3515
     3516
     3517
     3518
    34613519
    34623520.aligncenter,
    … …  
    34663524}
    34673525
     3526
     3527
    34683528.alignleft,
    34693529.alignright {
    … …  
    34753535    /*rtl:ignore*/
    34763536    float: left;
    3477     margin: 0.3rem 2rem 2rem 0;
     3537    margin: 0.3rem 2rem 2rem ;
    34783538}
    34793539
    … …  
    34823542    /*rtl:ignore*/
    34833543    float: right;
    3484     margin: 0.3rem 0 2rem 2rem;
    3485 }
    3486 
    3487 .alignwide {
    3488     margin: 4rem auto;
    3489     max-width: 120rem;
    3490 }
    3491 
    3492 .entry-content > .alignwide {
    3493     max-width: calc(100vw - 4rem);
    3494     position: relative;
    3495     left: calc(50% - 50vw + 2rem);
    3496     width: calc(100vw - 4rem);
    3497 }
    3498 
    3499 .alignfull {
    3500     margin: 5rem 0;
    3501 }
    3502 
    3503 .entry-content > .alignfull {
    3504     max-width: 100vw;
    3505     position: relative;
    3506     left: calc(50% - 50vw);
    3507     width: 100vw;
    3508 }
    3509 
     3544    margin: 0.3rem 2rem 2rem 2rem;
     3545}
    35103546
    35113547/* Entry Media ------------------------------- */
    … …  
    35153551    margin-left: auto;
    35163552    margin-right: auto;
    3517     max-width: 120rem;
     3553    max-width: rem;
    35183554    width: calc(100% - 4rem);
    35193555}
    … …  
    44684504    .entry-content > .alignleft,
    44694505    .entry-content > p .alignleft,
    4470     .entry-content > .wp-block-image .alignleft {
     4506    .entry-content > .wp-block-image .alignleft,
     4507    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
     4508    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
     4509    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
     4510    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
     4511    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
     4512    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
    44714513
    44724514        /*rtl:ignore*/
    … …  
    44744516    }
    44754517
     4518
     4519
     4520
     4521
     4522
     4523
     4524
     4525
    44764526    .entry-content > .alignright,
    44774527    .entry-content > p .alignright,
    4478     .entry-content > .wp-block-image .alignright {
     4528    .entry-content > .wp-block-image .alignright,
     4529    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
     4530    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
     4531    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
     4532    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
     4533    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
     4534    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
    44794535
    44804536        /*rtl:ignore*/
    44814537        margin-right: calc(( 100vw - 58rem - 8rem ) / -2);
     4538
     4539
     4540
     4541
     4542
     4543
     4544
     4545
    44824546    }
    44834547
    … …  
    44984562
    44994563    hr {
    4500         margin: 8rem 0;
     4564        margin: 8rem ;
    45014565    }
    45024566
    … …  
    45474611    h3,
    45484612    .heading-size-3 {
    4549         margin: 6rem 0 3rem;
     4613        margin: 6rem 3rem;
    45504614    }
    45514615
    … …  
    45564620    h6,
    45574621    .heading-size-6 {
    4558         margin: 4.5rem 0 2.5rem;
     4622        margin: 4.5rem 2.5rem;
    45594623    }
    45604624
    … …  
    49234987    /* BLOCK: BASE MARGINS */
    49244988
    4925     .wp-block-archives,
    4926     .wp-block-categories,
     4989    .wp-block-archives,
     4990    .wp-block-categories,
    49274991    .wp-block-code,
    4928     .wp-block-columns,
    4929     .wp-block-cover,
    4930     .wp-block-embed,
    4931     .wp-block-gallery,
    4932     .wp-block-group,
    4933     .wp-block-latest-comments,
    4934     .wp-block-latest-posts,
    4935     .wp-block-media-text,
     4992    .wp-block-columns:not(.alignwide):not(.alignfull),
     4993    .wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4994    .wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4995    .wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4996    .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull),
     4997    .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4998    .wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright),
     4999    .wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright),
     5000    .wp-block-media-text:not(.alignwide):not(.alignfull),
    49365001    .wp-block-preformatted,
    4937     .wp-block-pullquote,
     5002    .wp-block-pullquote,
    49385003    .wp-block-quote,
    49395004    .wp-block-quote.is-large,
    49405005    .wp-block-quote.is-style-large,
    49415006    .wp-block-verse,
    4942     .wp-block-video {
    4943         margin-bottom: 5rem;
    4944         margin-top: 5rem;
     5007    .wp-block-video {
     5008        margin-bottom: rem;
     5009        margin-top: rem;
    49455010    }
    49465011
    … …  
    50565121
    50575122    hr.wp-block-separator {
    5058         margin: 6rem 0;
     5123        margin: 6rem ;
    50595124    }
    50605125
    50615126    .wp-block-separator.is-style-wide {
    50625127        max-width: calc(100vw - 8rem);
    5063         left: calc(50% - 50vw + 4rem);
    5064         width: calc(100vw - 8rem);
    50655128    }
    50665129
    … …  
    50795142    .entry-content h2,
    50805143    .entry-content h3 {
    5081         margin: 6rem 0 3rem;
     5144        margin: 6rem 3rem;
    50825145    }
    50835146
    … …  
    50855148    .entry-content h5,
    50865149    .entry-content h6 {
    5087         margin: 4.5rem 0 2.5rem;
    5088     }
    5089 
    5090     /* ALIGNMENT CLASSES */
     5150        margin: 4.5rem auto 2.5rem;
     5151    }
    50915152
    50925153    .alignnone,
    … …  
    51085169    }
    51095170
    5110     .alignwide,
    5111     .alignfull {
     5171    .alignwide,
     5172    .alignfull {
    51125173        margin-bottom: 6rem;
    51135174        margin-top: 6rem;
    … …  
    51165177    .entry-content > .alignwide {
    51175178        max-width: calc(100vw - 8rem);
    5118         left: calc(50% - 50vw + 4rem);
    51195179        width: calc(100vw - 8rem);
    51205180    }
    … …  
    55975657    /* BLOCK: GROUP */
    55985658
    5599     .wp-block-group.alignwide.has-background,
    5600     .wp-block-group.alignfull.has-background {
     5659    .wp-block-group.alignwide.has-background,
     5660    .wp-block-group.alignfull.has-background {
    56015661        padding: 8rem 4rem;
    56025662    }
    … …  
    56055665
    56065666    hr.wp-block-separator {
    5607         margin: 8rem 0;
     5667        margin: 8rem ;
    56085668    }
    56095669
    … …  
    56125672    /* ALIGNMENT CLASSES */
    56135673
    5614     .alignwide,
    5615     .alignfull {
     5674    .entry-content > .alignleft,
     5675    .entry-content > p .alignleft,
     5676    .entry-content > .wp-block-image .alignleft {
     5677        position: absolute;
     5678        right: calc((100vw - 58rem) / 2 + 58rem);
     5679        max-width: calc((100% - 58rem) / 2 - 4rem);
     5680    }
     5681
     5682    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft,
     5683    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft,
     5684    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft {
     5685        position: relative;
     5686        right: inherit;
     5687        max-width: inherit;
     5688    }
     5689
     5690    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
     5691    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
     5692    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
     5693    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
     5694    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
     5695    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
     5696        position: absolute;
     5697        right: calc((100% - 58rem) / 2 + 58rem);
     5698        max-width: calc((100% - 58rem) / 2 - 4rem);
     5699    }
     5700
     5701    .entry-content > .alignright,
     5702    .entry-content > p .alignright,
     5703    .entry-content > .wp-block-image .alignright,
     5704    [class*="__inner-container"] > .alignright {
     5705        position: absolute;
     5706        left: calc((100vw - 58rem) / 2 + 58rem);
     5707        max-width: calc((100% - 58rem) / 2 - 4rem);
     5708    }
     5709
     5710    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright,
     5711    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright,
     5712    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright {
     5713        position: relative;
     5714        left: inherit;
     5715        max-width: inherit;
     5716    }
     5717
     5718    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
     5719    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
     5720    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
     5721    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
     5722    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
     5723    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
     5724        position: absolute;
     5725        left: calc((100% - 58rem) / 2 + 58rem);
     5726        max-width: calc((100% - 58rem) / 2 - 4rem);
     5727    }
     5728
     5729    .entry-content > .alignwide,
     5730    .entry-content > .alignfull {
    56165731        margin-bottom: 8rem;
    56175732        margin-top: 8rem;
    … …  
    57625877    /* BLOCK: GROUP */
    57635878
    5764     .wp-block-group.alignwide.has-background,
    5765     .wp-block-group.alignfull.has-background {
     5879    .wp-block-group.alignwide.has-background,
     5880    .wp-block-group.alignfull.has-background {
    57665881        padding: 8rem 6rem;
    57675882    }
    … …  
    57835898    /* ALIGNMENT CLASSES */
    57845899
    5785     .alignfull {
     5900    .alignfull {
    57865901        margin-bottom: 10rem;
    57875902        margin-top: 10rem;
    … …  
    58815996    .wp-block-separator.is-style-wide {
    58825997        max-width: 120rem;
    5883         left: calc(50% - 60rem);
    58845998        width: 120rem;
    58855999    }
    … …  
    59076021    .entry-content > .alignwide {
    59086022        max-width: 120rem;
    5909         left: calc(50% - 60rem);
    59106023        width: 120rem;
     6024
     6025
     6026
     6027
     6028
    59116029    }
    59126030
Note: See TracChangeset for help on using the changeset viewer.