diff --git a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index 236c612960..1a2f0abd91 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/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 { diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css index 69188ae3d7..a41c5569f3 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/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; } diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/wp-content/themes/twentytwentyone/assets/css/style-editor.css index 7e8530e0a8..3a05acaaf0 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/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 { diff --git a/wp-content/themes/twentytwentyone/assets/images/Daffodils.jpg b/wp-content/themes/twentytwentyone/assets/images/Daffodils.jpg new file mode 100644 index 0000000000..a69530098d Binary files /dev/null and b/wp-content/themes/twentytwentyone/assets/images/Daffodils.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/Reading.jpg b/wp-content/themes/twentytwentyone/assets/images/Reading.jpg new file mode 100644 index 0000000000..47933cfdf0 Binary files /dev/null and b/wp-content/themes/twentytwentyone/assets/images/Reading.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/in-the-bois-de-boulogne.jpg b/wp-content/themes/twentytwentyone/assets/images/in-the-bois-de-boulogne.jpg new file mode 100644 index 0000000000..bfcc3d96ca Binary files /dev/null and b/wp-content/themes/twentytwentyone/assets/images/in-the-bois-de-boulogne.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/playing-in-the-sand.jpg b/wp-content/themes/twentytwentyone/assets/images/playing-in-the-sand.jpg new file mode 100644 index 0000000000..dda064b076 Binary files /dev/null and b/wp-content/themes/twentytwentyone/assets/images/playing-in-the-sand.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks-1884.jpg b/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks-1884.jpg new file mode 100644 index 0000000000..15f953be1f Binary files /dev/null and b/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks-1884.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks.jpg b/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks.jpg new file mode 100644 index 0000000000..15f953be1f Binary files /dev/null and b/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/self-portrait-1885.jpg b/wp-content/themes/twentytwentyone/assets/images/self-portrait-1885.jpg new file mode 100644 index 0000000000..6cb35413e4 Binary files /dev/null and b/wp-content/themes/twentytwentyone/assets/images/self-portrait-1885.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/the-garden-at-bougival-1884.jpg b/wp-content/themes/twentytwentyone/assets/images/the-garden-at-bougival-1884.jpg new file mode 100644 index 0000000000..4e466afc24 Binary files /dev/null and b/wp-content/themes/twentytwentyone/assets/images/the-garden-at-bougival-1884.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/villa-with-orange-trees-nice.jpg b/wp-content/themes/twentytwentyone/assets/images/villa-with-orange-trees-nice.jpg new file mode 100644 index 0000000000..d71c266492 Binary files /dev/null and b/wp-content/themes/twentytwentyone/assets/images/villa-with-orange-trees-nice.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/young-woman-in-mauve.jpg b/wp-content/themes/twentytwentyone/assets/images/young-woman-in-mauve.jpg new file mode 100644 index 0000000000..7329ffdb4e Binary files /dev/null and b/wp-content/themes/twentytwentyone/assets/images/young-woman-in-mauve.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/js/customize-helpers.js b/wp-content/themes/twentytwentyone/assets/js/customize-helpers.js new file mode 100644 index 0000000000..94e00ca617 --- /dev/null +++ b/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; +} diff --git a/wp-content/themes/twentytwentyone/assets/js/customize.js b/wp-content/themes/twentytwentyone/assets/js/customize.js new file mode 100644 index 0000000000..72e989fb58 --- /dev/null +++ b/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 + } ) ); + } + } + } ); + } ); + } ); +}() ); diff --git a/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js b/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js index 54be8e3de1..b4e09a1792 100644 --- a/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js +++ b/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' ) ) { diff --git a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php index 6c9bdbf10e..cb49d5bb53 100644 --- a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php +++ b/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; } } diff --git a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-customize.php b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-customize.php index 87a616ee15..f9b66f0b7c 100644 --- a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-customize.php +++ b/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' ) ); + }, + ) + ); } /** diff --git a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-svg-icons.php b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-svg-icons.php index 0ba49ebe4b..ed6b831cc9 100644 --- a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-svg-icons.php +++ b/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( '/^ tag in the document head, and expect WordPress to - * provide it for us. + * This theme does not use a hard-coded 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 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 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"'; } } diff --git a/wp-content/themes/twentytwentyone/header.php b/wp-content/themes/twentytwentyone/header.php index 6f960e1653..9f0433a43a 100644 --- a/wp-content/themes/twentytwentyone/header.php +++ b/wp-content/themes/twentytwentyone/header.php @@ -1,6 +1,6 @@ section and everything up until main. * diff --git a/wp-content/themes/twentytwentyone/image.php b/wp-content/themes/twentytwentyone/image.php index a30fdd4522..e5ebfba33d 100644 --- a/wp-content/themes/twentytwentyone/image.php +++ b/wp-content/themes/twentytwentyone/image.php @@ -42,8 +42,8 @@ while ( have_posts() ) { array( 'before' => '', - /* 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() ) {

'; 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 '

'; @@ -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'] ) ) ); diff --git a/wp-content/themes/twentytwentyone/inc/custom-css.php b/wp-content/themes/twentytwentyone/inc/custom-css.php index 3d60eb18cc..0ebae1293f 100644 --- a/wp-content/themes/twentytwentyone/inc/custom-css.php +++ b/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 and open a