Get WordPress

Make WordPress Core

Changeset 46711

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.

Location:
trunk/src/wp-content/themes/twentytwenty
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css

    r46701 r46711  
    7979}
    8080
    81 .wp-block[data-align="wide"] .wp-block,
    82 .wp-block[data-align="full"] .wp-block {
    83     max-width: none;
    84 }
    85 
    8681.wp-block[data-align="wide"] .wp-block[data-align="wide"],
    8782.wp-block[data-align="full"] .wp-block[data-align="wide"] {
    … …  
    107102
    108103.wp-block[data-align="wide"] {
    109     margin-bottom: 30px;
    110     margin-top: 30px;
    111104    max-width: 1200px;
    112105}
    113106
    114107.wp-block[data-align="full"] {
    115     margin-bottom: 50px;
    116     margin-top: 50px;
    117108    max-width: none;
    118109}
    … …  
    178169.has-accent-background-color {
    179170    background-color: #cd2653;
     171
     172
     173
     174
     175
     176
     177
     178
     179
     180
     181
     182
     183
     184
     185
     186
     187
     188
     189
     190
     191
     192
     193
     194
    180195}
    181196
    … …  
    679694.editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container {
    680695    margin: 0 auto;
    681     max-width: 1200px;
    682696    width: calc(100% - 40px);
    683697}
    684698
    685 [data-align="left"] .wp-block-cover,
    686 [data-align="left"] .wp-block-cover-image,
    687 [data-align="right"] .wp-block-cover,
    688 [data-align="right"] .wp-block-cover-image {
    689     max-width: 260px;
     699.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"],
     700.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] {
     701    height: auto;
     702    max-height: none;
     703}
     704
     705.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover {
     706    text-align: right;
     707}
     708
     709.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover {
     710    text-align: left;
     711}
     712
     713.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit,
     714.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit {
     715    float: none;
     716    margin-right: 0;
     717    margin-left: 0;
     718    max-width: 100%;
    690719}
    691720
    … …  
    10531082    }
    10541083
     1084
     1085
     1086
     1087
     1088
     1089
     1090
     1091
     1092
     1093
     1094
     1095
     1096
     1097
     1098
     1099
     1100
     1101
     1102
     1103
     1104
     1105
     1106
     1107
     1108
     1109
     1110
    10551111    /* BLOCK: PULL QUOTE */
    10561112
    … …  
    11321188    }
    11331189
    1134     .wp-block[data-align="wide"],
    1135     .wp-block[data-align="full"] {
    1136         margin-bottom: 60px;
    1137         margin-top: 60px;
    1138     }
    1139 
    11401190    /* TYPOGRAPHY */
    11411191
    … …  
    12091259    /* BLOCK: GROUP */
    12101260
    1211     .editor-styles-wrapper .wp-block-group.has-background {
     1261    .editor-styles-wrapper .wp-block:not([data-align="wide"]):not([data-align="full"]) div:not([class*="__inner-container"]) .wp-block-group.has-background,
     1262    .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="wide"] .wp-block-group.has-background,
     1263    .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="full"] .wp-block-group.has-background {
    12121264        padding: 40px;
     1265
     1266
     1267
     1268
     1269
    12131270    }
    12141271
    … …  
    12841341
    12851342
    1286     /* STRUCTURE */
    1287 
    1288     .wp-block[data-align="wide"],
    1289     .wp-block[data-align="full"] {
    1290         margin-bottom: 80px;
    1291         margin-top: 80px;
    1292     }
    1293 
    12941343    /* BLOCK: COLUMNS */
    12951344
    12961345    .wp-block-column {
    12971346        font-size: 18px;
    1298     }
    1299 
    1300     /* BLOCK: GROUP */
    1301 
    1302     .wp-block[data-align="wide"] .wp-block-group.has-background,
    1303     .wp-block[data-align="full"] .wp-block-group.has-background {
    1304         padding: 80px 40px;
    13051347    }
    13061348
    … …  
    13331375    .editor-styles-wrapper .wp-block h6 {
    13341376        font-size: 18px;
    1335     }
    1336 
    1337     /* STRUCTURE */
    1338 
    1339     .wp-block[data-align="wide"],
    1340     .wp-block[data-align="full"] {
    1341         margin-bottom: 80px;
    1342         margin-top: 80px;
    13431377    }
    13441378

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

    r46701 r46711  
    7979}
    8080
    81 .wp-block[data-align="wide"] .wp-block,
    82 .wp-block[data-align="full"] .wp-block {
    83     max-width: none;
    84 }
    85 
    8681.wp-block[data-align="wide"] .wp-block[data-align="wide"],
    8782.wp-block[data-align="full"] .wp-block[data-align="wide"] {
    … …  
    107102
    108103.wp-block[data-align="wide"] {
    109     margin-bottom: 30px;
    110     margin-top: 30px;
    111104    max-width: 1200px;
    112105}
    113106
    114107.wp-block[data-align="full"] {
    115     margin-bottom: 50px;
    116     margin-top: 50px;
    117108    max-width: none;
    118109}
    … …  
    178169.has-accent-background-color {
    179170    background-color: #cd2653;
     171
     172
     173
     174
     175
     176
     177
     178
     179
     180
     181
     182
     183
     184
     185
     186
     187
     188
     189
     190
     191
     192
     193
     194
    180195}
    181196
    … …  
    679694.editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container {
    680695    margin: 0 auto;
    681     max-width: 1200px;
    682696    width: calc(100% - 40px);
    683697}
    684698
    685 [data-align="left"] .wp-block-cover,
    686 [data-align="left"] .wp-block-cover-image,
    687 [data-align="right"] .wp-block-cover,
    688 [data-align="right"] .wp-block-cover-image {
    689     max-width: 260px;
     699.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"],
     700.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] {
     701    height: auto;
     702    max-height: none;
     703}
     704
     705.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover {
     706    text-align: left;
     707}
     708
     709.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover {
     710    text-align: right;
     711}
     712
     713.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit,
     714.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit {
     715    float: none;
     716    margin-left: 0;
     717    margin-right: 0;
     718    max-width: 100%;
    690719}
    691720
    … …  
    10531082    }
    10541083
     1084
     1085
     1086
     1087
     1088
     1089
     1090
     1091
     1092
     1093
     1094
     1095
     1096
     1097
     1098
     1099
     1100
     1101
     1102
     1103
     1104
     1105
     1106
     1107
     1108
     1109
     1110
    10551111    /* BLOCK: PULL QUOTE */
    10561112
    … …  
    11321188    }
    11331189
    1134     .wp-block[data-align="wide"],
    1135     .wp-block[data-align="full"] {
    1136         margin-bottom: 60px;
    1137         margin-top: 60px;
    1138     }
    1139 
    11401190    /* TYPOGRAPHY */
    11411191
    … …  
    12091259    /* BLOCK: GROUP */
    12101260
    1211     .editor-styles-wrapper .wp-block-group.has-background {
     1261    .editor-styles-wrapper .wp-block:not([data-align="wide"]):not([data-align="full"]) div:not([class*="__inner-container"]) .wp-block-group.has-background,
     1262    .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="wide"] .wp-block-group.has-background,
     1263    .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="full"] .wp-block-group.has-background {
    12121264        padding: 40px;
     1265
     1266
     1267
     1268
     1269
    12131270    }
    12141271
    … …  
    12841341
    12851342
    1286     /* STRUCTURE */
    1287 
    1288     .wp-block[data-align="wide"],
    1289     .wp-block[data-align="full"] {
    1290         margin-bottom: 80px;
    1291         margin-top: 80px;
    1292     }
    1293 
    12941343    /* BLOCK: COLUMNS */
    12951344
    12961345    .wp-block-column {
    12971346        font-size: 18px;
    1298     }
    1299 
    1300     /* BLOCK: GROUP */
    1301 
    1302     .wp-block[data-align="wide"] .wp-block-group.has-background,
    1303     .wp-block[data-align="full"] .wp-block-group.has-background {
    1304         padding: 80px 40px;
    13051347    }
    13061348
    … …  
    13331375    .editor-styles-wrapper .wp-block h6 {
    13341376        font-size: 18px;
    1335     }
    1336 
    1337     /* STRUCTURE */
    1338 
    1339     .wp-block[data-align="wide"],
    1340     .wp-block[data-align="full"] {
    1341         margin-bottom: 80px;
    1342         margin-top: 80px;
    13431377    }
    13441378

  • 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

  • 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

  • trunk/src/wp-content/themes/twentytwenty/template-parts/content.php

    r46613 r46711  
    2626    ?>
    2727
    28     <div class="post-inner section-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">
     28    <div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">
    2929
    3030        <div class="entry-content">
    … …  
    4040        </div><!-- .entry-content -->
    4141
     42
     43
     44
    4245        <?php
    4346        wp_link_pages(
    … …  
    6265        ?>
    6366
    64     </div><!-- .post-inner -->
     67    </div><!-- .-inner -->
    6568
    6669    <?php
Note: See TracChangeset for help on using the changeset viewer.