Changeset 49633 for trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php

Timestamp:

11/17/2020 06:58:52 PM (6 years ago)

Author:

desrosj

Message:

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.

File:

• trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php (modified) (5 diffs)

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

@@ -43 +43 @@
                 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' ) );
@@ -146 +143 @@
                 $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(
@@ -161 +183 @@
                 );
 
+                $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',
@@ -167 +192 @@
                                 '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' ) );
@@ -360 +386 @@
 
         /**
-         * 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.
          *