Changeset 46357

Timestamp:

09/30/2019 05:40:14 PM (5 years 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:

• 404.php (modified) (3 diffs)
• assets/css/editor-style-block-rtl.css (modified) (42 diffs)
• assets/css/editor-style-block.css (modified) (10 diffs)
• assets/css/editor-style-classic-rtl.css (modified) (6 diffs)
• assets/css/editor-style-classic.css (modified) (6 diffs)
• assets/css/font-awesome.css (modified) (2 diffs)
• assets/fonts/font-awesome/fa-brands-400.eot (deleted)
• assets/fonts/font-awesome/fa-brands-400.svg (deleted)
• assets/fonts/font-awesome/fa-brands-400.ttf (deleted)
• assets/fonts/font-awesome/fa-fallback.eot (deleted)
• assets/fonts/font-awesome/fa-fallback.svg (deleted)
• assets/fonts/font-awesome/fa-fallback.ttf (deleted)
• assets/fonts/inter/Inter-Bold.woff (deleted)
• assets/fonts/inter/Inter-Bold.woff2 (deleted)
• assets/fonts/inter/Inter-BoldItalic.woff (deleted)
• assets/fonts/inter/Inter-BoldItalic.woff2 (deleted)
• assets/fonts/inter/Inter-ExtraBold.woff (deleted)
• assets/fonts/inter/Inter-ExtraBold.woff2 (deleted)
• assets/fonts/inter/Inter-ExtraBoldItalic.woff (deleted)
• assets/fonts/inter/Inter-ExtraBoldItalic.woff2 (deleted)
• assets/fonts/inter/Inter-Italic.woff (deleted)
• assets/fonts/inter/Inter-Italic.woff2 (deleted)
• assets/fonts/inter/Inter-Medium.woff (deleted)
• assets/fonts/inter/Inter-Medium.woff2 (deleted)
• assets/fonts/inter/Inter-MediumItalic.woff (deleted)
• assets/fonts/inter/Inter-MediumItalic.woff2 (deleted)
• assets/fonts/inter/Inter-Regular.woff (deleted)
• assets/fonts/inter/Inter-Regular.woff2 (deleted)
• assets/fonts/inter/Inter-SemiBold.woff (deleted)
• assets/fonts/inter/Inter-SemiBold.woff2 (deleted)
• assets/fonts/inter/Inter-SemiBoldItalic.woff (deleted)
• assets/fonts/inter/Inter-SemiBoldItalic.woff2 (deleted)
• assets/fonts/inter/Inter.var.woff2 (deleted)
• assets/js/customize-controls.js (modified) (4 diffs)
• assets/js/customize-preview.js (modified) (5 diffs)
• assets/js/editor-script-block.js (added)
• assets/js/index.js (modified) (10 diffs)
• classes/class-twentytwenty-customize.php (modified) (10 diffs)
• classes/class-twentytwenty-script-loader.php (modified) (2 diffs)
• classes/class-twentytwenty-svg-icons.php (modified) (1 diff)
• classes/class-twentytwenty-walker-comment.php (modified) (4 diffs)
• classes/class-twentytwenty-walker-page.php (modified) (1 diff)
• comments.php (modified) (2 diffs)
• footer.php (modified) (3 diffs)
• functions.php (modified) (3 diffs)
• header.php (modified) (6 diffs)
• inc/custom-css.php (modified) (4 diffs)
• inc/template-tags.php (modified) (2 diffs)
• index.php (modified) (2 diffs)
• package-lock.json (modified) (1 diff)
• package.json (modified) (1 diff)
• print.css (added)
• readme.txt (modified) (2 diffs)
• singular.php (modified) (1 diff)
• style-rtl.css (modified) (120 diffs)
• style.css (modified) (117 diffs)
• template-parts/content-cover.php (modified) (2 diffs)
• template-parts/content.php (modified) (1 diff)
• template-parts/entry-author-bio.php (modified) (1 diff)
• template-parts/entry-header.php (modified) (2 diffs)
• template-parts/featured-image.php (modified) (1 diff)
• template-parts/footer-menus-widgets.php (added)
• template-parts/modal-menu.php (modified) (1 diff)
• template-parts/modal-search.php (modified) (1 diff)
• template-parts/navigation.php (modified) (2 diffs)
• template-parts/pagination.php (modified) (1 diff)
• templates/template-cover.php (modified) (1 diff)

trunk/src/wp-content/themes/twentytwenty/404.php

@@ -13 +13 @@
 <main id="site-content" role="main">
 
-    <div class="section-inner thin">
+    <div class="section-inner thin error404-content">
 
         <h1 class="entry-title"><?php _e( 'Page Not Found', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></h1>
@@ -22 +22 @@
         get_search_form(
             array(
-                'label' => __( '404 not found', 'twentytwenty' ),
+                'label' => _x( '404 not found', 'Label', 'twentytwenty' ),
             )
         );
@@ -29 +29 @@
     </div><!-- .section-inner -->
 
+    <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
+
 </main><!-- #site-content -->
 

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

@@ -1 @@
-/* -------------------------------------------------------------------------- */
+/* ------------------------------------------- */
 
 /*  Twenty Twenty Editor Styles — Block Editor
-/* -------------------------------------------------------------------------- */
+/* ------------------------------------------- */
 
 .editor-styles-wrapper {
     background: #f5efe0;
-    color: #1a1b1f;
+    color: #000;
+    letter-spacing: -0.015em;
+    -moz-font-smoothing: antialiased;
     -webkit-font-smoothing: antialiased;
 }
 
 .editor-styles-wrapper > * {
+    color: #000;
     font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
-    font-size: 17px;
+    font-size: 18px;
+}
+
+@supports ( font-variation-settings: normal ) {
+
+    .editor-styles-wrapper > * {
+        font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
+    }
+
 }
 
@@ -21 +32 @@
 
 
+/* Fonts ------------------------------------- */
+
+/*
+ * Chrome renders extra-wide   characters for the Hoefler Text font.
+ * This results in a jumping cursor when typing in both the Classic and block
+ * editors. The following font-face override fixes the issue by manually
+ * inserting a custom font that includes just a Hoefler Text space replacement
+ * for that character instead.
+ */
+@font-face {
+    font-family: NonBreakingSpaceOverride;
+    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");
+}
+
+/* ----------------------------------------------
+Inter variable font. Usage:
+
+@supports (font-variation-settings: normal) {
+    html { font-family: "Inter var", sans-serif; }
+}
+---------------------------------------------- */
+
+@font-face {
+    font-family: "Inter var";
+    font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
+    font-style: normal;
+    src: url(../fonts/inter/Inter-upright.var.woff2) format("woff2");
+}
+
+@font-face {
+    font-family: "Inter var";
+    font-weight: 100 900; /* stylelint-disable-line font-weight-notation */
+    font-style: italic;
+    src: url(../fonts/inter/Inter-italic.var.woff2) format("woff2");
+}
+
 /* Structure --------------------------------- */
 
@@ -27 +74 @@
 }
 
-.editor-block-list__block[data-align="wide"] .wp-block-group .wp-block {
-    max-width: calc(100% - 40px);
-}
-
-.editor-block-list__block[data-align="full"] .wp-block-group .wp-block {
+.wp-block[data-align="wide"] .wp-block-group .wp-block {
     max-width: 100%;
 }
 
-*[data-align="right"] .editor-block-list__block-edit,
-*[data-align="left"] .editor-block-list__block-edit {
+.wp-block[data-align="full"] .wp-block-group .wp-block {
+    max-width: 100%;
+}
+
+*[data-align="right"] .wp-block-edit,
+*[data-align="left"] .wp-block-edit {
     max-width: 50%;
 }
 
-.editor-block-list__block[data-align="wide"],
-.editor-block-list__block[data-align="full"] {
+.wp-block[data-align="wide"] {
     margin-bottom: 30px;
     margin-top: 30px;
-}
-
-.editor-block-list__block[data-align="wide"] {
-    max-width: 1120px;
-}
-
-.editor-block-list__block[data-align="full"] {
+    max-width: 1200px;
+}
+
+.wp-block[data-align="full"] {
+    margin-bottom: 50px;
+    margin-top: 50px;
     max-width: none;
 }
@@ -60 +105 @@
 
 
-/* Colors ------------------------------------ */
-
-/* CUSTOM COLORS */
-
-.has-accent-color {
-    color: #cd2653;
-}
-
-.has-accent-background-color {
-    background-color: #cd2653;
-}
-
-/* GENERAL COLORS */
-
-.has-black-background-color {
-    background-color: #000;
-}
-
-.has-white-background-color {
-    background-color: #fff;
-}
-
-.has-black-color {
-    color: #000;
-}
-
-.has-white-color {
-    color: #fff;
-}
-
-
-/* Typography -------------------------------- */
-
-.editor-styles-wrapper a {
-    color: #cd2653;
-    text-decoration: underline;
-}
-
+/* Font Families ------------------------------ */
+
+.editor-styles-wrapper p,
+.editor-styles-wrapper ol,
+.editor-styles-wrapper ul,
+.editor-styles-wrapper dl,
+.editor-styles-wrapper dt {
+    font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif;
+    letter-spacing: normal;
+}
+
+.editor-post-title__block .editor-post-title__input,
 .editor-styles-wrapper .wp-block h1,
 .editor-styles-wrapper .wp-block h2,
@@ -104 +123 @@
 .editor-styles-wrapper .wp-block h5,
 .editor-styles-wrapper .wp-block h6,
-.editor-post-title__block .editor-post-title__input {
-    font-family: inherit;
+.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
+.editor-styles-wrapper cite,
+.editor-styles-wrapper figcaption,
+.editor-styles-wrapper .wp-caption-text {
+    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
+}
+
+@supports ( font-variation-settings: normal ) {
+
+    .editor-post-title__block .editor-post-title__input,
+    .editor-styles-wrapper .wp-block h1,
+    .editor-styles-wrapper .wp-block h2,
+    .editor-styles-wrapper .wp-block h3,
+    .editor-styles-wrapper .wp-block h4,
+    .editor-styles-wrapper .wp-block h5,
+    .editor-styles-wrapper .wp-block h6,
+    .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter,
+    .editor-styles-wrapper cite,
+    .editor-styles-wrapper figcaption,
+    .editor-styles-wrapper .wp-caption-text {
+        font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
+    }
+
+}
+
+
+/* Colors ------------------------------------ */
+
+/* CUSTOM COLORS */
+
+.has-accent-color {
+    color: #cd2653;
+}
+
+.has-accent-background-color {
+    background-color: #cd2653;
+}
+
+/* GENERAL COLORS */
+
+.has-black-background-color {
+    background-color: #000;
+}
+
+.has-white-background-color {
+    background-color: #fff;
+}
+
+.has-black-color {
+    color: #000;
+}
+
+.has-white-color {
+    color: #fff;
+}
+
+
+/* Typography -------------------------------- */
+
+.editor-styles-wrapper a {
+    color: #cd2653;
+    text-decoration: underline;
+}
+
+.editor-styles-wrapper a:focus,
+.editor-styles-wrapper a:hover {
+    text-decoration: none;
+}
+
+.editor-post-title__block .editor-post-title__input,
+.editor-styles-wrapper .wp-block h1,
+.editor-styles-wrapper .wp-block h2,
+.editor-styles-wrapper .wp-block h3,
+.editor-styles-wrapper .wp-block h4,
+.editor-styles-wrapper .wp-block h5,
+.editor-styles-wrapper .wp-block h6 {
+    color: #000;
     font-feature-settings: "lnum";
     font-variant-numeric: lining-nums;
     font-weight: 700;
-    letter-spacing: -0.005em;
+    letter-spacing: -0.0415625em;
     line-height: 1.25;
     margin: 40px 0 25px;
@@ -116 +210 @@
 .editor-post-title__block .editor-post-title__input,
 .editor-styles-wrapper .wp-block h1 {
+    font-size: 36px;
+    font-weight: 800;
+    line-height: 1.138888889;
+}
+
+.editor-styles-wrapper .wp-block h2 {
     font-size: 32px;
 }
 
-.editor-styles-wrapper .wp-block h2 {
+.editor-styles-wrapper .wp-block h3 {
     font-size: 28px;
 }
 
-.editor-styles-wrapper .wp-block h3 {
+.editor-styles-wrapper .wp-block h4 {
     font-size: 24px;
 }
 
-.editor-styles-wrapper .wp-block h4 {
+.editor-styles-wrapper .wp-block h5 {
     font-size: 21px;
 }
 
-.editor-styles-wrapper .wp-block h5 {
-    font-size: 19px;
-}
-
 .editor-styles-wrapper .wp-block h6 {
-    font-size: 1em;
-}
-
+    font-size: 16px;
+    letter-spacing: 0.03125em;
+    text-transform: uppercase;
+}
+
+.editor-styles-wrapper li,
 .editor-styles-wrapper p,
 .editor-styles-wrapper p.wp-block-paragraph {
-    line-height: 1.5;
+    line-height: 1.4;
+}
+
+/* POST TITLE */
+
+.wp-block.editor-post-title__block {
+    max-width: 1000px;
+}
+
+.editor-styles-wrapper .editor-post-title__block .editor-post-title__input {
+    margin: 0;
+    text-align: center;
+}
+
+/* DROP CAP */
+
+.editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter {
+    color: #cd2653;
+    font-size: 5.1em;
+    font-weight: 800;
+    margin: 0.05em 0 0 0.1em;
 }
 
@@ -163 +282 @@
 
 .editor-styles-wrapper pre {
+    border-color: #dcd7ca;
     border-radius: 0;
     line-height: 1.5;
@@ -208 +328 @@
 .editor-styles-wrapper .alignright {
     margin-bottom: 1.2em;
-    max-width: 50%;
+    max-width: 260px;
 }
 
@@ -225 +345 @@
 
 .editor-styles-wrapper figcaption {
-    color: inherit;
-    font-size: 14px;
+    color: #6d6d6d;
+    font-size: 15px;
     font-weight: 500;
-    margin-top: 10px;
-    text-align: right;
-}
-
-.editor-styles-wrapper .editor-block-list__block[data-align="full"] figcaption {
-    padding: 0 15px;
+    line-height: 1.2;
+    margin-top: 5px;
+    text-align: inherit;
 }
 
@@ -240 +357 @@
 
 .editor-styles-wrapper fieldset {
-    border: 2px solid #e1e1e3;
+    border: 2px solid #dcd7ca;
     padding: 20px;
 }
@@ -256 +373 @@
 
 
-/* Block: _Shared Lists ---------------------- */
+/* Block: Base Margins ---------------------- */
+
+/* Block: Shared Widget Styles -------------- */
 
 .editor-styles-wrapper ul.wp-block-archives,
 .editor-styles-wrapper ul.wp-block-categories,
-.editor-styles-wrapper ul.wp-block-latest-posts {
+.editor-styles-wrapper ul.wp-block-latest-posts,
+.editor-styles-wrapper ul.wp-block-categories__list {
+    font-family: inherit;
     list-style: none;
     margin: 40px 0;
@@ -266 +387 @@
 }
 
-.editor-styles-wrapper ul.wp-block-categories__list {
-    list-style: none;
-    margin-right: 0;
-    padding-right: 0;
+.editor-styles-wrapper ul.wp-block-categories__list ul {
+    margin: 0;
 }
 
 .editor-styles-wrapper ul.wp-block-archives li,
 .editor-styles-wrapper ul.wp-block-categories li,
-.editor-styles-wrapper ul.wp-block-latest-posts li {
-    line-height: 1.2;
-    margin: 20px 0 0 0;
+.editor-styles-wrapper ul.wp-block-latest-posts li,
+.editor-styles-wrapper ul.wp-block-categories__list li {
+    color: #6d6d6d;
+    line-height: 1.476;
+    margin: 5px 0 0 0;
 }
 
@@ -289 +410 @@
 .editor-styles-wrapper .wp-block-categories li > a,
 .editor-styles-wrapper .wp-block-latest-posts li > a {
-    font-size: 1.25em;
+    font-weight: 700;
+    text-decoration: none;
+}
+
+.editor-styles-wrapper .wp-block-archives li > a:focus,
+.editor-styles-wrapper .wp-block-archives li > a:hover,
+.editor-styles-wrapper .wp-block-categories li > a:focus,
+.editor-styles-wrapper .wp-block-categories li > a:hover,
+.editor-styles-wrapper .wp-block-latest-posts li > a:focus,
+.editor-styles-wrapper .wp-block-latest-posts li > a:hover {
     font-weight: 700;
     text-decoration: none;
@@ -299 +429 @@
 }
 
+.editor-styles-wrapper .wp-block-latest-comments time,
+.editor-styles-wrapper .wp-block-latest-posts time {
+    color: #6d6d6d;
+    font-size: 0.7em;
+    font-weight: 600;
+    letter-spacing: normal;
+    line-height: 1.476;
+    margin-top: 0.15em;
+}
+
 
 /* Block: Table ------------------------------ */
 
-.editor-styles-wrapper  table.wp-block-table {
-    border-color: #e1e1e3;
+.editor-styles-wrapper .wp-block-table {
     border-collapse: collapse;
     border-spacing: 0;
     empty-cells: show;
-    font-size: 0.85em;
+    font-size: 16px;
     margin-bottom: 1.1em;
     width: 100%;
 }
 
-.editor-styles-wrapper  table.wp-block-table caption,
-.editor-styles-wrapper  table.wp-block-table th,
-.editor-styles-wrapper  table.wp-block-table td {
-    border-color: inherit;
-    color: inherit;
+.editor-styles-wrapper .wp-block-table,
+.editor-styles-wrapper .wp-block-table * {
+    border-color: #dcd7ca;
+}
+
+.editor-styles-wrapper .wp-block-table tr {
+    border: none;
 }
 
 .editor-styles-wrapper  .wp-block-table caption {
-    padding: 0;
+    background: #dcd7ca;
     text-align: center;
 }
@@ -345 +486 @@
 }
 
+/* STYLE: STRIPES */
+
+.editor-styles-wrapper .wp-block-table.is-style-stripes {
+    border: 1px solid #dcd7ca;
+}
+
 .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
-    background: #f1f1f3;
+    background: #dcd7ca;
 }
 
@@ -352 +499 @@
 /* Block: Separator -------------------------- */
 
-.editor-styles-wrapper hr.wp-block-separator {
+hr.wp-block-separator {
+    border-top: 1px solid #6d6d6d;
+    color: #6d6d6d;
+    margin: 30px 0;
+}
+
+hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+    max-width: 100%;
+}
+
+hr.wp-block-separator:not(.is-style-dots) {
+    background: linear-gradient(to right, currentColor calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), currentColor calc(50% + 16px));
+    background-color: transparent !important;
     border: none;
-    border-top: 1px solid #e1e1e3;
-    margin: 2em auto;
-    width: 100%;
-}
-
-.editor-styles-wrapper .wp-block-separator.is-style-dots {
-    border: none;
-}
-
-.editor-styles-wrapper .wp-block-separator.is-style-dots::before {
-    color: inherit;
-}
-
-.editor-styles-wrapper .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
-    margin-right: 0;
-    width: 100%;
-}
-
-.editor-styles-wrapper .wp-block-separator:not(.is-style-wide):not(.is-style-dots),
-.editor-styles-wrapper .wp-block-separator.is-style-wide {
-    max-width: none;
+    height: 1px;
+    overflow: visible;
+    position: relative;
+}
+
+.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
+    height: 1px;
+}
+
+hr.wp-block-separator:not(.is-style-dots)::before,
+hr.wp-block-separator:not(.is-style-dots)::after {
+    background: currentColor;
+    content: "";
+    display: block;
+    height: 16px;
+    position: absolute;
+    top: calc(50% - 8px);
+    transform: rotate(-22.5deg);
+    width: 1px;
+}
+
+hr.wp-block-separator::before {
+    right: calc(50% - 5px);
+}
+
+hr.wp-block-separator::after {
+    left: calc(50% - 5px);
+}
+
+/* STYLE: DOTS */
+
+hr.wp-block-separator.is-style-dots::before {
+    font-size: 32px;
+    font-weight: 700;
+    letter-spacing: 1em;
+    padding-right: 1em;
 }
 
@@ -385 +559 @@
 
 .editor-styles-wrapper .wp-block-quote {
-    border-color: #cd2653 !important;
+    border-color: #cd2653;
     border-style: solid;
-    border-width: 0 4px 0 0;
+    border-width: 0 2px 0 0;
     color: inherit;
     margin: 20px 0;
@@ -393 +567 @@
 }
 
+.editor-styles-wrapper .wp-block-quote.has-text-align-center,
 .editor-styles-wrapper .wp-block-quote[style*="text-align:center"],
 .editor-styles-wrapper .wp-block-quote[style*="text-align: center"] {
@@ -399 +574 @@
 }
 
+.editor-styles-wrapper .wp-block-quote.has-text-align-right,
 .editor-styles-wrapper .wp-block-quote[style*="text-align:right"],
 .editor-styles-wrapper .wp-block-quote[style*="text-align: right"] {
-    border-width: 0 0 0 4px;
+    border-width: 0 0 0 2px;
     padding: 5px 0 5px 20px;
 }
@@ -409 +585 @@
 .editor-styles-wrapper .wp-block-quote cite,
 .editor-styles-wrapper .wp-block-quote footer {
-    color: inherit;
+    color: #6d6d6d;
     font-size: 14px;
     font-weight: 600;
+    line-height: 1.25;
 }
 
@@ -426 +603 @@
 
 .editor-styles-wrapper .wp-block-quote.is-style-large p {
-    font-size: 1.75em;
-    font-style: italic;
+    font-family: inherit;
+    font-size: 24px;
+    font-style: normal;
     font-weight: 700;
-    line-height: 1.25;
-}
-
+    letter-spacing: -0.035714286em;
+    line-height: 1.285714286;
+}
+
+.editor-styles-wrapper .wp-block-quote.is-style-large .wp-block-quote__citation,
+.editor-styles-wrapper .wp-block-quote.is-style-large cite,
+.editor-styles-wrapper .wp-block-quote.is-style-large footer {
+    font-size: 16px;
+}
+
+
+/* Block: Code, Verse and Preformatted ------- */
+
+.editor-styles-wrapper .wp-block-code,
+.editor-styles-wrapper .wp-block-preformatted pre,
+.editor-styles-wrapper .wp-block-verse pre {
+    border: 1px solid #dcd7ca;
+    border-radius: 0;
+    padding: 30px;
+}
+
+.editor-styles-wrapper .wp-block-preformatted pre,
+.editor-styles-wrapper .wp-block-code .block-editor-plain-text,
+.editor-styles-wrapper .wp-block-verse pre {
+    background: transparent;
+    font-family: monospace;
+    font-size: 14px;
+}
 
 /* Block: Cover ------------------------------ */
@@ -438 +641 @@
 .editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container {
     margin: 0 auto;
-    max-width: 1120px;
+    max-width: 1200px;
     width: calc(100% - 50px);
+}
+
+[data-align="left"] .wp-block-cover,
+[data-align="left"] .wp-block-cover-image,
+[data-align="right"] .wp-block-cover,
+[data-align="right"] .wp-block-cover-image {
+    max-width: 260px;
 }
 
@@ -454 +664 @@
 }
 
-.editor-styles-wrapper .wp-block-cover {
-    min-height: 75vh;
-}
-
 .editor-styles-wrapper .wp-block-cover p {
-    font-weight: 500;
+    font-family: inherit;
 }
 
@@ -475 +681 @@
     color: inherit;
     padding: 0;
-}
-
-.editor-styles-wrapper .wp-block-pullquote,
-.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color blockquote {
+    position: relative;
     text-align: center;
 }
 
-.editor-styles-wrapper .wp-block-pullquote.alignleft,
-.editor-styles-wrapper .wp-block-pullquote.alignright {
-    max-width: 50%;
-}
-
-.editor-styles-wrapper .editor-block-list__block .wp-block-pullquote p {
+.editor-styles-wrapper .wp-block-pullquote::before {
+    background: #fff;
+    border-radius: 50%;
+    color: #cd2653;
+    content: "”";
+    display: block;
+    font-size: 62px;
+    font-weight: 500;
+    line-height: 1.2;
+    margin: 0 auto 15px auto;
+    text-align: center;
+    height: 44px;
+    width: 44px;
+}
+
+.editor-styles-wrapper .wp-block .wp-block-pullquote p {
+    font-family: inherit;
+    font-size: 28px;
     font-weight: 700;
-    line-height: 1.25;
+    line-height: 1.178571429;
+    letter-spacing: -0.041785714em;
     margin-bottom: 20px;
 }
 
-.editor-styles-wrapper .editor-block-list__block .wp-block-pullquote p,
+.editor-styles-wrapper .wp-block .wp-block-pullquote p:last-child {
+    margin-bottom: 0;
+}
+
+.editor-styles-wrapper .wp-block .wp-block-pullquote p,
 .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color blockquote > .block-editor-rich-text p,
-.editor-styles-wrapper .editor-block-list__block[data-type="core/pullquote"][data-align="right"] .editor-rich-text p,
-.editor-styles-wrapper .editor-block-list__block[data-type="core/pullquote"][data-align="left"] .editor-rich-text p {
-    font-size: 1.75em;
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .editor-rich-text p,
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .editor-rich-text p {
+    font-size: 28px;
+}
+
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"],
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] {
+    height: auto;
+    max-height: none;
+}
+
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote,
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote.is-style-solid-color blockquote {
+    text-align: right;
+}
+
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote,
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote.is-style-solid-color blockquote {
+    text-align: left;
+}
+
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit,
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .block-editor-block-list__block-edit {
+    float: none;
+    margin-right: 0;
+    margin-left: 0;
+    max-width: 100%;
+}
+
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit .wp-block-pullquote::before {
+    margin-left: 0;
+}
+
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .block-editor-block-list__block-edit .wp-block-pullquote::before {
+    margin-right: 0;
+}
+
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .is-style-solid-color::before {
+    left: 20px;
+    transform: translateY(-50%);
+}
+
+.editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .is-style-solid-color::before {
+    right: 20px;
+    transform: translateY(-50%);
 }
 
@@ -503 +765 @@
 .editor-styles-wrapper .wp-block-pullquote cite,
 .editor-styles-wrapper .wp-block-pullquote footer {
-    font-size: 14px;
-    font-weight: 600;
+    color: #6d6d6d;
+    font-size: 16px;
+    font-weight: 500;
+    margin-top: 12px;
     text-transform: none;
 }
@@ -512 +776 @@
 .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color {
     padding: 30px 20px;
+    position: relative;
+}
+
+.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color::before {
+    position: absolute;
+    top: 0;
+    right: 50%;
+    transform: translateY(-50%) translateX(50%);
 }
 
 .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color blockquote {
     max-width: 100%;
+    text-align: center;
+}
+
+.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
+.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color .wp-block-pullquote cite,
+.editor-styles-wrapper .wp-block-pullquote.is-style-solid-color .wp-block-pullquote footer {
+    color: inherit;
 }
 
@@ -532 +811 @@
 .editor-styles-wrapper .wp-block-file__button {
     background: #cd2653;
-    border-radius: 3px;
+    border-radius: 0;
     color: #fff;
-    font-size: 16px;
+    font-size: 15px;
     font-weight: 600;
-    line-height: 1;
-    padding: 1.175em 1.75em;
+    letter-spacing: 0.0333em;
+    line-height: 1.25;
+    padding: 1.1em 1.44em;
+    text-transform: uppercase;
 }
 
@@ -549 +830 @@
     background: none;
     border-color: currentColor;
-    color: #1a1b1f;
-    padding: calc(1.175em - 2px) calc(1.75em - 2px);
+    color: #cd2653;
+    padding: calc(1.1em - 2px) calc(1.44em - 2px);
 }
 
@@ -561 +842 @@
 
 /* Block: Latest Comments -------------------- */
+
+.editor-styles-wrapper .wp-block-latest-comments {
+    font-family: inherit;
+    margin-right: 0;
+}
 
 .editor-styles-wrapper .wp-block-latest-comments li.wp-block-latest-comments__comment {
@@ -584 +870 @@
 }
 
-.editor-styles-wrapper .wp-block-latest-comments time {
-    display: block;
-    font-size: 1em;
-    font-weight: 400;
-    margin-top: 5px;
+.editor-styles-wrapper .wp-block-latest-comments__comment-meta a:focus,
+.editor-styles-wrapper .wp-block-latest-comments__comment-meta a:hover {
+    text-decoration: none;
 }
 
@@ -598 +882 @@
 
 .editor-styles-wrapper .wp-block-latest-comments.has-avatars img.avatar {
-    border-radius: 0;
     flex-shrink: 0;
-    height: 60px;
-    margin-left: 15px;
-    width: 60px;
+    margin: 5px 0 0 15px;
 }
 
@@ -608 +889 @@
 
 .editor-styles-wrapper .wp-block-latest-comments__comment-excerpt {
-    font-size: 0.9em;
-    margin-top: 10px;
-}
-
-.editor-styles-wrapper .wp-block-latest-comments__comment-excerpt p:last-child {
-    margin-bottom: 0;
+    margin: 0;
+}
+
+.editor-styles-wrapper .wp-block-latest-comments__comment-excerpt p {
+    font-family: inherit;
+    font-size: 0.7em;
+    margin: 10px 0 0;
 }
 
@@ -619 +901 @@
 /* Block: Latest Posts ----------------------- */
 
+.editor-styles-wrapper ul.wp-block-latest-posts:not(.is-grid) li {
+    margin-top: 15px;
+}
+
 /* STYLE: GRID */
 
 .editor-styles-wrapper .wp-block-latest-posts.is-grid li {
-    border-color: #e1e1e3;
+    border-color: #dcd7ca;
 }
 
 .editor-styles-wrapper ul.wp-block-latest-posts.is-grid li {
     border-style: solid;
-    border-width: 1px 0 0;
-    margin: 0 0 24px 16px;
+    border-width: 2px 0 0;
+    line-height: 1.25;
+    margin: 20px 0 16px 16px;
     padding-top: 12px;
-}
-
-.editor-styles-wrapper ul.wp-block-latest-posts .wp-block-latest-posts__post-date {
-    color: inherit;
-    display: block;
-    font-size: 1em;
-    margin: 8px 0 0;
 }
 
@@ -648 +928 @@
 
 .editor-styles-wrapper .wp-block-embed {
-    margin-bottom: 3rem;
-    margin-top: 3rem;
-}
-
-.editor-styles-wrapper .editor-block-list__block[data-type*="core-embed"][data-align="center"] * {
+    margin-bottom: 30px;
+    margin-top: 30px;
+}
+
+.editor-styles-wrapper .wp-block[data-type*="core-embed"][data-align="center"] * {
     margin-right: auto;
     margin-left: auto;
@@ -676 +956 @@
 }
 
+.editor-styles-wrapper .wp-block-file .wp-block-file__textlink:focus,
+.editor-styles-wrapper .wp-block-file .wp-block-file__textlink:hover {
+    text-decoration: underline;
+}
+
 .editor-styles-wrapper .wp-block-file .wp-block-file__button {
     font-size: 14px;
@@ -684 +969 @@
 
 .editor-styles-wrapper .wp-block-image {
-    margin-bottom: 3rem;
-    margin-top: 3rem;
+    margin-bottom: 30px;
+    margin-top: 30px;
 }
 
 /* Block: Group ------------------------------ */
 
-.wp-block-group p[style*="text-align: center"],
-.wp-block-group p[style*="text-align:center"] {
-    margin-right: auto;
-    margin-left: auto;
-}
-
-.wp-block-group p[style*="text-align: right"],
-.wp-block-group p[style*="text-align:right"] {
-    margin-right: auto;
+.editor-styles-wrapper .wp-block-group.has-background {
+    padding: 20px;
+}
+
+.wp-block-group .wp-block[data-type="core/heading"]:first-child * {
+    margin-top: 0;
 }
 
 /* Block: Paragraph -------------------------- */
 
-.wp-block[data-type="core/paragraph"] p {
-    max-width: 580px;
-}
-
-
-/* -------------------------------------------------------------------------- */
 
 /*  X.  Media Queries
-/* -------------------------------------------------------------------------- */
-
+/* ------------------------------------------- */
+
+
+@media ( min-width: 480px ) {
+
+
+    /* STRUCTURE */
+
+    .editor-styles-wrapper .wp-block[data-align="right"] {
+        margin-left: 0;
+    }
+
+    .editor-styles-wrapper .wp-block[data-align="left"] {
+        margin: 0;
+    }
+
+    /* BLOCK: PULL QUOTE */
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"],
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] {
+        height: 0;
+        max-width: 260px;
+    }
+
+    .wp-block[data-type="core/pullquote"][data-align="left"] [data-block],
+    .wp-block[data-type="core/pullquote"][data-align="right"] [data-block] {
+        margin-top: 0;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit {
+        float: left;
+        margin-right: 20px;
+        max-width: 260px;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .block-editor-block-list__block-edit {
+        float: right;
+        margin-left: 20px;
+        max-width: 260px;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote::before {
+        margin-left: 0;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote::before {
+        margin-right: 0;
+    }
+
+
+}
+
+@media ( min-width: 600px ) {
+
+
+    /* BLOCK: PULLQUOTE */
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit {
+        margin-left: -30px;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .block-editor-block-list__block-edit {
+        margin-right: -30px;
+    }
+
+
+}
 
 @media ( min-width: 700px ) {
@@ -719 +1060 @@
 
     .editor-styles-wrapper > * {
-        font-size: 18px;
-    }
-
-    .editor-block-list__block[data-align="wide"],
-    .editor-block-list__block[data-align="full"] {
+        font-size: 21px;
+    }
+
+    .wp-block[data-align="wide"],
+    .wp-block[data-align="full"] {
         margin-bottom: 60px;
         margin-top: 60px;
@@ -732 +1073 @@
     .editor-post-title__block .editor-post-title__input,
     .editor-styles-wrapper .wp-block h1 {
+        font-size: 64px;
+    }
+
+    .editor-styles-wrapper .wp-block h2 {
         font-size: 48px;
     }
 
-    .editor-styles-wrapper .wp-block h2 {
+    .editor-styles-wrapper .wp-block h3 {
         font-size: 40px;
     }
 
-    .editor-styles-wrapper .wp-block h3 {
+    .editor-styles-wrapper .wp-block h4 {
         font-size: 32px;
     }
 
-    .editor-styles-wrapper .wp-block h4 {
+    .editor-styles-wrapper .wp-block h5 {
         font-size: 24px;
     }
 
-    .editor-styles-wrapper .wp-block h5 {
-        font-size: 21px;
+    .editor-styles-wrapper li,
+    .editor-styles-wrapper p,
+    .editor-styles-wrapper p.wp-block-paragraph {
+        line-height: 1.476;
     }
 
@@ -761 +1108 @@
     }
 
-    /* BLOCK: PULLQUOTE */
-
-    .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color {
-        padding: 40px 30px;
-    }
-
-    .editor-styles-wrapper .editor-block-list__block[data-type="core/pullquote"][data-align="wide"] blockquote > .block-editor-rich-text p,
-    .editor-styles-wrapper .editor-block-list__block[data-type="core/pullquote"][data-align="full"] blockquote > .block-editor-rich-text p {
-        font-size: 2.5em;
+    /* BLOCK: BASE MARGINS */
+
+    /* BLOCK: BUTTON */
+
+    .editor-styles-wrapper .wp-block-button__link,
+    .editor-styles-wrapper .wp-block-file__button {
+        font-size: 17px;
+    }
+
+    /* BLOCK: CODE */
+
+    .editor-styles-wrapper .wp-block-preformatted pre,
+    .editor-styles-wrapper .wp-block-code .block-editor-plain-text,
+    .editor-styles-wrapper .wp-block-verse pre {
+        font-size: 16px;
     }
 
@@ -785 +1138 @@
     }
 
+    /* BLOCK: GROUP */
+
+    .editor-styles-wrapper .wp-block-group.has-background {
+        padding: 40px;
+    }
+
     /* BLOCK: LATEST POSTS */
 
-    .editor-styles-wrapper ul.wp-block-latest-posts.is-grid li {
-        margin: 0 0 40px 16px;
-        padding-top: 24px;
+    /* BLOCK: PULLQUOTE */
+
+    .editor-styles-wrapper .wp-block .wp-block-pullquote p,
+    .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color blockquote > .block-editor-rich-text p,
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .editor-rich-text p,
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .editor-rich-text p {
+        font-size: 32px;
+    }
+
+    .editor-styles-wrapper .wp-block-pullquote__citation,
+    .editor-styles-wrapper .wp-block-pullquote cite,
+    .editor-styles-wrapper .wp-block-pullquote footer {
+        margin-top: 20px;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote::before,
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] .wp-block-pullquote::before {
+        font-size: 113px;
+        height: 80px;
+        margin-bottom: 20px;
+        width: 80px;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color,
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] .wp-block-pullquote.is-style-solid-color {
+        padding: 60px 40px 40px;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] .wp-block-pullquote:not(.is-style-solid-color) {
+        padding-right: 10px;
+        padding-left: 10px;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] blockquote p,
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] blockquote p {
+        font-size: 48px;
+        line-height: 1.203125;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] p,
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] p {
+        font-size: 32px;
+        line-height: 1.1875;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .is-style-solid-color p,
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .is-style-solid-color p {
+        font-size: 26px;
+    }
+
+    /* BLOCK: TABLE */
+
+    .editor-styles-wrapper  table.wp-block-table {
+        font-size: 18px;
+    }
+
+    /* BLOCK: SEPARATOR */
+
+    hr.wp-block-separator {
+        margin-bottom: 60px;
+        margin-top: 60px;
     }
 
@@ -800 +1217 @@
     /* STRUCTURE */
 
-    .editor-block-list__block[data-align="wide"],
-    .editor-block-list__block[data-align="full"] {
+    .wp-block[data-align="wide"],
+    .wp-block[data-align="full"] {
         margin-bottom: 80px;
         margin-top: 80px;
@@ -819 +1236 @@
     }
 
-
-}
-
-
-@media ( min-width: 1220px ) {
-
-
-    /* STRUCTURE */
-
-    .editor-block-list__block[data-align="wide"],
-    .editor-block-list__block[data-align="full"] {
+    /* BLOCK: GROUP */
+
+    .wp-block[data-align="wide"] .wp-block-group.has-background,
+    .wp-block[data-align="full"] .wp-block-group.has-background {
+        padding: 80px 40px;
+    }
+
+    /* BLOCK: SEPARATOR */
+
+    hr.wp-block-separator {
         margin-bottom: 80px;
         margin-top: 80px;
     }
 
-}
+    hr.wp-block-separator.is-style-wide {
+        margin-right: -70px;
+        margin-left: -70px;
+    }
+
+
+}
+
+
+@media ( min-width: 1220px ) {
+
+
+    /* TYPOGRAPHY */
+
+    .editor-post-title__block .editor-post-title__input,
+    .editor-styles-wrapper .wp-block h1 {
+        font-size: 84px;
+    }
+
+    .editor-styles-wrapper .wp-block h6 {
+        font-size: 18px;
+    }
+
+    /* STRUCTURE */
+
+    .wp-block[data-align="wide"],
+    .wp-block[data-align="full"] {
+        margin-bottom: 80px;
+        margin-top: 80px;
+    }
+
+    /* BLOCK: PULLQUOTE */
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color,
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] .wp-block-pullquote.is-style-solid-color {
+        padding: 90px 40px 80px;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] blockquote p,
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="full"] blockquote p {
+        font-size: 64px;
+    }
+
+    /* BLOCK: SEPARATOR */
+
+    hr.wp-block-separator.is-style-wide {
+        margin-right: -150px;
+        margin-left: -150px;
+    }
+
+}
+
+
+@media ( min-width: 1360px ) {
+
+
+    /* STRUCTURE */
+
+    .editor-styles-wrapper .wp-block[data-align="left"],
+    .editor-styles-wrapper .wp-block[data-align="right"] {
+        margin: 0 auto;
+        max-width: 1220px;
+    }
+
+
+    /* BLOCK: PULLQUOTE */
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"] .is-style-solid-color::before,
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .is-style-solid-color::before {
+        top: 0;
+    }
+
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="left"],
+    .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] {
+        margin: 0 auto;
+        max-width: 1220px;
+    }
+
+    /* BLOCK: SEPARATOR */
+
+    hr.wp-block-separator.is-style-wide {
+        margin-right: -200px;
+        margin-left: -200px;
+    }
+
+
+}

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

@@ -14 +14 @@
 .editor-styles-wrapper > * {
     color: #000;
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     font-size: 18px;
 }
@@ -46 +46 @@
 }
 
-/* INTER */
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 400;
-    src:
-        url(../fonts/inter/Inter-Regular.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Regular.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 400;
-    src:
-        url(../fonts/inter/Inter-Italic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Italic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 500;
-    src:
-        url(../fonts/inter/Inter-Medium.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Medium.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 500;
-    src:
-        url(../fonts/inter/Inter-MediumItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-MediumItalic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 600;
-    src:
-        url(../fonts/inter/Inter-SemiBold.woff2) format("woff2"),
-        url(../fonts/inter/Inter-SemiBold.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 600;
-    src:
-        url(../fonts/inter/Inter-SemiBoldItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-SemiBoldItalic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 700;
-    src:
-        url(../fonts/inter/Inter-Bold.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Bold.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 700;
-    src:
-        url(../fonts/inter/Inter-BoldItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-BoldItalic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 800;
-    src:
-        url(../fonts/inter/Inter-ExtraBold.woff2) format("woff2"),
-        url(../fonts/inter/Inter-ExtraBold.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 800;
-    src:
-        url(../fonts/inter/Inter-ExtraBoldItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-ExtraBoldItalic.woff) format("woff");
-}
-
 /* ----------------------------------------------
-Variable font. Usage:
-
-html { font-family: Inter, sans-serif; }
+Inter variable font. Usage:
+
 @supports (font-variation-settings: normal) {
     html { font-family: "Inter var", sans-serif; }
@@ -220 +127 @@
 .editor-styles-wrapper figcaption,
 .editor-styles-wrapper .wp-caption-text {
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
 }
 
@@ -278 +185 @@
     color: #cd2653;
     text-decoration: underline;
+}
+
+.editor-styles-wrapper a:focus,
+.editor-styles-wrapper a:hover {
+    text-decoration: none;
 }
 
@@ -502 +414 @@
 }
 
+.editor-styles-wrapper .wp-block-archives li > a:focus,
+.editor-styles-wrapper .wp-block-archives li > a:hover,
+.editor-styles-wrapper .wp-block-categories li > a:focus,
+.editor-styles-wrapper .wp-block-categories li > a:hover,
+.editor-styles-wrapper .wp-block-latest-posts li > a:focus,
+.editor-styles-wrapper .wp-block-latest-posts li > a:hover {
+    font-weight: 700;
+    text-decoration: none;
+}
+
 .editor-styles-wrapper .wp-block-archives.aligncenter,
 .editor-styles-wrapper .wp-block-categories.aligncenter {
@@ -578 +500 @@
 
 hr.wp-block-separator {
-    border-top: 1px solid rgba(0, 0, 0, 0.42);
+    border-top: 1px solid #6d6d6d;
+    color: #6d6d6d;
     margin: 30px 0;
 }
@@ -587 +510 @@
 
 hr.wp-block-separator:not(.is-style-dots) {
-    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));
+    background: linear-gradient(to left, currentColor calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), currentColor calc(50% + 16px));
+    background-color: transparent !important;
     border: none;
-    color: rgba(0, 0, 0, 0.42);
     height: 1px;
     overflow: visible;
     position: relative;
+}
+
+.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
+    height: 1px;
 }
 
@@ -618 +545 @@
 
 hr.wp-block-separator.is-style-dots::before {
-    color: rgba(0, 0, 0, 0.42);
     font-size: 32px;
     font-weight: 700;
@@ -944 +870 @@
 }
 
+.editor-styles-wrapper .wp-block-latest-comments__comment-meta a:focus,
+.editor-styles-wrapper .wp-block-latest-comments__comment-meta a:hover {
+    text-decoration: none;
+}
+
 /* HAS AVATAR */
 
@@ -1025 +956 @@
 }
 
+.editor-styles-wrapper .wp-block-file .wp-block-file__textlink:focus,
+.editor-styles-wrapper .wp-block-file .wp-block-file__textlink:hover {
+    text-decoration: underline;
+}
+
 .editor-styles-wrapper .wp-block-file .wp-block-file__button {
     font-size: 14px;

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

@@ -19 +19 @@
 }
 
-/* INTER */
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 400;
-    src:
-        url(../fonts/inter/Inter-Regular.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Regular.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 400;
-    src:
-        url(../fonts/inter/Inter-Italic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Italic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 500;
-    src:
-        url(../fonts/inter/Inter-Medium.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Medium.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 500;
-    src:
-        url(../fonts/inter/Inter-MediumItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-MediumItalic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 600;
-    src:
-        url(../fonts/inter/Inter-SemiBold.woff2) format("woff2"),
-        url(../fonts/inter/Inter-SemiBold.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 600;
-    src:
-        url(../fonts/inter/Inter-SemiBoldItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-SemiBoldItalic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 700;
-    src:
-        url(../fonts/inter/Inter-Bold.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Bold.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 700;
-    src:
-        url(../fonts/inter/Inter-BoldItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-BoldItalic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 800;
-    src:
-        url(../fonts/inter/Inter-ExtraBold.woff2) format("woff2"),
-        url(../fonts/inter/Inter-ExtraBold.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 800;
-    src:
-        url(../fonts/inter/Inter-ExtraBoldItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-ExtraBoldItalic.woff) format("woff");
-}
-
 /* ----------------------------------------------
-Variable font. Usage:
-
-html { font-family: Inter, sans-serif; }
+Inter variable font. Usage:
+
 @supports (font-variation-settings: normal) {
     html { font-family: "Inter var", sans-serif; }
@@ -137 +44 @@
 
 body#tinymce.wp-editor { /* stylelint-disable-line no-duplicate-selectors */
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
 }
 
@@ -207 +114 @@
 
 body#tinymce.wp-editor a,
+body#tinymce.wp-editor a:focus,
 body#tinymce.wp-editor a:hover {
     color: #cd2653;
@@ -278 +186 @@
 body#tinymce.wp-editor cite,
 body#tinymce.wp-editor table {
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     line-height: 1;
 }
@@ -627 +535 @@
 }
 
+body#tinymce.wp-editor button:focus,
 body#tinymce.wp-editor button:hover,
 body#tinymce.wp-editor .faux-button:hover,
-body#tinymce.wp-editor .wp-block-button__link:hover,
-body#tinymce.wp-editor .wp-block-file__button:hover,
-body#tinymce.wp-editor input[type="button"]:hover,
-body#tinymce.wp-editor input[type="reset"]:hover,
-body#tinymce.wp-editor input[type="submit"]:hover,
-body#tinymce.wp-editor button:focus,
 body#tinymce.wp-editor .faux-button:focus,
 body#tinymce.wp-editor .wp-block-button__link:focus,
+body#tinymce.wp-editor .wp-block-button__link:hover,
 body#tinymce.wp-editor .wp-block-file__button:focus,
+body#tinymce.wp-editor .wp-block-file__button:hover,
 body#tinymce.wp-editor input[type="button"]:focus,
+body#tinymce.wp-editor input[type="button"]:hover,
 body#tinymce.wp-editor input[type="reset"]:focus,
-body#tinymce.wp-editor input[type="submit"]:focus {
+body#tinymce.wp-editor input[type="reset"]:hover,
+body#tinymce.wp-editor input[type="submit"]:focus,
+body#tinymce.wp-editor input[type="submit"]:hover {
     color: #fff;
     text-decoration: underline;
@@ -659 +567 @@
 
 body#tinymce.wp-editor .is-style-outline .wp-block-button__link,
+body#tinymce.wp-editor .is-style-outline .wp-block-button__link:focus,
 body#tinymce.wp-editor .is-style-outline .wp-block-button__link:hover {
     color: #cd2653;

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

@@ -19 +19 @@
 }
 
-/* INTER */
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 400;
-    src:
-        url(../fonts/inter/Inter-Regular.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Regular.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 400;
-    src:
-        url(../fonts/inter/Inter-Italic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Italic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 500;
-    src:
-        url(../fonts/inter/Inter-Medium.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Medium.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 500;
-    src:
-        url(../fonts/inter/Inter-MediumItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-MediumItalic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 600;
-    src:
-        url(../fonts/inter/Inter-SemiBold.woff2) format("woff2"),
-        url(../fonts/inter/Inter-SemiBold.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 600;
-    src:
-        url(../fonts/inter/Inter-SemiBoldItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-SemiBoldItalic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 700;
-    src:
-        url(../fonts/inter/Inter-Bold.woff2) format("woff2"),
-        url(../fonts/inter/Inter-Bold.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 700;
-    src:
-        url(../fonts/inter/Inter-BoldItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-BoldItalic.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 800;
-    src:
-        url(../fonts/inter/Inter-ExtraBold.woff2) format("woff2"),
-        url(../fonts/inter/Inter-ExtraBold.woff) format("woff");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 800;
-    src:
-        url(../fonts/inter/Inter-ExtraBoldItalic.woff2) format("woff2"),
-        url(../fonts/inter/Inter-ExtraBoldItalic.woff) format("woff");
-}
-
 /* ----------------------------------------------
-Variable font. Usage:
-
-html { font-family: Inter, sans-serif; }
+Inter variable font. Usage:
+
 @supports (font-variation-settings: normal) {
     html { font-family: "Inter var", sans-serif; }
@@ -137 +44 @@
 
 body#tinymce.wp-editor { /* stylelint-disable-line no-duplicate-selectors */
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
 }
 
@@ -207 +114 @@
 
 body#tinymce.wp-editor a,
+body#tinymce.wp-editor a:focus,
 body#tinymce.wp-editor a:hover {
     color: #cd2653;
@@ -278 +186 @@
 body#tinymce.wp-editor cite,
 body#tinymce.wp-editor table {
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
     line-height: 1;
 }
@@ -627 +535 @@
 }
 
+body#tinymce.wp-editor button:focus,
 body#tinymce.wp-editor button:hover,
 body#tinymce.wp-editor .faux-button:hover,
-body#tinymce.wp-editor .wp-block-button__link:hover,
-body#tinymce.wp-editor .wp-block-file__button:hover,
-body#tinymce.wp-editor input[type="button"]:hover,
-body#tinymce.wp-editor input[type="reset"]:hover,
-body#tinymce.wp-editor input[type="submit"]:hover,
-body#tinymce.wp-editor button:focus,
 body#tinymce.wp-editor .faux-button:focus,
 body#tinymce.wp-editor .wp-block-button__link:focus,
+body#tinymce.wp-editor .wp-block-button__link:hover,
 body#tinymce.wp-editor .wp-block-file__button:focus,
+body#tinymce.wp-editor .wp-block-file__button:hover,
 body#tinymce.wp-editor input[type="button"]:focus,
+body#tinymce.wp-editor input[type="button"]:hover,
 body#tinymce.wp-editor input[type="reset"]:focus,
-body#tinymce.wp-editor input[type="submit"]:focus {
+body#tinymce.wp-editor input[type="reset"]:hover,
+body#tinymce.wp-editor input[type="submit"]:focus,
+body#tinymce.wp-editor input[type="submit"]:hover {
     color: #fff;
     text-decoration: underline;
@@ -659 +567 @@
 
 body#tinymce.wp-editor .is-style-outline .wp-block-button__link,
+body#tinymce.wp-editor .is-style-outline .wp-block-button__link:focus,
 body#tinymce.wp-editor .is-style-outline .wp-block-button__link:hover {
     color: #cd2653;

trunk/src/wp-content/themes/twentytwenty/assets/css/font-awesome.css

@@ -3 +3 @@
     font-style: normal;
     font-weight: 400;
-    src: url(../fonts/font-awesome/fa-fallback.eot?15574881);
     src:
-        url(../fonts/font-awesome/fa-fallback.eot?15574881#iefix) format("embedded-opentype"),
         url(../fonts/font-awesome/fa-fallback.woff2?15574881) format("woff2"),
-        url(../fonts/font-awesome/fa-fallback.woff?15574881) format("woff"),
-        url(../fonts/font-awesome/fa-fallback.ttf?15574881) format("truetype"),
-        url(../fonts/font-awesome/fa-fallback.svg?15574881#font-awsome-fallback) format("svg");
+        url(../fonts/font-awesome/fa-fallback.woff?15574881) format("woff");
 }
 
@@ -16 +12 @@
     font-style: normal;
     font-weight: 400;
-    src: url(../fonts/font-awesome/fa-brands-400.eot);
     src:
-        url(../fonts/font-awesome/fa-brands-400.eot?#iefix) format("embedded-opentype"),
         url(../fonts/font-awesome/fa-brands-400.woff2) format("woff2"),
-        url(../fonts/font-awesome/fa-brands-400.woff) format("woff"),
-        url(../fonts/font-awesome/fa-brands-400.ttf) format("truetype"),
-        url(../fonts/font-awesome/fa-brands-400.svg#fontawesome) format("svg");
+        url(../fonts/font-awesome/fa-brands-400.woff) format("woff");
 }

trunk/src/wp-content/themes/twentytwenty/assets/js/customize-controls.js

@@ -1 @@
-/* global backgroundColors, twentyTwentyColor, Color, jQuery, wp, _ */
+/* global twentyTwentyBgColors, twentyTwentyColor, Color, jQuery, wp, _ */
 /**
  * Customizer enhancements for a better user experience.
@@ -15 +15 @@
             value.bind( function( to ) {
                 // Update the value for our accessible colors for all areas.
-                Object.keys( backgroundColors ).forEach( function( context ) {
+                Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
                     var backgroundColorValue;
-                    if ( backgroundColors[ context ].color ) {
-                        backgroundColorValue = backgroundColors[ context ].color;
+                    if ( twentyTwentyBgColors[ context ].color ) {
+                        backgroundColorValue = twentyTwentyBgColors[ context ].color;
                     } else {
-                        backgroundColorValue = wp.customize( backgroundColors[ context ].setting ).get();
+                        backgroundColorValue = wp.customize( twentyTwentyBgColors[ context ].setting ).get();
                     }
                     twentyTwentySetAccessibleColorsValue( context, backgroundColorValue, to );
@@ -28 +28 @@
 
         // Add a listener for background-color changes.
-        Object.keys( backgroundColors ).forEach( function( context ) {
-            wp.customize( backgroundColors[ context ].setting, function( value ) {
+        Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
+            wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {
                 value.bind( function( to ) {
                     // Update the value for our accessible colors for this area.
@@ -69 +69 @@
 
             // Get borders color.
-            value[ context ].borders = Color( {
-                h: colors.bgColorObj.h(),
-                s: colors.bgColorObj.s() * 0.3922,
-                l: colors.isDark ? colors.bgColorObj.l() + 9 : colors.bgColorObj.l() - 9
-            } ).toCSS();
+            value[ context ].borders = colors.bgColorObj
+                .clone()
+                .getReadableContrastingColor( colors.bgColorObj, 1.36 )
+                .toCSS();
 
             // Get secondary color.

trunk/src/wp-content/themes/twentytwenty/assets/js/customize-preview.js

@@ -1 @@
-/* global backgroundColors, previewElements, jQuery, _, wp */
+/* global twentyTwentyBgColors, twentyTwentyPreviewEls, jQuery, _, wp */
 /**
  * Customizer enhancements for a better user experience.
@@ -8 +8 @@
  */
 
-( function() {
+( function( $, api, _ ) {
+    /**
+     * Return a value for our partial refresh.
+     *
+     * @param {Object} partial  Current partial.
+     *
+     * @return {jQuery.Promise} Resolved promise.
+     */
+    function returnDeferred( partial ) {
+        var deferred = new $.Deferred();
+
+        deferred.resolveWith( partial, _.map( partial.placements(), function() {
+            return '';
+        } ) );
+
+        return deferred.promise();
+    }
+
+    // Selective refresh for "Fixed Background Image"
+    api.selectiveRefresh.partialConstructor.cover_fixed = api.selectiveRefresh.Partial.extend( {
+
+        /**
+         * Override the refresh method
+         *
+         * @return {jQuery.Promise} Resolved promise.
+         */
+        refresh: function() {
+            var partial, cover, params;
+
+            partial = this;
+            params = partial.params;
+            cover = $( params.selector );
+
+            if ( cover.length && cover.hasClass( 'bg-image' ) ) {
+                cover.toggleClass( 'bg-attachment-fixed' );
+            }
+
+            return returnDeferred( partial );
+        }
+
+    } );
+
+    // Selective refresh for "Image Overlay Opacity"
+    api.selectiveRefresh.partialConstructor.cover_opacity = api.selectiveRefresh.Partial.extend( {
+
+        /**
+         * Input attributes.
+         *
+         * @type {Object}
+         */
+        attrs: {},
+
+        /**
+         * Override the refresh method
+         *
+         * @return {jQuery.Promise} Resolved promise.
+         */
+        refresh: function() {
+            var partial, ranges, attrs, setting, params, cover, className, classNames;
+
+            partial = this;
+            attrs = partial.attrs;
+            ranges = _.range( attrs.min, attrs.max + attrs.step, attrs.step );
+            params = partial.params;
+            setting = api( params.primarySetting );
+            cover = $( params.selector );
+
+            if ( cover.length ) {
+                classNames = _.map( ranges, function( val ) {
+                    return 'opacity-' + val;
+                } );
+
+                className = classNames[ ranges.indexOf( parseInt( setting.get(), 10 ) ) ];
+
+                cover.removeClass( classNames.join( ' ' ) );
+                cover.addClass( className );
+            }
+
+            return returnDeferred( partial );
+        }
+
+    } );
+
     // Add listener for the "header_footer_background_color" control.
-    wp.customize( 'header_footer_background_color', function( value ) {
+    api( 'header_footer_background_color', function( value ) {
         value.bind( function( to ) {
             // Add background color to header and footer wrappers.
-            jQuery( '#site-header,#site-footer' ).css( 'background-color', to );
+            $( '#site-header,#site-footer' ).css( 'background-color', to );
+
+            // Change body classes if this is the same background-color as the content background.
+            if ( to.toLowerCase() === api( 'background_color' ).get().toLowerCase() ) {
+                $( 'body' ).addClass( 'reduced-spacing' );
+            } else {
+                $( 'body' ).removeClass( 'reduced-spacing' );
+            }
+        } );
+    } );
+
+    // Add listener for the "background_color" control.
+    api( 'background_color', function( value ) {
+        value.bind( function( to ) {
+            // Change body classes if this is the same background-color as the header/footer background.
+            if ( to.toLowerCase() === api( 'header_footer_background_color' ).get().toLowerCase() ) {
+                $( 'body' ).addClass( 'reduced-spacing' );
+            } else {
+                $( 'body' ).removeClass( 'reduced-spacing' );
+            }
         } );
     } );
 
     // Add listener for the accent color.
-    wp.customize( 'accent_hue', function( value ) {
+    api( 'accent_hue', function( value ) {
         value.bind( function() {
             // Generate the styles.
             // Add a small delay to be sure the accessible colors were generated.
             setTimeout( function() {
-                Object.keys( backgroundColors ).forEach( function( context ) {
+                Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
                     twentyTwentyGenerateColorA11yPreviewStyles( context );
                 } );
@@ -31 +132 @@
 
     // Add listeners for background-color settings.
-    Object.keys( backgroundColors ).forEach( function( context ) {
-        wp.customize( backgroundColors[ context ].setting, function( value ) {
+    Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
+        wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {
             value.bind( function() {
                 // Generate the styles.
@@ -56 +157 @@
         var a11yColors = window.parent.wp.customize( 'accent_accessible_colors' ).get(),
             stylesheedID = 'twentytwenty-customizer-styles-' + context,
-            stylesheet = jQuery( '#' + stylesheedID ),
+            stylesheet = $( '#' + stylesheedID ),
             styles = '';
         // If the stylesheet doesn't exist, create it and append it to <head>.
         if ( ! stylesheet.length ) {
-            jQuery( '#twentytwenty-style-inline-css' ).after( '<style id="' + stylesheedID + '"></style>' );
-            stylesheet = jQuery( '#' + stylesheedID );
+            $( '#twentytwenty-style-inline-css' ).after( '<style id="' + stylesheedID + '"></style>' );
+            stylesheet = $( '#' + stylesheedID );
         }
         if ( ! _.isUndefined( a11yColors[ context ] ) ) {
             // Check if we have elements defined.
-            if ( previewElements[ context ] ) {
-                _.each( previewElements[ context ], function( items, setting ) {
+            if ( twentyTwentyPreviewEls[ context ] ) {
+                _.each( twentyTwentyPreviewEls[ context ], function( items, setting ) {
                     _.each( items, function( elements, property ) {
                         if ( ! _.isUndefined( a11yColors[ context ][ setting ] ) ) {
@@ -79 +180 @@
     }
     // Generate styles on load. Handles page-changes on the preview pane.
-    jQuery( document ).ready( function() {
+    $( document ).ready( function() {
         twentyTwentyGenerateColorA11yPreviewStyles( 'content' );
         twentyTwentyGenerateColorA11yPreviewStyles( 'header-footer' );
     } );
-}() );
+}( jQuery, wp.customize, _ ) );

trunk/src/wp-content/themes/twentytwenty/assets/js/index.js

@@ -7 +7 @@
 // polyfill closest
 // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
-if ( ! Element.prototype.matches ) {
-    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
-}
-
 if ( ! Element.prototype.closest ) {
     Element.prototype.closest = function( s ) {
@@ -53 +49 @@
     return event;
 };
+
+// matches "polyfill"
+// https://developer.mozilla.org/es/docs/Web/API/Element/matches
+
+if ( ! Element.prototype.matches ) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function( s ) {
+            var matches = ( this.document || this.ownerDocument ).querySelectorAll( s ),
+                i = matches.length;
+            while ( --i >= 0 && matches.item( i ) !== this ) {}
+            return i > -1;
+        };
+}
 
 /*  -----------------------------------------------------------------------------------------------
@@ -138 +152 @@
 
         function htmlStyles() {
+            var overflow = window.innerHeight > document.documentElement.getBoundingClientRect().height;
+
             return {
-                'overflow-y': 'scroll',
+                'overflow-y': overflow ? 'hidden' : 'scroll',
                 position: 'fixed',
                 width: '100%',
@@ -211 +227 @@
 
 /*  -----------------------------------------------------------------------------------------------
-    Focus Management
---------------------------------------------------------------------------------------------------- */
-
-twentytwenty.focusManagement = {
-
-    init: function() {
-        // If the visitor tabs out of the main menu, return focus to the navigation toggle
-        // Also, if the visitor tabs into a hidden element, move the focus to the element after the hidden element
-        this.focusLoop();
-    },
-
-    focusLoop: function() {
-        document.addEventListener( 'focusin', function( event ) {
-            var element = event.target;
-            var menuModal = document.querySelector( '.menu-modal' );
-            var headerToggles = document.querySelector( '.header-toggles' );
-            var searchModal = document.querySelector( '.search-modal' );
-            if ( menuModal && menuModal.classList.contains( '.active' ) ) {
-                if ( ! menuModal.contains( element ) && headerToggles && ! headerToggles.contains( element ) ) {
-                    document.querySelector( '.close-nav-toggle' ).focus();
-                }
-            } else if ( searchModal && ! searchModal.classList.contains( '.active' ) ) {
-                if ( ! searchModal.contains( element ) ) {
-                    searchModal.querySelector( '.search-field' ).focus();
-                }
-            }
-        } );
-    }
-
-}; // twentytwenty.focusManagement
-
-/*  -----------------------------------------------------------------------------------------------
     Intrinsic Ratio Embeds
 --------------------------------------------------------------------------------------------------- */
@@ -250 +234 @@
     init: function() {
         this.makeFit();
-
-        window.addEventListener( 'fit-videos', function() {
-            this.makeFit();
-        }.bind( this ) );
 
         window.addEventListener( 'resize', function() {
@@ -384 +364 @@
 
 /*  -----------------------------------------------------------------------------------------------
-    Main Menu
+    Modal Menu
 --------------------------------------------------------------------------------------------------- */
 twentytwenty.modalMenu = {
@@ -391 +371 @@
         // If the current menu item is in a sub level, expand all the levels higher up on load
         this.expandLevel();
+        this.goBackToCloseButton();
     },
 
     expandLevel: function() {
-        var modalMenu = document.querySelector( '.modal-menu' );
-        var activeMenuItem = modalMenu.querySelector( '.current-menu-item' );
-
-        if ( activeMenuItem ) {
-            twentytwentyFindParents( activeMenuItem, 'li' ).forEach( function( element ) {
-                var subMenuToggle = element.querySelector( '.sub-menu-toggle' );
-                if ( subMenuToggle ) {
-                    subMenuToggle.click();
+        var modalMenus = document.querySelectorAll( '.modal-menu' );
+
+        modalMenus.forEach( function( modalMenu ) {
+            var activeMenuItem = modalMenu.querySelector( '.current-menu-item' );
+
+            if ( activeMenuItem ) {
+                twentytwentyFindParents( activeMenuItem, 'li' ).forEach( function( element ) {
+                    var subMenuToggle = element.querySelector( '.sub-menu-toggle' );
+                    if ( subMenuToggle ) {
+                        twentytwenty.toggles.performToggle( subMenuToggle, true );
+                    }
+                } );
+            }
+        } );
+    },
+
+    // If the current menu item is the last one, return to close button when tab
+    goBackToCloseButton: function() {
+        document.addEventListener( 'keydown', function( event ) {
+            var desktopMenuButton = document.querySelector( '.toggle.close-nav-toggle' );
+            var mobileMenuButton = document.querySelector( '.toggle.mobile-nav-toggle' );
+            var isMobileMenu = desktopMenuButton ? window.getComputedStyle( desktopMenuButton, null ).getPropertyValue( 'display' ) === 'none' : false;
+            var firstMenuItem = isMobileMenu ? mobileMenuButton : desktopMenuButton;
+
+            var menuLinks = isMobileMenu ?
+                document.querySelectorAll( '.menu-modal .mobile-menu li' ) :
+                document.querySelectorAll( '.menu-modal .expanded-menu li' );
+
+            var socialLinks = document.querySelectorAll( '.menu-modal .social-menu > li' );
+            var hasSocialMenu = document.querySelectorAll( '.menu-modal .social-menu' ).length > 0;
+            var lastModalMenuItems = hasSocialMenu ? socialLinks : menuLinks;
+            var focusedElementParentLi = twentytwentyFindParents( event.target, 'li' );
+            var focusedElementIsInsideModal = twentytwentyFindParents( event.target, '.menu-modal' ).length > 0;
+            var lastMenuItem = lastModalMenuItems[lastModalMenuItems.length - 1];
+
+            var isFirstModalItem = isMobileMenu ?
+                event.target === mobileMenuButton :
+                focusedElementIsInsideModal && event.target === desktopMenuButton;
+
+            var isLastModalItem = focusedElementIsInsideModal && focusedElementParentLi[0] ?
+                focusedElementParentLi[0].className === lastMenuItem.className :
+                undefined;
+
+            if ( ! event.shiftKey && event.key === 'Tab' && isLastModalItem ) {
+                // Forward
+                event.preventDefault();
+                firstMenuItem.focus();
+            }
+            if ( event.shiftKey && event.key === 'Tab' && isFirstModalItem ) {
+                // Backward
+                event.preventDefault();
+                lastMenuItem.querySelector( 'a' ).focus();
+            }
+        } );
+    }
+}; // twentytwenty.modalMenu
+
+/*  -----------------------------------------------------------------------------------------------
+    Primary Menu
+--------------------------------------------------------------------------------------------------- */
+
+twentytwenty.primaryMenu = {
+
+    init: function() {
+        this.focusMenuWithChildren();
+    },
+
+    // The focusMenuWithChildren() function implements Keyboard Navigation in the Primary Menu
+    // by adding the '.focus' class to all 'li.menu-item-has-children' when the focus is on the 'a' element.
+    focusMenuWithChildren: function() {
+        // Get all the link elements within the primary menu.
+        var menu = document.querySelector( '.primary-menu-wrapper' );
+        var links = menu.getElementsByTagName( 'a' );
+        var i, len;
+
+        // Each time a menu link is focused or blurred, toggle focus.
+        for ( i = 0, len = links.length; i < len; i++ ) {
+            links[i].addEventListener( 'focus', toggleFocus, true );
+            links[i].addEventListener( 'blur', toggleFocus, true );
+        }
+
+        //Sets or removes the .focus class on an element.
+        function toggleFocus() {
+            var self = this;
+
+            // Move up through the ancestors of the current link until we hit .primary-menu.
+            while ( -1 === self.className.indexOf( 'primary-menu' ) ) {
+                // On li elements toggle the class .focus.
+                if ( 'li' === self.tagName.toLowerCase() ) {
+                    if ( -1 !== self.className.indexOf( 'focus' ) ) {
+                        self.className = self.className.replace( ' focus', '' );
+                    } else {
+                        self.className += ' focus';
+                    }
                 }
-            } );
-        }
-    }
-}; // twentytwenty.modalMenu
+                self = self.parentElement;
+            }
+        }
+    }
+}; // twentytwenty.primaryMenu
 
 /*  -----------------------------------------------------------------------------------------------
@@ -425 +493 @@
     },
 
+    performToggle: function( element, instantly ) {
+        var toggle, targetString, target, timeOutTime, classToToggle, activeClass;
+
+        // Get our targets
+        toggle = element;
+        targetString = toggle.dataset.toggleTarget;
+        activeClass = 'active';
+
+        if ( targetString === 'next' ) {
+            target = toggle.nextSibling;
+        } else {
+            target = document.querySelector( targetString );
+        }
+
+        // Trigger events on the toggle targets before they are toggled
+        if ( target.classList.contains( activeClass ) ) {
+            target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-before-active' ) );
+        } else {
+            target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-before-inactive' ) );
+        }
+
+        // Get the class to toggle, if specified
+        classToToggle = toggle.dataset.classToToggle ? toggle.dataset.classToToggle : activeClass;
+
+        // For cover modals, set a short timeout duration so the class animations have time to play out
+        timeOutTime = 0;
+
+        if ( target.classList.contains( 'cover-modal' ) ) {
+            timeOutTime = 10;
+        }
+
+        setTimeout( function() {
+            var focusElement, duration, newTarget, subMenued;
+
+            subMenued = target.classList.contains( 'sub-menu' );
+            newTarget = subMenued ? toggle.closest( '.menu-item' ).querySelector( '.sub-menu' ) : target;
+            duration = toggle.dataset.toggleDuration;
+
+            // Toggle the target of the clicked toggle
+            if ( toggle.dataset.toggleType === 'slidetoggle' && ! instantly && duration !== '0' ) {
+                twentytwentyMenuToggle( newTarget, duration );
+            } else {
+                newTarget.classList.toggle( classToToggle );
+            }
+
+            // If the toggle target is 'next', only give the clicked toggle the active class
+            if ( targetString === 'next' ) {
+                toggle.classList.toggle( activeClass );
+            } else if ( target.classList.contains( 'sub-menu' ) ) {
+                toggle.classList.toggle( activeClass );
+            } else {
+                // If not, toggle all toggles with this toggle target
+                document.querySelector( '*[data-toggle-target="' + targetString + '"]' ).classList.toggle( activeClass );
+            }
+
+            // Toggle aria-expanded on the target
+            twentytwentyToggleAttribute( target, 'aria-expanded', 'true', 'false' );
+
+            // Toggle aria-expanded on the toggle
+            twentytwentyToggleAttribute( toggle, 'aria-expanded', 'true', 'false' );
+
+            // Toggle body class
+            if ( toggle.dataset.toggleBodyClass ) {
+                document.querySelector( 'body' ).classList.toggle( toggle.dataset.toggleBodyClass );
+            }
+
+            // Check whether to set focus
+            if ( toggle.dataset.setFocus ) {
+                focusElement = document.querySelector( toggle.dataset.setFocus );
+
+                if ( focusElement ) {
+                    if ( target.classList.contains( activeClass ) ) {
+                        focusElement.focus();
+                    } else {
+                        focusElement.blur();
+                    }
+                }
+            }
+
+            // Trigger the toggled event on the toggle target
+            target.dispatchEvent( twentytwenty.createEvent( 'toggled' ) );
+
+            // Trigger events on the toggle targets after they are toggled
+            if ( target.classList.contains( activeClass ) ) {
+                target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-after-active' ) );
+            } else {
+                target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-after-inactive' ) );
+            }
+        }, timeOutTime );
+    },
+
     // Do the toggle
     toggle: function() {
+        var self = this;
+
         document.querySelectorAll( '*[data-toggle-target]' ).forEach( function( element ) {
             element.addEventListener( 'click', function() {
-                var toggle, targetString, target, timeOutTime, classToToggle, activeClass;
-
-                // Get our targets
-                toggle = element;
-                targetString = toggle.dataset.toggleTarget;
-                activeClass = 'active';
-
-                if ( targetString === 'next' ) {
-                    target = toggle.nextSibling;
-                } else {
-                    target = document.querySelector( targetString );
-                }
-
-                // Trigger events on the toggle targets before they are toggled
-                if ( target.classList.contains( activeClass ) ) {
-                    target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-before-active' ) );
-                } else {
-                    target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-before-inactive' ) );
-                }
-
-                // Get the class to toggle, if specified
-                classToToggle = toggle.dataset.classToToggle ? toggle.dataset.classToToggle : activeClass;
-
-                // For cover modals, set a short timeout duration so the class animations have time to play out
-                timeOutTime = 0;
-
-                if ( target.classList.contains( 'cover-modal' ) ) {
-                    timeOutTime = 10;
-                }
-
-                setTimeout( function() {
-                    var focusElement, duration, newTarget, subMenued;
-
-                    // Toggle the target of the clicked toggle
-                    if ( toggle.dataset.toggleType === 'slidetoggle' ) {
-                        duration = toggle.dataset.toggleDuration ? toggle.dataset.toggleDuration : 250;
-                        subMenued = target.classList.contains( 'sub-menu' );
-                        newTarget = subMenued ? toggle.closest( '.menu-item' ).querySelector( '.sub-menu' ) : target;
-
-                        twentytwentySlideToggle( newTarget, duration );
-                    } else {
-                        target.classList.toggle( classToToggle );
-                    }
-
-                    // If the toggle target is 'next', only give the clicked toggle the active class
-                    if ( targetString === 'next' ) {
-                        toggle.classList.toggle( activeClass );
-                    } else if ( target.classList.contains( 'sub-menu' ) ) {
-                        toggle.classList.toggle( activeClass );
-                    } else {
-                        // If not, toggle all toggles with this toggle target
-                        document.querySelector( '*[data-toggle-target="' + targetString + '"]' ).classList.toggle( activeClass );
-                    }
-
-                    // Toggle aria-expanded on the target
-                    twentytwentyToggleAttribute( target, 'aria-expanded', 'true', 'false' );
-
-                    // Toggle aria-expanded on the toggle
-                    twentytwentyToggleAttribute( toggle, 'aria-expanded', 'true', 'false' );
-
-                    // Toggle body class
-                    if ( toggle.dataset.toggleBodyClass ) {
-                        document.querySelector( 'body' ).classList.toggle( toggle.dataset.toggleBodyClass );
-                    }
-
-                    // Check whether to set focus
-                    if ( toggle.dataset.setFocus ) {
-                        focusElement = document.querySelector( toggle.dataset.setFocus );
-
-                        if ( focusElement ) {
-                            if ( target.classList.contains( activeClass ) ) {
-                                focusElement.focus();
-                            } else {
-                                focusElement.blur();
-                            }
-                        }
-                    }
-
-                    // Trigger the toggled event on the toggle target
-                    target.dispatchEvent( twentytwenty.createEvent( 'toggled' ) );
-
-                    // Trigger events on the toggle targets after they are toggled
-                    if ( target.classList.contains( activeClass ) ) {
-                        target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-after-active' ) );
-                    } else {
-                        target.dispatchEvent( twentytwenty.createEvent( 'toggle-target-after-inactive' ) );
-                    }
-                }, timeOutTime );
+                self.performToggle( element );
             } );
         } );
@@ -595 +669 @@
     twentytwenty.smoothScroll.init();   // Smooth scroll to anchor link or a specific element
     twentytwenty.modalMenu.init();  // Modal Menu
-    twentytwenty.focusManagement.init();    // Focus Management
+    twentytwenty.primaryMenu.init();    // Primary Menu
 } );
 
@@ -619 +693 @@
 
 /**
- * twentytwentySlideUp
- *
- * this implementation is coming from https://w3bits.com/javascript-slidetoggle/
+ * Toggle a menu item on or off.
  *
  * @param {HTMLElement} target
  * @param {number} duration
  */
-function twentytwentySlideUp( target, duration ) {
-    target.style.transitionProperty = 'height, margin, padding'; /* [1.1] */
-    target.style.transitionDuration = duration + 'ms'; /* [1.2] */
-    target.style.boxSizing = 'border-box'; /* [2] */
-    target.style.height = target.offsetHeight + 'px'; /* [3] */
-    target.style.height = 0; /* [4] */
-    target.style.paddingTop = 0; /* [5.1] */
-    target.style.paddingBottom = 0; /* [5.2] */
-    target.style.marginTop = 0; /* [6.1] */
-    target.style.marginBottom = 0; /* [7.2] */
-    target.style.overflow = 'hidden'; /* [7] */
-    window.setTimeout( function() {
-        target.style.display = 'none'; /* [8] */
-        target.style.removeProperty( 'height' ); /* [9] */
-        target.style.removeProperty( 'padding-top' ); /* [10.1] */
-        target.style.removeProperty( 'padding-bottom' ); /* [10.2] */
-        target.style.removeProperty( 'margin-top' ); /* [11.1] */
-        target.style.removeProperty( 'margin-bottom' ); /* [11.2] */
-        target.style.removeProperty( 'overflow' ); /* [12] */
-        target.style.removeProperty( 'transition-duration' ); /* [13.1] */
-        target.style.removeProperty( 'transition-property' ); /* [13.2] */
-    }, duration );
-}
-
-/**
- * twentytwentySlideDown
- *
- * this implementation is coming from https://w3bits.com/javascript-slidetoggle/
- *
- * @param {HTMLElement} target
- * @param {number} duration
- */
-function twentytwentySlideDown( target, duration ) {
-    var height, display;
-    target.style.removeProperty( 'display' ); /* [1] */
-    display = window.getComputedStyle( target ).display;
-    if ( display === 'none' ) { /* [2] */
-        display = 'block';
-    }
-    target.style.display = display;
-
-    height = target.offsetHeight; /* [3] */
-    target.style.height = 0; /* [4] */
-    target.style.paddingTop = 0; /* [5.1] */
-    target.style.paddingBottom = 0; /* [5.2] */
-    target.style.marginTop = 0; /* [6.1] */
-    target.style.marginBottom = 0; /* [6.2] */
-    target.style.overflow = 'hidden'; /* [7] */
-
-    target.style.boxSizing = 'border-box'; /* [8] */
-    target.style.transitionProperty = 'height, margin, padding'; /* [9.1] */
-    target.style.transitionDuration = duration + 'ms'; /* [9.2] */
-    target.style.height = height + 'px'; /* [10] */
-    target.style.removeProperty( 'padding-top' ); /* [11.1] */
-    target.style.removeProperty( 'padding-bottom' ); /* [11.2] */
-    target.style.removeProperty( 'margin-top' ); /* [12.1] */
-    target.style.removeProperty( 'margin-bottom' ); /* [12.2] */
-
-    window.setTimeout( function() {
-        target.style.removeProperty( 'height' ); /* [13] */
-        target.style.removeProperty( 'overflow' ); /* [14] */
-        target.style.removeProperty( 'transition-duration' ); /* [15.1] */
-        target.style.removeProperty( 'transition-property' ); /* [15.2] */
-    }, duration );
-}
-
-/**
- * twentytwentySlideToggle
- *
- * this implementation is coming from https://w3bits.com/javascript-slidetoggle/
- *
- * @param {HTMLElement} target
- * @param {number} duration
- */
-function twentytwentySlideToggle( target, duration ) {
-    if ( duration === undefined ) {
-        duration = 500;
-    }
-
-    if ( window.getComputedStyle( target ).display === 'none' ) {
-        return twentytwentySlideDown( target, duration );
-    }
-    return twentytwentySlideUp( target, duration );
+function twentytwentyMenuToggle( target, duration ) {
+    var initialPositions = [];
+    var finalPositions = [];
+    var initialParentHeight, finalParentHeight;
+    var menu, menuItems;
+    var transitionListener;
+
+    if ( ! target ) {
+        return;
+    }
+
+    menu = target.closest( '.menu-wrapper' );
+
+    // Step 1: look at the initial positions of every menu item.
+    menuItems = menu.querySelectorAll( '.menu-item' );
+
+    menuItems.forEach( function( menuItem, index ) {
+        initialPositions[ index ] = { x: menuItem.offsetLeft, y: menuItem.offsetTop };
+    } );
+    initialParentHeight = target.parentElement.offsetHeight;
+
+    target.classList.add( 'toggling-target' );
+
+    // Step 2: toggle target menu item and look at the final positions of every menu item.
+    target.classList.toggle( 'active' );
+
+    menuItems.forEach( function( menuItem, index ) {
+        finalPositions[ index ] = { x: menuItem.offsetLeft, y: menuItem.offsetTop };
+    } );
+    finalParentHeight = target.parentElement.offsetHeight;
+
+    // Step 3: close target menu item again.
+    // The whole process happens without giving the browser a chance to render, so it's invisible.
+    target.classList.toggle( 'active' );
+
+    // Step 4: prepare animation.
+    // Position all the items with absolute offsets, at the same starting position.
+    // Shouldn't result in any visual changes if done right.
+    menu.classList.add( 'is-toggling' );
+    target.classList.toggle( 'active' );
+    menuItems.forEach( function( menuItem, index ) {
+        var initialPosition = initialPositions[ index ];
+        if ( initialPosition.y === 0 && menuItem.parentElement === target ) {
+            initialPosition.y = initialParentHeight;
+        }
+        menuItem.style.transform = 'translate(' + initialPosition.x + 'px, ' + initialPosition.y + 'px)';
+    } );
+
+    // The double rAF is unfortunately needed, since we're toggling CSS classes, and
+    // the only way to ensure layout completion here across browsers is to wait twice.
+    // This just delays the start of the animation by 2 frames and is thus not an issue.
+    requestAnimationFrame( function() {
+        requestAnimationFrame( function() {
+            // Step 5: start animation by moving everything to final position.
+            // All the layout work has already happened, while we were preparing for the animation.
+            // The animation now runs entirely in CSS, using cheap CSS properties (opacity and transform)
+            // that don't trigger the layout or paint stages.
+            menu.classList.add( 'is-animating' );
+            menuItems.forEach( function( menuItem, index ) {
+                var finalPosition = finalPositions[ index ];
+                if ( finalPosition.y === 0 && menuItem.parentElement === target ) {
+                    finalPosition.y = finalParentHeight;
+                }
+                if ( duration !== undefined ) {
+                    menuItem.style.transitionDuration = duration + 'ms';
+                }
+                menuItem.style.transform = 'translate(' + finalPosition.x + 'px, ' + finalPosition.y + 'px)';
+            } );
+            if ( duration !== undefined ) {
+                target.style.transitionDuration = duration + 'ms';
+            }
+        } );
+
+        // Step 6: finish toggling.
+        // Remove all transient classes when the animation ends.
+        transitionListener = function() {
+            menu.classList.remove( 'is-animating' );
+            menu.classList.remove( 'is-toggling' );
+            target.classList.remove( 'toggling-target' );
+            menuItems.forEach( function( menuItem ) {
+                menuItem.style.transform = '';
+                menuItem.style.transitionDuration = '';
+            } );
+            target.style.transitionDuration = '';
+            target.removeEventListener( 'transitionend', transitionListener );
+        };
+
+        target.addEventListener( 'transitionend', transitionListener );
+    } );
 }
 

trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php

@@ -155 +155 @@
             );
 
-            /**
-             * Custom Accent Colors.
-            */
-            $accent_color_options = self::get_color_options();
-
-            // Loop over the color options and add them to the customizer.
-            foreach ( $accent_color_options as $color_option_name => $color_option ) {
-
-                $wp_customize->add_setting(
-                    $color_option_name,
-                    array(
-                        'default'           => $color_option['default'],
-                        'sanitize_callback' => 'sanitize_hex_color',
-                    )
-                );
-
-                $wp_customize->add_control(
-                    new WP_Customize_Color_Control(
-                        $wp_customize,
-                        $color_option_name,
-                        array(
-                            'label'    => $color_option['label'],
-                            'section'  => 'colors',
-                            'priority' => 10,
-                        )
-                    )
-                );
-
-            }
-
             // Update background color with postMessage, so inline CSS output is updated as well.
             $wp_customize->get_setting( 'background_color' )->transport = 'postMessage';
@@ -198 +168 @@
                     'priority'    => 40,
                     'capability'  => 'edit_theme_options',
-                    'description' => __( 'Settings for this theme.', 'twentytwenty' ),
+                    'description' => __( 'Specific settings for the Twenty Twenty theme.', 'twentytwenty' ),
                 )
             );
@@ -208 +178 @@
                 array(
                     'capability'        => 'edit_theme_options',
-                    'default'           => false,
+                    'default'           => true,
                     'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
                 )
@@ -216 +186 @@
                 'enable_header_search',
                 array(
-                    'type'        => 'checkbox',
-                    'section'     => 'options',
-                    'priority'    => 10,
-                    'label'       => __( 'Show search in header', 'twentytwenty' ),
-                    'description' => __( 'Uncheck to hide the search in the header.', 'twentytwenty' ),
+                    'type'     => 'checkbox',
+                    'section'  => 'options',
+                    'priority' => 10,
+                    'label'    => __( 'Show search in header', 'twentytwenty' ),
                 )
             );
@@ -238 +207 @@
                 'blog_content',
                 array(
-                    'type'        => 'radio',
-                    'section'     => 'options',
-                    'priority'    => 10,
-                    'label'       => __( 'On archive pages, posts show:', 'twentytwenty' ),
-                    'description' => __( 'Search results always show the summary.', 'twentytwenty' ),
-                    'choices'     => array(
+                    'type'     => 'radio',
+                    'section'  => 'options',
+                    'priority' => 10,
+                    'label'    => __( 'On archive pages, posts show:', 'twentytwenty' ),
+                    'choices'  => array(
                         'full'    => __( 'Full text', 'twentytwenty' ),
                         'summary' => __( 'Summary', 'twentytwenty' ),
@@ -271 +239 @@
                     'default'           => true,
                     'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
+                    'transport'         => 'postMessage',
                 )
             );
@@ -281 +250 @@
                     'label'       => __( 'Fixed Background Image', 'twentytwenty' ),
                     'description' => __( 'Creates a parallax effect when the visitor scrolls.', 'twentytwenty' ),
+                )
+            );
+
+            $wp_customize->selective_refresh->add_partial(
+                'cover_template_fixed_background',
+                array(
+                    'selector' => '.cover-header',
+                    'type'     => 'cover_fixed',
                 )
             );
@@ -347 +324 @@
             );
 
-            /* Overlay Blend Mode ------------ */
-
-            $wp_customize->add_setting(
-                'cover_template_overlay_blend_mode',
-                array(
-                    'default'           => 'multiply',
-                    'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
-                )
-            );
-
-            $wp_customize->add_control(
-                'cover_template_overlay_blend_mode',
-                array(
-                    'label'       => __( 'Image Overlay Blend Mode', 'twentytwenty' ),
-                    'description' => __( 'How the overlay color will blend with the image. Some browsers, like Internet Explorer and Edge, only support the "Normal" mode.', 'twentytwenty' ),
+            /* Overlay Color Opacity --------- */
+
+            $wp_customize->add_setting(
+                'cover_template_overlay_opacity',
+                array(
+                    'default'           => 80,
+                    'sanitize_callback' => 'absint',
+                    'transport'         => 'postMessage',
+                )
+            );
+
+            $wp_customize->add_control(
+                'cover_template_overlay_opacity',
+                array(
+                    'label'       => __( 'Image Overlay Opacity', 'twentytwenty' ),
+                    'description' => __( 'Make sure that the contrast is high enough so that the text is readable.', 'twentytwenty' ),
                     'section'     => 'cover_template_options',
-                    'type'        => 'select',
-                    'choices'     => array(
-                        'normal'      => __( 'Normal', 'twentytwenty' ),
-                        'multiply'    => __( 'Multiply', 'twentytwenty' ),
-                        'screen'      => __( 'Screen', 'twentytwenty' ),
-                        'overlay'     => __( 'Overlay', 'twentytwenty' ),
-                        'darken'      => __( 'Darken', 'twentytwenty' ),
-                        'lighten'     => __( 'Lighten', 'twentytwenty' ),
-                        'color-dodge' => __( 'Color Dodge', 'twentytwenty' ),
-                        'color-burn'  => __( 'Color Burn', 'twentytwenty' ),
-                        'hard-light'  => __( 'Hard Light', 'twentytwenty' ),
-                        'soft-light'  => __( 'Soft Light', 'twentytwenty' ),
-                        'difference'  => __( 'Difference', 'twentytwenty' ),
-                        'exclusion'   => __( 'Exclusion', 'twentytwenty' ),
-                        'hue'         => __( 'Hue', 'twentytwenty' ),
-                        'saturation'  => __( 'Saturation', 'twentytwenty' ),
-                        'color'       => __( 'Color', 'twentytwenty' ),
-                        'luminosity'  => __( 'Luminosity', 'twentytwenty' ),
-                    ),
-                )
-            );
-
-            /* Overlay Color Opacity --------- */
-
-            $wp_customize->add_setting(
+                    'type'        => 'range',
+                    'input_attrs' => twentytwenty_customize_opacity_range(),
+                )
+            );
+
+            $wp_customize->selective_refresh->add_partial(
                 'cover_template_overlay_opacity',
                 array(
-                    'default'           => '80',
-                    'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
-                )
-            );
-
-            $wp_customize->add_control(
-                'cover_template_overlay_opacity',
-                array(
-                    'label'       => __( 'Image Overlay Opacity', 'twentytwenty' ),
-                    'description' => __( 'Make sure that the value is high enough that the text is readable.', 'twentytwenty' ),
-                    'section'     => 'cover_template_options',
-                    'type'        => 'select',
-                    'choices'     => array(
-                        '0'   => __( '0%', 'twentytwenty' ),
-                        '10'  => __( '10%', 'twentytwenty' ),
-                        '20'  => __( '20%', 'twentytwenty' ),
-                        '30'  => __( '30%', 'twentytwenty' ),
-                        '40'  => __( '40%', 'twentytwenty' ),
-                        '50'  => __( '50%', 'twentytwenty' ),
-                        '60'  => __( '60%', 'twentytwenty' ),
-                        '70'  => __( '70%', 'twentytwenty' ),
-                        '80'  => __( '80%', 'twentytwenty' ),
-                        '90'  => __( '90%', 'twentytwenty' ),
-                        '100' => __( '100%', 'twentytwenty' ),
-                    ),
-                )
-            );
-
+                    'selector' => '.cover-color-overlay',
+                    'type'     => 'cover_opacity',
+                )
+            );
         }
 
@@ -442 +377 @@
 
             return $value;
-        }
-
-        /**
-         * Return the sitewide color options included.
-         * Note: These values are shared between the block editor styles and the customizer,
-         * and abstracted to this function.
-         */
-        public static function get_color_options() {
-            return apply_filters( 'twentytwenty_accent_color_options', array() );
         }
 
@@ -512 +438 @@
     }
 }
+
+
+/**
+ * Input attributes for cover overlay opacity option.
+ *
+ * @return array Array containing attribute names and their values.
+ */
+function twentytwenty_customize_opacity_range() {
+    /**
+     * Filter the input attributes for opacity
+     *
+     * @param array $attrs {
+     *     The attributes
+     *
+     *     @type int $min Minimum value
+     *     @type int $max Maximum value
+     *     @type int $step Interval between numbers
+     * }
+     */
+    return apply_filters(
+        'twentytwenty_customize_opacity_range',
+        array(
+            'min'  => 0,
+            'max'  => 90,
+            'step' => 5,
+        )
+    );
+}

trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-script-loader.php

@@ -1 +1 @@
 <?php
 /**
- * Javsscript Loader Class
+ * Javascript Loader Class
  *
  * Allow `async` and `defer` while enqueuing Javascript.
  *
- * Based on a soltion in WP Rig.
+ * Based on a solution in WP Rig.
  *
  * @package WordPress
@@ -12 +12 @@
  */
 
-/**
- * A class that provides a way to add `async` or `defer` attributes to scripts.
- */
-class TwentyTwenty_Script_Loader {
+if ( ! class_exists( 'TwentyTwenty_Script_Loader' ) ) {
+    /**
+     * A class that provides a way to add `async` or `defer` attributes to scripts.
+     */
+    class TwentyTwenty_Script_Loader {
 
-    /**
-     * Adds async/defer attributes to enqueued / registered scripts.
-     *
-     * If #12009 lands in WordPress, this function can no-op since it would be handled in core.
-     *
-     * @link https://core.trac.wordpress.org/ticket/12009
-     *
-     * @param string $tag    The script tag.
-     * @param string $handle The script handle.
-     * @return string Script HTML string.
-     */
-    public function filter_script_loader_tag( $tag, $handle ) {
-        foreach ( array( 'async', 'defer' ) as $attr ) {
-            if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
-                continue;
+        /**
+         * Adds async/defer attributes to enqueued / registered scripts.
+         *
+         * If #12009 lands in WordPress, this function can no-op since it would be handled in core.
+         *
+         * @link https://core.trac.wordpress.org/ticket/12009
+         *
+         * @param string $tag    The script tag.
+         * @param string $handle The script handle.
+         * @return string Script HTML string.
+         */
+        public function filter_script_loader_tag( $tag, $handle ) {
+            foreach ( [ 'async', 'defer' ] as $attr ) {
+                if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
+                    continue;
+                }
+                // Prevent adding attribute when already added in #12009.
+                if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
+                    $tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
+                }
+                // Only allow async or defer, not both.
+                break;
             }
-            // Prevent adding attribute when already added in #12009.
-            if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
-                $tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
-            }
-            // Only allow async or defer, not both.
-            break;
+            return $tag;
         }
-        return $tag;
+
     }
-
 }

trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-svg-icons.php

@@ -11 +11 @@
     /**
      * SVG ICONS CLASS
-     * Retrieve the SVG code for the specified icon. Based on a solution in TwentyNineteen.
+     * Retrieve the SVG code for the specified icon. Based on a solution in Twenty Nineteen.
      */
     class TwentyTwenty_SVG_Icons {

trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-comment.php

@@ -70 +70 @@
                                 </time>
                             </a>
+                            <?php
+                            if ( get_edit_comment_link() ) {
+                                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
+                            }
+                            ?>
                         </div><!-- .comment-metadata -->
 
@@ -85 +90 @@
                             <?php
                         }
+
                         ?>
 
@@ -106 +112 @@
                     $by_post_author = twentytwenty_is_comment_by_post_author( $comment );
 
-                    $edit_comment_link = get_edit_comment_link() ? '<a class="edit-comment-link" href="' . esc_url( get_edit_comment_link() ) . '">' . __( 'Edit', 'twentytwenty' ) . '</a>' : '';
-
-                    if ( $comment_reply_link || $by_post_author || $edit_comment_link ) {
+                    if ( $comment_reply_link || $by_post_author ) {
                         ?>
 
@@ -116 +120 @@
                             if ( $comment_reply_link ) {
                                 echo $comment_reply_link; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --Link is escaped in https://developer.wordpress.org/reference/functions/get_comment_reply_link/
-                            }
-                            if ( $edit_comment_link ) {
-                                echo $edit_comment_link; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped --Link escaped on line 109.
                             }
                             if ( $by_post_author ) {

trunk/src/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-page.php

@@ -129 +129 @@
 
                     $toggle_target_string = '.menu-modal .page-item-' . $page->ID . ' > ul';
+                    $toggle_duration      = twentytwenty_toggle_duration();
 
                     // Add the sub menu toggle.
-                    $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>';
+                    $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>';
 
                 }

trunk/src/wp-content/themes/twentytwenty/comments.php

@@ -108 +108 @@
 
     if ( $comments ) {
-        echo '<hr class="is-style-wide" aria-hidden="true" />';
+        echo '<hr class="styled-separator is-style-wide" aria-hidden="true" />';
     }
 
@@ -122 +122 @@
 
     if ( $comments ) {
-        echo '<hr class="is-style-wide" aria-hidden="true" />';
+        echo '<hr class="styled-separator is-style-wide" aria-hidden="true" />';
     }
 

trunk/src/wp-content/themes/twentytwenty/footer.php

@@ -12 +12 @@
  */
 
-?>
+?>      
+            <footer id="site-footer" role="contentinfo" class="header-footer-group">
 
-        <footer id="site-footer" role="contentinfo" class="header-footer-group">
-
-            <div class="footer-inner section-inner">
-
-                <?php
-
-                $has_footer_menu = has_nav_menu( 'footer' );
-                $has_social_menu = has_nav_menu( 'social' );
-
-                $footer_top_classes = '';
-
-                $footer_top_classes .= $has_footer_menu ? ' has-footer-menu' : '';
-                $footer_top_classes .= $has_social_menu ? ' has-social-menu' : '';
-
-                $footer_social_wrapper_class = $has_footer_menu ? 'footer-social-wrapper' : '';
-
-                if ( $has_footer_menu || $has_social_menu ) {
-                    ?>
-                    <div class="footer-top<?php echo esc_attr( $footer_top_classes ); ?>">
-                        <?php if ( $has_footer_menu ) { ?>
-
-                            <nav aria-label="<?php esc_attr_e( 'Footer menu', 'twentytwenty' ); ?>">
-
-                                <ul class="footer-menu reset-list-style">
-                                    <?php
-                                    wp_nav_menu(
-                                        array(
-                                            'container'  => '',
-                                            'depth'      => 1,
-                                            'items_wrap' => '%3$s',
-                                            'theme_location' => 'footer',
-                                        )
-                                    );
-                                    ?>
-                                </ul>
-
-                            </nav><!-- .site-nav -->
-
-                        <?php } ?>
-                        <?php if ( $has_social_menu ) { ?>
-
-                            <div class="<?php esc_attr( $footer_social_wrapper_class ); ?>">
-
-                                <nav aria-label="<?php esc_attr_e( 'Social links', 'twentytwenty' ); ?>">
-
-                                    <ul class="social-menu footer-social reset-list-style social-icons s-icons">
-
-                                        <?php
-                                        wp_nav_menu(
-                                            array(
-                                                'theme_location' => 'social',
-                                                'container' => '',
-                                                'container_class' => '',
-                                                'items_wrap' => '%3$s',
-                                                'menu_id' => '',
-                                                'menu_class' => '',
-                                                'depth'   => 1,
-                                                'link_before' => '<span class="screen-reader-text">',
-                                                'link_after' => '</span>',
-                                                'fallback_cb' => '',
-                                            )
-                                        );
-                                        ?>
-
-                                    </ul>
-
-                                </nav><!-- .social-menu -->
-
-                            </div><!-- .footer-social-wrapper -->
-
-                        <?php } ?>
-                    </div><!-- .footer-top -->
-
-                <?php } ?>
-
-
-                <?php if ( is_active_sidebar( 'sidebar-1' ) || is_active_sidebar( 'sidebar-2' ) ) { ?>
-
-                    <div class="footer-widgets-outer-wrapper">
-
-                        <div class="footer-widgets-wrapper">
-
-                            <?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?>
-
-                                <div class="footer-widgets column-one grid-item">
-                                    <?php dynamic_sidebar( 'sidebar-1' ); ?>
-                                </div>
-
-                            <?php } ?>
-
-                            <?php if ( is_active_sidebar( 'sidebar-2' ) ) { ?>
-
-                                <div class="footer-widgets column-two grid-item">
-                                    <?php dynamic_sidebar( 'sidebar-2' ); ?>
-                                </div>
-
-                            <?php } ?>
-
-                        </div><!-- .footer-widgets-wrapper -->
-
-                    </div><!-- .footer-widgets-outer-wrapper -->
-
-                <?php } ?>
-
-                <div class="footer-bottom">
+                <div class="section-inner">
 
                     <div class="footer-credits">
@@ -131 +28 @@
                             );
                             ?>
-                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo bloginfo( 'name' ); ?></a></a>
+                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo bloginfo( 'name' ); ?></a>
                         </p>
 
                         <p class="powered-by-wordpress">
-                            <?php
-                            /* Translators: %s = Link to WordPress.org */
-                            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
-                            ?>
+                            <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
+                                <?php
+                                _e( 'Powered by WordPress', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations
+                                ?>
+                            </a>
                         </p><!-- .theme-credits -->
 
@@ -158 +56 @@
                     </a>
 
-                </div><!-- .footer-bottom -->
+                </div><!-- .section-inner -->
 
-            </div><!-- .footer-inner -->
-
-        </footer><!-- #site-footer -->
+            </footer><!-- #site-footer -->
 
         <?php wp_footer(); ?>

trunk/src/wp-content/themes/twentytwenty/functions.php

@@ -25 +25 @@
  */
 
-if ( ! function_exists( 'twentytwenty_theme_support' ) ) {
-    /**
-     * Sets up theme defaults and registers support for various WordPress features.
+/**
+ * Sets up theme defaults and registers support for various WordPress features.
+ *
+ * Note that this function is hooked into the after_setup_theme hook, which
+ * runs before the init hook. The init hook is too late for some features, such
+ * as indicating support for post thumbnails.
+ */
+function twentytwenty_theme_support() {
+
+    // Add default posts and comments RSS feed links to head.
+    add_theme_support( 'automatic-feed-links' );
+
+    // Custom background color.
+    add_theme_support(
+        'custom-background',
+        array(
+            'default-color' => 'f5efe0',
+        )
+    );
+
+    // Set content-width.
+    global $content_width;
+    if ( ! isset( $content_width ) ) {
+        $content_width = 580;
+    }
+
+    /*
+     * Enable support for Post Thumbnails on posts and pages.
      *
-     * Note that this function is hooked into the after_setup_theme hook, which
-     * runs before the init hook. The init hook is too late for some features, such
-     * as indicating support for post thumbnails.
+     * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
      */
-    function twentytwenty_theme_support() {
-
-        // Add default posts and comments RSS feed links to head.
-        add_theme_support( 'automatic-feed-links' );
-
-        // Custom background color.
-        add_theme_support(
-            'custom-background',
-            array(
-                'default-color' => 'f5efe0',
-            )
-        );
-
-        // Set content-width.
-        global $content_width;
-        if ( ! isset( $content_width ) ) {
-            $content_width = 580;
-        }
-
-        /*
-         * Enable support for Post Thumbnails on posts and pages.
-         *
-         * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
-         */
-        add_theme_support( 'post-thumbnails' );
-
-        // Set post thumbnail size.
-        set_post_thumbnail_size( 1200, 9999 );
-
-        // Add custom image sizes.
-        add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );
-
-        // Custom logo.
-        $logo_id     = get_theme_mod( 'custom_logo' );
-        $logo_width  = 120;
-        $logo_height = 90;
-
-        // If the retina setting is active, double the recommended width and height.
-        if ( get_theme_mod( 'twentytwenty_retina_logo', false ) ) {
-            $logo_width  = floor( $logo_width * 2 );
-            $logo_height = floor( $logo_height * 2 );
-        }
-
-        add_theme_support(
-            'custom-logo',
-            array(
-                'height'      => $logo_height,
-                'width'       => $logo_width,
-                'flex-height' => true,
-                'flex-width'  => true,
-                'header-text' => array( 'site-title', 'site-description' ),
-            )
-        );
-
-        /*
-         * Let WordPress manage the document title.
-         * By adding theme support, we declare that this theme does not use a
-         * hard-coded <title> tag in the document head, and expect WordPress to
-         * provide it for us.
-         */
-        add_theme_support( 'title-tag' );
-
-        /*
-         * Switch default core markup for search form, comment form, and comments
-         * to output valid HTML5.
-         */
-        add_theme_support(
-            'html5',
-            array(
-                'search-form',
-                'comment-form',
-                'comment-list',
-                'gallery',
-                'caption',
-                'script',
-                'style',
-            )
-        );
-
-        /*
-         * Make theme available for translation.
-         * Translations can be filed in the /languages/ directory.
-         * If you're building a theme based on Twenty Nineteen, use a find and replace
-         * to change 'twentynineteen' to the name of your theme in all the template files.
-         */
-        load_theme_textdomain( 'twentytwenty' );
-
-        // Add support for full and wide align images.
-        add_theme_support( 'align-wide' );
-
-        // Adds starter content to highlight the theme on fresh sites.
-        add_theme_support( 'starter-content', twentytwenty_get_starter_content() );
-
-        // Add theme support for selective refresh for widgets.
-        add_theme_support( 'customize-selective-refresh-widgets' );
-
-        /*
-         * Adds `async` and `defer` support for scripts registered or enqueued
-         * by the theme.
-         */
-        $loader = new TwentyTwenty_Script_Loader();
-        add_filter( 'script_loader_tag', [ $loader, 'filter_script_loader_tag' ], 10, 2 );
-
-    }
-
-    add_action( 'after_setup_theme', 'twentytwenty_theme_support' );
-
-}
+    add_theme_support( 'post-thumbnails' );
+
+    // Set post thumbnail size.
+    set_post_thumbnail_size( 1200, 9999 );
+
+    // Add custom image sizes.
+    add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );
+
+    // Custom logo.
+    $logo_id     = get_theme_mod( 'custom_logo' );
+    $logo_width  = 120;
+    $logo_height = 90;
+
+    // If the retina setting is active, double the recommended width and height.
+    if ( get_theme_mod( 'twentytwenty_retina_logo', false ) ) {
+        $logo_width  = floor( $logo_width * 2 );
+        $logo_height = floor( $logo_height * 2 );
+    }
+
+    add_theme_support(
+        'custom-logo',
+        array(
+            'height'      => $logo_height,
+            'width'       => $logo_width,
+            'flex-height' => true,
+            'flex-width'  => true,
+            'header-text' => array( 'site-title', 'site-description' ),
+        )
+    );
+
+    /*
+     * Let WordPress manage the document title.
+     * By adding theme support, we declare that this theme does not use a
+     * hard-coded <title> tag in the document head, and expect WordPress to
+     * provide it for us.
+     */
+    add_theme_support( 'title-tag' );
+
+    /*
+     * Switch default core markup for search form, comment form, and comments
+     * to output valid HTML5.
+     */
+    add_theme_support(
+        'html5',
+        array(
+            'search-form',
+            'comment-form',
+            'comment-list',
+            'gallery',
+            'caption',
+            'script',
+            'style',
+        )
+    );
+
+    /*
+     * Make theme available for translation.
+     * Translations can be filed in the /languages/ directory.
+     * If you're building a theme based on Twenty Twenty, use a find and replace
+     * to change 'twentytwenty' to the name of your theme in all the template files.
+     */
+    load_theme_textdomain( 'twentytwenty' );
+
+    // Add support for full and wide align images.
+    add_theme_support( 'align-wide' );
+
+    // Adds starter content to highlight the theme on fresh sites.
+    add_theme_support( 'starter-content', twentytwenty_get_starter_content() );
+
+    // Add theme support for selective refresh for widgets.
+    add_theme_support( 'customize-selective-refresh-widgets' );
+
+    /*
+     * Adds `async` and `defer` support for scripts registered or enqueued
+     * by the theme.
+     */
+    $loader = new TwentyTwenty_Script_Loader();
+    add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
+
+}
+
+add_action( 'after_setup_theme', 'twentytwenty_theme_support' );
 
 /**
@@ -173 +170 @@
 require get_template_directory() . '/inc/starter-content.php';
 
-if ( ! function_exists( 'twentytwenty_register_styles' ) ) {
+/**
+ * Register and Enqueue Styles.
+ */
+function twentytwenty_register_styles() {
+
+    $theme_version    = wp_get_theme()->get( 'Version' );
+    $css_dependencies = array();
+
     /**
-     * Register and Enqueue Styles.
-     */
-    function twentytwenty_register_styles() {
-
-        $theme_version    = wp_get_theme()->get( 'Version' );
-        $css_dependencies = array();
-
-        // By default, only load the Font Awesome fonts if the social menu is in use.
-        $load_font_awesome = apply_filters( 'twentytwenty_load_font_awesome', has_nav_menu( 'social' ) );
-
-        if ( $load_font_awesome ) {
-            wp_register_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.css', false, '5.10.2', 'all' );
-            $css_dependencies[] = 'font-awesome';
-        }
-
-        wp_enqueue_style( 'twentytwenty-style', get_template_directory_uri() . '/style.css', $css_dependencies, $theme_version );
-        wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );
-
-        // Add output of Customizer settings as inline style.
-        wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );
-
-    }
-
-    add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' );
-
-}
-
-if ( ! function_exists( 'twentytwenty_register_scripts' ) ) {
-    /**
-     * Register and Enqueue Scripts.
-     */
-    function twentytwenty_register_scripts() {
-
-        $theme_version = wp_get_theme()->get( 'Version' );
-
-        if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
-            wp_enqueue_script( 'comment-reply' );
-        }
-
-        wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false );
-        wp_script_add_data( 'twentytwenty-js', 'async', true );
-
-    }
-
-    add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
-
-}
-
-if ( ! function_exists( 'twentytwenty_menus' ) ) {
-    /**
-     * Register navigation menus uses wp_nav_menu in five places.
-     */
-    function twentytwenty_menus() {
-
-        $locations = array(
-            'primary'  => __( 'Desktop Horizontal Menu', 'twentytwenty' ),
-            'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ),
-            'mobile'   => __( 'Mobile Menu', 'twentytwenty' ),
-            'footer'   => __( 'Footer Menu', 'twentytwenty' ),
-            'social'   => __( 'Social Menu', 'twentytwenty' ),
-        );
-
-        register_nav_menus( $locations );
-    }
-
-    add_action( 'init', 'twentytwenty_menus' );
-
-}
+    * Filter to load, unload Font Awesome CSS
+    *
+    * By default, only load the Font Awesome fonts if the social menu is in use or
+    * using filter Font Awesome css be loaded
+    *
+    * @since 1.0.0
+    *
+    * @param bool Whether to load font awesome, Default false.
+    */
+    $load_font_awesome = apply_filters( 'twentytwenty_load_font_awesome', has_nav_menu( 'social' ) );
+
+    if ( $load_font_awesome ) {
+        wp_register_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.css', false, '5.10.2', 'all' );
+        $css_dependencies[] = 'font-awesome';
+    }
+
+    wp_enqueue_style( 'twentytwenty-style', get_template_directory_uri() . '/style.css', $css_dependencies, $theme_version );
+    wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' );
+
+    // Add output of Customizer settings as inline style.
+    wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );
+
+    // Add print CSS.
+    wp_enqueue_style( 'twentytwenty-print-style', get_template_directory_uri() . '/print.css', null, $theme_version, 'print' );
+
+}
+
+add_action( 'wp_enqueue_scripts', 'twentytwenty_register_styles' );
+
+/**
+ * Register and Enqueue Scripts.
+ */
+function twentytwenty_register_scripts() {
+
+    $theme_version = wp_get_theme()->get( 'Version' );
+
+    if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
+        wp_enqueue_script( 'comment-reply' );
+    }
+
+    wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false );
+    wp_script_add_data( 'twentytwenty-js', 'async', true );
+
+}
+
+add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
+
+/**
+ * Register navigation menus uses wp_nav_menu in five places.
+ */
+function twentytwenty_menus() {
+
+    $locations = array(
+        'primary'  => __( 'Desktop Horizontal Menu', 'twentytwenty' ),
+        'expanded' => __( 'Desktop Expanded Menu', 'twentytwenty' ),
+        'mobile'   => __( 'Mobile Menu', 'twentytwenty' ),
+        'footer'   => __( 'Footer Menu', 'twentytwenty' ),
+        'social'   => __( 'Social Menu', 'twentytwenty' ),
+    );
+
+    register_nav_menus( $locations );
+}
+
+add_action( 'init', 'twentytwenty_menus' );
 
 /**
@@ -299 +299 @@
 }
 
-if ( ! function_exists( 'twentytwenty_skip_link' ) ) {
+/**
+ * Include a skip to content link at the top of the page so that users can bypass the menu.
+ */
+function twentytwenty_skip_link() {
+    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
+}
+
+add_action( 'wp_body_open', 'twentytwenty_skip_link', 5 );
+
+/**
+ * Register widget areas.
+ *
+ * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
+ */
+function twentytwenty_sidebar_registration() {
+
+    // Arguments used in all register_sidebar() calls.
+    $shared_args = array(
+        'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
+        'after_title'   => '</h2>',
+        'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
+        'after_widget'  => '</div></div>',
+    );
+
+    // Footer #1.
+    register_sidebar(
+        array_merge(
+            $shared_args,
+            array(
+                'name'        => __( 'Footer #1', 'twentytwenty' ),
+                'id'          => 'sidebar-1',
+                'description' => __( 'Widgets in this area will be displayed in the first column in the footer.', 'twentytwenty' ),
+            )
+        )
+    );
+
+    // Footer #2.
+    register_sidebar(
+        array_merge(
+            $shared_args,
+            array(
+                'name'        => __( 'Footer #2', 'twentytwenty' ),
+                'id'          => 'sidebar-2',
+                'description' => __( 'Widgets in this area will be displayed in the second column in the footer.', 'twentytwenty' ),
+            )
+        )
+    );
+
+}
+
+add_action( 'widgets_init', 'twentytwenty_sidebar_registration' );
+
+/**
+ * Enqueue supplemental block editor styles.
+ */
+function twentytwenty_block_editor_styles() {
+
+    $css_dependencies = array();
+
+    // Enqueue the editor styles.
+    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' );
+    wp_style_add_data( 'twentytwenty-block-editor-styles', 'rtl', 'replace' );
+
+    // Add inline style from the Customizer.
+    wp_add_inline_style( 'twentytwenty-block-editor-styles', twentytwenty_get_customizer_css( 'block-editor' ) );
+
+    // Enqueue the editor script.
+    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 );
+}
+
+add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 );
+
+/**
+ * Enqueue classic editor styles.
+ */
+function twentytwenty_classic_editor_styles() {
+
+    $classic_editor_styles = array(
+        '/assets/css/editor-style-classic.css',
+    );
+
+    add_editor_style( $classic_editor_styles );
+
+}
+
+add_action( 'init', 'twentytwenty_classic_editor_styles' );
+
+/**
+ * Output Customizer Settings in the Classic Editor.
+ * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
+ *
+ * @param array $mce_init TinyMCE styles.
+ */
+function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) {
+
+    $styles = twentytwenty_get_customizer_css( 'classic-editor' );
+
+    if ( ! isset( $mce_init['content_style'] ) ) {
+        $mce_init['content_style'] = $styles . ' ';
+    } else {
+        $mce_init['content_style'] .= ' ' . $styles . ' ';
+    }
+
+    return $mce_init;
+
+}
+
+add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_customizer_styles' );
+
+/**
+ * Block Editor Settings.
+ * Add custom colors and font sizes to the block editor.
+ */
+function twentytwenty_block_editor_settings() {
+
+    // Block Editor Palette.
+    $editor_color_palette = array(
+        array(
+            'name'  => esc_html__( 'Accent Color', 'twentytwenty' ),
+            'slug'  => 'accent',
+            'color' => twentytwenty_get_color_for_area( 'content', 'accent' ),
+        ),
+        array(
+            'name'  => esc_html__( 'Secondary', 'twentytwenty' ),
+            'slug'  => 'secondary',
+            'color' => twentytwenty_get_color_for_area( 'content', 'secondary' ),
+        ),
+        array(
+            'name'  => esc_html__( 'Subtle Background', 'twentytwenty' ),
+            'slug'  => 'subtle-background',
+            'color' => twentytwenty_get_color_for_area( 'content', 'borders' ),
+        ),
+    );
+
+    // Add the background option.
+    $background_color = get_theme_mod( 'background_color' );
+    if ( ! $background_color ) {
+        $background_color_arr = get_theme_support( 'custom-background' );
+        $background_color     = $background_color_arr[0]['default-color'];
+    }
+    $editor_color_palette[] = array(
+        'name'  => __( 'Background Color', 'twentytwenty' ),
+        'slug'  => 'background',
+        'color' => '#' . $background_color,
+    );
+
+    // If we have accent colors, add them to the block editor palette.
+    if ( $editor_color_palette ) {
+        add_theme_support( 'editor-color-palette', $editor_color_palette );
+    }
+
+    // Gutenberg Font Sizes.
+    add_theme_support(
+        'editor-font-sizes',
+        array(
+            array(
+                'name'      => _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
+                'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ),
+                'size'      => 16,
+                'slug'      => 'small',
+            ),
+            array(
+                'name'      => _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
+                'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ),
+                'size'      => 18,
+                'slug'      => 'regular',
+            ),
+            array(
+                'name'      => _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
+                'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ),
+                'size'      => 24,
+                'slug'      => 'large',
+            ),
+            array(
+                'name'      => _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
+                'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
+                'size'      => 32,
+                'slug'      => 'larger',
+            ),
+        )
+    );
+
+    // If we have a dark background color then add support for dark editor style.
+    // We can determine if the background color is dark by checking if the text-color is white.
+    if ( '#ffffff' === strtolower( twentytwenty_get_color_for_area( 'content', 'text' ) ) ) {
+        add_theme_support( 'dark-editor-style' );
+    }
+
+}
+
+add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
+
+/**
+ * Read More Link
+ * Overwrite default (more ...) tag
+ */
+function twentytwenty_read_more_tag() {
+    return sprintf(
+        '<a href="%1$s" class="more-link faux-button">%2$s <span class="screen-reader-text">"%3$s"</span></a>',
+        esc_url( get_permalink( get_the_ID() ) ),
+        esc_html__( 'Continue reading', 'twentytwenty' ),
+        get_the_title( get_the_ID() )
+    );
+}
+add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );
+
+/**
+ * Enqueues scripts for customizer controls & settings.
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+function twentytwenty_customize_controls_enqueue_scripts() {
+    $theme_version = wp_get_theme()->get( 'Version' );
+
+    // Add script for color calculations.
+    wp_enqueue_script( 'twentytwenty-color-calculations', get_template_directory_uri() . '/assets/js/color-calculations.js', array( 'wp-color-picker' ), $theme_version, false );
+
+    // Add script for controls.
+    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 );
+    wp_localize_script( 'twentytwenty-customize-controls', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
+}
+
+add_action( 'customize_controls_enqueue_scripts', 'twentytwenty_customize_controls_enqueue_scripts' );
+
+/**
+ * Enqueue scripts for the customizer preview.
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+function twentytwenty_customize_preview_init() {
+    $theme_version = wp_get_theme()->get( 'Version' );
+
+    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 );
+    wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
+    wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyPreviewEls', twentytwenty_get_elements_array() );
+
+    wp_add_inline_script(
+        'twentytwenty-customize-preview',
+        sprintf(
+            'wp.customize.selectiveRefresh.partialConstructor[ %1$s ].prototype.attrs = %2$s;',
+            wp_json_encode( 'cover_opacity' ),
+            wp_json_encode( twentytwenty_customize_opacity_range() )
+        )
+    );
+}
+
+add_action( 'customize_preview_init', 'twentytwenty_customize_preview_init' );
+
+/**
+ * Get accessible color for an area.
+ *
+ * @since 1.0.0
+ *
+ * @param string $area The area we want to get the colors for.
+ * @param string $context Can be 'text' or 'accent'.
+ * @return string Returns a HEX color.
+ */
+function twentytwenty_get_color_for_area( $area = 'content', $context = 'text' ) {
+
+    // Get the value from the theme-mod.
+    $settings = get_theme_mod(
+        'accent_accessible_colors',
+        array(
+            'content'       => array(
+                'text'      => '#000000',
+                'accent'    => '#cd2653',
+                'secondary' => '#6d6d6d',
+                'borders'   => '#dcd7ca',
+            ),
+            'header-footer' => array(
+                'text'      => '#000000',
+                'accent'    => '#cd2653',
+                'secondary' => '#6d6d6d',
+                'borders'   => '#dcd7ca',
+            ),
+        )
+    );
+
+    // If we have a value return it.
+    if ( isset( $settings[ $area ] ) && isset( $settings[ $area ][ $context ] ) ) {
+        return $settings[ $area ][ $context ];
+    }
+
+    // Return false if the option doesn't exist.
+    return false;
+}
+
+/**
+ * Returns an array of variables for the customizer preview.
+ *
+ * @since 1.0.0
+ *
+ * @return array
+ */
+function twentytwenty_get_customizer_color_vars() {
+    $colors = array(
+        'content'       => array(
+            'setting' => 'background_color',
+        ),
+        'header-footer' => array(
+            'setting' => 'header_footer_background_color',
+        ),
+    );
+    return $colors;
+}
+
+/**
+ * Get an array of elements.
+ *
+ * @since 1.0
+ *
+ * @return array
+ */
+function twentytwenty_get_elements_array() {
+
+    // The array is formatted like this:
+    // [key-in-saved-setting][sub-key-in-setting][css-property] = [elements].
+    $elements = array(
+        'content'       => array(
+            'accent'     => array(
+                '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' ),
+                'border-color'     => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ),
+                '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"]' ),
+                'background-color' => array( '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', '.has-accent-background-color', '.comment-reply-link' ),
+                'fill'             => array( '.fill-children-accent', '.fill-children-accent *' ),
+            ),
+            'background' => array(
+                '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' ),
+                'background' => array(),
+            ),
+            'text'       => array(
+                'color' => array( 'body', '.entry-title a' ),
+            ),
+            'secondary'  => array(
+                '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' ),
+            ),
+            'borders'    => array(
+                'border-color'        => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ),
+                'background'          => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)' ),
+                'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
+                'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
+            ),
+        ),
+        'header-footer' => array(
+            'accent'     => array(
+                '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' ),
+                '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"]' ),
+            ),
+            'background' => array(
+                '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"]' ),
+                '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' ),
+            ),
+            'text'       => array(
+                'color'               => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ),
+                'background'          => array( 'body:not(.overlay-header) .primary-menu ul' ),
+                'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ),
+                'border-left-color'   => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ),
+            ),
+            'secondary'  => array(
+                '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' ),
+            ),
+            'borders'    => array(
+                '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' ),
+                'background'   => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ),
+            ),
+        ),
+    );
 
     /**
-     * Include a skip to content link at the top of the page so that users can bypass the menu.
-     */
-    function twentytwenty_skip_link() {
-        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
-    }
-
-    add_action( 'wp_body_open', 'twentytwenty_skip_link', 5 );
-
-}
-
-if ( ! function_exists( 'twentytwenty_sidebar_registration' ) ) {
-
-    /**
-     * Register widget areas.
-     *
-     * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
-     */
-    function twentytwenty_sidebar_registration() {
-
-        // Arguments used in all register_sidebar() calls.
-        $shared_args = array(
-            'before_title'  => '<h2 class="widget-title subheading heading-size-3">',
-            'after_title'   => '</h2>',
-            'before_widget' => '<div class="widget %2$s"><div class="widget-content">',
-            'after_widget'  => '</div></div>',
-        );
-
-        // Footer #1.
-        register_sidebar(
-            array_merge(
-                $shared_args,
-                array(
-                    'name'        => __( 'Footer #1', 'twentytwenty' ),
-                    'id'          => 'sidebar-1',
-                    'description' => __( 'Widgets in this area will be displayed in the first column in the footer.', 'twentytwenty' ),
-                )
-            )
-        );
-
-        // Footer #2.
-        register_sidebar(
-            array_merge(
-                $shared_args,
-                array(
-                    'name'        => __( 'Footer #2', 'twentytwenty' ),
-                    'id'          => 'sidebar-2',
-                    'description' => __( 'Widgets in this area will be displayed in the second column in the footer.', 'twentytwenty' ),
-                )
-            )
-        );
-
-    }
-
-    add_action( 'widgets_init', 'twentytwenty_sidebar_registration' );
-
-}
-
-if ( ! function_exists( 'twentytwenty_block_editor_styles' ) ) {
-
-    /**
-     * Enqueue supplemental block editor styles.
-     */
-    function twentytwenty_block_editor_styles() {
-
-        $css_dependencies = array();
-
-        // Enqueue the editor styles.
-        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' );
-        wp_style_add_data( 'twentytwenty-block-editor-styles', 'rtl', 'replace' );
-
-        // Add inline style from the Customizer.
-        wp_add_inline_style( 'twentytwenty-block-editor-styles', twentytwenty_get_customizer_css( 'block-editor' ) );
-
-    }
-
-    add_action( 'enqueue_block_editor_assets', 'twentytwenty_block_editor_styles', 1, 1 );
-
-}
-
-if ( ! function_exists( 'twentytwenty_classic_editor_styles' ) ) {
-
-    /**
-     * Enqueue classic editor styles.
-     */
-    function twentytwenty_classic_editor_styles() {
-
-        $classic_editor_styles = array(
-            '/assets/css/editor-style-classic.css',
-        );
-
-        add_editor_style( $classic_editor_styles );
-
-    }
-
-    add_action( 'init', 'twentytwenty_classic_editor_styles' );
-
-}
-
-if ( ! function_exists( 'twentytwenty_add_classic_editor_customizer_styles' ) ) {
-
-    /**
-     * Output Customizer Settings in the Classic Editor.
-     * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution.
-     *
-     * @param array $mce_init TinyMCE styles.
-     */
-    function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) {
-
-        $styles = twentytwenty_get_customizer_css( 'classic-editor' );
-
-        if ( ! isset( $mce_init['content_style'] ) ) {
-            $mce_init['content_style'] = $styles . ' ';
-        } else {
-            $mce_init['content_style'] .= ' ' . $styles . ' ';
-        }
-
-        return $mce_init;
-
-    }
-
-    add_filter( 'tiny_mce_before_init', 'twentytwenty_add_classic_editor_customizer_styles' );
-
-}
-
-if ( ! function_exists( 'twentytwenty_block_editor_settings' ) ) {
-
-    /**
-     * Block Editor Settings.
-     * Add custom colors and font sizes to the block editor.
-     */
-    function twentytwenty_block_editor_settings() {
-
-        // Block Editor Palette.
-        $editor_color_palette = array(
-            array(
-                'name'  => esc_html__( 'Accent Color', 'twentytwenty' ),
-                'slug'  => 'accent',
-                'color' => twentytwenty_get_color_for_area( 'content', 'accent' ),
-            ),
-            array(
-                'name'  => esc_html__( 'Secondary', 'twentytwenty' ),
-                'slug'  => 'secondary',
-                'color' => twentytwenty_get_color_for_area( 'content', 'secondary' ),
-            ),
-            array(
-                'name'  => esc_html__( 'Subtle Background', 'twentytwenty' ),
-                'slug'  => 'subtle-background',
-                'color' => twentytwenty_get_color_for_area( 'content', 'borders' ),
-            ),
-        );
-
-        // Get the color options.
-        $accent_color_options = TwentyTwenty_Customize::get_color_options();
-
-        // Loop over them and construct an array for the editor-color-palette.
-        if ( $accent_color_options ) {
-            foreach ( $accent_color_options as $color_option_name => $color_option ) {
-                $editor_color_palette[] = array(
-                    'name'  => $color_option['label'],
-                    'slug'  => $color_option['slug'],
-                    'color' => get_theme_mod( $color_option_name, $color_option['default'] ),
-                );
-            }
-        }
-
-        // Add the background option.
-        $background_color = get_theme_mod( 'background_color' );
-        if ( ! $background_color ) {
-            $background_color_arr = get_theme_support( 'custom-background' );
-            $background_color     = $background_color_arr[0]['default-color'];
-        }
-        $editor_color_palette[] = array(
-            'name'  => __( 'Background Color', 'twentytwenty' ),
-            'slug'  => 'background',
-            'color' => '#' . $background_color,
-        );
-
-        // If we have accent colors, add them to the block editor palette.
-        if ( $editor_color_palette ) {
-            add_theme_support( 'editor-color-palette', $editor_color_palette );
-        }
-
-        // the block editor Font Sizes.
-        add_theme_support(
-            'editor-font-sizes',
-            array(
-                array(
-                    'name'      => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ),
-                    'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'twentytwenty' ),
-                    'size'      => 16,
-                    'slug'      => 'small',
-                ),
-                array(
-                    'name'      => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ),
-                    'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ),
-                    'size'      => 18,
-                    'slug'      => 'regular',
-                ),
-                array(
-                    'name'      => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ),
-                    'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'twentytwenty' ),
-                    'size'      => 24,
-                    'slug'      => 'large',
-                ),
-                array(
-                    'name'      => _x( 'Larger', 'Name of the larger font size in the block editor', 'twentytwenty' ),
-                    'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'twentytwenty' ),
-                    'size'      => 32,
-                    'slug'      => 'larger',
-                ),
-            )
-        );
-
-        // If we have a dark background color then add support for dark editor style.
-        // We can determine if the background color is dark by checking if the text-color is white.
-        if ( '#ffffff' === strtolower( twentytwenty_get_color_for_area( 'content', 'text' ) ) ) {
-            add_theme_support( 'dark-editor-style' );
-        }
-
-    }
-
-    add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
-
-}
-
-if ( ! function_exists( 'twentytwenty_read_more_tag' ) ) {
-
-    /**
-     * Read More Link
-     * Overwrite default (more ...) tag
-     */
-    function twentytwenty_read_more_tag() {
-        return sprintf(
-            '<a href="%1$s" class="more-link faux-button">%2$s <span class="screen-reader-text">"%3$s"</span></a>',
-            esc_url( get_permalink( get_the_ID() ) ),
-            esc_html__( 'Continue reading', 'twentytwenty' ),
-            get_the_title( get_the_ID() )
-        );
-    }
-    add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );
-
-}
-
-if ( ! function_exists( 'twentytwenty_customize_controls_enqueue_scripts' ) ) {
-    /**
-     * Enqueues scripts for customizer controls & settings.
-     *
-     * @since 1.0.0
-     *
-     * @return void
-     */
-    function twentytwenty_customize_controls_enqueue_scripts() {
-        $theme_version = wp_get_theme()->get( 'Version' );
-
-        // Add script for color calculations.
-        wp_enqueue_script( 'twentytwenty-color-calculations', get_template_directory_uri() . '/assets/js/color-calculations.js', array( 'wp-color-picker' ), $theme_version, false );
-
-        // Add script for controls.
-        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 );
-        wp_localize_script( 'twentytwenty-customize-controls', 'backgroundColors', twentytwenty_get_customizer_color_vars() );
-    }
-
-    add_action( 'customize_controls_enqueue_scripts', 'twentytwenty_customize_controls_enqueue_scripts' );
-}
-
-if ( ! function_exists( 'twentytwenty_customize_preview_init' ) ) {
-    /**
-     * Enqueue scripts for the customizer preview.
-     *
-     * @since 1.0.0
-     *
-     * @return void
-     */
-    function twentytwenty_customize_preview_init() {
-        $theme_version = wp_get_theme()->get( 'Version' );
-
-        wp_enqueue_script( 'twentytwenty-customize-preview', get_theme_file_uri( '/assets/js/customize-preview.js' ), array( 'customize-preview', 'jquery' ), $theme_version, true );
-        wp_localize_script( 'twentytwenty-customize-preview', 'backgroundColors', twentytwenty_get_customizer_color_vars() );
-        wp_localize_script( 'twentytwenty-customize-preview', 'previewElements', twentytwenty_get_elements_array() );
-    }
-
-    add_action( 'customize_preview_init', 'twentytwenty_customize_preview_init' );
-}
-
-if ( ! function_exists( 'twentytwenty_get_color_for_area' ) ) {
-    /**
-     * Get accessible color for an area.
-     *
-     * @since 1.0.0
-     *
-     * @param string $area The area we want to get the colors for.
-     * @param string $context Can be 'text' or 'accent'.
-     * @return string Returns a HEX color.
-     */
-    function twentytwenty_get_color_for_area( $area = 'content', $context = 'text' ) {
-
-        // Get the value from the theme-mod.
-        $settings = get_theme_mod(
-            'accent_accessible_colors',
-            array(
-                'content'       => array(
-                    'text'      => '#000000',
-                    'accent'    => '#cd2653',
-                    'secondary' => '#6d6d6d',
-                    'borders'   => '#dcd7ca',
-                ),
-                'header-footer' => array(
-                    'text'      => '#000000',
-                    'accent'    => '#cd2653',
-                    'secondary' => '#6d6d6d',
-                    'borders'   => '#dcd7ca',
-                ),
-            )
-        );
-
-        // If we have a value return it.
-        if ( isset( $settings[ $area ] ) && isset( $settings[ $area ][ $context ] ) ) {
-            return $settings[ $area ][ $context ];
-        }
-
-        // Return false if the option doesn't exist.
-        return false;
-    }
-}
-
-if ( ! function_exists( 'twentytwenty_get_customizer_color_vars' ) ) {
-
-    /**
-     * Returns an array of variables for the customizer preview.
-     *
-     * @since 1.0.0
-     *
-     * @return array
-     */
-    function twentytwenty_get_customizer_color_vars() {
-        $colors = array(
-            'content'       => array(
-                'setting' => 'background_color',
-            ),
-            'header-footer' => array(
-                'setting' => 'header_footer_background_color',
-            ),
-        );
-        return $colors;
-    }
-}
-
-if ( ! function_exists( 'twentytwenty_get_elements_array' ) ) {
-
-    /**
-     * Get an array of elements.
-     *
-     * @since 1.0
-     *
-     * @return array
-     */
-    function twentytwenty_get_elements_array() {
-
-        // The array is formatted like this:
-        // [key-in-saved-setting][sub-key-in-setting][css-property] = [elements].
-        $elements = array(
-            'content'       => array(
-                'accent'     => array(
-                    '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' ),
-                    'border-color'     => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover' ),
-                    '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"]' ),
-                    'background-color' => array( '.bg-accent', '.bg-accent-hover:hover', '.has-accent-background-color', '.comment-reply-link', '.edit-comment-link' ),
-                    'fill'             => array( '.fill-children-accent', '.fill-children-accent *' ),
-                ),
-                'background' => array(
-                    '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' ),
-                    'background' => array(),
-                ),
-                'text'       => array(
-                    'color' => array( 'body', '.entry-title a' ),
-                ),
-                'secondary'  => array(
-                    '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' ),
-                ),
-                'borders'    => array(
-                    'border-color'        => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *' ),
-                    'background'          => array( 'caption', 'code', 'code', 'kbd', 'samp' ),
-                    'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
-                    'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
-                    'color'               => array( 'hr:not(.is-style-dots):not(.reset-hr)' ),
-                ),
-            ),
-            'header-footer' => array(
-                'accent'     => array(
-                    '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' ),
-                    '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"]' ),
-                ),
-                'background' => array(
-                    '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"]' ),
-                    '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' ),
-                ),
-                'text'       => array(
-                    'color'               => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ),
-                    'background'          => array( 'body:not(.overlay-header) .primary-menu ul' ),
-                    'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ),
-                    'border-left-color'   => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ),
-                ),
-                'secondary'  => array(
-                    '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' ),
-                ),
-                'borders'    => array(
-                    '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' ),
-                    'background'          => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ),
-                    'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
-                    'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
-                ),
-            ),
-        );
-
-        return apply_filters( 'twentytwenty_get_elements_array', $elements );
-    }
-}
+    * Filters Twenty Twenty theme elements
+    *
+    * @since 1.0.0
+    *
+    * @param array Array of elements
+    */
+    return apply_filters( 'twentytwenty_get_elements_array', $elements );
+}

