@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/rich-text/event-listeners/before-input-rules.js

@@ -3,11 +3,15 @@
  */
 import { insert, isCollapsed } from '@wordpress/rich-text';
 import { applyFilters } from '@wordpress/hooks';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /**
  * When typing over a selection, the selection will we wrapped by a matching
@@ -85,8 +89,5 @@ export default ( props ) => ( element ) => {
 		event.preventDefault();
 	}
 
-	element.addEventListener( 'beforeinput', onInput );
-	return () => {
-		element.removeEventListener( 'beforeinput', onInput );
-	};
+	return subscribeDelegatedListener( element, 'beforeinput', onInput, true );
 };

package/src/components/rich-text/event-listeners/delete.js

@@ -3,6 +3,14 @@
  */
 import { DELETE, BACKSPACE } from '@wordpress/keycodes';
 import { isCollapsed, isEmpty } from '@wordpress/rich-text';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
@@ -46,8 +54,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	element.addEventListener( 'keydown', onKeyDown );
-	return () => {
-		element.removeEventListener( 'keydown', onKeyDown );
-	};
+	return subscribeDelegatedListener( element, 'keydown', onKeyDown );
 };

package/src/components/rich-text/event-listeners/enter.js

@@ -88,9 +88,16 @@ export default ( props ) => ( element ) => {
 		'keydown',
 		onKeyDown
 	);
-	element.addEventListener( 'keydown', onKeyDownDeprecated );
+	// Capture phase so this runs before ancestor (writing flow) bubble
+	// handlers, matching the timing of the previous raw element listener.
+	const unsubscribeKeyDownDeprecated = subscribeDelegatedListener(
+		element,
+		'keydown',
+		onKeyDownDeprecated,
+		true
+	);
 	return () => {
 		unsubscribeKeyDown();
-		element.removeEventListener( 'keydown', onKeyDownDeprecated );
+		unsubscribeKeyDownDeprecated();
 	};
 };

package/src/components/rich-text/event-listeners/input-events.js

@@ -1,3 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
+
 export default ( props ) => ( element ) => {
 	const { inputEvents } = props.current;
 	function onInput( event ) {
@@ -6,8 +18,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	element.addEventListener( 'input', onInput );
-	return () => {
-		element.removeEventListener( 'input', onInput );
-	};
+	return subscribeDelegatedListener( element, 'input', onInput );
 };

package/src/components/rich-text/event-listeners/input-rules.js

@@ -3,6 +3,7 @@
  */
 import { insert, toHTMLString } from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -13,6 +14,9 @@ import {
 	retrieveSelectedAttribute,
 	START_OF_SELECTED_AREA,
 } from '../../../utils/selection';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export function findSelection( blocks ) {
 	let i = blocks.length;
@@ -154,10 +158,22 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	element.addEventListener( 'input', onInput );
-	element.addEventListener( 'compositionend', onInput );
+	// Capture phase so these run before ancestor (writing flow) bubble
+	// handlers, matching the timing of the previous raw element listeners.
+	const unsubscribeInput = subscribeDelegatedListener(
+		element,
+		'input',
+		onInput,
+		true
+	);
+	const unsubscribeCompositionEnd = subscribeDelegatedListener(
+		element,
+		'compositionend',
+		onInput,
+		true
+	);
 	return () => {
-		element.removeEventListener( 'input', onInput );
-		element.removeEventListener( 'compositionend', onInput );
+		unsubscribeInput();
+		unsubscribeCompositionEnd();
 	};
 };

package/src/components/rich-text/event-listeners/insert-replacement-text.js

@@ -1,7 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /**
  * When the browser is about to auto correct, add an undo level so the user can
@@ -21,8 +29,5 @@ export default ( props ) => ( element ) => {
 			.__unstableMarkLastChangeAsPersistent();
 	}
 
-	element.addEventListener( 'beforeinput', onInput );
-	return () => {
-		element.removeEventListener( 'beforeinput', onInput );
-	};
+	return subscribeDelegatedListener( element, 'beforeinput', onInput );
 };

package/src/components/rich-text/event-listeners/remove-browser-shortcuts.js

@@ -2,6 +2,14 @@
  * WordPress dependencies
  */
 import { isKeyboardEvent } from '@wordpress/keycodes';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 /**
  * Hook to prevent default behaviors for key combinations otherwise handled
@@ -17,8 +25,5 @@ export default () => ( node ) => {
 			event.preventDefault();
 		}
 	}
-	node.addEventListener( 'keydown', onKeydown );
-	return () => {
-		node.removeEventListener( 'keydown', onKeydown );
-	};
+	return subscribeDelegatedListener( node, 'keydown', onKeydown, true );
 };

package/src/components/rich-text/event-listeners/shortcuts.js

@@ -1,3 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as composePrivateApis } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
+
 export default ( props ) => ( element ) => {
 	const { keyboardShortcuts } = props.current;
 	function onKeyDown( event ) {
@@ -6,8 +18,5 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	element.addEventListener( 'keydown', onKeyDown );
-	return () => {
-		element.removeEventListener( 'keydown', onKeyDown );
-	};
+	return subscribeDelegatedListener( element, 'keydown', onKeyDown, true );
 };

package/src/components/rich-text/event-listeners/undo-automatic-change.js

@@ -2,11 +2,15 @@
  * WordPress dependencies
  */
 import { BACKSPACE, ESCAPE } from '@wordpress/keycodes';
+import { privateApis as composePrivateApis } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { subscribeDelegatedListener } = unlock( composePrivateApis );
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
@@ -38,8 +42,5 @@ export default ( props ) => ( element ) => {
 		__experimentalUndo();
 	}
 
-	element.addEventListener( 'keydown', onKeyDown );
-	return () => {
-		element.removeEventListener( 'keydown', onKeyDown );
-	};
+	return subscribeDelegatedListener( element, 'keydown', onKeyDown );
 };

