From a5ceec2af43361920edac4dd50f8d1f12c168bb6 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 17 Jan 2025 13:04:21 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Location-prop=20accessors?=
 =?UTF-8?q?=20require=20a=20location=20arg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Instead of using the “location” property, we want to explicitly specify which location props to access
---
 .../resources/js/data/styling/hooks.js        | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/data/styling/hooks.js b/modules/ppcp-settings/resources/js/data/styling/hooks.js
index d81ee8746..946aa4cc7 100644
--- a/modules/ppcp-settings/resources/js/data/styling/hooks.js
+++ b/modules/ppcp-settings/resources/js/data/styling/hooks.js
@@ -23,8 +23,8 @@ import {
 } from './configuration';
 
 const useHooks = () => {
-	const { useTransient, usePersistent } = createHooksForStore( STORE_NAME );
-	const { persist } = useDispatch( STORE_NAME );
+	const { useTransient } = createHooksForStore( STORE_NAME );
+	const { persist, setPersistent } = useDispatch( STORE_NAME );
 
 	// Read-only flags and derived state.
 
@@ -38,28 +38,28 @@ const useHooks = () => {
 		[]
 	);
 
-	const [ locationStyles, setLocationStyles ] = usePersistent( location );
-
 	const getLocationProp = useCallback(
-		( prop ) => {
-			if ( undefined === persistentData[ location ]?.[ prop ] ) {
+		( locatonId, prop ) => {
+			if ( undefined === persistentData[ locatonId ]?.[ prop ] ) {
 				console.error(
-					`Trying to access non-existent style property: ${ location }.${ prop }. Possibly wrong style name - review the reducer.`
+					`Trying to access non-existent style property: ${ locatonId }.${ prop }. Possibly wrong style name - review the reducer.`
 				);
 			}
-			return persistentData[ location ]?.[ prop ];
+			return persistentData[ locatonId ]?.[ prop ];
 		},
-		[ location, persistentData ]
+		[ persistentData ]
 	);
 
 	const setLocationProp = useCallback(
-		( prop, value ) => {
-			setLocationStyles( {
-				...locationStyles,
+		( locationId, prop, value ) => {
+			const updatedStyles = {
+				...persistentData[ locationId ],
 				[ prop ]: value,
-			} );
+			};
+
+			setPersistent( locationId, updatedStyles );
 		},
-		[ locationStyles, setLocationStyles ]
+		[ persistentData, setPersistent ]
 	);
 
 	return {