Merge ecf6cb1 into 47e8d62

plugin/assets/src/admin-m3-color-migration/admin-notice.js

@@ -0,0 +1,55 @@
+/*
+ *  Copyright 2022 Google LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+const adminNotice = () => {
+	const notice = document.querySelector( '#material-theme-m3-migration' );
+	if ( ! notice ) {
+		return;
+	}
+	/**
+	 * Callback on click.
+	 *
+	 * @param {Event} e
+	 */
+	const materialClickCallback =
+		/**
+		 * @this {HTMLLinkElement}
+		 */
+		function ( e ) {
+			e.preventDefault();
+			/** @member this {HTMLElement} */
+			const link = this.href;
+			// @ts-ignore
+			wp.ajax
+				.post( 'material_m3_notice', {
+					_wpnonce: window.material_m3_migration_notice.nonce,
+				} )
+				.done( function () {
+					location.href = link;
+					notice.remove();
+				} );
+		};
+	const targets = notice.querySelectorAll(
+		'.material-theme-m3-migration__primary'
+	);
+	for ( let i = 0; i < targets.length; i++ ) {
+		targets[ i ].addEventListener( 'click', materialClickCallback );
+	}
+};
+
+document.addEventListener( 'DOMContentLoaded', () =>
+	setTimeout( adminNotice, 100 )
+);

plugin/assets/src/admin-m3-color-migration/index.js

@@ -0,0 +1,35 @@
+/*
+ *  Copyright 2022 Google LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import {
+	argbFromHex,
+	themeFromSourceColor,
+} from '@material/material-color-utilities';
+
+const colorMigration = () => {
+	const intColor = argbFromHex(
+		window.material_m3_migration_color.primaryColor
+	);
+	const colorPalette = themeFromSourceColor( intColor );
+	// @ts-ignore
+	wp.ajax.post( 'm3_migrate_colors', {
+		_wpnonce: window.material_m3_migration_color.nonce,
+		colorPalette: JSON.stringify( colorPalette ),
+	} );
+};
+
+document.addEventListener( 'DOMContentLoaded', () =>
+	setTimeout( colorMigration, 1 )
+);

plugin/assets/src/types/global.d.ts

@@ -1,10 +1,17 @@
 export {};
-
+import { WP } from 'wp-types';
 declare global {
     interface Window {
         materialDesignWizard: materialDesignWizard;
-        wp: any;
+        wp: WP;
         _wpCustomizeSettings: any;
+		material_m3_migration_color:{
+			nonce: string;
+			primaryColor: string;
+		},
+		material_m3_migration_notice: {
+			nonce: string;
+		}
     }
 }
 

plugin/php/class-helpers.php

@@ -246,4 +246,43 @@ public static function dechex( $decimal ) {
 	public static function sanitize_control_id( $id ) {
 		return str_replace( [ '[', ']' ], [ '-', '' ], $id );
 	}
+
+	/**
+	 * Sanitize material generated colors.
+	 *
+	 * Colors are generated using `themeFromSourceColor` js function and are stored in the customizer in serialized form.
+	 *
+	 * @param array $color_palette color palette in array format from `themeFromSourceColor`.
+	 *
+	 * @return array
+	 */
+	public static function sanitize_js_generated_colors( $color_palette ) {
+		$sanitized_color = [
+			'source'   => intval( $color_palette['source'] ),
+			'schemes'  => [],
+			'palettes' => [],
+		];
+
+		foreach ( $color_palette['schemes'] as $key => $values ) {
+			// Sanitize value by passing as ref and changing the value.
+			array_walk(
+				$values,
+				function ( &$val ) {
+					$val = intval( $val );
+				}
+			);
+			$sanitized_color['schemes'][ $key ] = $values;
+		}
+
+		foreach ( $color_palette['palettes'] as $key => $palette ) {
+			$sanitized_color['palettes'][ $key ] = [
+				'primary' => floatval( $palette['hue'] ),
+				'chroma'  => intval( $palette['chroma'] ),
+				'cache'   => [],
+			];
+		}
+
+		return $sanitized_color;
+	}
+
 }

plugin/php/class-migration.php

