Merge 946987e into 532441c

material-components · Jul 5, 2022 · 0358f09 · 0358f09
2 parents 532441c + 946987e
commit 0358f09
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 53 deletions.
diff --git a/plugin/assets/src/block-editor/utils/get-config.js b/plugin/assets/src/block-editor/utils/get-config.js
@@ -32,4 +32,16 @@ const getConfig = name => {
 	return configData[ name ];
 };
 
+export const setConfig = ( name, value ) => {
+	const configData = window.materialDesign;
+
+	if ( undefined === configData ) {
+		return false;
+	}
+
+	configData[ name ] = value;
+
+	return configData[ name ];
+};
+
 export default getConfig;
diff --git a/plugin/assets/src/customizer/components/style-settings-control/index.js b/plugin/assets/src/customizer/components/style-settings-control/index.js
@@ -39,13 +39,11 @@ const localStorageDarkMode = window.localStorage.getItem(
 	'materialDesignDarkMode'
 );
 
-const StyleSettingsControl = ( { defaultValue, selectedStyle, setValue } ) => {
-	const [ currentValue, setCurrentValue ] = useState(
-		defaultValue[ selectedStyle ]
-	);
+const StyleSettingsControl = ( { defaultValue, setValue } ) => {
+	const [ currentValue, setCurrentValue ] = useState( defaultValue );
 	const { dark, switcher } = currentValue;
 	const [ isSwitcherDisabled, setIsSwitcherDisabled ] = useState(
-		'inactive' === defaultValue[ selectedStyle ].dark
+		'inactive' === defaultValue.dark
 	);
 	const isThemeActive = 'ok' === getConfig( 'themeStatus' );
 

diff --git a/plugin/assets/src/customizer/customize-controls.js b/plugin/assets/src/customizer/customize-controls.js
@@ -603,22 +603,18 @@ import handleGlobalStyleResetButtonClick from './components/reset-card-style';
 	const renderStyleSettingsControl = control => {
 		const { setting } = control;
 		let defaultValue = setting.get();
-		const selectedStyle = api( getConfig( 'styleControl' ) ).get();
 
 		if ( 'string' === typeof defaultValue ) {
 			defaultValue = JSON.parse( defaultValue );
 		}
 
 		const props = {
 			defaultValue,
-			selectedStyle,
 			setValue: value => {
 				setting.set(
 					JSON.stringify( {
 						...defaultValue,
-						[ selectedStyle ]: {
-							...value,
-						},
+						...value,
 					} )
 				);
 			},

diff --git a/plugin/assets/src/customizer/customize-preview.js b/plugin/assets/src/customizer/customize-preview.js
@@ -39,6 +39,7 @@ import {
  * Internal dependencies
  */
 import { STYLES } from '../customizer/components/google-fonts-control/styles';
+import { setConfig } from '../block-editor/utils/get-config';
 
 const getIconFontName = iconStyle => {
 	return iconStyle === 'filled'
@@ -93,6 +94,7 @@ export const COLOR_MODES = {
 				( { color, isDarkMode } ) => {
 					const intColor = argbFromHex( color );
 					const colorPallete = themeFromSourceColor( intColor );
+					setConfig( 'sourceColor', color );
 
 					applyTheme( colorPallete, {
 						target: document.body,
@@ -260,9 +262,6 @@ export const COLOR_MODES = {
 			toggleDarkModeSwitch( settings );
 		} );
 
-		styles +=
-			'--md-sys-color-primary: var(--md-sys-color-primary);--md-sys-color-on-primary: var(--md-sys-color-on-primary);--md-sys-color-background: var(--md-sys-color-background);--md-sys-color-on-background: var(--md-sys-color-on-background);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant);--md-sys-color-surface-variant: var(--md-sys-color-surface-variant);--md-sys-color-on-surface: var(--md-sys-color-on-surface);--md-sys-color-surface: var(--md-sys-color-surface);--md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant);--md-sys-color-outline: var(--md-sys-color-outline);';
-
 		styles = `body {
 			${ styles }
 		}
@@ -318,21 +317,14 @@ export const COLOR_MODES = {
 	const toggleDarkModeSwitch = debounce( value => {
 		const darkModeData =
 			'string' === typeof value ? JSON.parse( value ) : value;
-		const currentStyle = parentApi(
-			window.parent.materialDesign.styleControl
-		).get();
-
-		if ( ! currentStyle ) {
-			return;
-		}
 
 		const topAppBar = document.querySelector( '.mdc-top-app-bar' );
 
 		if ( ! topAppBar ) {
 			return;
 		}
 
-		if ( darkModeData[ currentStyle ].switcher ) {
+		if ( darkModeData.switcher ) {
 			topAppBar.classList.add( HAS_DARK_MODE_CLASS );
 		} else {
 			topAppBar.classList.remove( HAS_DARK_MODE_CLASS );

diff --git a/plugin/php/class-plugin.php b/plugin/php/class-plugin.php
@@ -244,6 +244,7 @@ public function enqueue_front_end_assets() {
 		$material_design_recaptcha_site_key = get_option( 'material_design_recaptcha_site_key', '' );
 		$wp_localized_script_data           = [
 			'ajax_url'              => admin_url( 'admin-ajax.php' ),
+			'sourceColor'           => $this->customizer_controls->get_source_color(),
 			'darkModeStatus'        => $this->customizer_controls->get_dark_mode_status(),
 			'globalStyle'           => $this->block_types->get_global_styles(),
 			'isMaterialThemeActive' => $this->theme_status() === 'ok',

diff --git a/plugin/php/customizer/class-controls.php b/plugin/php/customizer/class-controls.php
@@ -232,42 +232,50 @@ public function add_theme_controls() {
 		 * List of all the control settings in the Theme section.
 		 */
 		$settings = [
-			'color_palette' => [
+			'color_palette'  => [
 				'default' => [],
 			],
 			/**
 			 * This setting does not have an associated control
 			 * it's used to display material components notification.
 			 */
-			'notify'        => [
+			'notify'         => [
 				'default' => 0,
 			],
-			'dark_mode'     => [
-				'dark'     => 'auto',
-				'contrast' => 'auto',
-				'switcher' => false,
-				'active'   => 'default',
+			'style_settings' => [
+				'default' => [
+					'dark'     => 'auto',
+					'contrast' => 'auto',
+					'switcher' => false,
+					'active'   => 'default',
+				],
 			],
 		];
 
 		$this->add_settings( $settings );
 
+		$controls_settings = [
+			'style_settings' => new Style_Settings_Control(
+				$this->wp_customize,
+				$this->prepare_option_name( 'style_settings' ),
+				[
+					'section'  => 'colors',
+					'priority' => 200,
+					'style'    => get_option( $this->prepare_option_name( 'style' ) ),
+					'css_var'  => '--mdc-theme-setting',
+				]
+			),
+		];
+
+		$this->add_controls( $controls_settings );
+
 		$active_mode_settings = [
 			'active_mode' => [
 				'default' => 'default',
 			],
 		];
 
 		$this->add_settings( $active_mode_settings );
-
-		$this->add_controls(
-			[
-				'active_mode' => [
-					'section' => 'dark_colors',
-					'type'    => 'text',
-				],
-			]
-		);
 	}
 
 	/**
@@ -1796,10 +1804,6 @@ public function filter_style_section( $args, $id ) {
 			);
 		}
 
-		if ( 'material_design_dark_colors' === $id || 'material_design_contrast_colors' === $id ) {
-			$args['type'] = 'dark_mode';
-		}
-
 		return $args;
 	}
 
@@ -1852,6 +1856,15 @@ public function get_dark_mode_status() {
 		return $style_settings[ $selected_style ]['dark'];
 	}
 
+	/**
+	 * Retrieve source color.
+	 *
+	 * @return string hex source color.
+	 */
+	public function get_source_color() {
+		return $this->get_option( 'primary_color' );
+	}
+
 	/**
 	 * Select sanitization callback.
 	 *

diff --git a/plugin/php/customizer/class-material-color-palette-control.php b/plugin/php/customizer/class-material-color-palette-control.php
@@ -81,13 +81,6 @@ class Material_Color_Palette_Control extends \WP_Customize_Control {
 	 */
 	public $color_mode_type = 'default';
 
-	/**
-	 * Secondary controls
-	 *
-	 * @var string
-	 */
-	public $secondary_controls = [];
-
 	/**
 	 * Render a JS template for the Material color palette tabs.
 	 *
@@ -159,6 +152,5 @@ public function to_json() {
 		$this->json['id']                 = ! empty( $this->id ) ? $this->id : '';
 		$this->json['defaultModeSetting'] = ! empty( $this->default_mode_setting ) ? $this->default_mode_setting : '';
 		$this->json['colorModeType']      = ! empty( $this->color_mode_type ) ? $this->color_mode_type : '';
-		$this->json['secondaryControls']  = ! empty( $this->secondary_controls ) ? $this->secondary_controls : [];
 	}
 }
diff --git a/theme/assets/src/front-end/components/dark-mode-switch.js b/theme/assets/src/front-end/components/dark-mode-switch.js
@@ -14,6 +14,16 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+
+import {
+	argbFromHex,
+	themeFromSourceColor,
+	applyTheme,
+} from '@material/material-color-utilities';
+
 const body = document.body;
 export const ICONS = {
 	DARK_MODE: 'dark_mode',
@@ -35,11 +45,23 @@ const maybeToggleDarkMode = event => {
 		return;
 	}
 
+	const color = window.materialDesign.sourceColor;
+	const intColor = argbFromHex( color );
+	const colorPallete = themeFromSourceColor( intColor );
+
 	if ( darkModeEnabled ) {
-		body.setAttribute( 'data-color-scheme', 'dark' );
+		applyTheme( colorPallete, {
+			target: document.body,
+			dark: true,
+		} );
+
 		switcherIcon.textContent = ICONS.LIGHT_MODE;
 	} else {
-		body.setAttribute( 'data-color-scheme', 'light' );
+		applyTheme( colorPallete, {
+			target: document.body,
+			dark: false,
+		} );
+
 		switcherIcon.textContent = ICONS.DARK_MODE;
 	}
 };

diff --git a/theme/template-parts/menu-header.php b/theme/template-parts/menu-header.php
@@ -31,8 +31,7 @@
 $layout           = get_theme_mod( 'header_bar_layout', 'standard' );
 $material_options = get_option( 'material_design' );
 $style_settings   = isset( $material_options['style_settings'] ) ? json_decode( $material_options['style_settings'], true ) : [];
-$current_style    = ! empty( $material_options['style'] ) ? $material_options['style'] : 'baseline';
-$has_dark_mode    = ! empty( $style_settings[ $current_style ] ) && ! empty( $style_settings[ $current_style ]['switcher'] ) ? $style_settings[ $current_style ]['switcher'] : false;
+$has_dark_mode    = ! empty( $style_settings ) && ! empty( $style_settings['switcher'] ) ? $style_settings['switcher'] : false;
 $class            = ( 'fixed' === $layout ) ? 'mdc-top-app-bar--fixed' : '';
 $class           .= ( $has_dark_mode ) ? ' top-app-bar--has-dark-mode' : '';
 ?>