@wordpress/edit-site 6.0.3 → 6.0.4

package/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

@@ -48,17 +48,15 @@ export function removePropertyFromObject( object, property ) {
 }
 
 /**
- * A convenience wrapper for `useThemeStyleVariationsByProperty()` that fetches the current theme style variations,
- * and user-defined global style/settings object.
+ * Fetches the current theme style variations that contain only the specified property
+ * and merges them with the user config.
  *
- * @param {Object}   props          Object of hook args.
- * @param {string}   props.property The property to filter by.
- * @param {Function} props.filter   Optional. The filter function to apply to the variations.
+ * @param {Object} props          Object of hook args.
+ * @param {string} props.property The property to filter by.
  * @return {Object[]|*} The merged object.
  */
 export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
 	property,
-	filter,
 } ) {
 	const { variationsFromTheme } = useSelect( ( select ) => {
 		const _variationsFromTheme =
@@ -70,28 +68,34 @@ export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
 			variationsFromTheme: _variationsFromTheme || [],
 		};
 	}, [] );
-	const { user: baseVariation } = useContext( GlobalStylesContext );
+	const { user: userVariation } = useContext( GlobalStylesContext );
 
-	const variations = useMemo( () => {
-		return [
-			{
-				title: __( 'Default' ),
-				settings: {},
-				styles: {},
-			},
-			...variationsFromTheme,
-		];
-	}, [ variationsFromTheme ] );
+	return useMemo( () => {
+		const clonedUserVariation = cloneDeep( userVariation );
 
-	return useThemeStyleVariationsByProperty( {
-		variations,
-		property,
-		filter,
-		baseVariation: removePropertyFromObject(
-			cloneDeep( baseVariation ),
+		// Get user variation and remove the settings for the given property.
+		const userVariationWithoutProperty = removePropertyFromObject(
+			clonedUserVariation,
 			property
-		),
-	} );
+		);
+		userVariationWithoutProperty.title = __( 'Default' );
+
+		const variationsWithSinglePropertyAndBase = variationsFromTheme
+			.filter( ( variation ) => {
+				return isVariationWithSingleProperty( variation, property );
+			} )
+			.map( ( variation ) => {
+				return mergeBaseAndUserConfigs(
+					userVariationWithoutProperty,
+					variation
+				);
+			} );
+
+		return [
+			userVariationWithoutProperty,
+			...variationsWithSinglePropertyAndBase,
+		];
+	}, [ property, userVariation, variationsFromTheme ] );
 }
 
 /**
@@ -123,98 +127,6 @@ export const filterObjectByProperty = ( object, property ) => {
 	return newObject;
 };
 
-/**
- * Returns a new object with only the properties specified in `property`.
- * Optional merges the baseVariation object with the variation object.
- * Note: this function will only overwrite the specified property in baseVariation if it exists.
- * The baseVariation will not be otherwise modified. To strip a property from the baseVariation object, use `removePropertyFromObject`.
- * See useCurrentMergeThemeStyleVariationsWithUserConfig for an example of how to use this function.
- *
- * @param {Object}   props               Object of hook args.
- * @param {Object[]} props.variations    The theme style variations to filter.
- * @param {string}   props.property      The property to filter by.
- * @param {Function} props.filter        Optional. The filter function to apply to the variations.
- * @param {Object}   props.baseVariation Optional. Base or user settings to be updated with variation properties.
- * @return {Object[]|*} The merged object.
- */
-export default function useThemeStyleVariationsByProperty( {
-	variations,
-	property,
-	filter,
-	baseVariation,
-} ) {
-	return useMemo( () => {
-		if ( ! property || ! variations || variations?.length === 0 ) {
-			return variations;
-		}
-
-		const clonedBaseVariation =
-			typeof baseVariation === 'object' &&
-			Object.keys( baseVariation ).length > 0
-				? cloneDeep( baseVariation )
-				: null;
-
-		let processedStyleVariations = variations.reduce(
-			( accumulator, variation ) => {
-				const variationFilteredByProperty = filterObjectByProperty(
-					cloneDeep( variation ),
-					property
-				);
-
-				// Remove variations that are empty once the property is filtered out.
-				if (
-					variation.title !== __( 'Default' ) &&
-					Object.keys( variationFilteredByProperty ).length === 0
-				) {
-					return accumulator;
-				}
-
-				let result = {
-					...variationFilteredByProperty,
-					title: variation?.title,
-					description: variation?.description,
-				};
-
-				if ( clonedBaseVariation ) {
-					/*
-					 * Overwrites all baseVariation object `styleProperty` properties
-					 * with the theme variation `styleProperty` properties.
-					 */
-					result = mergeBaseAndUserConfigs(
-						clonedBaseVariation,
-						result
-					);
-				}
-
-				// Detect if this is a duplicate variation.
-				const isDuplicate = accumulator.some( ( item ) => {
-					return (
-						JSON.stringify( item.styles ) ===
-							JSON.stringify( result?.styles ) &&
-						JSON.stringify( item.settings ) ===
-							JSON.stringify( result?.settings )
-					);
-				} );
-				if ( isDuplicate ) {
-					return accumulator;
-				}
-
-				// If the variation is not a duplicate, add it to the accumulator.
-				accumulator.push( result );
-				return accumulator;
-			},
-			[] // Initial accumulator value.
-		);
-
-		if ( 'function' === typeof filter ) {
-			processedStyleVariations =
-				processedStyleVariations.filter( filter );
-		}
-
-		return processedStyleVariations;
-	}, [ variations, property, baseVariation, filter ] );
-}
-
 /**
  * Compares a style variation to the same variation filtered by a single property.
  * Returns true if the variation contains only the property specified.

package/src/style.scss

@@ -36,6 +36,19 @@
 @import "./components/pagination/style.scss";
 @import "./components/global-styles/variations/style.scss";
 
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+::view-transition-image-pair(root) {
+	isolation: auto;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+	animation: none;
+	mix-blend-mode: normal;
+	display: block;
+}
+/* stylelint-enable */
+
 body.js #wpadminbar {
 	display: none;
 }