@@ -26,18 +26,41 @@
 namespace MaterialDesign\Plugin;
 
 /**
- * Migration class.
+ * Migration class from m2 to m3.
  */
 class Migration extends Module_Base {
 
 	const MIGRATION_KEY = 'material_m2_to_m3_migration';
 
+	/**
+	 * Control slug key.
+	 *
+	 * @var string
+	 */
+	private $slug = '';
+
 	/**
 	 * Initiate the class and hooks.
 	 */
 	public function init() {
-		add_action( 'admin_init', [ $this, 'migrate_m2_typography_settings_to_m3' ], 10 );
-		add_action( 'admin_init', [ $this, 'migrate_m2_corner_radius' ], 10 );
+		$this->slug = $this->plugin->customizer_controls->slug;
+
+		add_action( 'admin_init', [ $this, 'migrate_m2_typography_settings_to_m3' ] );
+		add_action( 'admin_init', [ $this, 'migrate_m2_corner_radius' ] );
+		add_action( 'admin_init', [ $this, 'migrate_colors' ] );
+		add_action( 'admin_notices', [ $this, 'admin_notice_m3_migration' ] );
+
+		add_action( 'wp_ajax_m3_migrate_colors', [ $this, 'ajax_migrate_colors' ] );
+		add_action( 'wp_ajax_material_m3_notice', [ $this, 'notice_click' ] );
+	}
+
+	/**
+	 * Get customizer option.
+	 *
+	 * @return array
+	 */
+	public function get_customizer_option() {
+		return get_option( $this->slug, [] );
 	}
 
 	/**
@@ -95,9 +118,7 @@ public function migrate_m2_typography_settings_to_m3() {
 			'head_font_family' => [ 'display_font_family', 'headline_font_family' ],
 		];
 
-		$slug = $this->plugin->customizer_controls->slug;
-
-		$option = get_option( $slug, [] );
+		$option = $this->get_customizer_option();
 
 		foreach ( $map as $m2_key => $m3_key ) {
 			if ( is_array( $m3_key ) ) {
@@ -115,7 +136,7 @@ public function migrate_m2_typography_settings_to_m3() {
 			}
 		}
 
-		update_option( $slug, $option );
+		update_option( $this->slug, $option );
 
 		$this->update( 'typography' );
 	}
@@ -145,4 +166,124 @@ public function migrate_m2_corner_radius() {
 		$this->update( 'corner_radius' );
 	}
 
+	/**
+	 * Migrate colors.
+	 *
+	 * @return void
+	 */
+	public function migrate_colors() {
+		if ( $this->get( 'color_migration' ) ) {
+			return;
+		}
+		add_action( 'admin_enqueue_scripts', [ $this, 'admin_enqueue_scripts' ] );
+	}
+
+	/**
+	 * Admin enqueue script for color migration.
+	 *
+	 * @return void
+	 */
+	public function admin_enqueue_scripts() {
+		$option = $this->get_customizer_option();
+
+		if ( isset( $option['color_palette'] ) ) {
+			return;
+		}
+
+		$version = include $this->plugin->dir_path . '/assets/js/admin-m3-color-migration.asset.php';
+
+		wp_enqueue_script(
+			'material-m3-migration-color',
+			$this->plugin->asset_url( 'assets/js/admin-m3-color-migration.js' ),
+			$version['dependencies'],
+			$version['version'],
+			true
+		);
+
+		wp_localize_script(
+			'material-m3-migration-color',
+			'material_m3_migration_color',
+			[
+				'nonce'        => wp_create_nonce( 'material_m3_migration_color' ),
+				'primaryColor' => isset( $option['primary_color'] ) ? $option['primary_color'] : $this->plugin->customizer_controls->get_default( 'primary_color' ),
+			]
+		);
+	}
+
+	/**
+	 * Ajax migrate colors.
+	 *
+	 * @return void
+	 */
+	public function ajax_migrate_colors() {
+		if ( ! isset( $_POST['_wpnonce'] ) || ! wp_verify_nonce( $_POST['_wpnonce'], 'material_m3_migration_color' ) ) { // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+			return;
+		}
+
+		$option = $this->get_customizer_option();
+		if ( isset( $option['color_palette'] ) ) {
+			// We already got the palette, abort.
+			wp_send_json_success();
+		}
+
+		$color_palette = json_decode( wp_unslash( isset( $_POST['colorPalette'] ) ? $_POST['colorPalette'] : [] ), true ); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+
+		$sanitized_color = Helpers::sanitize_js_generated_colors( $color_palette );
+
+		$option['color_palette'] = wp_json_encode( $sanitized_color );
+		update_option( $this->slug, $option );
+		$this->update( 'color_migration' );
+		wp_send_json_success();
+	}
+
+	/**
+	 * Show admin notice when migrated from m2 to m3.
+	 *
+	 * @return void
+	 */
+	public function admin_notice_m3_migration() {
+		if ( $this->get( 'admin_notice' ) ) {
+			return;
+		}
+		$version = include $this->plugin->dir_path . '/assets/js/admin-notice-m3-migration.asset.php';
+
+		wp_enqueue_script(
+			'material-m3-notice-migration-color',
+			$this->plugin->asset_url( 'assets/js/admin-notice-m3-migration.js' ),
+			$version['dependencies'],
+			$version['version'],
+			true
+		);
+
+		wp_localize_script(
+			'material-m3-notice-migration-color',
+			'material_m3_migration_notice',
+			[
+				'nonce' => wp_create_nonce( 'material_m3_migration_notice' ),
+			]
+		);
+
+		$customizer_url = admin_url( 'customize.php?autofocus[panel]=' . $this->plugin->customizer_controls->slug );
+		printf(
+			'<div id="material-theme-m3-migration" class="notice notice-info is-dismissible" style="transition:opacity 1s; opacity: 1;"><p>%s</p>',
+			esc_html__( 'Your site has been updated with Material Design 3. The color palette will be generated dynamically from primary color. You can preview the site and change the source color from customizer.', 'material-design' )
+		);
+		echo '<div class="button-group" style="padding-bottom: 5px;">';
+		printf( '<a class="material-theme-m3-migration__primary" href="%s"><button class="button button-primary" style="margin-right: 7px;">%s</button></a> ', esc_url( $customizer_url ), esc_html__( 'Go to customizer', 'material-design' ) );
+		echo '</div></div>';
+	}
+
+	/**
+	 * Handle notice click.
+	 *
+	 * @return void
+	 */
+	public function notice_click() {
+		if ( ! isset( $_POST['_wpnonce'] ) || ! wp_verify_nonce( $_POST['_wpnonce'], 'material_m3_migration_notice' ) ) { // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+			return;
+		}
+		$this->update( 'admin_notice' );
+		wp_send_json_success();
+	}
+
 }

