Twenty Twenty-One: Sync the latest changes for 5.6 RC1.

For a full list of changes since [49574-49577], see https://github.com/WordPress/twentytwentyone/compare/aa284fd...trunk.

Props poena, luminuu, kjellr, ryelle, aristath.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49633


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

wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css

@@ -10,7 +10,7 @@
 		--button--color-text-active: var(--global--color-secondary);
 		--button--color-background: var(--global--color-secondary);
 		--button--color-background-active: var(--global--color-background);
-		--global--color-border: #ffffff8c;
+		--global--color-border: #9ea1a7;
 	}
 
 	.is-dark-theme.is-dark-theme .site a:focus,
@@ -48,10 +48,6 @@
 		display: none;
 	}
 
-	.wp-admin #dark-mode-toggler {
-		display: none;
-	}
-
 	#dark-mode-toggler.fixed-bottom {
 		position: fixed;
 		bottom: 5px;

wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css

@@ -10,7 +10,7 @@
 		--button--color-text-active: var(--global--color-secondary);
 		--button--color-background: var(--global--color-secondary);
 		--button--color-background-active: var(--global--color-background);
-		--global--color-border: #ffffff8c;
+		--global--color-border: #9ea1a7;
 	}
 
 	.is-dark-theme.is-dark-theme .site a:focus,
@@ -48,10 +48,6 @@
 		display: none;
 	}
 
-	.wp-admin #dark-mode-toggler {
-		display: none;
-	}
-
 	#dark-mode-toggler.fixed-bottom {
 		position: fixed;
 		bottom: 5px;

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

@@ -6,6 +6,7 @@
 		// 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();
+			wp.customize.control( 'respect_user_color_preference_notice' ).deactivate();
 		}
 
 		// Handle changes to the background-color.
@@ -13,8 +14,10 @@
 			setting.bind( function( value ) {
 				if ( 127 > twentytwentyoneGetHexLum( value ) ) {
 					wp.customize.control( 'respect_user_color_preference' ).deactivate();
+					wp.customize.control( 'respect_user_color_preference_notice' ).activate();
 				} else {
 					wp.customize.control( 'respect_user_color_preference' ).activate();
+					wp.customize.control( 'respect_user_color_preference_notice' ).deactivate();
 				}
 			} );
 		} );

wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js

@@ -14,9 +14,8 @@ function toggleDarkMode() { // jshint ignore:line
 	}
 }
 