package/src/components/rich-text/index.js

@@ -51,36 +51,6 @@ inputEventContext.displayName = 'inputEventContext';
 
 const instanceIdKey = Symbol( 'instanceId' );
 
-/**
- * Removes props used for the native version of RichText so that they are not
- * passed to the DOM element and log warnings.
- *
- * @param {Object} props Props to filter.
- *
- * @return {Object} Filtered props.
- */
-function removeNativeProps( props ) {
-	const {
-		__unstableMobileNoFocusOnMount,
-		deleteEnter,
-		placeholderTextColor,
-		textAlign,
-		selectionColor,
-		tagsToEliminate,
-		disableEditingMenu,
-		fontSize,
-		fontFamily,
-		fontWeight,
-		fontStyle,
-		minWidth,
-		maxWidth,
-		disableSuggestions,
-		disableAutocorrection,
-		...restProps
-	} = props;
-	return restProps;
-}
-
 export function RichTextWrapper(
 	{
 		children,
@@ -113,8 +83,6 @@ export function RichTextWrapper(
 	},
 	forwardedRef
 ) {
-	props = removeNativeProps( props );
-
 	if ( onSplit ) {
 		deprecated( 'wp.blockEditor.RichText onSplit prop', {
 			since: '6.4',
@@ -532,7 +500,7 @@ const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
 			__unstableAllowPrefixTransformations,
 			readOnly,
 			...contentProps
-		} = removeNativeProps( props );
+		} = props;
 		return (
 			<Tag
 				ref={ ref }

package/src/components/unit-control/README.md

@@ -1,6 +1,6 @@
 # UnitControl
 
-UnitControl component allows the user to set a value as well as a unit (e.g. `px`). The allowed units are derived from the (experimental) `theme.json` settings file .
+UnitControl component allows the user to set a value as well as a unit (e.g. `px`). The allowed units are derived from the (experimental) `theme.json` settings file.
 
 ```js
 // theme.json

package/src/components/url-popover/README.md

@@ -123,7 +123,7 @@ drawer.
 ## Useful UI pieces
 
 The URLPopover exposes two components that may be used as child components to make the UI creation process easier.
-Although in the editor these components are used inside URLPopover and they were built with URLPopover use cases in mind, it maybe is possible and perfectly fine to use them standalone if they fit a use-case.
+Although in the editor these components are used inside URLPopover and they were built with URLPopover use cases in mind, it may be possible and perfectly fine to use them standalone if they fit a use-case.
 
 ### LinkViewer
 

package/src/components/url-popover/image-url-input-ui.js

@@ -233,7 +233,6 @@ const ImageURLInputUI = ( {
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
-				__next40pxDefaultSize
 				label={ __( 'Link relation' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
@@ -249,7 +248,6 @@ const ImageURLInputUI = ( {
 				) }
 			/>
 			<TextControl
-				__next40pxDefaultSize
 				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }
 				onChange={ onSetLinkClass }

package/src/components/use-block-commands/index.js

@@ -93,8 +93,8 @@ const getTransformCommands = () =>
 		}
 
 		// Simple block transformation based on the `Block Transforms` API.
-		function onBlockTransform( name ) {
-			const newBlocks = switchToBlockType( blocks, name );
+		function onBlockTransform( name, variationName ) {
+			const newBlocks = switchToBlockType( blocks, name, variationName );
 			replaceBlocks( clientIds, newBlocks );
 			selectForMultipleBlocks( newBlocks );
 		}
@@ -117,7 +117,7 @@ const getTransformCommands = () =>
 
 		const commands = possibleBlockTransformations.map(
 			( transformation ) => {
-				const { name, title, icon } = transformation;
+				const { id, name, title, icon, variationName } = transformation;
 				/*
 				 * Command menu uses Icon from @wordpress/icons, which expects a ReactElement
 				 * (cloneElement). Normalize to blockDefaultIcon to avoid crash. See #55668 / PR #55676.
@@ -132,13 +132,13 @@ const getTransformCommands = () =>
 				return {
 					name:
 						'core/block-editor/transform-to-' +
-						name.replace( '/', '-' ),
+						( id || name ).replace( /\//g, '-' ),
 					/* translators: %s: Block or block variation name. */
 					label: sprintf( __( 'Transform to %s' ), title ),
 					icon: blockIcon?.src,
 					category: 'command',
 					callback: ( { close } ) => {
-						onBlockTransform( name );
+						onBlockTransform( name, variationName );
 						close();
 					},
 				};

package/src/components/use-block-display-information/index.js

@@ -15,6 +15,8 @@ import { symbol } from '@wordpress/icons';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { isIsolatedEditorKey } from '../../store/private-keys';
 
 /** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */
 
@@ -72,11 +74,13 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! clientId ) {
 				return null;
 			}
+			const blockEditorSelect = select( blockEditorStore );
 			const {
 				getBlockName,
 				getBlockAttributes,
 				__experimentalGetParsedPattern,
-			} = select( blockEditorStore );
+				getSettings,
+			} = blockEditorSelect;
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
@@ -85,11 +89,20 @@ export default function useBlockDisplayInformation( clientId ) {
 				return null;
 			}
 			const attributes = getBlockAttributes( clientId );
+			const { isWithinEditedContentOnlySection } =
+				unlock( blockEditorSelect );
+			const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
 
 			// Check if this block is a pattern
 			const patternName = attributes?.metadata?.patternName;
+			const isEditedContentOnlySection =
+				isWithinEditedContentOnlySection( clientId );
 
-			if ( patternName ) {
+			if (
+				patternName &&
+				! isEditedContentOnlySection &&
+				! isIsolatedEditor
+			) {
 				const pattern = __experimentalGetParsedPattern( patternName );
 				const positionLabel = getPositionTypeLabel( attributes );
 				return {

package/src/components/use-block-display-information/test/index.js

@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { symbol } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import useBlockDisplayInformation from '../';
+import { isIsolatedEditorKey } from '../../../store/private-keys';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '../../../lock-unlock', () => ( {
+	unlock: ( value ) => ( {
+		registerPrivateActions: jest.fn(),
+		registerPrivateSelectors: jest.fn(),
+		...value,
+	} ),
+} ) );
+
+const groupIcon = 'group-icon';
+
+function TestComponent( { onChange } ) {
+	const blockInformation = useBlockDisplayInformation( 'client-id' );
+	useEffect( () => {
+		onChange( blockInformation );
+	}, [ blockInformation, onChange ] );
+	return null;
+}
+
+function setupUseSelect( {
+	attributes = {
+		anchor: 'hero',
+		metadata: {
+			name: 'Hero pattern',
+			patternName: 'theme/hero',
+		},
+		style: {
+			position: {
+				type: 'sticky',
+			},
+		},
+	},
+	blockName = 'core/group',
+	blockType = {
+		name: 'core/group',
+		title: 'Group',
+		icon: groupIcon,
+		description: 'Gather blocks in a layout container.',
+	},
+	getActiveBlockVariation = () => null,
+	settings = {},
+	isWithinEditedSection = false,
+} = {} ) {
+	useSelect.mockImplementation( ( mapSelect ) =>
+		mapSelect( () => ( {
+			getBlockName: () => blockName,
+			getBlockAttributes: () => attributes,
+			getSettings: () => settings,
+			__experimentalGetParsedPattern: () => ( {
+				title: 'Hero pattern',
+				description: 'Pattern description.',
+			} ),
+			isWithinEditedContentOnlySection: () => isWithinEditedSection,
+			getBlockType: () => blockType,
+			getActiveBlockVariation,
+		} ) )
+	);
+}
+
+describe( 'useBlockDisplayInformation', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'displays pattern information for a pattern section that is not being edited', () => {
+		setupUseSelect();
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Pattern',
+				icon: symbol,
+				description: 'Pattern description.',
+				name: 'Hero pattern',
+			} )
+		);
+	} );
+
+	it( 'displays block information for a pattern section that is being edited', () => {
+		setupUseSelect( { isWithinEditedSection: true } );
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Group',
+				icon: groupIcon,
+				description: 'Gather blocks in a layout container.',
+				name: 'Hero pattern',
+			} )
+		);
+	} );
+
+	it( 'displays block information for a pattern wrapper in an isolated editor', () => {
+		setupUseSelect( {
+			attributes: {
+				metadata: {
+					name: 'Header',
+					patternName: 'theme/header-wrapper',
+				},
+			},
+			settings: {
+				[ isIsolatedEditorKey ]: true,
+			},
+		} );
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Group',
+				icon: groupIcon,
+				description: 'Gather blocks in a layout container.',
+				name: 'Header',
+			} )
+		);
+	} );
+} );

package/src/hooks/anchor.js

@@ -5,7 +5,6 @@ import { addFilter } from '@wordpress/hooks';
 import { TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -53,35 +52,27 @@ function BlockEditAnchorControlPure( { anchor, setAttributes } ) {
 		return null;
 	}
 
-	const isWeb = Platform.OS === 'web';
-
 	return (
 		<InspectorControls group="advanced">
 			<TextControl
-				__next40pxDefaultSize
 				className="html-anchor-control"
 				label={ __( 'HTML anchor' ) }
 				help={
 					<>
 						{ __(
 							'Enter a word or two—without spaces—to make a unique web address just for this block, called an “anchor”. Then, you’ll be able to link directly to this section of your page.'
-						) }
-						{ isWeb && (
-							<>
-								{ ' ' }
-								<ExternalLink
-									href={ __(
-										'https://wordpress.org/documentation/article/page-jumps/'
-									) }
-								>
-									{ __( 'Learn more about anchors' ) }
-								</ExternalLink>
-							</>
-						) }
+						) }{ ' ' }
+						<ExternalLink
+							href={ __(
+								'https://wordpress.org/documentation/article/page-jumps/'
+							) }
+						>
+							{ __( 'Learn more about anchors' ) }
+						</ExternalLink>
 					</>
 				}
 				value={ anchor || '' }
-				placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
+				placeholder={ null }
 				onChange={ ( nextValue ) => {
 					nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
 					setAttributes( {