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

Timestamp:

11/12/2020 06:34:44 PM (5 years ago)

Author:

desrosj

Message:

Twenty Twenty-One: Merge the latest changes changes from GitHub for Beta 4.

In addition to syncing the latest changes, this change also merges the theme’s .scss files and other related build tool configurations required to compile the theme’s CSS.

This will allow development of the theme to continue on Trac after 5.6 is released and the GitHub repository is archived.

For a full list of changes since [], see ​https://github.com/WordPress/twentytwentyone/compare/e7d5991...aa284fd.

Props poena, luminuu kjellr, aristath, justinahinon.
See #51526.

File:

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

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

@@ -1 +1 @@
 <?php
 /**
- * Custom Colors Class
+ * Dark Mode Class
  *
  * @package WordPress
@@ -9 +9 @@
 
 /**
- * This class is in charge of color customization via the Customizer.
+ * This class is in charge of Dark Mode.
  */
 class Twenty_Twenty_One_Dark_Mode {
@@ -41 +41 @@
 
         // Add the switch on the frontend & customizer.
-        add_action( 'get_template_part_template-parts/header/site-nav', array( $this, 'the_switch' ) );
+        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' ) );
     }
 
@@ -63 +66 @@
         $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false );
         if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) {
-            // Add dark mode variable overrides.
+            // Add Dark Mode variable overrides.
             wp_add_inline_style(
                 'twenty-twenty-one-custom-color-overrides',
-                'html.is-dark-mode .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); }'
+                '.is-dark-theme.is-dark-theme .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); }'
             );
         }
@@ -99 +102 @@
             return;
         }
-        wp_enqueue_style(
-            'tt1-dark-mode',
-            get_template_directory_uri() . '/assets/css/style-dark-mode.css',
-            array( 'twenty-twenty-one-style' ),
-            '1.0.0'
-        );
+        $url = get_template_directory_uri() . '/assets/css/style-dark-mode.css';
+        if ( is_rtl() ) {
+            $url = get_template_directory_uri() . '/assets/css/style-dark-mode-rtl.css';
+        }
+        wp_enqueue_style( 'tt1-dark-mode', $url, array( 'twenty-twenty-one-style' ), wp_get_theme()->get( 'Version' ) ); // @phpstan-ignore-line. Version is always a string.
     }
 
@@ -127 +129 @@
             true
         );
-
-        wp_localize_script(
-            'twentytwentyone-customize-controls',
-            'backgroundColorNotice',
-            array(
-                'message' => esc_html__( 'Changes will only be visible if Dark Mode is "Off" in the preview', 'twentytwentyone' ),
-            )
-        );
     }
 
@@ -149 +143 @@
      */
     public function customizer_controls( $wp_customize ) {
+
+        $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>';
+        }
+
         $wp_customize->add_setting(
             'respect_user_color_preference',
@@ -165 +166 @@
                 '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' ),
+                'label'           => esc_html__( 'Dark Mode Support', 'twentytwentyone' ),
+                'description'     => __( 'Respect visitor\'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' ),
                 'active_callback' => function( $value ) {
                     return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );
@@ -329 +330 @@
                     z-index: 20;
                 }
-                html.is-dark-mode #dark-mode-toggler:not(:hover):not(:focus) {
+                .is-dark-theme.is-dark-theme #dark-mode-toggler:not(:hover):not(:focus) {
                     color: var(--global--color-primary);
                 }
@@ -387 +388 @@
         wp_die();
     }
+
+    /**
+     * Adds information to the privacy policy.
+     *
+     * @access public
+     *
+     * @since 1.0.0
+     *
+     * @return void
+     */
+    public function add_privacy_policy_content() {
+        if ( ! function_exists( 'wp_add_privacy_policy_content' ) ) {
+            return;
+        }
+        $content = '<p class="privacy-policy-tutorial">' . __( 'Twenty Twenty-One uses LocalStorage when Dark Mode support is enabled.', 'twentytwentyone' ) . '</p>'
+                . '<strong class="privacy-policy-tutorial">' . __( 'Suggested Text:', 'twentytwentyone' ) . '</strong> '
+                . __( 'This website uses LocalStorage to save the setting when Dark Mode support is turned on or off.<br> LocalStorage is necessary for the setting to work and is only used when a user clicks on the Dark Mode button.<br> No data is saved in the database or transferred.', 'twentytwentyone' );
+        wp_add_privacy_policy_content( 'Twenty Twenty-One', wp_kses_post( wpautop( $content, false ) ) );
+    }
+
 }