diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
index ecdc82e763304..5f18ecc50697c 100644
--- a/packages/blocks/src/store/selectors.js
+++ b/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;
diff --git a/packages/blocks/src/store/test/selectors.js b/packages/blocks/src/store/test/selectors.js
index 1a6e768724acc..88e5828b2fd0e 100644
--- a/packages/blocks/src/store/test/selectors.js
+++ b/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 RichText attribute.',
+ },
+ isActive: [ 'firstTestAttribute' ],
+ },
+ {
+ name: 'variation-2',
+ attributes: {
+ firstTestAttribute:
+ 'This is a RichText attribute.',
+ },
+ isActive: [ 'firstTestAttribute' ],
+ },
+ ];
+ const state =
+ createBlockVariationsStateWithTestBlockType( variations );
+
+ expect(
+ getActiveBlockVariation( state, blockName, {
+ firstTestAttribute: RichTextData.fromHTMLString(
+ 'This is a RichText attribute.'
+ ),
+ } )
+ ).toEqual( variations[ 0 ] );
+ expect(
+ getActiveBlockVariation( state, blockName, {
+ firstTestAttribute: RichTextData.fromHTMLString(
+ 'This is a RichText attribute.'
+ ),
+ } )
+ ).toEqual( variations[ 1 ] );
+ } );
it( 'should return the active variation based on the given isActive array (multiple values)', () => {
const variations = [
{