From c4a7b4c267048068851a4caf3445647ff2ea1890 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 27 Jun 2024 19:16:57 +1000 Subject: [PATCH 1/3] Add blockName to the overrides array so getBlockName() can be called in the useSelect store subscription callback --- .../src/hooks/block-style-variation.js | 34 +++++++++++++------ 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js index 21259966d8a63b..7b80f495dce3d2 100644 --- a/packages/block-editor/src/hooks/block-style-variation.js +++ b/packages/block-editor/src/hooks/block-style-variation.js @@ -19,6 +19,7 @@ import { globalStylesDataKey } from '../store/private-keys'; import { unlock } from '../lock-unlock'; const VARIATION_PREFIX = 'is-style-'; +const EMPTY_ARRAY = []; function getVariationMatches( className ) { if ( ! className ) { @@ -77,13 +78,25 @@ function OverrideStyles( { override } ) { * @return {JSX.Element|undefined} An array of new block variation overrides. */ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) { - const { getBlockStyles, overrides } = useSelect( - ( select ) => ( { + const { overrides, getBlockStyles } = useSelect( ( select ) => { + const { getBlockName, getStyleOverrides } = unlock( + select( blockEditorStore ) + ); + const _overrides = getStyleOverrides(); + return { + overrides: _overrides?.length + ? _overrides.map( ( [ id, override ] ) => [ + id, + { + ...override, + blockName: getBlockName( override?.clientId ), + }, + ] ) + : EMPTY_ARRAY, getBlockStyles: select( blocksStore ).getBlockStyles, - overrides: unlock( select( blockEditorStore ) ).getStyleOverrides(), - } ), - [] - ); + }; + }, [] ); + const { getBlockName } = useSelect( blockEditorStore ); const overridesWithConfig = useMemo( () => { @@ -96,17 +109,16 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) { if ( override?.variation && override?.clientId && + override?.blockName && /* * Because this component overwrites existing style overrides, * filter out any overrides that are already present in the store. */ ! overriddenClientIds.includes( override.clientId ) ) { - const blockName = getBlockName( override.clientId ); const configStyles = - config?.styles?.blocks?.[ blockName ]?.variations?.[ - override.variation - ]; + config?.styles?.blocks?.[ override.blockName ] + ?.variations?.[ override.variation ]; if ( configStyles ) { const variationConfig = { settings: config?.settings, @@ -115,7 +127,7 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) { // name is updated to match the instance specific class name. styles: { blocks: { - [ blockName ]: { + [ override.blockName ]: { variations: { [ `${ override.variation }-${ override.clientId }` ]: configStyles, From 4fa770a5255b96637daa1ed7ff294a20a999d122 Mon Sep 17 00:00:00 2001 From: ramon Date: Thu, 27 Jun 2024 19:20:54 +1000 Subject: [PATCH 2/3] Update e2e test to wait for save button between styles updates --- test/e2e/specs/site-editor/block-style-variations.spec.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js index fedcd0946eac86..6d139dd755b29f 100644 --- a/test/e2e/specs/site-editor/block-style-variations.spec.js +++ b/test/e2e/specs/site-editor/block-style-variations.spec.js @@ -149,12 +149,14 @@ test.describe( 'Block Style Variations', () => { }, }, } ); - // The save button has been re-enabled. + + // Wait for the save button to be re-enabled. await expect( page .getByRole( 'region', { name: 'Editor top bar' } ) .getByRole( 'button', { name: 'Save' } ) - ).toBeEnabled(); + ).toBeVisible(); + // Second revision (current). await siteEditorBlockStyleVariations.saveRevision( stylesPostId, { blocks: { From 498d61836d40f9e21a9284755c61af614fadbb13 Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 28 Jun 2024 07:54:39 +1000 Subject: [PATCH 3/3] Revert selector name --- .../src/hooks/block-style-variation.js | 34 ++++++------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js index 7b80f495dce3d2..21259966d8a63b 100644 --- a/packages/block-editor/src/hooks/block-style-variation.js +++ b/packages/block-editor/src/hooks/block-style-variation.js @@ -19,7 +19,6 @@ import { globalStylesDataKey } from '../store/private-keys'; import { unlock } from '../lock-unlock'; const VARIATION_PREFIX = 'is-style-'; -const EMPTY_ARRAY = []; function getVariationMatches( className ) { if ( ! className ) { @@ -78,25 +77,13 @@ function OverrideStyles( { override } ) { * @return {JSX.Element|undefined} An array of new block variation overrides. */ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) { - const { overrides, getBlockStyles } = useSelect( ( select ) => { - const { getBlockName, getStyleOverrides } = unlock( - select( blockEditorStore ) - ); - const _overrides = getStyleOverrides(); - return { - overrides: _overrides?.length - ? _overrides.map( ( [ id, override ] ) => [ - id, - { - ...override, - blockName: getBlockName( override?.clientId ), - }, - ] ) - : EMPTY_ARRAY, + const { getBlockStyles, overrides } = useSelect( + ( select ) => ( { getBlockStyles: select( blocksStore ).getBlockStyles, - }; - }, [] ); - + overrides: unlock( select( blockEditorStore ) ).getStyleOverrides(), + } ), + [] + ); const { getBlockName } = useSelect( blockEditorStore ); const overridesWithConfig = useMemo( () => { @@ -109,16 +96,17 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) { if ( override?.variation && override?.clientId && - override?.blockName && /* * Because this component overwrites existing style overrides, * filter out any overrides that are already present in the store. */ ! overriddenClientIds.includes( override.clientId ) ) { + const blockName = getBlockName( override.clientId ); const configStyles = - config?.styles?.blocks?.[ override.blockName ] - ?.variations?.[ override.variation ]; + config?.styles?.blocks?.[ blockName ]?.variations?.[ + override.variation + ]; if ( configStyles ) { const variationConfig = { settings: config?.settings, @@ -127,7 +115,7 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) { // name is updated to match the instance specific class name. styles: { blocks: { - [ override.blockName ]: { + [ blockName ]: { variations: { [ `${ override.variation }-${ override.clientId }` ]: configStyles,