WordPress.org

Make WordPress Core

Changeset 46357


Ignore:
Timestamp:
09/30/2019 05:40:14 PM (2 weeks ago)
Author:
desrosj
Message:

Bundled Themes: Update Twenty Twenty.

This brings trunk’s version of Twenty Twenty in-sync with GitHub.

For a complete list of changes since [46271], see https://github.com/WordPress/twentytwenty/compare/932b16248...dd7032f

Props anlino, ianbelanger, nielslange, acosmin, netweb, williampatton, adhitya03, phpdocs, acalfieri, itowhid06, littlebigthing, aristath, karmatosed, poena.
See #48110.

Location:
trunk/src/wp-content/themes/twentytwenty
Files:
3 added
27 deleted
37 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentytwenty/404.php

    r46271 r46357  
    1313<main id="site-content" role="main">
    1414
    15     <div class="section-inner thin">
     15    <div class="section-inner thin error404-content">
    1616
    1717        <h1 class="entry-title"><?php _e( 'Page Not Found', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></h1>
     
    2222        get_search_form(
    2323            array(
    24                 'label' => __( '404 not found', 'twentytwenty' ),
     24                'label' => _x( '404 not found', 'Label', 'twentytwenty' ),
    2525            )
    2626        );
     
    2929    </div><!-- .section-inner -->
    3030
     31    <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
     32
    3133</main><!-- #site-content -->
    3234
  • trunk/src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css

    r46271 r46357  
    1 /* -------------------------------------------------------------------------- */
     1/* ------------------------------------------- */
    22
    33/*  Twenty Twenty Editor Styles — Block Editor
    4 /* -------------------------------------------------------------------------- */
     4/* ------------------------------------------- */
    55
    66.editor-styles-wrapper {
    77    background: #f5efe0;
    8     color: #1a1b1f;
     8    color: #000;
     9    letter-spacing: -0.015em;
     10    -moz-font-smoothing: antialiased;
    911    -webkit-font-smoothing: antialiased;
    1012}
    1113
    1214.editor-styles-wrapper > * {
     15    color: #000;
    1316    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    14     font-size: 17px;
     17    font-size: 18px;
     18}
     19
     20@supports ( font-variation-settings: normal ) {
     21
     22    .editor-styles-wrapper > * {
     23        font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     24    }
     25
    1526}
    1627
     
    2132
    2233
     34/* Fonts ------------------------------------- */
     35
     36/*
     37 * Chrome renders extra-wide &nbsp; characters for the Hoefler Text font.
     38 * This results in a jumping cursor when typing in both the Classic and block
     39 * editors. The following font-face override fixes the issue by manually
     40 * inserting a custom font that includes just a Hoefler Text space replacement
     41 * for that character instead.
     42 */
     43@font-face {
     44    font-family: NonBreakingSpaceOverride;
     45    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==) format("woff2"), url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG) format("woff");
     46}
     47
     48/* ----------------------------------------------
     49Inter variable font. Usage:
     50
     51@supports (font-variation-settings: normal) {
     52    html { font-family: "Inter var", sans-serif; }
     53}
     54---------------------------------------------- */
     55
     56@font-face {
     57    font-family: "Inter var";
     58    font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
     59    font-style: normal;
     60    src: url(../fonts/inter/Inter-upright.var.woff2) format("woff2");
     61}
     62
     63@font-face {
     64    font-family: "Inter var";
     65    font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
     66    font-style: italic;
     67    src: url(../fonts/inter/Inter-italic.var.woff2) format("woff2");
     68}
     69
    2370/* Structure --------------------------------- */
    2471
     
    2774}
    2875
    29 .editor-block-list__block[data-align="wide"] .wp-block-group .wp-block {
    30     max-width: calc(100% - 40px);
    31 }
    32 
    33 .editor-block-list__block[data-align="full"] .wp-block-group .wp-block {
     76.wp-block[data-align="wide"] .wp-block-group .wp-block {
    3477    max-width: 100%;
    3578}
    3679
    37 *[data-align="right"] .editor-block-list__block-edit,
    38 *[data-align="left"] .editor-block-list__block-edit {
     80.wp-block[data-align="full"] .wp-block-group .wp-block {
     81    max-width: 100%;
     82}
     83
     84*[data-align="right"] .wp-block-edit,
     85*[data-align="left"] .wp-block-edit {
    3986    max-width: 50%;
    4087}
    4188
    42 .editor-block-list__block[data-align="wide"],
    43 .editor-block-list__block[data-align="full"] {
     89.wp-block[data-align="wide"] {
    4490    margin-bottom: 30px;
    4591    margin-top: 30px;
    46 }
    47 
    48 .editor-block-list__block[data-align="wide"] {
    49     max-width: 1120px;
    50 }
    51 
    52 .editor-block-list__block[data-align="full"] {
     92    max-width: 1200px;
     93}
     94
     95.wp-block[data-align="full"] {
     96    margin-bottom: 50px;
     97    margin-top: 50px;
    5398    max-width: none;
    5499}
     
    60105
    61106
    62 /* Colors ------------------------------------ */
    63 
    64 /* CUSTOM COLORS */
    65 
    66 .has-accent-color {
    67     color: #cd2653;
    68 }
    69 
    70 .has-accent-background-color {
    71     background-color: #cd2653;
    72 }
    73 
    74 /* GENERAL COLORS */
    75 
    76 .has-black-background-color {
    77     background-color: #000;
    78 }
    79 
    80 .has-white-background-color {
    81     background-color: #fff;
    82 }
    83 
    84 .has-black-color {
    85     color: #000;
    86 }
    87 
    88 .has-white-color {
    89     color: #fff;
    90 }
    91 
    92 
    93 /* Typography -------------------------------- */
    94 
    95 .editor-styles-wrapper a {
    96     color: #cd2653;
    97     text-decoration: underline;
    98 }
    99 
     107/* Font Families ------------------------------ */
     108
     109.editor-styles-wrapper p,
     110.editor-styles-wrapper ol,
     111.editor-styles-wrapper ul,
     112.editor-styles-wrapper dl,
     113.editor-styles-wrapper dt {
     114    font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif;
     115    letter-spacing: normal;
     116}
     117
     118.editor-post-title__block .editor-post-title__input,
    100119.editor-styles-wrapper .wp-block h1,
    101120.editor-styles-wrapper .wp-block h2,
     
    104123.editor-styles-wrapper .wp-block h5,
    105124.editor-styles-wrapper .wp-block h6,
    106 .editor-post-title__block .editor-post-title__input {
    107     font-family: inherit;
     125.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
     126.editor-styles-wrapper cite,
     127.editor-styles-wrapper figcaption,
     128.editor-styles-wrapper .wp-caption-text {
     129    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     130}
     131
     132@supports ( font-variation-settings: normal ) {
     133
     134    .editor-post-title__block .editor-post-title__input,
     135    .editor-styles-wrapper .wp-block h1,
     136    .editor-styles-wrapper .wp-block h2,
     137    .editor-styles-wrapper .wp-block h3,
     138    .editor-styles-wrapper .wp-block h4,
     139    .editor-styles-wrapper .wp-block h5,
     140    .editor-styles-wrapper .wp-block h6,
     141    .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
     142    .editor-styles-wrapper cite,
     143    .editor-styles-wrapper figcaption,
     144    .editor-styles-wrapper .wp-caption-text {
     145        font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     146    }
     147
     148}
     149
     150
     151/* Colors ------------------------------------ */
     152
     153/* CUSTOM COLORS */
     154
     155.has-accent-color {
     156    color: #cd2653;
     157}
     158
     159.has-accent-background-color {
     160    background-color: #cd2653;
     161}
     162
     163/* GENERAL COLORS */
     164
     165.has-black-background-color {
     166    background-color: #000;
     167}
     168
     169.has-white-background-color {
     170    background-color: #fff;
     171}
     172
     173.has-black-color {
     174    color: #000;
     175}
     176
     177.has-white-color {
     178    color: #fff;
     179}
     180
     181
     182/* Typography -------------------------------- */
     183
     184.editor-styles-wrapper a {
     185    color: #cd2653;
     186    text-decoration: underline;
     187}
     188
     189.editor-styles-wrapper a:focus,
     190.editor-styles-wrapper a:hover {
     191    text-decoration: none;
     192}
     193
     194.editor-post-title__block .editor-post-title__input,
     195.editor-styles-wrapper .wp-block h1,
     196.editor-styles-wrapper .wp-block h2,
     197.editor-styles-wrapper .wp-block h3,
     198.editor-styles-wrapper .wp-block h4,
     199.editor-styles-wrapper .wp-block h5,
     200.editor-styles-wrapper .wp-block h6 {
     201    color: #000;
    108202    font-feature-settings: "lnum";
    109203    font-variant-numeric: lining-nums;
    110204    font-weight: 700;
    111     letter-spacing: -0.005em;
     205    letter-spacing: -0.0415625em;
    112206    line-height: 1.25;
    113207    margin: 40px 0 25px;
     
    116210.editor-post-title__block .editor-post-title__input,
    117211.editor-styles-wrapper .wp-block h1 {
     212    font-size: 36px;
     213    font-weight: 800;
     214    line-height: 1.138888889;
     215}
     216
     217.editor-styles-wrapper .wp-block h2 {
    118218    font-size: 32px;
    119219}
    120220
    121 .editor-styles-wrapper .wp-block h2 {
     221.editor-styles-wrapper .wp-block h3 {
    122222    font-size: 28px;
    123223}
    124224
    125 .editor-styles-wrapper .wp-block h3 {
     225.editor-styles-wrapper .wp-block h4 {
    126226    font-size: 24px;
    127227}
    128228
    129 .editor-styles-wrapper .wp-block h4 {
     229.editor-styles-wrapper .wp-block h5 {
    130230    font-size: 21px;
    131231}
    132232
    133 .editor-styles-wrapper .wp-block h5 {
    134     font-size: 19px;
    135 }
    136 
    137233.editor-styles-wrapper .wp-block h6 {
    138     font-size: 1em;
    139 }
    140 
     234    font-size: 16px;
     235    letter-spacing: 0.03125em;
     236    text-transform: uppercase;
     237}
     238
     239.editor-styles-wrapper li,
    141240.editor-styles-wrapper p,
    142241.editor-styles-wrapper p.wp-block-paragraph {
    143     line-height: 1.5;
     242    line-height: 1.4;
     243}
     244
     245/* POST TITLE */
     246
     247.wp-block.editor-post-title__block {
     248    max-width: 1000px;
     249}
     250
     251.editor-styles-wrapper .editor-post-title__block .editor-post-title__input {
     252    margin: 0;
     253    text-align: center;
     254}
     255
     256/* DROP CAP */
     257
     258.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter {
     259    color: #cd2653;
     260    font-size: 5.1em;
     261    font-weight: 800;
     262    margin: 0.05em 0 0 0.1em;
    144263}
    145264
     
    163282
    164283.editor-styles-wrapper pre {
     284    border-color: #dcd7ca;
    165285    border-radius: 0;
    166286    line-height: 1.5;
     
    208328.editor-styles-wrapper .alignright {
    209329    margin-bottom: 1.2em;
    210     max-width: 50%;
     330    max-width: 260px;
    211331}
    212332
     
    225345
    226346.editor-styles-wrapper figcaption {
    227     color: inherit;
    228     font-size: 14px;
     347    color: #6d6d6d;
     348    font-size: 15px;
    229349    font-weight: 500;
    230     margin-top: 10px;
    231     text-align: right;
    232 }
    233 
    234 .editor-styles-wrapper .editor-block-list__block[data-align="full"] figcaption {
    235     padding: 0 15px;
     350    line-height: 1.2;
     351    margin-top: 5px;
     352    text-align: inherit;
    236353}
    237354
     
    240357
    241358.editor-styles-wrapper fieldset {
    242     border: 2px solid #e1e1e3;
     359    border: 2px solid #dcd7ca;
    243360    padding: 20px;
    244361}
     
    256373
    257374
    258 /* Block: _Shared Lists ---------------------- */
     375/* Block: Base Margins ---------------------- */
     376
     377/* Block: Shared Widget Styles -------------- */
    259378
    260379.editor-styles-wrapper ul.wp-block-archives,
    261380.editor-styles-wrapper ul.wp-block-categories,
    262 .editor-styles-wrapper ul.wp-block-latest-posts {
     381.editor-styles-wrapper ul.wp-block-latest-posts,
     382.editor-styles-wrapper ul.wp-block-categories__list {
     383    font-family: inherit;
    263384    list-style: none;
    264385    margin: 40px 0;
     
    266387}
    267388
    268 .editor-styles-wrapper ul.wp-block-categories__list {
    269     list-style: none;
    270     margin-right: 0;
    271     padding-right: 0;
     389.editor-styles-wrapper ul.wp-block-categories__list ul {
     390    margin: 0;
    272391}
    273392
    274393.editor-styles-wrapper ul.wp-block-archives li,
    275394.editor-styles-wrapper ul.wp-block-categories li,
    276 .editor-styles-wrapper ul.wp-block-latest-posts li {
    277     line-height: 1.2;
    278     margin: 20px 0 0 0;
     395.editor-styles-wrapper ul.wp-block-latest-posts li,
     396.editor-styles-wrapper ul.wp-block-categories__list li {
     397    color: #6d6d6d;
     398    line-height: 1.476;
     399    margin: 5px 0 0 0;
    279400}
    280401
     
    289410.editor-styles-wrapper .wp-block-categories li > a,
    290411.editor-styles-wrapper .wp-block-latest-posts li > a {
    291     font-size: 1.25em;
     412    font-weight: 700;
     413    text-decoration: none;
     414}
     415
     416.editor-styles-wrapper .wp-block-archives li > a:focus,
     417.editor-styles-wrapper .wp-block-archives li > a:hover,
     418.editor-styles-wrapper .wp-block-categories li > a:focus,
     419.editor-styles-wrapper .wp-block-categories li > a:hover,
     420.editor-styles-wrapper .wp-block-latest-posts li > a:focus,
     421.editor-styles-wrapper .wp-block-latest-posts li > a:hover {
    292422    font-weight: 700;
    293423    text-decoration: none;
     
    299429}
    300430
     431.editor-styles-wrapper .wp-block-latest-comments time,
     432.editor-styles-wrapper .wp-block-latest-posts time {
     433    color: #6d6d6d;
     434    font-size: 0.7em;
     435    font-weight: 600;
     436    letter-spacing: normal;
     437    line-height: 1.476;
     438    margin-top: 0.15em;
     439}
     440
    301441
    302442/* Block: Table ------------------------------ */
    303443
    304 .editor-styles-wrapper  table.wp-block-table {
    305     border-color: #e1e1e3;
     444.editor-styles-wrapper .wp-block-table {
    306445    border-collapse: collapse;
    307446    border-spacing: 0;
    308447    empty-cells: show;
    309     font-size: 0.85em;
     448    font-size: 16px;
    310449    margin-bottom: 1.1em;
    311450    width: 100%;
    312451}
    313452
    314 .editor-styles-wrapper  table.wp-block-table caption,
    315 .editor-styles-wrapper  table.wp-block-table th,
    316 .editor-styles-wrapper  table.wp-block-table td {
    317     border-color: inherit;
    318     color: inherit;
     453.editor-styles-wrapper .wp-block-table,
     454.editor-styles-wrapper .wp-block-table * {
     455    border-color: #dcd7ca;
     456}
     457
     458.editor-styles-wrapper .wp-block-table tr {
     459    border: none;
    319460}
    320461
    321462.editor-styles-wrapper  .wp-block-table caption {
    322     padding: 0;
     463    background: #dcd7ca;
    323464    text-align: center;
    324465}
     
    345486}
    346487
     488/* STYLE: STRIPES */
     489
     490.editor-styles-wrapper .wp-block-table.is-style-stripes {
     491    border: 1px solid #dcd7ca;
     492}
     493
    347494.editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    348     background: #f1f1f3;
     495    background: #dcd7ca;
    349496}
    350497
     
    352499/* Block: Separator -------------------------- */
    353500
    354 .editor-styles-wrapper hr.wp-block-separator {
     501hr.wp-block-separator {
     502    border-top: 1px solid #6d6d6d;
     503    color: #6d6d6d;
     504    margin: 30px 0;
     505}
     506
     507hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
     508    max-width: 100%;
     509}
     510
     511hr.wp-block-separator:not(.is-style-dots) {
     512    background: linear-gradient(to right, currentColor calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), currentColor calc(50% + 16px));
     513    background-color: transparent !important;
    355514    border: none;
    356     border-top: 1px solid #e1e1e3;
    357     margin: 2em auto;
    358     width: 100%;
    359 }
    360 
    361 .editor-styles-wrapper .wp-block-separator.is-style-dots {
    362     border: none;
    363 }
    364 
    365 .editor-styles-wrapper .wp-block-separator.is-style-dots::before {
    366     color: inherit;
    367 }
    368 
    369 .editor-styles-wrapper .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    370     margin-right: 0;
    371     width: 100%;
    372 }
    373 
    374 .editor-styles-wrapper .wp-block-separator:not(.is-style-wide):not(.is-style-dots),
    375 .editor-styles-wrapper .wp-block-separator.is-style-wide {
    376     max-width: none;
     515    height: 1px;
     516    overflow: visible;
     517    position: relative;
     518}
     519
     520.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
     521    height: 1px;
     522}
     523
     524hr.wp-block-separator:not(.is-style-dots)::before,
     525hr.wp-block-separator:not(.is-style-dots)::after {
     526    background: currentColor;
     527    content: "";
     528    display: block;
     529    height: 16px;
     530    position: absolute;
     531    top: calc(50% - 8px);
     532    transform: rotate(-22.5deg);
     533    width: 1px;
     534}
     535
     536hr.wp-block-separator::before {
     537    right: calc(50% - 5px);
     538}
     539
     540hr.wp-block-separator::after {
     541    left: calc(50% - 5px);
     542}
     543
     544/* STYLE: DOTS */
     545
     546hr.wp-block-separator.is-style-dots::before {
     547    font-size: 32px;
     548    font-weight: 700;
     549    letter-spacing: 1em;
     550    padding-right: 1em;
    377551}
    378552
     
    385559
    386560.editor-styles-wrapper .wp-block-quote {
    387     border-color: #cd2653 !important;
     561    border-color: #cd2653;
    388562    border-style: solid;
    389     border-width: 0 4px 0 0;
     563    border-width: 0 2px 0 0;
    390564    color: inherit;
    391565    margin: 20px 0;
     
    393567}
    394568
     569.editor-styles-wrapper .wp-block-quote.has-text-align-center,
    395570.editor-styles-wrapper .wp-block-quote[style*="text-align:center"],
    396571.editor-styles-wrapper .wp-block-quote[style*="text-align: center"] {
     
    399574}
    400575
     576.editor-styles-wrapper .wp-block-quote.has-text-align-right,
    401577.editor-styles-wrapper .wp-block-quote[style*="text-align:right"],
    402578.editor-styles-wrapper .wp-block-quote[style*="text-align: right"] {
    403     border-width: 0 0 0 4px;
     579    border-width: 0 0 0 2px;
    404580    padding: 5px 0 5px 20px;
    405581}
     
    409585.editor-styles-wrapper .wp-block-quote cite,
    410586.editor-styles-wrapper .wp-block-quote footer {
    411     color: inherit;
     587    color: #6d6d6d;
    412588    font-size: 14px;
    413589    font-weight: 600;
     590    line-height: 1.25;
    414591}
    415592
     
    426603
    427604.editor-styles-wrapper .wp-block-quote.is-style-large p {
    428     font-size: 1.75em;
    429     font-style: italic;
     605    font-family: inherit;
     606    font-size: 24px;
     607    font-style: normal;
    430608    font-weight: 700;
    431     line-height: 1.25;
    432 }
    433 
     609    letter-spacing: -0.035714286em;
     610    line-height: 1.285714286;
     611}
     612
     613.editor-styles-wrapper .wp-block-quote.is-style-large .wp-block-quote__citation,
     614.editor-styles-wrapper .wp-block-quote.is-style-large cite,
     615.editor-styles-wrapper .wp-block-quote.is-style-large footer {
     616    font-size: 16px;
     617}
     618
     619
     620/* Block: Code, Verse and Preformatted ------- */
     621
     622.editor-styles-wrapper .wp-block-code,
     623.editor-styles-wrapper .wp-block-preformatted pre,
     624.editor-styles-wrapper .wp-block-verse pre {
     625    border: 1px solid #dcd7ca;
     626    border-radius: 0;
     627    padding: 30px;
     628}
     629
     630.editor-styles-wrapper .wp-block-preformatted pre,
     631.editor-styles-wrapper .wp-block-code .block-editor-plain-text,
     632.editor-styles-wrapper .wp-block-verse pre {
     633    background: transparent;
     634    font-family: monospace;
     635    font-size: 14px;
     636}
    434637
    435638/* Block: Cover ------------------------------ */
     
    438641.editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container {
    439642    margin: 0 auto;
    440     max-width: 1120px;
     643    max-width: 1200px;
    441644    width: calc(100% - 50px);
     645}
     646
     647[data-align="left"] .wp-block-cover,
     648[data-align="left"] .wp-block-cover-image,
     649[data-align="right"] .wp-block-cover,
     650[data-align="right"] .wp-block-cover-image {
     651    max-width: 260px;
    442652}
    443653
     
    454664}
    455665
    456 .editor-styles-wrapper .wp-block-cover {
    457     min-height: 75vh;
    458 }
    459 
    460666.editor-styles-wrapper .wp-block-cover p {
    461     font-weight: 500;
     667    font-family: inherit;
    462668}
    463669
     
    475681    color: inherit;
    476682    padding: 0;
    477 }
    478 
    479 .editor-styles-wrapper .wp-block-pullquote,
    480 .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color blockquote {
     683    position: relative;
    481684    text-align: center;
    482685}
    483686
    484 .editor-styles-wrapper .wp-block-pullquote.alignleft,
    485 .editor-styles-wrapper .wp-block-pullquote.alignright {
    486     max-width: 50%;
    487 }
    488 
    489 .editor-styles-wrapper .editor-block-list__block .wp-block-pullquote p {
     687.editor-styles-wrapper .wp-block-pullquote::before {
     688    background: #fff;
     689    border-radius: 50%;
     690    color: #cd2653;
     691    content: "”";
     692    display: block;
     693    font-size: 62px;
     694    font-weight: 500;
     695    line-height: 1.2;
     696    margin: 0 auto 15px auto;
     697    text-align: center;
     698    height: 44px;
     699    width: 44px;
     700}
     701
     702.editor-styles-wrapper .wp-block .wp-block-pullquote p {
     703    font-family: inherit;
     704    font-size: 28px;
    490705    font-weight: 700;
    491     line-height: 1.25;
     706    line-height: 1.178571429;
     707    letter-spacing: -0.041785714em;
    492708    margin-bottom: 20px;
    493709}
    494710
    495 .editor-styles-wrapper .editor-block-list__block .wp-block-pullquote p,
     711.editor-styles-wrapper .wp-block .wp-block-pullquote p:last-child {
     712    margin-bottom: 0;
     713}
     714
     715.editor-styles-wrapper .wp-block .wp-block-pullquote p,
    496716.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color blockquote > .block-editor-rich-text p,
    497 .editor-styles-wrapper .editor-block-list__block[data-type="core/pullquote"][data-align="right"] .editor-rich-text p,
    498 .editor-styles-wrapper .editor-block-list__block[data-type="core/pullquote"][data-align="left"] .editor-rich-text p {
    499     font-size: 1.75em;
     717.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .editor-rich-text p,
     718.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .editor-rich-text p {
     719    font-size: 28px;
     720}
     721
     722.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"],
     723.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] {
     724    height: auto;
     725    max-height: none;
     726}
     727
     728.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote,
     729.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote.is-style-solid-color blockquote {
     730    text-align: right;
     731}
     732
     733.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote,
     734.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote.is-style-solid-color blockquote {
     735    text-align: left;
     736}
     737
     738.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit,
     739.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .block-editor-block-list__block-edit {
     740    float: none;
     741    margin-right: 0;
     742    margin-left: 0;
     743    max-width: 100%;
     744}
     745
     746.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit .wp-block-pullquote::before {
     747    margin-left: 0;
     748}
     749
     750.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .block-editor-block-list__block-edit .wp-block-pullquote::before {
     751    margin-right: 0;
     752}
     753
     754.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .is-style-solid-color::before {
     755    left: 20px;
     756    transform: translateY(-50%);
     757}
     758
     759.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .is-style-solid-color::before {
     760    right: 20px;
     761    transform: translateY(-50%);
    500762}
    501763
     
    503765.editor-styles-wrapper .wp-block-pullquote cite,
    504766.editor-styles-wrapper .wp-block-pullquote footer {
    505     font-size: 14px;
    506     font-weight: 600;
     767    color: #6d6d6d;
     768    font-size: 16px;
     769    font-weight: 500;
     770    margin-top: 12px;
    507771    text-transform: none;
    508772}
     
    512776.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color {
    513777    padding: 30px 20px;
     778    position: relative;
     779}
     780
     781.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color::before {
     782    position: absolute;
     783    top: 0;
     784    right: 50%;
     785    transform: translateY(-50%) translateX(50%);
    514786}
    515787
    516788.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color blockquote {
    517789    max-width: 100%;
     790    text-align: center;
     791}
     792
     793.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
     794.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color .wp-block-pullquote cite,
     795.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color .wp-block-pullquote footer {
     796    color: inherit;
    518797}
    519798
     
    532811.editor-styles-wrapper .wp-block-file__button {
    533812    background: #cd2653;
    534     border-radius: 3px;
     813    border-radius: 0;
    535814    color: #fff;
    536     font-size: 16px;
     815    font-size: 15px;
    537816    font-weight: 600;
    538     line-height: 1;
    539     padding: 1.175em 1.75em;
     817    letter-spacing: 0.0333em;
     818    line-height: 1.25;
     819    padding: 1.1em 1.44em;
     820    text-transform: uppercase;
    540821}
    541822
     
    549830    background: none;
    550831    border-color: currentColor;
    551     color: #1a1b1f;
    552     padding: calc(1.175em - 2px) calc(1.75em - 2px);
     832    color: #cd2653;
     833    padding: calc(1.1em - 2px) calc(1.44em - 2px);
    553834}
    554835
     
    561842
    562843/* Block: Latest Comments -------------------- */
     844
     845.editor-styles-wrapper .wp-block-latest-comments {
     846    font-family: inherit;
     847    margin-right: 0;
     848}
    563849
    564850.editor-styles-wrapper .wp-block-latest-comments li.wp-block-latest-comments__comment {
     
    584870}
    585871
    586 .editor-styles-wrapper .wp-block-latest-comments time {
    587     display: block;
    588     font-size: 1em;
    589     font-weight: 400;
    590     margin-top: 5px;
     872.editor-styles-wrapper .wp-block-latest-comments__comment-meta a:focus,
     873.editor-styles-wrapper .wp-block-latest-comments__comment-meta a:hover {
     874    text-decoration: none;
    591875}
    592876
     
    598882
    599883.editor-styles-wrapper .wp-block-latest-comments.has-avatars img.avatar {
    600     border-radius: 0;
    601884    flex-shrink: 0;
    602     height: 60px;
    603     margin-left: 15px;
    604     width: 60px;
     885    margin: 5px 0 0 15px;
    605886}
    606887
     
    608889
    609890.editor-styles-wrapper .wp-block-latest-comments__comment-excerpt {
    610     font-size: 0.9em;
    611     margin-top: 10px;
    612 }
    613 
    614 .editor-styles-wrapper .wp-block-latest-comments__comment-excerpt p:last-child {
    615     margin-bottom: 0;
     891    margin: 0;
     892}
     893
     894.editor-styles-wrapper .wp-block-latest-comments__comment-excerpt p {
     895    font-family: inherit;
     896    font-size: 0.7em;
     897    margin: 10px 0 0;
    616898}
    617899
     
    619901/* Block: Latest Posts ----------------------- */
    620902
     903.editor-styles-wrapper ul.wp-block-latest-posts:not(.is-grid) li {
     904    margin-top: 15px;
     905}
     906
    621907/* STYLE: GRID */
    622908
    623909.editor-styles-wrapper .wp-block-latest-posts.is-grid li {
    624     border-color: #e1e1e3;
     910    border-color: #dcd7ca;
    625911}
    626912
    627913.editor-styles-wrapper ul.wp-block-latest-posts.is-grid li {
    628914    border-style: solid;
    629     border-width: 1px 0 0;
    630     margin: 0 0 24px 16px;
     915    border-width: 2px 0 0;
     916    line-height: 1.25;
     917    margin: 20px 0 16px 16px;
    631918    padding-top: 12px;
    632 }
    633 
    634 .editor-styles-wrapper ul.wp-block-latest-posts .wp-block-latest-posts__post-date {
    635     color: inherit;
    636     display: block;
    637     font-size: 1em;
    638     margin: 8px 0 0;
    639919}
    640920
     
    648928
    649929.editor-styles-wrapper .wp-block-embed {
    650     margin-bottom: 3rem;
    651     margin-top: 3rem;
    652 }
    653 
    654 .editor-styles-wrapper .editor-block-list__block[data-type*="core-embed"][data-align="center"] * {
     930    margin-bottom: 30px;
     931    margin-top: 30px;
     932}
     933
     934.editor-styles-wrapper .wp-block[data-type*="core-embed"][data-align="center"] * {
    655935    margin-right: auto;
    656936    margin-left: auto;
     
    676956}
    677957
     958.editor-styles-wrapper .wp-block-file .wp-block-file__textlink:focus,
     959.editor-styles-wrapper .wp-block-file .wp-block-file__textlink:hover {
     960    text-decoration: underline;
     961}
     962
    678963.editor-styles-wrapper .wp-block-file .wp-block-file__button {
    679964    font-size: 14px;
     
    684969
    685970.editor-styles-wrapper .wp-block-image {
    686     margin-bottom: 3rem;
    687     margin-top: 3rem;
     971    margin-bottom: 30px;
     972    margin-top: 30px;
    688973}
    689974
    690975/* Block: Group ------------------------------ */
    691976
    692 .wp-block-group p[style*="text-align: center"],
    693 .wp-block-group p[style*="text-align:center"] {
    694     margin-right: auto;
    695     margin-left: auto;
    696 }
    697 
    698 .wp-block-group p[style*="text-align: right"],
    699 .wp-block-group p[style*="text-align:right"] {
    700     margin-right: auto;
     977.editor-styles-wrapper .wp-block-group.has-background {
     978    padding: 20px;
     979}
     980
     981.wp-block-group .wp-block[data-type="core/heading"]:first-child * {
     982    margin-top: 0;
    701983}
    702984
    703985/* Block: Paragraph -------------------------- */
    704986
    705 .wp-block[data-type="core/paragraph"] p {
    706     max-width: 580px;
    707 }
    708 
    709 
    710 /* -------------------------------------------------------------------------- */
    711987
    712988/*  X.  Media Queries
    713 /* -------------------------------------------------------------------------- */
    714 
     989/* ------------------------------------------- */
     990
     991
     992@media ( min-width: 480px ) {
     993
     994
     995    /* STRUCTURE */
     996
     997    .editor-styles-wrapper .wp-block[data-align="right"] {
     998        margin-left: 0;
     999    }
     1000
     1001    .editor-styles-wrapper .wp-block[data-align="left"] {
     1002        margin: 0;
     1003    }
     1004
     1005    /* BLOCK: PULL QUOTE */
     1006
     1007    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"],
     1008    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] {
     1009        height: 0;
     1010        max-width: 260px;
     1011    }
     1012
     1013    .wp-block[data-type="core/pullquote"][data-align="left"] [data-block],
     1014    .wp-block[data-type="core/pullquote"][data-align="right"] [data-block] {
     1015        margin-top: 0;
     1016    }
     1017
     1018    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit {
     1019        float: left;
     1020        margin-right: 20px;
     1021        max-width: 260px;
     1022    }
     1023
     1024    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .block-editor-block-list__block-edit {
     1025        float: right;
     1026        margin-left: 20px;
     1027        max-width: 260px;
     1028    }
     1029
     1030    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote::before {
     1031        margin-left: 0;
     1032    }
     1033
     1034    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote::before {
     1035        margin-right: 0;
     1036    }
     1037
     1038
     1039}
     1040
     1041@media ( min-width: 600px ) {
     1042
     1043
     1044    /* BLOCK: PULLQUOTE */
     1045
     1046    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit {
     1047        margin-left: -30px;
     1048    }
     1049
     1050    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .block-editor-block-list__block-edit {
     1051        margin-right: -30px;
     1052    }
     1053
     1054
     1055}
    7151056
    7161057@media ( min-width: 700px ) {
     
    7191060
    7201061    .editor-styles-wrapper > * {
    721         font-size: 18px;
    722     }
    723 
    724     .editor-block-list__block[data-align="wide"],
    725     .editor-block-list__block[data-align="full"] {
     1062        font-size: 21px;
     1063    }
     1064
     1065    .wp-block[data-align="wide"],
     1066    .wp-block[data-align="full"] {
    7261067        margin-bottom: 60px;
    7271068        margin-top: 60px;
     
    7321073    .editor-post-title__block .editor-post-title__input,
    7331074    .editor-styles-wrapper .wp-block h1 {
     1075        font-size: 64px;
     1076    }
     1077
     1078    .editor-styles-wrapper .wp-block h2 {
    7341079        font-size: 48px;
    7351080    }
    7361081
    737     .editor-styles-wrapper .wp-block h2 {
     1082    .editor-styles-wrapper .wp-block h3 {
    7381083        font-size: 40px;
    7391084    }
    7401085
    741     .editor-styles-wrapper .wp-block h3 {
     1086    .editor-styles-wrapper .wp-block h4 {
    7421087        font-size: 32px;
    7431088    }
    7441089
    745     .editor-styles-wrapper .wp-block h4 {
     1090    .editor-styles-wrapper .wp-block h5 {
    7461091        font-size: 24px;
    7471092    }
    7481093
    749     .editor-styles-wrapper .wp-block h5 {
    750         font-size: 21px;
     1094    .editor-styles-wrapper li,
     1095    .editor-styles-wrapper p,
     1096    .editor-styles-wrapper p.wp-block-paragraph {
     1097        line-height: 1.476;
    7511098    }
    7521099
     
    7611108    }
    7621109
    763     /* BLOCK: PULLQUOTE */
    764 
    765     .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color {
    766         padding: 40px 30px;
    767     }
    768 
    769     .editor-styles-wrapper .editor-block-list__block[data-type="core/pullquote"][data-align="wide"] blockquote > .block-editor-rich-text p,
    770     .editor-styles-wrapper .editor-block-list__block[data-type="core/pullquote"][data-align="full"] blockquote > .block-editor-rich-text p {
    771         font-size: 2.5em;
     1110    /* BLOCK: BASE MARGINS */
     1111
     1112    /* BLOCK: BUTTON */
     1113
     1114    .editor-styles-wrapper .wp-block-button__link,
     1115    .editor-styles-wrapper .wp-block-file__button {
     1116        font-size: 17px;
     1117    }
     1118
     1119    /* BLOCK: CODE */
     1120
     1121    .editor-styles-wrapper .wp-block-preformatted pre,
     1122    .editor-styles-wrapper .wp-block-code .block-editor-plain-text,
     1123    .editor-styles-wrapper .wp-block-verse pre {
     1124        font-size: 16px;
    7721125    }
    7731126
     
    7851138    }
    7861139
     1140    /* BLOCK: GROUP */
     1141
     1142    .editor-styles-wrapper .wp-block-group.has-background {
     1143        padding: 40px;
     1144    }
     1145
    7871146    /* BLOCK: LATEST POSTS */
    7881147
    789     .editor-styles-wrapper ul.wp-block-latest-posts.is-grid li {
    790         margin: 0 0 40px 16px;
    791         padding-top: 24px;
     1148    /* BLOCK: PULLQUOTE */
     1149
     1150    .editor-styles-wrapper .wp-block .wp-block-pullquote p,
     1151    .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color blockquote > .block-editor-rich-text p,
     1152    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .editor-rich-text p,
     1153    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .editor-rich-text p {
     1154        font-size: 32px;
     1155    }
     1156
     1157    .editor-styles-wrapper .wp-block-pullquote__citation,
     1158    .editor-styles-wrapper .wp-block-pullquote cite,
     1159    .editor-styles-wrapper .wp-block-pullquote footer {
     1160        margin-top: 20px;
     1161    }
     1162
     1163    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote::before,
     1164    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] .wp-block-pullquote::before {
     1165        font-size: 113px;
     1166        height: 80px;
     1167        margin-bottom: 20px;
     1168        width: 80px;
     1169    }
     1170
     1171    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color,
     1172    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] .wp-block-pullquote.is-style-solid-color {
     1173        padding: 60px 40px 40px;
     1174    }
     1175
     1176    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] .wp-block-pullquote:not(.is-style-solid-color) {
     1177        padding-right: 10px;
     1178        padding-left: 10px;
     1179    }
     1180
     1181    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] blockquote p,
     1182    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] blockquote p {
     1183        font-size: 48px;
     1184        line-height: 1.203125;
     1185    }
     1186
     1187    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] p,
     1188    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] p {
     1189        font-size: 32px;
     1190        line-height: 1.1875;
     1191    }
     1192
     1193    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .is-style-solid-color p,
     1194    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .is-style-solid-color p {
     1195        font-size: 26px;
     1196    }
     1197
     1198    /* BLOCK: TABLE */
     1199
     1200    .editor-styles-wrapper  table.wp-block-table {
     1201        font-size: 18px;
     1202    }
     1203
     1204    /* BLOCK: SEPARATOR */
     1205
     1206    hr.wp-block-separator {
     1207        margin-bottom: 60px;
     1208        margin-top: 60px;
    7921209    }
    7931210
     
    8001217    /* STRUCTURE */
    8011218
    802     .editor-block-list__block[data-align="wide"],
    803     .editor-block-list__block[data-align="full"] {
     1219    .wp-block[data-align="wide"],
     1220    .wp-block[data-align="full"] {
    8041221        margin-bottom: 80px;
    8051222        margin-top: 80px;
     
    8191236    }
    8201237
    821 
    822 }
    823 
    824 
    825 @media ( min-width: 1220px ) {
    826 
    827 
    828     /* STRUCTURE */
    829 
    830     .editor-block-list__block[data-align="wide"],
    831     .editor-block-list__block[data-align="full"] {
     1238    /* BLOCK: GROUP */
     1239
     1240    .wp-block[data-align="wide"] .wp-block-group.has-background,
     1241    .wp-block[data-align="full"] .wp-block-group.has-background {
     1242        padding: 80px 40px;
     1243    }
     1244
     1245    /* BLOCK: SEPARATOR */
     1246
     1247    hr.wp-block-separator {
    8321248        margin-bottom: 80px;
    8331249        margin-top: 80px;
    8341250    }
    8351251
    836 }
     1252    hr.wp-block-separator.is-style-wide {
     1253        margin-right: -70px;
     1254        margin-left: -70px;
     1255    }
     1256
     1257
     1258}
     1259
     1260
     1261@media ( min-width: 1220px ) {
     1262
     1263
     1264    /* TYPOGRAPHY */
     1265
     1266    .editor-post-title__block .editor-post-title__input,
     1267    .editor-styles-wrapper .wp-block h1 {
     1268        font-size: 84px;
     1269    }
     1270
     1271    .editor-styles-wrapper .wp-block h6 {
     1272        font-size: 18px;
     1273    }
     1274
     1275    /* STRUCTURE */
     1276
     1277    .wp-block[data-align="wide"],
     1278    .wp-block[data-align="full"] {
     1279        margin-bottom: 80px;
     1280        margin-top: 80px;
     1281    }
     1282
     1283    /* BLOCK: PULLQUOTE */
     1284
     1285    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color,
     1286    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] .wp-block-pullquote.is-style-solid-color {
     1287        padding: 90px 40px 80px;
     1288    }
     1289
     1290    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] blockquote p,
     1291    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] blockquote p {
     1292        font-size: 64px;
     1293    }
     1294
     1295    /* BLOCK: SEPARATOR */
     1296
     1297    hr.wp-block-separator.is-style-wide {
     1298        margin-right: -150px;
     1299        margin-left: -150px;
     1300    }
     1301
     1302}
     1303
     1304
     1305@media ( min-width: 1360px ) {
     1306
     1307
     1308    /* STRUCTURE */
     1309
     1310    .editor-styles-wrapper .wp-block[data-align="left"],
     1311    .editor-styles-wrapper .wp-block[data-align="right"] {
     1312        margin: 0 auto;
     1313        max-width: 1220px;
     1314    }
     1315
     1316
     1317    /* BLOCK: PULLQUOTE */
     1318
     1319    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .is-style-solid-color::before,
     1320    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .is-style-solid-color::before {
     1321        top: 0;
     1322    }
     1323
     1324    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"],
     1325    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] {
     1326        margin: 0 auto;
     1327        max-width: 1220px;
     1328    }
     1329
     1330    /* BLOCK: SEPARATOR */
     1331
     1332    hr.wp-block-separator.is-style-wide {
     1333        margin-right: -200px;
     1334        margin-left: -200px;
     1335    }
     1336
     1337
     1338}
  • trunk/src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css

    r46271 r46357  
    1414.editor-styles-wrapper > * {
    1515    color: #000;
    16     font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     16    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    1717    font-size: 18px;
    1818}
     
    4646}
    4747
    48 /* INTER */
    49 
    50 @font-face {
    51     font-family: Inter;
    52     font-style: normal;
    53     font-weight: 400;
    54     src:
    55         url(../fonts/inter/Inter-Regular.woff2) format("woff2"),
    56         url(../fonts/inter/Inter-Regular.woff) format("woff");
    57 }
    58 
    59 @font-face {
    60     font-family: Inter;
    61     font-style: italic;
    62     font-weight: 400;
    63     src:
    64         url(../fonts/inter/Inter-Italic.woff2) format("woff2"),
    65         url(../fonts/inter/Inter-Italic.woff) format("woff");
    66 }
    67 
    68 @font-face {
    69     font-family: Inter;
    70     font-style: normal;
    71     font-weight: 500;
    72     src:
    73         url(../fonts/inter/Inter-Medium.woff2) format("woff2"),
    74         url(../fonts/inter/Inter-Medium.woff) format("woff");
    75 }
    76 
    77 @font-face {
    78     font-family: Inter;
    79     font-style: italic;
    80     font-weight: 500;
    81     src:
    82         url(../fonts/inter/Inter-MediumItalic.woff2) format("woff2"),
    83         url(../fonts/inter/Inter-MediumItalic.woff) format("woff");
    84 }
    85 
    86 @font-face {
    87     font-family: Inter;
    88     font-style: normal;
    89     font-weight: 600;
    90     src:
    91         url(../fonts/inter/Inter-SemiBold.woff2) format("woff2"),
    92         url(../fonts/inter/Inter-SemiBold.woff) format("woff");
    93 }
    94 
    95 @font-face {
    96     font-family: Inter;
    97     font-style: italic;
    98     font-weight: 600;
    99     src:
    100         url(../fonts/inter/Inter-SemiBoldItalic.woff2) format("woff2"),
    101         url(../fonts/inter/Inter-SemiBoldItalic.woff) format("woff");
    102 }
    103 
    104 @font-face {
    105     font-family: Inter;
    106     font-style: normal;
    107     font-weight: 700;
    108     src:
    109         url(../fonts/inter/Inter-Bold.woff2) format("woff2"),
    110         url(../fonts/inter/Inter-Bold.woff) format("woff");
    111 }
    112 
    113 @font-face {
    114     font-family: Inter;
    115     font-style: italic;
    116     font-weight: 700;
    117     src:
    118         url(../fonts/inter/Inter-BoldItalic.woff2) format("woff2"),
    119         url(../fonts/inter/Inter-BoldItalic.woff) format("woff");
    120 }
    121 
    122 @font-face {
    123     font-family: Inter;
    124     font-style: normal;
    125     font-weight: 800;
    126     src:
    127         url(../fonts/inter/Inter-ExtraBold.woff2) format("woff2"),
    128         url(../fonts/inter/Inter-ExtraBold.woff) format("woff");
    129 }
    130 
    131 @font-face {
    132     font-family: Inter;
    133     font-style: italic;
    134     font-weight: 800;
    135     src:
    136         url(../fonts/inter/Inter-ExtraBoldItalic.woff2) format("woff2"),
    137         url(../fonts/inter/Inter-ExtraBoldItalic.woff) format("woff");
    138 }
    139 
    14048/* ----------------------------------------------
    141 Variable font. Usage:
    142 
    143 html { font-family: Inter, sans-serif; }
     49Inter variable font. Usage:
     50
    14451@supports (font-variation-settings: normal) {
    14552    html { font-family: "Inter var", sans-serif; }
     
    220127.editor-styles-wrapper figcaption,
    221128.editor-styles-wrapper .wp-caption-text {
    222     font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     129    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    223130}
    224131
     
    278185    color: #cd2653;
    279186    text-decoration: underline;
     187}
     188
     189.editor-styles-wrapper a:focus,
     190.editor-styles-wrapper a:hover {
     191    text-decoration: none;
    280192}
    281193
     
    502414}
    503415
     416.editor-styles-wrapper .wp-block-archives li > a:focus,
     417.editor-styles-wrapper .wp-block-archives li > a:hover,
     418.editor-styles-wrapper .wp-block-categories li > a:focus,
     419.editor-styles-wrapper .wp-block-categories li > a:hover,
     420.editor-styles-wrapper .wp-block-latest-posts li > a:focus,
     421.editor-styles-wrapper .wp-block-latest-posts li > a:hover {
     422    font-weight: 700;
     423    text-decoration: none;
     424}
     425
    504426.editor-styles-wrapper .wp-block-archives.aligncenter,
    505427.editor-styles-wrapper .wp-block-categories.aligncenter {
     
    578500
    579501hr.wp-block-separator {
    580     border-top: 1px solid rgba(0, 0, 0, 0.42);
     502    border-top: 1px solid #6d6d6d;
     503    color: #6d6d6d;
    581504    margin: 30px 0;
    582505}
     
    587510
    588511hr.wp-block-separator:not(.is-style-dots) {
    589     background: linear-gradient(to left, rgba(0, 0, 0, 0.42) calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), rgba(0, 0, 0, 0.42) calc(50% + 16px));
     512    background: linear-gradient(to left, currentColor calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), currentColor calc(50% + 16px));
     513    background-color: transparent !important;
    590514    border: none;
    591     color: rgba(0, 0, 0, 0.42);
    592515    height: 1px;
    593516    overflow: visible;
    594517    position: relative;
     518}
     519
     520.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
     521    height: 1px;
    595522}
    596523
     
    618545
    619546hr.wp-block-separator.is-style-dots::before {
    620     color: rgba(0, 0, 0, 0.42);
    621547    font-size: 32px;
    622548    font-weight: 700;
     
    944870}
    945871
     872.editor-styles-wrapper .wp-block-latest-comments__comment-meta a:focus,
     873.editor-styles-wrapper .wp-block-latest-comments__comment-meta a:hover {
     874    text-decoration: none;
     875}
     876
    946877/* HAS AVATAR */
    947878
     
    1025956}
    1026957
     958.editor-styles-wrapper .wp-block-file .wp-block-file__textlink:focus,
     959.editor-styles-wrapper .wp-block-file .wp-block-file__textlink:hover {
     960    text-decoration: underline;
     961}
     962
    1027963.editor-styles-wrapper .wp-block-file .wp-block-file__button {
    1028964    font-size: 14px;
  • trunk/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic-rtl.css

    r46271 r46357  
    1919}
    2020
    21 /* INTER */
    22 
    23 @font-face {
    24     font-family: Inter;
    25     font-style: normal;
    26     font-weight: 400;
    27     src:
    28         url(../fonts/inter/Inter-Regular.woff2) format("woff2"),
    29         url(../fonts/inter/Inter-Regular.woff) format("woff");
    30 }
    31 
    32 @font-face {
    33     font-family: Inter;
    34     font-style: italic;
    35     font-weight: 400;
    36     src:
    37         url(../fonts/inter/Inter-Italic.woff2) format("woff2"),
    38         url(../fonts/inter/Inter-Italic.woff) format("woff");
    39 }
    40 
    41 @font-face {
    42     font-family: Inter;
    43     font-style: normal;
    44     font-weight: 500;
    45     src:
    46         url(../fonts/inter/Inter-Medium.woff2) format("woff2"),
    47         url(../fonts/inter/Inter-Medium.woff) format("woff");
    48 }
    49 
    50 @font-face {
    51     font-family: Inter;
    52     font-style: italic;
    53     font-weight: 500;
    54     src:
    55         url(../fonts/inter/Inter-MediumItalic.woff2) format("woff2"),
    56         url(../fonts/inter/Inter-MediumItalic.woff) format("woff");
    57 }
    58 
    59 @font-face {
    60     font-family: Inter;
    61     font-style: normal;
    62     font-weight: 600;
    63     src:
    64         url(../fonts/inter/Inter-SemiBold.woff2) format("woff2"),
    65         url(../fonts/inter/Inter-SemiBold.woff) format("woff");
    66 }
    67 
    68 @font-face {
    69     font-family: Inter;
    70     font-style: italic;
    71     font-weight: 600;
    72     src:
    73         url(../fonts/inter/Inter-SemiBoldItalic.woff2) format("woff2"),
    74         url(../fonts/inter/Inter-SemiBoldItalic.woff) format("woff");
    75 }
    76 
    77 @font-face {
    78     font-family: Inter;
    79     font-style: normal;
    80     font-weight: 700;
    81     src:
    82         url(../fonts/inter/Inter-Bold.woff2) format("woff2"),
    83         url(../fonts/inter/Inter-Bold.woff) format("woff");
    84 }
    85 
    86 @font-face {
    87     font-family: Inter;
    88     font-style: italic;
    89     font-weight: 700;
    90     src:
    91         url(../fonts/inter/Inter-BoldItalic.woff2) format("woff2"),
    92         url(../fonts/inter/Inter-BoldItalic.woff) format("woff");
    93 }
    94 
    95 @font-face {
    96     font-family: Inter;
    97     font-style: normal;
    98     font-weight: 800;
    99     src:
    100         url(../fonts/inter/Inter-ExtraBold.woff2) format("woff2"),
    101         url(../fonts/inter/Inter-ExtraBold.woff) format("woff");
    102 }
    103 
    104 @font-face {
    105     font-family: Inter;
    106     font-style: italic;
    107     font-weight: 800;
    108     src:
    109         url(../fonts/inter/Inter-ExtraBoldItalic.woff2) format("woff2"),
    110         url(../fonts/inter/Inter-ExtraBoldItalic.woff) format("woff");
    111 }
    112 
    11321/* ----------------------------------------------
    114 Variable font. Usage:
    115 
    116 html { font-family: Inter, sans-serif; }
     22Inter variable font. Usage:
     23
    11724@supports (font-variation-settings: normal) {
    11825    html { font-family: "Inter var", sans-serif; }
     
    13744
    13845body#tinymce.wp-editor { /* stylelint-disable-line no-duplicate-selectors */
    139     font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     46    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    14047}
    14148
     
    207114
    208115body#tinymce.wp-editor a,
     116body#tinymce.wp-editor a:focus,
    209117body#tinymce.wp-editor a:hover {
    210118    color: #cd2653;
     
    278186body#tinymce.wp-editor cite,
    279187body#tinymce.wp-editor table {
    280     font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     188    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    281189    line-height: 1;
    282190}
     
    627535}
    628536
     537body#tinymce.wp-editor button:focus,
    629538body#tinymce.wp-editor button:hover,
    630539body#tinymce.wp-editor .faux-button:hover,
    631 body#tinymce.wp-editor .wp-block-button__link:hover,
    632 body#tinymce.wp-editor .wp-block-file__button:hover,
    633 body#tinymce.wp-editor input[type="button"]:hover,
    634 body#tinymce.wp-editor input[type="reset"]:hover,
    635 body#tinymce.wp-editor input[type="submit"]:hover,
    636 body#tinymce.wp-editor button:focus,
    637540body#tinymce.wp-editor .faux-button:focus,
    638541body#tinymce.wp-editor .wp-block-button__link:focus,
     542body#tinymce.wp-editor .wp-block-button__link:hover,
    639543body#tinymce.wp-editor .wp-block-file__button:focus,
     544body#tinymce.wp-editor .wp-block-file__button:hover,
    640545body#tinymce.wp-editor input[type="button"]:focus,
     546body#tinymce.wp-editor input[type="button"]:hover,
    641547body#tinymce.wp-editor input[type="reset"]:focus,
    642 body#tinymce.wp-editor input[type="submit"]:focus {
     548body#tinymce.wp-editor input[type="reset"]:hover,
     549body#tinymce.wp-editor input[type="submit"]:focus,
     550body#tinymce.wp-editor input[type="submit"]:hover {
    643551    color: #fff;
    644552    text-decoration: underline;
     
    659567
    660568body#tinymce.wp-editor .is-style-outline .wp-block-button__link,
     569body#tinymce.wp-editor .is-style-outline .wp-block-button__link:focus,
    661570body#tinymce.wp-editor .is-style-outline .wp-block-button__link:hover {
    662571    color: #cd2653;
  • trunk/src/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css

    r46271 r46357  
    1919}
    2020
    21 /* INTER */
    22 
    23 @font-face {
    24     font-family: Inter;
    25     font-style: normal;
    26     font-weight: 400;
    27     src:
    28         url(../fonts/inter/Inter-Regular.woff2) format("woff2"),
    29         url(../fonts/inter/Inter-Regular.woff) format("woff");
    30 }
    31 
    32 @font-face {
    33     font-family: Inter;
    34     font-style: italic;
    35     font-weight: 400;
    36     src:
    37         url(../fonts/inter/Inter-Italic.woff2) format("woff2"),
    38         url(../fonts/inter/Inter-Italic.woff) format("woff");
    39 }
    40 
    41 @font-face {
    42     font-family: Inter;
    43     font-style: normal;
    44     font-weight: 500;
    45     src:
    46         url(../fonts/inter/Inter-Medium.woff2) format("woff2"),
    47         url(../fonts/inter/Inter-Medium.woff) format("woff");
    48 }
    49 
    50 @font-face {
    51     font-family: Inter;
    52     font-style: italic;
    53     font-weight: 500;
    54     src:
    55         url(../fonts/inter/Inter-MediumItalic.woff2) format("woff2"),
    56         url(../fonts/inter/Inter-MediumItalic.woff) format("woff");
    57 }
    58 
    59 @font-face {
    60     font-family: Inter;
    61     font-style: normal;
    62     font-weight: 600;
    63     src:
    64         url(../fonts/inter/Inter-SemiBold.woff2) format("woff2"),
    65         url(../fonts/inter/Inter-SemiBold.woff) format("woff");
    66 }
    67 
    68 @font-face {
    69     font-family: Inter;
    70     font-style: italic;
    71     font-weight: 600;
    72     src:
    73         url(../fonts/inter/Inter-SemiBoldItalic.woff2) format("woff2"),
    74         url(../fonts/inter/Inter-SemiBoldItalic.woff) format("woff");
    75 }
    76 
    77 @font-face {
    78     font-family: Inter;
    79     font-style: normal;
    80     font-weight: 700;
    81     src:
    82         url(../fonts/inter/Inter-Bold.woff2) format("woff2"),
    83         url(../fonts/inter/Inter-Bold.woff) format("woff");
    84 }
    85 
    86 @font-face {
    87     font-family: Inter;
    88     font-style: italic;
    89     font-weight: 700;
    90     src:
    91         url(../fonts/inter/Inter-BoldItalic.woff2) format("woff2"),
    92         url(../fonts/inter/Inter-BoldItalic.woff) format("woff");
    93 }
    94 
    95 @font-face {
    96     font-family: Inter;
    97     font-style: normal;
    98     font-weight: 800;
    99     src:
    100         url(../fonts/inter/Inter-ExtraBold.woff2) format("woff2"),
    101         url(../fonts/inter/Inter-ExtraBold.woff) format("woff");
    102 }
    103 
    104 @font-face {
    105     font-family: Inter;
    106     font-style: italic;
    107     font-weight: 800;
    108     src:
    109         url(../fonts/inter/Inter-ExtraBoldItalic.woff2) format("woff2"),
    110         url(../fonts/inter/Inter-ExtraBoldItalic.woff) format("woff");
    111 }
    112 
    11321/* ----------------------------------------------
    114 Variable font. Usage:
    115 
    116 html { font-family: Inter, sans-serif; }
     22Inter variable font. Usage:
     23
    11724@supports (font-variation-settings: normal) {
    11825    html { font-family: "Inter var", sans-serif; }
     
    13744
    13845body#tinymce.wp-editor { /* stylelint-disable-line no-duplicate-selectors */
    139     font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     46    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    14047}
    14148
     
    207114
    208115body#tinymce.wp-editor a,
     116body#tinymce.wp-editor a:focus,
    209117body#tinymce.wp-editor a:hover {
    210118    color: #cd2653;
     
    278186body#tinymce.wp-editor cite,
    279187body#tinymce.wp-editor table {
    280     font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     188    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    281189    line-height: 1;
    282190}
     
    627535}
    628536
     537body#tinymce.wp-editor button:focus,
    629538body#tinymce.wp-editor button:hover,
    630539body#tinymce.wp-editor .faux-button:hover,
    631 body#tinymce.wp-editor .wp-block-button__link:hover,
    632 body#tinymce.wp-editor .wp-block-file__button:hover,
    633 body#tinymce.wp-editor input[type="button"]:hover,
    634 body#tinymce.wp-editor input[type="reset"]:hover,
    635 body#tinymce.wp-editor input[type="submit"]:hover,
    636 body#tinymce.wp-editor button:focus,
    637540body#tinymce.wp-editor .faux-button:focus,
    638541body#tinymce.wp-editor .wp-block-button__link:focus,
     542body#tinymce.wp-editor .wp-block-button__link:hover,
    639543body#tinymce.wp-editor .wp-block-file__button:focus,
     544body#tinymce.wp-editor .wp-block-file__button:hover,
    640545body#tinymce.wp-editor input[type="button"]:focus,
     546body#tinymce.wp-editor input[type="button"]:hover,
    641547body#tinymce.wp-editor input[type="reset"]:focus,
    642 body#tinymce.wp-editor input[type="submit"]:focus {
     548body#tinymce.wp-editor input[type="reset"]:hover,
     549body#tinymce.wp-editor input[type="submit"]:focus,
     550body#tinymce.wp-editor input[type="submit"]:hover {
    643551    color: #fff;
    644552    text-decoration: underline;
     
    659567
    660568body#tinymce.wp-editor .is-style-outline .wp-block-button__link,
     569body#tinymce.wp-editor .is-style-outline .wp-block-button__link:focus,
    661570body#tinymce.wp-editor .is-style-outline .wp-block-button__link:hover {
    662571    color: #cd2653;
  • trunk/src/wp-content/themes/twentytwenty/assets/css/font-awesome.css

    r46271 r46357  
    33    font-style: normal;
    44    font-weight: 400;
    5     src: url(../fonts/font-awesome/fa-fallback.eot?15574881);
    65    src:
    7         url(../fonts/font-awesome/fa-fallback.eot?15574881#iefix) format("embedded-opentype"),
    86        url(../fonts/font-awesome/fa-fallback.woff2?15574881) format("woff2"),
    9         url(../fonts/font-awesome/fa-fallback.woff?15574881) format("woff"),
    10         url(../fonts/font-awesome/fa-fallback.ttf?15574881) format("truetype"),
    11         url(../fonts/font-awesome/fa-fallback.svg?15574881#font-awsome-fallback) format("svg");
     7        url(../fonts/font-awesome/fa-fallback.woff?15574881) format("woff");
    128}
    139
     
    1612    font-style: normal;
    1713    font-weight: 400;
    18     src: url(../fonts/font-awesome/fa-brands-400.eot);
    1914    src:
    20         url(../fonts/font-awesome/fa-brands-400.eot?#iefix) format("embedded-opentype"),
    2115        url(../fonts/font-awesome/fa-brands-400.woff2) format("woff2"),
    22         url(../fonts/font-awesome/fa-brands-400.woff) format("woff"),
    23         url(../fonts/font-awesome/fa-brands-400.ttf) format("truetype"),
    24         url(../fonts/font-awesome/fa-brands-400.svg#fontawesome) format("svg");
     16        url(../fonts/font-awesome/fa-brands-400.woff) format("woff");
    2517}
  • trunk/src/wp-content/themes/twentytwenty/assets/js/customize-controls.js

    r46277 r46357  
    1 /* global backgroundColors, twentyTwentyColor, Color, jQuery, wp, _ */
     1/* global twentyTwentyBgColors, twentyTwentyColor, Color, jQuery, wp, _ */
    22/**
    33 * Customizer enhancements for a better user experience.
     
    1515            value.bind( function( to ) {
    1616                // Update the value for our accessible colors for all areas.
    17                 Object.keys( backgroundColors ).forEach( function( context ) {
     17                Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
    1818                    var backgroundColorValue;
    19                     if ( backgroundColors[ context ].color ) {
    20                         backgroundColorValue = backgroundColors[ context ].color;
     19                    if ( twentyTwentyBgColors[ context ].color ) {
     20                        backgroundColorValue = twentyTwentyBgColors[ context ].color;
    2121                    } else {
    22                         backgroundColorValue = wp.customize( backgroundColors[ context ].setting ).get();
     22                        backgroundColorValue = wp.customize( twentyTwentyBgColors[ context ].setting ).get();
    2323                    }
    2424                    twentyTwentySetAccessibleColorsValue( context, backgroundColorValue, to );
     
    2828
    2929        // Add a listener for background-color changes.
    30         Object.keys( backgroundColors ).forEach( function( context ) {
    31             wp.customize( backgroundColors[ context ].setting, function( value ) {
     30        Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
     31            wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {
    3232                value.bind( function( to ) {
    3333                    // Update the value for our accessible colors for this area.
     
    6969
    7070            // Get borders color.
    71             value[ context ].borders = Color( {
    72                 h: colors.bgColorObj.h(),
    73                 s: colors.bgColorObj.s() * 0.3922,
    74                 l: colors.isDark ? colors.bgColorObj.l() + 9 : colors.bgColorObj.l() - 9
    75             } ).toCSS();
     71            value[ context ].borders = colors.bgColorObj
     72                .clone()
     73                .getReadableContrastingColor( colors.bgColorObj, 1.36 )
     74                .toCSS();
    7675
    7776            // Get secondary color.
  • trunk/src/wp-content/themes/twentytwenty/assets/js/customize-preview.js

    r46271 r46357  
    1 /* global backgroundColors, previewElements, jQuery, _, wp */
     1/* global twentyTwentyBgColors, twentyTwentyPreviewEls, jQuery, _, wp */
    22/**
    33 * Customizer enhancements for a better user experience.
     
    88 */
    99
    10 ( function() {
     10( function( $, api, _ ) {
     11    /**
     12     * Return a value for our partial refresh.
     13     *
     14     * @param {Object} partial  Current partial.
     15     *
     16     * @return {jQuery.Promise} Resolved promise.
     17     */
     18    function returnDeferred( partial ) {
     19        var deferred = new $.Deferred();
     20
     21        deferred.resolveWith( partial, _.map( partial.placements(), function() {
     22            return '';
     23        } ) );
     24
     25        return deferred.promise();
     26    }
     27
     28    // Selective refresh for "Fixed Background Image"
     29    api.selectiveRefresh.partialConstructor.cover_fixed = api.selectiveRefresh.Partial.extend( {
     30
     31        /**
     32         * Override the refresh method
     33         *
     34         * @return {jQuery.Promise} Resolved promise.
     35         */
     36        refresh: function() {
     37            var partial, cover, params;
     38
     39            partial = this;
     40            params = partial.params;
     41            cover = $( params.selector );
     42
     43            if ( cover.length && cover.hasClass( 'bg-image' ) ) {
     44                cover.toggleClass( 'bg-attachment-fixed' );
     45            }
     46
     47            return returnDeferred( partial );
     48        }
     49
     50    } );
     51
     52    // Selective refresh for "Image Overlay Opacity"
     53    api.selectiveRefresh.partialConstructor.cover_opacity = api.selectiveRefresh.Partial.extend( {
     54
     55        /**
     56         * Input attributes.
     57         *
     58         * @type {Object}
     59         */
     60        attrs: {},
     61
     62        /**
     63         * Override the refresh method
     64         *
     65         * @return {jQuery.Promise} Resolved promise.
     66         */
     67        refresh: function() {
     68            var partial, ranges, attrs, setting, params, cover, className, classNames;
     69
     70            partial = this;
     71            attrs = partial.attrs;
     72            ranges = _.range( attrs.min, attrs.max + attrs.step, attrs.step );
     73            params = partial.params;
     74            setting = api( params.primarySetting );
     75            cover = $( params.selector );
     76
     77            if ( cover.length ) {
     78                classNames = _.map( ranges, function( val ) {
     79                    return 'opacity-' + val;
     80                } );
     81
     82                className = classNames[ ranges.indexOf( parseInt( setting.get(), 10 ) ) ];
     83
     84                cover.removeClass( classNames.join( ' ' ) );
     85                cover.addClass( className );
     86            }
     87
     88            return returnDeferred( partial );
     89        }
     90
     91    } );
     92
    1193    // Add listener for the "header_footer_background_color" control.
    12     wp.customize( 'header_footer_background_color', function( value ) {
     94    api( 'header_footer_background_color', function( value ) {
    1395        value.bind( function( to ) {
    1496            // Add background color to header and footer wrappers.
    15             jQuery( '#site-header,#site-footer' ).css( 'background-color', to );
     97            $( '#site-header,#site-footer' ).css( 'background-color', to );
     98
     99            // Change body classes if this is the same background-color as the content background.
     100            if ( to.toLowerCase() === api( 'background_color' ).get().toLowerCase() ) {
     101                $( 'body' ).addClass( 'reduced-spacing' );
     102            } else {
     103                $( 'body' ).removeClass( 'reduced-spacing' );
     104            }
     105        } );
     106    } );
     107
     108    // Add listener for the "background_color" control.
     109    api( 'background_color', function( value ) {
     110        value.bind( function( to ) {
     111            // Change body classes if this is the same background-color as the header/footer background.
     112            if ( to.toLowerCase() === api( 'header_footer_background_color' ).get().toLowerCase() ) {
     113                $( 'body' ).addClass( 'reduced-spacing' );
     114            } else {
     115                $( 'body' ).removeClass( 'reduced-spacing' );
     116            }
    16117        } );
    17118    } );
    18119
    19120    // Add listener for the accent color.
    20     wp.customize( 'accent_hue', function( value ) {
     121    api( 'accent_hue', function( value ) {
    21122        value.bind( function() {
    22123            // Generate the styles.
    23124            // Add a small delay to be sure the accessible colors were generated.
    24125            setTimeout( function() {
    25                 Object.keys( backgroundColors ).forEach( function( context ) {
     126                Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
    26127                    twentyTwentyGenerateColorA11yPreviewStyles( context );
    27128                } );
     
    31132
    32133    // Add listeners for background-color settings.
    33     Object.keys( backgroundColors ).forEach( function( context ) {
    34         wp.customize( backgroundColors[ context ].setting, function( value ) {
     134    Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
     135        wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {
    35136            value.bind( function() {
    36137                // Generate the styles.
     
    56157        var a11yColors = window.parent.wp.customize( 'accent_accessible_colors' ).get(),
    57158            stylesheedID = 'twentytwenty-customizer-styles-' + context,
    58             stylesheet = jQuery( '#' + stylesheedID ),
     159            stylesheet = $( '#' + stylesheedID ),
    59160            styles = '';
    60161        // If the stylesheet doesn't exist, create it and append it to <head>.
    61162        if ( ! stylesheet.length ) {
    62             jQuery( '#twentytwenty-style-inline-css' ).after( '<style id="' + stylesheedID + '"></style>' );
    63             stylesheet = jQuery( '#' + stylesheedID );
     163            $( '#twentytwenty-style-inline-css' ).after( '<style id="' + stylesheedID + '"></style>' );
     164            stylesheet = $( '#' + stylesheedID );
    64165        }
    65166        if ( ! _.isUndefined( a11yColors[ context ] ) ) {
    66167            // Check if we have elements defined.
    67             if ( previewElements[ context ] ) {
    68                 _.each( previewElements[ context ], function( items, setting ) {
     168            if ( twentyTwentyPreviewEls[ context ] ) {
     169                _.each( twentyTwentyPreviewEls[ context ], function( items, setting ) {
    69170                    _.each( items, function( elements, property ) {
    70171                        if ( ! _.isUndefined( a11yColors[ context ][ setting ] ) ) {
     
    79180    }
    80181    // Generate styles on load. Handles page-changes on the preview pane.
    81     jQuery( document ).ready( function() {
     182    $( document ).ready( function() {
    82183        twentyTwentyGenerateColorA11yPreviewStyles( 'content' );
    83184        twentyTwentyGenerateColorA11yPreviewStyles( 'header-footer' );
    84185    } );
    85 }() );
     186}( jQuery, wp.customize, _ ) );
  • trunk/src/wp-content/themes/twentytwenty/assets/js/index.js

    r46277 r46357  
    77// polyfill closest
    88// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
    9 if ( ! Element.prototype.matches ) {
    10     Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
    11 }
    12 
    139if ( ! Element.prototype.closest ) {
    1410    Element.prototype.closest = function( s ) {
     
    5349    return event;
    5450};
     51
     52// matches "polyfill"
     53// https://developer.mozilla.org/es/docs/Web/API/Element/matches
     54
     55if ( ! Element.prototype.matches ) {
     56    Element.prototype.matches =
     57        Element.prototype.matchesSelector ||
     58        Element.prototype.mozMatchesSelector ||
     59        Element.prototype.msMatchesSelector ||
     60        Element.prototype.oMatchesSelector ||
     61        Element.prototype.webkitMatchesSelector ||
     62        function( s ) {
     63            var matches = ( this.document || this.ownerDocument ).querySelectorAll( s ),
     64                i = matches.length;
     65            while ( --i >= 0 && matches.item( i ) !== this ) {}
     66            return i > -1;
     67        };
     68}
    5569
    5670/*  -----------------------------------------------------------------------------------------------
     
    138152
    139153        function htmlStyles() {
     154            var overflow = window.innerHeight > document.documentElement.getBoundingClientRect().height;
     155
    140156            return {
    141                 'overflow-y': 'scroll',
     157                'overflow-y': overflow ? 'hidden' : 'scroll',
    142158                position: 'fixed',
    143159                width: '100%',
     
    211227
    212228/*  -----------------------------------------------------------------------------------------------
    213     Focus Management
    214 --------------------------------------------------------------------------------------------------- */
    215 
    216 twentytwenty.focusManagement = {
    217 
    218     init: function() {
    219         // If the visitor tabs out of the main menu, return focus to the navigation toggle
    220         // Also, if the visitor tabs into a hidden element, move the focus to the element after the hidden element
    221         this.focusLoop();
    222     },
    223 
    224     focusLoop: function() {
    225         document.addEventListener( 'focusin', function( event ) {
    226             var element = event.target;
    227             var menuModal = document.querySelector( '.menu-modal' );
    228             var headerToggles = document.querySelector( '.header-toggles' );
    229             var searchModal = document.querySelector( '.search-modal' );
    230             if ( menuModal && menuModal.classList.contains( '.active' ) ) {
    231                 if ( ! menuModal.contains( element ) && headerToggles && ! headerToggles.contains( element ) ) {
    232                     document.querySelector( '.close-nav-toggle' ).focus();
    233                 }
    234             } else if ( searchModal && ! searchModal.classList.contains( '.active' ) ) {
    235                 if ( ! searchModal.contains( element ) ) {
    236                     searchModal.querySelector( '.search-field' ).focus();
    237                 }
    238             }
    239         } );
    240     }
    241 
    242 }; // twentytwenty.focusManagement
    243 
    244 /*  -----------------------------------------------------------------------------------------------
    245229    Intrinsic Ratio Embeds
    246230--------------------------------------------------------------------------------------------------- */
     
    250234    init: function() {
    251235        this.makeFit();
    252 
    253         window.addEventListener( 'fit-videos', function() {
    254             this.makeFit();
    255         }.bind( this ) );
    256236
    257237        window.addEventListener( 'resize', function() {
     
    384364
    385365/*  -----------------------------------------------------------------------------------------------
    386     Main Menu
     366    Modal Menu
    387367--------------------------------------------------------------------------------------------------- */
    388368twentytwenty.modalMenu = {
     
    391371        // If the current menu item is in a sub level, expand all the levels higher up on load
    392372        this.expandLevel();
     373        this.goBackToCloseButton();
    393374    },
    394375
    395376    expandLevel: function() {
    396         var modalMenu = document.querySelector( '.modal-menu' );
    397         var activeMenuItem = modalMenu.querySelector( '.current-menu-item' );
    398 
    399         if ( activeMenuItem ) {
    400             twentytwentyFindParents( activeMenuItem, 'li' ).forEach( function( element ) {
    401                 var subMenuToggle = element.querySelector( '.sub-menu-toggle' );
    402                 if ( subMenuToggle ) {
    403                     subMenuToggle.click();
     377        var modalMenus = document.querySelectorAll( '.modal-menu' );
     378
     379        modalMenus.forEach( function( modalMenu ) {
     380            var activeMenuItem = modalMenu.querySelector( '.current-menu-item' );
     381
     382            if ( activeMenuItem ) {
     383                twentytwentyFindParents( activeMenuItem, 'li' ).forEach( function( element ) {
     384                    var subMenuToggle = element.querySelector( '.sub-menu-toggle' );
     385                    if ( subMenuToggle ) {
     386                        twentytwenty.toggles.performToggle( subMenuToggle, true );
     387                    }
     388                } );
     389            }
     390        } );
     391    },
     392
     393    // If the current menu item is the last one, return to close button when tab
     394    goBackToCloseButton: function() {
     395        document.addEventListener( 'keydown', function( event ) {
     396            var desktopMenuButton = document.querySelector( '.toggle.close-nav-toggle' );
     397            var mobileMenuButton = document.querySelector( '.toggle.mobile-nav-toggle' );
     398            var isMobileMenu = desktopMenuButton ? window.getComputedStyle( desktopMenuButton, null ).getPropertyValue( 'display' ) === 'none' : false;
     399            var firstMenuItem = isMobileMenu ? mobileMenuButton : desktopMenuButton;
     400
     401            var menuLinks = isMobileMenu ?
     402                document.querySelectorAll( '.menu-modal .mobile-menu li' ) :
     403                document.querySelectorAll( '.menu-modal .expanded-menu li' );
     404
     405            var socialLinks = document.querySelectorAll( '.menu-modal .social-menu > li' );
     406            var hasSocialMenu = document.querySelectorAll( '.menu-modal .social-menu' ).length > 0;
     407            var lastModalMenuItems = hasSocialMenu ? socialLinks : menuLinks;
     408            var focusedElementParentLi = twentytwentyFindParents( event.target, 'li' );
     409            var focusedElementIsInsideModal = twentytwentyFindParents( event.target, '.menu-modal' ).length > 0;
     410            var lastMenuItem = lastModalMenuItems[lastModalMenuItems.length - 1];
     411
     412            var isFirstModalItem = isMobileMenu ?
     413                event.target === mobileMenuButton :
     414                focusedElementIsInsideModal && event.target === desktopMenuButton;
     415
     416            var isLastModalItem = focusedElementIsInsideModal && focusedElementParentLi[0] ?
     417                focusedElementParentLi[0].className === lastMenuItem.className :
     418                undefined;
     419
     420            if ( ! event.shiftKey && event.key === 'Tab' && isLastModalItem ) {
     421                // Forward
     422                event.preventDefault();
     423                firstMenuItem.focus();
     424            }
     425            if ( event.shiftKey && event.key === 'Tab' && isFirstModalItem ) {
     426                // Backward
     427                event.preventDefault();
     428                lastMenuItem.querySelector( 'a' ).focus();
     429            }
     430        } );
     431    }
     432}; // twentytwenty.modalMenu
     433
     434/*  -----------------------------------------------------------------------------------------------
     435    Primary Menu
     436--------------------------------------------------------------------------------------------------- */
     437
     438twentytwenty.primaryMenu = {
     439
     440    init: function() {
     441        this.focusMenuWithChildren();
     442    },
     443
     444    // The focusMenuWithChildren() function implements Keyboard Navigation in the Primary Menu
     445    // by adding the '.focus' class to all 'li.menu-item-has-children' when the focus is on the 'a' element.
     446    focusMenuWithChildren: function() {
     447        // Get all the link elements within the primary menu.
     448        var menu = document.querySelector( '.primary-menu-wrapper' );
     449        var links = menu.getElementsByTagName( 'a' );
     450        var i, len;
     451
     452        // Each time a menu link is focused or blurred, toggle focus.
     453        for ( i = 0, len = links.length; i < len; i++ ) {
     454            links[i].addEventListener( 'focus', toggleFocus, true );
     455            links[i].addEventListener( 'blur', toggleFocus, true );
     456        }
     457
     458        //Sets or removes the .focus class on an element.
     459        function toggleFocus() {
     460            var self = this;
     461
     462            // Move up through the ancestors of the current link until we hit .primary-menu.
     463            while ( -1 === self.className.indexOf( 'primary-menu' ) ) {
     464                // On li elements toggle the class .focus.
     465                if ( 'li' === self.tagName.toLowerCase() ) {
     466                    if ( -1 !== self.className.indexOf( 'focus' ) ) {
     467                        self.className = self.className.replace( ' focus', '' );
     468                    } else {
     469                        self.className += ' focus';
     470                    }
    404471                }
    405             } );
    406         }
    407     }
    408 }; // twentytwenty.modalMenu
     472                self = self.parentElement;
     473            }
     474        }
     475    }
     476}; // twentytwenty.primaryMenu
    409477
    410478/*  -----------------------------------------------------------------------------------------------
     
    425493    },
    426494
     495    performToggle: function( element, instantly ) {
     496        var toggle, targetString, target, timeOutTime, classToToggle, activeClass;
     497
     498        // Get our targets
     499        toggle = element;
     500        targetString = toggle.dataset.toggleTarget;
     501        activeClass = 'active';
     502
     503        if ( targetString === 'next' ) {
     504            target = toggle.nextSibling;
     505        } else {
     506            target = document.querySelector( targetString );
     507        }
     508
     509        // Trigger events on the toggle targets before they are toggled
     510        if ( target.classList.contains( activeClass ) ) {
     511            target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-before-active' ) );
     512        } else {
     513            target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-before-inactive' ) );
     514        }
     515
     516        // Get the class to toggle, if specified
     517        classToToggle = toggle.dataset.classToToggle ? toggle.dataset.classToToggle : activeClass;
     518
     519        // For cover modals, set a short timeout duration so the class animations have time to play out
     520        timeOutTime = 0;
     521
     522        if ( target.classList.contains( 'cover-modal' ) ) {
     523            timeOutTime = 10;
     524        }
     525
     526        setTimeout( function() {
     527            var focusElement, duration, newTarget, subMenued;
     528
     529            subMenued = target.classList.contains( 'sub-menu' );
     530            newTarget = subMenued ? toggle.closest( '.menu-item' ).querySelector( '.sub-menu' ) : target;
     531            duration = toggle.dataset.toggleDuration;
     532
     533            // Toggle the target of the clicked toggle
     534            if ( toggle.dataset.toggleType === 'slidetoggle' && ! instantly && duration !== '0' ) {
     535                twentytwentyMenuToggle( newTarget, duration );
     536            } else {
     537                newTarget.classList.toggle( classToToggle );
     538            }
     539
     540            // If the toggle target is 'next', only give the clicked toggle the active class
     541            if ( targetString === 'next' ) {
     542                toggle.classList.toggle( activeClass );
     543            } else if ( target.classList.contains( 'sub-menu' ) ) {
     544                toggle.classList.toggle( activeClass );
     545            } else {
     546                // If not, toggle all toggles with this toggle target
     547                document.querySelector( '*[data-toggle-target="' + targetString + '"]' ).classList.toggle( activeClass );
     548            }
     549
     550            // Toggle aria-expanded on the target
     551            twentytwentyToggleAttribute( target, 'aria-expanded', 'true', 'false' );
     552
     553            // Toggle aria-expanded on the toggle
     554            twentytwentyToggleAttribute( toggle, 'aria-expanded', 'true', 'false' );
     555
     556            // Toggle body class
     557            if ( toggle.dataset.toggleBodyClass ) {
     558                document.querySelector( 'body' ).classList.toggle( toggle.dataset.toggleBodyClass );
     559            }
     560
     561            // Check whether to set focus
     562            if ( toggle.dataset.setFocus ) {
     563                focusElement = document.querySelector( toggle.dataset.setFocus );
     564
     565                if ( focusElement ) {
     566                    if ( target.classList.contains( activeClass ) ) {
     567                        focusElement.focus();
     568                    } else {
     569                        focusElement.blur();
     570                    }
     571                }
     572            }
     573
     574            // Trigger the toggled event on the toggle target
     575            target.dispatchEvent( twentytwenty.createEvent( 'toggled' ) );
     576
     577            // Trigger events on the toggle targets after they are toggled
     578            if ( target.classList.contains( activeClass ) ) {
     579                target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-after-active' ) );
     580            } else {
     581                target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-after-inactive' ) );
     582            }
     583        }, timeOutTime );
     584    },
     585
    427586    // Do the toggle
    428587    toggle: function() {
     588        var self = this;
     589
    429590        document.querySelectorAll( '*[data-toggle-target]' ).forEach( function( element ) {
    430591            element.addEventListener( 'click', function() {
    431                 var toggle, targetString, target, timeOutTime, classToToggle, activeClass;
    432 
    433                 // Get our targets
    434                 toggle = element;
    435                 targetString = toggle.dataset.toggleTarget;
    436                 activeClass = 'active';
    437 
    438                 if ( targetString === 'next' ) {
    439                     target = toggle.nextSibling;
    440                 } else {
    441                     target = document.querySelector( targetString );
    442                 }
    443 
    444                 // Trigger events on the toggle targets before they are toggled
    445                 if ( target.classList.contains( activeClass ) ) {
    446                     target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-before-active' ) );
    447                 } else {
    448                     target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-before-inactive' ) );
    449                 }
    450 
    451                 // Get the class to toggle, if specified
    452                 classToToggle = toggle.dataset.classToToggle ? toggle.dataset.classToToggle : activeClass;
    453 
    454                 // For cover modals, set a short timeout duration so the class animations have time to play out
    455                 timeOutTime = 0;
    456 
    457                 if ( target.classList.contains( 'cover-modal' ) ) {
    458                     timeOutTime = 10;
    459                 }
    460 
    461                 setTimeout( function() {
    462                     var focusElement, duration, newTarget, subMenued;
    463 
    464                     // Toggle the target of the clicked toggle
    465                     if ( toggle.dataset.toggleType === 'slidetoggle' ) {
    466                         duration = toggle.dataset.toggleDuration ? toggle.dataset.toggleDuration : 250;
    467                         subMenued = target.classList.contains( 'sub-menu' );
    468                         newTarget = subMenued ? toggle.closest( '.menu-item' ).querySelector( '.sub-menu' ) : target;
    469 
    470                         twentytwentySlideToggle( newTarget, duration );
    471                     } else {
    472                         target.classList.toggle( classToToggle );
    473                     }
    474 
    475                     // If the toggle target is 'next', only give the clicked toggle the active class
    476                     if ( targetString === 'next' ) {
    477                         toggle.classList.toggle( activeClass );
    478                     } else if ( target.classList.contains( 'sub-menu' ) ) {
    479                         toggle.classList.toggle( activeClass );
    480                     } else {
    481                         // If not, toggle all toggles with this toggle target
    482                         document.querySelector( '*[data-toggle-target="' + targetString + '"]' ).classList.toggle( activeClass );
    483                     }
    484 
    485                     // Toggle aria-expanded on the target
    486                     twentytwentyToggleAttribute( target, 'aria-expanded', 'true', 'false' );
    487 
    488                     // Toggle aria-expanded on the toggle
    489                     twentytwentyToggleAttribute( toggle, 'aria-expanded', 'true', 'false' );
    490 
    491                     // Toggle body class
    492                     if ( toggle.dataset.toggleBodyClass ) {
    493                         document.querySelector( 'body' ).classList.toggle( toggle.dataset.toggleBodyClass );
    494                     }
    495 
    496                     // Check whether to set focus
    497                     if ( toggle.dataset.setFocus ) {
    498                         focusElement = document.querySelector( toggle.dataset.setFocus );
    499 
    500                         if ( focusElement ) {
    501                             if ( target.classList.contains( activeClass ) ) {
    502                                 focusElement.focus();
    503                             } else {
    504                                 focusElement.blur();
    505                             }
    506                         }
    507                     }
    508 
    509                     // Trigger the toggled event on the toggle target
    510                     target.dispatchEvent( twentytwenty.createEvent( 'toggled' ) );
    511 
    512                     // Trigger events on the toggle targets after they are toggled
    513                     if ( target.classList.contains( activeClass ) ) {
    514                         target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-after-active' ) );
    515                     } else {
    516                         target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-after-inactive' ) );
    517                     }
    518                 }, timeOutTime );
     592                self.performToggle( element );
    519593            } );
    520594        } );
     
    595669    twentytwenty.smoothScroll.init();   // Smooth scroll to anchor link or a specific element
    596670    twentytwenty.modalMenu.init();  // Modal Menu
    597     twentytwenty.focusManagement.init();    // Focus Management
     671    twentytwenty.primaryMenu.init();    // Primary Menu
    598672} );
    599673
     
    619693
    620694/**
    621  * twentytwentySlideUp
    622  *
    623  * this implementation is coming from https://w3bits.com/javascript-slidetoggle/
     695 * Toggle a menu item on or off.
    624696 *
    625697 * @param {HTMLElement} target
    626698 * @param {number} duration
    627699 */
    628 function twentytwentySlideUp( target, duration ) {
    629     target.style.transitionProperty = 'height, margin, padding'; /* [1.1] */
    630     target.style.transitionDuration = duration + 'ms'; /* [1.2] */
    631     target.style.boxSizing = 'border-box'; /* [2] */
    632     target.style.height = target.offsetHeight + 'px'; /* [3] */
    633     target.style.height = 0; /* [4] */
    634     target.style.paddingTop = 0; /* [5.1] */
    635     target.style.paddingBottom = 0; /* [5.2] */
    636     target.style.marginTop = 0; /* [6.1] */
    637     target.style.marginBottom = 0; /* [7.2] */
    638     target.style.overflow = 'hidden'; /* [7] */
    639     window.setTimeout( function() {
    640         target.style.display = 'none'; /* [8] */
    641         target.style.removeProperty( 'height' ); /* [9] */
    642         target.style.removeProperty( 'padding-top' ); /* [10.1] */
    643         target.style.removeProperty( 'padding-bottom' ); /* [10.2] */
    644         target.style.removeProperty( 'margin-top' ); /* [11.1] */
    645         target.style.removeProperty( 'margin-bottom' ); /* [11.2] */
    646         target.style.removeProperty( 'overflow' ); /* [12] */
    647         target.style.removeProperty( 'transition-duration' ); /* [13.1] */
    648         target.style.removeProperty( 'transition-property' ); /* [13.2] */
    649     }, duration );
    650 }
    651 
    652 /**
    653  * twentytwentySlideDown
    654  *
    655  * this implementation is coming from https://w3bits.com/javascript-slidetoggle/
    656  *
    657  * @param {HTMLElement} target
    658  * @param {number} duration
    659  */
    660 function twentytwentySlideDown( target, duration ) {
    661     var height, display;
    662     target.style.removeProperty( 'display' ); /* [1] */
    663     display = window.getComputedStyle( target ).display;
    664     if ( display === 'none' ) { /* [2] */
    665         display = 'block';
    666     }
    667     target.style.display = display;
    668 
    669     height = target.offsetHeight; /* [3] */
    670     target.style.height = 0; /* [4] */
    671     target.style.paddingTop = 0; /* [5.1] */
    672     target.style.paddingBottom = 0; /* [5.2] */
    673     target.style.marginTop = 0; /* [6.1] */
    674     target.style.marginBottom = 0; /* [6.2] */
    675     target.style.overflow = 'hidden'; /* [7] */
    676 
    677     target.style.boxSizing = 'border-box'; /* [8] */
    678     target.style.transitionProperty = 'height, margin, padding'; /* [9.1] */
    679     target.style.transitionDuration = duration + 'ms'; /* [9.2] */
    680     target.style.height = height + 'px'; /* [10] */
    681     target.style.removeProperty( 'padding-top' ); /* [11.1] */
    682     target.style.removeProperty( 'padding-bottom' ); /* [11.2] */
    683     target.style.removeProperty( 'margin-top' ); /* [12.1] */
    684     target.style.removeProperty( 'margin-bottom' ); /* [12.2] */
    685 
    686     window.setTimeout( function() {
    687         target.style.removeProperty( 'height' ); /* [13] */
    688         target.style.removeProperty( 'overflow' ); /* [14] */
    689         target.style.removeProperty( 'transition-duration' ); /* [15.1] */
    690         target.style.removeProperty( 'transition-property' ); /* [15.2] */
    691     }, duration );
    692 }
    693 
    694 /**
    695  * twentytwentySlideToggle
    696  *
    697  * this implementation is coming from https://w3bits.com/javascript-slidetoggle/
    698  *
    699  * @param {HTMLElement} target
    700  * @param {number} duration
    701  */
    702 function twentytwentySlideToggle( target, duration ) {
    703     if ( duration === undefined ) {
    704         duration = 500;
    705     }
    706 
    707     if ( window.getComputedStyle( target ).display === 'none' ) {
    708         return twentytwentySlideDown( target, duration );
    709     }
    710     return twentytwentySlideUp( target, duration );
     700function twentytwentyMenuToggle( target, duration ) {
     701    var initialPositions = [];
     702    var finalPositions = [];
     703    var initialParentHeight, finalParentHeight;
     704    var menu, menuItems;
     705    var transitionListener;
     706
     707    if ( ! target ) {
     708        return;
     709    }
     710
     711    menu = target.closest( '.menu-wrapper' );
     712
     713    // Step 1: look at the initial positions of every menu item.
     714    menuItems = menu.querySelectorAll( '.menu-item' );
     715
     716    menuItems.forEach( function( menuItem, index ) {
     717        initialPositions[ index ] = { x: menuItem.offsetLeft, y: menuItem.offsetTop };
     718    } );
     719    initialParentHeight = target.parentElement.offsetHeight;
     720
     721    target.classList.add( 'toggling-target' );
     722
     723    // Step 2: toggle target menu item and look at the final positions of every menu item.
     724    target.classList.toggle( 'active' );
     725
     726    menuItems.forEach( function( menuItem, index ) {
     727        finalPositions[ index ] = { x: menuItem.offsetLeft, y: menuItem.offsetTop };
     728    } );
     729    finalParentHeight = target.parentElement.offsetHeight;
     730
     731    // Step 3: close target menu item again.
     732    // The whole process happens without giving the browser a chance to render, so it's invisible.
     733    target.classList.toggle( 'active' );
     734
     735    // Step 4: prepare animation.
     736    // Position all the items with absolute offsets, at the same starting position.
     737    // Shouldn't result in any visual changes if done right.
     738    menu.classList.add( 'is-toggling' );
     739    target.classList.toggle( 'active' );
     740    menuItems.forEach( function( menuItem, index ) {
     741        var initialPosition = initialPositions[ index ];
     742        if ( initialPosition.y === 0 && menuItem.parentElement === target ) {
     743            initialPosition.y = initialParentHeight;
     744        }
     745        menuItem.style.transform = 'translate(' + initialPosition.x + 'px, ' + initialPosition.y + 'px)';
     746    } );
     747
     748    // The double rAF is unfortunately needed, since we're toggling CSS classes, and
     749    // the only way to ensure layout completion here across browsers is to wait twice.
     750    // This just delays the start of the animation by 2 frames and is thus not an issue.
     751    requestAnimationFrame( function() {
     752        requestAnimationFrame( function() {
     753            // Step 5: start animation by moving everything to final position.
     754            // All the layout work has already happened, while we were preparing for the animation.
     755            // The animation now runs entirely in CSS, using cheap CSS properties (opacity and transform)
     756            // that don't trigger the layout or paint stages.
     757            menu.classList.add( 'is-animating' );
     758            menuItems.forEach( function( menuItem, index ) {
     759                var finalPosition = finalPositions[ index ];
     760                if ( finalPosition.y === 0 && menuItem.parentElement === target ) {
     761                    finalPosition.y = finalParentHeight;
     762                }
     763                if ( duration !== undefined ) {
     764                    menuItem.style.transitionDuration = duration + 'ms';
     765                }
     766                menuItem.style.transform = 'translate(' + finalPosition.x + 'px, ' + finalPosition.y + 'px)';
     767            } );
     768            if ( duration !== undefined ) {
     769                target.style.transitionDuration = duration + 'ms';
     770            }
     771        } );
     772
     773        // Step 6: finish toggling.
     774        // Remove all transient classes when the animation ends.
     775        transitionListener = function() {
     776            menu.classList.remove( 'is-animating' );
     777            menu.classList.remove( 'is-toggling' );
     778            target.classList.remove( 'toggling-target' );
     779            menuItems.forEach( function( menuItem ) {
     780                menuItem.style.transform = '';
     781                menuItem.style.transitionDuration = '';
     782            } );
     783            target.style.transitionDuration = '';
     784            target.removeEventListener( 'transitionend', transitionListener );
     785        };
     786
     787        target.addEventListener( 'transitionend', transitionListener );
     788    } );
    711789}
    712790
  • trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php

    r46271 r46357  
    155155            );
    156156
    157             /**
    158              * Custom Accent Colors.
    159             */
    160             $accent_color_options = self::get_color_options();
    161 
    162             // Loop over the color options and add them to the customizer.
    163             foreach ( $accent_color_options as $color_option_name => $color_option ) {
    164 
    165                 $wp_customize->add_setting(
    166                     $color_option_name,
    167                     array(
    168                         'default'           => $color_option['default'],
    169                         'sanitize_callback' => 'sanitize_hex_color',
    170                     )
    171                 );
    172 
    173                 $wp_customize->add_control(
    174                     new WP_Customize_Color_Control(
    175                         $wp_customize,
    176                         $color_option_name,
    177                         array(
    178                             'label'    => $color_option['label'],
    179                             'section'  => 'colors',
    180                             'priority' => 10,
    181                         )
    182                     )
    183                 );
    184 
    185             }
    186 
    187157            // Update background color with postMessage, so inline CSS output is updated as well.
    188158            $wp_customize->get_setting( 'background_color' )->transport = 'postMessage';
     
    198168                    'priority'    => 40,
    199169                    'capability'  => 'edit_theme_options',
    200                     'description' => __( 'Settings for this theme.', 'twentytwenty' ),
     170                    'description' => __( 'Specific settings for the Twenty Twenty theme.', 'twentytwenty' ),
    201171                )
    202172            );
     
    208178                array(
    209179                    'capability'        => 'edit_theme_options',
    210                     'default'           => false,
     180                    'default'           => true,
    211181                    'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
    212182                )
     
    216186                'enable_header_search',
    217187                array(
    218                     'type'        => 'checkbox',
    219                     'section'     => 'options',
    220                     'priority'    => 10,
    221                     'label'       => __( 'Show search in header', 'twentytwenty' ),
    222                     'description' => __( 'Uncheck to hide the search in the header.', 'twentytwenty' ),
     188                    'type'     => 'checkbox',
     189                    'section'  => 'options',
     190                    'priority' => 10,
     191                    'label'    => __( 'Show search in header', 'twentytwenty' ),
    223192                )
    224193            );
     
    238207                'blog_content',
    239208                array(
    240                     'type'        => 'radio',
    241                     'section'     => 'options',
    242                     'priority'    => 10,
    243                     'label'       => __( 'On archive pages, posts show:', 'twentytwenty' ),
    244                     'description' => __( 'Search results always show the summary.', 'twentytwenty' ),
    245                     'choices'     => array(
     209                    'type'     => 'radio',
     210                    'section'  => 'options',
     211                    'priority' => 10,
     212                    'label'    => __( 'On archive pages, posts show:', 'twentytwenty' ),
     213                    'choices'  => array(
    246214                        'full'    => __( 'Full text', 'twentytwenty' ),
    247215                        'summary' => __( 'Summary', 'twentytwenty' ),
     
    271239                    'default'           => true,
    272240                    'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
     241                    'transport'         => 'postMessage',
    273242                )
    274243            );
     
    281250                    'label'       => __( 'Fixed Background Image', 'twentytwenty' ),
    282251                    'description' => __( 'Creates a parallax effect when the visitor scrolls.', 'twentytwenty' ),
     252                )
     253            );
     254
     255            $wp_customize->selective_refresh->add_partial(
     256                'cover_template_fixed_background',
     257                array(
     258                    'selector' => '.cover-header',
     259                    'type'     => 'cover_fixed',
    283260                )
    284261            );
     
    347324            );
    348325
    349             /* Overlay Blend Mode ------------ */
    350 
    351             $wp_customize->add_setting(
    352                 'cover_template_overlay_blend_mode',
    353                 array(
    354                     'default'           => 'multiply',
    355                     'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
    356                 )
    357             );
    358 
    359             $wp_customize->add_control(
    360                 'cover_template_overlay_blend_mode',
    361                 array(
    362                     'label'       => __( 'Image Overlay Blend Mode', 'twentytwenty' ),
    363                     'description' => __( 'How the overlay color will blend with the image. Some browsers, like Internet Explorer and Edge, only support the "Normal" mode.', 'twentytwenty' ),
     326            /* Overlay Color Opacity --------- */
     327
     328            $wp_customize->add_setting(
     329                'cover_template_overlay_opacity',
     330                array(
     331                    'default'           => 80,
     332                    'sanitize_callback' => 'absint',
     333                    'transport'         => 'postMessage',
     334                )
     335            );
     336
     337            $wp_customize->add_control(
     338                'cover_template_overlay_opacity',
     339                array(
     340                    'label'       => __( 'Image Overlay Opacity', 'twentytwenty' ),
     341                    'description' => __( 'Make sure that the contrast is high enough so that the text is readable.', 'twentytwenty' ),
    364342                    'section'     => 'cover_template_options',
    365                     'type'        => 'select',
    366                     'choices'     => array(
    367                         'normal'      => __( 'Normal', 'twentytwenty' ),
    368                         'multiply'    => __( 'Multiply', 'twentytwenty' ),
    369                         'screen'      => __( 'Screen', 'twentytwenty' ),
    370                         'overlay'     => __( 'Overlay', 'twentytwenty' ),
    371                         'darken'      => __( 'Darken', 'twentytwenty' ),
    372                         'lighten'     => __( 'Lighten', 'twentytwenty' ),
    373                         'color-dodge' => __( 'Color Dodge', 'twentytwenty' ),
    374                         'color-burn'  => __( 'Color Burn', 'twentytwenty' ),
    375                         'hard-light'  => __( 'Hard Light', 'twentytwenty' ),
    376                         'soft-light'  => __( 'Soft Light', 'twentytwenty' ),
    377                         'difference'  => __( 'Difference', 'twentytwenty' ),
    378                         'exclusion'   => __( 'Exclusion', 'twentytwenty' ),
    379                         'hue'         => __( 'Hue', 'twentytwenty' ),
    380                         'saturation'  => __( 'Saturation', 'twentytwenty' ),
    381                         'color'       => __( 'Color', 'twentytwenty' ),
    382                         'luminosity'  => __( 'Luminosity', 'twentytwenty' ),
    383                     ),
    384                 )
    385             );
    386 
    387             /* Overlay Color Opacity --------- */
    388 
    389             $wp_customize->add_setting(
     343                    'type'        => 'range',
     344                    'input_attrs' => twentytwenty_customize_opacity_range(),
     345                )
     346            );
     347
     348            $wp_customize->selective_refresh->add_partial(
    390349                'cover_template_overlay_opacity',
    391350                array(
    392                     'default'           => '80',
    393                     'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
    394                 )
    395             );
    396 
    397             $wp_customize->add_control(
    398                 'cover_template_overlay_opacity',
    399                 array(
    400                     'label'       => __( 'Image Overlay Opacity', 'twentytwenty' ),
    401                     'description' => __( 'Make sure that the value is high enough that the text is readable.', 'twentytwenty' ),
    402                     'section'     => 'cover_template_options',
    403                     'type'        => 'select',
    404                     'choices'     => array(
    405                         '0'   => __( '0%', 'twentytwenty' ),
    406                         '10'  => __( '10%', 'twentytwenty' ),
    407                         '20'  => __( '20%', 'twentytwenty' ),
    408                         '30'  => __( '30%', 'twentytwenty' ),
    409                         '40'  => __( '40%', 'twentytwenty' ),
    410                         '50'  => __( '50%', 'twentytwenty' ),
    411                         '60'  => __( '60%', 'twentytwenty' ),
    412                         '70'  => __( '70%', 'twentytwenty' ),
    413                         '80'  => __( '80%', 'twentytwenty' ),
    414                         '90'  => __( '90%', 'twentytwenty' ),
    415                         '100' => __( '100%', 'twentytwenty' ),
    416                     ),
    417                 )
    418             );
    419 
     351                    'selector' => '.cover-color-overlay',
     352                    'type'     => 'cover_opacity',
     353                )
     354            );
    420355        }
    421356
     
    442377
    443378            return $value;
    444         }
    445 
    446         /**
    447          * Return the sitewide color options included.
    448          * Note: These values are shared between the block editor styles and the customizer,
    449          * and abstracted to this function.
    450          */
    451         public static function get_color_options() {
    452             return apply_filters( 'twentytwenty_accent_color_options', array() );
    453379        }
    454380
     
    512438    }
    513439}
     440
     441
     442/**
     443 * Input attributes for cover overlay opacity option.
     444 *
     445 * @return array Array containing attribute names and their values.
     446 */
     447function twentytwenty_customize_opacity_range() {
     448    /**
     449     * Filter the input attributes for opacity
     450     *
     451     * @param array $attrs {
     452     *     The attributes
     453     *
     454     *     @type int $min Minimum value
     455     *     @type int $max Maximum value
     456     *     @type int $step Interval between numbers
     457     * }
     458     */
     459    return apply_filters(
     460        'twentytwenty_customize_opacity_range',
     461        array(
     462            'min'  => 0,
     463            'max'  => 90,
     464            'step' => 5,
     465        )
     466    );
     467}
  • trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-script-loader.php

    r46271 r46357  
    11<?php
    22/**
    3  * Javsscript Loader Class
     3 * Javascript Loader Class
    44 *
    55 * Allow `async` and `defer` while enqueuing Javascript.
    66 *
    7  * Based on a soltion in WP Rig.
     7 * Based on a solution in WP Rig.
    88 *
    99 * @package WordPress
     
    1212 */
    1313
    14 /**
    15  * A class that provides a way to add `async` or `defer` attributes to scripts.
    16  */
    17 class TwentyTwenty_Script_Loader {
     14if ( ! class_exists( 'TwentyTwenty_Script_Loader' ) ) {
     15    /**
     16     * A class that provides a way to add `async` or `defer` attributes to scripts.
     17     */
     18    class TwentyTwenty_Script_Loader {
    1819
    19     /**
    20      * Adds async/defer attributes to enqueued / registered scripts.
    21      *
    22      * If #12009 lands in WordPress, this function can no-op since it would be handled in core.
    23      *
    24      * @link https://core.trac.wordpress.org/ticket/12009
    25      *
    26      * @param string $tag    The script tag.
    27      * @param string $handle The script handle.
    28      * @return string Script HTML string.
    29      */
    30     public function filter_script_loader_tag( $tag, $handle ) {
    31         foreach ( array( 'async', 'defer' ) as $attr ) {
    32             if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
    33                 continue;
     20        /**
     21         * Adds async/defer attributes to enqueued / registered scripts.
     22         *
     23         * If #12009 lands in WordPress, this function can no-op since it would be handled in core.
     24         *
     25         * @link https://core.trac.wordpress.org/ticket/12009
     26         *
     27         * @param string $tag    The script tag.
     28         * @param string $handle The script handle.
     29         * @return string Script HTML string.
     30         */
     31        public function filter_script_loader_tag( $tag, $handle ) {
     32            foreach ( [ 'async', 'defer' ] as $attr ) {
     33                if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
     34                    continue;
     35                }
     36                // Prevent adding attribute when already added in #12009.
     37                if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
     38                    $tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
     39                }
     40                // Only allow async or defer, not both.
     41                break;
    3442            }
    35             // Prevent adding attribute when already added in #12009.
    36             if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
    37                 $tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
    38             }
    39             // Only allow async or defer, not both.
    40             break;
     43            return $tag;
    4144        }
    42         return $tag;
     45
    4346    }
    44 
    4547}
  • trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-svg-icons.php

    r46271 r46357  
    1111    /**
    1212     * SVG ICONS CLASS
    13      * Retrieve the SVG code for the specified icon. Based on a solution in TwentyNineteen.
     13     * Retrieve the SVG code for the specified icon. Based on a solution in Twenty Nineteen.
    1414     */
    1515    class TwentyTwenty_SVG_Icons {
  • trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-comment.php

    r46271 r46357  
    7070                                </time>
    7171                            </a>
     72                            <?php
     73                            if ( get_edit_comment_link() ) {
     74                                echo ' &bull; <a class="comment-edit-link" href="' . esc_url( get_edit_comment_link() ) . '">' . __( 'Edit', 'twentytwenty' ) . '</a>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations
     75                            }
     76                            ?>
    7277                        </div><!-- .comment-metadata -->
    7378
     
    8590                            <?php
    8691                        }
     92
    8793                        ?>
    8894
     
    106112                    $by_post_author = twentytwenty_is_comment_by_post_author( $comment );
    107113
    108                     $edit_comment_link = get_edit_comment_link() ? '<a class="edit-comment-link" href="' . esc_url( get_edit_comment_link() ) . '">' . __( 'Edit', 'twentytwenty' ) . '</a>' : '';
    109 
    110                     if ( $comment_reply_link || $by_post_author || $edit_comment_link ) {
     114                    if ( $comment_reply_link || $by_post_author ) {
    111115                        ?>
    112116
     
    116120                            if ( $comment_reply_link ) {
    117121                                echo $comment_reply_link; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --Link is escaped in https://developer.wordpress.org/reference/functions/get_comment_reply_link/
    118                             }
    119                             if ( $edit_comment_link ) {
    120                                 echo $edit_comment_link; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --Link escaped on line 109.
    121122                            }
    122123                            if ( $by_post_author ) {
  • trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-page.php

    r46271 r46357  
    129129
    130130                    $toggle_target_string = '.menu-modal .page-item-' . $page->ID . ' > ul';
     131                    $toggle_duration      = twentytwenty_toggle_duration();
    131132
    132133                    // Add the sub menu toggle.
    133                     $args['list_item_after'] .= '<button class="toggle sub-menu-toggle fill-children-current-color" data-toggle-target="' . $toggle_target_string . '" data-toggle-type="slidetoggle" data-toggle-duration="250"><span class="screen-reader-text">' . __( 'Show sub menu', 'twentytwenty' ) . '</span>' . twentytwenty_get_theme_svg( 'chevron-down' ) . '</button>';
     134                    $args['list_item_after'] .= '<button class="toggle sub-menu-toggle fill-children-current-color" data-toggle-target="' . $toggle_target_string . '" data-toggle-type="slidetoggle" data-toggle-duration="' . absint( $toggle_duration ) . '"><span class="screen-reader-text">' . __( 'Show sub menu', 'twentytwenty' ) . '</span>' . twentytwenty_get_theme_svg( 'chevron-down' ) . '</button>';
    134135
    135136                }
  • trunk/src/wp-content/themes/twentytwenty/comments.php

    r46271 r46357  
    108108
    109109    if ( $comments ) {
    110         echo '<hr class="is-style-wide" aria-hidden="true" />';
     110        echo '<hr class="styled-separator is-style-wide" aria-hidden="true" />';
    111111    }
    112112
     
    122122
    123123    if ( $comments ) {
    124         echo '<hr class="is-style-wide" aria-hidden="true" />';
     124        echo '<hr class="styled-separator is-style-wide" aria-hidden="true" />';
    125125    }
    126126
  • trunk/src/wp-content/themes/twentytwenty/footer.php

    r46283 r46357  
    1212 */
    1313
    14 ?>
     14?>     
     15            <footer id="site-footer" role="contentinfo" class="header-footer-group">
    1516
    16         <footer id="site-footer" role="contentinfo" class="header-footer-group">
    17 
    18             <div class="footer-inner section-inner">
    19 
    20                 <?php
    21 
    22                 $has_footer_menu = has_nav_menu( 'footer' );
    23                 $has_social_menu = has_nav_menu( 'social' );
    24 
    25                 $footer_top_classes = '';
    26 
    27                 $footer_top_classes .= $has_footer_menu ? ' has-footer-menu' : '';
    28                 $footer_top_classes .= $has_social_menu ? ' has-social-menu' : '';
    29 
    30                 $footer_social_wrapper_class = $has_footer_menu ? 'footer-social-wrapper' : '';
    31 
    32                 if ( $has_footer_menu || $has_social_menu ) {
    33                     ?>
    34                     <div class="footer-top<?php echo esc_attr( $footer_top_classes ); ?>">
    35                         <?php if ( $has_footer_menu ) { ?>
    36 
    37                             <nav aria-label="<?php esc_attr_e( 'Footer menu', 'twentytwenty' ); ?>">
    38 
    39                                 <ul class="footer-menu reset-list-style">
    40                                     <?php
    41                                     wp_nav_menu(
    42                                         array(
    43                                             'container'  => '',
    44                                             'depth'      => 1,
    45                                             'items_wrap' => '%3$s',
    46                                             'theme_location' => 'footer',
    47                                         )
    48                                     );
    49                                     ?>
    50                                 </ul>
    51 
    52                             </nav><!-- .site-nav -->
    53 
    54                         <?php } ?>
    55                         <?php if ( $has_social_menu ) { ?>
    56 
    57                             <div class="<?php esc_attr( $footer_social_wrapper_class ); ?>">
    58 
    59                                 <nav aria-label="<?php esc_attr_e( 'Social links', 'twentytwenty' ); ?>">
    60 
    61                                     <ul class="social-menu footer-social reset-list-style social-icons s-icons">
    62 
    63                                         <?php
    64                                         wp_nav_menu(
    65                                             array(
    66                                                 'theme_location' => 'social',
    67                                                 'container' => '',
    68                                                 'container_class' => '',
    69                                                 'items_wrap' => '%3$s',
    70                                                 'menu_id' => '',
    71                                                 'menu_class' => '',
    72                                                 'depth'   => 1,
    73                                                 'link_before' => '<span class="screen-reader-text">',
    74                                                 'link_after' => '</span>',
    75                                                 'fallback_cb' => '',
    76                                             )
    77                                         );
    78                                         ?>
    79 
    80                                     </ul>
    81 
    82                                 </nav><!-- .social-menu -->
    83 
    84                             </div><!-- .footer-social-wrapper -->
    85 
    86                         <?php } ?>
    87                     </div><!-- .footer-top -->
    88 
    89                 <?php } ?>
    90 
    91 
    92                 <?php if ( is_active_sidebar( 'sidebar-1' ) || is_active_sidebar( 'sidebar-2' ) ) { ?>
    93 
    94                     <div class="footer-widgets-outer-wrapper">
    95 
    96                         <div class="footer-widgets-wrapper">
    97 
    98                             <?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?>
    99 
    100                                 <div class="footer-widgets column-one grid-item">
    101                                     <?php dynamic_sidebar( 'sidebar-1' ); ?>
    102                                 </div>
    103 
    104                             <?php } ?>
    105 
    106                             <?php if ( is_active_sidebar( 'sidebar-2' ) ) { ?>
    107 
    108                                 <div class="footer-widgets column-two grid-item">
    109                                     <?php dynamic_sidebar( 'sidebar-2' ); ?>
    110                                 </div>
    111 
    112                             <?php } ?>
    113 
    114                         </div><!-- .footer-widgets-wrapper -->
    115 
    116                     </div><!-- .footer-widgets-outer-wrapper -->
    117 
    118                 <?php } ?>
    119 
    120                 <div class="footer-bottom">
     17                <div class="section-inner">
    12118
    12219                    <div class="footer-credits">
     
    13128                            );
    13229                            ?>
    133                             <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo bloginfo( 'name' ); ?></a></a>
     30                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo bloginfo( 'name' ); ?></a>
    13431                        </p>
    13532
    13633                        <p class="powered-by-wordpress">
    137                             <?php
    138                             /* Translators: %s = Link to WordPress.org */
    139                             printf( _x( 'Powered by %s', 'Translators: %s = Link to WordPress.org', 'twentytwenty' ), '<a href="https://wordpress.org">' . __( 'WordPress', 'twentytwenty' ) . '</a>' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations
    140                             ?>
     34                            <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
     35                                <?php
     36                                _e( 'Powered by WordPress', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations
     37                                ?>
     38                            </a>
    14139                        </p><!-- .theme-credits -->
    14240
     
    15856                    </a>
    15957
    160                 </div><!-- .footer-bottom -->
     58                </div><!-- .section-inner -->
    16159
    162             </div><!-- .footer-inner -->
    163 
    164         </footer><!-- #site-footer -->
     60            </footer><!-- #site-footer -->
    16561
    16662        <?php wp_footer(); ?>
  • trunk/src/wp-content/themes/twentytwenty/functions.php

    r46283 r46357  
    2525 */
    2626
    27 if ( ! function_exists( 'twentytwenty_theme_support' ) ) {
    28     /**
    29      * Sets up theme defaults and registers support for various WordPress features.
     27/**
     28 * Sets up theme defaults and registers support for various WordPress features.
     29 *
     30 * Note that this function is hooked into the after_setup_theme hook, which
     31 * runs before the init hook. The init hook is too late for some features, such
     32 * as indicating support for post thumbnails.
     33 */
     34function twentytwenty_theme_support() {
     35
     36    // Add default posts and comments RSS feed links to head.
     37    add_theme_support( 'automatic-feed-links' );
     38
     39    // Custom background color.
     40    add_theme_support(
     41        'custom-background',
     42        array(
     43            'default-color' => 'f5efe0',
     44        )
     45    );
     46
     47    // Set content-width.
     48    global $content_width;
     49    if ( ! isset( $content_width ) ) {
     50        $content_width = 580;
     51    }
     52
     53    /*
     54     * Enable support for Post Thumbnails on posts and pages.
    3055     *
    31      * Note that this function is hooked into the after_setup_theme hook, which
    32      * runs before the init hook. The init hook is too late for some features, such
    33      * as indicating support for post thumbnails.
     56     * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
    3457     */
    35     function twentytwenty_theme_support() {
    36 
    37         // Add default posts and comments RSS feed links to head.
    38         add_theme_support( 'automatic-feed-links' );
    39 
    40         // Custom background color.
    41         add_theme_support(
    42             'custom-background',
    43             array(
    44                 'default-color' => 'f5efe0',
    45             )
    46         );
    47 
    48         // Set content-width.
    49         global $content_width;
    50         if ( ! isset( $content_width ) ) {
    51             $content_width = 580;
    52         }
    53 
    54         /*
    55          * Enable support for Post Thumbnails on posts and pages.
    56          *
    57          * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
    58          */
    59         add_theme_support( 'post-thumbnails' );
    60 
    61         // Set post thumbnail size.
    62         set_post_thumbnail_size( 1200, 9999 );
    63 
    64         // Add custom image sizes.
    65         add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );
    66 
    67         // Custom logo.
    68         $logo_id     = get_theme_mod( 'custom_logo' );
    69         $logo_width  = 120;
    70         $logo_height = 90;
    71 
    72         // If the retina setting is active, double the recommended width and height.
    73         if ( get_theme_mod( 'twentytwenty_retina_logo', false ) ) {
    74             $logo_width  = floor( $logo_width * 2 );
    75             $logo_height = floor( $logo_height * 2 );
    76         }
    77 
    78         add_theme_support(
    79             'custom-logo',
    80             array(
    81                 'height'      => $logo_height,
    82                 'width'       => $logo_width,
    83                 'flex-height' => true,
    84                 'flex-width'  => true,
    85                 'header-text' => array( 'site-title', 'site-description' ),
    86             )
    87         );
    88 
    89         /*
    90          * Let WordPress manage the document title.
    91          * By adding theme support, we declare that this theme does not use a
    92          * hard-coded <title> tag in the document head, and expect WordPress to
    93          * provide it for us.
    94          */
    95         add_theme_support( 'title-tag' );
    96 
    97         /*
    98          * Switch default core markup for search form, comment form, and comments
    99          * to output valid HTML5.
    100          */
    101         add_theme_support(
    102             'html5',
    103             array(
    104                 'search-form',
    105                 'comment-form',
    106                 'comment-list',
    107                 'gallery',
    108                 'caption',
    109                 'script',
    110                 'style',
    111             )
    112         );
    113 
    114         /*
    115          * Make theme available for translation.
    116          * Translations can be filed in the /languages/ directory.
    117          * If you're building a theme based on Twenty Nineteen, use a find and replace
    118          * to change 'twentynineteen' to the name of your theme in all the template files.
    119          */
    120         load_theme_textdomain( 'twentytwenty' );
    121 
    122         // Add support for full and wide align images.
    123         add_theme_support( 'align-wide' );
    124 
    125         // Adds starter content to highlight the theme on fresh sites.
    126         add_theme_support( 'starter-content', twentytwenty_get_starter_content() );
    127 
    128         // Add theme support for selective refresh for widgets.
    129         add_theme_support( 'customize-selective-refresh-widgets' );
    130 
    131         /*
    132          * Adds `async` and `defer` support for scripts registered or enqueued
    133          * by the theme.
    134          */
    135         $loader = new TwentyTwenty_Script_Loader();
    136         add_filter( 'script_loader_tag', [ $loader, 'filter_script_loader_tag' ], 10, 2 );
    137 
    138     }
    139 
    140     add_action( 'after_setup_theme', 'twentytwenty_theme_support' );
    141 
    142 }
     58    add_theme_support( 'post-thumbnails' );
     59
     60    // Set post thumbnail size.
     61    set_post_thumbnail_size( 1200, 9999 );
     62
     63    // Add custom image sizes.
     64    add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );
     65
     66    // Custom logo.
     67    $logo_id     = get_theme_mod( 'custom_logo' );
     68    $logo_width  = 120;
     69    $logo_height = 90;
     70
     71    // If the retina setting is active, double the recommended width and height.
     72    if ( get_theme_mod( 'twentytwenty_retina_logo', false ) ) {
     73        $logo_width  = floor( $logo_width * 2 );
     74        $logo_height = floor( $logo_height * 2 );
     75    }
     76
     77    add_theme_support(
     78        'custom-logo',
     79        array(
     80            'height'      => $logo_height,
     81            'width'       => $logo_width,
     82            'flex-height' => true,
     83            'flex-width'  => true,
     84            'header-text' => array( 'site-title', 'site-description' ),
     85        )
     86    );
     87
     88    /*
     89     * Let WordPress manage the document title.
     90     * By adding theme support, we declare that this theme does not use a
     91     * hard-coded <title> tag in the document head, and expect WordPress to
     92     * provide it for us.
     93     */
     94    add_theme_support( 'title-tag' );
     95
     96    /*
     97     * Switch default core markup for search form, comment form, and comments
     98     * to output valid HTML5.
     99     */
     100    add_theme_support(
     101        'html5',
     102        array(
     103            'search-form',
     104            'comment-form',
     105            'comment-list',
     106            'gallery',
     107            'caption',
     108            'script',
     109            'style',
     110        )
     111    );
     112
     113    /*
     114     * Make theme available for translation.
     115     * Translations can be filed in the /languages/ directory.
     116     * If you're building a theme based on Twenty Twenty, use a find and replace
     117     * to change 'twentytwenty' to the name of your theme in all the template files.
     118     */
     119    load_theme_textdomain( 'twentytwenty' );
     120
     121    // Add support for full and wide align images.
     122    add_theme_support( 'align-wide' );
     123
     124    // Adds starter content to highlight the theme on fresh sites.
     125    add_theme_support( 'starter-content', twentytwenty_get_starter_content() );
     126
     127    // Add theme support for selective refresh for widgets.
     128    add_theme_support( 'customize-selective-refresh-widgets' );
     129
     130    /*
     131     * Adds `async` and `defer` support for scripts registered or enqueued
     132     * by the theme.
     133     */
     134    $loader = new TwentyTwenty_Script_Loader();
     135    add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
     136
     137}
     138
     139add_action( 'after_setup_theme', 'twentytwenty_theme_support' );
    143140
    144141/**
     
    173170require get_template_directory() . '/inc/starter-content.php';
    174171
    175 if ( ! function_exists( 'twentytwenty_register_styles' ) ) {
     172/**
     173 * Register and Enqueue Styles.
     174 */
     175function twentytwenty_register_styles() {
     176
     177    $theme_version    = wp_get_theme()->get( 'Version' );
     178    $css_dependencies = array();
     179
    176180    /**
    177      * Register and Enqueue Styles.
    178      */
    179     function twentytwenty_register_styles() {
    180 
    181         $theme_version    = wp_get_theme()->get( 'Version' );
    182         $css_dependencies = array();
    183 
    184         // By default, only load the Font Awesome fonts if the social menu is in use.
    185         $load_font_awesome = apply_filters( 'twentytwenty_load_font_awesome', has_nav_menu( 'social' ) );
    186 
    187         if ( $load_font_awesome ) {
    188             wp_register_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.css', false, '5.10.2', 'all' );
    189             $css_dependencies[] = 'font-awesome';
    190         }
    191 
    192         wp_enqueue_style( 'twentytwenty-style', get_template_directory_uri() . '/style.css', $css_dependencies, $theme_version );
    193         wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );
    194 
    195         // Add output of Customizer settings as inline style.
    196         wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );
    197 
    198     }
    199 
    200     add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' );
    201 
    202 }
    203 
    204 if ( ! function_exists( 'twentytwenty_register_scripts' ) ) {
    205     /**
    206      * Register and Enqueue Scripts.
    207      */
    208     function twentytwenty_register_scripts() {
    209 
    210         $theme_version = wp_get_theme()->get( 'Version' );
    211 
    212         if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    213             wp_enqueue_script( 'comment-reply' );
    214         }
    215 
    216         wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false );
    217         wp_script_add_data( 'twentytwenty-js', 'async', true );
    218 
    219     }
    220 
    221     add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
    222 
    223 }
    224 
    225 if ( ! function_exists( 'twentytwenty_menus' ) ) {
    226     /**
    227      * Register navigation menus uses wp_nav_menu in five places.
    228      */
    229     function twentytwenty_menus() {
    230 
    231         $locations = array(
    232             'primary'  => __( 'Desktop Horizontal Menu', 'twentytwenty' ),
    233             'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ),
    234             'mobile'   => __( 'Mobile Menu', 'twentytwenty' ),
    235             'footer'   => __( 'Footer Menu', 'twentytwenty' ),
    236             'social'   => __( 'Social Menu', 'twentytwenty' ),
    237         );
    238 
    239         register_nav_menus( $locations );
    240     }
    241 
    242     add_action( 'init', 'twentytwenty_menus' );
    243 
    244 }
     181    * Filter to load, unload Font Awesome CSS
     182    *
     183    * By default, only load the Font Awesome fonts if the social menu is in use or
     184    * using filter Font Awesome css be loaded
     185    *
     186    * @since 1.0.0
     187    *
     188    * @param bool Whether to load font awesome, Default false.
     189    */
     190    $load_font_awesome = apply_filters( 'twentytwenty_load_font_awesome', has_nav_menu( 'social' ) );
     191
     192    if ( $load_font_awesome ) {
     193        wp_register_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.css', false, '5.10.2', 'all' );
     194        $css_dependencies[] = 'font-awesome';
     195    }
     196
     197    wp_enqueue_style( 'twentytwenty-style', get_template_directory_uri() . '/style.css', $css_dependencies, $theme_version );
     198    wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );
     199
     200    // Add output of Customizer settings as inline style.
     201    wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );
     202
     203    // Add print CSS.
     204    wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '/print.css', null, $theme_version, 'print' );
     205
     206}
     207
     208add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' );
     209
     210/**
     211 * Register and Enqueue Scripts.
     212 */
     213function twentytwenty_register_scripts() {
     214
     215    $theme_version = wp_get_theme()->get( 'Version' );
     216
     217    if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
     218        wp_enqueue_script( 'comment-reply' );
     219    }
     220
     221    wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false );
     222    wp_script_add_data( 'twentytwenty-js', 'async', true );
     223
     224}
     225
     226add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
     227
     228/**
     229 * Register navigation menus uses wp_nav_menu in five places.
     230 */
     231function twentytwenty_menus() {
     232
     233    $locations = array(
     234        'primary'  => __( 'Desktop Horizontal Menu', 'twentytwenty' ),
     235        'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ),
     236        'mobile'   => __( 'Mobile Menu', 'twentytwenty' ),
     237        'footer'   => __( 'Footer Menu', 'twentytwenty' ),
     238        'social'   => __( 'Social Menu', 'twentytwenty' ),
     239    );
     240
     241    register_nav_menus( $locations );
     242}
     243
     244add_action( 'init', 'twentytwenty_menus' );
    245245
    246246/**
     
    299299}
    300300
    301 if ( ! function_exists( 'twentytwenty_skip_link' ) ) {
     301/**
     302 * Include a skip to content link at the top of the page so that users can bypass the menu.
     303 */
     304function twentytwenty_skip_link() {
     305    echo '<a class="skip-link screen-reader-text" href="#site-content">' . __( 'Skip to the content', 'twentytwenty' ) . '</a>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations
     306}
     307
     308add_action( 'wp_body_open', 'twentytwenty_skip_link', 5 );
     309
     310/**
     311 * Register widget areas.
     312 *
     313 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
     314 */
     315function twentytwenty_sidebar_registration() {
     316
     317    // Arguments used in all register_sidebar() calls.
     318    $shared_args = array(
     319        'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
     320        'after_title'   => '</h2>',
     321        'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
     322        'after_widget'  => '</div></div>',
     323    );
     324
     325    // Footer #1.
     326    register_sidebar(
     327        array_merge(
     328            $shared_args,
     329            array(
     330                'name'        => __( 'Footer #1', 'twentytwenty' ),
     331                'id'          => 'sidebar-1',
     332                'description' => __( 'Widgets in this area will be displayed in the first column in the footer.', 'twentytwenty' ),
     333            )
     334        )
     335    );
     336
     337    // Footer #2.
     338    register_sidebar(
     339        array_merge(
     340            $shared_args,
     341            array(
     342                'name'        => __( 'Footer #2', 'twentytwenty' ),
     343                'id'          => 'sidebar-2',
     344                'description' => __( 'Widgets in this area will be displayed in the second column in the footer.', 'twentytwenty' ),
     345            )
     346        )
     347    );
     348
     349}
     350
     351add_action( 'widgets_init', 'twentytwenty_sidebar_registration' );
     352
     353/**
     354 * Enqueue supplemental block editor styles.
     355 */
     356function twentytwenty_block_editor_styles() {
     357
     358    $css_dependencies = array();
     359
     360    // Enqueue the editor styles.
     361    wp_enqueue_style( 'twentytwenty-block-editor-styles', get_theme_file_uri( '/assets/css/editor-style-block.css' ), $css_dependencies, wp_get_theme()->get( 'Version' ), 'all' );
     362    wp_style_add_data( 'twentytwenty-block-editor-styles', 'rtl', 'replace' );
     363
     364    // Add inline style from the Customizer.
     365    wp_add_inline_style( 'twentytwenty-block-editor-styles', twentytwenty_get_customizer_css( 'block-editor' ) );
     366
     367    // Enqueue the editor script.
     368    wp_enqueue_script( 'twentytwenty-block-editor-script', get_theme_file_uri( '/assets/js/editor-script-block.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true );
     369}
     370
     371add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 );
     372
     373/**
     374 * Enqueue classic editor styles.
     375 */
     376function twentytwenty_classic_editor_styles() {
     377
     378    $classic_editor_styles = array(
     379        '/assets/css/editor-style-classic.css',
     380    );
     381
     382    add_editor_style( $classic_editor_styles );
     383
     384}
     385
     386add_action( 'init', 'twentytwenty_classic_editor_styles' );
     387
     388/**
     389 * Output Customizer Settings in the Classic Editor.
     390 * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
     391 *
     392 * @param array $mce_init TinyMCE styles.
     393 */
     394function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) {
     395
     396    $styles = twentytwenty_get_customizer_css( 'classic-editor' );
     397
     398    if ( ! isset( $mce_init['content_style'] ) ) {
     399        $mce_init['content_style'] = $styles . ' ';
     400    } else {
     401        $mce_init['content_style'] .= ' ' . $styles . ' ';
     402    }
     403
     404    return $mce_init;
     405
     406}
     407
     408add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_customizer_styles' );
     409
     410/**
     411 * Block Editor Settings.
     412 * Add custom colors and font sizes to the block editor.
     413 */
     414function twentytwenty_block_editor_settings() {
     415
     416    // Block Editor Palette.
     417    $editor_color_palette = array(
     418        array(
     419            'name'  => esc_html__( 'Accent Color', 'twentytwenty' ),
     420            'slug'  => 'accent',
     421            'color' => twentytwenty_get_color_for_area( 'content', 'accent' ),
     422        ),
     423        array(
     424            'name'  => esc_html__( 'Secondary', 'twentytwenty' ),
     425            'slug'  => 'secondary',
     426            'color' => twentytwenty_get_color_for_area( 'content', 'secondary' ),
     427        ),
     428        array(
     429            'name'  => esc_html__( 'Subtle Background', 'twentytwenty' ),
     430            'slug'  => 'subtle-background',
     431            'color' => twentytwenty_get_color_for_area( 'content', 'borders' ),
     432        ),
     433    );
     434
     435    // Add the background option.
     436    $background_color = get_theme_mod( 'background_color' );
     437    if ( ! $background_color ) {
     438        $background_color_arr = get_theme_support( 'custom-background' );
     439        $background_color     = $background_color_arr[0]['default-color'];
     440    }
     441    $editor_color_palette[] = array(
     442        'name'  => __( 'Background Color', 'twentytwenty' ),
     443        'slug'  => 'background',
     444        'color' => '#' . $background_color,
     445    );
     446
     447    // If we have accent colors, add them to the block editor palette.
     448    if ( $editor_color_palette ) {
     449        add_theme_support( 'editor-color-palette', $editor_color_palette );
     450    }
     451
     452    // Gutenberg Font Sizes.
     453    add_theme_support(
     454        'editor-font-sizes',
     455        array(
     456            array(
     457                'name'      => _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
     458                'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
     459                'size'      => 16,
     460                'slug'      => 'small',
     461            ),
     462            array(
     463                'name'      => _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
     464                'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
     465                'size'      => 18,
     466                'slug'      => 'regular',
     467            ),
     468            array(
     469                'name'      => _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
     470                'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
     471                'size'      => 24,
     472                'slug'      => 'large',
     473            ),
     474            array(
     475                'name'      => _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
     476                'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
     477                'size'      => 32,
     478                'slug'      => 'larger',
     479            ),
     480        )
     481    );
     482
     483    // If we have a dark background color then add support for dark editor style.
     484    // We can determine if the background color is dark by checking if the text-color is white.
     485    if ( '#ffffff' === strtolower( twentytwenty_get_color_for_area( 'content', 'text' ) ) ) {
     486        add_theme_support( 'dark-editor-style' );
     487    }
     488
     489}
     490
     491add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
     492
     493/**
     494 * Read More Link
     495 * Overwrite default (more ...) tag
     496 */
     497function twentytwenty_read_more_tag() {
     498    return sprintf(
     499        '<a href="%1$s" class="more-link faux-button">%2$s <span class="screen-reader-text">"%3$s"</span></a>',
     500        esc_url( get_permalink( get_the_ID() ) ),
     501        esc_html__( 'Continue reading', 'twentytwenty' ),
     502        get_the_title( get_the_ID() )
     503    );
     504}
     505add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );
     506
     507/**
     508 * Enqueues scripts for customizer controls & settings.
     509 *
     510 * @since 1.0.0
     511 *
     512 * @return void
     513 */
     514function twentytwenty_customize_controls_enqueue_scripts() {
     515    $theme_version = wp_get_theme()->get( 'Version' );
     516
     517    // Add script for color calculations.
     518    wp_enqueue_script( 'twentytwenty-color-calculations', get_template_directory_uri() . '/assets/js/color-calculations.js', array( 'wp-color-picker' ), $theme_version, false );
     519
     520    // Add script for controls.
     521    wp_enqueue_script( 'twentytwenty-customize-controls', get_template_directory_uri() . '/assets/js/customize-controls.js', array( 'twentytwenty-color-calculations', 'customize-controls', 'underscore', 'jquery' ), $theme_version, false );
     522    wp_localize_script( 'twentytwenty-customize-controls', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
     523}
     524
     525add_action( 'customize_controls_enqueue_scripts', 'twentytwenty_customize_controls_enqueue_scripts' );
     526
     527/**
     528 * Enqueue scripts for the customizer preview.
     529 *
     530 * @since 1.0.0
     531 *
     532 * @return void
     533 */
     534function twentytwenty_customize_preview_init() {
     535    $theme_version = wp_get_theme()->get( 'Version' );
     536
     537    wp_enqueue_script( 'twentytwenty-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview', 'customize-selective-refresh', 'jquery' ), $theme_version, true );
     538    wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
     539    wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyPreviewEls', twentytwenty_get_elements_array() );
     540
     541    wp_add_inline_script(
     542        'twentytwenty-customize-preview',
     543        sprintf(
     544            'wp.customize.selectiveRefresh.partialConstructor[ %1$s ].prototype.attrs = %2$s;',
     545            wp_json_encode( 'cover_opacity' ),
     546            wp_json_encode( twentytwenty_customize_opacity_range() )
     547        )
     548    );
     549}
     550
     551add_action( 'customize_preview_init', 'twentytwenty_customize_preview_init' );
     552
     553/**
     554 * Get accessible color for an area.
     555 *
     556 * @since 1.0.0
     557 *
     558 * @param string $area The area we want to get the colors for.
     559 * @param string $context Can be 'text' or 'accent'.
     560 * @return string Returns a HEX color.
     561 */
     562function twentytwenty_get_color_for_area( $area = 'content', $context = 'text' ) {
     563
     564    // Get the value from the theme-mod.
     565    $settings = get_theme_mod(
     566        'accent_accessible_colors',
     567        array(
     568            'content'       => array(
     569                'text'      => '#000000',
     570                'accent'    => '#cd2653',
     571                'secondary' => '#6d6d6d',
     572                'borders'   => '#dcd7ca',
     573            ),
     574            'header-footer' => array(
     575                'text'      => '#000000',
     576                'accent'    => '#cd2653',
     577                'secondary' => '#6d6d6d',
     578                'borders'   => '#dcd7ca',
     579            ),
     580        )
     581    );
     582
     583    // If we have a value return it.
     584    if ( isset( $settings[ $area ] ) && isset( $settings[ $area ][ $context ] ) ) {
     585        return $settings[ $area ][ $context ];
     586    }
     587
     588    // Return false if the option doesn't exist.
     589    return false;
     590}
     591
     592/**
     593 * Returns an array of variables for the customizer preview.
     594 *
     595 * @since 1.0.0
     596 *
     597 * @return array
     598 */
     599function twentytwenty_get_customizer_color_vars() {
     600    $colors = array(
     601        'content'       => array(
     602            'setting' => 'background_color',
     603        ),
     604        'header-footer' => array(
     605            'setting' => 'header_footer_background_color',
     606        ),
     607    );
     608    return $colors;
     609}
     610
     611/**
     612 * Get an array of elements.
     613 *
     614 * @since 1.0
     615 *
     616 * @return array
     617 */
     618function twentytwenty_get_elements_array() {
     619
     620    // The array is formatted like this:
     621    // [key-in-saved-setting][sub-key-in-setting][css-property] = [elements].
     622    $elements = array(
     623        'content'       => array(
     624            'accent'     => array(
     625                'color'            => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', '.has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ),
     626                'border-color'     => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ),
     627                'background'       => array( 'button:not(.toggle)', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]' ),
     628                'background-color' => array( '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', '.has-accent-background-color', '.comment-reply-link' ),
     629                'fill'             => array( '.fill-children-accent', '.fill-children-accent *' ),
     630            ),
     631            'background' => array(
     632                'color'      => array( 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-button__link:active', '.wp-block-button__link:focus', '.wp-block-button__link:visited', '.wp-block-button__link:hover', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.comment-reply-link' ),
     633                'background' => array(),
     634            ),
     635            'text'       => array(
     636                'color' => array( 'body', '.entry-title a' ),
     637            ),
     638            'secondary'  => array(
     639                'color' => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator' ),
     640            ),
     641            'borders'    => array(
     642                'border-color'        => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ),
     643                'background'          => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)' ),
     644                'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
     645                'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
     646            ),
     647        ),
     648        'header-footer' => array(
     649            'accent'     => array(
     650                'color'      => array( 'body:not(.overlay-header) .primary-menu > li > a', 'body:not(.overlay-header) .primary-menu > li > .icon', '.modal-menu a', '.footer-menu a, .footer-widgets a', '#site-footer .wp-block-button.is-style-outline', '.wp-block-pullquote:before', '.singular:not(.overlay-header) .entry-header a', '.archive-header a', '.header-footer-group .color-accent', '.header-footer-group .color-accent-hover:hover' ),
     651                'background' => array( '.social-icons a', '#site-footer button:not(.toggle)', '#site-footer .button', '#site-footer .faux-button', '#site-footer .wp-block-button__link', '#site-footer .wp-block-file__button', '#site-footer input[type="button"]', '#site-footer input[type="reset"]', '#site-footer input[type="submit"]' ),
     652            ),
     653            'background' => array(
     654                'color'      => array( '.social-icons a', '.overlay-header .header-inner', '.primary-menu ul', '.header-footer-group button', '.header-footer-group .button', '.header-footer-group .faux-button', '.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link', '.header-footer-group .wp-block-file__button', '.header-footer-group input[type="button"]', '.header-footer-group input[type="reset"]', '.header-footer-group input[type="submit"]' ),
     655                'background' => array( '#site-header', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal', '.menu-modal-inner', '.search-modal-inner', '.archive-header', '.singular .entry-header', '.singular .featured-media:before', '.wp-block-pullquote:before' ),
     656            ),
     657            'text'       => array(
     658                'color'               => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ),
     659                'background'          => array( 'body:not(.overlay-header) .primary-menu ul' ),
     660                'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ),
     661                'border-left-color'   => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ),
     662            ),
     663            'secondary'  => array(
     664                'color' => array( '.site-description', 'body:not(.overlay-header) .toggle-inner .toggle-text', '.widget .post-date', '.widget .rss-date', '.widget_archive li', '.widget_categories li', '.widget cite', '.widget_pages li', '.widget_meta li', '.widget_nav_menu li', '.powered-by-wordpress', '.to-the-top', '.singular .entry-header .post-meta', '.singular:not(.overlay-header) .entry-header .post-meta a' ),
     665            ),
     666            'borders'    => array(
     667                'border-color' => array( '.header-footer-group pre', '.header-footer-group fieldset', '.header-footer-group input', '.header-footer-group textarea', '.header-footer-group table', '.header-footer-group table *', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal nav *', '.footer-widgets-outer-wrapper', '.footer-top' ),
     668                'background'   => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ),
     669            ),
     670        ),
     671    );
    302672
    303673    /**
    304      * Include a skip to content link at the top of the page so that users can bypass the menu.
    305      */
    306     function twentytwenty_skip_link() {
    307         echo '<a class="skip-link faux-button screen-reader-text" href="#site-content">' . __( 'Skip to the content', 'twentytwenty' ) . '</a>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations
    308     }
    309 
    310     add_action( 'wp_body_open', 'twentytwenty_skip_link', 5 );
    311 
    312 }
    313 
    314 if ( ! function_exists( 'twentytwenty_sidebar_registration' ) ) {
    315 
    316     /**
    317      * Register widget areas.
    318      *
    319      * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
    320      */
    321     function twentytwenty_sidebar_registration() {
    322 
    323         // Arguments used in all register_sidebar() calls.
    324         $shared_args = array(
    325             'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
    326             'after_title'   => '</h2>',
    327             'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
    328             'after_widget'  => '</div></div>',
    329         );
    330 
    331         // Footer #1.
    332         register_sidebar(
    333             array_merge(
    334                 $shared_args,
    335                 array(
    336                     'name'        => __( 'Footer #1', 'twentytwenty' ),
    337                     'id'          => 'sidebar-1',
    338                     'description' => __( 'Widgets in this area will be displayed in the first column in the footer.', 'twentytwenty' ),
    339                 )
    340             )
    341         );
    342 
    343         // Footer #2.
    344         register_sidebar(
    345             array_merge(
    346                 $shared_args,
    347                 array(
    348                     'name'        => __( 'Footer #2', 'twentytwenty' ),
    349                     'id'          => 'sidebar-2',
    350                     'description' => __( 'Widgets in this area will be displayed in the second column in the footer.', 'twentytwenty' ),
    351                 )
    352             )
    353         );
    354 
    355     }
    356 
    357     add_action( 'widgets_init', 'twentytwenty_sidebar_registration' );
    358 
    359 }
    360 
    361 if ( ! function_exists( 'twentytwenty_block_editor_styles' ) ) {
    362 
    363     /**
    364      * Enqueue supplemental block editor styles.
    365      */
    366     function twentytwenty_block_editor_styles() {
    367 
    368         $css_dependencies = array();
    369 
    370         // Enqueue the editor styles.
    371         wp_enqueue_style( 'twentytwenty-block-editor-styles', get_theme_file_uri( '/assets/css/editor-style-block.css' ), $css_dependencies, wp_get_theme()->get( 'Version' ), 'all' );
    372         wp_style_add_data( 'twentytwenty-block-editor-styles', 'rtl', 'replace' );
    373 
    374         // Add inline style from the Customizer.
    375         wp_add_inline_style( 'twentytwenty-block-editor-styles', twentytwenty_get_customizer_css( 'block-editor' ) );
    376 
    377     }
    378 
    379     add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 );
    380 
    381 }
    382 
    383 if ( ! function_exists( 'twentytwenty_classic_editor_styles' ) ) {
    384 
    385     /**
    386      * Enqueue classic editor styles.
    387      */
    388     function twentytwenty_classic_editor_styles() {
    389 
    390         $classic_editor_styles = array(
    391             '/assets/css/editor-style-classic.css',
    392         );
    393 
    394         add_editor_style( $classic_editor_styles );
    395 
    396     }
    397 
    398     add_action( 'init', 'twentytwenty_classic_editor_styles' );
    399 
    400 }
    401 
    402 if ( ! function_exists( 'twentytwenty_add_classic_editor_customizer_styles' ) ) {
    403 
    404     /**
    405      * Output Customizer Settings in the Classic Editor.
    406      * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
    407      *
    408      * @param array $mce_init TinyMCE styles.
    409      */
    410     function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) {
    411 
    412         $styles = twentytwenty_get_customizer_css( 'classic-editor' );
    413 
    414         if ( ! isset( $mce_init['content_style'] ) ) {
    415             $mce_init['content_style'] = $styles . ' ';
    416         } else {
    417             $mce_init['content_style'] .= ' ' . $styles . ' ';
    418         }
    419 
    420         return $mce_init;
    421 
    422     }
    423 
    424     add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_customizer_styles' );
    425 
    426 }
    427 
    428 if ( ! function_exists( 'twentytwenty_block_editor_settings' ) ) {
    429 
    430     /**
    431      * Block Editor Settings.
    432      * Add custom colors and font sizes to the block editor.
    433      */
    434     function twentytwenty_block_editor_settings() {
    435 
    436         // Block Editor Palette.
    437         $editor_color_palette = array(
    438             array(
    439                 'name'  => esc_html__( 'Accent Color', 'twentytwenty' ),
    440                 'slug'  => 'accent',
    441                 'color' => twentytwenty_get_color_for_area( 'content', 'accent' ),
    442             ),
    443             array(
    444                 'name'  => esc_html__( 'Secondary', 'twentytwenty' ),
    445                 'slug'  => 'secondary',
    446                 'color' => twentytwenty_get_color_for_area( 'content', 'secondary' ),
    447             ),
    448             array(
    449                 'name'  => esc_html__( 'Subtle Background', 'twentytwenty' ),
    450                 'slug'  => 'subtle-background',
    451                 'color' => twentytwenty_get_color_for_area( 'content', 'borders' ),
    452             ),
    453         );
    454 
    455         // Get the color options.
    456         $accent_color_options = TwentyTwenty_Customize::get_color_options();
    457 
    458         // Loop over them and construct an array for the editor-color-palette.
    459         if ( $accent_color_options ) {
    460             foreach ( $accent_color_options as $color_option_name => $color_option ) {
    461                 $editor_color_palette[] = array(
    462                     'name'  => $color_option['label'],
    463                     'slug'  => $color_option['slug'],
    464                     'color' => get_theme_mod( $color_option_name, $color_option['default'] ),
    465                 );
    466             }
    467         }
    468 
    469         // Add the background option.
    470         $background_color = get_theme_mod( 'background_color' );
    471         if ( ! $background_color ) {
    472             $background_color_arr = get_theme_support( 'custom-background' );
    473             $background_color     = $background_color_arr[0]['default-color'];
    474         }
    475         $editor_color_palette[] = array(
    476             'name'  => __( 'Background Color', 'twentytwenty' ),
    477             'slug'  => 'background',
    478             'color' => '#' . $background_color,
    479         );
    480 
    481         // If we have accent colors, add them to the block editor palette.
    482         if ( $editor_color_palette ) {
    483             add_theme_support( 'editor-color-palette', $editor_color_palette );
    484         }
    485 
    486         // the block editor Font Sizes.
    487         add_theme_support(
    488             'editor-font-sizes',
    489             array(
    490                 array(
    491                     'name'      => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ),
    492                     'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'twentytwenty' ),
    493                     'size'      => 16,
    494                     'slug'      => 'small',
    495                 ),
    496                 array(
    497                     'name'      => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ),
    498                     'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ),
    499                     'size'      => 18,
    500                     'slug'      => 'regular',
    501                 ),
    502                 array(
    503                     'name'      => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ),
    504                     'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'twentytwenty' ),
    505                     'size'      => 24,
    506                     'slug'      => 'large',
    507                 ),
    508                 array(
    509                     'name'      => _x( 'Larger', 'Name of the larger font size in the block editor', 'twentytwenty' ),
    510                     'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'twentytwenty' ),
    511                     'size'      => 32,
    512                     'slug'      => 'larger',
    513                 ),
    514             )
    515         );
    516 
    517         // If we have a dark background color then add support for dark editor style.
    518         // We can determine if the background color is dark by checking if the text-color is white.
    519         if ( '#ffffff' === strtolower( twentytwenty_get_color_for_area( 'content', 'text' ) ) ) {
    520             add_theme_support( 'dark-editor-style' );
    521         }
    522 
    523     }
    524 
    525     add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
    526 
    527 }
    528 
    529 if ( ! function_exists( 'twentytwenty_read_more_tag' ) ) {
    530 
    531     /**
    532      * Read More Link
    533      * Overwrite default (more ...) tag
    534      */
    535     function twentytwenty_read_more_tag() {
    536         return sprintf(
    537             '<a href="%1$s" class="more-link faux-button">%2$s <span class="screen-reader-text">"%3$s"</span></a>',
    538             esc_url( get_permalink( get_the_ID() ) ),
    539             esc_html__( 'Continue reading', 'twentytwenty' ),
    540             get_the_title( get_the_ID() )
    541         );
    542     }
    543     add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );
    544 
    545 }
    546 
    547 if ( ! function_exists( 'twentytwenty_customize_controls_enqueue_scripts' ) ) {
    548     /**
    549      * Enqueues scripts for customizer controls & settings.
    550      *
    551      * @since 1.0.0
    552      *
    553      * @return void
    554      */
    555     function twentytwenty_customize_controls_enqueue_scripts() {
    556         $theme_version = wp_get_theme()->get( 'Version' );
    557 
    558         // Add script for color calculations.
    559         wp_enqueue_script( 'twentytwenty-color-calculations', get_template_directory_uri() . '/assets/js/color-calculations.js', array( 'wp-color-picker' ), $theme_version, false );
    560 
    561         // Add script for controls.
    562         wp_enqueue_script( 'twentytwenty-customize-controls', get_template_directory_uri() . '/assets/js/customize-controls.js', array( 'twentytwenty-color-calculations', 'customize-controls', 'underscore', 'jquery' ), $theme_version, false );
    563         wp_localize_script( 'twentytwenty-customize-controls', 'backgroundColors', twentytwenty_get_customizer_color_vars() );
    564     }
    565 
    566     add_action( 'customize_controls_enqueue_scripts', 'twentytwenty_customize_controls_enqueue_scripts' );
    567 }
    568 
    569 if ( ! function_exists( 'twentytwenty_customize_preview_init' ) ) {
    570     /**
    571      * Enqueue scripts for the customizer preview.
    572      *
    573      * @since 1.0.0
    574      *
    575      * @return void
    576      */
    577     function twentytwenty_customize_preview_init() {
    578         $theme_version = wp_get_theme()->get( 'Version' );
    579 
    580         wp_enqueue_script( 'twentytwenty-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview', 'jquery' ), $theme_version, true );
    581         wp_localize_script( 'twentytwenty-customize-preview', 'backgroundColors', twentytwenty_get_customizer_color_vars() );
    582         wp_localize_script( 'twentytwenty-customize-preview', 'previewElements', twentytwenty_get_elements_array() );
    583     }
    584 
    585     add_action( 'customize_preview_init', 'twentytwenty_customize_preview_init' );
    586 }
    587 
    588 if ( ! function_exists( 'twentytwenty_get_color_for_area' ) ) {
    589     /**
    590      * Get accessible color for an area.
    591      *
    592      * @since 1.0.0
    593      *
    594      * @param string $area The area we want to get the colors for.
    595      * @param string $context Can be 'text' or 'accent'.
    596      * @return string Returns a HEX color.
    597      */
    598     function twentytwenty_get_color_for_area( $area = 'content', $context = 'text' ) {
    599 
    600         // Get the value from the theme-mod.
    601         $settings = get_theme_mod(
    602             'accent_accessible_colors',
    603             array(
    604                 'content'       => array(
    605                     'text'      => '#000000',
    606                     'accent'    => '#cd2653',
    607                     'secondary' => '#6d6d6d',
    608                     'borders'   => '#dcd7ca',
    609                 ),
    610                 'header-footer' => array(
    611                     'text'      => '#000000',
    612                     'accent'    => '#cd2653',
    613                     'secondary' => '#6d6d6d',
    614                     'borders'   => '#dcd7ca',
    615                 ),
    616             )
    617         );
    618 
    619         // If we have a value return it.
    620         if ( isset( $settings[ $area ] ) && isset( $settings[ $area ][ $context ] ) ) {
    621             return $settings[ $area ][ $context ];
    622         }
    623 
    624         // Return false if the option doesn't exist.
    625         return false;
    626     }
    627 }
    628 
    629 if ( ! function_exists( 'twentytwenty_get_customizer_color_vars' ) ) {
    630 
    631     /**
    632      * Returns an array of variables for the customizer preview.
    633      *
    634      * @since 1.0.0
    635      *
    636      * @return array
    637      */
    638     function twentytwenty_get_customizer_color_vars() {
    639         $colors = array(
    640             'content'       => array(
    641                 'setting' => 'background_color',
    642             ),
    643             'header-footer' => array(
    644                 'setting' => 'header_footer_background_color',
    645             ),
    646         );
    647         return $colors;
    648     }
    649 }
    650 
    651 if ( ! function_exists( 'twentytwenty_get_elements_array' ) ) {
    652 
    653     /**
    654      * Get an array of elements.
    655      *
    656      * @since 1.0
    657      *
    658      * @return array
    659      */
    660     function twentytwenty_get_elements_array() {
    661 
    662         // The array is formatted like this:
    663         // [key-in-saved-setting][sub-key-in-setting][css-property] = [elements].
    664         $elements = array(
    665             'content'       => array(
    666                 'accent'     => array(
    667                     'color'            => array( '.color-accent', '.color-accent-hover:hover', '.has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ),
    668                     'border-color'     => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover' ),
    669                     'background'       => array( 'button:not(.toggle)', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]' ),
    670                     'background-color' => array( '.bg-accent', '.bg-accent-hover:hover', '.has-accent-background-color', '.comment-reply-link', '.edit-comment-link' ),
    671                     'fill'             => array( '.fill-children-accent', '.fill-children-accent *' ),
    672                 ),
    673                 'background' => array(
    674                     'color'      => array( 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.comment-reply-link', '.edit-comment-link' ),
    675                     'background' => array(),
    676                 ),
    677                 'text'       => array(
    678                     'color' => array( 'body', '.entry-title a' ),
    679                 ),
    680                 'secondary'  => array(
    681                     'color' => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots' ),
    682                 ),
    683                 'borders'    => array(
    684                     'border-color'        => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *' ),
    685                     'background'          => array( 'caption', 'code', 'code', 'kbd', 'samp' ),
    686                     'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
    687                     'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
    688                     'color'               => array( 'hr:not(.is-style-dots):not(.reset-hr)' ),
    689                 ),
    690             ),
    691             'header-footer' => array(
    692                 'accent'     => array(
    693                     'color'      => array( 'body:not(.overlay-header) .primary-menu > li > a', 'body:not(.overlay-header) .primary-menu > li > .icon', '.modal-menu a', '.footer-menu a, .footer-widgets a', '#site-footer .wp-block-button.is-style-outline', '.wp-block-pullquote:before', '.singular .entry-header a', '.archive-header a', '.header-footer-group .color-accent', '.header-footer-group .color-accent-hover:hover' ),
    694                     'background' => array( '.social-icons a', '#site-footer button:not(.toggle)', '#site-footer .button', '#site-footer .faux-button', '#site-footer .wp-block-button__link', '#site-footer .wp-block-file__button', '#site-footer input[type="button"]', '#site-footer input[type="reset"]', '#site-footer input[type="submit"]' ),
    695                 ),
    696                 'background' => array(
    697                     'color'      => array( '.social-icons a', '.overlay-header:not(.showing-menu-modal) .header-inner', '.primary-menu ul', '.header-footer-group button', '.header-footer-group .button', '.header-footer-group .faux-button', '.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link', '.header-footer-group .wp-block-file__button', '.header-footer-group input[type="button"]', '.header-footer-group input[type="reset"]', '.header-footer-group input[type="submit"]' ),
    698                     'background' => array( '#site-header', '#site-footer', '.menu-modal', '.menu-modal-inner', '.search-modal-inner', '.archive-header', '.singular .entry-header', '.singular .featured-media:before', '.wp-block-pullquote:before' ),
    699                 ),
    700                 'text'       => array(
    701                     'color'               => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ),
    702                     'background'          => array( 'body:not(.overlay-header) .primary-menu ul' ),
    703                     'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ),
    704                     'border-left-color'   => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ),
    705                 ),
    706                 'secondary'  => array(
    707                     'color' => array( '.site-description', '.toggle-inner .toggle-text', '.widget .post-date', '.widget .rss-date', '.widget_archive li', '.widget_categories li', '.widget cite', '.widget_pages li', '.widget_meta li', '.widget_nav_menu li', '.powered-by-wordpress', '.to-the-top', '.singular .entry-header .post-meta', '.singular .entry-header .post-meta a' ),
    708                 ),
    709                 'borders'    => array(
    710                     'border-color'        => array( '.header-footer-group pre', '.header-footer-group fieldset', '.header-footer-group input', '.header-footer-group textarea', '.header-footer-group table', '.header-footer-group table *', '.menu-modal nav *', '.footer-widgets-outer-wrapper', '.footer-top' ),
    711                     'background'          => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ),
    712                     'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
    713                     'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
    714                 ),
    715             ),
    716         );
    717 
    718         return apply_filters( 'twentytwenty_get_elements_array', $elements );
    719     }
    720 }
     674    * Filters Twenty Twenty theme elements
     675    *
     676    * @since 1.0.0
     677    *
     678    * @param array Array of elements
     679    */
     680    return apply_filters( 'twentytwenty_get_elements_array', $elements );
     681}
  • trunk/src/wp-content/themes/twentytwenty/header.php

    r46271 r46357  
    1717    <head>
    1818
    19         <meta http-equiv="content-type" content="<?php bloginfo( 'html_type' ); ?>" charset="<?php bloginfo( 'charset' ); ?>" />
     19        <meta charset="<?php bloginfo( 'charset' ); ?>">
    2020        <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    2121
     
    4949                        <button class="toggle search-toggle mobile-search-toggle" data-toggle-target=".search-modal" data-toggle-screen-lock="true" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
    5050                            <div class="toggle-inner">
    51                                 <?php twentytwenty_the_theme_svg( 'search' ); ?>
     51                                <div class="toggle-icon">
     52                                    <?php twentytwenty_the_theme_svg( 'search' ); ?>
     53                                </div>
    5254                                <span class="toggle-text"><?php _e( 'Search', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
    5355                            </div>
     
    7072                    <button class="toggle nav-toggle mobile-nav-toggle" data-toggle-target=".menu-modal" data-toggle-screen-lock="true" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle">
    7173                        <div class="toggle-inner">
    72                             <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
     74                            <div class="toggle-icon">
     75                                <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
     76                            </div>
    7377                            <span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
    7478                        </div>
     
    8387                        ?>
    8488
    85                         <div class="primary-menu-wrapper">
    86 
    87                             <nav aria-label="<?php esc_attr_e( 'Primary', 'twentytwenty' ); ?>">
     89                            <nav class="primary-menu-wrapper" aria-label="<?php esc_attr_e( 'Horizontal', 'twentytwenty' ); ?>" role="navigation">
    8890
    8991                                <ul class="primary-menu reset-list-style">
     
    116118                                </ul>
    117119
    118                             </nav><!-- .primary-menu -->
    119 
    120                         </div><!-- .primary-menu-wrapper -->
     120                            </nav><!-- .primary-menu-wrapper -->
    121121
    122122                        <?php
     
    146146                                <div class="toggle-inner">
    147147                                    <span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
    148                                     <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
     148                                    <div class="toggle-icon">
     149                                        <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
     150                                    </div>
    149151                                </div>
    150152                            </button><!-- .nav-toggle -->
  • trunk/src/wp-content/themes/twentytwenty/inc/custom-css.php

    r46271 r46357  
    2424        $return = '';
    2525
    26         if ( ! $value ) {
     26        /*
     27         * Bail early if we have no $selector elements or properties and $value.
     28         */
     29        if ( ! $value || ! $selector ) {
    2730
    2831            return;
     
    5356
    5457        // Get variables.
    55         $body            = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'text' ) );
    56         $body_default    = '#000000';
    57         $accent          = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'accent' ) );
    58         $accent_default  = '#cd2653';
     58        $body           = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'text' ) );
     59        $body_default   = '#000000';
     60        $accent         = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'accent' ) );
     61        $accent_default = '#cd2653';
     62        /**
     63         * Filters the CSS selectors targetting button component on frontend to apply common css
     64         *
     65         * @since 1.0.0
     66         *
     67         * @param string $string   The comma separated string of all CSS selectors targetting button component
     68         */
    5969        $buttons_targets = apply_filters( 'twentytwenty_buttons_targets_front_end', 'button, .button, .faux-button, .wp-block-button__link, .wp-block-file__button, input[type=\'button\'], input[type=\'reset\'], input[type=\'submit\']' );
    6070
     
    91101                foreach ( $props as $key => $definitions ) {
    92102                    foreach ( $definitions as $property => $elements ) {
     103                        /*
     104                         * If we don't have an elements array or it is empty
     105                         * then skip this itteration early;
     106                         */
     107                        if ( ! is_array( $elements ) || empty( $elements ) ) {
     108                            continue;
     109                        }
    93110                        $val = twentytwenty_get_color_for_area( $context, $key );
    94111                        if ( $val ) {
     
    100117
    101118            if ( $cover && $cover !== $cover_default ) {
     119                twentytwenty_generate_css( '.overlay-header .header-inner', 'color', $cover );
    102120                twentytwenty_generate_css( '.cover-header .entry-header *', 'color', $cover );
    103121            }
  • trunk/src/wp-content/themes/twentytwenty/inc/template-tags.php

    r46271 r46357  
    1616 */
    1717
    18 if ( ! function_exists( 'twentytwenty_site_logo' ) ) {
     18/**
     19 * Displays the site logo, either text or image.
     20 *
     21 * @param array   $args Arguments for displaying the site logo either as an image or text.
     22 * @param boolean $echo Echo or return the html.
     23 */
     24function twentytwenty_site_logo( $args = array(), $echo = true ) {
     25    $logo       = get_custom_logo();
     26    $site_title = get_bloginfo( 'name' );
     27    $contents   = '';
     28    $classname  = '';
     29
     30    $defaults = array(
     31        'logo'        => '%1$s<span class="screen-reader-text">%2$s</span>',
     32        'logo_class'  => 'site-logo',
     33        'title'       => '<a href="%1$s">%2$s</a>',
     34        'title_class' => 'site-title',
     35        'home_wrap'   => '<h1 class="%1$s">%2$s</h1>',
     36        'single_wrap' => '<div class="%1$s faux-heading">%2$s</div>',
     37        'condition'   => ( is_front_page() || is_home() ) && ! is_page(),
     38    );
     39
     40    $args = wp_parse_args( $args, $defaults );
     41
    1942    /**
    20      * Displays the site logo, either text or image.
    21      *
    22      * @param array   $args Arguments for displaying the site logo either as an image or text.
    23      * @param boolean $echo Echo or return the html.
     43     * Filters the arguments for `twentytwenty_site_logo()`.
     44     *
     45     * @param array  $args     Parsed arguments.
     46     * @param array  $defaults Function's default arguments.
    2447     */
    25     function twentytwenty_site_logo( $args = array(), $echo = true ) {
    26         $logo       = get_custom_logo();
    27         $site_title = get_bloginfo( 'name' );
    28         $contents   = '';
    29         $classname  = '';
    30 
    31         $defaults = array(
    32             'logo'        => '%1$s<span class="screen-reader-text">%2$s</span>',
    33             'logo_class'  => 'site-logo',
    34             'title'       => '<a href="%1$s">%2$s</a>',
    35             'title_class' => 'site-title',
    36             'home_wrap'   => '<h1 class="%1$s">%2$s</h1>',
    37             'single_wrap' => '<div class="%1$s faux-heading">%2$s</div>',
    38             'condition'   => is_front_page() || is_home(),
     48    $args = apply_filters( 'twentytwenty_site_logo_args', $args, $defaults );
     49
     50    if ( has_custom_logo() ) {
     51        $contents  = sprintf( $args['logo'], $logo, esc_html( $site_title ) );
     52        $classname = $args['logo_class'];
     53    } else {
     54        $contents  = sprintf( $args['title'], esc_url( get_home_url( null, '/' ) ), esc_html( $site_title ) );
     55        $classname = $args['title_class'];
     56    }
     57
     58    $wrap = $args['condition'] ? 'home_wrap' : 'single_wrap';
     59
     60    $html = sprintf( $args[ $wrap ], $classname, $contents );
     61
     62    /**
     63     * Filters the arguments for `twentytwenty_site_logo()`.
     64     *
     65     * @param string $html      Compiled html based on our arguments.
     66     * @param array  $args      Parsed arguments.
     67     * @param string $classname Class name based on current view, home or single.
     68     * @param string $contents  HTML for site title or logo.
     69     */
     70    $html = apply_filters( 'twentytwenty_site_logo', $html, $args, $classname, $contents );
     71
     72    if ( ! $echo ) {
     73        return $html;
     74    }
     75
     76    echo $html; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
     77
     78}
     79
     80/**
     81 * Displays the site description.
     82 *
     83 * @param boolean $echo Echo or return the html.
     84 */
     85function twentytwenty_site_description( $echo = true ) {
     86    $description = get_bloginfo( 'description' );
     87
     88    if ( ! $description ) {
     89        return;
     90    }
     91
     92    $wrapper = '<div class="site-description">%s</div><!-- .site-description -->';
     93
     94    $html = sprintf( $wrapper, esc_html( $description ) );
     95
     96    /**
     97     * Filters the html for the site description.
     98     *
     99     * @since 1.0.0
     100     *
     101     * @param string $html         The HTML to display.
     102     * @param string $description  Site description via `bloginfo()`.
     103     * @param string $wrapper      The format used in case you want to reuse it in a `sprintf()`.
     104     */
     105    $html = apply_filters( 'twentytwenty_site_description', $html, $description, $wrapper );
     106
     107    if ( ! $echo ) {
     108        return $html;
     109    }
     110
     111    echo $html; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
     112}
     113
     114/**
     115 * Comments
     116 */
     117/**
     118 * Check if the specified comment is written by the author of the post commented on.
     119 *
     120 * @param object $comment Comment data.
     121 */
     122function twentytwenty_is_comment_by_post_author( $comment = null ) {
     123
     124    if ( is_object( $comment ) && $comment->user_id > 0 ) {
     125
     126        $user = get_userdata( $comment->user_id );
     127        $post = get_post( $comment->comment_post_ID );
     128
     129        if ( ! empty( $user ) && ! empty( $post ) ) {
     130
     131            return $comment->user_id === $post->post_author;
     132
     133        }
     134    }
     135    return false;
     136
     137}
     138
     139/**
     140 * Filter comment reply link to not JS scroll.
     141 * Filter the comment reply link to add a class indicating it should not use JS slow-scroll, as it
     142 * makes it scroll to the wrong position on the page.
     143 *
     144 * @param string $link Link to the top of the page.
     145 */
     146function twentytwenty_filter_comment_reply_link( $link ) {
     147
     148    $link = str_replace( 'class=\'', 'class=\'do-not-scroll ', $link );
     149    return $link;
     150
     151}
     152
     153add_filter( 'comment_reply_link', 'twentytwenty_filter_comment_reply_link' );
     154
     155/**
     156 * Post Meta
     157 */
     158/**
     159 * Get and Output Post Meta.
     160 * If it's a single post, output the post meta values specified in the Customizer settings.
     161 *
     162 * @param int    $post_id The ID of the post for which the post meta should be output.
     163 * @param string $location Which post meta location to output – single or preview.
     164 */
     165function twentytwenty_the_post_meta( $post_id = null, $location = 'single-top' ) {
     166
     167    echo twentytwenty_get_post_meta( $post_id, $location ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in twentytwenty_get_post_meta().
     168
     169}
     170
     171/**
     172 * Get the post meta.
     173 *
     174 * @param int    $post_id The iD of the post.
     175 * @param string $location The location where the meta is shown.
     176 */
     177function twentytwenty_get_post_meta( $post_id = null, $location = 'single-top' ) {
     178
     179    // Require post ID.
     180    if ( ! $post_id ) {
     181        return;
     182    }
     183
     184    $page_template = get_page_template_slug( $post_id );
     185
     186    /**
     187     * Filters post types array
     188     *
     189     * This filter can be used to hide post meta information of post, page or custom post type registerd by child themes or plugins
     190     *
     191     * @since 1.0.0
     192     *
     193     * @param array Array of post types
     194     */
     195    $disallowed_post_types = apply_filters( 'twentytwenty_disallowed_post_types_for_meta_output', array( 'page' ) );
     196    // Check whether the post type is allowed to output post meta.
     197    if ( in_array( get_post_type( $post_id ), $disallowed_post_types, true ) ) {
     198        return;
     199    }
     200
     201    $post_meta_wrapper_classes = '';
     202    $post_meta_classes         = '';
     203
     204    // Get the post meta settings for the location specified.
     205    if ( 'single-top' === $location ) {
     206        /**
     207        * Filters post meta info visibility
     208        *
     209        * Use this filter to hide post meta information like Author, Post date, Comments, Is stiky status
     210        *
     211        * @since 1.0.0
     212        *
     213        * @param array $args {
     214        *  @type string 'author'
     215        *  @type string 'post-date'
     216        *  @type string 'comments'
     217        *  @type string  'sticky'
     218        * }
     219        */
     220        $post_meta                 = apply_filters(
     221            'twentytwenty_post_meta_location_single_top',
     222            array(
     223                'author',
     224                'post-date',
     225                'comments',
     226                'sticky',
     227            )
    39228        );
    40 
    41         $args = wp_parse_args( $args, $defaults );
     229        $post_meta_wrapper_classes = ' post-meta-single post-meta-single-top';
     230
     231    } elseif ( 'single-bottom' === $location ) {
    42232
    43233        /**
    44          * Filters the arguments for `twentytwenty_site_logo()`.
    45          *
    46          * @param array  $args     Parsed arguments.
    47          * @param array  $defaults Function's default arguments.
    48          */
    49         $args = apply_filters( 'twentytwenty_site_logo_args', $args, $defaults );
    50 
    51         if ( has_custom_logo() ) {
    52             $contents  = sprintf( $args['logo'], $logo, esc_html( $site_title ) );
    53             $classname = $args['logo_class'];
    54         } else {
    55             $contents  = sprintf( $args['title'], esc_url( get_home_url( null, '/' ) ), esc_html( $site_title ) );
    56             $classname = $args['title_class'];
    57         }
    58 
    59         $wrap = $args['condition'] ? 'home_wrap' : 'single_wrap';
    60 
    61         $html = sprintf( $args[ $wrap ], $classname, $contents );
    62 
    63         /**
    64          * Filters the arguments for `twentytwenty_site_logo()`.
    65          *
    66          * @param string $html      Compiled html based on our arguments.
    67          * @param array  $args      Parsed arguments.
    68          * @param string $classname Class name based on current view, home or single.
    69          * @param string $contents  HTML for site title or logo.
    70          */
    71         $html = apply_filters( 'twentytwenty_site_logo', $html, $args, $classname, $contents );
    72 
    73         if ( ! $echo ) {
    74             return $html;
    75         }
    76 
    77         echo $html; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    78 
    79     }
    80 }
    81 
    82 if ( ! function_exists( 'twentytwenty_site_description' ) ) {
    83     /**
    84      * Displays the site description.
    85      *
    86      * @param boolean $echo Echo or return the html.
    87      */
    88     function twentytwenty_site_description( $echo = true ) {
    89         $description = get_bloginfo( 'description' );
    90 
    91         if ( ! $description ) {
    92             return;
    93         }
    94 
    95         $wrapper = '<div class="site-description">%s</div><!-- .site-description -->';
    96 
    97         $html = sprintf( $wrapper, esc_html( $description ) );
    98 
    99         /**
    100          * Filters the html for the site description.
    101          *
    102          * @param string $html         The HTML to display.
    103          * @param string $description  Site description via `bloginfo()`.
    104          * @param string $wrapper      The format used in case you want to reuse it in a `sprintf()`.
    105          */
    106         $html = apply_filters( 'twentytwenty_site_description', $html, $description, $wrapper );
    107 
    108         if ( ! $echo ) {
    109             return $html;
    110         }
    111 
    112         echo $html; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    113     }
    114 }
    115 
    116 /**
    117  * Comments
    118  */
    119 if ( ! function_exists( 'twentytwenty_is_comment_by_post_author' ) ) {
    120     /**
    121      * Check if the specified comment is written by the author of the post commented on.
    122      *
    123      * @param object $comment Comment data.
    124      */
    125     function twentytwenty_is_comment_by_post_author( $comment = null ) {
    126 
    127         if ( is_object( $comment ) && $comment->user_id > 0 ) {
    128 
    129             $user = get_userdata( $comment->user_id );
    130             $post = get_post( $comment->comment_post_ID );
    131 
    132             if ( ! empty( $user ) && ! empty( $post ) ) {
    133 
    134                 return $comment->user_id === $post->post_author;
    135 
    136             }
    137         }
    138         return false;
    139 
    140     }
    141 }
    142 
    143 if ( ! function_exists( 'twentytwenty_filter_comment_reply_link' ) ) {
    144 
    145     /**
    146      * Filter comment reply link to not JS scroll.
    147      * Filter the comment reply link to add a class indicating it should not use JS slow-scroll, as it
    148      * makes it scroll to the wrong position on the page.
    149      *
    150      * @param string $link Link to the top of the page.
    151      */
    152     function twentytwenty_filter_comment_reply_link( $link ) {
    153 
    154         $link = str_replace( 'class=\'', 'class=\'do-not-scroll ', $link );
    155         return $link;
    156 
    157     }
    158 
    159     add_filter( 'comment_reply_link', 'twentytwenty_filter_comment_reply_link' );
    160 
    161 }
    162 
    163 /**
    164  * Post Meta
    165  */
    166 if ( ! function_exists( 'twentytwenty_the_post_meta' ) ) {
    167     /**
    168      * Get and Output Post Meta.
    169      * If it's a single post, output the post meta values specified in the Customizer settings.
    170      *
    171      * @param int    $post_id The ID of the post for which the post meta should be output.
    172      * @param string $location Which post meta location to output – single or preview.
    173      */
    174     function twentytwenty_the_post_meta( $post_id = null, $location = 'single-top' ) {
    175 
    176         echo twentytwenty_get_post_meta( $post_id, $location ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in twentytwenty_get_post_meta().
    177 
    178     }
    179 }
    180 
    181 if ( ! function_exists( 'twentytwenty_get_post_meta' ) ) {
    182 
    183     /**
    184      * Get the post meta.
    185      *
    186      * @param int    $post_id The iD of the post.
    187      * @param string $location The location where the meta is shown.
    188      */
    189     function twentytwenty_get_post_meta( $post_id = null, $location = 'single-top' ) {
    190 
    191         // Require post ID.
    192         if ( ! $post_id ) {
    193             return;
    194         }
    195 
    196         $page_template = get_page_template_slug( $post_id );
    197 
    198         // Check whether the post type is allowed to output post meta.
    199         $disallowed_post_types = apply_filters( 'twentytwenty_disallowed_post_types_for_meta_output', array( 'page' ) );
    200         if ( in_array( get_post_type( $post_id ), $disallowed_post_types, true ) ) {
    201             return;
    202         }
    203 
    204         $post_meta_wrapper_classes = '';
    205         $post_meta_classes         = '';
    206 
    207         // Get the post meta settings for the location specified.
    208         if ( 'single-top' === $location ) {
    209 
    210             $post_meta                 = apply_filters(
    211                 'twentytwenty_post_meta_location_single_top',
    212                 array(
    213                     'author',
    214                     'post-date',
    215                     'comments',
    216                     'sticky',
    217                 )
    218             );
    219             $post_meta_wrapper_classes = ' post-meta-single post-meta-single-top';
    220 
    221         } elseif ( 'single-bottom' === $location ) {
    222 
    223             $post_meta                 = apply_filters(
    224                 'twentytwenty_post_meta_location_single_bottom',
    225                 array(
    226                     'tags',
    227                 )
    228             );
    229             $post_meta_wrapper_classes = ' post-meta-single post-meta-single-bottom';
    230 
    231         }
    232 
    233         // If the post meta setting has the value 'empty', it's explicitly empty and the default post meta shouldn't be output.
    234         if ( $post_meta && ! in_array( 'empty', $post_meta, true ) ) {
    235 
    236             // Make sure we don't output an empty container.
    237             $has_meta = false;
    238 
    239             global $post;
    240             $the_post = get_post( $post_id );
    241             setup_postdata( $the_post );
    242 
    243             ob_start();
    244 
    245             ?>
    246 
    247             <div class="post-meta-wrapper<?php echo esc_attr( $post_meta_wrapper_classes ); ?>">
    248 
    249                 <ul class="post-meta<?php echo esc_attr( $post_meta_classes ); ?>">
    250 
     234        * Filters post tags visibility
     235        *
     236        * Use this filter to hide post tags
     237        *
     238        * @since 1.0.0
     239        *
     240        * @param array $args {
     241        *   @type string 'tags'
     242        * }
     243        */
     244        $post_meta                 = apply_filters(
     245            'twentytwenty_post_meta_location_single_bottom',
     246            array(
     247                'tags',
     248            )
     249        );
     250        $post_meta_wrapper_classes = ' post-meta-single post-meta-single-bottom';
     251
     252    }
     253
     254    // If the post meta setting has the value 'empty', it's explicitly empty and the default post meta shouldn't be output.
     255    if ( $post_meta && ! in_array( 'empty', $post_meta, true ) ) {
     256
     257        // Make sure we don't output an empty container.
     258        $has_meta = false;
     259
     260        global $post;
     261        $the_post = get_post( $post_id );
     262        setup_postdata( $the_post );
     263
     264        ob_start();
     265
     266        ?>
     267
     268        <div class="post-meta-wrapper<?php echo esc_attr( $post_meta_wrapper_classes ); ?>">
     269
     270            <ul class="post-meta<?php echo esc_attr( $post_meta_classes ); ?>">
     271
     272                <?php
     273
     274                /**
     275                 * Fires before post meta html display.
     276                 *
     277                 * Allow output of additional post meta info to be added by child themes and plugins.
     278                 *
     279                 * @since 1.0.0
     280                 *
     281                 * @param int   $post_ID Post ID.
     282                 */
     283                do_action( 'twentytwenty_start_of_post_meta_list', $post_id );
     284
     285                // Author.
     286                if ( in_array( 'author', $post_meta, true ) ) {
     287
     288                    $has_meta = true;
     289                    ?>
     290                    <li class="post-author meta-wrapper">
     291                        <span class="meta-icon">
     292                            <span class="screen-reader-text"><?php _e( 'Post author', 'twentytwenty' );// phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
     293                            <?php twentytwenty_the_theme_svg( 'user' ); ?>
     294                        </span>
     295                        <span class="meta-text">
     296                            <?php
     297                            printf(
     298                                // Translators: %s = the author name.
     299                                _x( 'By %s', '%s = author name', 'twentytwenty' ), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations
     300                                '<a href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author_meta( 'display_name' ) ) . '</a>'
     301                            );
     302                            ?>
     303                        </span>
     304                    </li>
    251305                    <?php
    252306
    253                     // Allow output of additional meta items to be added by child themes and plugins.
    254                     do_action( 'twentytwenty_start_of_post_meta_list', $post_meta, $post_id );
    255 
    256                     // Author.
    257                     if ( in_array( 'author', $post_meta, true ) ) {
    258 
    259                         $has_meta = true;
    260                         ?>
    261                         <li class="post-author meta-wrapper">
     307                }
     308
     309                // Post date.
     310                if ( in_array( 'post-date', $post_meta, true ) ) {
     311
     312                    $has_meta = true;
     313                    ?>
     314                    <li class="post-date">
     315                        <a class="meta-wrapper" href="<?php the_permalink(); ?>">
    262316                            <span class="meta-icon">
    263                                 <span class="screen-reader-text"><?php _e( 'Post author', 'twentytwenty' );// phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
    264                                 <?php twentytwenty_the_theme_svg( 'user' ); ?>
     317                                <span class="screen-reader-text"><?php _e( 'Post date', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
     318                                <?php twentytwenty_the_theme_svg( 'calendar' ); ?>
    265319                            </span>
    266320                            <span class="meta-text">
    267                                 <?php
    268                                 printf(
    269                                     // Translators: %s = the author name.
    270                                     _x( 'By %s', '%s = author name', 'twentytwenty' ), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations
    271                                     '<a href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author_meta( 'display_name' ) ) . '</a>'
    272                                 );
    273                                 ?>
     321                                <?php the_time( get_option( 'date_format' ) ); ?>
    274322                            </span>
    275                         </li>
    276                         <?php
    277 
    278                     }
    279 
    280                     // Post date.
    281                     if ( in_array( 'post-date', $post_meta, true ) ) {
    282 
    283                         $has_meta = true;
    284                         ?>
    285                         <li class="post-date">
    286                             <a class="meta-wrapper" href="<?php the_permalink(); ?>">
    287                                 <span class="meta-icon">
    288                                     <span class="screen-reader-text"><?php _e( 'Post date', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
    289                                     <?php twentytwenty_the_theme_svg( 'calendar' ); ?>
    290                                 </span>
    291                                 <span class="meta-text">
    292                                     <?php the_time( get_option( 'date_format' ) ); ?>
    293                                 </span>
    294                             </a>
    295                         </li>
    296                         <?php
    297 
    298                     }
    299 
    300                     // Categories.
    301                     if ( in_array( 'categories', $post_meta, true ) && has_category() ) {
    302 
    303                         $has_meta = true;
    304                         ?>
    305                         <li class="post-categories meta-wrapper">
    306                             <span class="meta-icon">
    307                                 <span class="screen-reader-text"><?php _e( 'Categories', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
    308                                 <?php twentytwenty_the_theme_svg( 'folder' ); ?>
    309                             </span>
    310                             <span class="meta-text">
    311                                 <?php _e( 'In', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?> <?php the_category( ', ' ); ?>
    312                             </span>
    313                         </li>
    314                         <?php
    315 
    316                     }
    317 
    318                     // Tags.
    319                     if ( in_array( 'tags', $post_meta, true ) && has_tag() ) {
    320 
    321                         $has_meta = true;
    322                         ?>
    323                         <li class="post-tags meta-wrapper">
    324                             <span class="meta-icon">
    325                                 <span class="screen-reader-text"><?php _e( 'Tags', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
    326                                 <?php twentytwenty_the_theme_svg( 'tag' ); ?>
    327                             </span>
    328                             <span class="meta-text">
    329                                 <?php the_tags( '', ', ', '' ); ?>
    330                             </span>
    331                         </li>
    332                         <?php
    333 
    334                     }
    335 
    336                     // Comments link.
    337                     if ( in_array( 'comments', $post_meta, true ) && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
    338 
    339                         $has_meta = true;
    340                         ?>
    341                         <li class="post-comment-link meta-wrapper">
    342                             <span class="meta-icon">
    343                                 <?php twentytwenty_the_theme_svg( 'comment' ); ?>
    344                             </span>
    345                             <span class="meta-text">
    346                                 <?php comments_popup_link(); ?>
    347                             </span>
    348                         </li>
    349                         <?php
    350 
    351                     }
    352 
    353                     // Sticky.
    354                     if ( in_array( 'sticky', $post_meta, true ) && is_sticky() ) {
    355 
    356                         $has_meta = true;
    357                         ?>
    358                         <li class="post-sticky meta-wrapper">
    359                             <span class="meta-icon">
    360                                 <?php twentytwenty_the_theme_svg( 'bookmark' ); ?>
    361                             </span>
    362                             <span class="meta-text">
    363                                 <?php _e( 'Sticky post', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?>
    364                             </span>
    365                         </li>
    366                         <?php
    367 
    368                     }
    369 
    370                     // Allow output of additional post meta types to be added by child themes and plugins.
    371                     do_action( 'twentytwenty_end_of_post_meta_list', $post_meta, $post_id );
    372 
     323                        </a>
     324                    </li>
     325                    <?php
     326
     327                }
     328
     329                // Categories.
     330                if ( in_array( 'categories', $post_meta, true ) && has_category() ) {
     331
     332                    $has_meta = true;
    373333                    ?>
    374 
    375                 </ul><!-- .post-meta -->
    376 
    377             </div><!-- .post-meta-wrapper -->
    378 
    379             <?php
    380 
    381             wp_reset_postdata();
    382 
    383             $meta_output = ob_get_clean();
    384 
    385             // If there is meta to output, return it.
    386             if ( $has_meta && $meta_output ) {
    387 
    388                 return $meta_output;
    389 
    390             }
     334                    <li class="post-categories meta-wrapper">
     335                        <span class="meta-icon">
     336                            <span class="screen-reader-text"><?php _e( 'Categories', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
     337                            <?php twentytwenty_the_theme_svg( 'folder' ); ?>
     338                        </span>
     339                        <span class="meta-text">
     340                            <?php _e( 'In', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?> <?php the_category( ', ' ); ?>
     341                        </span>
     342                    </li>
     343                    <?php
     344
     345                }
     346
     347                // Tags.
     348                if ( in_array( 'tags', $post_meta, true ) && has_tag() ) {
     349
     350                    $has_meta = true;
     351                    ?>
     352                    <li class="post-tags meta-wrapper">
     353                        <span class="meta-icon">
     354                            <span class="screen-reader-text"><?php _e( 'Tags', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
     355                            <?php twentytwenty_the_theme_svg( 'tag' ); ?>
     356                        </span>
     357                        <span class="meta-text">
     358                            <?php the_tags( '', ', ', '' ); ?>
     359                        </span>
     360                    </li>
     361                    <?php
     362
     363                }
     364
     365                // Comments link.
     366                if ( in_array( 'comments', $post_meta, true ) && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
     367
     368                    $has_meta = true;
     369                    ?>
     370                    <li class="post-comment-link meta-wrapper">
     371                        <span class="meta-icon">
     372                            <?php twentytwenty_the_theme_svg( 'comment' ); ?>
     373                        </span>
     374                        <span class="meta-text">
     375                            <?php comments_popup_link(); ?>
     376                        </span>
     377                    </li>
     378                    <?php
     379
     380                }
     381
     382                // Sticky.
     383                if ( in_array( 'sticky', $post_meta, true ) && is_sticky() ) {
     384
     385                    $has_meta = true;
     386                    ?>
     387                    <li class="post-sticky meta-wrapper">
     388                        <span class="meta-icon">
     389                            <?php twentytwenty_the_theme_svg( 'bookmark' ); ?>
     390                        </span>
     391                        <span class="meta-text">
     392                            <?php _e( 'Sticky post', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?>
     393                        </span>
     394                    </li>
     395                    <?php
     396
     397                }
     398
     399                /**
     400                 * Fires after post meta html display.
     401                 *
     402                 * Allow output of additional post meta info to be added by child themes and plugins.
     403                 *
     404                 * @since 1.0.0
     405                 *
     406                 * @param int   $post_ID Post ID.
     407                 */
     408                do_action( 'twentytwenty_end_of_post_meta_list', $post_id );
     409
     410                ?>
     411
     412            </ul><!-- .post-meta -->
     413
     414        </div><!-- .post-meta-wrapper -->
     415
     416        <?php
     417
     418        wp_reset_postdata();
     419
     420        $meta_output = ob_get_clean();
     421
     422        // If there is meta to output, return it.
     423        if ( $has_meta && $meta_output ) {
     424
     425            return $meta_output;
     426
    391427        }
    392 
    393     }
     428    }
     429
    394430}
    395431
     
    397433 * Menus
    398434 */
    399 if ( ! function_exists( 'twentytwenty_filter_wp_list_pages_item_classes' ) ) {
     435/**
     436 * Filter Classes of wp_list_pages items to match menu items.
     437 * Filter the class applied to wp_list_pages() items with children to match the menu class, to simplify.
     438 * styling of sub levels in the fallback. Only applied if the match_menu_classes argument is set.
     439 *
     440 * @param string $css_class CSS Class names.
     441 * @param string $item Comment.
     442 * @param int    $depth Depth of the current comment.
     443 * @param array  $args An array of arguments.
     444 * @param string $current_page Wether or not the item is the current item.
     445 */
     446function twentytwenty_filter_wp_list_pages_item_classes( $css_class, $item, $depth, $args, $current_page ) {
     447
     448    // Only apply to wp_list_pages() calls with match_menu_classes set to true.
     449    $match_menu_classes = isset( $args['match_menu_classes'] );
     450
     451    if ( ! $match_menu_classes ) {
     452        return $css_class;
     453    }
     454
     455    // Add current menu item class.
     456    if ( in_array( 'current_page_item', $css_class, true ) ) {
     457        $css_class[] = 'current-menu-item';
     458    }
     459
     460    // Add menu item has children class.
     461    if ( in_array( 'page_item_has_children', $css_class, true ) ) {
     462        $css_class[] = 'menu-item-has-children';
     463    }
     464
     465    return $css_class;
     466
     467}
     468
     469add_filter( 'page_css_class', 'twentytwenty_filter_wp_list_pages_item_classes', 10, 5 );
     470
     471/**
     472 * Add a Sub Nav Toggle to the Expanded Menu and Mobile Menu.
     473 *
     474 * @param array  $args An array of arguments.
     475 * @param string $item Menu item.
     476 * @param int    $depth Depth of the current menu item.
     477 */
     478function twentytwenty_add_sub_toggles_to_main_menu( $args, $item, $depth ) {
     479
     480    // Add sub menu toggles to the Expanded Menu with toggles.
     481    if ( isset( $args->show_toggles ) && $args->show_toggles ) {
     482
     483        // Wrap the menu item link contents in a div, used for positioning.
     484        $args->before = '<div class="ancestor-wrapper">';
     485        $args->after  = '';
     486
     487        // Add a toggle to items with children.
     488        if ( in_array( 'menu-item-has-children', $item->classes, true ) ) {
     489
     490            $toggle_target_string = '.menu-modal .menu-item-' . $item->ID . ' > .sub-menu';
     491            $toggle_duration      = twentytwenty_toggle_duration();
     492
     493            // Add the sub menu toggle.
     494            $args->after .= '<button class="toggle sub-menu-toggle fill-children-current-color" data-toggle-target="' . $toggle_target_string . '" data-toggle-type="slidetoggle" data-toggle-duration="' . absint( $toggle_duration ) . '"><span class="screen-reader-text">' . __( 'Show sub menu', 'twentytwenty' ) . '</span>' . twentytwenty_get_theme_svg( 'chevron-down' ) . '</button>';
     495
     496        }
     497
     498        // Close the wrapper.
     499        $args->after .= '</div><!-- .ancestor-wrapper -->';
     500
     501        // Add sub menu icons to the primary menu without toggles.
     502    } elseif ( 'primary' === $args->theme_location ) {
     503        if ( in_array( 'menu-item-has-children', $item->classes, true ) ) {
     504            $args->after = '<span class="icon"></span>';
     505        } else {
     506            $args->after = '';
     507        }
     508    }
     509
     510    return $args;
     511
     512}
     513
     514add_filter( 'nav_menu_item_args', 'twentytwenty_add_sub_toggles_to_main_menu', 10, 3 );
     515
     516/**
     517 * Classes
     518 */
     519/**
     520 * Add No-JS Class.
     521 * If we're missing JavaScript support, the HTML element will have a no-js class.
     522 */
     523function twentytwenty_no_js_class() {
     524
     525    ?>
     526    <script>document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );</script>
     527    <?php
     528
     529}
     530
     531add_action( 'wp_head', 'twentytwenty_no_js_class' );
     532
     533/**
     534 * Filters the archive title and styles the word before the first colon.
     535 *
     536 * @param string $title Current archive title.
     537 */
     538function twentytwenty_get_the_archive_title( $title ) {
     539
     540    $regex = apply_filters(
     541        'twentytwenty_get_the_archive_title_regex',
     542        array(
     543            'pattern'     => '/(\A[^\:]+\:)/',
     544            'replacement' => '<span class="color-accent">$1</span>',
     545        )
     546    );
     547
     548    if ( empty( $regex ) ) {
     549
     550        return $title;
     551
     552    }
     553
     554    return preg_replace( $regex['pattern'], $regex['replacement'], $title );
     555
     556}
     557
     558add_filter( 'get_the_archive_title', 'twentytwenty_get_the_archive_title' );
     559
     560/**
     561 * Filters the edit post link to add an icon and use the post meta structure.
     562 *
     563 * @param string $link    Anchor tag for the edit link.
     564 * @param int    $post_id Post ID.
     565 * @param string $text    Anchor text.
     566 */
     567function twentytwenty_edit_post_link( $link, $post_id, $text ) {
     568
     569    $edit_url = get_edit_post_link( $post_id );
     570
     571    if ( ! $edit_url ) {
     572        return;
     573    }
     574
     575    return '<div class="post-meta-wrapper post-meta-edit-link-wrapper"><ul class="post-meta"><li class="post-edit meta-wrapper"><span class="meta-icon">' . twentytwenty_get_theme_svg( 'edit' ) . '</span><span class="meta-text"><a href="' . esc_url( $edit_url ) . '">' . $text . '</a></span></li></ul><!-- .post-meta --></div><!-- .post-meta-wrapper -->';
     576
     577}
     578
     579add_filter( 'edit_post_link', 'twentytwenty_edit_post_link', 10, 3 );
     580
     581/**
     582 * Add conditional body classes.
     583 *
     584 * @param string $classes Classes added to the body tag.
     585 */
     586function twentytwenty_body_classes( $classes ) {
     587
     588    global $post;
     589    $post_type = isset( $post ) ? $post->post_type : false;
     590
     591    // Check whether we're singular.
     592    if ( is_singular() ) {
     593        $classes[] = 'singular';
     594    }
     595
     596    // Check whether the current page should have an overlay header.
     597    if ( is_page_template( array( 'templates/template-cover.php' ) ) ) {
     598        $classes[] = 'overlay-header';
     599    }
     600
     601    // Check whether the current page has full-width content.
     602    if ( is_page_template( array( 'templates/template-full-width.php' ) ) ) {
     603        $classes[] = 'has-full-width-content';
     604    }
     605
     606    // Check for enabled search.
     607    if ( true === get_theme_mod( 'enable_header_search', true ) ) {
     608        $classes[] = 'enable-search-modal';
     609    }
     610
     611    // Check for post thumbnail.
     612    if ( is_singular() && has_post_thumbnail() ) {
     613        $classes[] = 'has-post-thumbnail';
     614    } elseif ( is_singular() ) {
     615        $classes[] = 'missing-post-thumbnail';
     616    }
     617
     618    // Check whether we're in the customizer preview.
     619    if ( is_customize_preview() ) {
     620        $classes[] = 'customizer-preview';
     621    }
     622
     623    // Check if posts have single pagination.
     624    if ( is_single() && ( get_next_post() || get_previous_post() ) ) {
     625        $classes[] = 'has-single-pagination';
     626    } else {
     627        $classes[] = 'has-no-pagination';
     628    }
     629
     630    // Check if we're showing comments.
     631    if ( $post && ( ( 'post' === $post_type || comments_open() || get_comments_number() ) && ! post_password_required() ) ) {
     632        $classes[] = 'showing-comments';
     633    } else {
     634        $classes[] = 'not-showing-comments';
     635    }
     636
     637    // Check if avatars are visible.
     638    $classes[] = get_option( 'show_avatars' ) ? 'show-avatars' : 'hide-avatars';
     639
     640    // Slim page template class names (class = name - file suffix).
     641    if ( is_page_template() ) {
     642        $classes[] = basename( get_page_template_slug(), '.php' );
     643    }
     644
     645    // Check for the elements output in the top part of the footer.
     646    $has_footer_menu = has_nav_menu( 'footer' );
     647    $has_social_menu = has_nav_menu( 'social' );
     648    $has_sidebar_1   = is_active_sidebar( 'sidebar-1' );
     649    $has_sidebar_2   = is_active_sidebar( 'sidebar-2' );
     650