@wordpress/block-editor 15.6.1-next.36001005c.0 → 15.6.2

package/src/hooks/allowed-blocks.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { hasBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport, getBlockType } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -72,3 +72,91 @@ addFilter(
 	'core/allowedBlocks/attribute',
 	addAttribute
 );
+
+/**
+ * Add transforms to preserve allowedBlocks on block transformations.
+ *
+ * @param {Object} result  The transformed block.
+ * @param {Array}  source  Original blocks transformed.
+ * @param {number} index   Index of the transformed block.
+ * @param {Array}  results All blocks that resulted from the transformation.
+ * @return {Object} Modified transformed block.
+ */
+export function addTransforms( result, source, index, results ) {
+	if ( ! hasBlockSupport( result.name, 'allowedBlocks' ) ) {
+		return result;
+	}
+
+	// If the condition verifies we are probably in the presence of a wrapping transform
+	// e.g: nesting paragraphs in a group or columns and in that case the attribute should not be kept.
+	if (
+		source.length !== 1 &&
+		results.length === 1 &&
+		result.innerBlocks.length === source.length
+	) {
+		return result;
+	}
+
+	// If we are transforming one block to multiple blocks or multiple blocks to one block,
+	// we ignore the attribute during the transform.
+	if (
+		( results.length === 1 && source.length > 1 ) ||
+		( results.length > 1 && source.length === 1 )
+	) {
+		return result;
+	}
+
+	// If we are transforming multiple blocks to multiple blocks with different counts,
+	// we ignore the attribute during the transform.
+	if (
+		results.length > 1 &&
+		source.length > 1 &&
+		results.length !== source.length
+	) {
+		return result;
+	}
+
+	// If the target block already has allowedBlocks, we don't need to preserve
+	// the source allowedBlocks.
+	if ( result.attributes.allowedBlocks ) {
+		return result;
+	}
+
+	const sourceAllowedBlocks = source[ index ]?.attributes?.allowedBlocks;
+
+	if ( ! sourceAllowedBlocks ) {
+		return result;
+	}
+
+	const blockType = getBlockType( result.name );
+	const destinationAllowedBlocks = blockType?.allowedBlocks || [];
+
+	if ( ! destinationAllowedBlocks.length ) {
+		return {
+			...result,
+			attributes: {
+				...result.attributes,
+				allowedBlocks: sourceAllowedBlocks,
+			},
+		};
+	}
+
+	// Filter out any source allowed blocks that are not defined in the destination allowed blocks.
+	const filteredSourceAllowedBlocks = sourceAllowedBlocks.filter( ( block ) =>
+		destinationAllowedBlocks.includes( block )
+	);
+
+	return {
+		...result,
+		attributes: {
+			...result.attributes,
+			allowedBlocks: filteredSourceAllowedBlocks,
+		},
+	};
+}
+
+addFilter(
+	'blocks.switchToBlockType.transformedBlock',
+	'core/allowedBlocks/addTransforms',
+	addTransforms
+);

package/src/hooks/block-bindings.js

