@wordpress/block-editor 15.19.1-next.v.202605131032.0 → 15.20.0

package/src/store/test/private-selectors.js

@@ -24,6 +24,8 @@ import {
 	getViewportModalClientIds,
 	isSectionBlock,
 	getParentSectionBlock,
+	getSelectedBlockStyleState,
+	isSelectedBlockStyleStateShownOnCanvas,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 import { deviceTypeKey } from '../private-keys';
@@ -72,6 +74,94 @@ describe( 'private selectors', () => {
 		} );
 	} );
 
+	describe( 'getSelectedBlockStyleState', () => {
+		it( 'returns default when the block has no selected state', () => {
+			const state = {};
+
+			expect( getSelectedBlockStyleState( state, 'client-1' ) ).toEqual( {
+				viewport: 'default',
+				pseudo: 'default',
+			} );
+		} );
+
+		it( 'returns the selected state for the block', () => {
+			const state = {
+				selectedBlockStyleState: {
+					clientId: 'client-1',
+					value: { viewport: 'mobile', pseudo: ':hover' },
+				},
+			};
+
+			expect( getSelectedBlockStyleState( state, 'client-1' ) ).toEqual( {
+				viewport: 'mobile',
+				pseudo: ':hover',
+			} );
+		} );
+
+		it( 'returns default when the selected state has no value', () => {
+			const state = {
+				selectedBlockStyleState: {
+					clientId: 'client-1',
+				},
+			};
+
+			expect( getSelectedBlockStyleState( state, 'client-1' ) ).toEqual( {
+				viewport: 'default',
+				pseudo: 'default',
+			} );
+		} );
+
+		it( 'returns default when another block has the selected state', () => {
+			const state = {
+				selectedBlockStyleState: {
+					clientId: 'client-2',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+			};
+
+			expect( getSelectedBlockStyleState( state, 'client-1' ) ).toEqual( {
+				viewport: 'default',
+				pseudo: 'default',
+			} );
+		} );
+	} );
+
+	describe( 'isSelectedBlockStyleStateShownOnCanvas', () => {
+		it( 'returns true when the block has no canvas preview state', () => {
+			const state = {};
+
+			expect(
+				isSelectedBlockStyleStateShownOnCanvas( state, 'client-1' )
+			).toBe( true );
+		} );
+
+		it( 'returns the canvas preview state for the block', () => {
+			const state = {
+				selectedBlockStyleState: {
+					clientId: 'client-1',
+					showStateOnCanvas: false,
+				},
+			};
+
+			expect(
+				isSelectedBlockStyleStateShownOnCanvas( state, 'client-1' )
+			).toBe( false );
+		} );
+
+		it( 'returns true when another block has canvas preview state', () => {
+			const state = {
+				selectedBlockStyleState: {
+					clientId: 'client-2',
+					showStateOnCanvas: false,
+				},
+			};
+
+			expect(
+				isSelectedBlockStyleStateShownOnCanvas( state, 'client-1' )
+			).toBe( true );
+		} );
+	} );
+
 	describe( 'isBlockSubtreeDisabled', () => {
 		const baseState = {
 			settings: {},

package/src/store/test/reducer.js

@@ -42,6 +42,7 @@ import {
 	editedContentOnlySection,
 	withDerivedBlockEditingModes,
 	viewportModalClientIds,
+	selectedBlockStyleState,
 } from '../reducer';
 import { getBlockOrder, getBlocks } from '../selectors';
 import { unlock } from '../../lock-unlock';
@@ -5815,6 +5816,368 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'selectedBlockStyleState', () => {
+		it( 'defaults to undefined', () => {
+			const state = selectedBlockStyleState( undefined, {} );
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'stores a selected viewport state for a block', () => {
+			const state = selectedBlockStyleState( undefined, {
+				type: 'SET_SELECTED_BLOCK_STYLE_STATE',
+				clientId: 'client-1',
+				value: { viewport: 'mobile' },
+			} );
+
+			expect( state ).toEqual( {
+				clientId: 'client-1',
+				showStateOnCanvas: true,
+				value: {
+					viewport: 'mobile',
+					pseudo: 'default',
+				},
+			} );
+		} );
+
+		it( 'stores a selected pseudo state for a block', () => {
+			const state = selectedBlockStyleState( undefined, {
+				type: 'SET_SELECTED_BLOCK_STYLE_STATE',
+				clientId: 'client-1',
+				value: { pseudo: ':hover' },
+			} );
+
+			expect( state ).toEqual( {
+				clientId: 'client-1',
+				showStateOnCanvas: true,
+				value: {
+					viewport: 'default',
+					pseudo: ':hover',
+				},
+			} );
+		} );
+
+		it( 'updates only the selected state type for the same block', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'mobile', pseudo: 'default' },
+				},
+				{
+					type: 'SET_SELECTED_BLOCK_STYLE_STATE',
+					clientId: 'client-1',
+					value: { pseudo: ':hover' },
+				}
+			);
+
+			expect( state ).toEqual( {
+				clientId: 'client-1',
+				showStateOnCanvas: true,
+				value: {
+					viewport: 'mobile',
+					pseudo: ':hover',
+				},
+			} );
+		} );
+
+		it( 'replaces the selected state when another block is selected', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'mobile', pseudo: ':hover' },
+				},
+				{
+					type: 'SET_SELECTED_BLOCK_STYLE_STATE',
+					clientId: 'client-2',
+					value: { pseudo: ':focus' },
+				}
+			);
+
+			expect( state ).toEqual( {
+				clientId: 'client-2',
+				showStateOnCanvas: true,
+				value: {
+					viewport: 'default',
+					pseudo: ':focus',
+				},
+			} );
+		} );
+
+		it( 'stores explicit defaults when both state types are default', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'mobile', pseudo: ':hover' },
+				},
+				{
+					type: 'SET_SELECTED_BLOCK_STYLE_STATE',
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: 'default' },
+				}
+			);
+
+			expect( state ).toEqual( {
+				clientId: 'client-1',
+				showStateOnCanvas: true,
+				value: {
+					viewport: 'default',
+					pseudo: 'default',
+				},
+			} );
+		} );
+
+		it( 'clears the selected state when clientId is missing', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+				{
+					type: 'SET_SELECTED_BLOCK_STYLE_STATE',
+					value: { pseudo: ':focus' },
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'clears the selected state when value is missing', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+				{
+					type: 'SET_SELECTED_BLOCK_STYLE_STATE',
+					clientId: 'client-1',
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'keeps the selected state when the same block is selected', () => {
+			const originalState = {
+				clientId: 'client-1',
+				value: { viewport: 'default', pseudo: ':hover' },
+			};
+			const state = selectedBlockStyleState( originalState, {
+				type: 'SELECT_BLOCK',
+				clientId: 'client-1',
+			} );
+
+			expect( state ).toBe( originalState );
+		} );
+
+		it( 'clears the selected state when another block is selected', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+				{
+					type: 'SELECT_BLOCK',
+					clientId: 'client-2',
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'keeps the selected state for selection changes in the same block', () => {
+			const originalState = {
+				clientId: 'client-1',
+				value: { viewport: 'default', pseudo: ':hover' },
+			};
+			const state = selectedBlockStyleState( originalState, {
+				type: 'SELECTION_CHANGE',
+				clientId: 'client-1',
+			} );
+
+			expect( state ).toBe( originalState );
+		} );
+
+		it( 'clears the selected state for selection changes in another block', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+				{
+					type: 'SELECTION_CHANGE',
+					clientId: 'client-2',
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'keeps the selected state when selection resets to the same block', () => {
+			const originalState = {
+				clientId: 'client-1',
+				value: { viewport: 'default', pseudo: ':hover' },
+			};
+			const state = selectedBlockStyleState( originalState, {
+				type: 'RESET_SELECTION',
+				selectionStart: { clientId: 'client-1' },
+			} );
+
+			expect( state ).toBe( originalState );
+		} );
+
+		it( 'clears the selected state when selection resets to another block', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+				{
+					type: 'RESET_SELECTION',
+					selectionStart: { clientId: 'client-2' },
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'clears the selected state when the selection is cleared', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+				{
+					type: 'CLEAR_SELECTED_BLOCK',
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'clears the selected state when multiple blocks are selected', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+				{
+					type: 'MULTI_SELECT',
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'clears the selected state when the block is removed', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+				{
+					type: 'REMOVE_BLOCKS',
+					clientIds: [ 'client-1' ],
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'clears the selected state when the block is replaced', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-2',
+					value: { viewport: 'default', pseudo: ':focus' },
+				},
+				{
+					type: 'REPLACE_BLOCKS',
+					clientIds: [ 'client-2' ],
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'clears the selected state when the block is missing after reset', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'default', pseudo: ':hover' },
+				},
+				{
+					type: 'RESET_BLOCKS',
+					blocks: [
+						{
+							clientId: 'client-2',
+							innerBlocks: [],
+						},
+					],
+				}
+			);
+
+			expect( state ).toBeUndefined();
+		} );
+
+		it( 'keeps the selected state when the block exists after reset', () => {
+			const originalState = {
+				clientId: 'client-2',
+				value: { viewport: 'default', pseudo: ':focus' },
+			};
+			const state = selectedBlockStyleState( originalState, {
+				type: 'RESET_BLOCKS',
+				blocks: [
+					{
+						clientId: 'client-2',
+						innerBlocks: [],
+					},
+				],
+			} );
+
+			expect( state ).toBe( originalState );
+		} );
+
+		it( 'stores whether canvas preview is enabled for the selected state', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					value: { viewport: 'mobile', pseudo: ':hover' },
+				},
+				{
+					type: 'SET_SELECTED_BLOCK_STYLE_STATE_CANVAS_PREVIEW',
+					clientId: 'client-1',
+					value: false,
+				}
+			);
+
+			expect( state ).toEqual( {
+				clientId: 'client-1',
+				showStateOnCanvas: false,
+				value: { viewport: 'mobile', pseudo: ':hover' },
+			} );
+		} );
+
+		it( 'keeps canvas preview when updating the selected state for the same block', () => {
+			const state = selectedBlockStyleState(
+				{
+					clientId: 'client-1',
+					showStateOnCanvas: false,
+					value: { viewport: 'mobile', pseudo: 'default' },
+				},
+				{
+					type: 'SET_SELECTED_BLOCK_STYLE_STATE',
+					clientId: 'client-1',
+					value: { pseudo: ':hover' },
+				}
+			);
+
+			expect( state ).toEqual( {
+				clientId: 'client-1',
+				showStateOnCanvas: false,
+				value: { viewport: 'mobile', pseudo: ':hover' },
+			} );
+		} );
+	} );
+
 	describe( 'viewportModalClientIds', () => {
 		it( 'should default to null', () => {
 			const state = viewportModalClientIds( undefined, {} );

package/src/store/utils.js

@@ -7,7 +7,10 @@ import { parse as grammarParse } from '@wordpress/block-serialization-default-pa
 /**
  * Internal dependencies
  */
-import { selectBlockPatternsKey } from './private-keys';
+import {
+	selectBlockPatternsKey,
+	userPatternCategoriesSelectKey,
+} from './private-keys';
 import { unlock } from '../lock-unlock';
 import { STORE_NAME } from './constants';
 import {
@@ -128,7 +131,8 @@ export const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
 export const getAllPatternsDependants = ( select ) => ( state ) => {
 	return [
 		state.settings.__experimentalBlockPatterns,
-		state.settings.__experimentalUserPatternCategories,
+		state.settings[ userPatternCategoriesSelectKey ]?.( select ) ??
+			state.settings.__experimentalUserPatternCategories,
 		state.settings.__experimentalReusableBlocks,
 		state.settings[ selectBlockPatternsKey ]?.( select ),
 		state.blockPatterns,

package/src/utils/color-values.js

@@ -0,0 +1,28 @@
+/**
+ * Extracts the palette slug from a style value for any preset type, supporting
+ * both the user preset format and the theme CSS-variable format:
+ *
+ * - User format:  `var:preset|<type>|slug`
+ * - Theme format: `var(--wp--preset--<type>--slug)`
+ *
+ * Returns `undefined` for plain values, non-strings, or any other
+ * unrecognised format.
+ *
+ * @param {*}                  rawValue Raw style value stored in the style object.
+ * @param {'color'|'gradient'} type     Preset type, e.g. `'color'` or `'gradient'`.
+ * @return {string|undefined} The palette slug, or undefined.
+ */
+export function extractPresetSlug( rawValue, type ) {
+	if ( typeof rawValue !== 'string' ) {
+		return undefined;
+	}
+	const userPrefix = `var:preset|${ type }|`;
+	if ( rawValue.startsWith( userPrefix ) ) {
+		return rawValue.slice( userPrefix.length );
+	}
+	const cssVarPrefix = `--wp--preset--${ type }--`;
+	const themeFormatMatch = rawValue.match(
+		new RegExp( `^var\\(${ cssVarPrefix }([^)]+)\\)$` )
+	);
+	return themeFormatMatch?.[ 1 ];
+}

package/src/utils/test/color-values.js

@@ -0,0 +1,78 @@
+/**
+ * Internal dependencies
+ */
+import { extractPresetSlug } from '../color-values';
+
+describe( 'extractPresetSlug', () => {
+	it( 'extracts the slug for a color from the user preset format', () => {
+		expect(
+			extractPresetSlug( 'var:preset|color|dark-text', 'color' )
+		).toBe( 'dark-text' );
+	} );
+
+	it( 'extracts the slug for a color from the theme CSS-var format', () => {
+		expect(
+			extractPresetSlug(
+				'var(--wp--preset--color--vivid-purple)',
+				'color'
+			)
+		).toBe( 'vivid-purple' );
+	} );
+
+	it( 'extracts the slug for a gradient from the user preset format', () => {
+		expect(
+			extractPresetSlug(
+				'var:preset|gradient|blush-bordeaux',
+				'gradient'
+			)
+		).toBe( 'blush-bordeaux' );
+	} );
+
+	it( 'extracts the slug for a gradient from the theme CSS-var format', () => {
+		expect(
+			extractPresetSlug(
+				'var(--wp--preset--gradient--blush-bordeaux)',
+				'gradient'
+			)
+		).toBe( 'blush-bordeaux' );
+	} );
+
+	it( 'handles slugs that contain hyphens for any type', () => {
+		expect(
+			extractPresetSlug(
+				'var:preset|gradient|my-custom-gradient-100',
+				'gradient'
+			)
+		).toBe( 'my-custom-gradient-100' );
+		expect(
+			extractPresetSlug(
+				'var(--wp--preset--gradient--my-custom-gradient-100)',
+				'gradient'
+			)
+		).toBe( 'my-custom-gradient-100' );
+	} );
+
+	it( 'returns undefined for a non-matching type', () => {
+		expect(
+			extractPresetSlug( 'var:preset|color|dark-text', 'gradient' )
+		).toBeUndefined();
+		expect(
+			extractPresetSlug(
+				'var(--wp--preset--color--vivid-purple)',
+				'gradient'
+			)
+		).toBeUndefined();
+	} );
+
+	it( 'returns undefined for non-string values', () => {
+		expect( extractPresetSlug( undefined, 'gradient' ) ).toBeUndefined();
+		expect( extractPresetSlug( null, 'gradient' ) ).toBeUndefined();
+		expect( extractPresetSlug( 42, 'gradient' ) ).toBeUndefined();
+	} );
+
+	it( 'returns undefined for a theme var missing its closing parenthesis', () => {
+		expect(
+			extractPresetSlug( 'var(--wp--preset--gradient--oops', 'gradient' )
+		).toBeUndefined();
+	} );
+} );