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-rtl.css

    r46701 r46711  
    23732373.post-meta-wrapper {
    23742374    margin-top: 2rem;
     2375
     2376
     2377
     2378
    23752379}
    23762380
    … …  
    25332537.author-bio {
    25342538    margin-top: 4rem;
     2539
     2540
     2541
     2542
    25352543}
    25362544
    … …  
    27732781}
    27742782
    2775 .wp-block-archives,
    2776 .wp-block-categories,
     2783.wp-block-archives,
     2784.wp-block-categories,
    27772785.wp-block-code,
    2778 .wp-block-columns,
    2779 .wp-block-cover,
    2780 .wp-block-embed,
    2781 .wp-block-gallery,
    2782 .wp-block-group,
    2783 .wp-block-latest-comments,
    2784 .wp-block-latest-posts,
    2785 .wp-block-media-text,
     2786.wp-block-columns:not(.alignwide):not(.alignfull),
     2787.wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2788.wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2789.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2790.wp-block-group:not(.has-background):not(.alignwide):not(.alignfull),
     2791.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     2792.wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright),
     2793.wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright),
     2794.wp-block-media-text:not(.alignwide):not(.alignfull),
    27862795.wp-block-preformatted,
    2787 .wp-block-pullquote,
     2796.wp-block-pullquote,
    27882797.wp-block-quote,
    27892798.wp-block-quote.is-large,
    27902799.wp-block-quote.is-style-large,
    27912800.wp-block-verse,
    2792 .wp-block-video {
     2801.wp-block-video {
    27932802    margin-bottom: 3rem;
    27942803    margin-top: 3rem;
    … …  
    30063015
    30073016/* Block: Gallery ---------------------------- */
    3008 
    3009 ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignleft) {
    3010     margin-right: 0;
    3011 }
    30123017
    30133018.wp-block-gallery ul {
    … …  
    32083213    max-width: calc(100vw - 4rem);
    32093214    position: relative;
    3210     right: calc(50% - 50vw + 2rem);
    3211     width: calc(100vw - 4rem);
     3215    width: 100%;
    32123216}
    32133217
    … …  
    32753279    border: none;
    32763280    padding: 0;
     3281
     3282
    32773283}
    32783284
    … …  
    32973303/* Block: Widget Latest Comments ------------- */
    32983304
    3299 .entry-content .wp-block-latest-comments,
    33003305.entry-content .wp-block-latest-comments li {
    3301     margin-right: 0;
     3306    margin 0;
    33023307}
    33033308
    … …  
    33643369.entry-content {
    33653370    line-height: 1.5;
    3366     max-width: 58rem;
     3371}
     3372
     3373.entry-content > * {
     3374    margin-right: auto;
     3375    margin-left: auto;
     3376    margin-bottom: 1.25em;
    33673377}
    33683378
    … …  
    33913401.entry-content h5,
    33923402.entry-content h6 {
    3393     margin: 3.5rem 0 2rem;
     3403    margin: 3.5rem 2rem;
    33943404}
    33953405
    … …  
    34023412
    34033413.entry-content hr {
    3404     margin: 4rem 0;
     3414    margin: 4rem ;
    34053415}
    34063416
    … …  
    34343444/* Alignment Classes ------------------------- */
    34353445
     3446
     3447
     3448
     3449
     3450
     3451
     3452
     3453
     3454
     3455
    34363456.alignnone,
    34373457.aligncenter,
    34383458.alignleft,
    3439 .alignright {
    3440     margin: 3rem 0;
     3459.alignright,
     3460.alignwide {
     3461    margin-top: 4rem;
     3462    margin-left: auto;
     3463    margin-bottom: 4rem;
     3464    margin-right: auto;
     3465}
     3466
     3467[class*="__inner-container"] > *:not(.alignwide):not(.alignfull) {
     3468    margin-right: auto;
     3469    margin-left: auto;
     3470}
     3471
     3472/* Full */
     3473
     3474.alignfull {
     3475    margin-top: 5rem;
     3476    margin-left: auto;
     3477    margin-bottom: 5rem;
     3478    margin-right: auto;
     3479    max-width: 100vw;
     3480    position: relative;
     3481    width: 100%;
     3482}
     3483
     3484[class*="__inner-container"] > .alignfull {
    34413485    max-width: 100%;
    34423486}
     3487
     3488
     3489
     3490
     3491
     3492
     3493
     3494
     3495
     3496
     3497
     3498
     3499
     3500
    34433501
    34443502.aligncenter,
    … …  
    34483506}
    34493507
     3508
     3509
    34503510.alignleft,
    34513511.alignright {
    … …  
    34553515.alignleft {
    34563516    float: left;
    3457     margin: 0.3rem 0 2rem 2rem;
     3517    margin: 0.3rem 2rem 2rem;
    34583518}
    34593519
    34603520.alignright {
    34613521    float: right;
    3462     margin: 0.3rem 2rem 2rem 0;
    3463 }
    3464 
    3465 .alignwide {
    3466     margin: 4rem auto;
    3467     max-width: 120rem;
    3468 }
    3469 
    3470 .entry-content > .alignwide {
    3471     max-width: calc(100vw - 4rem);
    3472     position: relative;
    3473     right: calc(50% - 50vw + 2rem);
    3474     width: calc(100vw - 4rem);
    3475 }
    3476 
    3477 .alignfull {
    3478     margin: 5rem 0;
    3479 }
    3480 
    3481 .entry-content > .alignfull {
    3482     max-width: 100vw;
    3483     position: relative;
    3484     right: calc(50% - 50vw);
    3485     width: 100vw;
    3486 }
    3487 
     3522    margin: 0.3rem 2rem 2rem 2rem;
     3523}
    34883524
    34893525/* Entry Media ------------------------------- */
    … …  
    34933529    margin-right: auto;
    34943530    margin-left: auto;
    3495     max-width: 120rem;
     3531    max-width: rem;
    34963532    width: calc(100% - 4rem);
    34973533}
    … …  
    44424478    .entry-content > .alignleft,
    44434479    .entry-content > p .alignleft,
    4444     .entry-content > .wp-block-image .alignleft {
     4480    .entry-content > .wp-block-image .alignleft,
     4481    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
     4482    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
     4483    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
     4484    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
     4485    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
     4486    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
    44454487        margin-left: calc(( 100vw - 58rem - 8rem ) / -2);
     4488
     4489
     4490
     4491
     4492
     4493
    44464494    }
    44474495
    44484496    .entry-content > .alignright,
    44494497    .entry-content > p .alignright,
    4450     .entry-content > .wp-block-image .alignright {
     4498    .entry-content > .wp-block-image .alignright,
     4499    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
     4500    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
     4501    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
     4502    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
     4503    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
     4504    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
    44514505        margin-right: calc(( 100vw - 58rem - 8rem ) / -2);
     4506
     4507
     4508
     4509
     4510
     4511
    44524512    }
    44534513
    … …  
    44684528
    44694529    hr {
    4470         margin: 8rem 0;
     4530        margin: 8rem ;
    44714531    }
    44724532
    … …  
    45174577    h3,
    45184578    .heading-size-3 {
    4519         margin: 6rem 0 3rem;
     4579        margin: 6rem 3rem;
    45204580    }
    45214581
    … …  
    45264586    h6,
    45274587    .heading-size-6 {
    4528         margin: 4.5rem 0 2.5rem;
     4588        margin: 4.5rem 2.5rem;
    45294589    }
    45304590
    … …  
    48934953    /* BLOCK: BASE MARGINS */
    48944954
    4895     .wp-block-archives,
    4896     .wp-block-categories,
     4955    .wp-block-archives,
     4956    .wp-block-categories,
    48974957    .wp-block-code,
    4898     .wp-block-columns,
    4899     .wp-block-cover,
    4900     .wp-block-embed,
    4901     .wp-block-gallery,
    4902     .wp-block-group,
    4903     .wp-block-latest-comments,
    4904     .wp-block-latest-posts,
    4905     .wp-block-media-text,
     4958    .wp-block-columns:not(.alignwide):not(.alignfull),
     4959    .wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4960    .wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4961    .wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4962    .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull),
     4963    .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter),
     4964    .wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright),
     4965    .wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright),
     4966    .wp-block-media-text:not(.alignwide):not(.alignfull),
    49064967    .wp-block-preformatted,
    4907     .wp-block-pullquote,
     4968    .wp-block-pullquote,
    49084969    .wp-block-quote,
    49094970    .wp-block-quote.is-large,
    49104971    .wp-block-quote.is-style-large,
    49114972    .wp-block-verse,
    4912     .wp-block-video {
    4913         margin-bottom: 5rem;
    4914         margin-top: 5rem;
     4973    .wp-block-video {
     4974        margin-bottom: rem;
     4975        margin-top: rem;
    49154976    }
    49164977
    … …  
    50265087
    50275088    hr.wp-block-separator {
    5028         margin: 6rem 0;
     5089        margin: 6rem ;
    50295090    }
    50305091
    50315092    .wp-block-separator.is-style-wide {
    50325093        max-width: calc(100vw - 8rem);
    5033         right: calc(50% - 50vw + 4rem);
    5034         width: calc(100vw - 8rem);
    50355094    }
    50365095
    … …  
    50495108    .entry-content h2,
    50505109    .entry-content h3 {
    5051         margin: 6rem 0 3rem;
     5110        margin: 6rem 3rem;
    50525111    }
    50535112
    … …  
    50555114    .entry-content h5,
    50565115    .entry-content h6 {
    5057         margin: 4.5rem 0 2.5rem;
    5058     }
    5059 
    5060     /* ALIGNMENT CLASSES */
     5116        margin: 4.5rem auto 2.5rem;
     5117    }
    50615118
    50625119    .alignnone,
    … …  
    50745131    }
    50755132
    5076     .alignwide,
    5077     .alignfull {
     5133    .alignwide,
     5134    .alignfull {
    50785135        margin-bottom: 6rem;
    50795136        margin-top: 6rem;
    … …  
    50825139    .entry-content > .alignwide {
    50835140        max-width: calc(100vw - 8rem);
    5084         right: calc(50% - 50vw + 4rem);
    50855141        width: calc(100vw - 8rem);
    50865142    }
    … …  
    55635619    /* BLOCK: GROUP */
    55645620
    5565     .wp-block-group.alignwide.has-background,
    5566     .wp-block-group.alignfull.has-background {
     5621    .wp-block-group.alignwide.has-background,
     5622    .wp-block-group.alignfull.has-background {
    55675623        padding: 8rem 4rem;
    55685624    }
    … …  
    55715627
    55725628    hr.wp-block-separator {
    5573         margin: 8rem 0;
     5629        margin: 8rem ;
    55745630    }
    55755631
    … …  
    55785634    /* ALIGNMENT CLASSES */
    55795635
    5580     .alignwide,
    5581     .alignfull {
     5636    .entry-content > .alignleft,
     5637    .entry-content > p .alignleft,
     5638    .entry-content > .wp-block-image .alignleft {
     5639        position: absolute;
     5640        left: calc((100vw - 58rem) / 2 + 58rem);
     5641        max-width: calc((100% - 58rem) / 2 - 4rem);
     5642    }
     5643
     5644    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft,
     5645    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft,
     5646    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft {
     5647        position: relative;
     5648        left: inherit;
     5649        max-width: inherit;
     5650    }
     5651
     5652    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
     5653    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
     5654    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
     5655    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
     5656    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
     5657    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
     5658        position: absolute;
     5659        left: calc((100% - 58rem) / 2 + 58rem);
     5660        max-width: calc((100% - 58rem) / 2 - 4rem);
     5661    }
     5662
     5663    .entry-content > .alignright,
     5664    .entry-content > p .alignright,
     5665    .entry-content > .wp-block-image .alignright,
     5666    [class*="__inner-container"] > .alignright {
     5667        position: absolute;
     5668        right: calc((100vw - 58rem) / 2 + 58rem);
     5669        max-width: calc((100% - 58rem) / 2 - 4rem);
     5670    }
     5671
     5672    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright,
     5673    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright,
     5674    [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright {
     5675        position: relative;
     5676        right: inherit;
     5677        max-width: inherit;
     5678    }
     5679
     5680    [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
     5681    [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
     5682    [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
     5683    [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
     5684    [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
     5685    [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
     5686        position: absolute;
     5687        right: calc((100% - 58rem) / 2 + 58rem);
     5688        max-width: calc((100% - 58rem) / 2 - 4rem);
     5689    }
     5690
     5691    .entry-content > .alignwide,
     5692    .entry-content > .alignfull {
    55825693        margin-bottom: 8rem;
    55835694        margin-top: 8rem;
    … …  
    57285839    /* BLOCK: GROUP */
    57295840
    5730     .wp-block-group.alignwide.has-background,
    5731     .wp-block-group.alignfull.has-background {
     5841    .wp-block-group.alignwide.has-background,
     5842    .wp-block-group.alignfull.has-background {
    57325843        padding: 8rem 6rem;
    57335844    }
    … …  
    57495860    /* ALIGNMENT CLASSES */
    57505861
    5751     .alignfull {
     5862    .alignfull {
    57525863        margin-bottom: 10rem;
    57535864        margin-top: 10rem;
    … …  
    58435954    .wp-block-separator.is-style-wide {
    58445955        max-width: 120rem;
    5845         right: calc(50% - 60rem);
    58465956        width: 120rem;
    58475957    }
    … …  
    58655975    .entry-content > .alignwide {
    58665976        max-width: 120rem;
    5867         right: calc(50% - 60rem);
    58685977        width: 120rem;
     5978
     5979
     5980
     5981
     5982
    58695983    }
    58705984
Note: See TracChangeset for help on using the changeset viewer.