@@ -15,11 +15,10 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalVStack as VStack,
-	Modal,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { useContext, useState } from '@wordpress/element';
+import { useContext } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
 /**
@@ -63,12 +62,7 @@ const useToolsPanelDropdownMenuProps = () => {
 		: {};
 };
 
-function BlockBindingsPanelMenuContent( {
-	attribute,
-	binding,
-	sources,
-	onOpenModal,
-} ) {
+function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 	const { clientId } = useBlockEditContext();
 	const { updateBlockBindings } = useBlockBindingsUtils();
 	const isMobile = useViewportMatch( 'medium', '<' );
@@ -99,105 +93,85 @@ function BlockBindingsPanelMenuContent( {
 					return null;
 				}
 
-				if ( source.mode === 'dropdown' ) {
-					return (
-						<Menu
-							key={ sourceKey }
-							placement={
-								isMobile ? 'bottom-start' : 'left-start'
-							}
-						>
-							<Menu.SubmenuTriggerItem>
-								<Menu.ItemLabel>
-									{ source.label }
-								</Menu.ItemLabel>
-							</Menu.SubmenuTriggerItem>
-							<Menu.Popover gutter={ 8 }>
-								<Menu.Group>
-									{ sourceDataItems.map( ( item ) => {
-										const itemBindings = {
-											source: sourceKey,
-											args: item?.args || {
-												key: item.key,
-											},
-										};
-										const values = source.getValues( {
-											select,
-											context: blockContext,
-											bindings: {
-												[ attribute ]: itemBindings,
-											},
-										} );
-										return (
-											<Menu.CheckboxItem
-												key={
-													sourceKey +
-														JSON.stringify(
-															item.args
-														) || item.key
-												}
-												onChange={ () => {
-													const isCurrentlySelected =
-														fastDeepEqual(
-															binding?.args,
-															item.args
-														) ??
-														// Deprecate key dependency in 7.0.
-														item.key ===
-															binding?.args?.key;
-
-													if ( isCurrentlySelected ) {
-														// Unset if the same item is selected again.
-														updateBlockBindings( {
-															[ attribute ]:
-																undefined,
-														} );
-													} else {
-														updateBlockBindings( {
-															[ attribute ]:
-																itemBindings,
-														} );
-													}
-												} }
-												name={ attribute + '-binding' }
-												value={ values[ attribute ] }
-												checked={
+				return (
+					<Menu
+						key={ sourceKey }
+						placement={ isMobile ? 'bottom-start' : 'left-start' }
+					>
+						<Menu.SubmenuTriggerItem>
+							<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>
+						</Menu.SubmenuTriggerItem>
+						<Menu.Popover gutter={ 8 }>
+							<Menu.Group>
+								{ sourceDataItems.map( ( item ) => {
+									const itemBindings = {
+										source: sourceKey,
+										args: item?.args || {
+											key: item.key,
+										},
+									};
+									const values = source.getValues( {
+										select,
+										context: blockContext,
+										bindings: {
+											[ attribute ]: itemBindings,
+										},
+									} );
+									return (
+										<Menu.CheckboxItem
+											key={
+												sourceKey +
+													JSON.stringify(
+														item.args
+													) || item.key
+											}
+											onChange={ () => {
+												const isCurrentlySelected =
 													fastDeepEqual(
 														binding?.args,
 														item.args
 													) ??
 													// Deprecate key dependency in 7.0.
 													item.key ===
-														binding?.args?.key
+														binding?.args?.key;
+
+												if ( isCurrentlySelected ) {
+													// Unset if the same item is selected again.
+													updateBlockBindings( {
+														[ attribute ]:
+															undefined,
+													} );
+												} else {
+													updateBlockBindings( {
+														[ attribute ]:
+															itemBindings,
+													} );
 												}
-											>
-												<Menu.ItemLabel>
-													{ item?.label }
-												</Menu.ItemLabel>
-												<Menu.ItemHelpText>
-													{ values[ attribute ] }
-												</Menu.ItemHelpText>
-											</Menu.CheckboxItem>
-										);
-									} ) }
-								</Menu.Group>
-							</Menu.Popover>
-						</Menu>
-					);
-				}
-
-				if ( source.mode === 'modal' ) {
-					return (
-						<Menu.Item
-							key={ sourceKey }
-							onClick={ () => onOpenModal( { sourceKey } ) }
-						>
-							<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>
-						</Menu.Item>
-					);
-				}
-
-				return null;
+											} }
+											name={ attribute + '-binding' }
+											value={ values[ attribute ] }
+											checked={
+												fastDeepEqual(
+													binding?.args,
+													item.args
+												) ??
+												// Deprecate key dependency in 7.0.
+												item.key === binding?.args?.key
+											}
+										>
+											<Menu.ItemLabel>
+												{ item?.label }
+											</Menu.ItemLabel>
+											<Menu.ItemHelpText>
+												{ values[ attribute ] }
+											</Menu.ItemHelpText>
+										</Menu.CheckboxItem>
+									);
+								} ) }
+							</Menu.Group>
+						</Menu.Popover>
+					</Menu>
+				);
 			} ) }
 		</Menu>
 	);
@@ -282,16 +256,11 @@ function EditableBlockBindingsPanelItem( {
 	attribute,
 	binding,
 	sources,
-	setModalState,
 	blockName,
 } ) {
 	const { updateBlockBindings } = useBlockBindingsUtils();
 	const isMobile = useViewportMatch( 'medium', '<' );
 
-	const handleOpenModal = ( { sourceKey } ) => {
-		setModalState( { attribute, sourceKey } );
-	};
-
 	return (
 		<ToolsPanelItem
 			hasValue={ () => !! binding }
@@ -316,7 +285,6 @@ function EditableBlockBindingsPanelItem( {
 						attribute={ attribute }
 						binding={ binding }
 						sources={ sources }
-						onOpenModal={ handleOpenModal }
 					/>
 				</Menu.Popover>
 			</Menu>
@@ -328,11 +296,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const blockContext = useContext( BlockContext );
 	const { removeAllBlockBindings } = useBlockBindingsUtils();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const [ modalState, setModalState ] = useState( null );
-
-	const handleCloseModal = () => {
-		setModalState( null );
-	};
 
 	// Use useSelect to ensure sources are updated whenever there are updates in block context
 	// or when underlying data changes.
@@ -352,7 +315,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 			Object.entries( registeredSources ).forEach(
 				( [
 					sourceName,
-					{ editorUI, getFieldsList, usesContext, label, getValues },
+					{ getFieldsList, usesContext, label, getValues },
 				] ) => {
 					// Populate context.
 					const context = {};
@@ -361,44 +324,19 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 							context[ key ] = blockContext[ key ];
 						}
 					}
-
-					if ( editorUI ) {
-						const editorUIResult = editorUI( {
+					if ( getFieldsList ) {
+						const fieldsListResult = getFieldsList( {
 							select,
 							context,
 						} );
-
 						_sources[ sourceName ] = {
-							...editorUIResult,
+							data: fieldsListResult || [],
 							label,
 							getValues,
 						};
-					} else if ( getFieldsList ) {
-						// Backward compatibility: Convert getFieldsList to editorUI format.
-						const fieldsListResult = getFieldsList( {
-							select,
-							context,
-						} );
-
-						if ( fieldsListResult ) {
-							const data = Object.entries( fieldsListResult ).map(
-								( [ key, field ] ) => ( {
-									label: field.label || key,
-									type: field.type || 'string',
-									args: { key },
-								} )
-							);
-
-							_sources[ sourceName ] = {
-								mode: 'dropdown', // Default mode for backward compatibility.
-								data,
-								label,
-								getValues,
-							};
-						}
 					} else {
 						/*
-						 * Include sources without editorUI if they are already used in a binding.
+						 * Include sources without getFieldsList if they are already used in a binding.
 						 * This allows them to be displayed in read-only mode.
 						 */
 						_sources[ sourceName ] = {
@@ -438,9 +376,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	// Lock the UI when the user can't update bindings or there are no fields to connect to.
 	const readOnly = ! canUpdateBlockBindings || ! hasCompatibleData;
 
-	const RenderModalContent =
-		sources[ modalState?.sourceKey ]?.renderModalContent;
-
 	if ( bindings === undefined && ! hasCompatibleData ) {
 		return null;
 	}
@@ -490,7 +425,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 								attribute={ attribute }
 								binding={ binding }
 								sources={ sources }
-								setModalState={ setModalState }
 								blockName={ blockName }
 							/>
 						);