-function darkModeInitialLoad() {
-	var toggler = document.getElementById( 'dark-mode-toggler' ),
-		isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches;
+function twentytwentyoneIsDarkMode() {
+	var isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches;
 
 	if ( 'yes' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) {
 		isDarkMode = true;
@@ -24,12 +23,12 @@ function darkModeInitialLoad() {
 		isDarkMode = false;
 	}
 
-	if ( ! toggler ) {
-		return;
-	}
-	if ( isDarkMode ) {
-		toggler.setAttribute( 'aria-pressed', 'true' );
-	}
+	return isDarkMode;
+}
+
+function darkModeInitialLoad() {
+	var toggler = document.getElementById( 'dark-mode-toggler' ),
+		isDarkMode = twentytwentyoneIsDarkMode();
 
 	if ( isDarkMode ) {
 		document.documentElement.classList.add( 'is-dark-theme' );
@@ -38,6 +37,10 @@ function darkModeInitialLoad() {
 		document.documentElement.classList.remove( 'is-dark-theme' );
 		document.body.classList.remove( 'is-dark-theme' );
 	}
+
+	if ( toggler && isDarkMode ) {
+		toggler.setAttribute( 'aria-pressed', 'true' );
+	}
 }
 
 function darkModeRepositionTogglerOnScroll() {

wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js

@@ -1,81 +1,44 @@
-/* global ajaxurl, XMLHttpRequest, darkModeInitialLoad, setTimeout */
+/* global twentytwentyoneIsDarkMode, setTimeout */
 
-// Check the body class to determine if we want to add the toggler and handle dark-mode or not.
+// Check the color scheme preference and inject the classes if necessary.
 if ( document.body.classList.contains( 'twentytwentyone-supports-dark-theme' ) ) {
-	// Add the toggler.
-	twentytwentyoneDarkModeEditorToggle();
+	twentytwentyoneDarkModeEditorInit();
 }
 
 /**
- * Make an AJAX request, inject the toggle and call any functions that need to run.
+ * Once the editor loads, add the dark mode class.
+ *
+ * Wait for the editor to load by periodically checking for an element, then we add the classes.
  *
  * @since 1.0.0
  *
+ * @param {number} attempt Track the number of tries
  * @return {void}
  */
-function twentytwentyoneDarkModeEditorToggle() {
-	var request = new XMLHttpRequest();
+function twentytwentyoneDarkModeEditorInit( attempt ) {
+	var container = document.querySelector( '.block-editor__typewriter' ),
+		maxAttempts = 8;
 
-	// Define the request.
-	request.open( 'POST', ajaxurl, true );
-
-	// Add headers.
-	request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8' );
-
-	// On success call funtions that need to run.
-	request.onload = function() {
-		var selector = '.editor-styles-wrapper,.edit-post-visual-editor',
-			editor,
-			attemptDelay = 25,
-			attempt = 0,
-			maxAttempts = 8;
-
-		if ( 200 <= this.status && 400 > this.status ) {
-			editor = document.querySelector( selector );
-
-			if ( null === editor ) {
-				// Try again.
-				if ( attempt < maxAttempts ) {
-					setTimeout( function() {
-						twentytwentyoneDarkModeEditorToggle();
-					}, attemptDelay );
-
-					// Increment the attempts counter.
-					attempt++;
+	// Set the initial attempt if it's undefined.
+	attempt = attempt || 0;
 
+	if ( twentytwentyoneIsDarkMode() ) {
+		if ( null === container ) {
+			// Try again.
+			if ( attempt < maxAttempts ) {
+				setTimeout(
+					function() {
+						twentytwentyoneDarkModeEditorInit( attempt + 1 );
+					},
 					// Double the delay, give the server some time to breathe.
-					attemptDelay *= 2;
-				}
-				return;
+					25 * Math.pow( 2, attempt )
+				);
 			}
-			// Inject the toggle.
-			document.querySelector( selector ).insertAdjacentHTML( 'afterbegin', this.response );
-
-			// Run toggler script.
-			darkModeInitialLoad();
-
-			// Switch editor styles if needed.
-			twentytwentyoneDarkModeEditorToggleEditorStyles();
+			return;
 		}
-	};
 
-	// Send the request.
-	request.send( 'action=tt1_dark_mode_editor_switch' );
-}
-
-/**
- * Toggle the editor dark styles depending on the user's preferences in the toggler.
- *
- * @since 1.0.0
- *
- * @return {void}
- */
-function twentytwentyoneDarkModeEditorToggleEditorStyles() {
-	var toggler = document.getElementById( 'dark-mode-toggler' );
-
-	if ( 'true' === toggler.getAttribute( 'aria-pressed' ) ) {
 		document.body.classList.add( 'is-dark-theme' );
 		document.documentElement.classList.add( 'is-dark-theme' );
-		document.querySelector( '.block-editor__typewriter' ).classList.add( 'is-dark-theme' );
+		container.classList.add( 'is-dark-theme' );
 	}
 }

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

@@ -114,7 +114,7 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
 			tabKey = event.keyCode === 9;
 			shiftKey = event.shiftKey;
 			escKey = event.keyCode === 27;
-			activeEl = document.activeElement;
+			activeEl = document.activeElement; // eslint-disable-line @wordpress/no-global-active-element
 			lastEl = elements[ elements.length - 1 ];
 			firstEl = elements[0];
 

wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss

@@ -10,7 +10,7 @@
 		--button--color-text-active: var(--global--color-secondary);
 		--button--color-background: var(--global--color-secondary);
 		--button--color-background-active: var(--global--color-background);
-		--global--color-border: #ffffff8c; //55% opacity
+		--global--color-border: #9ea1a7;
 
 		.site a:focus,
 		.site a:focus .meta-nav {
@@ -47,10 +47,6 @@
 			display: none;
 		}
 
-		.wp-admin & {
-			display: none;
-		}
-
 		&.fixed-bottom {
 			position: fixed;
 			bottom: 5px;

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

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Customize API: Twenty_Twenty_One_Customize_Notice_Control class
+ *
+ * @package WordPress
+ * @subpackage Twenty_Twenty_One
+ * @since 1.0.0
+ */
+
+/**
+ * Customize Notice Control class.
+ *
+ * @since 1.0.0
+ *
+ * @see WP_Customize_Control
+ */
+class Twenty_Twenty_One_Customize_Notice_Control extends WP_Customize_Control {
+	/**
+	 * The control type.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @var string
+	 */
+	public $type = 'twenty-twenty-one-notice';
+
+	/**
+	 * Renders the control content.
+	 *
+	 * This simply prints the notice we need.
+	 *
+	 * @access public
+	 *
+	 * @since 1.0.0
+	 *
+	 * @return void
+	 */
+	public function render_content() {
+		?>
+		<div class="notice notice-warning">
+			<p><?php esc_html_e( 'To access the Dark Mode settings, select a light background color.', 'twentytwentyone' ); ?></p>
+			<p><a href="https://wordpress.org/support/article/twenty-twenty-one/">
+				<?php esc_html_e( 'Learn more about Dark Mode.', 'twentytwentyone' ); ?>
+			</a></p>
+		</div>
+		<?php
+	}
+}

wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php

@@ -42,9 +42,6 @@ class Twenty_Twenty_One_Dark_Mode {
 		// Add the switch on the frontend & customizer.
 		add_action( 'wp_footer', array( $this, 'the_switch' ) );
 
-		// Add the switch in the editor.
-		add_action( 'wp_ajax_tt1_dark_mode_editor_switch', array( $this, 'editor_ajax_callback' ) );
-
 		// Add the privacy policy content.
 		add_action( 'admin_init', array( $this, 'add_privacy_policy_content' ) );
 	}
@@ -145,10 +142,35 @@ class Twenty_Twenty_One_Dark_Mode {
 
 		$colors_section = $wp_customize->get_section( 'colors' );
 		if ( is_object( $colors_section ) ) {
-			$colors_section->title       = __( 'Colors & Dark Mode', 'twentytwentyone' );
-			$colors_section->description = __( 'To access the Dark Mode settings, select a light background color.', 'twentytwentyone' ) . '<br><a href="https://wordpress.org/support/article/twenty-twenty-one/">' . __( 'Learn more about Dark Mode.', 'twentytwentyone' ) . '</a>';
+			$colors_section->title = __( 'Colors & Dark Mode', 'twentytwentyone' );
 		}
 
+		// Custom notice control.
+		include_once get_theme_file_path( 'classes/class-twenty-twenty-one-customize-notice-control.php' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
+
+		$wp_customize->add_setting(
+			'respect_user_color_preference_notice',
+			array(
+				'capability'        => 'edit_theme_options',
+				'default'           => '',
+				'sanitize_callback' => '__return_empty_string',
+			)
+		);
+
+		$wp_customize->add_control(
+			new Twenty_Twenty_One_Customize_Notice_Control(
+				$wp_customize,
+				'respect_user_color_preference_notice',
+				array(
+					'section'         => 'colors',
+					'priority'        => 100,
+					'active_callback' => function() {
+						return 127 >= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );
+					},
+				)
+			)
+		);
+
 		$wp_customize->add_setting(
 			'respect_user_color_preference',
 			array(
@@ -160,13 +182,17 @@ class Twenty_Twenty_One_Dark_Mode {
 			)
 		);
 
+		$description  = '<p>' . __( '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. <a href="https://wordpress.org/support/article/twenty-twenty-one/">Learn more about Dark Mode.</a>', 'twentytwentyone' ) . '</p>';
+		$description .= '<p>' . __( 'Dark Mode can also be turned on and off with a button that you can find in the bottom right corner of the page.', 'twentytwentyone' ) . '</p>';
+
 		$wp_customize->add_control(
 			'respect_user_color_preference',
 			array(
 				'type'            => 'checkbox',
 				'section'         => 'colors',
 				'label'           => esc_html__( 'Dark Mode support', 'twentytwentyone' ),
-				'description'     => __( 'Respect visitor&#8217;s device dark mode settings.<br>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.<br><br>Dark Mode can also be turned on and off with a button that you can find in the bottom right corner of the page.', 'twentytwentyone' ),
+				'priority'        => 110,
+				'description'     => $description,
 				'active_callback' => function( $value ) {
 					return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );
 				},
@@ -358,36 +384,6 @@ class Twenty_Twenty_One_Dark_Mode {
 		echo '</script>';
 	}
 
-	/**
-	 * Print the dark-mode switch styles.
-	 *
-	 * @access public
-	 *
-	 * @since 1.0.0
-	 *
-	 * @return void
-	 */
-	public function the_styles() {
-		echo '<style>';
-		include get_theme_file_path( 'assets/css/style-dark-mode.css' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude
-		echo '</style>';
-	}
-
-	/**
-	 * Call the tt1_the_dark_mode_switch and exit.
-	 *
-	 * @access public
-	 *
-	 * @since 1.0.0
-	 *
-	 * @return void
-	 */
-	public function editor_ajax_callback() {
-		$this->the_html();
-		$this->the_styles();
-		wp_die();
-	}
-
 	/**
 	 * Adds information to the privacy policy.
 	 *

wp-content/themes/twentytwentyone/inc/block-patterns.php

@@ -77,7 +77,7 @@ if ( function_exists( 'register_block_pattern' ) ) {
 	register_block_pattern(
 		'twentytwentyone/two-images-showcase',
 		array(
-			'title'         => esc_html__( 'Two mages showcase', 'twentytwentyone' ),
+			'title'         => esc_html__( 'Two images showcase', 'twentytwentyone' ),
 			'categories'    => array( 'twentytwentyone' ),
 			'viewportWidth' => 1440,
 			'description'   => esc_html_x( 'A media & text block with a big image on the left and a smaller one with bordered frame on the right.', 'Block pattern description', 'twentytwentyone' ),

wp-content/themes/twentytwentyone/package-lock.json

@@ -404,6 +404,14 @@
 				"globals": "^12.0.0",
 				"prettier": "npm:wp-prettier@2.0.5",
 				"requireindex": "^1.2.0"
+			},
+			"dependencies": {
+				"prettier": {
+					"version": "npm:wp-prettier@2.0.5",
+					"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.0.5.tgz",
+					"integrity": "sha512-5GCgdeevIXwR3cW4Qj5XWC5MO1iSCz8+IPn0mMw6awAt/PBiey8yyO7MhePRsaMqghJAhg6Q3QLYWSnUHWkG6A==",
+					"dev": true
+				}
 			}
 		},
 		"@wordpress/prettier-config": {
@@ -3120,12 +3128,6 @@
 			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
 			"dev": true
 		},
-		"prettier": {
-			"version": "npm:wp-prettier@2.0.5",
-			"resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.0.5.tgz",
-			"integrity": "sha512-5GCgdeevIXwR3cW4Qj5XWC5MO1iSCz8+IPn0mMw6awAt/PBiey8yyO7MhePRsaMqghJAhg6Q3QLYWSnUHWkG6A==",
-			"dev": true
-		},
 		"prettier-linter-helpers": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.6-beta4-49632';
+$wp_version = '5.6-beta4-49633';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.