trunk/src/wp-content/themes/twentytwenty/header.php

@@ -17 +17 @@
     <head>
 
-        <meta http-equiv="content-type" content="<?php bloginfo( 'html_type' ); ?>" charset="<?php bloginfo( 'charset' ); ?>" />
+        <meta charset="<?php bloginfo( 'charset' ); ?>">
         <meta name="viewport" content="width=device-width, initial-scale=1.0" >
 
@@ -49 +49 @@
                         <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">
                             <div class="toggle-inner">
-                                <?php twentytwenty_the_theme_svg( 'search' ); ?>
+                                <div class="toggle-icon">
+                                    <?php twentytwenty_the_theme_svg( 'search' ); ?>
+                                </div>
                                 <span class="toggle-text"><?php _e( 'Search', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
                             </div>
@@ -70 +72 @@
                     <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">
                         <div class="toggle-inner">
-                            <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
+                            <div class="toggle-icon">
+                                <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
+                            </div>
                             <span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
                         </div>
@@ -83 +87 @@
                         ?>
 
-                        <div class="primary-menu-wrapper">
-
-                            <nav aria-label="<?php esc_attr_e( 'Primary', 'twentytwenty' ); ?>">
+                            <nav class="primary-menu-wrapper" aria-label="<?php esc_attr_e( 'Horizontal', 'twentytwenty' ); ?>" role="navigation">
 
                                 <ul class="primary-menu reset-list-style">
@@ -116 +118 @@
                                 </ul>
 
-                            </nav><!-- .primary-menu -->
-
-                        </div><!-- .primary-menu-wrapper -->
+                            </nav><!-- .primary-menu-wrapper -->
 
                         <?php
@@ -146 +146 @@
                                 <div class="toggle-inner">
                                     <span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
-                                    <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
+                                    <div class="toggle-icon">
+                                        <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
+                                    </div>
                                 </div>
                             </button><!-- .nav-toggle -->

trunk/src/wp-content/themes/twentytwenty/inc/custom-css.php

@@ -24 +24 @@
         $return = '';
 
-        if ( ! $value ) {
+        /*
+         * Bail early if we have no $selector elements or properties and $value.
+         */
+        if ( ! $value || ! $selector ) {
 
             return;
@@ -53 +56 @@
 
         // Get variables.
-        $body            = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'text' ) );
-        $body_default    = '#000000';
-        $accent          = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'accent' ) );
-        $accent_default  = '#cd2653';
+        $body           = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'text' ) );
+        $body_default   = '#000000';
+        $accent         = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'accent' ) );
+        $accent_default = '#cd2653';
+        /**
+         * Filters the CSS selectors targetting button component on frontend to apply common css
+         *
+         * @since 1.0.0
+         *
+         * @param string $string   The comma separated string of all CSS selectors targetting button component
+         */
         $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\']' );
 