@@ -508,14 +442,6 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 					</p>
 				</Text>
 			</ToolsPanel>
-			{ RenderModalContent && (
-				<Modal onRequestClose={ handleCloseModal }>
-					<RenderModalContent
-						attribute={ modalState.attribute }
-						closeModal={ handleCloseModal }
-					/>
-				</Modal>
-			) }
 		</InspectorControls>
 	);
 };

package/src/hooks/block-style-variation.js

@@ -4,12 +4,15 @@
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useContext, useMemo } from '@wordpress/element';
-import { toStyles, getBlockSelectors } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
-import { GlobalStylesContext } from '../components/global-styles';
+import {
+	GlobalStylesContext,
+	toStyles,
+	getBlockSelectors,
+} from '../components/global-styles';
 import { usePrivateStyleOverride } from './utils';
 import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
@@ -124,6 +127,7 @@ export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
 					};
 					const blockSelectors = getBlockSelectors(
 						getBlockTypes(),
+						getBlockStyles,
 						override.clientId
 					);
 					const hasBlockGapSupport = false;
@@ -318,7 +322,11 @@ function useBlockProps( { name, className, clientId } ) {
 		}
 
 		const variationConfig = { settings, styles };
-		const blockSelectors = getBlockSelectors( getBlockTypes(), clientId );
+		const blockSelectors = getBlockSelectors(
+			getBlockTypes(),
+			getBlockStyles,
+			clientId
+		);
 		const hasBlockGapSupport = false;
 		const hasFallbackGapSupport = true;
 		const disableLayoutStyles = true;
