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