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 (5 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.
      *