@@ -91 +101 @@
                 foreach ( $props as $key => $definitions ) {
                     foreach ( $definitions as $property => $elements ) {
+                        /*
+                         * If we don't have an elements array or it is empty
+                         * then skip this itteration early;
+                         */
+                        if ( ! is_array( $elements ) || empty( $elements ) ) {
+                            continue;
+                        }
                         $val = twentytwenty_get_color_for_area( $context, $key );
                         if ( $val ) {
@@ -100 +117 @@
 
             if ( $cover && $cover !== $cover_default ) {
+                twentytwenty_generate_css( '.overlay-header .header-inner', 'color', $cover );
                 twentytwenty_generate_css( '.cover-header .entry-header *', 'color', $cover );
             }

trunk/src/wp-content/themes/twentytwenty/inc/template-tags.php

@@ -16 +16 @@
  */
 
-if ( ! function_exists( 'twentytwenty_site_logo' ) ) {
+/**
+ * Displays the site logo, either text or image.
+ *
+ * @param array   $args Arguments for displaying the site logo either as an image or text.
+ * @param boolean $echo Echo or return the html.
+ */
+function twentytwenty_site_logo( $args = array(), $echo = true ) {
+    $logo       = get_custom_logo();
+    $site_title = get_bloginfo( 'name' );
+    $contents   = '';
+    $classname  = '';
+
+    $defaults = array(
+        'logo'        => '%1$s<span class="screen-reader-text">%2$s</span>',
+        'logo_class'  => 'site-logo',
+        'title'       => '<a href="%1$s">%2$s</a>',
+        'title_class' => 'site-title',
+        'home_wrap'   => '<h1 class="%1$s">%2$s</h1>',
+        'single_wrap' => '<div class="%1$s faux-heading">%2$s</div>',
+        'condition'   => ( is_front_page() || is_home() ) && ! is_page(),
+    );
+
+    $args = wp_parse_args( $args, $defaults );
+
     /**
-     * Displays the site logo, either text or image.
-     *
-     * @param array   $args Arguments for displaying the site logo either as an image or text.
-     * @param boolean $echo Echo or return the html.
+     * Filters the arguments for `twentytwenty_site_logo()`.
+     *
+     * @param array  $args     Parsed arguments.
+     * @param array  $defaults Function's default arguments.
      */
-    function twentytwenty_site_logo( $args = array(), $echo = true ) {
-        $logo       = get_custom_logo();
-        $site_title = get_bloginfo( 'name' );
-        $contents   = '';
-        $classname  = '';
-
-        $defaults = array(
-            'logo'        => '%1$s<span class="screen-reader-text">%2$s</span>',
-            'logo_class'  => 'site-logo',
-            'title'       => '<a href="%1$s">%2$s</a>',
-            'title_class' => 'site-title',
-            'home_wrap'   => '<h1 class="%1$s">%2$s</h1>',
-            'single_wrap' => '<div class="%1$s faux-heading">%2$s</div>',
-            'condition'   => is_front_page() || is_home(),
+    $args = apply_filters( 'twentytwenty_site_logo_args', $args, $defaults );
+
+    if ( has_custom_logo() ) {
+        $contents  = sprintf( $args['logo'], $logo, esc_html( $site_title ) );
+        $classname = $args['logo_class'];
+    } else {
+        $contents  = sprintf( $args['title'], esc_url( get_home_url( null, '/' ) ), esc_html( $site_title ) );
+        $classname = $args['title_class'];
+    }
+
+    $wrap = $args['condition'] ? 'home_wrap' : 'single_wrap';
+
+    $html = sprintf( $args[ $wrap ], $classname, $contents );
+
+    /**
+     * Filters the arguments for `twentytwenty_site_logo()`.
+     *
+     * @param string $html      Compiled html based on our arguments.
+     * @param array  $args      Parsed arguments.
+     * @param string $classname Class name based on current view, home or single.
+     * @param string $contents  HTML for site title or logo.
+     */
+    $html = apply_filters( 'twentytwenty_site_logo', $html, $args, $classname, $contents );
+
+    if ( ! $echo ) {
+        return $html;
+    }
+
+    echo $html; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+
+}
+
+/**
+ * Displays the site description.
+ *
+ * @param boolean $echo Echo or return the html.
+ */
+function twentytwenty_site_description( $echo = true ) {
+    $description = get_bloginfo( 'description' );
+
+    if ( ! $description ) {
+        return;
+    }
+
+    $wrapper = '<div class="site-description">%s</div><!-- .site-description -->';
+
+    $html = sprintf( $wrapper, esc_html( $description ) );
+
+    /**
+     * Filters the html for the site description.
+     *
+     * @since 1.0.0
+     *
+     * @param string $html         The HTML to display.
+     * @param string $description  Site description via `bloginfo()`.
+     * @param string $wrapper      The format used in case you want to reuse it in a `sprintf()`.
+     */
+    $html = apply_filters( 'twentytwenty_site_description', $html, $description, $wrapper );
+
+    if ( ! $echo ) {
+        return $html;
+    }
+
+    echo $html; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+}
+
+/**
+ * Comments
+ */
+/**
+ * Check if the specified comment is written by the author of the post commented on.
+ *
+ * @param object $comment Comment data.
+ */
+function twentytwenty_is_comment_by_post_author( $comment = null ) {
+
+    if ( is_object( $comment ) && $comment->user_id > 0 ) {
+
+        $user = get_userdata( $comment->user_id );
+        $post = get_post( $comment->comment_post_ID );
+
+        if ( ! empty( $user ) && ! empty( $post ) ) {
+
+            return $comment->user_id === $post->post_author;
+
+        }
+    }
+    return false;
+
+}
+
+/**
+ * Filter comment reply link to not JS scroll.
+ * Filter the comment reply link to add a class indicating it should not use JS slow-scroll, as it
+ * makes it scroll to the wrong position on the page.
+ *
+ * @param string $link Link to the top of the page.
+ */
+function twentytwenty_filter_comment_reply_link( $link ) {
+
+    $link = str_replace( 'class=\'', 'class=\'do-not-scroll ', $link );
+    return $link;
+
+}
+
+add_filter( 'comment_reply_link', 'twentytwenty_filter_comment_reply_link' );
+
+/**
+ * Post Meta
+ */
+/**
+ * Get and Output Post Meta.
+ * If it's a single post, output the post meta values specified in the Customizer settings.
+ *
+ * @param int    $post_id The ID of the post for which the post meta should be output.
+ * @param string $location Which post meta location to output – single or preview.
+ */
+function twentytwenty_the_post_meta( $post_id = null, $location = 'single-top' ) {
+
+    echo twentytwenty_get_post_meta( $post_id, $location ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in twentytwenty_get_post_meta().
+
+}
+
+/**
+ * Get the post meta.
+ *
+ * @param int    $post_id The iD of the post.
+ * @param string $location The location where the meta is shown.
+ */
+function twentytwenty_get_post_meta( $post_id = null, $location = 'single-top' ) {
+
+    // Require post ID.
+    if ( ! $post_id ) {
+        return;
+    }
+
+    $page_template = get_page_template_slug( $post_id );
+
+    /**
+     * Filters post types array
+     *
+     * This filter can be used to hide post meta information of post, page or custom post type registerd by child themes or plugins
+     *
+     * @since 1.0.0
+     *
+     * @param array Array of post types
+     */
+    $disallowed_post_types = apply_filters( 'twentytwenty_disallowed_post_types_for_meta_output', array( 'page' ) );
+    // Check whether the post type is allowed to output post meta.
+    if ( in_array( get_post_type( $post_id ), $disallowed_post_types, true ) ) {
+        return;
+    }
+
+    $post_meta_wrapper_classes = '';
+    $post_meta_classes         = '';
+
+    // Get the post meta settings for the location specified.
+    if ( 'single-top' === $location ) {
+        /**
+        * Filters post meta info visibility
+        *
+        * Use this filter to hide post meta information like Author, Post date, Comments, Is stiky status
+        *
+        * @since 1.0.0
+        *
+        * @param array $args {
+        *  @type string 'author'
+        *  @type string 'post-date'
+        *  @type string 'comments'
+        *  @type string  'sticky'
+        * }
+        */
+        $post_meta                 = apply_filters(
+            'twentytwenty_post_meta_location_single_top',
+            array(
+                'author',
+                'post-date',
+                'comments',
+                'sticky',
+            )
         );
-
-        $args = wp_parse_args( $args, $defaults );
+        $post_meta_wrapper_classes = ' post-meta-single post-meta-single-top';
+
+    } elseif ( 'single-bottom' === $location ) {
 
         /**
-         * Filters the arguments for `twentytwenty_site_logo()`.
-         *
-         * @param array  $args     Parsed arguments.
-         * @param array  $defaults Function's default arguments.
-         */
-        $args = apply_filters( 'twentytwenty_site_logo_args', $args, $defaults );
-
-        if ( has_custom_logo() ) {
-            $contents  = sprintf( $args['logo'], $logo, esc_html( $site_title ) );
-            $classname = $args['logo_class'];
-        } else {
-            $contents  = sprintf( $args['title'], esc_url( get_home_url( null, '/' ) ), esc_html( $site_title ) );
-            $classname = $args['title_class'];
-        }
-
-        $wrap = $args['condition'] ? 'home_wrap' : 'single_wrap';
-
-        $html = sprintf( $args[ $wrap ], $classname, $contents );
-
-        /**
-         * Filters the arguments for `twentytwenty_site_logo()`.
-         *
-         * @param string $html      Compiled html based on our arguments.
-         * @param array  $args      Parsed arguments.
-         * @param string $classname Class name based on current view, home or single.
-         * @param string $contents  HTML for site title or logo.
-         */
-        $html = apply_filters( 'twentytwenty_site_logo', $html, $args, $classname, $contents );
-
-        if ( ! $echo ) {
-            return $html;
-        }
-
-        echo $html; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-
-    }
-}
-
-if ( ! function_exists( 'twentytwenty_site_description' ) ) {
-    /**
-     * Displays the site description.
-     *
-     * @param boolean $echo Echo or return the html.
-     */
-    function twentytwenty_site_description( $echo = true ) {
-        $description = get_bloginfo( 'description' );
-
-        if ( ! $description ) {
-            return;
-        }
-
-        $wrapper = '<div class="site-description">%s</div><!-- .site-description -->';
-
-        $html = sprintf( $wrapper, esc_html( $description ) );
-
-        /**
-         * Filters the html for the site description.
-         *
-         * @param string $html         The HTML to display.
-         * @param string $description  Site description via `bloginfo()`.
-         * @param string $wrapper      The format used in case you want to reuse it in a `sprintf()`.
-         */
-        $html = apply_filters( 'twentytwenty_site_description', $html, $description, $wrapper );
-
-        if ( ! $echo ) {
-            return $html;
-        }
-
-        echo $html; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-    }
-}
-
-/**
- * Comments
- */
-if ( ! function_exists( 'twentytwenty_is_comment_by_post_author' ) ) {
-    /**
-     * Check if the specified comment is written by the author of the post commented on.
-     *
-     * @param object $comment Comment data.
-     */
-    function twentytwenty_is_comment_by_post_author( $comment = null ) {
-
-        if ( is_object( $comment ) && $comment->user_id > 0 ) {
-
-            $user = get_userdata( $comment->user_id );
-            $post = get_post( $comment->comment_post_ID );
-
-            if ( ! empty( $user ) && ! empty( $post ) ) {
-
-                return $comment->user_id === $post->post_author;
-
-            }
-        }
-        return false;
-
-    }
-}
-
-if ( ! function_exists( 'twentytwenty_filter_comment_reply_link' ) ) {
-
-    /**
-     * Filter comment reply link to not JS scroll.
-     * Filter the comment reply link to add a class indicating it should not use JS slow-scroll, as it
-     * makes it scroll to the wrong position on the page.
-     *
-     * @param string $link Link to the top of the page.
-     */
-    function twentytwenty_filter_comment_reply_link( $link ) {
-
-        $link = str_replace( 'class=\'', 'class=\'do-not-scroll ', $link );
-        return $link;
-
-    }
-
-    add_filter( 'comment_reply_link', 'twentytwenty_filter_comment_reply_link' );
-
-}
-
-/**
- * Post Meta
- */
-if ( ! function_exists( 'twentytwenty_the_post_meta' ) ) {
-    /**
-     * Get and Output Post Meta.
-     * If it's a single post, output the post meta values specified in the Customizer settings.
-     *
-     * @param int    $post_id The ID of the post for which the post meta should be output.
-     * @param string $location Which post meta location to output – single or preview.
-     */
-    function twentytwenty_the_post_meta( $post_id = null, $location = 'single-top' ) {
-
-        echo twentytwenty_get_post_meta( $post_id, $location ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in twentytwenty_get_post_meta().
-
-    }
-}
-
-if ( ! function_exists( 'twentytwenty_get_post_meta' ) ) {
-
-    /**
-     * Get the post meta.
-     *
-     * @param int    $post_id The iD of the post.
-     * @param string $location The location where the meta is shown.
-     */
-    function twentytwenty_get_post_meta( $post_id = null, $location = 'single-top' ) {
-
-        // Require post ID.
-        if ( ! $post_id ) {
-            return;
-        }
-
-        $page_template = get_page_template_slug( $post_id );
-
-        // Check whether the post type is allowed to output post meta.
-        $disallowed_post_types = apply_filters( 'twentytwenty_disallowed_post_types_for_meta_output', array( 'page' ) );
-        if ( in_array( get_post_type( $post_id ), $disallowed_post_types, true ) ) {
-            return;
-        }
-
-        $post_meta_wrapper_classes = '';
-        $post_meta_classes         = '';
-
-        // Get the post meta settings for the location specified.
-        if ( 'single-top' === $location ) {
-
-            $post_meta                 = apply_filters(
-                'twentytwenty_post_meta_location_single_top',
-                array(
-                    'author',
-                    'post-date',
-                    'comments',
-                    'sticky',
-                )
-            );
-            $post_meta_wrapper_classes = ' post-meta-single post-meta-single-top';
-
-        } elseif ( 'single-bottom' === $location ) {
-
-            $post_meta                 = apply_filters(
-                'twentytwenty_post_meta_location_single_bottom',
-                array(
-                    'tags',
-                )
-            );
-            $post_meta_wrapper_classes = ' post-meta-single post-meta-single-bottom';
-
-        }
-
-        // If the post meta setting has the value 'empty', it's explicitly empty and the default post meta shouldn't be output.
-        if ( $post_meta && ! in_array( 'empty', $post_meta, true ) ) {
-
-            // Make sure we don't output an empty container.
-            $has_meta = false;
-
-            global $post;
-            $the_post = get_post( $post_id );
-            setup_postdata( $the_post );
-
-            ob_start();
-
-            ?>
-
-            <div class="post-meta-wrapper<?php echo esc_attr( $post_meta_wrapper_classes ); ?>">
-
-                <ul class="post-meta<?php echo esc_attr( $post_meta_classes ); ?>">
-
+        * Filters post tags visibility
+        *
+        * Use this filter to hide post tags
+        *
+        * @since 1.0.0
+        *
+        * @param array $args {
+        *   @type string 'tags'
+        * }
+        */
+        $post_meta                 = apply_filters(
+            'twentytwenty_post_meta_location_single_bottom',
+            array(
+                'tags',
+            )
+        );
+        $post_meta_wrapper_classes = ' post-meta-single post-meta-single-bottom';
+
+    }
+
+    // If the post meta setting has the value 'empty', it's explicitly empty and the default post meta shouldn't be output.
+    if ( $post_meta && ! in_array( 'empty', $post_meta, true ) ) {
+
+        // Make sure we don't output an empty container.
+        $has_meta = false;
+
+        global $post;
+        $the_post = get_post( $post_id );
+        setup_postdata( $the_post );
+
+        ob_start();
+
+        ?>
+
+        <div class="post-meta-wrapper<?php echo esc_attr( $post_meta_wrapper_classes ); ?>">
+
+            <ul class="post-meta<?php echo esc_attr( $post_meta_classes ); ?>">
+
+                <?php
+
+                /**
+                 * Fires before post meta html display.
+                 *
+                 * Allow output of additional post meta info to be added by child themes and plugins.
+                 *
+                 * @since 1.0.0
+                 *
+                 * @param int   $post_ID Post ID.
+                 */
+                do_action( 'twentytwenty_start_of_post_meta_list', $post_id );
+
+                // Author.
+                if ( in_array( 'author', $post_meta, true ) ) {
+
+                    $has_meta = true;
+                    ?>
+                    <li class="post-author meta-wrapper">
+                        <span class="meta-icon">
+                            <span class="screen-reader-text"><?php _e( 'Post author', 'twentytwenty' );// phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
+                            <?php twentytwenty_the_theme_svg( 'user' ); ?>
+                        </span>
+                        <span class="meta-text">
+                            <?php
+                            printf(
+                                // Translators: %s = the author name.
+                                _x( 'By %s', '%s = author name', 'twentytwenty' ), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations
+                                '<a href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author_meta( 'display_name' ) ) . '</a>'
+                            );
+                            ?>
+                        </span>
+                    </li>
                     <?php
 
-                    // Allow output of additional meta items to be added by child themes and plugins.
-                    do_action( 'twentytwenty_start_of_post_meta_list', $post_meta, $post_id );
-
-                    // Author.
-                    if ( in_array( 'author', $post_meta, true ) ) {
-
-                        $has_meta = true;
-                        ?>
-                        <li class="post-author meta-wrapper">
+                }
+
+                // Post date.
+                if ( in_array( 'post-date', $post_meta, true ) ) {
+
+                    $has_meta = true;
+                    ?>
+                    <li class="post-date">
+                        <a class="meta-wrapper" href="<?php the_permalink(); ?>">
                             <span class="meta-icon">
-                                <span class="screen-reader-text"><?php _e( 'Post author', 'twentytwenty' );// phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span