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 = [ {