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 932b16248...dd7032f

Props anlino, ianbelanger, nielslange, acosmin, netweb, williampatton, adhitya03, phpdocs, acalfieri, itowhid06, littlebigthing, aristath, karmatosed, poena.
See #48110.
Built from https://develop.svn.wordpress.org/trunk@46357


git-svn-id: http://core.svn.wordpress.org/trunk@46156 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentytwenty/404.php

@@ -12,7 +12,7 @@ get_header();
 
 <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>
 
@@ -21,13 +21,15 @@ get_header();
 		<?php
 		get_search_form(
 			array(
-				'label' => __( '404 not found', 'twentytwenty' ),
+				'label' => _x( '404 not found', 'Label', 'twentytwenty' ),
 			)
 		);
 		?>
 
 	</div><!-- .section-inner -->
 
+	<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
+
 </main><!-- #site-content -->
 
 <?php

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

@@ -13,7 +13,7 @@
 
 .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;
 }
 
@@ -45,102 +45,9 @@
 	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 */
-
-@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:
+Inter variable font. Usage:
 
-html { font-family: Inter, sans-serif; }
 @supports (font-variation-settings: normal) {
 	html { font-family: "Inter var", sans-serif; }
 }
@@ -219,7 +126,7 @@ html { font-family: Inter, sans-serif; }
 .editor-styles-wrapper cite,
 .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;
 }
 
 @supports ( font-variation-settings: normal ) {
@@ -279,6 +186,11 @@ html { font-family: Inter, sans-serif; }
 	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,
@@ -501,6 +413,16 @@ html { font-family: Inter, sans-serif; }
 	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;
+}
+
 .editor-styles-wrapper .wp-block-archives.aligncenter,
 .editor-styles-wrapper .wp-block-categories.aligncenter {
 	text-align: center;
@@ -577,7 +499,8 @@ html { font-family: Inter, sans-serif; }
 /* Block: Separator -------------------------- */
 
 hr.wp-block-separator {
-	border-top: 1px solid rgba(0, 0, 0, 0.42);
+	border-top: 1px solid #6d6d6d;
+	color: #6d6d6d;
 	margin: 30px 0;
 }
 
@@ -586,14 +509,18 @@ hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
 }
 
 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;
+}
+
 hr.wp-block-separator:not(.is-style-dots)::before,
 hr.wp-block-separator:not(.is-style-dots)::after {
 	background: currentColor;
@@ -617,7 +544,6 @@ hr.wp-block-separator::after {
 /* STYLE: DOTS */
 
 hr.wp-block-separator.is-style-dots::before {
-	color: rgba(0, 0, 0, 0.42);
 	font-size: 32px;
 	font-weight: 700;
 	letter-spacing: 1em;
@@ -943,6 +869,11 @@ hr.wp-block-separator.is-style-dots::before {
 	text-decoration: none;
 }
 
+.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 */
 
 .editor-styles-wrapper .wp-block-latest-comments.has-avatars .wp-block-latest-comments__comment {
@@ -1024,6 +955,11 @@ hr.wp-block-separator.is-style-dots::before {
 	text-decoration: none;
 }
 
+.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;
 	padding: 1em 1.25em;

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

@@ -18,102 +18,9 @@
 	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 */
-
-@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:
+Inter variable font. Usage:
 
-html { font-family: Inter, sans-serif; }
 @supports (font-variation-settings: normal) {
 	html { font-family: "Inter var", sans-serif; }
 }
@@ -136,7 +43,7 @@ html { font-family: Inter, sans-serif; }
 /* Structure --------------------------------- */
 
 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;
 }
 
 @supports ( font-variation-settings: normal ) {
@@ -206,6 +113,7 @@ body#tinymce.wp-editor pre {
 }
 
 body#tinymce.wp-editor a,
+body#tinymce.wp-editor a:focus,
 body#tinymce.wp-editor a:hover {
 	color: #cd2653;
 	text-decoration: underline;
@@ -277,7 +185,7 @@ body#tinymce.wp-editor .wp-caption-text,
 body#tinymce.wp-editor .wp-caption-dd,
 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;
 }
 
@@ -626,20 +534,20 @@ body#tinymce.wp-editor input[type="submit"] {
 	text-transform: uppercase;
 }
 
+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;
 }
@@ -658,6 +566,7 @@ body#tinymce.wp-editor input[type="submit"]:focus {
 /* BUTTON STYLE: OUTLINE */
 
 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;
 }

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

@@ -18,102 +18,9 @@
 	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 */
-
-@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:
+Inter variable font. Usage:
 
-html { font-family: Inter, sans-serif; }
 @supports (font-variation-settings: normal) {
 	html { font-family: "Inter var", sans-serif; }
 }
@@ -136,7 +43,7 @@ html { font-family: Inter, sans-serif; }
 /* Structure --------------------------------- */
 
 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;
 }
 
 @supports ( font-variation-settings: normal ) {
@@ -206,6 +113,7 @@ body#tinymce.wp-editor pre {
 }
 
 body#tinymce.wp-editor a,
+body#tinymce.wp-editor a:focus,
 body#tinymce.wp-editor a:hover {
 	color: #cd2653;
 	text-decoration: underline;
@@ -277,7 +185,7 @@ body#tinymce.wp-editor .wp-caption-text,
 body#tinymce.wp-editor .wp-caption-dd,
 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;
 }
 
@@ -626,20 +534,20 @@ body#tinymce.wp-editor input[type="submit"] {
 	text-transform: uppercase;
 }
 
+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;
 }
@@ -658,6 +566,7 @@ body#tinymce.wp-editor input[type="submit"]:focus {
 /* BUTTON STYLE: OUTLINE */
 
 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;
 }

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

@@ -2,24 +2,16 @@
 	font-family: "Font Awesome 5";
 	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.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");
 }
 
 @font-face {
 	font-family: "Font Awesome 5 Brands";
 	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.woff) format("woff");
-		url(../fonts/font-awesome/fa-brands-400.ttf) format("truetype"),
-		url(../fonts/font-awesome/fa-brands-400.svg#fontawesome) format("svg");
 }

wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-fallback.svg

@@ -1,16 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2019 by original authors @ fontello.com</metadata>
-<defs>
-<font id="font-awsome-fallback" horiz-adv-x="1000" >
-<font-face font-family="font-awsome-fallback" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
-<missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="link" unicode="&#xe805;" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
-
-<glyph glyph-name="rss" unicode="&#xf09e;" d="M214 100q0-45-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m286-69q1-15-9-26-10-12-27-12h-75q-14 0-24 9t-11 23q-12 128-103 219t-219 103q-14 1-23 11t-9 24v75q0 16 12 26 9 10 24 10h3q89-7 170-45t145-101q63-63 101-145t45-171z m286-1q1-15-10-26-10-11-26-11h-80q-14 0-25 10t-10 23q-7 120-57 228t-129 188-188 129-227 57q-14 1-24 11t-10 24v80q0 16 11 26 10 10 25 10h1q147-8 280-67t238-164q104-104 164-238t67-280z" horiz-adv-x="785.7" />
-
-<glyph glyph-name="mail" unicode="&#xf0e0;" d="M1000 454v-443q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v443q25-27 56-49 202-137 278-192 32-24 51-37t53-27 61-13h2q28 0 61 13t53 27 51 37q95 68 278 192 32 22 56 49z m0 164q0-44-27-84t-68-69q-210-146-262-181-5-4-23-17t-30-22-29-18-32-15-28-5h-2q-12 0-27 5t-32 15-30 18-30 22-23 17q-51 35-147 101t-114 80q-35 23-65 64t-31 77q0 43 23 72t66 29h822q36 0 63-26t26-63z" horiz-adv-x="1000" />
-</font>
-</defs>
-</svg>

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