@@ -341,7 +349,7 @@ function useBlockProps( { name, className, clientId } ) {
 				variationStyles: true,
 			}
 		);
-	}, [ variation, settings, styles, clientId ] );
+	}, [ variation, settings, styles, getBlockStyles, clientId ] );
 
 	usePrivateStyleOverride( {
 		id: `variation-${ clientId }`,

package/src/hooks/custom-class-name.js

@@ -145,6 +145,6 @@ addFilter(
 
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',
-	'core/color/addTransforms',
+	'core/customClassName/addTransforms',
 	addTransforms
 );

package/src/hooks/duotone.js

@@ -15,7 +15,6 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useEffect } from '@wordpress/element';
-import { getBlockSelector } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -31,6 +30,7 @@ import {
 	getDuotoneStylesheet,
 	getDuotoneUnsetStylesheet,
 } from '../components/duotone/utils';
+import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
 import {
 	cleanEmptyObject,
@@ -354,14 +354,14 @@ function useBlockProps( { clientId, name, style } ) {
 				false
 			);
 			if ( experimentalDuotone ) {
-				const rootSelector = getBlockSelector( blockType );
+				const rootSelector = getBlockCSSSelector( blockType );
 				return typeof experimentalDuotone === 'string'
 					? scopeSelector( rootSelector, experimentalDuotone )
 					: rootSelector;
 			}
 
 			// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
-			return getBlockSelector( blockType, 'filter.duotone', {
+			return getBlockCSSSelector( blockType, 'filter.duotone', {
 				fallback: true,
 			} );
 		}

package/src/hooks/fit-text.js

@@ -3,7 +3,7 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { useEffect, useCallback, useRef } from '@wordpress/element';
+import { useEffect, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
@@ -62,28 +62,18 @@ function useFitText( { fitText, name, clientId } ) {
 	const hasFitTextSupport = hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY );
 	const blockElement = useBlockElement( clientId );
 
-	// Monitor block attribute changes and selection state
+	// Monitor block attribute changes
 	// Any attribute may change the available space.
-	const { blockAttributes, isSelected } = useSelect(
+	const blockAttributes = useSelect(
 		( select ) => {
-			if ( ! clientId ) {
-				return { blockAttributes: undefined, isSelected: false };
+			if ( ! clientId || ! hasFitTextSupport || ! fitText ) {
+				return;
 			}
-			return {
-				blockAttributes:
-					select( blockEditorStore ).getBlockAttributes( clientId ),
-				isSelected:
-					select( blockEditorStore ).isBlockSelected( clientId ),
-			};
+			return select( blockEditorStore ).getBlockAttributes( clientId );
 		},
-		[ clientId ]
+		[ clientId, hasFitTextSupport, fitText ]
 	);
 
-	const isSelectedRef = useRef();
-	useEffect( () => {
-		isSelectedRef.current = isSelected;
-	}, [ isSelected ] );
-
 	const applyFitText = useCallback( () => {
 		if ( ! blockElement || ! hasFitTextSupport || ! fitText ) {
 			return;
@@ -104,13 +94,8 @@ function useFitText( { fitText, name, clientId } ) {
 			styleElement.textContent = css;
 		};
 
-		// Avoid very jarring resizes when a user is actively editing the
-		// block. Placing a ceiling on how much the block can grow curbs the
-		// effect of the first few keypresses.
-		const maxSize = isSelectedRef.current ? 200 : undefined;
-
-		optimizeFitText( blockElement, blockSelector, applyStylesFn, maxSize );
-	}, [ blockElement, clientId, hasFitTextSupport, fitText, isSelectedRef ] );
+		optimizeFitText( blockElement, blockSelector, applyStylesFn );
+	}, [ blockElement, clientId, hasFitTextSupport, fitText ] );
 
 	useEffect( () => {
 		if (
@@ -164,7 +149,6 @@ function useFitText( { fitText, name, clientId } ) {
 		}
 	}, [
 		blockAttributes,
-		isSelected,
 		fitText,
 		applyFitText,
 		blockElement,
@@ -180,12 +164,16 @@ function useFitText( { fitText, name, clientId } ) {
  * @param {Function} props.setAttributes Function to set block attributes.
  * @param {string}   props.name          Block name.
  * @param {boolean}  props.fitText       Whether fit text is enabled.
+ * @param {string}   props.fontSize      Font size slug.
+ * @param {Object}   props.style         Block style object.
  */
 export function FitTextControl( {
 	clientId,
 	fitText = false,
 	setAttributes,
 	name,
+	fontSize,
+	style,
 } ) {
 	if ( ! hasBlockSupport( name, FIT_TEXT_SUPPORT_KEY ) ) {
 		return null;
@@ -203,13 +191,34 @@ export function FitTextControl( {
 					__nextHasNoMarginBottom
 					label={ __( 'Fit text' ) }
 					checked={ fitText }
-					onChange={ () =>
-						setAttributes( { fitText: ! fitText || undefined } )
-					}
+					onChange={ () => {
+						const newFitText = ! fitText || undefined;
+						const updates = { fitText: newFitText };
+
+						// When enabling fit text, clear font size if it has a value
+						if ( newFitText ) {
+							if ( fontSize ) {
+								updates.fontSize = undefined;
+							}
+							if ( style?.typography?.fontSize ) {
+								updates.style = {
+									...style,
+									typography: {
+										...style?.typography,
+										fontSize: undefined,
+									},
+								};
+							}
+						}
+
+						setAttributes( updates );
+					} }
 					help={
 						fitText
 							? __( 'Text will resize to fit its container.' )
-							: __( 'Resize text to fit its container.' )
+							: __(
+									'The text will resize to fit its container, resetting other font size settings.'
+							  )
 					}
 				/>
 			</ToolsPanelItem>
@@ -278,7 +287,7 @@ const hasFitTextSupport = ( blockNameOrType ) => {
 export default {
 	useBlockProps,
 	addSaveProps,
-	attributeKeys: [ 'fitText' ],
+	attributeKeys: [ 'fitText', 'fontSize', 'style' ],
 	hasSupport: hasFitTextSupport,
 	edit: FitTextControl,
 };

package/src/hooks/font-size.js

@@ -4,7 +4,6 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
-import { getTypographyFontSizeValue } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -22,6 +21,7 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import { useSettings } from '../components/use-settings';
+import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -97,8 +97,11 @@ export function FontSizeEdit( props ) {
 	} = props;
 	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
-	const onChange = ( value ) => {
-		const fontSizeSlug = getFontSizeObjectByValue( fontSizes, value ).slug;
+	const onChange = ( value, selectedItem ) => {
+		// Use the selectedItem's slug if available, otherwise fall back to finding by value
+		const fontSizeSlug =
+			selectedItem?.slug ||
+			getFontSizeObjectByValue( fontSizes, value ).slug;
 
 		setAttributes( {
 			style: cleanEmptyObject( {
@@ -124,7 +127,8 @@ export function FontSizeEdit( props ) {
 	return (
 		<FontSizePicker
 			onChange={ onChange }
-			value={ fontSizeValue }
+			value={ fontSize || fontSizeValue }
+			valueMode={ fontSize ? 'slug' : 'literal' }
 			withReset={ false }
 			withSlider
 			size="__unstable-large"