Implement object property comparison

Author: ockham

packages/blocks/src/store/selectors.js

@@ -12,7 +12,7 @@ import { RichTextData } from '@wordpress/rich-text';
 /**
  * Internal dependencies
  */
-import { getValueFromObjectPath } from './utils';
+import { getValueFromObjectPath, matchesAttributes } from './utils';
 
 /** @typedef {import('../api/registration').WPBlockVariation} WPBlockVariation */
 /** @typedef {import('../api/registration').WPBlockVariationScope} WPBlockVariationScope */
@@ -277,6 +277,17 @@ export function getActiveBlockVariation( state, blockName, attributes, scope ) {
 				if ( blockAttributeValue instanceof RichTextData ) {
 					blockAttributeValue = blockAttributeValue.toHTMLString();
 				}
+				// If the attribute value is an object, we need to compare its properties.
+				if (
+					variationAttributeValue !== null &&
+					typeof variationAttributeValue === 'object' &&
+					variationAttributeValue.constructor === Object
+				) {
+					return matchesAttributes(
+						blockAttributeValue,
+						variationAttributeValue
+					);
+				}
 				return variationAttributeValue === blockAttributeValue;
 			} );
 			if ( isMatch && definedAttributesLength > maxMatchedAttributes ) {

packages/blocks/src/store/utils.js

@@ -18,3 +18,27 @@ export const getValueFromObjectPath = ( object, path, defaultValue ) => {
 	} );
 	return value ?? defaultValue;
 };
+
+/**
+ * Determine whether a set of object properties matches a given object.
+ *
+ * Given an object of block attributes and an object of variation attributes,
+ * this function checks recursively whether all the variation attributes are
+ * present in the block attributes object.
+ *
+ * @param {Object} blockAttributes     The object to inspect.
+ * @param {Object} variationAttributes The object of property values to match.
+ * @return {boolean} Whether the block attributes match the variation attributes.
+ */
+export function matchesAttributes( blockAttributes, variationAttributes ) {
+	return Object.entries( variationAttributes ).every( ( [ key, value ] ) => {
+		if (
+			typeof value === 'object' &&
+			value !== null &&
+			typeof blockAttributes[ key ] === 'object'
+		) {
+			return matchesAttributes( blockAttributes[ key ], value );
+		}
+		return blockAttributes[ key ] === value;
+	} );
+}