WIP: Saving styles

WordPress · ribaricplusplus · Jan 8, 2023 · Jan 8, 2023 · Jan 9, 2023 · Jan 10, 2023
commit 854a80fd0e12e53283c8ead61d34116041c8c6bf
@@ -469,9 +469,11 @@ public static function get_user_data_from_wp_global_styles( $theme, $create_post
 		return $user_cpt;
 	}
 
+	// @codingStandardsIgnoreStart Squiz.Commenting.FunctionComment.ParamCommentFullStop
 	/**
 	 * Saves a new user variation into the database.
 	 *
+	 *
 	 * @param array $args Arguments. All are required.
 	 *     {
 	 *     @type string title Global styles variation name.
@@ -511,6 +513,7 @@ public static function add_user_global_styles_variation( $args ) {
 
 		return $post_id;
 	}
+	// @codingStandardsIgnoreEnd Squiz.Commenting.FunctionComment.ParamCommentFullStop
 
 	/**
 	 * Make an association between post $id and post containing current user

@@ -54,7 +54,7 @@ public function register_routes() {
 	 *
 	 * @return WP_REST_Response|WP_Error
 	 */
-	public function get_user_items( $request ) {
+	public function get_user_items( /* @phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable */ $request ) {
 		$variations = WP_Theme_JSON_Resolver_Gutenberg::get_user_style_variations();
 		$response   = rest_ensure_response( $variations );
 		return $response;
@@ -68,13 +68,13 @@ public function get_user_items( $request ) {
 	 * @param WP_REST_Request $request Full details about the request.
 	 * @return true|WP_Error True if the request has read access for the item, WP_Error object otherwise.
 	 */
-	public function get_user_items_permissions_check( $request ) {
+	public function get_user_items_permissions_check( /* @phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable */ $request ) {
 		// Verify if the current user has edit_theme_options capability.
 		// This capability is required to edit/view/delete templates.
 		if ( ! current_user_can( 'edit_theme_options' ) ) {
 			return new WP_Error(
 				'rest_cannot_manage_global_styles',
-				__( 'Sorry, you are not allowed to access the global styles on this site.' ),
+				__( 'Sorry, you are not allowed to access the global styles on this site.', 'gutenberg' ),
 				array(
 					'status' => rest_authorization_required_code(),
 				)

@@ -102,6 +102,9 @@ function gutenberg_register_global_styles_endpoints() {
 }
 add_action( 'rest_api_init', 'gutenberg_register_global_styles_endpoints' );
 
+/**
+ * Registers the themes REST API routes.
+ */
 function gutenberg_register_themes_endpoints() {
 	$controller = new Gutenberg_REST_Themes_Controller_6_2();
 	$controller->register_routes();

@@ -900,24 +900,6 @@ export const __experimentalCreateNewGlobalStylesVariation =
 		return newVariationData;
 	};
 
-/**
- * Tracks whether changes have been made to global styles associated variation
- * ID.
- * Ignored from documentation as it's internal to the data store.
- *
- * @ignore
- *
- * @param {boolean} hasChanged Whether it changed.
- *
- * @return {Object} Action object.
- */
-export function __experimentalAssociatedVariationChanged( hasChanged ) {
-	return {
-		type: 'SET_ASSOCIATED_VARIATION_CHANGED',
-		hasChanged,
-	};
-}
-
 /**
  * Discards changes in the specified record.
  *

@@ -662,15 +662,6 @@ export function blockPatternCategories( state = [], action ) {
 	return state;
 }
 
-export function associatedVariationChanged( state = false, action ) {
-	switch ( action.type ) {
-		case 'SET_ASSOCIATED_VARIATION_CHANGED':
-			return action.hasChanged;
-	}
-
-	return state;
-}
-
 export default combineReducers( {
 	terms,
 	users,
@@ -688,5 +679,4 @@ export default combineReducers( {
 	blockPatterns,
 	blockPatternCategories,
 	userGlobalStyleVariations,
-	associatedVariationChanged,
 } );
@@ -38,7 +38,6 @@ export interface State {
 	userGlobalStyleVariations: Record< string, Object[] >;
 	undo: UndoState;
 	users: UserState;
-	associatedVariationChanged: boolean;
 }
 
 type EntityRecordKey = string | number;
@@ -1284,9 +1283,3 @@ export function getBlockPatterns( state: State ): Array< any > {
 export function getBlockPatternCategories( state: State ): Array< any > {
 	return state.blockPatternCategories;
 }
-
-export function __experimentalHasAssociatedVariationChanged(
-	state: State
-): boolean {
-	return state.associatedVariationChanged;
-}
diff --git a/packages/edit-site/src/components/global-styles/context.js b/packages/edit-site/src/components/global-styles/context.js
@@ -8,8 +8,6 @@ export const DEFAULT_GLOBAL_STYLES_CONTEXT = {
 	base: {},
 	merged: {},
 	setUserConfig: () => {},
-	selectedThemeVariationChanged: false,
-	setSelectedThemeVariationChanged: () => {},
 };
 
 export const GlobalStylesContext = createContext(

diff --git a/packages/edit-site/src/components/global-styles/global-styles-provider.js b/packages/edit-site/src/components/global-styles/global-styles-provider.js
@@ -47,18 +47,14 @@ const cleanEmptyObject = ( object ) => {
 };
 
 function useGlobalStylesUserConfig() {
-	const {
-		hasFinishedResolution,
-		__experimentalHasAssociatedVariationChanged,
-	} = useSelect( coreStore );
-	const {
-		editEntityRecord,
-		__experimentalAssociatedVariationChanged,
-		__experimentalDiscardRecordChanges,
-	} = useDispatch( coreStore );
+	const { hasFinishedResolution } = useSelect( coreStore );
+	const { editEntityRecord, __experimentalDiscardRecordChanges } =
+		useDispatch( coreStore );
 
-	const { globalStylesId, isReady, settings, styles, associated_style_id } =
-		useSelect( ( select ) => {
+	const [ isReady, setIsReady ] = useState( false );
+
+	const { globalStylesId, settings, styles, associated_style_id } = useSelect(
+		( select ) => {
 			const { getEditedEntityRecord } = select( coreStore );
 			const _globalStylesId =
 				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
@@ -72,10 +68,7 @@ function useGlobalStylesUserConfig() {
 			const _associatedStyleId = record
 				? record[ 'associated_style_id' ]
 				: undefined;
-			if (
-				_associatedStyleId &&
-				! __experimentalHasAssociatedVariationChanged()
-			) {
+			if ( _associatedStyleId ) {
 				getEditedEntityRecord(
 					'root',
 					'globalStyles',
@@ -85,6 +78,7 @@ function useGlobalStylesUserConfig() {
 
 			let hasResolved = false;
 			if (
+				! isReady &&
 				hasFinishedResolution(
 					'__experimentalGetCurrentGlobalStylesId'
 				)
@@ -104,7 +98,6 @@ function useGlobalStylesUserConfig() {
 					}
 
 					const associatedStyleFinishedResolution =
-						__experimentalHasAssociatedVariationChanged() ||
 						hasFinishedResolution( 'getEditedEntityRecord', [
 							'root',
 							'globalStyles',
@@ -116,16 +109,21 @@ function useGlobalStylesUserConfig() {
 						associatedStyleFinishedResolution
 					);
 				} )();
+
+				if ( hasResolved ) {
+					setIsReady( true );
+				}
 			}
 
 			return {
 				globalStylesId: _globalStylesId,
-				isReady: hasResolved,
 				settings: record?.settings,
 				styles: record?.styles,
 				associated_style_id: _associatedStyleId,
 			};
-		}, [] );
+		},
+		[]
+	);
 
 	const { getEditedEntityRecord } = useSelect( coreStore );
 	const config = useMemo( () => {
@@ -165,10 +163,6 @@ function useGlobalStylesUserConfig() {
 				associatedStyleIdChanged = true;
 			}
 
-			__experimentalAssociatedVariationChanged(
-				associatedStyleIdChanged
-			);
-
 			editEntityRecord(
 				'root',
 				'globalStyles',
@@ -247,16 +241,7 @@ function useGlobalStylesUserConfig() {
 		[ globalStylesId ]
 	);
 
-	const [ selectedThemeVariationChanged, setSelectedThemeVariationChanged ] =
-		useState( false );
-
-	return [
-		isReady,
-		config,
-		setConfig,
-		selectedThemeVariationChanged,
-		setSelectedThemeVariationChanged,
-	];
+	return [ isReady, config, setConfig ];
 }
 
 function useGlobalStylesBaseConfig() {
@@ -270,13 +255,8 @@ function useGlobalStylesBaseConfig() {
 }
 
 function useGlobalStylesContext() {
-	const [
-		isUserConfigReady,
-		userConfig,
-		setUserConfig,
-		selectedThemeVariationChanged,
-		setSelectedThemeVariationChanged,
-	] = useGlobalStylesUserConfig();
+	const [ isUserConfigReady, userConfig, setUserConfig ] =
+		useGlobalStylesUserConfig();
 	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
 	const mergedConfig = useMemo( () => {
 		if ( ! baseConfig || ! userConfig ) {
@@ -291,8 +271,6 @@ function useGlobalStylesContext() {
 			base: baseConfig,
 			merged: mergedConfig,
 			setUserConfig,
-			selectedThemeVariationChanged,
-			setSelectedThemeVariationChanged,
 		};
 	}, [
 		mergedConfig,
@@ -301,8 +279,6 @@ function useGlobalStylesContext() {
 		setUserConfig,
 		isUserConfigReady,
 		isBaseConfigReady,
-		selectedThemeVariationChanged,
-		setSelectedThemeVariationChanged,
 	] );
 
 	return context;

diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
@@ -12,7 +12,7 @@ import {
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-function ScreenHeader( { title, description, onBackButtonClick } ) {
+function ScreenHeader( { title, description } ) {
 	return (
 		<VStack spacing={ 0 }>
 			<View>
@@ -27,7 +27,6 @@ function ScreenHeader( { title, description, onBackButtonClick } ) {
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							isSmall
 							aria-label={ __( 'Navigate to the previous view' ) }
-							onClick={ onBackButtonClick }
 						/>
 						<Spacer>
 							<Heading level={ 5 }>{ title }</Heading>

diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
@@ -22,7 +22,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { getValueFromVariable, getPresetVariableFromValue } from './utils';
+import {
+	getValueFromVariable,
+	getPresetVariableFromValue,
+	compareVariations,
+} from './utils';
 import { GlobalStylesContext } from './context';
 
 // Enable colord's a11y plugin.
@@ -398,3 +402,15 @@ export function useCustomSavedStyles() {
 
 	return variations;
 }
+
+export function useUserChangesMatchAnyVariation( variations ) {
+	const { user } = useContext( GlobalStylesContext );
+	const matches = useMemo(
+		() =>
+			variations?.some( ( variation ) =>
+				compareVariations( user, variation )
+			),
+		[ user, variations ]
+	);
+	return matches;
+}