@wordpress/block-library 9.48.1 → 10.0.1-next.v.202606191442.0

package/src/tabs/use-tab-list-items-sync.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Keep the tab-list block's `tabs` attribute in sync with the tab-panel blocks.
+ *
+ * Whenever the list of core/tab-panel blocks changes (add, remove, reorder, or
+ * label edit), this hook updates the `tabs` attribute on the core/tab-list
+ * block so that save.js can render the correct buttons.
+ *
+ * @param {Object}      props
+ * @param {Array}       props.tabPanels       Raw core/tab-panel block objects.
+ * @param {string|null} props.tabListClientId Client ID of the core/tab-list block.
+ */
+export default function useTabListItemsSync( { tabPanels, tabListClientId } ) {
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	const prevTabsRef = useRef( null );
+
+	useEffect( () => {
+		if ( ! tabListClientId ) {
+			return;
+		}
+
+		const newTabs = tabPanels.map( ( tab ) => ( {
+			label: tab.attributes.label || '',
+		} ) );
+
+		// Only update if tabs actually changed to avoid unnecessary re-renders.
+		const serialized = JSON.stringify( newTabs );
+		if ( serialized === prevTabsRef.current ) {
+			return;
+		}
+		prevTabsRef.current = serialized;
+
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabListClientId, { tabs: newTabs } );
+	}, [
+		tabPanels,
+		tabListClientId,
+		updateBlockAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+}

package/src/tabs/view.js

@@ -102,24 +102,16 @@ const { actions: privateActions, state: privateState } = store(
 			 * @param {KeyboardEvent} event The keydown event.
 			 */
 			handleTabKeyDown: withSyncEvent( ( event ) => {
-				const context = getContext();
-				const { isVertical } = context;
 				const { tabIndex } = privateState;
 
 				if ( tabIndex === null ) {
 					return;
 				}
 
-				if ( event.key === 'ArrowRight' && ! isVertical ) {
-					event.preventDefault();
-					privateActions.moveFocus( tabIndex + 1 );
-				} else if ( event.key === 'ArrowLeft' && ! isVertical ) {
-					event.preventDefault();
-					privateActions.moveFocus( tabIndex - 1 );
-				} else if ( event.key === 'ArrowDown' && isVertical ) {
+				if ( event.key === 'ArrowRight' ) {
 					event.preventDefault();
 					privateActions.moveFocus( tabIndex + 1 );
-				} else if ( event.key === 'ArrowUp' && isVertical ) {
+				} else if ( event.key === 'ArrowLeft' ) {
 					event.preventDefault();
 					privateActions.moveFocus( tabIndex - 1 );
 				}

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',
+					},
+				},
+			},
+		} );
+	} );
+} );

package/babel-plugin.cjs

@@ -1,150 +0,0 @@
-/**
- * External dependencies
- */
-const fs = require( 'fs' );
-
-/**
- * Creates a babel plugin that replaces experimental block imports with
- * null variable declarations.
- *
- * For example:
- *     import * as experimentalBlock from "./experimental-block";
- * On build becomes:
- *     const experimentalBlock = null;
- *
- * This ensures the dead code elimination removes the experimental blocks modules
- * during the production build.
- *
- * For more context, see https://github.com/WordPress/gutenberg/pull/40655/
- *
- * @param {Function} shouldProcessImport Optional callback to decide whether a given import should be processed.
- * @param {boolean}  isGutenbergPlugin   Whether to run the plugin.
- */
-function createBabelPlugin( shouldProcessImport, isGutenbergPlugin ) {
-	if ( ! shouldProcessImport ) {
-		shouldProcessImport = isImportDeclarationAnExperimentalBlock;
-	}
-	if ( isGutenbergPlugin === undefined ) {
-		// process.env.npm_package_config_IS_GUTENBERG_PLUGIN is a string, not a boolean
-		isGutenbergPlugin =
-			String( process.env.npm_package_config_IS_GUTENBERG_PLUGIN ) ===
-			'true';
-	}
-	/**
-	 * The babel plugin created by createBabelPlugin.
-	 *
-	 * @see createBabelPlugin.
-	 * @param {import('@babel/core')} babel Current Babel object.
-	 * @return {import('@babel/core').PluginObj} Babel plugin object.
-	 */
-	return function babelPlugin( { types: t } ) {
-		if ( isGutenbergPlugin ) {
-			return {};
-		}
-
-		return {
-			visitor: {
-				ImportDeclaration( path ) {
-					// Only process the experimental blocks.
-					if ( ! shouldProcessImport( path ) ) {
-						return;
-					}
-
-					// Get the imported variable name.
-					const namespaceSpecifier = path.node.specifiers.find(
-						( specifier ) =>
-							specifier.type === 'ImportNamespaceSpecifier'
-					);
-					const { name } = namespaceSpecifier.local;
-
-					path.replaceWith(
-						t.variableDeclaration( 'const', [
-							t.variableDeclarator(
-								t.identifier( name ),
-								t.nullLiteral()
-							),
-						] )
-					);
-				},
-			},
-		};
-	};
-}
-
-/**
- * Tests whether an import declaration refers to an experimental block.
- * In broad strokes, it's a block that says "__experimental" in its block.json file.
- * For details, check the implementation.
- *
- * @param {Object} path Babel.js AST path representing the import declaration,
- * @return {boolean | undefined} Whether the import represents an experimental block.
- */
-function isImportDeclarationAnExperimentalBlock( path ) {
-	// Only look for wildcard imports like import * as a from "source":
-	const { node } = path;
-	const namespaceSpecifier = node.specifiers.find(
-		( specifier ) => specifier.type === 'ImportNamespaceSpecifier'
-	);
-	if ( ! namespaceSpecifier || ! namespaceSpecifier.local ) {
-		return;
-	}
-
-	// Only look for imports starting with ./ and without additional slashes in the path.
-	const importedPath = node.source.value;
-	if (
-		! importedPath ||
-		! importedPath.startsWith( './' ) ||
-		importedPath.split( '/' ).length > 2
-	) {
-		return false;
-	}
-
-	// Check the imported directory has a related block.json file.
-	const blockJsonPath = __dirname + '/src/' + importedPath + '/block.json';
-	if ( ! fs.existsSync( blockJsonPath ) ) {
-		return false;
-	}
-
-	// Read the block.json file related to this block
-	const { name } = namespaceSpecifier.local;
-	let blockJSONBuffer;
-	try {
-		blockJSONBuffer = fs.readFileSync( blockJsonPath );
-	} catch ( e ) {
-		process.stderr.write(
-			'Could not read block.json for the module "' +
-				importedPath +
-				'" imported under name "' +
-				name +
-				'" from path "' +
-				blockJsonPath +
-				'"'
-		);
-		throw e;
-	}
-	let blockJSON;
-	try {
-		blockJSON = JSON.parse( blockJSONBuffer );
-	} catch ( e ) {
-		process.stderr.write(
-			'Could not parse block.json for the module "' +
-				importedPath +
-				'" imported under name "' +
-				name +
-				'" read from path "' +
-				blockJsonPath +
-				'"'
-		);
-		throw e;
-	}
-
-	return (
-		blockJSON &&
-		'__experimental' in blockJSON &&
-		blockJSON.__experimental !== false
-	);
-}
-
-const babelPlugin = createBabelPlugin();
-babelPlugin.createBabelPlugin = createBabelPlugin;
-module.exports = babelPlugin;