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

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

@@ -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"

package/src/hooks/metadata.js

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+
 const META_ATTRIBUTE_NAME = 'metadata';
 
 /**
@@ -28,8 +30,95 @@ export function addMetaAttribute( blockTypeSettings ) {
 	return blockTypeSettings;
 }
 
+/**
+ * Add metadata transforms.
+ *
+ * @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 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 metadata should not be kept.
+	if ( 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 metadata 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 metadata during the transform.
+	if (
+		results.length > 1 &&
+		source.length > 1 &&
+		results.length !== source.length
+	) {
+		return result;
+	}
+
+	const sourceMetadata = source[ index ]?.attributes?.metadata;
+
+	if ( ! sourceMetadata ) {
+		return result;
+	}
+
+	const preservedMetadata = {};
+
+	// Notes
+	if ( sourceMetadata.noteId && ! result.attributes?.metadata?.noteId ) {
+		preservedMetadata.noteId = sourceMetadata.noteId;
+	}
+
+	// Custom name
+	if (
+		sourceMetadata.name &&
+		! result.attributes?.metadata?.name &&
+		hasBlockSupport( result.name, 'renaming', true )
+	) {
+		preservedMetadata.name = sourceMetadata.name;
+	}
+
+	// Block visibility
+	if (
+		sourceMetadata.blockVisibility !== undefined &&
+		! result.attributes?.metadata?.blockVisibility &&
+		hasBlockSupport( result.name, 'blockVisibility', true )
+	) {
+		preservedMetadata.blockVisibility = sourceMetadata.blockVisibility;
+	}
+
+	if ( Object.keys( preservedMetadata ).length > 0 ) {
+		return {
+			...result,
+			attributes: {
+				...result.attributes,
+				metadata: {
+					...result.attributes.metadata,
+					...preservedMetadata,
+				},
+			},
+		};
+	}
+	return result;
+}
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/metadata/addMetaAttribute',
 	addMetaAttribute
 );
+
+addFilter(
+	'blocks.switchToBlockType.transformedBlock',
+	'core/metadata/addTransforms',
+	addTransforms
+);

package/src/hooks/test/metadata.js

@@ -0,0 +1,316 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getBlockTypes,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { addTransforms } from '../metadata';
+
+describe( 'metadata', () => {
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'addTransforms()', () => {
+		it( 'should not preserve metadata in wrapping transforms', () => {
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: { metadata: { noteId: 1 } },
+					innerBlocks: [],
+				},
+				{
+					name: 'core/foo',
+					attributes: { metadata: { noteId: 2 } },
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {},
+				innerBlocks: source,
+			};
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.metadata ).toBeUndefined();
+		} );
+
+		it( 'should not preserve metadata in one-to-many transforms', () => {
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: { metadata: { noteId: 1 } },
+					innerBlocks: [],
+				},
+			];
+			const results = [
+				{
+					name: 'core/bar',
+					attributes: {},
+					innerBlocks: [],
+				},
+				{
+					name: 'core/bar',
+					attributes: {},
+					innerBlocks: [],
+				},
+			];
+			const transformed = addTransforms(
+				results[ 0 ],
+				source,
+				0,
+				results
+			);
+
+			expect( transformed.attributes.metadata ).toBeUndefined();
+		} );
+
+		it( 'should not preserve metadata in many-to-one transforms', () => {
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: { metadata: { noteId: 1 } },
+					innerBlocks: [],
+				},
+				{
+					name: 'core/foo',
+					attributes: { metadata: { noteId: 2 } },
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {},
+				innerBlocks: [],
+			};
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.metadata ).toBeUndefined();
+		} );
+
+		it( 'should not preserve metadata in many-to-many transforms with different counts', () => {
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: { metadata: { noteId: 1 } },
+					innerBlocks: [],
+				},
+				{
+					name: 'core/foo',
+					attributes: { metadata: { noteId: 2 } },
+					innerBlocks: [],
+				},
+				{
+					name: 'core/foo',
+					attributes: { metadata: { noteId: 3 } },
+					innerBlocks: [],
+				},
+			];
+			const results = [
+				{
+					name: 'core/bar',
+					attributes: {},
+					innerBlocks: [],
+				},
+				{
+					name: 'core/bar',
+					attributes: {},
+					innerBlocks: [],
+				},
+			];
+			const [ firstTransformed, secondTransformed ] = results.map(
+				( result, index ) =>
+					addTransforms( result, source, index, results )
+			);
+
+			expect( firstTransformed.attributes.metadata ).toBeUndefined();
+			expect( secondTransformed.attributes.metadata ).toBeUndefined();
+		} );
+
+		it( 'should preserve metadata in many-to-many transforms with same counts', () => {
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: { metadata: { noteId: 1 } },
+					innerBlocks: [],
+				},
+				{
+					name: 'core/foo',
+					attributes: { metadata: { noteId: 2 } },
+					innerBlocks: [],
+				},
+			];
+			const results = [
+				{
+					name: 'core/bar',
+					attributes: { metadata: { noteId: 1 } },
+				},
+				{
+					name: 'core/bar',
+					attributes: { metadata: { noteId: 2 } },
+				},
+			];
+
+			const [ firstTransformed, secondTransformed ] = results.map(
+				( result, index ) =>
+					addTransforms( result, source, index, results )
+			);
+
+			expect( firstTransformed.attributes.metadata ).toEqual( {
+				noteId: 1,
+			} );
+			expect( secondTransformed.attributes.metadata ).toEqual( {
+				noteId: 2,
+			} );
+		} );
+
+		it( 'should preserve custom name metadata', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+			} );
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						metadata: { name: 'Custom Name' },
+					},
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {},
+				innerBlocks: [],
+			};
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.metadata.name ).toBe(
+				'Custom Name'
+			);
+		} );
+
+		it( 'should not preserve custom name metadata when target block does not support renaming', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+				supports: {
+					renaming: false,
+				},
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						metadata: { name: 'Custom Name' },
+					},
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {},
+				innerBlocks: [],
+			};
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.metadata?.name ).toBeUndefined();
+		} );
+
+		it( 'should preserve block visibility metadata', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						metadata: { blockVisibility: false },
+					},
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {},
+				innerBlocks: [],
+			};
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.metadata?.blockVisibility ).toBe(
+				false
+			);
+		} );
+
+		it( 'should not preserve block visibility metadata when target block does not support it', () => {
+			registerBlockType( 'core/bar', {
+				title: 'Bar',
+				supports: {
+					blockVisibility: false,
+				},
+			} );
+
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						metadata: { blockVisibility: false },
+					},
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {},
+				innerBlocks: [],
+			};
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect(
+				transformed.attributes.metadata?.blockVisibility
+			).toBeUndefined();
+		} );
+
+		it( 'should not override existing metadata in target block', () => {
+			const source = [
+				{
+					name: 'core/foo',
+					attributes: {
+						metadata: {
+							noteId: 1,
+							name: 'Custom Name',
+							blockVisibility: false,
+						},
+					},
+					innerBlocks: [],
+				},
+			];
+			const result = {
+				name: 'core/bar',
+				attributes: {
+					metadata: {
+						noteId: 2,
+						name: 'Existing Name',
+						blockVisibility: true,
+					},
+				},
+				innerBlocks: [],
+			};
+			const transformed = addTransforms( result, source, 0, [ result ] );
+
+			expect( transformed.attributes.metadata ).toEqual( {
+				noteId: 2,
+				name: 'Existing Name',
+				blockVisibility: true,
+			} );
+		} );
+	} );
+} );

package/src/hooks/typography.js

@@ -116,11 +116,13 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 
 export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 	function selector( select ) {
-		const { style, fontFamily, fontSize } =
+		const { style, fontFamily, fontSize, fitText } =
 			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, fontFamily, fontSize };
+		return { style, fontFamily, fontSize, fitText };
 	}
-	const { style, fontFamily, fontSize } = useSelect( selector, [ clientId ] );
+	const { style, fontFamily, fontSize, fitText } = useSelect( selector, [
+		clientId,
+	] );
 	const isEnabled = useHasTypographyPanel( settings );
 	const value = useMemo(
 		() => attributesToStyle( { style, fontFamily, fontSize } ),
@@ -128,7 +130,16 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
 	);
 
 	const onChange = ( newStyle ) => {
-		setAttributes( styleToAttributes( newStyle ) );
+		const newAttributes = styleToAttributes( newStyle );
+
+		// If setting a font size and fitText is currently enabled, disable it
+		const hasFontSize =
+			newAttributes.fontSize || newAttributes.style?.typography?.fontSize;
+		if ( hasFontSize && fitText ) {
+			newAttributes.fitText = undefined;
+		}
+
+		setAttributes( newAttributes );
 	};
 
 	if ( ! isEnabled ) {

package/src/private-apis.js

@@ -57,6 +57,7 @@ import {
 	useBlockElementRef,
 	useBlockElement,
 } from './components/block-list/use-block-props/use-block-refs';
+import { default as MediaUploadModal } from './components/media-upload-modal';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -110,4 +111,5 @@ lock( privateApis, {
 	essentialFormatKey,
 	useBlockElement,
 	useBlockElementRef,
+	MediaUploadModal,
 } );

package/src/store/private-selectors.js

@@ -95,7 +95,7 @@ export const isBlockSubtreeDisabled = ( state, clientId ) => {
  * @param {string} rootClientId The client ID of the root container block.
  * @return {boolean} Whether the container allows insertion.
  */
-export function isContainerInsertableToInWriteMode(
+export function isContainerInsertableToInContentOnlyMode(
 	state,
 	blockName,
 	rootClientId
@@ -105,7 +105,7 @@ export function isContainerInsertableToInWriteMode(
 	const isContainerContentBlock = isContentBlock( rootBlockName );
 	const isRootBlockMain = getSectionRootClientId( state ) === rootClientId;
 
-	// In write mode, containers shouldn't be inserted into unless:
+	// In contentOnly mode, containers shouldn't be inserted into unless:
 	// 1. they are a section root;
 	// 2. they are a content block and the block to be inserted is also content.
 	return (