@wordpress/block-editor 12.6.0 → 12.7.0

package/src/components/link-control/link-preview.js

@@ -42,11 +42,13 @@ export default function LinkPreview( {
 		( value && filterURLForDisplay( safeDecodeURI( value.url ), 16 ) ) ||
 		'';
 
-	const displayTitle = richData?.title || value?.title || displayURL;
-
 	// url can be undefined if the href attribute is unset
 	const isEmptyURL = ! value?.url?.length;
 
+	const displayTitle =
+		! isEmptyURL &&
+		stripHTML( richData?.title || value?.title || displayURL );
+
 	let icon;
 
 	if ( richData?.icon ) {
@@ -87,10 +89,10 @@ export default function LinkPreview( {
 									className="block-editor-link-control__search-item-title"
 									href={ value.url }
 								>
-									{ stripHTML( displayTitle ) }
+									{ displayTitle }
 								</ExternalLink>
 
-								{ value?.url && (
+								{ value?.url && displayTitle !== displayURL && (
 									<span className="block-editor-link-control__search-item-info">
 										{ displayURL }
 									</span>

package/src/components/link-control/style.scss

@@ -84,7 +84,7 @@ $preview-image-height: 140px;
 	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
 	justify-content: flex-start;
 	gap: $grid-unit-10;
-	padding: $grid-unit-10;
+	padding: $grid-unit-10 $grid-unit-20 $grid-unit-20;
 	order: 20;
 }
 
@@ -215,9 +215,9 @@ $preview-image-height: 140px;
 
 	.block-editor-link-control__search-item-title {
 		display: block;
-		margin-bottom: 0.2em;
 		font-weight: 500;
 		position: relative;
+		line-height: $grid-unit-30;
 
 		mark {
 			font-weight: 600;
@@ -291,6 +291,7 @@ $preview-image-height: 140px;
 	display: flex;
 	flex-direction: row;
 	width: 100%; // clip.
+	align-items: center;
 }
 
 .block-editor-link-control__search-item-bottom {

package/src/components/link-control/test/index.js

@@ -1734,7 +1734,7 @@ describe( 'Selecting links', () => {
 } );
 
 describe( 'Addition Settings UI', () => {
-	it( 'should not show a means to toggle the link settings when not editing a link', async () => {
+	it( 'should hide advanced link settings when not editing a link', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 
 		const LinkControlConsumer = () => {
@@ -1749,6 +1749,7 @@ describe( 'Addition Settings UI', () => {
 
 		expect( settingsToggle ).not.toBeInTheDocument();
 	} );
+
 	it( 'should provides a means to toggle the link settings', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 

package/src/components/list-view/use-list-view-drop-zone.js

@@ -489,7 +489,11 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 
 	const ref = useDropZone( {
 		dropZoneElement,
-		onDrop: onBlockDrop,
+		onDrop( event ) {
+			if ( target ) {
+				onBlockDrop( event );
+			}
+		},
 		onDragLeave() {
 			throttled.cancel();
 			setTarget( null );

package/src/components/media-replace-flow/index.native.js

@@ -1,3 +1,12 @@
-// MediaReplaceFlow component is not yet implemented in the native version,
-// so we return an empty component instead.
-export default () => null;
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+// MediaReplaceFlow component is not yet implemented in the native version.
+// For testing purposes, we are using an empty View component with a testID prop.
+const MediaReplaceFlow = () => {
+	return <View testID="media-replace-flow" />;
+};
+
+export default MediaReplaceFlow;

package/src/components/media-upload/test/index.native.js

@@ -44,6 +44,7 @@ describe( 'MediaUpload component', () => {
 			const wrapper = render(
 				<MediaUpload
 					allowedTypes={ [ mediaType ] }
+					onSelectURL={ jest.fn() }
 					render={ ( { open, getMediaOptions } ) => {
 						return (
 							<>

package/src/components/rich-text/format-edit.js

@@ -2,43 +2,67 @@
  * WordPress dependencies
  */
 import { getActiveFormat, getActiveObject } from '@wordpress/rich-text';
+import { useContext, useMemo } from '@wordpress/element';
 
-export default function FormatEdit( {
-	formatTypes,
-	onChange,
-	onFocus,
-	value,
-	forwardedRef,
-} ) {
-	return formatTypes.map( ( settings ) => {
-		const { name, edit: Edit } = settings;
-
-		if ( ! Edit ) {
-			return null;
-		}
-
-		const activeFormat = getActiveFormat( value, name );
-		const isActive = activeFormat !== undefined;
-		const activeObject = getActiveObject( value );
-		const isObjectActive =
-			activeObject !== undefined && activeObject.type === name;
-
-		return (
-			<Edit
-				key={ name }
-				isActive={ isActive }
-				activeAttributes={
-					isActive ? activeFormat.attributes || {} : {}
-				}
-				isObjectActive={ isObjectActive }
-				activeObjectAttributes={
-					isObjectActive ? activeObject.attributes || {} : {}
-				}
-				value={ value }
-				onChange={ onChange }
-				onFocus={ onFocus }
-				contentRef={ forwardedRef }
-			/>
-		);
-	} );
+/**
+ * Internal dependencies
+ */
+import BlockContext from '../block-context';
+
+const DEFAULT_BLOCK_CONTEXT = {};
+
+export const usesContextKey = Symbol( 'usesContext' );
+
+function Edit( { onChange, onFocus, value, forwardedRef, settings } ) {
+	const {
+		name,
+		edit: EditFunction,
+		[ usesContextKey ]: usesContext,
+	} = settings;
+
+	const blockContext = useContext( BlockContext );
+
+	// Assign context values using the block type's declared context needs.
+	const context = useMemo( () => {
+		return usesContext
+			? Object.fromEntries(
+					Object.entries( blockContext ).filter( ( [ key ] ) =>
+						usesContext.includes( key )
+					)
+			  )
+			: DEFAULT_BLOCK_CONTEXT;
+	}, [ usesContext, blockContext ] );
+
+	if ( ! EditFunction ) {
+		return null;
+	}
+
+	const activeFormat = getActiveFormat( value, name );
+	const isActive = activeFormat !== undefined;
+	const activeObject = getActiveObject( value );
+	const isObjectActive =
+		activeObject !== undefined && activeObject.type === name;
+
+	return (
+		<EditFunction
+			key={ name }
+			isActive={ isActive }
+			activeAttributes={ isActive ? activeFormat.attributes || {} : {} }
+			isObjectActive={ isObjectActive }
+			activeObjectAttributes={
+				isObjectActive ? activeObject.attributes || {} : {}
+			}
+			value={ value }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			contentRef={ forwardedRef }
+			context={ context }
+		/>
+	);
+}
+
+export default function FormatEdit( { formatTypes, ...props } ) {
+	return formatTypes.map( ( settings ) => (
+		<Edit settings={ settings } { ...props } key={ settings.name } />
+	) );
 }

package/src/components/rich-text/get-rich-text-values.js

@@ -18,13 +18,13 @@ import { Content } from './content';
  * except that it does not render the elements to a string, but instead collects
  * the values of all rich text `Content` elements.
  */
-function addValuesForElement( element, ...args ) {
+function addValuesForElement( element, values, innerBlocks ) {
 	if ( null === element || undefined === element || false === element ) {
 		return;
 	}
 
 	if ( Array.isArray( element ) ) {
-		return addValuesForElements( element, ...args );
+		return addValuesForElements( element, values, innerBlocks );
 	}
 
 	switch ( typeof element ) {
@@ -38,13 +38,12 @@ function addValuesForElement( element, ...args ) {
 	switch ( type ) {
 		case StrictMode:
 		case Fragment:
-			return addValuesForElements( props.children, ...args );
+			return addValuesForElements( props.children, values, innerBlocks );
 		case RawHTML:
 			return;
 		case InnerBlocks.Content:
-			return addValuesForBlocks( ...args );
+			return addValuesForBlocks( values, innerBlocks );
 		case Content:
-			const [ values ] = args;
 			values.push( props.value );
 			return;
 	}
@@ -52,21 +51,19 @@ function addValuesForElement( element, ...args ) {
 	switch ( typeof type ) {
 		case 'string':
 			if ( typeof props.children !== 'undefined' ) {
-				return addValuesForElements( props.children, ...args );
+				return addValuesForElements(
+					props.children,
+					values,
+					innerBlocks
+				);
 			}
 			return;
 		case 'function':
-			if (
-				type.prototype &&
-				typeof type.prototype.render === 'function'
-			) {
-				return addValuesForElement(
-					new type( props ).render(),
-					...args
-				);
-			}
-
-			return addValuesForElement( type( props ), ...args );
+			const el =
+				type.prototype && typeof type.prototype.render === 'function'
+					? new type( props ).render()
+					: type( props );
+			return addValuesForElement( el, values, innerBlocks );
 	}
 }
 
@@ -78,20 +75,17 @@ function addValuesForElements( children, ...args ) {
 	}
 }
 
-function _getSaveElement( name, attributes, innerBlocks ) {
-	return getSaveElement(
-		name,
-		attributes,
-		innerBlocks.map( ( block ) =>
-			_getSaveElement( block.name, block.attributes, block.innerBlocks )
-		)
-	);
-}
-
 function addValuesForBlocks( values, blocks ) {
 	for ( let i = 0; i < blocks.length; i++ ) {
 		const { name, attributes, innerBlocks } = blocks[ i ];
-		const saveElement = _getSaveElement( name, attributes, innerBlocks );
+		const saveElement = getSaveElement(
+			name,
+			attributes,
+			// Instead of letting save elements use `useInnerBlocksProps.save`,
+			// force them to use InnerBlocks.Content instead so we can intercept
+			// a single component.
+			<InnerBlocks.Content />
+		);
 		addValuesForElement( saveElement, values, innerBlocks );
 	}
 }

package/src/components/spacing-sizes-control/test/utils.js

@@ -49,7 +49,15 @@ describe( 'getCustomValueFromPreset', () => {
 } );
 
 describe( 'getPresetValueFromCustomValue', () => {
-	const spacingSizes = [ { name: 'Small', slug: 20, size: '8px' } ];
+	const spacingSizes = [
+		{ name: 'Default', slug: 'default', size: undefined },
+		{ name: 'Small', slug: 20, size: '8px' },
+	];
+	it( 'should return undefined even if an undefined value exist in spacing sizes as occurs if spacingSizes has > 7 entries', () => {
+		expect( getPresetValueFromCustomValue( undefined, spacingSizes ) ).toBe(
+			undefined
+		);
+	} );
 	it( 'should return original value if a string in spacing presets var format', () => {
 		expect(
 			getPresetValueFromCustomValue(

package/src/components/spacing-sizes-control/utils.js

@@ -101,8 +101,8 @@ export function getCustomValueFromPreset( value, spacingSizes ) {
  * @return {string} The preset value if it can be found.
  */
 export function getPresetValueFromCustomValue( value, spacingSizes ) {
-	// Return value as-is if it is already a preset;
-	if ( isValueSpacingPreset( value ) || value === '0' ) {
+	// Return value as-is if it is undefined or is already a preset, or '0';
+	if ( ! value || isValueSpacingPreset( value ) || value === '0' ) {
 		return value;
 	}
 

package/src/hooks/behaviors.js

@@ -22,15 +22,13 @@ function BehaviorsControl( {
 	onChangeAnimation,
 	disabled = false,
 } ) {
-	const { settings, themeBehaviors } = useSelect(
+	const { settings } = useSelect(
 		( select ) => {
-			const { getBehaviors, getSettings } = select( blockEditorStore );
-
+			const { getSettings } = select( blockEditorStore );
 			return {
 				settings:
 					getSettings()?.__experimentalFeatures?.blocks?.[ blockName ]
-						?.behaviors,
-				themeBehaviors: getBehaviors()?.blocks?.[ blockName ],
+						?.behaviors || {},
 			};
 		},
 		[ blockName ]
@@ -46,7 +44,6 @@ function BehaviorsControl( {
 			label: __( 'No behaviors' ),
 		},
 	};
-
 	const behaviorsOptions = Object.entries( settings )
 		.filter(
 			( [ behaviorName, behaviorValue ] ) =>
@@ -60,7 +57,6 @@ function BehaviorsControl( {
 				.slice( 1 )
 				.toLowerCase() }`,
 		} ) );
-
 	const options = [
 		...Object.values( defaultBehaviors ),
 		...behaviorsOptions,
@@ -68,7 +64,6 @@ function BehaviorsControl( {
 
 	const { behaviors, behaviorsValue } = useMemo( () => {
 		const mergedBehaviors = {
-			...themeBehaviors,
 			...( blockBehaviors || {} ),
 		};
 
@@ -83,7 +78,8 @@ function BehaviorsControl( {
 			behaviors: mergedBehaviors,
 			behaviorsValue: value,
 		};
-	}, [ blockBehaviors, themeBehaviors ] );
+	}, [ blockBehaviors ] );
+
 	// If every behavior is disabled, do not show the behaviors inspector control.
 	if ( behaviorsOptions.length === 0 ) {
 		return null;
@@ -203,10 +199,8 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 	};
 }, 'withBehaviors' );
 
-if ( window?.__experimentalInteractivityAPI ) {
-	addFilter(
-		'editor.BlockEdit',
-		'core/behaviors/with-inspector-control',
-		withBehaviors
-	);
-}
+addFilter(
+	'editor.BlockEdit',
+	'core/behaviors/with-inspector-control',
+	withBehaviors
+);

package/src/hooks/border.js

@@ -377,13 +377,14 @@ export const withBorderColorPaletteStyles = createHigherOrderComponent(
 			borderBottomColor: borderBottomColor || borderColorValue,
 			borderLeftColor: borderLeftColor || borderColorValue,
 		};
+		const cleanedExtraStyles = cleanEmptyObject( extraStyles ) || {};
 
 		let wrapperProps = props.wrapperProps;
 		wrapperProps = {
 			...props.wrapperProps,
 			style: {
 				...props.wrapperProps?.style,
-				...extraStyles,
+				...cleanedExtraStyles,
 			},
 		};
 

package/src/hooks/style.js

@@ -44,8 +44,8 @@ const styleSupportKeys = [
 	SPACING_SUPPORT_KEY,
 ];
 
-const hasStyleSupport = ( blockType ) =>
-	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
+const hasStyleSupport = ( nameOrType ) =>
+	styleSupportKeys.some( ( key ) => hasBlockSupport( nameOrType, key ) );
 
 /**
  * Returns the inline styles to add depending on the style object
@@ -347,6 +347,10 @@ export function addEditProps( settings ) {
  */
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
+		if ( ! hasStyleSupport( props.name ) ) {
+			return <BlockEdit key="edit" { ...props } />;
+		}
+
 		const shouldDisplayControls = useDisplayBlockControls();
 		const blockEditingMode = useBlockEditingMode();
 
@@ -360,7 +364,7 @@ export const withBlockControls = createHigherOrderComponent(
 						<DimensionsPanel { ...props } />
 					</>
 				) }
-				<BlockEdit { ...props } />
+				<BlockEdit key="edit" { ...props } />
 			</>
 		);
 	},

package/src/private-apis.js

@@ -23,6 +23,7 @@ import {
 	default as ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
 } from './components/inserter/reusable-block-rename-hint';
+import { usesContextKey } from './components/rich-text/format-edit';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -49,4 +50,5 @@ lock( privateApis, {
 	ResolutionTool,
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
+	usesContextKey,
 } );

package/src/store/actions.js

@@ -948,36 +948,30 @@ export const __unstableSplitSelection =
 		valueA = remove( valueA, selectionA.offset, valueA.text.length );
 		valueB = remove( valueB, 0, selectionB.offset );
 
-		dispatch.replaceBlocks(
-			select.getSelectedBlockClientIds(),
-			[
-				{
-					// Preserve the original client ID.
-					...blockA,
-					attributes: {
-						...blockA.attributes,
-						[ selectionA.attributeKey ]: toHTMLString( {
-							value: valueA,
-							...mapRichTextSettings( attributeDefinitionA ),
-						} ),
-					},
+		dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
+			{
+				// Preserve the original client ID.
+				...blockA,
+				attributes: {
+					...blockA.attributes,
+					[ selectionA.attributeKey ]: toHTMLString( {
+						value: valueA,
+						...mapRichTextSettings( attributeDefinitionA ),
+					} ),
 				},
-				createBlock( getDefaultBlockName() ),
-				{
-					// Preserve the original client ID.
-					...blockB,
-					attributes: {
-						...blockB.attributes,
-						[ selectionB.attributeKey ]: toHTMLString( {
-							value: valueB,
-							...mapRichTextSettings( attributeDefinitionB ),
-						} ),
-					},
+			},
+			{
+				// Preserve the original client ID.
+				...blockB,
+				attributes: {
+					...blockB.attributes,
+					[ selectionB.attributeKey ]: toHTMLString( {
+						value: valueB,
+						...mapRichTextSettings( attributeDefinitionB ),
+					} ),
 				},
-			],
-			1, // If we don't pass the `indexToSelect` it will default to the last block.
-			select.getSelectedBlocksInitialCaretPosition()
-		);
+			},
+		] );
 	};
 
 /**

package/src/store/selectors.js

@@ -1962,51 +1962,8 @@ const buildBlockTypeItem =
  */
 export const getInserterItems = createSelector(
 	( state, rootClientId = null ) => {
-		/*
-		 * Matches block comment delimiters amid serialized content.
-		 *
-		 * @see `tokenizer` in `@wordpress/block-serialization-default-parser`
-		 * package
-		 *
-		 * blockParserTokenizer differs from the original tokenizer in the
-		 * following ways:
-		 *
-		 * - removed global flag (/g)
-		 * - prepended ^\s*
-		 *
-		 */
-		const blockParserTokenizer =
-			/^\s*<!--\s+(\/)?wp:([a-z][a-z0-9_-]*\/)?([a-z][a-z0-9_-]*)\s+({(?:(?=([^}]+|}+(?=})|(?!}\s+\/?-->)[^])*)\5|[^]*?)}\s+)?(\/)?-->/;
-
 		const buildReusableBlockInserterItem = ( reusableBlock ) => {
-			let icon = symbol;
-
-			/*
-			 * Instead of always displaying a generic "symbol" icon for every
-			 * reusable block, try to use an icon that represents the first
-			 * outermost block contained in the reusable block. This requires
-			 * scanning the serialized form of the reusable block to find its
-			 * first block delimiter, then looking up the corresponding block
-			 * type, if available.
-			 */
-			if ( Platform.OS === 'web' ) {
-				const content =
-					typeof reusableBlock.content.raw === 'string'
-						? reusableBlock.content.raw
-						: reusableBlock.content;
-				const rawBlockMatch = content.match( blockParserTokenizer );
-				if ( rawBlockMatch ) {
-					const [ , , namespace = 'core/', blockName ] =
-						rawBlockMatch;
-					const referencedBlockType = getBlockType(
-						namespace + blockName
-					);
-					if ( referencedBlockType ) {
-						icon = referencedBlockType.icon;
-					}
-				}
-			}
-
+			const icon = symbol;
 			const id = `core/block/${ reusableBlock.id }`;
 			const { time, count = 0 } = getInsertUsage( state, id ) || {};
 			const frecency = calculateFrecency( time, count );
@@ -2023,6 +1980,7 @@ export const getInserterItems = createSelector(
 				utility: 1, // Deprecated.
 				frecency,
 				content: reusableBlock.content.raw,
+				syncStatus: reusableBlock.wp_pattern_sync_status,
 			};
 		};
 
@@ -2031,18 +1989,7 @@ export const getInserterItems = createSelector(
 			'core/block',
 			rootClientId
 		)
-			? getReusableBlocks( state )
-					.filter(
-						( reusableBlock ) =>
-							// Reusable blocks that are fully synced should have no sync status set
-							// for backwards compat between patterns and old reusable blocks, but
-							// some in release 16.1 may have had sync status inadvertantly set to
-							// 'fully' if created in the site editor.
-							reusableBlock.wp_pattern_sync_status === 'fully' ||
-							reusableBlock.wp_pattern_sync_status === '' ||
-							! reusableBlock.wp_pattern_sync_status
-					)
-					.map( buildReusableBlockInserterItem )
+			? getReusableBlocks( state ).map( buildReusableBlockInserterItem )
 			: [];
 
 		const buildBlockTypeInserterItem = buildBlockTypeItem( state, {
@@ -2577,30 +2524,6 @@ export function getSettings( state ) {
 	return state.settings;
 }
 
-/**
- * Returns the behaviors registered with the editor.
- *
- * Behaviors are named, reusable pieces of functionality that can be
- * attached to blocks. They are registered with the editor using the
- * `theme.json` file.
- *
- * @example
- *
- * ```js
- * const behaviors = select( blockEditorStore ).getBehaviors();
- * if ( behaviors?.lightbox ) {
- * 	 // Do something with the lightbox.
- * }
- *```
- *
- * @param {Object} state Editor state.
- *
- * @return {Object} The editor behaviors object.
- */
-export function getBehaviors( state ) {
-	return state.settings.behaviors;
-}
-
 /**
  * Returns true if the most recent block change is be considered persistent, or
  * false otherwise. A persistent change is one committed by BlockEditorProvider