plugin/php/customizer/class-controls.php

@@ -222,6 +222,20 @@ public function add_sections() {
 		}
 	}
 
+	/**
+	 * Sanitize serialized json.
+	 *
+	 * @param string $json_color_palette json string.
+	 *
+	 * @return false|string
+	 */
+	public function sanitize_color_palette_json( $json_color_palette ) {
+		$color_palette   = json_decode( $json_color_palette, true );
+		$sanitized_color = Helpers::sanitize_js_generated_colors( $color_palette );
+
+		return wp_json_encode( $sanitized_color );
+	}
+
 	/**
 	 * Add all controls in the "Theme" section.
 	 *
@@ -233,7 +247,8 @@ public function add_theme_controls() {
 		 */
 		$settings = [
 			'color_palette'  => [
-				'default' => [],
+				'default'           => [],
+				'sanitize_callback' => [ $this, 'sanitize_color_palette_json' ],
 			],
 			/**
 			 * This setting does not have an associated control

webpack.config.js

@@ -131,6 +131,18 @@ const assets = {
 				'./plugin/assets/css/src/settings.css',
 			],
 		},
+		{
+			name: 'Admin M3 Color Migration',
+			chunk: 'admin-m3-color-migration',
+			entry: [ './plugin/assets/src/admin-m3-color-migration/index.js' ],
+		},
+		{
+			name: 'Admin Notice M3 Migration',
+			chunk: 'admin-notice-m3-migration',
+			entry: [
+				'./plugin/assets/src/admin-m3-color-migration/admin-notice',
+			],
+		},
 	],
 	theme: [
 		{