@wordpress/block-library 9.48.1 → 10.0.0

package/src/tabs/view.js

@@ -8,44 +8,8 @@ import {
 	withSyncEvent,
 } from '@wordpress/interactivity';
 
-function createReadOnlyProxy( obj ) {
-	const arrayMutationMethods = new Set( [
-		'push',
-		'pop',
-		'shift',
-		'unshift',
-		'splice',
-		'sort',
-		'reverse',
-		'copyWithin',
-		'fill',
-	] );
-
-	return new Proxy( obj, {
-		get( target, prop ) {
-			// If accessing an array mutation method, return a no-op function.
-			if ( Array.isArray( target ) && arrayMutationMethods.has( prop ) ) {
-				return () => {};
-			}
-
-			const value = target[ prop ];
-			if ( typeof value === 'object' && value !== null ) {
-				return createReadOnlyProxy( value );
-			}
-			return value;
-		},
-		set() {
-			return false;
-		},
-		deleteProperty() {
-			return false;
-		},
-	} );
-}
-
-// Private store for internal tabs functionality and security.
-const { actions: privateActions, state: privateState } = store(
-	'core/tabs/private',
+const { actions, state } = store(
+	'core/tabs',
 	{
 		state: {
 			/**
@@ -56,7 +20,7 @@ const { actions: privateActions, state: privateState } = store(
 			get tabsList() {
 				const context = getContext();
 				const tabsId = context?.tabsId;
-				const tabsList = privateState[ tabsId ];
+				const tabsList = state[ tabsId ];
 				return tabsList;
 			},
 			/**
@@ -71,8 +35,8 @@ const { actions: privateActions, state: privateState } = store(
 				if ( ! tabId ) {
 					return null;
 				}
-				const { tabsList } = privateState;
-				const tabIndex = tabsList.findIndex( ( t ) => t.id === tabId );
+				const { tabsList } = state;
+				const tabIndex = tabsList.findIndex( ( t ) => t === tabId );
 				return tabIndex;
 			},
 			/**
@@ -82,7 +46,7 @@ const { actions: privateActions, state: privateState } = store(
 			 */
 			get isActiveTab() {
 				const { activeTabIndex } = getContext();
-				const { tabIndex } = privateState;
+				const { tabIndex } = state;
 				return activeTabIndex === tabIndex;
 			},
 			/**
@@ -92,7 +56,7 @@ const { actions: privateActions, state: privateState } = store(
 			 * @type {number}
 			 */
 			get tabIndexAttribute() {
-				return privateState.isActiveTab ? 0 : -1;
+				return state.isActiveTab ? 0 : -1;
 			},
 		},
 		actions: {
@@ -102,26 +66,18 @@ const { actions: privateActions, state: privateState } = store(
 			 * @param {KeyboardEvent} event The keydown event.
 			 */
 			handleTabKeyDown: withSyncEvent( ( event ) => {
-				const context = getContext();
-				const { isVertical } = context;
-				const { tabIndex } = privateState;
+				const { tabIndex } = state;
 
 				if ( tabIndex === null ) {
 					return;
 				}
 
-				if ( event.key === 'ArrowRight' && ! isVertical ) {
-					event.preventDefault();
-					privateActions.moveFocus( tabIndex + 1 );
-				} else if ( event.key === 'ArrowLeft' && ! isVertical ) {
+				if ( event.key === 'ArrowRight' ) {
 					event.preventDefault();
-					privateActions.moveFocus( tabIndex - 1 );
-				} else if ( event.key === 'ArrowDown' && isVertical ) {
+					actions.moveFocus( tabIndex + 1 );
+				} else if ( event.key === 'ArrowLeft' ) {
 					event.preventDefault();
-					privateActions.moveFocus( tabIndex + 1 );
-				} else if ( event.key === 'ArrowUp' && isVertical ) {
-					event.preventDefault();
-					privateActions.moveFocus( tabIndex - 1 );
+					actions.moveFocus( tabIndex - 1 );
 				}
 			} ),
 			/**
@@ -132,9 +88,9 @@ const { actions: privateActions, state: privateState } = store(
 			handleTabClick: withSyncEvent( ( event ) => {
 				event.preventDefault();
 
-				const { tabIndex } = privateState;
+				const { tabIndex } = state;
 				if ( tabIndex !== null ) {
-					privateActions.setActiveTab( tabIndex );
+					actions.setActiveTab( tabIndex );
 				}
 			} ),
 			/**
@@ -143,7 +99,7 @@ const { actions: privateActions, state: privateState } = store(
 			 * @param {number} tabIndex The index to move focus to.
 			 */
 			moveFocus: ( tabIndex ) => {
-				const { tabsList } = privateState;
+				const { tabsList } = state;
 
 				if ( ! tabsList || tabsList.length === 0 ) {
 					return;
@@ -156,20 +112,20 @@ const { actions: privateActions, state: privateState } = store(
 					newIndex = 0;
 				}
 
-				const tabId = tabsList[ newIndex ].id;
+				const tabId = tabsList[ newIndex ];
 				const tabElement = document.getElementById( 'tab__' + tabId );
 				if ( tabElement ) {
 					tabElement.focus();
 				}
 			},
 			/**
-			 * Sets the active tab index (internal implementation).
+			 * Sets the active tab index.
 			 *
 			 * @param {number}  tabIndex    The index of the active tab.
 			 * @param {boolean} scrollToTab Whether to scroll to the tab element.
 			 */
 			setActiveTab: ( tabIndex, scrollToTab = false ) => {
-				const { tabsList } = privateState;
+				const { tabsList } = state;
 
 				if ( ! tabsList || tabsList.length === 0 ) {
 					return;
@@ -186,7 +142,7 @@ const { actions: privateActions, state: privateState } = store(
 				context.activeTabIndex = newIndex;
 
 				if ( scrollToTab ) {
-					const tabId = tabsList[ newIndex ].id;
+					const tabId = tabsList[ newIndex ];
 					const tabElement = document.getElementById( tabId );
 					if ( tabElement ) {
 						setTimeout( () => {
@@ -202,17 +158,17 @@ const { actions: privateActions, state: privateState } = store(
 			 *
 			 */
 			onTabsInit: () => {
-				const { tabsList } = privateState;
+				const { tabsList } = state;
 				if ( tabsList.length === 0 ) {
 					return;
 				}
 
 				const { hash } = window.location;
 				const tabId = hash.replace( '#', '' );
-				const tabIndex = tabsList.findIndex( ( t ) => t.id === tabId );
+				const tabIndex = tabsList.findIndex( ( t ) => t === tabId );
 				// Check if tabIndex is a positive number and if so we'll auto activate that tab.
 				if ( tabIndex >= 0 ) {
-					privateActions.setActiveTab( tabIndex, true );
+					actions.setActiveTab( tabIndex, true );
 				}
 			},
 		},
@@ -221,47 +177,3 @@ const { actions: privateActions, state: privateState } = store(
 		lock: true,
 	}
 );
-
-// Public store for third-party extensibility.
-store( 'core/tabs', {
-	state: {
-		/**
-		 * Gets a contextually aware list of tabs for the current tabs block.
-		 * Public API for third-party access.
-		 *
-		 * @type {Array}
-		 */
-		get tabsList() {
-			return createReadOnlyProxy( privateState.tabsList );
-		},
-		/**
-		 * Gets the index of the active tab element whether it
-		 * is a tab label or tab panel.
-		 *
-		 * @type {number|null}
-		 */
-		get tabIndex() {
-			return privateState.tabIndex;
-		},
-		/**
-		 * Whether the tab panel or tab label is the active tab.
-		 *
-		 * @type {boolean}
-		 */
-		get isActiveTab() {
-			return privateState.isActiveTab;
-		},
-	},
-	actions: {
-		/**
-		 * Sets the active tab index.
-		 * Public API for third-party programmatic tab activation.
-		 *
-		 * @param {number}  tabIndex    The index of the active tab.
-		 * @param {boolean} scrollToTab Whether to scroll to the tab element.
-		 */
-		setActiveTab: ( tabIndex, scrollToTab = false ) => {
-			privateActions.setActiveTab( tabIndex, scrollToTab );
-		},
-	},
-} );

package/src/template-part/edit/advanced-controls.js

@@ -57,7 +57,6 @@ export function TemplatePartAdvancedControls( {
 			{ isEntityAvailable && (
 				<>
 					<TextControl
-						__next40pxDefaultSize
 						label={ __( 'Title' ) }
 						value={ title }
 						onChange={ ( value ) => {

package/src/template-part/edit/title-modal.js

@@ -39,7 +39,6 @@ export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
 						value={ title }
 						onChange={ setTitle }
 						placeholder={ __( 'Custom Template Part' ) }
-						__next40pxDefaultSize
 					/>
 					<HStack justify="right">
 						<Button

package/src/utils/style-state.js

@@ -0,0 +1,151 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { cleanEmptyObject, getStyleForState, setStyleForState } = unlock(
+	blockEditorPrivateApis
+);
+
+function getStateStyle( style, selectedState ) {
+	return getStyleForState( style, selectedState ) || {};
+}
+
+function getMappedDimensions( dimensions, dimensionKeyMap = {} ) {
+	return Object.fromEntries(
+		Object.entries( dimensions ).map( ( [ key, value ] ) => [
+			dimensionKeyMap[ key ] || key,
+			value,
+		] )
+	);
+}
+
+function getControlledDimensions( dimensions, dimensionKeys ) {
+	if ( ! dimensionKeys ) {
+		return dimensions;
+	}
+
+	return Object.fromEntries(
+		dimensionKeys.map( ( key ) => [ key, dimensions[ key ] ] )
+	);
+}
+
+export function getStyleStateKey( selectedState ) {
+	return [
+		selectedState?.viewport || 'default',
+		selectedState?.pseudo || 'default',
+	].join( ':' );
+}
+
+export function getStateDimensions( style, selectedState ) {
+	return getStateStyle( style, selectedState )?.dimensions || {};
+}
+
+export function getActiveDimensionValue( options = {} ) {
+	const {
+		attributes = {},
+		style = attributes?.style,
+		selectedState,
+		hasSelectedStyleState,
+		attributeKey,
+		styleKey = attributeKey,
+		rootValue,
+	} = options;
+
+	if ( hasSelectedStyleState ) {
+		return getStateDimensions( style, selectedState )?.[ styleKey ];
+	}
+
+	if ( Object.hasOwn( options, 'rootValue' ) ) {
+		return rootValue;
+	}
+
+	return attributes?.[ attributeKey ];
+}
+
+export function setStateDimensions( style, selectedState, nextDimensions ) {
+	const stateStyle = getStateStyle( style, selectedState );
+
+	return setStyleForState(
+		style,
+		selectedState,
+		cleanEmptyObject( {
+			...stateStyle,
+			dimensions: cleanEmptyObject( {
+				...stateStyle?.dimensions,
+				...nextDimensions,
+			} ),
+		} )
+	);
+}
+
+export function getDimensionUpdateAttributes( {
+	style,
+	selectedState,
+	hasSelectedStyleState,
+	nextDimensions,
+	dimensionKeyMap,
+	dimensionKeys,
+} ) {
+	const controlledDimensions = getControlledDimensions(
+		nextDimensions,
+		dimensionKeys
+	);
+
+	if ( ! hasSelectedStyleState ) {
+		return controlledDimensions;
+	}
+
+	return {
+		style: setStateDimensions(
+			style,
+			selectedState,
+			getMappedDimensions( controlledDimensions, dimensionKeyMap )
+		),
+	};
+}
+
+export function resetDimensions( style, keys ) {
+	const dimensionsReset = Object.fromEntries(
+		keys.map( ( key ) => [ key, undefined ] )
+	);
+
+	return cleanEmptyObject( {
+		...style,
+		dimensions: cleanEmptyObject( {
+			...style?.dimensions,
+			...dimensionsReset,
+		} ),
+	} );
+}
+
+export function resetStateDimensions( style, selectedState, keys ) {
+	return setStyleForState(
+		style,
+		selectedState,
+		resetDimensions( getStateStyle( style, selectedState ), keys )
+	);
+}
+
+export function getDimensionResetAttributes( {
+	attributes = {},
+	style = attributes?.style,
+	selectedState,
+	hasSelectedStyleState,
+	keys,
+	defaultAttributes = {},
+} ) {
+	return {
+		...( hasSelectedStyleState
+			? {}
+			: { ...attributes, ...defaultAttributes } ),
+		style: hasSelectedStyleState
+			? resetStateDimensions( style, selectedState, keys )
+			: resetDimensions( style, keys ),
+	};
+}

package/src/utils/test/style-state.js

@@ -0,0 +1,307 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getActiveDimensionValue,
+	getDimensionResetAttributes,
+	getDimensionUpdateAttributes,
+	getStyleStateKey,
+	resetDimensions,
+	resetStateDimensions,
+	setStateDimensions,
+} from '../style-state';
+
+describe( 'style state dimension utilities', () => {
+	it( 'resets root dimensions without changing viewport dimensions', () => {
+		const style = {
+			dimensions: {
+				aspectRatio: '1',
+				minHeight: '40px',
+			},
+			'@mobile': {
+				dimensions: {
+					aspectRatio: '2',
+				},
+			},
+		};
+
+		expect( resetDimensions( style, [ 'aspectRatio' ] ) ).toEqual( {
+			dimensions: {
+				minHeight: '40px',
+			},
+			'@mobile': {
+				dimensions: {
+					aspectRatio: '2',
+				},
+			},
+		} );
+	} );
+
+	it( 'resets dimensions only for the selected viewport state', () => {
+		const style = {
+			dimensions: {
+				aspectRatio: '1',
+			},
+			'@mobile': {
+				dimensions: {
+					aspectRatio: '2',
+					width: '200px',
+				},
+			},
+			'@tablet': {
+				dimensions: {
+					aspectRatio: '3',
+				},
+			},
+		};
+
+		expect(
+			resetStateDimensions(
+				style,
+				{ viewport: '@mobile', pseudo: 'default' },
+				[ 'aspectRatio' ]
+			)
+		).toEqual( {
+			dimensions: {
+				aspectRatio: '1',
+			},
+			'@mobile': {
+				dimensions: {
+					width: '200px',
+				},
+			},
+			'@tablet': {
+				dimensions: {
+					aspectRatio: '3',
+				},
+			},
+		} );
+	} );
+
+	it( 'sets dimensions only for the selected viewport state', () => {
+		const style = {
+			'@mobile': {
+				dimensions: {
+					width: '200px',
+				},
+			},
+			'@tablet': {
+				dimensions: {
+					width: '300px',
+				},
+			},
+		};
+
+		expect(
+			setStateDimensions(
+				style,
+				{ viewport: '@mobile', pseudo: 'default' },
+				{ height: '100px' }
+			)
+		).toEqual( {
+			'@mobile': {
+				dimensions: {
+					height: '100px',
+					width: '200px',
+				},
+			},
+			'@tablet': {
+				dimensions: {
+					width: '300px',
+				},
+			},
+		} );
+	} );
+
+	it( 'generates a stable key for selected style states', () => {
+		expect(
+			getStyleStateKey( { viewport: '@mobile', pseudo: ':hover' } )
+		).toBe( '@mobile::hover' );
+		expect( getStyleStateKey( undefined ) ).toBe( 'default:default' );
+	} );
+
+	it( 'reads root attribute dimensions for the default state', () => {
+		expect(
+			getActiveDimensionValue( {
+				attributes: {
+					width: '200px',
+				},
+				attributeKey: 'width',
+				hasSelectedStyleState: false,
+			} )
+		).toBe( '200px' );
+	} );
+
+	it( 'reads mapped dimensions for selected style states', () => {
+		expect(
+			getActiveDimensionValue( {
+				attributes: {
+					scale: 'cover',
+					style: {
+						'@mobile': {
+							dimensions: {
+								objectFit: 'contain',
+							},
+						},
+					},
+				},
+				selectedState: { viewport: '@mobile', pseudo: 'default' },
+				hasSelectedStyleState: true,
+				attributeKey: 'scale',
+				styleKey: 'objectFit',
+			} )
+		).toBe( 'contain' );
+	} );
+
+	it( 'maps root dimension attributes to selected style state dimensions', () => {
+		expect(
+			getDimensionUpdateAttributes( {
+				style: {
+					'@mobile': {
+						dimensions: {
+							width: '200px',
+						},
+					},
+				},
+				selectedState: { viewport: '@mobile', pseudo: 'default' },
+				hasSelectedStyleState: true,
+				nextDimensions: {
+					scale: 'contain',
+				},
+				dimensionKeyMap: {
+					scale: 'objectFit',
+				},
+			} )
+		).toEqual( {
+			style: {
+				'@mobile': {
+					dimensions: {
+						objectFit: 'contain',
+						width: '200px',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'clears omitted controlled root dimension attributes', () => {
+		expect(
+			getDimensionUpdateAttributes( {
+				hasSelectedStyleState: false,
+				nextDimensions: {
+					aspectRatio: '16/9',
+					width: '200px',
+					scale: 'cover',
+				},
+				dimensionKeys: [ 'aspectRatio', 'width', 'height', 'scale' ],
+			} )
+		).toEqual( {
+			aspectRatio: '16/9',
+			width: '200px',
+			height: undefined,
+			scale: 'cover',
+		} );
+	} );
+
+	it( 'clears omitted controlled selected style state dimensions', () => {
+		expect(
+			getDimensionUpdateAttributes( {
+				style: {
+					'@mobile': {
+						dimensions: {
+							height: '100px',
+							width: '200px',
+						},
+					},
+				},
+				selectedState: { viewport: '@mobile', pseudo: 'default' },
+				hasSelectedStyleState: true,
+				nextDimensions: {
+					aspectRatio: '16/9',
+					width: '200px',
+					scale: 'cover',
+				},
+				dimensionKeyMap: {
+					scale: 'objectFit',
+				},
+				dimensionKeys: [ 'aspectRatio', 'width', 'height', 'scale' ],
+			} )
+		).toEqual( {
+			style: {
+				'@mobile': {
+					dimensions: {
+						aspectRatio: '16/9',
+						objectFit: 'cover',
+						width: '200px',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'resets selected style state dimensions without root attributes', () => {
+		expect(
+			getDimensionResetAttributes( {
+				attributes: {
+					width: '200px',
+					style: {
+						dimensions: {
+							width: '300px',
+						},
+						'@mobile': {
+							dimensions: {
+								width: '400px',
+							},
+						},
+					},
+				},
+				selectedState: { viewport: '@mobile', pseudo: 'default' },
+				hasSelectedStyleState: true,
+				keys: [ 'width' ],
+				defaultAttributes: {
+					width: undefined,
+				},
+			} )
+		).toEqual( {
+			style: {
+				dimensions: {
+					width: '300px',
+				},
+			},
+		} );
+	} );
+
+	it( 'resets default dimensions and root attributes', () => {
+		expect(
+			getDimensionResetAttributes( {
+				attributes: {
+					width: '200px',
+					style: {
+						dimensions: {
+							width: '300px',
+						},
+						'@mobile': {
+							dimensions: {
+								width: '400px',
+							},
+						},
+					},
+				},
+				hasSelectedStyleState: false,
+				keys: [ 'width' ],
+				defaultAttributes: {
+					width: undefined,
+				},
+			} )
+		).toEqual( {
+			width: undefined,
+			style: {
+				'@mobile': {
+					dimensions: {
+						width: '400px',
+					},
+				},
+			},
+		} );
+	} );
+} );