Twenty Twenty: Import the latest changes from GitHub

For a full list of changes since [49216], see dfe141276c...trunk/.

Props poena, melchoyce, luminuu, aristath, jffng, ryelle, kishanjasani, rolfsiebers, sresok, desrosj.
See #51526.

git-svn-id: https://develop.svn.wordpress.org/trunk@49247 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

@@ -32,11 +32,11 @@
 
 /* OS dark theme preference */
 @media (prefers-color-scheme: dark) {
-	html.has-default-light-palette-background body {
+	html.respect-color-scheme-preference body {
 		background-color: #28303d;
 	}
 	@media (prefers-color-scheme: dark){
-		html.has-default-light-palette-background body{
+		html.respect-color-scheme-preference body{
 		background-color: #28303d;
 		}
 	}
@@ -2197,18 +2197,17 @@ table.wp-calendar-table th {
 	font-weight: bold;
 }
 
-table.wp-calendar-table thead {
-	border: 1px solid #28303d;
-}
-
+table.wp-calendar-table thead,
 table.wp-calendar-table tbody {
-	border: 1px solid #28303d;
+	color: currentColor;
+	border: 1px solid;
 }
 
 table.wp-calendar-table caption {
 	font-weight: bold;
 	text-align: left;
 	margin-bottom: 20px;
+	color: currentColor;
 }
 
 .wp-calendar-nav {

src/wp-content/themes/twentytwentyone/assets/css/ie.css

@@ -6,7 +6,7 @@ Author: the WordPress team
 Author URI: https://wordpress.org/
 Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
 Requires at least: 5.3
-Tested up to: 5.5
+Tested up to: 5.6
 Requires PHP: 5.6
 Version: 1.0.0
 License: GNU General Public License v2 or later
@@ -124,11 +124,11 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
 
 /* OS dark theme preference */
 @media (prefers-color-scheme: dark) {
-	html.has-default-light-palette-background body {
+	html.respect-color-scheme-preference body {
 		background-color: #28303d;
 	}
 	@media (prefers-color-scheme: dark){
-		html.has-default-light-palette-background body{
+		html.respect-color-scheme-preference body{
 		background-color: #28303d;
 		}
 	}
@@ -1364,11 +1364,11 @@ template {
 
 .entry-content > *.alignleft, .entry-content > *.alignright,
 .entry-content > *.alignleft:first-child + *,
-.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull {
+.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull.has-background {
 	margin-top: 0;
 }
 
-.entry-content > *:last-child, .entry-content > *.alignfull {
+.entry-content > *:last-child, .entry-content > *.alignfull.has-background {
 	margin-bottom: 0;
 }
 
@@ -4249,18 +4249,17 @@ table.wp-calendar-table th {
 	font-weight: bold;
 }
 
-table.wp-calendar-table thead {
-	border: 1px solid #28303d;
-}
-
+table.wp-calendar-table thead,
 table.wp-calendar-table tbody {
-	border: 1px solid #28303d;
+	color: currentColor;
+	border: 1px solid;
 }
 
 table.wp-calendar-table caption {
 	font-weight: bold;
 	text-align: left;
 	margin-bottom: 20px;
+	color: currentColor;
 }
 
 .wp-calendar-nav {
@@ -4809,7 +4808,7 @@ a.custom-logo-link {
 	padding-top: 30px;
 	color: #28303d;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	font-size: 1rem;
+	font-size: 1.125rem;
 	line-height: 1.7;
 	border-top: 3px solid #28303d;
 }
@@ -5705,6 +5704,7 @@ h1.page-title {
 	.primary-navigation > .primary-menu-container {
 		height: 100vh;
 		z-index: 499;
+		border: 2px solid transparent;
 	}
 	.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
 		position: fixed;
@@ -5716,6 +5716,9 @@ h1.page-title {
 	.admin-bar .primary-navigation > .primary-menu-container {
 		height: calc(100vh - 46px);
 	}
+	.primary-navigation > .primary-menu-container:focus {
+		border: 2px solid #28303d;
+	}
 }
 
 @media only screen and (max-width: 481px) {
@@ -6360,7 +6363,7 @@ h1.page-title {
 	margin-top: 180px;
 	padding-bottom: 10px;
 	color: #28303d;
-	font-size: 1rem;
+	font-size: 1.125rem;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 

src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

@@ -164,7 +164,7 @@
 	--footer--color-link: var(--global--color-primary);
 	--footer--color-link-hover: var(--global--color-primary-hover);
 	--footer--font-family: var(--global--font-primary);
-	--footer--font-size: var(--global--font-size-xs);
+	--footer--font-size: var(--global--font-size-sm);
 	/* Block: Pull quote */
 	--pullquote--font-family: var(--global--font-primary);
 	--pullquote--font-size: var(--heading--font-size-h3);
@@ -210,7 +210,7 @@
 
 /* OS dark theme preference */
 @media (prefers-color-scheme: dark) {
-	html.has-default-light-palette-background {
+	html.respect-color-scheme-preference {
 		--global--color-background: var(--global--color-dark-gray);
 		--global--color-primary: var(--global--color-light-gray);
 		--global--color-secondary: var(--global--color-light-gray);
@@ -220,7 +220,7 @@
 		--button--color-background: var(--global--color-secondary);
 		--button--color-background-active: var(--global--color-background);
 	}
-	html.has-default-light-palette-background body {
+	html.respect-color-scheme-preference body {
 		background-color: var(--global--color-background);
 	}
 }
@@ -1589,13 +1589,15 @@ table.wp-calendar-table th {
 
 table.wp-calendar-table thead,
 table.wp-calendar-table tbody {
-	border: 1px solid var(--global--color-dark-gray);
+	color: currentColor;
+	border: 1px solid;
 }
 
 table.wp-calendar-table caption {
 	font-weight: bold;
 	text-align: left;
 	margin-bottom: var(--global--spacing-unit);
+	color: currentColor;
 }
 
 .wp-calendar-nav {

src/wp-content/themes/twentytwentyone/assets/js/customize-helpers.js

@@ -0,0 +1,35 @@
+/**
+ * Get luminance from a HEX color.
+ *
+ * @param {string} hex - The hex color.
+ *
+ * @return {number} - Returns the luminance, number between 0 and 255.
+ */
+function twentytwentyoneGetHexLum( hex ) { // eslint-disable-line no-unused-vars
+	var rgb = twentytwentyoneGetRgbFromHex( hex );
+	return Math.round( ( 0.2126 * rgb.r ) + ( 0.7152 * rgb.g ) + ( 0.0722 * rgb.b ) );
+}
+
+/**
+ * Get RGB from HEX.
+ *
+ * @param {string} hex - The hex color.
+ *
+ * @return {Object} - Returns an object {r, g, b}
+ */
+function twentytwentyoneGetRgbFromHex( hex ) {
+	var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+		result;
+
+	// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF").
+	hex = hex.replace( shorthandRegex, function( m, r, g, b ) {
+		return r.toString() + r.toString() + g.toString() + g.toString() + b.toString() + b.toString();
+	} );
+
+	result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
+	return result ? {
+		r: parseInt( result[1], 16 ),
+		g: parseInt( result[2], 16 ),
+		b: parseInt( result[3], 16 )
+	} : null;
+}

src/wp-content/themes/twentytwentyone/assets/js/customize.js

@@ -0,0 +1,60 @@
+/* global twentytwentyoneGetHexLum, backgroundColorNotice */
+
+( function() {
+	// Wait until the customizer has finished loading.
+	wp.customize.bind( 'ready', function() {
+		var supportsDarkMode = ( 127 <= twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) && wp.customize( 'respect_user_color_preference' ).get() );
+
+		// Hide the "respect_user_color_preference" setting if the background-color is dark.
+		if ( 127 > twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) ) {
+			wp.customize.control( 'respect_user_color_preference' ).deactivate();
+		}
+
+		// Add notice on init if needed.
+		if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches && wp.customize( 'respect_user_color_preference' ) ) {
+			if ( supportsDarkMode ) {
+				wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', {
+					type: 'info',
+					message: backgroundColorNotice.message
+				} ) );
+			}
+
+			// Remove notice when the value changes.
+			wp.customize( 'background_color', function( setting ) {
+				setting.bind( function() {
+					setting.notifications.remove( 'backgroundColorNotice' );
+				} );
+			} );
+		}
+
+		// Handle changes to the background-color.
+		wp.customize( 'background_color', function( setting ) {
+			setting.bind( function( value ) {
+				if ( 127 > twentytwentyoneGetHexLum( value ) ) {
+					wp.customize.control( 'respect_user_color_preference' ).deactivate();
+					supportsDarkMode = false;
+				} else {
+					wp.customize.control( 'respect_user_color_preference' ).activate();
+					supportsDarkMode = wp.customize( 'respect_user_color_preference' ).get();
+				}
+			} );
+		} );
+
+		// Handle changes to the "respect_user_color_preference" setting.
+		wp.customize( 'respect_user_color_preference', function( setting ) {
+			setting.bind( function( value ) {
+				supportsDarkMode = value && 127 < twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() );
+				if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
+					if ( ! supportsDarkMode ) {
+						wp.customize( 'background_color' ).notifications.remove( 'backgroundColorNotice' );
+					} else {
+						wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', {
+							type: 'info',
+							message: backgroundColorNotice.message
+						} ) );
+					}
+				}
+			} );
+		} );
+	} );
+}() );

src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js

@@ -38,7 +38,7 @@ function twentytwentyoneCollapseMenuOnClickOutside( event ) {
  *
  * @param {Element} el - The element.
  */
-function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
+function twentytwentyoneExpandSubMenu( el ) { // eslint-disable-line no-unused-vars
 	// Close submenu that was opened from a hover action.
 	// We'll return early in this case to avoid changing the aria-expanded attribute.
 	if ( el.parentNode.classList.contains( 'hover' ) ) {

src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php

@@ -32,7 +32,7 @@ class Twenty_Twenty_One_Custom_Colors {
 	}
 
 	/**
-	 * Determine the luminance of the given color and then return #fff or #000 so that our text is always readable.
+	 * Determine the luminance of the given color and then return #fff or #000 so that the text is always readable.
 	 *
 	 * @access public
 	 *
@@ -43,7 +43,7 @@ class Twenty_Twenty_One_Custom_Colors {
 	 * @return string (hex color)
 	 */
 	public function custom_get_readable_color( $background_color ) {
-		return ( 127 < $this->get_relative_luminance_from_hex( $background_color ) ) ? '#000' : '#fff';
+		return ( 127 < self::get_relative_luminance_from_hex( $background_color ) ) ? '#000' : '#fff';
 	}
 
 	/**
@@ -115,14 +115,24 @@ class Twenty_Twenty_One_Custom_Colors {
 			array(),
 			(string) filemtime( get_theme_file_path( 'assets/css/custom-color-overrides.css' ) )
 		);
-		if ( 'd1e4dd' !== strtolower( get_theme_mod( 'background_color', 'D1E4DD' ) ) ) {
+
+		$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
+		if ( 'd1e4dd' !== strtolower( $background_color ) ) {
 			wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) );
 		}
+
+		$should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', true ); // @phpstan-ignore-line. Passing true instead of default value of false to get_theme_mod.
+		if ( $should_respect_color_scheme && self::get_relative_luminance_from_hex( $background_color ) > 127 ) {
+			// Add dark mode variable overrides.
+			wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', '@media (prefers-color-scheme: dark) { :root .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); } }' );
+		}
 	}
 
 	/**
 	 * Get luminance from a HEX color.
 	 *
+	 * @static
+	 *
 	 * @access public
 	 *
 	 * @since 1.0.0
@@ -131,12 +141,12 @@ class Twenty_Twenty_One_Custom_Colors {
 	 *
 	 * @return int Returns a number (0-255).
 	 */
-	public function get_relative_luminance_from_hex( $hex ) {
+	public static function get_relative_luminance_from_hex( $hex ) {
 
 		// Remove the "#" symbol from the beginning of the color.
 		$hex = ltrim( $hex, '#' );
 
-		// Make sure we have 6 digits for the below calculations.
+		// Make sure there are 6 digits for the below calculations.
 		if ( 3 === strlen( $hex ) ) {
 			$hex = substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 2, 1 ) . substr( $hex, 2, 1 );
 		}
@@ -164,17 +174,12 @@ class Twenty_Twenty_One_Custom_Colors {
 	 */
 	public function body_class( $classes ) {
 		$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
-		if ( 127 > $this->get_relative_luminance_from_hex( $background_color ) ) {
+		if ( 127 > self::get_relative_luminance_from_hex( $background_color ) ) {
 			$classes[] = 'is-background-dark';
 		} else {
 			$classes[] = 'is-background-light';
 		}
 
-		$light_colors_default_palette = array( '#D1E4DD', '#D1DFE4', '#D1D1E4', '#E4D1D1', '#E4DAD1', '#EEEADD', '#FFFFFF' );
-		if ( in_array( strtoupper( '#' . ltrim( $background_color, '#' ) ), $light_colors_default_palette, true ) ) {
-			$classes[] = 'has-default-light-palette-background';
-		}
-
 		return $classes;
 	}
 }

src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-customize.php

@@ -40,8 +40,8 @@ if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) {
 		public function register( $wp_customize ) {
 
 			// Change site-title & description to postMessage.
-			$wp_customize->get_setting( 'blogname' )->transport        = 'postMessage';
-			$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
+			$wp_customize->get_setting( 'blogname' )->transport        = 'postMessage'; // @phpstan-ignore-line. Assume that this setting exists.
+			$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; // @phpstan-ignore-line. Assume that this setting exists.
 
 			// Add partial for blogname.
 			$wp_customize->selective_refresh->add_partial(
@@ -126,7 +126,7 @@ if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) {
 			// Get the palette from theme-supports.
 			$palette = get_theme_support( 'editor-color-palette' );
 
-			// Build the colors array from our theme-support.
+			// Build the colors array from theme-support.
 			$colors = array();
 			if ( isset( $palette[0] ) && is_array( $palette[0] ) ) {
 				foreach ( $palette[0] as $palette_color ) {
@@ -146,6 +146,30 @@ if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) {
 					)
 				)
 			);
+
+			$wp_customize->add_setting(
+				'respect_user_color_preference',
+				array(
+					'capability'        => 'edit_theme_options',
+					'default'           => true,
+					'sanitize_callback' => function( $value ) {
+						return (bool) $value;
+					},
+				)
+			);
+
+			$wp_customize->add_control(
+				'respect_user_color_preference',
+				array(
+					'type'            => 'checkbox',
+					'section'         => 'colors',
+					'label'           => esc_html__( 'Respect visitor\'s device dark mode settings', 'twentytwentyone' ),
+					'description'     => __( 'Dark mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text.', 'twentytwentyone' ),
+					'active_callback' => function( $value ) {
+						return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );
+					},
+				)
+			);
 		}
 
 		/**

src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-svg-icons.php

@@ -187,6 +187,7 @@ class Twenty_Twenty_One_SVG_Icons {
 			$svg = preg_replace( '/^<svg /', $repl, trim( $arr[ $icon ] ) ); // Add extra attributes to SVG code.
 		}
 
+		// @phpstan-ignore-next-line.
 		return $svg;
 	}
 

src/wp-content/themes/twentytwentyone/comments.php

@@ -14,7 +14,7 @@
 
 /*
  * If the current post is protected by a password and
- * the visitor has not yet entered the password we will
+ * the visitor has not yet entered the password,
  * return early without loading the comments.
  */
 if ( post_password_required() ) {

src/wp-content/themes/twentytwentyone/functions.php

@@ -40,9 +40,8 @@ if ( ! function_exists( 'twenty_twenty_one_setup' ) ) {
 
 		/*
 		 * Let WordPress manage the document title.
-		 * By adding theme support, we declare that this theme does not use a
-		 * hard-coded <title> tag in the document head, and expect WordPress to
-		 * provide it for us.
+		 * This theme does not use a hard-coded <title> tag in the document head,
+		 * WordPress will provide it for us.
 		 */
 		add_theme_support( 'title-tag' );
 
@@ -126,6 +125,10 @@ if ( ! function_exists( 'twenty_twenty_one_setup' ) ) {
 
 		// Add support for editor styles.
 		add_theme_support( 'editor-styles' );
+		$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
+		if ( 127 > Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
+			add_theme_support( 'dark-editor-style' );
+		}
 
 		$editor_stylesheet_path = './assets/css/style-editor.css';
 
@@ -145,43 +148,43 @@ if ( ! function_exists( 'twenty_twenty_one_setup' ) ) {
 			array(
 				array(
 					'name'      => esc_html__( 'Extra small', 'twentytwentyone' ),
-					'shortName' => esc_html__( 'XS', 'twentytwentyone' ),
+					'shortName' => esc_html_x( 'XS', 'Font size', 'twentytwentyone' ),
 					'size'      => 16,
 					'slug'      => 'extra-small',
 				),
 				array(
 					'name'      => esc_html__( 'Small', 'twentytwentyone' ),
-					'shortName' => esc_html__( 'S', 'twentytwentyone' ),
+					'shortName' => esc_html_x( 'S', 'Font size', 'twentytwentyone' ),
 					'size'      => 18,
 					'slug'      => 'small',
 				),
 				array(
 					'name'      => esc_html__( 'Normal', 'twentytwentyone' ),
-					'shortName' => esc_html__( 'M', 'twentytwentyone' ),
+					'shortName' => esc_html_x( 'M', 'Font size', 'twentytwentyone' ),
 					'size'      => 20,
 					'slug'      => 'normal',
 				),
 				array(
 					'name'      => esc_html__( 'Large', 'twentytwentyone' ),
-					'shortName' => esc_html__( 'L', 'twentytwentyone' ),
+					'shortName' => esc_html_x( 'L', 'Font size', 'twentytwentyone' ),
 					'size'      => 24,
 					'slug'      => 'large',
 				),
 				array(
 					'name'      => esc_html__( 'Extra Large', 'twentytwentyone' ),
-					'shortName' => esc_html__( 'XL', 'twentytwentyone' ),
+					'shortName' => esc_html_x( 'XL', 'Font size', 'twentytwentyone' ),
 					'size'      => 40,
 					'slug'      => 'extra-large',
 				),
 				array(
 					'name'      => esc_html__( 'Huge', 'twentytwentyone' ),
-					'shortName' => esc_html__( 'XXL', 'twentytwentyone' ),
+					'shortName' => esc_html_x( 'XXL', 'Font size', 'twentytwentyone' ),
 					'size'      => 96,
 					'slug'      => 'huge',
 				),
 				array(
 					'name'      => esc_html__( 'Gigantic', 'twentytwentyone' ),
-					'shortName' => esc_html__( 'XXXL', 'twentytwentyone' ),
+					'shortName' => esc_html_x( 'XXXL', 'Font size', 'twentytwentyone' ),
 					'size'      => 144,
 					'slug'      => 'gigantic',
 				),
@@ -521,27 +524,71 @@ require get_template_directory() . '/inc/block-styles.php';
  * @return void
  */
 function twentytwentyone_customize_preview_init() {
+	wp_enqueue_script(
+		'twentytwentyone-customize-helpers',
+		get_theme_file_uri( '/assets/js/customize-helpers.js' ),
+		array(),
+		wp_get_theme()->get( 'Version' ),
+		true
+	);
+
 	wp_enqueue_script(
 		'twentytwentyone-customize-preview',
 		get_theme_file_uri( '/assets/js/customize-preview.js' ),
-		array( 'customize-preview', 'customize-selective-refresh', 'jquery' ),
-		get_theme_file_path( 'assets/js/customize-preview.js' ),
+		array( 'customize-preview', 'customize-selective-refresh', 'jquery', 'twentytwentyone-customize-helpers' ),
+		wp_get_theme()->get( 'Version' ),
 		true
 	);
 }
 add_action( 'customize_preview_init', 'twentytwentyone_customize_preview_init' );
 
+
 /**
- * Calculate any classes we may want to add to the main <html> element.
+ * Enqueue scripts for the customizer.
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+function twentytwentyone_customize_controls_enqueue_scripts() {
+
+	wp_enqueue_script(
+		'twentytwentyone-customize-helpers',
+		get_theme_file_uri( '/assets/js/customize-helpers.js' ),
+		array(),
+		wp_get_theme()->get( 'Version' ),
+		true
+	);
+
+	wp_enqueue_script(
+		'twentytwentyone-customize-controls',
+		get_theme_file_uri( '/assets/js/customize.js' ),
+		array( 'customize-base', 'customize-controls', 'underscore', 'jquery', 'twentytwentyone-customize-helpers' ),
+		wp_get_theme()->get( 'Version' ),
+		true
+	);
+
+	wp_localize_script(
+		'twentytwentyone-customize-controls',
+		'backgroundColorNotice',
+		array(
+			'message' => esc_html__( 'You currently have dark mode enabled on your device. Changing the color picker will allow you to preview light mode.', 'twentytwentyone' ),
+		)
+	);
+}
+add_action( 'customize_controls_enqueue_scripts', 'twentytwentyone_customize_controls_enqueue_scripts' );
+
+/**
+ * Calculate classes for the main <html> element.
  *
  * @since 1.0.0
  *
  * @return void
  */
 function twentytwentyone_the_html_classes() {
-	$background_color             = get_theme_mod( 'background_color', 'D1E4DD' );
-	$light_colors_default_palette = array( '#D1E4DD', '#D1DFE4', '#D1D1E4', '#E4D1D1', '#E4DAD1', '#EEEADD', '#FFFFFF' );
-	if ( in_array( strtoupper( '#' . ltrim( $background_color, '#' ) ), $light_colors_default_palette, true ) ) {
-		echo 'class="has-default-light-palette-background"';
+	$background_color            = get_theme_mod( 'background_color', 'D1E4DD' );
+	$should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', true );
+	if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
+		echo 'class="respect-color-scheme-preference"';
 	}
 }

src/wp-content/themes/twentytwentyone/header.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * The header for our theme
+ * The header.
  *
  * This is the template that displays all of the <head> section and everything up until main.
  *

src/wp-content/themes/twentytwentyone/image.php

@@ -42,8 +42,8 @@ while ( have_posts() ) {
 				array(
 					'before'   => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
 					'after'    => '</nav>',
-					/* translators: There is a space after page. */
-					'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
+					/* translators: %: page number. */
+					'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ),
 				)
 			);
 			?>
@@ -101,7 +101,7 @@ while ( have_posts() ) {
 		</footer><!-- .entry-footer -->
 	</article><!-- #post-## -->
 	<?php
-	// If comments are open or we have at least one comment, load up the comment template.
+	// If comments are open or there is at least one comment, load up the comment template.
 	if ( comments_open() || get_comments_number() ) {
 		comments_template();
 	}

src/wp-content/themes/twentytwentyone/inc/back-compat.php

@@ -39,7 +39,7 @@ function twenty_twenty_one_upgrade_notice() {
 	echo '<div class="error"><p>';
 	printf(
 		/* translators: %s: WordPress Version. */
-		esc_html__( 'This theme requires at least WordPress version 5.3. You are running version %s. Please upgrade and try again.', 'twentytwentyone' ),
+		esc_html__( 'This theme requires WordPress 5.3 or newer. You are running version %s. Please upgrade.', 'twentytwentyone' ),
 		esc_html( $GLOBALS['wp_version'] )
 	);
 	echo '</p></div>';
@@ -58,7 +58,7 @@ function twenty_twenty_one_customize() {
 	wp_die(
 		sprintf(
 			/* translators: %s: WordPress Version. */
-			esc_html__( 'This theme requires at least WordPress version 5.3. You are running version %s. Please upgrade and try again.', 'twentytwentyone' ),
+			esc_html__( 'This theme requires WordPress 5.3 or newer. You are running version %s. Please upgrade.', 'twentytwentyone' ),
 			esc_html( $GLOBALS['wp_version'] )
 		),
 		'',
@@ -83,7 +83,7 @@ function twenty_twenty_one_preview() {
 		wp_die(
 			sprintf(
 				/* translators: %s: WordPress Version. */
-				esc_html__( 'This theme requires at least WordPress version 5.3. You are running version %s. Please upgrade and try again.', 'twentytwentyone' ),
+				esc_html__( 'This theme requires WordPress 5.3 or newer. You are running version %s. Please upgrade.', 'twentytwentyone' ),
 				esc_html( $GLOBALS['wp_version'] )
 			)
 		);

src/wp-content/themes/twentytwentyone/inc/custom-css.php

@@ -23,7 +23,7 @@
  */
 function twenty_twenty_one_generate_css( $selector, $style, $value, $prefix = '', $suffix = '', $echo = true ) {
 
-	// Bail early if we have no $selector elements or properties and $value.
+	// Bail early if there is no $selector elements or properties and $value.
 	if ( ! $value || ! $selector ) {
 		return '';
 	}
@@ -34,7 +34,7 @@ function twenty_twenty_one_generate_css( $selector, $style, $value, $prefix = ''
 		/**
 		 * Note to reviewers: $css contains auto-generated CSS.
 		 * It is included inside <style> tags and can only be interpreted as CSS on the browser.
-		 * Using wp_strip_all_tags() here is sufficient escaping since we just need to avoid
+		 * Using wp_strip_all_tags() here is sufficient escaping to avoid
 		 * malicious attempts to close </style> and open a <script>.
 		 */
 		echo wp_strip_all_tags( $css ); // phpcs:ignore WordPress.Security.EscapeOutput

src/wp-content/themes/twentytwentyone/inc/template-functions.php

@@ -270,8 +270,8 @@ function twenty_twenty_one_get_icon_svg( $group, $icon, $size = 24 ) {
  * @return string
  */
 function twenty_twenty_one_change_calendar_nav_arrows( $calendar_output ) {
-	$calendar_output = str_replace( '« ', twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ), $calendar_output );
-	$calendar_output = str_replace( ' »', twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ), $calendar_output );
+	$calendar_output = str_replace( '« ', is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ), $calendar_output );
+	$calendar_output = str_replace( ' »', is_rtl() ? twenty_twenty_one_get_icon_svg( 'ui', 'arrow_left' ) : twenty_twenty_one_get_icon_svg( 'ui', 'arrow_right' ), $calendar_output );
 	return $calendar_output;
 }
 add_filter( 'get_calendar', 'twenty_twenty_one_change_calendar_nav_arrows' );
@@ -381,7 +381,7 @@ function twenty_twenty_one_get_non_latin_css( $type = 'front-end' ) {
 	}
 
 	// Return the specified styles.
-	return twenty_twenty_one_generate_css(
+	return twenty_twenty_one_generate_css( // @phpstan-ignore-line.
 		implode( ',', $elements[ $type ] ),
 		'font-family',
 		implode( ',', $font_family[ $locale ] ),
@@ -398,8 +398,8 @@ function twenty_twenty_one_get_non_latin_css( $type = 'front-end' ) {
  *
  * @param string      $block_name The full block type name, or a partial match.
  *                                Example: `core/image`, `core-embed/*`.
- * @param string|null $content    The content we need to search in. Use null for get_the_content().
- * @param int         $instances  How many instances of the block we want to print. Defaults to 1.
+ * @param string|null $content    The content to search in. Use null for get_the_content().
+ * @param int         $instances  How many instances of the block will be printed (max). Defaults to 1.
  *
  * @return bool Returns true if a block was located & printed, otherwise false.
  */
@@ -422,10 +422,10 @@ function twenty_twenty_one_print_first_instance_of_block( $block_name, $content
 			continue;
 		}
 
-		// Check if this the block we're looking for.
+		// Check if this the block matches the $block_name.
 		$is_matching_block = false;
 
-		// If the block ends with *, we should just try to match the first portion.
+		// If the block ends with *, try to match the first portion.
 		if ( '*' === $block_name[-1] ) {
 			$is_matching_block = 0 === strpos( $block['blockName'], rtrim( $block_name, '*' ) );
 		} else {
@@ -439,7 +439,7 @@ function twenty_twenty_one_print_first_instance_of_block( $block_name, $content
 			// Add the block HTML.
 			$blocks_content .= render_block( $block );
 
-			// Break the loop if we've reached the $instances count.
+			// Break the loop if the $instances count was reached.
 			if ( $instances_count >= $instances ) {
 				break;
 			}

src/wp-content/themes/twentytwentyone/inc/template-tags.php

@@ -73,6 +73,10 @@ if ( ! function_exists( 'twenty_twenty_one_entry_meta_footer' ) ) {
 		// Hide meta information on pages.
 		if ( ! is_single() ) {
 
+			if ( is_sticky() ) {
+				echo '<p>' . esc_html__( 'Featured post', 'twentytwentyone' ) . '</p>';
+			}
+
 			$post_format = get_post_format();
 			if ( 'aside' === $post_format || 'status' === $post_format ) {
 				echo '<p><a href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></p>'; // phpcs:ignore WordPress.Security.EscapeOutput

src/wp-content/themes/twentytwentyone/page.php

@@ -16,7 +16,7 @@ while ( have_posts() ) :
 	the_post();
 	get_template_part( 'template-parts/content/content-page' );
 
-	// If comments are open or we have at least one comment, load up the comment template.
+	// If comments are open or there is at least one comment, load up the comment template.
 	if ( comments_open() || get_comments_number() ) {
 		comments_template();
 	}

src/wp-content/themes/twentytwentyone/single.php

@@ -27,7 +27,7 @@ while ( have_posts() ) :
 		);
 	}
 
-	// If comments are open or we have at least one comment, load up the comment template.
+	// If comments are open or there is at least one comment, load up the comment template.
 	if ( comments_open() || get_comments_number() ) {
 		comments_template();
 	}

src/wp-content/themes/twentytwentyone/style-rtl.css

@@ -256,7 +256,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
 	--footer--color-link: var(--global--color-primary);
 	--footer--color-link-hover: var(--global--color-primary-hover);
 	--footer--font-family: var(--global--font-primary);
-	--footer--font-size: var(--global--font-size-xs);
+	--footer--font-size: var(--global--font-size-sm);
 	/* Block: Pull quote */
 	--pullquote--font-family: var(--global--font-primary);
 	--pullquote--font-size: var(--heading--font-size-h3);
@@ -302,7 +302,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
 
 /* OS dark theme preference */
 @media (prefers-color-scheme: dark) {
-	html.has-default-light-palette-background {
+	html.respect-color-scheme-preference {
 		--global--color-background: var(--global--color-dark-gray);
 		--global--color-primary: var(--global--color-light-gray);
 		--global--color-secondary: var(--global--color-light-gray);
@@ -312,7 +312,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
 		--button--color-background: var(--global--color-secondary);
 		--button--color-background-active: var(--global--color-background);
 	}
-	html.has-default-light-palette-background body {
+	html.respect-color-scheme-preference body {
 		background-color: var(--global--color-background);
 	}
 }
@@ -1004,11 +1004,11 @@ template {
 
 .entry-content > *.alignleft, .entry-content > *.alignright,
 .entry-content > *.alignleft:first-child + *,
-.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull {
+.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull.has-background {
 	margin-top: 0;
 }
 
-.entry-content > *:last-child, .entry-content > *.alignfull {
+.entry-content > *:last-child, .entry-content > *.alignfull.has-background {
 	margin-bottom: 0;
 }
 
@@ -2973,13 +2973,15 @@ table.wp-calendar-table th {
 
 table.wp-calendar-table thead,
 table.wp-calendar-table tbody {
-	border: 1px solid var(--global--color-dark-gray);
+	color: currentColor;
+	border: 1px solid;
 }
 
 table.wp-calendar-table caption {
 	font-weight: bold;
 	text-align: right;
 	margin-bottom: var(--global--spacing-unit);
+	color: currentColor;
 }
 
 .wp-calendar-nav {
@@ -4066,6 +4068,7 @@ h1.page-title {
 	.primary-navigation > .primary-menu-container {
 		height: 100vh;
 		z-index: 499;
+		border: 2px solid transparent;
 	}
 	.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
 		position: fixed;
@@ -4077,6 +4080,9 @@ h1.page-title {
 	.admin-bar .primary-navigation > .primary-menu-container {
 		height: calc(100vh - 46px);
 	}
+	.primary-navigation > .primary-menu-container:focus {
+		border: 2px solid var(--global--color-primary);
+	}
 }
 
 @media only screen and (max-width: 481px) {
@@ -4966,4 +4972,4 @@ main,
 section,
 footer {
 	max-width: none;
-}
+}

src/wp-content/themes/twentytwentyone/style.css

@@ -256,7 +256,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
 	--footer--color-link: var(--global--color-primary);
 	--footer--color-link-hover: var(--global--color-primary-hover);
 	--footer--font-family: var(--global--font-primary);
-	--footer--font-size: var(--global--font-size-xs);
+	--footer--font-size: var(--global--font-size-sm);
 	/* Block: Pull quote */
 	--pullquote--font-family: var(--global--font-primary);
 	--pullquote--font-size: var(--heading--font-size-h3);
@@ -302,7 +302,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
 
 /* OS dark theme preference */
 @media (prefers-color-scheme: dark) {
-	html.has-default-light-palette-background {
+	html.respect-color-scheme-preference {
 		--global--color-background: var(--global--color-dark-gray);
 		--global--color-primary: var(--global--color-light-gray);
 		--global--color-secondary: var(--global--color-light-gray);
@@ -312,7 +312,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
 		--button--color-background: var(--global--color-secondary);
 		--button--color-background-active: var(--global--color-background);
 	}
-	html.has-default-light-palette-background body {
+	html.respect-color-scheme-preference body {
 		background-color: var(--global--color-background);
 	}
 }
@@ -1008,11 +1008,11 @@ template {
 
 .entry-content > *.alignleft, .entry-content > *.alignright,
 .entry-content > *.alignleft:first-child + *,
-.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull {
+.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull.has-background {
 	margin-top: 0;
 }
 
-.entry-content > *:last-child, .entry-content > *.alignfull {
+.entry-content > *:last-child, .entry-content > *.alignfull.has-background {
 	margin-bottom: 0;
 }
 
@@ -2977,13 +2977,15 @@ table.wp-calendar-table th {
 
 table.wp-calendar-table thead,
 table.wp-calendar-table tbody {
-	border: 1px solid var(--global--color-dark-gray);
+	color: currentColor;
+	border: 1px solid;
 }
 
 table.wp-calendar-table caption {
 	font-weight: bold;
 	text-align: left;
 	margin-bottom: var(--global--spacing-unit);
+	color: currentColor;
 }
 
 .wp-calendar-nav {
@@ -4075,6 +4077,7 @@ h1.page-title {
 	.primary-navigation > .primary-menu-container {
 		height: 100vh;
 		z-index: 499;
+		border: 2px solid transparent;
 	}
 	.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
 		position: fixed;
@@ -4086,6 +4089,9 @@ h1.page-title {
 	.admin-bar .primary-navigation > .primary-menu-container {
 		height: calc(100vh - 46px);
 	}
+	.primary-navigation > .primary-menu-container:focus {
+		border: 2px solid var(--global--color-primary);
+	}
 }
 
 @media only screen and (max-width: 481px) {
@@ -4977,4 +4983,4 @@ footer {
 	max-width: none;
 }
 
-/*# sourceMappingURL=style.css.map */
+/*# sourceMappingURL=style.css.map */

src/wp-content/themes/twentytwentyone/template-parts/content/content-page.php

@@ -32,8 +32,8 @@
 			array(
 				'before'   => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
 				'after'    => '</nav>',
-				/* translators: There is a space after page. */
-				'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
+				/* translators: %: page number. */
+				'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ),
 			)
 		);
 		?>

src/wp-content/themes/twentytwentyone/template-parts/content/content-single.php

@@ -26,8 +26,8 @@
 			array(
 				'before'   => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
 				'after'    => '</nav>',
-				/* translators: There is a space after page. */
-				'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
+				/* translators: %: page number. */
+				'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ),
 			)
 		);
 		?>

src/wp-content/themes/twentytwentyone/template-parts/content/content.php

@@ -25,18 +25,15 @@
 	<div class="entry-content">
 		<?php
 		the_content(
-			sprintf(
-				twenty_twenty_one_continue_reading_text(),
-				get_the_title()
-			)
+			twenty_twenty_one_continue_reading_text()
 		);
 
 		wp_link_pages(
 			array(
 				'before'   => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">',
 				'after'    => '</nav>',
-				/* translators: There is a space after page. */
-				'pagelink' => esc_html__( 'Page ', 'twentytwentyone' ) . '%',
+				/* translators: %: page number. */
+				'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ),
 			)
 		);
 

src/wp-content/themes/twentytwentyone/template-parts/excerpt/excerpt-chat.php

@@ -10,7 +10,7 @@
  */
 
 // If there are paragraph blocks, print up to two.
-// Otherwise this is legacy content, and we can post the excerpt.
+// Otherwise this is legacy content, so print the excerpt.
 if ( has_block( 'core/paragraph', get_the_content() ) ) {
 
 	twenty_twenty_one_print_first_instance_of_block( 'core/paragraph', get_the_content(), 2 );

src/wp-content/themes/twentytwentyone/template-parts/excerpt/excerpt-gallery.php

@@ -9,7 +9,7 @@
  * @since 1.0.0
  */
 
-// Print the 1st gallery we can find.
+// Print the 1st gallery found.
 if ( has_block( 'core/gallery', get_the_content() ) ) {
 
 	twenty_twenty_one_print_first_instance_of_block( 'core/gallery', get_the_content() );

src/wp-content/themes/twentytwentyone/template-parts/excerpt/excerpt-image.php

@@ -9,7 +9,7 @@
  * @since 1.0.0
  */
 
-// If there is no featured-image, print the first image block we can find.
+// If there is no featured-image, print the first image block found.
 if (
 	! twenty_twenty_one_can_show_post_thumbnail() &&
 	has_block( 'core/image', get_the_content() )