@@ -1,4 +1,4 @@
-/* global backgroundColors, twentyTwentyColor, Color, jQuery, wp, _ */
+/* global twentyTwentyBgColors, twentyTwentyColor, Color, jQuery, wp, _ */
 /**
  * Customizer enhancements for a better user experience.
  *
@@ -14,12 +14,12 @@
 		wp.customize( 'accent_hue', function( value ) {
 			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 ) {
+					if ( twentyTwentyBgColors[ context ].color ) {
-						backgroundColorValue = backgroundColors[ 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 );
 				} );
@@ -27,8 +27,8 @@
 		} );
 
 		// Add a listener for background-color changes.
-		Object.keys( backgroundColors ).forEach( function( context ) {
+		Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
-			wp.customize( backgroundColors[ context ].setting, function( value ) {
+			wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {
 				value.bind( function( to ) {
 					// Update the value for our accessible colors for this area.
 					twentyTwentySetAccessibleColorsValue( context, to, wp.customize( 'accent_hue' ).get(), to );
@@ -68,11 +68,10 @@
 			};
 
 			// Get borders color.
-			value[ context ].borders = Color( {
+			value[ context ].borders = colors.bgColorObj
-				h: colors.bgColorObj.h(),
+				.clone()
-				s: colors.bgColorObj.s() * 0.3922,
+				.getReadableContrastingColor( colors.bgColorObj, 1.36 )
-				l: colors.isDark ? colors.bgColorObj.l() + 9 : colors.bgColorObj.l() - 9
+				.toCSS();
-			} ).toCSS();
 
 			// Get secondary color.
 			value[ context ].secondary = Color( {

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

@@ -1,4 +1,4 @@
-/* global backgroundColors, previewElements, jQuery, _, wp */
+/* global twentyTwentyBgColors, twentyTwentyPreviewEls, jQuery, _, wp */
 /**
  * Customizer enhancements for a better user experience.
  *
@@ -7,22 +7,123 @@
  * @since 1.0.0
  */
 
-( 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 );
 				} );
 			}, 50 );
@@ -30,8 +131,8 @@
 	} );
 
 	// Add listeners for background-color settings.
