Block Variations: Detect active variation correctly based on RichText…

… attribute (#62325)

If a block variation has an `isActive` property that is an array of strings (i.e. attribute names), and one of the attributes referenced therein is a `RichText` value, compare the given `RichText` string correctly to the given block's. (This applies also to nested attributes, i.e. if a `RichText` value is contained in an object (that might be contained in another, and so on) inside an attribute.)

Co-authored-by: ockham <bernhard-reiter@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>

packages/blocks/src/store/selectors.js

@@ -7,6 +7,7 @@ import removeAccents from 'remove-accents';
  * WordPress dependencies
  */
 import { createSelector } from '@wordpress/data';
+import { RichTextData } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -262,17 +263,21 @@ export function getActiveBlockVariation( state, blockName, attributes, scope ) {
 				continue;
 			}
 			const isMatch = definedAttributes.every( ( attribute ) => {
-				const attributeValue = getValueFromObjectPath(
-					attributes,
+				const variationAttributeValue = getValueFromObjectPath(
+					variation.attributes,
 					attribute
 				);
-				if ( attributeValue === undefined ) {
+				if ( variationAttributeValue === undefined ) {
 					return false;
 				}
-				return (
-					attributeValue ===
-					getValueFromObjectPath( variation.attributes, attribute )
+				let blockAttributeValue = getValueFromObjectPath(
+					attributes,
+					attribute
 				);
+				if ( blockAttributeValue instanceof RichTextData ) {
+					blockAttributeValue = blockAttributeValue.toHTMLString();
+				}
+				return variationAttributeValue === blockAttributeValue;
 			} );
 			if ( isMatch && definedAttributesLength > maxMatchedAttributes ) {
 				match = variation;

packages/blocks/src/store/test/selectors.js

@@ -17,6 +17,11 @@ import {
 	getActiveBlockVariation,
 } from '../selectors';
 
+/**
+ * WordPress dependencies
+ */
+import { RichTextData } from '@wordpress/rich-text';
+
 const keyBlocksByName = ( blocks ) =>
 	blocks.reduce(
 		( result, block ) => ( { ...result, [ block.name ]: block } ),
@@ -452,6 +457,43 @@ describe( 'selectors', () => {
 					} )
 				).toEqual( variations[ 1 ] );
 			} );
+			it( 'should support RichText attributes in the isActive array', () => {
+				const variations = [
+					{
+						name: 'variation-1',
+						attributes: {
+							firstTestAttribute:
+								'This is a <strong>RichText</strong> attribute.',
+						},
+						isActive: [ 'firstTestAttribute' ],
+					},
+					{
+						name: 'variation-2',
+						attributes: {
+							firstTestAttribute:
+								'This is a <em>RichText</em> attribute.',
+						},
+						isActive: [ 'firstTestAttribute' ],
+					},
+				];
+				const state =
+					createBlockVariationsStateWithTestBlockType( variations );
+
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: RichTextData.fromHTMLString(
+							'This is a <strong>RichText</strong> attribute.'
+						),
+					} )
+				).toEqual( variations[ 0 ] );
+				expect(
+					getActiveBlockVariation( state, blockName, {
+						firstTestAttribute: RichTextData.fromHTMLString(
+							'This is a <em>RichText</em> attribute.'
+						),
+					} )
+				).toEqual( variations[ 1 ] );
+			} );
 			it( 'should return the active variation based on the given isActive array (multiple values)', () => {
 				const variations = [
 					{