-	Object.keys( backgroundColors ).forEach( function( context ) {
+	Object.keys( twentyTwentyBgColors ).forEach( function( context ) {
-		wp.customize( backgroundColors[ context ].setting, function( value ) {
+		wp.customize( twentyTwentyBgColors[ context ].setting, function( value ) {
 			value.bind( function() {
 				// Generate the styles.
 				// Add a small delay to be sure the accessible colors were generated.
@@ -55,17 +156,17 @@
 		// Get the accessible colors option.
 		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>' );
+			$( '#twentytwenty-style-inline-css' ).after( '<style id="' + stylesheedID + '"></style>' );
-			stylesheet = jQuery( '#' + stylesheedID );
+			stylesheet = $( '#' + stylesheedID );
 		}
 		if ( ! _.isUndefined( a11yColors[ context ] ) ) {
 			// Check if we have elements defined.
-			if ( previewElements[ context ] ) {
+			if ( twentyTwentyPreviewEls[ context ] ) {
-				_.each( previewElements[ context ], function( items, setting ) {
+				_.each( twentyTwentyPreviewEls[ context ], function( items, setting ) {
 					_.each( items, function( elements, property ) {
 						if ( ! _.isUndefined( a11yColors[ context ][ setting ] ) ) {
 							styles += elements.join( ',' ) + '{' + property + ':' + a11yColors[ context ][ setting ] + ';}';
@@ -78,8 +179,8 @@
 		stylesheet.html( styles );
 	}
 	// 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, _ ) );

wp-content/themes/twentytwenty/assets/js/editor-script-block.js

@@ -0,0 +1,9 @@
+/**
+ * Remove squared button style
+ *
+ * @since 1.0.0
+ */
+/* global wp */
+wp.domReady( function() {
+	wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );
+} );

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

@@ -6,10 +6,6 @@ var twentytwenty = twentytwenty || {};
 
 // 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 ) {
 		var el = this;
@@ -53,6 +49,24 @@ twentytwenty.createEvent = function( eventName ) {
 	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;
+		};
+}
+
 /*	-----------------------------------------------------------------------------------------------
 	Cover Modals
 --------------------------------------------------------------------------------------------------- */
@@ -137,8 +151,10 @@ twentytwenty.coverModals = {
 		};
 
 		function htmlStyles() {
+			var overflow = window.innerHeight > document.documentElement.getBoundingClientRect().height;
+
 			return {
-				'overflow-y': 'scroll',
+				'overflow-y': overflow ? 'hidden' : 'scroll',
 				position: 'fixed',
 				width: '100%',
 				top: getAdminBarHeight( true ),
@@ -209,38 +225,6 @@ twentytwenty.coverModals = {
 
 }; // twentytwenty.coverModals
 
-/*	-----------------------------------------------------------------------------------------------
-	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,10 +234,6 @@ twentytwenty.intrinsicRatioVideos = {
 	init: function() {
 		this.makeFit();
 
-		window.addEventListener( 'fit-videos', function() {
-			this.makeFit();
-		}.bind( this ) );
-
 		window.addEventListener( 'resize', function() {
 			this.makeFit();
 		}.bind( this ) );
@@ -383,30 +363,118 @@ twentytwenty.smoothScroll = {
 }; // twentytwenty.smoothScroll
 
 /*	-----------------------------------------------------------------------------------------------
-	Main Menu
+	Modal Menu
 --------------------------------------------------------------------------------------------------- */
 twentytwenty.modalMenu = {
 
 	init: function() {
 		// 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 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 ) {
-					subMenuToggle.click();
+						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';
+					}
+				}
+				self = self.parentElement;
+			}
+		}
+	}
+}; // twentytwenty.primaryMenu
+
 /*	-----------------------------------------------------------------------------------------------
 	Toggles
 --------------------------------------------------------------------------------------------------- */
@@ -424,10 +492,7 @@ twentytwenty.toggles = {
 		this.untoggleOnEscapeKeyPress();
 	},
 
-	// Do the toggle
+	performToggle: function( element, instantly ) {
-	toggle: function() {
-		document.querySelectorAll( '*[data-toggle-target]' ).forEach( function( element ) {
-			element.addEventListener( 'click', function() {
 		var toggle, targetString, target, timeOutTime, classToToggle, activeClass;
 
 		// Get our targets
@@ -461,15 +526,15 @@ twentytwenty.toggles = {
 		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;
+			duration = toggle.dataset.toggleDuration;
 
-						twentytwentySlideToggle( newTarget, duration );
+			// Toggle the target of the clicked toggle
+			if ( toggle.dataset.toggleType === 'slidetoggle' && ! instantly && duration !== '0' ) {
+				twentytwentyMenuToggle( newTarget, duration );
 			} else {
-						target.classList.toggle( classToToggle );
+				newTarget.classList.toggle( classToToggle );
 			}
 
 			// If the toggle target is 'next', only give the clicked toggle the active class
@@ -516,6 +581,15 @@ twentytwenty.toggles = {
 				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() {
+				self.performToggle( element );
 			} );
 		} );
 	},
@@ -594,7 +668,7 @@ twentytwentyDomReady( function() {
 	twentytwenty.intrinsicRatioVideos.init();	// Retain aspect ratio of videos on window resize
 	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
 } );
 
 /*	-----------------------------------------------------------------------------------------------
@@ -618,96 +692,100 @@ function twentytwentyToggleAttribute( element, attribute, trueVal, falseVal ) {
 }
 
 /**
- * twentytwentySlideUp
+ * Toggle a menu item on or off.
- *
- * this implementation is coming from https://w3bits.com/javascript-slidetoggle/
  *
  * @param {HTMLElement} target
  * @param {number} duration
  */
-function twentytwentySlideUp( target, duration ) {
+function twentytwentyMenuToggle( target, duration ) {
-	target.style.transitionProperty = 'height, margin, padding'; /* [1.1] */
+	var initialPositions = [];
-	target.style.transitionDuration = duration + 'ms'; /* [1.2] */
+	var finalPositions = [];
-	target.style.boxSizing = 'border-box'; /* [2] */
+	var initialParentHeight, finalParentHeight;
-	target.style.height = target.offsetHeight + 'px'; /* [3] */
+	var menu, menuItems;
-	target.style.height = 0; /* [4] */
+	var transitionListener;
-	target.style.paddingTop = 0; /* [5.1] */
+
-	target.style.paddingBottom = 0; /* [5.2] */
+	if ( ! target ) {
-	target.style.marginTop = 0; /* [6.1] */
+		return;
-	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 );
 	}
 
-/**
+	menu = target.closest( '.menu-wrapper' );
- * twentytwentySlideDown
+
- *
+	// Step 1: look at the initial positions of every menu item.
- * this implementation is coming from https://w3bits.com/javascript-slidetoggle/
+	menuItems = menu.querySelectorAll( '.menu-item' );
- *
+
- * @param {HTMLElement} target
+	menuItems.forEach( function( menuItem, index ) {
- * @param {number} duration
+		initialPositions[ index ] = { x: menuItem.offsetLeft, y: menuItem.offsetTop };
- */
+	} );
-function twentytwentySlideDown( target, duration ) {
+	initialParentHeight = target.parentElement.offsetHeight;
-	var height, display;
+
-	target.style.removeProperty( 'display' ); /* [1] */
+	target.classList.add( 'toggling-target' );
-	display = window.getComputedStyle( target ).display;
+
-	if ( display === 'none' ) { /* [2] */
+	// Step 2: toggle target menu item and look at the final positions of every menu item.
-		display = 'block';
+	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;
 		}
-	target.style.display = display;
+		menuItem.style.transform = 'translate(' + initialPosition.x + 'px, ' + initialPosition.y + 'px)';
+	} );
 
-	height = target.offsetHeight; /* [3] */
+	// The double rAF is unfortunately needed, since we're toggling CSS classes, and
-	target.style.height = 0; /* [4] */
+	// the only way to ensure layout completion here across browsers is to wait twice.
-	target.style.paddingTop = 0; /* [5.1] */
+	// This just delays the start of the animation by 2 frames and is thus not an issue.
-	target.style.paddingBottom = 0; /* [5.2] */
+	requestAnimationFrame( function() {
-	target.style.marginTop = 0; /* [6.1] */
+		requestAnimationFrame( function() {
-	target.style.marginBottom = 0; /* [6.2] */
+			// Step 5: start animation by moving everything to final position.
-	target.style.overflow = 'hidden'; /* [7] */
+			// 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)
-	target.style.boxSizing = 'border-box'; /* [8] */
+			// that don't trigger the layout or paint stages.
-	target.style.transitionProperty = 'height, margin, padding'; /* [9.1] */
+			menu.classList.add( 'is-animating' );
-	target.style.transitionDuration = duration + 'ms'; /* [9.2] */
+			menuItems.forEach( function( menuItem, index ) {
-	target.style.height = height + 'px'; /* [10] */
+				var finalPosition = finalPositions[ index ];
-	target.style.removeProperty( 'padding-top' ); /* [11.1] */
+				if ( finalPosition.y === 0 && menuItem.parentElement === target ) {
-	target.style.removeProperty( 'padding-bottom' ); /* [11.2] */
+					finalPosition.y = finalParentHeight;
-	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 );
 				}
-
+				if ( duration !== undefined ) {
-/**
+					menuItem.style.transitionDuration = duration + 'ms';
- * 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;
 				}
-
+				menuItem.style.transform = 'translate(' + finalPosition.x + 'px, ' + finalPosition.y + 'px)';
-	if ( window.getComputedStyle( target ).display === 'none' ) {
+			} );
-		return twentytwentySlideDown( target, duration );
+			if ( duration !== undefined ) {
+				target.style.transitionDuration = duration + 'ms';
 			}
-	return twentytwentySlideUp( target, duration );
+		} );
+
+		// 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 );
+	} );
 }
 
 /**

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

@@ -154,36 +154,6 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
 				)
 			);
 
-			/**
-			 * 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';
 
@@ -197,7 +167,7 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
 					'title'       => __( 'Theme Options', 'twentytwenty' ),
 					'priority'    => 40,
 					'capability'  => 'edit_theme_options',
-					'description' => __( 'Settings for this theme.', 'twentytwenty' ),
+					'description' => __( 'Specific settings for the Twenty Twenty theme.', 'twentytwenty' ),
 				)
 			);
 
@@ -207,7 +177,7 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
 				'enable_header_search',
 				array(
 					'capability'        => 'edit_theme_options',
-					'default'           => false,
+					'default'           => true,
 					'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
 				)
 			);
@@ -219,7 +189,6 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
 					'section'  => 'options',
 					'priority' => 10,
 					'label'    => __( 'Show search in header', 'twentytwenty' ),
-					'description' => __( 'Uncheck to hide the search in the header.', 'twentytwenty' ),
 				)
 			);
 
@@ -241,7 +210,6 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
 					'section'  => 'options',
 					'priority' => 10,
 					'label'    => __( 'On archive pages, posts show:', 'twentytwenty' ),
-					'description' => __( 'Search results always show the summary.', 'twentytwenty' ),
 					'choices'  => array(
 						'full'    => __( 'Full text', 'twentytwenty' ),
 						'summary' => __( 'Summary', 'twentytwenty' ),
@@ -270,6 +238,7 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
 					'capability'        => 'edit_theme_options',
 					'default'           => true,
 					'sanitize_callback' => array( __CLASS__, 'sanitize_checkbox' ),
+					'transport'         => 'postMessage',
 				)
 			);
 
@@ -283,6 +252,14 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
 				)
 			);
 
+			$wp_customize->selective_refresh->add_partial(
+				'cover_template_fixed_background',
+				array(
+					'selector' => '.cover-header',
+					'type'     => 'cover_fixed',
+				)
+			);
+
 			/* Separator --------------------- */
 
 			$wp_customize->add_setting(
@@ -346,51 +323,14 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
 				)
 			);
 
-			/* 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' ),
-					'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(
 				'cover_template_overlay_opacity',
 				array(
-					'default'           => '80',
+					'default'           => 80,
-					'sanitize_callback' => array( __CLASS__, 'sanitize_select' ),
+					'sanitize_callback' => 'absint',
+					'transport'         => 'postMessage',
 				)
 			);
 
@@ -398,25 +338,20 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
 				'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' ),
+					'description' => __( 'Make sure that the contrast is high enough so that the text is readable.', 'twentytwenty' ),
 					'section'     => 'cover_template_options',
-					'type'        => 'select',
+					'type'        => 'range',
-					'choices'     => array(
+					'input_attrs' => twentytwenty_customize_opacity_range(),
-						'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' ),
-					),
 				)
 			);
 
+			$wp_customize->selective_refresh->add_partial(
+				'cover_template_overlay_opacity',
+				array(
+					'selector' => '.cover-color-overlay',
+					'type'     => 'cover_opacity',
+				)
+			);
 		}
 
 		/**
@@ -443,15 +378,6 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) {
 			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() );
-		}
-
 		/**
 		 * Sanitize select.
 		 *
@@ -511,3 +437,31 @@ if ( ! function_exists( 'twentytwenty_customize_partial_site_logo' ) ) {
 		twentytwenty_site_logo();
 	}
 }
+
+
+/**
+ * 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,
+		)
+	);
+}

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

@@ -1,16 +1,17 @@
 <?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
  * @subpackage Twenty_Twenty
  * @since 1.0.0
  */
 
+if ( ! class_exists( 'TwentyTwenty_Script_Loader' ) ) {
 	/**
 	 * A class that provides a way to add `async` or `defer` attributes to scripts.
 	 */
@@ -28,7 +29,7 @@ class TwentyTwenty_Script_Loader {
 		 * @return string Script HTML string.
 		 */
 		public function filter_script_loader_tag( $tag, $handle ) {
-		foreach ( array( 'async', 'defer' ) as $attr ) {
+			foreach ( [ 'async', 'defer' ] as $attr ) {
 				if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
 					continue;
 				}
@@ -43,3 +44,4 @@ class TwentyTwenty_Script_Loader {
 		}
 
 	}
+}

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

@@ -69,6 +69,11 @@ if ( ! class_exists( 'TwentyTwenty_Walker_Comment' ) ) {
 									<?php echo esc_html( $comment_timestamp ); ?>
 								</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 -->
 
 					</footer><!-- .comment-meta -->
@@ -84,6 +89,7 @@ if ( ! class_exists( 'TwentyTwenty_Walker_Comment' ) ) {
 							<p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></p>
 							<?php
 						}
+
 						?>
 
 					</div><!-- .comment-content -->
@@ -105,9 +111,7 @@ if ( ! class_exists( 'TwentyTwenty_Walker_Comment' ) ) {
 
 					$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 ) {
-
-					if ( $comment_reply_link || $by_post_author || $edit_comment_link ) {
 						?>
 
 						<footer class="comment-footer-meta">
@@ -116,9 +120,6 @@ if ( ! class_exists( 'TwentyTwenty_Walker_Comment' ) ) {
 							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 ) {
 								echo '<span class="by-post-author">' . __( 'By Post Author', 'twentytwenty' ) . '</span>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations
 							}

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

@@ -128,9 +128,10 @@ if ( ! class_exists( 'TwentyTwenty_Walker_Page' ) ) {
 				if ( isset( $args['pages_with_children'][ $page->ID ] ) ) {
 
 					$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>';
 
 				}
 

wp-content/themes/twentytwenty/comments.php

@@ -107,7 +107,7 @@ if ( $comments ) {
 if ( comments_open() || pings_open() ) {
 
 	if ( $comments ) {
-		echo '<hr class="is-style-wide" aria-hidden="true" />';
+		echo '<hr class="styled-separator is-style-wide" aria-hidden="true" />';
 	}
 
 	comment_form(
@@ -121,7 +121,7 @@ if ( comments_open() || pings_open() ) {
 } elseif ( is_single() ) {
 
 	if ( $comments ) {
-		echo '<hr class="is-style-wide" aria-hidden="true" />';
+		echo '<hr class="styled-separator is-style-wide" aria-hidden="true" />';
 	}
 
 	?>

wp-content/themes/twentytwenty/footer.php

@@ -12,112 +12,9 @@
  */
 
 ?>		
-
 			<footer id="site-footer" role="contentinfo" class="header-footer-group">
 
-			<div class="footer-inner section-inner">
+				<div class="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="footer-credits">
 
@@ -130,14 +27,15 @@
 								)
 							);
 							?>
-							<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">
+							<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
 								<?php
-							/* Translators: %s = Link to WordPress.org */
+								_e( 'Powered by WordPress', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations
-							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>
 						</p><!-- .theme-credits -->
 
 					</div><!-- .footer-credits -->
@@ -157,9 +55,7 @@
 						</span>
 					</a>
 
-				</div><!-- .footer-bottom -->
+				</div><!-- .section-inner -->
-
-			</div><!-- .footer-inner -->
 
 			</footer><!-- #site-footer -->
 

wp-content/themes/twentytwenty/functions.php

@@ -24,7 +24,6 @@
  * Block editor settings
  */
 
-if ( ! function_exists( 'twentytwenty_theme_support' ) ) {
 /**
  * Sets up theme defaults and registers support for various WordPress features.
  *
@@ -114,8 +113,8 @@ if ( ! function_exists( 'twentytwenty_theme_support' ) ) {
 	/*
 	 * 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
+	 * If you're building a theme based on Twenty Twenty, use a find and replace
-		 * to change 'twentynineteen' to the name of your theme in all the template files.
+	 * to change 'twentytwenty' to the name of your theme in all the template files.
 	 */
 	load_theme_textdomain( 'twentytwenty' );
 
@@ -133,14 +132,12 @@ if ( ! function_exists( 'twentytwenty_theme_support' ) ) {
 	 * by the theme.
 	 */
 	$loader = new TwentyTwenty_Script_Loader();
-		add_filter( 'script_loader_tag', [ $loader, 'filter_script_loader_tag' ], 10, 2 );
+	add_filter( 'script_loader_tag', array( $loader, 'filter_script_loader_tag' ), 10, 2 );
 
 }
 
 add_action( 'after_setup_theme', 'twentytwenty_theme_support' );
 
-}
-
 /**
  * REQUIRED FILES
  * Include required files.
@@ -172,7 +169,6 @@ require get_template_directory() . '/inc/custom-css.php';
 // Custom starter content to highlight the theme on fresh sites.
 require get_template_directory() . '/inc/starter-content.php';
 
-if ( ! function_exists( 'twentytwenty_register_styles' ) ) {
 /**
  * Register and Enqueue Styles.
  */
@@ -181,7 +177,16 @@ if ( ! function_exists( '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.
+	/**
+	* 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 ) {
@@ -195,13 +200,13 @@ if ( ! function_exists( 'twentytwenty_register_styles' ) ) {
 	// 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' );
 
-}
-
-if ( ! function_exists( 'twentytwenty_register_scripts' ) ) {
 /**
  * Register and Enqueue Scripts.
  */
@@ -220,9 +225,6 @@ if ( ! function_exists( 'twentytwenty_register_scripts' ) ) {
 
 add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );
 
-}
-
-if ( ! function_exists( 'twentytwenty_menus' ) ) {
 /**
  * Register navigation menus uses wp_nav_menu in five places.
  */
@@ -241,8 +243,6 @@ if ( ! function_exists( 'twentytwenty_menus' ) ) {
 
 add_action( 'init', 'twentytwenty_menus' );
 
-}
-
 /**
  * Get the information about the logo.
  *
@@ -298,21 +298,15 @@ if ( ! function_exists( 'wp_body_open' ) ) {
 	}
 }
 
-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 faux-button screen-reader-text" href="#site-content">' . __( 'Skip to the content', 'twentytwenty' ) . '</a>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations
+	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 );
 
-}
-
-if ( ! function_exists( 'twentytwenty_sidebar_registration' ) ) {
-
 /**
  * Register widget areas.
  *
@@ -356,10 +350,6 @@ if ( ! function_exists( 'twentytwenty_sidebar_registration' ) ) {
 
 add_action( 'widgets_init', 'twentytwenty_sidebar_registration' );
 
-}
-
-if ( ! function_exists( 'twentytwenty_block_editor_styles' ) ) {
-
 /**
  * Enqueue supplemental block editor styles.
  */
@@ -374,14 +364,12 @@ if ( ! function_exists( 'twentytwenty_block_editor_styles' ) ) {
 	// 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 );
 
-}
-
-if ( ! function_exists( 'twentytwenty_classic_editor_styles' ) ) {
-
 /**
  * Enqueue classic editor styles.
  */
@@ -397,10 +385,6 @@ if ( ! function_exists( 'twentytwenty_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.
@@ -423,10 +407,6 @@ if ( ! function_exists( 'twentytwenty_add_classic_editor_customizer_styles' ) )
 
 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.
@@ -452,20 +432,6 @@ if ( ! function_exists( 'twentytwenty_block_editor_settings' ) ) {
 		),
 	);
 
-		// 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 ) {
@@ -483,31 +449,31 @@ if ( ! function_exists( 'twentytwenty_block_editor_settings' ) ) {
 		add_theme_support( 'editor-color-palette', $editor_color_palette );
 	}
 
-		// the block editor Font Sizes.
+	// Gutenberg Font Sizes.
 	add_theme_support(
 		'editor-font-sizes',
 		array(
 			array(
-					'name'      => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ),
+				'name'      => _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ),
-					'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', '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 the block editor', 'twentytwenty' ),
+				'name'      => _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ),
-					'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', '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 the block editor', 'twentytwenty' ),
+				'name'      => _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ),
-					'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', '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 the block editor', 'twentytwenty' ),
+				'name'      => _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ),
-					'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'twentytwenty' ),
+				'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ),
 				'size'      => 32,
 				'slug'      => 'larger',
 			),
@@ -524,10 +490,6 @@ if ( ! function_exists( 'twentytwenty_block_editor_settings' ) ) {
 
 add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
 
-}
-
-if ( ! function_exists( 'twentytwenty_read_more_tag' ) ) {
-
 /**
  * Read More Link
  * Overwrite default (more ...) tag
@@ -542,9 +504,6 @@ if ( ! function_exists( 'twentytwenty_read_more_tag' ) ) {
 }
 add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );
 
-}
-
-if ( ! function_exists( 'twentytwenty_customize_controls_enqueue_scripts' ) ) {
 /**
  * Enqueues scripts for customizer controls & settings.
  *
@@ -560,13 +519,11 @@ if ( ! function_exists( 'twentytwenty_customize_controls_enqueue_scripts' ) ) {
 
 	// 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() );
+	wp_localize_script( 'twentytwenty-customize-controls', 'twentyTwentyBgColors', 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.
  *
@@ -577,15 +534,22 @@ if ( ! function_exists( 'twentytwenty_customize_preview_init' ) ) {
 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_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', 'backgroundColors', twentytwenty_get_customizer_color_vars() );
+	wp_localize_script( 'twentytwenty-customize-preview', 'twentyTwentyBgColors', twentytwenty_get_customizer_color_vars() );
-		wp_localize_script( 'twentytwenty-customize-preview', 'previewElements', twentytwenty_get_elements_array() );
+	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' );
-}
 
-if ( ! function_exists( 'twentytwenty_get_color_for_area' ) ) {
 /**
  * Get accessible color for an area.
  *
@@ -624,9 +588,6 @@ if ( ! function_exists( 'twentytwenty_get_color_for_area' ) ) {
 	// 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.
@@ -646,9 +607,6 @@ if ( ! function_exists( 'twentytwenty_get_customizer_color_vars' ) ) {
 	);
 	return $colors;
 }
-}
-
-if ( ! function_exists( 'twentytwenty_get_elements_array' ) ) {
 
 /**
  * Get an array of elements.
@@ -664,38 +622,37 @@ if ( ! function_exists( 'twentytwenty_get_elements_array' ) ) {
 	$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' ),
+				'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'     => 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', '.has-accent-background-color', '.comment-reply-link', '.edit-comment-link' ),
+				'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-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.comment-reply-link', '.edit-comment-link' ),
+				'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' ),
+				'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 *' ),
+				'border-color'        => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ),
-					'background'          => array( 'caption', 'code', 'code', 'kbd', 'samp' ),
+				'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' ),
-					'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' ),
+				'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: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"]' ),
+				'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', '#site-footer', '.menu-modal', '.menu-modal-inner', '.search-modal-inner', '.archive-header', '.singular .entry-header', '.singular .featured-media:before', '.wp-block-pullquote:before' ),
+				'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' ),
@@ -704,17 +661,21 @@ if ( ! function_exists( 'twentytwenty_get_elements_array' ) ) {
 				'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' ),
+				'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 *', '.menu-modal nav *', '.footer-widgets-outer-wrapper', '.footer-top' ),
+				'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' ),
-					'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
-					'border-top-color'    => array( '.wp-block-latest-posts.is-grid li' ),
 			),
 		),
 	);
 
+	/**
+	* Filters Twenty Twenty theme elements
+	*
+	* @since 1.0.0
+	*
+	* @param array Array of elements
+	*/
 	return apply_filters( 'twentytwenty_get_elements_array', $elements );
 }
-}

wp-content/themes/twentytwenty/header.php

@@ -16,7 +16,7 @@
 
 	<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" >
 
 		<link rel="profile" href="https://gmpg.org/xfn/11">
@@ -48,7 +48,9 @@
 
 						<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">
+								<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>
 						</button><!-- .search-toggle -->
@@ -69,7 +71,9 @@
 
 					<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">
+							<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>
 					</button><!-- .nav-toggle -->
@@ -82,9 +86,7 @@
 					if ( has_nav_menu( 'primary' ) || ! has_nav_menu( 'expanded' ) ) {
 						?>
 
-						<div class="primary-menu-wrapper">
+							<nav class="primary-menu-wrapper" aria-label="<?php esc_attr_e( 'Horizontal', 'twentytwenty' ); ?>" role="navigation">
-
-							<nav aria-label="<?php esc_attr_e( 'Primary', 'twentytwenty' ); ?>">
 
 								<ul class="primary-menu reset-list-style">
 
@@ -115,9 +117,7 @@
 
 								</ul>
 
-							</nav><!-- .primary-menu -->
+							</nav><!-- .primary-menu-wrapper -->
-
-						</div><!-- .primary-menu-wrapper -->
 
 						<?php
 					}
@@ -145,8 +145,10 @@
 							<button class="toggle 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">
 									<span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>
+									<div class="toggle-icon">
 										<?php twentytwenty_the_theme_svg( 'ellipsis' ); ?>
 									</div>
+								</div>
 							</button><!-- .nav-toggle -->
 
 						</div><!-- .nav-toggle-wrapper -->

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

@@ -23,7 +23,10 @@ if ( ! function_exists( 'twentytwenty_generate_css' ) ) {
 
 		$return = '';
 
-		if ( ! $value ) {
+		/*
+		 * Bail early if we have no $selector elements or properties and $value.
+		 */
+		if ( ! $value || ! $selector ) {
 
 			return;
 		}
@@ -56,6 +59,13 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) {
 		$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\']' );
 
 		// Header.
@@ -90,6 +100,13 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) {
 			foreach ( $elements_definitions as $context => $props ) {
 				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 ) {
 							twentytwenty_generate_css( implode( ',', $elements ), $property, $val );
@@ -99,6 +116,7 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) {
 			}
 
 			if ( $cover && $cover !== $cover_default ) {
+				twentytwenty_generate_css( '.overlay-header .header-inner', 'color', $cover );
 				twentytwenty_generate_css( '.cover-header .entry-header *', 'color', $cover );
 			}
 

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

@@ -15,7 +15,6 @@
  * Classes
  */
 
-if ( ! function_exists( 'twentytwenty_site_logo' ) ) {
 /**
  * Displays the site logo, either text or image.
  *
@@ -35,7 +34,7 @@ if ( ! function_exists( 'twentytwenty_site_logo' ) ) {
 		'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(),
+		'condition'   => ( is_front_page() || is_home() ) && ! is_page(),
 	);
 
 	$args = wp_parse_args( $args, $defaults );
@@ -77,9 +76,7 @@ if ( ! function_exists( 'twentytwenty_site_logo' ) ) {
 	echo $html; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 
 }
-}
 
-if ( ! function_exists( 'twentytwenty_site_description' ) ) {
 /**
  * Displays the site description.
  *
@@ -99,6 +96,8 @@ if ( ! function_exists( 'twentytwenty_site_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()`.
@@ -111,12 +110,10 @@ if ( ! function_exists( 'twentytwenty_site_description' ) ) {
 
 	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.
  *
@@ -138,9 +135,6 @@ if ( ! function_exists( 'twentytwenty_is_comment_by_post_author' ) ) {
 	return false;
 
 }
-}
-
-if ( ! function_exists( 'twentytwenty_filter_comment_reply_link' ) ) {
 
 /**
  * Filter comment reply link to not JS scroll.
@@ -158,12 +152,9 @@ if ( ! function_exists( 'twentytwenty_filter_comment_reply_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.
@@ -176,9 +167,6 @@ if ( ! function_exists( 'twentytwenty_the_post_meta' ) ) {
 	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.
@@ -195,8 +183,17 @@ if ( ! function_exists( 'twentytwenty_get_post_meta' ) ) {
 
 	$page_template = get_page_template_slug( $post_id );
 
-		// Check whether the post type is allowed to output post meta.
+	/**
+	 * 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;
 	}
@@ -206,7 +203,20 @@ if ( ! function_exists( 'twentytwenty_get_post_meta' ) ) {
 
 	// 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(
@@ -220,6 +230,17 @@ if ( ! function_exists( 'twentytwenty_get_post_meta' ) ) {
 
 	} elseif ( 'single-bottom' === $location ) {
 
+		/**
+		* 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(
@@ -250,8 +271,16 @@ if ( ! function_exists( 'twentytwenty_get_post_meta' ) ) {
 
 				<?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 );
+				 * 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 ) ) {
@@ -367,8 +396,16 @@ if ( ! function_exists( 'twentytwenty_get_post_meta' ) ) {
 
 				}
 
-					// Allow output of additional post meta types to be added by child themes and plugins.
+				/**
-					do_action( 'twentytwenty_end_of_post_meta_list', $post_meta, $post_id );
+				 * Fires after 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_end_of_post_meta_list', $post_id );
 
 				?>
 
@@ -391,12 +428,10 @@ if ( ! function_exists( 'twentytwenty_get_post_meta' ) ) {
 	}
 
 }
-}
 
 /**
  * Menus
  */
-if ( ! function_exists( 'twentytwenty_filter_wp_list_pages_item_classes' ) ) {
 /**
  * Filter Classes of wp_list_pages items to match menu items.
  * Filter the class applied to wp_list_pages() items with children to match the menu class, to simplify.
@@ -433,9 +468,6 @@ if ( ! function_exists( 'twentytwenty_filter_wp_list_pages_item_classes' ) ) {
 
 add_filter( 'page_css_class', 'twentytwenty_filter_wp_list_pages_item_classes', 10, 5 );
 
-}
-
-if ( ! function_exists( 'twentytwenty_add_sub_toggles_to_main_menu' ) ) {
 /**
  * Add a Sub Nav Toggle to the Expanded Menu and Mobile Menu.
  *
@@ -456,9 +488,10 @@ if ( ! function_exists( 'twentytwenty_add_sub_toggles_to_main_menu' ) ) {
 		if ( in_array( 'menu-item-has-children', $item->classes, true ) ) {
 
 			$toggle_target_string = '.menu-modal .menu-item-' . $item->ID . ' > .sub-menu';
+			$toggle_duration      = twentytwenty_toggle_duration();
 
 			// Add the sub menu toggle.
-				$args->after .= '<button class="toggle sub-menu-toggle fill-children-current-color" data-toggle-target="' . $toggle_target_string . '" data-toggle-type="slidetoggle" data-toggle-duration="250"><span class="screen-reader-text">' . __( 'Show sub menu', 'twentytwenty' ) . '</span>' . twentytwenty_get_theme_svg( 'chevron-down' ) . '</button>';
+			$args->after .= '<button class="toggle sub-menu-toggle fill-children-current-color" data-toggle-target="' . $toggle_target_string . '" data-toggle-type="slidetoggle" data-toggle-duration="' . absint( $toggle_duration ) . '"><span class="screen-reader-text">' . __( 'Show sub menu', 'twentytwenty' ) . '</span>' . twentytwenty_get_theme_svg( 'chevron-down' ) . '</button>';
 
 		}
 
@@ -480,13 +513,9 @@ if ( ! function_exists( 'twentytwenty_add_sub_toggles_to_main_menu' ) ) {
 
 add_filter( 'nav_menu_item_args', 'twentytwenty_add_sub_toggles_to_main_menu', 10, 3 );
 
-}
-
 /**
  * Classes
  */
-
-if ( ! function_exists( 'twentytwenty_no_js_class' ) ) {
 /**
  * Add No-JS Class.
  * If we're missing JavaScript support, the HTML element will have a no-js class.
@@ -501,10 +530,6 @@ if ( ! function_exists( 'twentytwenty_no_js_class' ) ) {
 
 add_action( 'wp_head', 'twentytwenty_no_js_class' );
 
-}
-
-if ( ! function_exists( 'twentytwenty_get_the_archive_title' ) ) {
-
 /**
  * Filters the archive title and styles the word before the first colon.
  *
@@ -532,9 +557,27 @@ if ( ! function_exists( 'twentytwenty_get_the_archive_title' ) ) {
 
 add_filter( 'get_the_archive_title', 'twentytwenty_get_the_archive_title' );
 
+/**
+ * Filters the edit post link to add an icon and use the post meta structure.
+ *
+ * @param string $link    Anchor tag for the edit link.
+ * @param int    $post_id Post ID.
+ * @param string $text    Anchor text.
+ */
+function twentytwenty_edit_post_link( $link, $post_id, $text ) {
+
+	$edit_url = get_edit_post_link( $post_id );
+
+	if ( ! $edit_url ) {
+		return;
 	}
 
-if ( ! function_exists( 'twentytwenty_body_classes' ) ) {
+	return '<div class="post-meta-wrapper post-meta-edit-link-wrapper"><ul class="post-meta"><li class="post-edit meta-wrapper"><span class="meta-icon">' . twentytwenty_get_theme_svg( 'edit' ) . '</span><span class="meta-text"><a href="' . esc_url( $edit_url ) . '">' . $text . '</a></span></li></ul><!-- .post-meta --></div><!-- .post-meta-wrapper -->';
+
+}
+
+add_filter( 'edit_post_link', 'twentytwenty_edit_post_link', 10, 3 );
+
 /**
  * Add conditional body classes.
  *
@@ -599,10 +642,52 @@ if ( ! function_exists( 'twentytwenty_body_classes' ) ) {
 		$classes[] = basename( get_page_template_slug(), '.php' );
 	}
 
+	// Check for the elements output in the top part of the footer.
+	$has_footer_menu = has_nav_menu( 'footer' );
+	$has_social_menu = has_nav_menu( 'social' );
+	$has_sidebar_1   = is_active_sidebar( 'sidebar-1' );
+	$has_sidebar_2   = is_active_sidebar( 'sidebar-2' );
+
+	// Add a class indicating whether those elements are output.
+	if ( $has_footer_menu || $has_social_menu || $has_sidebar_1 || $has_sidebar_2 ) {
+		$classes[] = 'footer-top-visible';
+	} else {
+		$classes[] = 'footer-top-hidden';
+	}
+
+	// Get header/footer background color.
+	$header_footer_background = get_theme_mod( 'header_footer_background_color', '#ffffff' );
+	$header_footer_background = strtolower( '#' . ltrim( $header_footer_background, '#' ) );
+
+	// Get content background color.
+	$background_color = get_theme_mod( 'background_color', 'f5efe0' );
+	$background_color = strtolower( '#' . ltrim( $background_color, '#' ) );
+
+	// Add extra class if main background and header/footer background are the same color.
+	if ( $background_color === $header_footer_background ) {
+		$classes[] = 'reduced-spacing';
+	}
+
 	return $classes;
 
 }
 
 add_filter( 'body_class', 'twentytwenty_body_classes' );
 
+/**
+ * Toggle animation duration in milliseconds.
+ *
+ * @return integer Duration in milliseconds
+ */
+function twentytwenty_toggle_duration() {
+	/**
+	 * Filters the animation duration/speed used usually for submenu toggles.
+	 *
+	 * @since 1.0
+	 *
+	 * @param integer $duration Duration in milliseconds.
+	 */
+	$duration = apply_filters( 'twentytwenty_toggle_duration', 250 );
+
+	return $duration;
 }

wp-content/themes/twentytwenty/index.php

@@ -41,7 +41,7 @@ get_header();
 		}
 	} elseif ( ! is_home() ) {
 		$archive_title    = get_the_archive_title();
-		$archive_subtitle = get_the_archive_description( '<div>', '</div>' );
+		$archive_subtitle = get_the_archive_description();
 	}
 
 	if ( $archive_title || $archive_subtitle ) {
@@ -63,11 +63,9 @@ get_header();
 
 		</header><!-- .archive-header -->
 
-	<?php } ?>
-
-	<div class="posts">
-
 		<?php
+	}
+
 	if ( have_posts() ) {
 
 		$i = 0;
@@ -75,7 +73,7 @@ get_header();
 		while ( have_posts() ) {
 			$i++;
 			if ( $i > 1 ) {
-					echo '<hr class="post-separator is-style-wide section-inner" aria-hidden="true" />';
+				echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />';
 			}
 			the_post();
 
@@ -90,7 +88,7 @@ get_header();
 			<?php
 			get_search_form(
 				array(
-						'label' => __( 'search again', 'twentytwenty' ),
+					'label' => _x( 'search again', 'Label', 'twentytwenty' ),
 				)
 			);
 			?>
@@ -101,9 +99,8 @@ get_header();
 	}
 	?>
 
-	</div><!-- .posts -->
-
 	<?php get_template_part( 'template-parts/pagination' ); ?>
+	<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
 
 </main><!-- #site-content -->
 

wp-content/themes/twentytwenty/package.json

@@ -2,15 +2,21 @@
 	"name": "twentytwenty",
 	"version": "1.0.0",
 	"description": "Default WP Theme",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"WordPress",
+		"Theme",
+		"TwentyTwenty"
+	],
+	"homepage": "https://github.com/wordpress/twentytwenty#readme",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/wordpress/twentytwenty.git"
 	},
-  "license": "GPL-2.0+",
 	"bugs": {
 		"url": "https://github.com/wordpress/twentytwenty/issues"
 	},
-  "homepage": "https://github.com/wordpress/twentytwenty#readme",
 	"devDependencies": {
 		"@wordpress/scripts": "^5.0.0",
 		"concurrently": "^4.1.2",
@@ -35,6 +41,7 @@
 		"build:rtl-esb": "rtlcss assets/css/editor-style-block.css assets/css/editor-style-block-rtl.css",
 		"build:rtl-esc": "rtlcss assets/css/editor-style-classic.css assets/css/editor-style-classic-rtl.css",
 		"lint:css": "wp-scripts lint-style 'style.css' 'assets/**/*.css'",
-    "lint:js": "wp-scripts lint-js 'assets/**/*.js'"
+		"lint:js": "wp-scripts lint-js 'assets/**/*.js'",
+		"lint:pkg-json": "wp-scripts lint-pkg-json"
 	}
 }

wp-content/themes/twentytwenty/print.css

@@ -0,0 +1,162 @@
+@charset "UTF-8";
+/*
+Theme Name: Twenty Twenty
+Adding print support. The print styles are based on the the great work of
+Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
+*/
+/*--------------------------------------------------------------
+>>> TABLE OF CONTENTS:
+----------------------------------------------------------------
+# Margins
+# Paddings
+# Width
+# Typography
+# Page breaks
+# Links
+# Visibility
+--------------------------------------------------------------*/
+@media print {
+
+  /* Margins */
+
+  @page {
+    margin: 2cm;
+  }
+
+  .entry-header,
+  .site-footer {
+    margin: 0;
+  }
+
+  /* Paddings */
+
+  .posts {
+    padding: 0;
+  }
+  
+  /* Width */
+
+  .entry-content,
+  .entry-content p,
+  .section-inner,
+  .section-inner.max-percentage,
+  .section-inner.medium,
+  .section-inner.small,
+  .section-inner.thin {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  /* Fonts */
+
+  body {
+    background: #fff !important;
+    color: #000;
+    font: 13pt Georgia, "Times New Roman", Times, serif;
+    line-height: 1.3;
+  }
+
+  h1 {
+    font-size: 20pt;
+  }
+
+  h2,
+  h2.entry-title,
+  h3,
+  h4,
+  .has-regular-font-size,
+  .has-large-font-size,
+  .comments-header {
+    font-size: 14pt;
+    margin-top: 1cm;
+  }
+
+  /* Page breaks */
+
+  a {
+    page-break-inside: avoid;
+  }
+
+  blockquote {
+    page-break-inside: avoid;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    page-break-after: avoid;
+    page-break-inside: avoid;
+  }
+
+  img {
+    page-break-inside: avoid;
+    page-break-after: avoid;
+  }
+
+  table,
+  pre {
+    page-break-inside: avoid;
+  }
+
+  ul,
+  ol,
+  dl {
+    page-break-before: avoid;
+  }
+
+  /* Links */
+  
+  a:link,
+  a:visited,
+  a {
+    background: transparent;
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  a {
+    page-break-inside: avoid;
+  }
+
+  a[href^="http"]:after {
+    content: " < " attr(href) "> ";
+  }
+
+  a:after > img {
+    content: "";
+  }
+
+  article a[href^="#"]:after {
+    content: "";
+  }
+
+  a:not(:local-link):after {
+    content: " < " attr(href) "> ";
+  }
+
+  /* Visibility */
+
+  #site-header,
+  .comment-form,
+  .comments-wrapper,
+  .comment .comment-metadata,
+  .footer-social-wrapper,
+  .footer-widgets-outer-wrapper,
+  .header-navigation-wrapper,
+  .pagination-wrapper,
+  .post-meta-wrapper.post-meta-single-bottom,
+  .post-separator,
+  .site-logo img {
+    display: none;
+  }
+
+  .entry-content .wp-block-button .wp-block-button__link,
+  .entry-content .wp-block-button .wp-block-file__button,
+  .entry-content .button {
+    background: none;
+    color: #000;
+  }
+}

wp-content/themes/twentytwenty/readme.txt

@@ -13,36 +13,52 @@ Default theme for Twenty Twenty
 
 == Changelog ==
 
-== Resources ==
+== Copyright ==
+
+Twenty Twenty WordPress Theme, Copyright 2019 WordPress.org
+Twenty Twenty is distributed under the terms of the GNU GPL.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 2 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+Twenty Twenty is derived from the Chaplin Theme, Copyright 2019 Anders Norén
+Chaplin Theme is distributed under the terms of the GNU GPL version 2.0
+
+Twenty Twenty bundles the following third-party resources:
 
 Image in screenshot.png from PxHere
 License: Creative Commons Zero (CC0), https://creativecommons.org/publicdomain/zero/1.0/
 URL: https://pxhere.com/en/photo/18153
 
 Inter Font
+Copyright (c) 2016-2019 The Inter Project Authors (me@rsms.me)
 License: SIL Open Font License, 1.1, https://opensource.org/licenses/OFL-1.1
 Source: https://rsms.me/inter/
 
+Bespoke Icons Created For Twenty Twenty
+License: Creative Commons Zero (CC0), https://creativecommons.org/publicdomain/zero/1.0/
+List of bespoke icons:
+- Search icon
+- Menu icon
+
+Feather Icons
+Copyright (c) 2013-2017 Cole Bemis
+License: MIT License, https://opensource.org/licenses/MIT
+Source: https://feathericons.com
+
 Font Awesome Icons
+Copyright (c) 2012-2019 Fonticons, Inc.
 License: SIL Open Font License, 1.1, https://opensource.org/licenses/OFL-1.1
 Source: https://www.fontawesome.io
 
 Font Awesome Code
+Copyright (c) 2012-2019 Fonticons, Inc.
 License: MIT License, https://opensource.org/licenses/MIT
 Source: https://www.fontawesome.io
-
-Font Noto Sans 
-License: Apache License (Apache-2.0), https://www.apache.org/licenses/LICENSE-2.0
-URL: https://fonts.google.com/specimen/Noto+Sans
-
-Font Noto Sans TC
-License: SIL Open Font License (OFL-1.1), https://opensource.org/licenses/OFL-1.1 
-URL: https://fonts.google.com/specimen/Noto+Sans+TC
-
-Font Noto Sans SC
-License: SIL Open Font License (OFL-1.1), https://opensource.org/licenses/OFL-1.1 
-URL: https://fonts.google.com/specimen/Noto+Sans+TC
-
-Font Noto Sans HK
-License: SIL Open Font License (OFL-1.1), https://opensource.org/licenses/OFL-1.1 
-URL: https://fonts.google.com/specimen/Noto+Sans+TC

wp-content/themes/twentytwenty/singular.php

@@ -25,6 +25,8 @@ get_header();
 		}
 	}
 
+	get_template_part( 'template-parts/footer-menus-widgets' );
+
 	?>
 
 </main><!-- #site-content -->

wp-content/themes/twentytwenty/template-parts/content-cover.php

@@ -42,14 +42,10 @@
 	$color_overlay_opacity  = get_theme_mod( 'cover_template_overlay_opacity' );
 	$color_overlay_opacity  = ( false === $color_overlay_opacity ) ? 80 : $color_overlay_opacity;
 	$color_overlay_classes .= ' opacity-' . $color_overlay_opacity;
-
-	// Get the blend mode of the color overlay (default = multiply).
-	$color_overlay_opacity  = get_theme_mod( 'cover_template_overlay_blend_mode', 'multiply' );
-	$color_overlay_classes .= ' blend-mode-' . $color_overlay_opacity;
 	?>
 
-	<div class="cover-header screen-height screen-width<?php echo esc_attr( $cover_header_classes ); ?>"<?php echo $cover_header_style; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- We need to double check this, but for now, we want to pass PHPCS ;) ?>>
+	<div class="cover-header <?php echo esc_attr( $cover_header_classes ); ?>"<?php echo $cover_header_style; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- We need to double check this, but for now, we want to pass PHPCS ;) ?>>
-		<div class="cover-header-inner-wrapper">
+		<div class="cover-header-inner-wrapper screen-height">
 			<div class="cover-header-inner">
 				<div class="cover-color-overlay color-accent<?php echo esc_attr( $color_overlay_classes ); ?>"<?php echo $color_overlay_style; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- We need to double check this, but for now, we want to pass PHPCS ;) ?>></div>
 
@@ -58,7 +54,13 @@
 
 							<?php
 
-							// Allow child themes and plugins to filter the display of the categories in the entry header.
+							/**
+							 * Allow child themes and plugins to filter the display of the categories in the article header.
+							 *
+							 * @since 1.0.0
+							 *
+							 * @param bool Whether to show the categories in article header, Default true.
+							 */
 							$show_categories = apply_filters( 'twentytwenty_show_categories_in_entry_header', true );
 
 							if ( true === $show_categories && has_category() ) {

wp-content/themes/twentytwenty/template-parts/content.php

@@ -25,7 +25,7 @@
 
 	?>
 
-	<div class="post-inner section-inner thin">
+	<div class="post-inner section-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">
 
 		<div class="entry-content">
 

wp-content/themes/twentytwenty/template-parts/entry-author-bio.php

@@ -17,7 +17,7 @@ if ( (bool) get_the_author_meta( 'description' ) ) : ?>
 				<?php
 				printf(
 					/* Translators: %s: post author */
-					esc_html( 'By %s', 'twentytwenty' ),
+					esc_html__( 'By %s', 'twentytwenty' ),
 					esc_html( get_the_author() )
 				);
 				?>

wp-content/themes/twentytwenty/template-parts/entry-header.php

@@ -3,7 +3,7 @@
  * Displays the post header
  *
  * @package WordPress
- * @subpackage Twenty_Nineteen
+ * @subpackage Twenty_Twenty
  * @since 1.0.0
  */
 
@@ -20,8 +20,13 @@ if ( is_singular() ) {
 	<div class="entry-header-inner section-inner medium">
 
 		<?php
-
+			/**
-		// Allow child themes and plugins to filter the display of the categories in the entry header.
+			 * Allow child themes and plugins to filter the display of the categories in the entry header.
+			 *
+			 * @since 1.0.0
+			 *
+			 * @param bool   Whether to show the categories in header, Default true.
+			 */
 		$show_categories = apply_filters( 'twentytwenty_show_categories_in_entry_header', true );
 
 		if ( true === $show_categories && has_category() ) {

wp-content/themes/twentytwenty/template-parts/featured-image.php

@@ -3,7 +3,7 @@
  * Displays the featured image
  *
  * @package WordPress
- * @subpackage Twenty_Nineteen
+ * @subpackage Twenty_Twenty
  * @since 1.0.0
  */
 

wp-content/themes/twentytwenty/template-parts/footer-menus-widgets.php

@@ -0,0 +1,125 @@
+<?php
+/**
+ * Displays the menus and widgets at the end of the main element.
+ * Visually, this output is presented as part of the footer element.
+ *
+ * @package WordPress
+ * @subpackage Twenty_Twenty
+ * @since 1.0.0
+ */
+
+$has_footer_menu = has_nav_menu( 'footer' );
+$has_social_menu = has_nav_menu( 'social' );
+
+$has_sidebar_1 = is_active_sidebar( 'sidebar-1' );
+$has_sidebar_2 = is_active_sidebar( 'sidebar-2' );
+
+// Only output the container if there are elements to display.
+if ( $has_footer_menu || $has_social_menu || $has_sidebar_1 || $has_sidebar_2 ) {
+	?>
+
+	<div class="footer-nav-widgets-wrapper header-footer-group">
+
+		<div class="footer-inner section-inner">
+
+			<?php
+
+			$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', 'twentytwenty' ); ?>" role="navigation">
+
+							<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 echo 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 ( $has_sidebar_1 || $has_sidebar_2 ) { ?>
+
+				<aside class="footer-widgets-outer-wrapper" role="complementary">
+
+					<div class="footer-widgets-wrapper">
+
+						<?php if ( $has_sidebar_1 ) { ?>
+
+							<div class="footer-widgets column-one grid-item">
+								<?php dynamic_sidebar( 'sidebar-1' ); ?>
+							</div>
+
+						<?php } ?>
+
+						<?php if ( $has_sidebar_2 ) { ?>
+
+							<div class="footer-widgets column-two grid-item">
+								<?php dynamic_sidebar( 'sidebar-2' ); ?>
+							</div>
+
+						<?php } ?>
+
+					</div><!-- .footer-widgets-wrapper -->
+
+				</aside><!-- .footer-widgets-outer-wrapper -->
+
+			<?php } ?>
+
+		</div><!-- .footer-inner -->
+
+	</div><!-- .footer-nav-widgets-wrapper -->
+
+<?php } ?>

wp-content/themes/twentytwenty/template-parts/modal-menu.php

@@ -17,19 +17,12 @@
 
 			<div class="menu-top">
 
-				<?php
-
-				// If the expanded menu is set, output the close button.
-				if ( has_nav_menu( 'expanded' ) ) {
-					?>
-
 				<button class="toggle close-nav-toggle fill-children-current-color" data-toggle-target=".menu-modal" data-toggle-screen-lock="true" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".menu-modal">
 					<span class="toggle-text"><?php esc_html_e( 'Close Menu', 'twentytwenty' ); ?></span>
 					<?php twentytwenty_the_theme_svg( 'cross' ); ?>
 				</button><!-- .nav-toggle -->
 
 				<?php
-				}
 
 				$mobile_menu_location = '';
 

wp-content/themes/twentytwenty/template-parts/modal-search.php

@@ -14,15 +14,13 @@
 
 		<div class="section-inner">
 
-			<?php $unique_id = esc_attr( uniqid( 'search-form-' ) ); ?>
+			<?php
-
+			get_search_form(
-			<form role="search" method="get" class="modal-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
+				array(
-				<label class="screen-reader-text" for="<?php echo esc_attr( $unique_id ); ?>">
+					'label' => _x( 'Search for:', 'Label', 'twentytwenty' ),
-					<?php echo _x( 'Search for:', 'Label', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations ?>
+				)
-				</label>
+			);
-				<input type="search" id="<?php echo esc_attr( $unique_id ); ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search for&hellip;', 'Placeholder', 'twentytwenty' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
+			?>
-				<button type="submit" class="search-submit"><?php echo _x( 'Search', 'Submit button', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations ?></button>
-			</form><!-- .search-form -->
 
 			<button class="toggle search-untoggle fill-children-current-color" data-toggle-target=".search-modal" data-toggle-screen-lock="true" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field">
 				<span class="screen-reader-text"><?php _e( 'Close search', 'twentytwenty' ); // phpcs:ignore WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></span>

wp-content/themes/twentytwenty/template-parts/navigation.php

@@ -24,7 +24,7 @@ if ( $next_post || $prev_post ) {
 
 	<nav class="pagination-single section-inner<?php echo esc_attr( $pagination_classes ); ?>" aria-label="<?php esc_attr_e( 'Post', 'twentytwenty' ); ?>">
 
-		<hr class="is-style-wide" aria-hidden="true" />
+		<hr class="styled-separator is-style-wide" aria-hidden="true" />
 
 		<div class="pagination-single-inner">
 
@@ -53,7 +53,7 @@ if ( $next_post || $prev_post ) {
 
 		</div><!-- .pagination-single-inner -->
 
-		<hr class="is-style-wide" aria-hidden="true" />
+		<hr class="styled-separator is-style-wide" aria-hidden="true" />
 
 	</nav><!-- .pagination-single -->
 

wp-content/themes/twentytwenty/template-parts/pagination.php

@@ -48,7 +48,7 @@ if ( $posts_pagination ) { ?>
 
 	<div class="pagination-wrapper section-inner">
 
-		<hr class="pagination-separator is-style-wide" aria-hidden="true" />
+		<hr class="styled-separator pagination-separator is-style-wide" aria-hidden="true" />
 
 		<?php echo $posts_pagination; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- already escaped during generation. ?>
 

wp-content/themes/twentytwenty/templates/template-cover.php

@@ -24,6 +24,8 @@ get_header();
 		}
 	}
 
+	get_template_part( 'template-parts/footer-menus-widgets' );
+
 	?>
 
 </main><!-- #site-content -->

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.3-beta1-46356';
+$wp_version = '5.3-beta1-46357';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.