@wordpress/block-editor 12.14.0 → 12.15.0

package/src/components/block-patterns-list/index.js

@@ -6,13 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, forwardRef } from '@wordpress/element';
+import { useEffect, useState, forwardRef } from '@wordpress/element';
 import {
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 	Tooltip,
+	privateApis as componentsPrivateApis,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
@@ -22,9 +20,17 @@ import { Icon, symbol } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 import BlockPatternsPaging from '../block-patterns-paging';
+import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
 
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
@@ -34,11 +40,11 @@ const WithToolTip = ( { showTooltip, title, children } ) => {
 };
 
 function BlockPattern( {
+	id,
 	isDraggable,
 	pattern,
 	onClick,
 	onHover,
-	composite,
 	showTooltip,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
@@ -71,20 +77,33 @@ function BlockPattern( {
 					} }
 				>
 					<WithToolTip
-						showTooltip={ showTooltip && ! pattern.id }
+						showTooltip={
+							showTooltip && ! pattern.type !== PATTERN_TYPES.user
+						}
 						title={ pattern.title }
 					>
 						<CompositeItem
-							role="option"
-							as="div"
-							{ ...composite }
-							className={ classnames(
-								'block-editor-block-patterns-list__item',
-								{
-									'block-editor-block-patterns-list__list-item-synced':
-										pattern.id && ! pattern.syncStatus,
-								}
-							) }
+							render={
+								<div
+									role="option"
+									aria-label={ pattern.title }
+									aria-describedby={
+										pattern.description
+											? descriptionId
+											: undefined
+									}
+									className={ classnames(
+										'block-editor-block-patterns-list__item',
+										{
+											'block-editor-block-patterns-list__list-item-synced':
+												pattern.type ===
+													PATTERN_TYPES.user &&
+												! pattern.syncStatus,
+										}
+									) }
+								/>
+							}
+							id={ id }
 							onClick={ () => {
 								onClick( pattern, blocks );
 								onHover?.( null );
@@ -96,10 +115,6 @@ function BlockPattern( {
 								onHover?.( pattern );
 							} }
 							onMouseLeave={ () => onHover?.( null ) }
-							aria-label={ pattern.title }
-							aria-describedby={
-								pattern.description ? descriptionId : undefined
-							}
 						>
 							<BlockPreview
 								blocks={ blocks }
@@ -107,15 +122,17 @@ function BlockPattern( {
 							/>
 
 							<HStack className="block-editor-patterns__pattern-details">
-								{ pattern.id && ! pattern.syncStatus && (
-									<div className="block-editor-patterns__pattern-icon-wrapper">
-										<Icon
-											className="block-editor-patterns__pattern-icon"
-											icon={ symbol }
-										/>
-									</div>
-								) }
-								{ ( ! showTooltip || pattern.id ) && (
+								{ pattern.type === PATTERN_TYPES.user &&
+									! pattern.syncStatus && (
+										<div className="block-editor-patterns__pattern-icon-wrapper">
+											<Icon
+												className="block-editor-patterns__pattern-icon"
+												icon={ symbol }
+											/>
+										</div>
+									) }
+								{ ( ! showTooltip ||
+									pattern.type === PATTERN_TYPES.user ) && (
 									<div className="block-editor-block-patterns-list__item-title">
 										{ pattern.title }
 									</div>
@@ -141,7 +158,7 @@ function BlockPatternPlaceholder() {
 	);
 }
 
-function BlockPatternList(
+function BlockPatternsList(
 	{
 		isDraggable,
 		blockPatterns,
@@ -155,10 +172,19 @@ function BlockPatternList(
 	},
 	ref
 ) {
-	const composite = useCompositeState( { orientation } );
+	const compositeStore = useCompositeStore( { orientation } );
+	const { setActiveId } = compositeStore;
+
+	useEffect( () => {
+		// We reset the active composite item whenever the
+		// available patterns change, to make sure that
+		// focus is put back to the start.
+		setActiveId( undefined );
+	}, [ setActiveId, shownPatterns, blockPatterns ] );
+
 	return (
 		<Composite
-			{ ...composite }
+			store={ compositeStore }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }
@@ -169,11 +195,11 @@ function BlockPatternList(
 				return isShown ? (
 					<BlockPattern
 						key={ pattern.name }
+						id={ pattern.name }
 						pattern={ pattern }
 						onClick={ onClickPattern }
 						onHover={ onHover }
 						isDraggable={ isDraggable }
-						composite={ composite }
 						showTooltip={ showTitlesAsTooltip }
 					/>
 				) : (
@@ -185,4 +211,4 @@ function BlockPatternList(
 	);
 }
 
-export default forwardRef( BlockPatternList );
+export default forwardRef( BlockPatternsList );

package/src/components/block-patterns-list/style.scss

@@ -18,6 +18,13 @@
 
 .block-editor-block-patterns-list__item {
 	height: 100%;
+	// This is derived from the top padding set on
+	// `.block-editor-block-patterns-explorer__list`
+	scroll-margin-top: $grid-unit-30;
+	// This is derived from the bottom padding set on
+	// `.block-editor-block-patterns-explorer__list` and
+	// the bottom margin set on `...__list-item` above
+	scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30);
 
 	.block-editor-block-preview__container {
 		display: flex;

package/src/components/block-rename/index.js

@@ -0,0 +1,3 @@
+export { default as BlockRenameControl } from './rename-control';
+export { default as BlockRenameModal } from './modal';
+export { default as useBlockRename } from './use-block-rename';

package/src/components/block-rename/is-empty-string.js

@@ -0,0 +1,3 @@
+export default function isEmptyString( testString ) {
+	return testString?.trim()?.length === 0;
+}

package/src/components/block-rename/modal.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	TextControl,
+	Modal,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import isEmptyString from './is-empty-string';
+
+export default function BlockRenameModal( {
+	blockName,
+	originalBlockName,
+	onClose,
+	onSave,
+} ) {
+	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
+
+	const nameHasChanged = editedBlockName !== blockName;
+	const nameIsOriginal = editedBlockName === originalBlockName;
+	const nameIsEmpty = isEmptyString( editedBlockName );
+
+	const isNameValid = nameHasChanged || nameIsOriginal;
+
+	const autoSelectInputText = ( event ) => event.target.select();
+
+	const dialogDescription = useInstanceId(
+		BlockRenameModal,
+		`block-editor-rename-modal__description`
+	);
+
+	const handleSubmit = () => {
+		const message =
+			nameIsOriginal || nameIsEmpty
+				? sprintf(
+						/* translators: %s: new name/label for the block */
+						__( 'Block name reset to: "%s".' ),
+						editedBlockName
+				  )
+				: sprintf(
+						/* translators: %s: new name/label for the block */
+						__( 'Block name changed to: "%s".' ),
+						editedBlockName
+				  );
+
+		// Must be assertive to immediately announce change.
+		speak( message, 'assertive' );
+		onSave( editedBlockName );
+
+		// Immediate close avoids ability to hit save multiple times.
+		onClose();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Rename' ) }
+			onRequestClose={ onClose }
+			overlayClassName="block-editor-block-rename-modal"
+			aria={ {
+				describedby: dialogDescription,
+			} }
+			focusOnMount="firstContentElement"
+		>
+			<p id={ dialogDescription }>
+				{ __( 'Enter a custom name for this block.' ) }
+			</p>
+			<form
+				onSubmit={ ( e ) => {
+					e.preventDefault();
+
+					if ( ! isNameValid ) {
+						return;
+					}
+
+					handleSubmit();
+				} }
+			>
+				<VStack spacing="3">
+					<TextControl
+						__nextHasNoMarginBottom
+						value={ editedBlockName }
+						label={ __( 'Block name' ) }
+						hideLabelFromVision={ true }
+						placeholder={ originalBlockName }
+						onChange={ setEditedBlockName }
+						onFocus={ autoSelectInputText }
+					/>
+					<HStack justify="right">
+						<Button variant="tertiary" onClick={ onClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							aria-disabled={ ! isNameValid }
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

package/src/components/block-rename/rename-control.js

@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useBlockDisplayInformation } from '..';
+import isEmptyString from './is-empty-string';
+import BlockRenameModal from './modal';
+
+export default function BlockRenameControl( { clientId } ) {
+	const [ renamingBlock, setRenamingBlock ] = useState( false );
+
+	const { metadata } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+
+			const _metadata = getBlockAttributes( clientId )?.metadata;
+			return {
+				metadata: _metadata,
+			};
+		},
+		[ clientId ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const customName = metadata?.name;
+
+	function onChange( newName ) {
+		updateBlockAttributes( [ clientId ], {
+			metadata: {
+				...( metadata && metadata ),
+				name: newName,
+			},
+		} );
+	}
+
+	const blockInformation = useBlockDisplayInformation( clientId );
+
+	return (
+		<>
+			<MenuItem
+				onClick={ () => {
+					setRenamingBlock( true );
+				} }
+				aria-expanded={ renamingBlock }
+				aria-haspopup="dialog"
+			>
+				{ __( 'Rename' ) }
+			</MenuItem>
+			{ renamingBlock && (
+				<BlockRenameModal
+					blockName={ customName || '' }
+					originalBlockName={ blockInformation?.title }
+					onClose={ () => setRenamingBlock( false ) }
+					onSave={ ( newName ) => {
+						// If the new value is the block's original name (e.g. `Group`)
+						// or it is an empty string then assume the intent is to reset
+						// the value. Therefore reset the metadata.
+						if (
+							newName === blockInformation?.title ||
+							isEmptyString( newName )
+						) {
+							newName = undefined;
+						}
+
+						onChange( newName );
+					} }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/block-rename/use-block-rename.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+
+export default function useBlockRename( name ) {
+	return {
+		canRename: getBlockSupport( name, 'renaming', true ),
+	};
+}

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -20,7 +20,7 @@ import {
 	store as keyboardShortcutsStore,
 	__unstableUseShortcutEventMatch,
 } from '@wordpress/keyboard-shortcuts';
-import { pipe, useCopyToClipboard } from '@wordpress/compose';
+import { pipe, useCopyToClipboard, useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -47,6 +47,38 @@ function CopyMenuItem( { blocks, onCopy, label } ) {
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
+function ParentSelectorMenuItem( { parentClientId, parentBlockType } ) {
+	const isSmallViewport = useViewportMatch( 'medium', '<' );
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	// Allows highlighting the parent block outline when focusing or hovering
+	// the parent block selector within the child.
+	const menuItemRef = useRef();
+	const gesturesProps = useShowHoveredOrFocusedGestures( {
+		ref: menuItemRef,
+		highlightParent: true,
+	} );
+
+	if ( ! isSmallViewport ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			{ ...gesturesProps }
+			ref={ menuItemRef }
+			icon={ <BlockIcon icon={ parentBlockType.icon } /> }
+			onClick={ () => selectBlock( parentClientId ) }
+		>
+			{ sprintf(
+				/* translators: %s: Name of the block's parent. */
+				__( 'Select parent block (%s)' ),
+				parentBlockType.title
+			) }
+		</MenuItem>
+	);
+}
+
 export function BlockSettingsDropdown( {
 	block,
 	clientIds,
@@ -132,8 +164,6 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 	const isMatch = __unstableUseShortcutEventMatch();
-
-	const { selectBlock } = useDispatch( blockEditorStore );
 	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
 
 	const updateSelectionAfterDuplicate = useCallback(
@@ -175,14 +205,6 @@ export function BlockSettingsDropdown( {
 	const removeBlockLabel =
 		count === 1 ? __( 'Delete' ) : __( 'Delete blocks' );
 
-	// Allows highlighting the parent block outline when focusing or hovering
-	// the parent block selector within the child.
-	const selectParentButtonRef = useRef();
-	const showParentOutlineGestures = useShowHoveredOrFocusedGestures( {
-		ref: selectParentButtonRef,
-		highlightParent: true,
-	} );
-
 	// This can occur when the selected block (the parent)
 	// displays child blocks within a List View.
 	const parentBlockIsSelected =
@@ -297,30 +319,12 @@ export function BlockSettingsDropdown( {
 								/>
 								{ ! parentBlockIsSelected &&
 									!! firstParentClientId && (
-										<MenuItem
-											{ ...showParentOutlineGestures }
-											ref={ selectParentButtonRef }
-											icon={
-												<BlockIcon
-													icon={
-														parentBlockType.icon
-													}
-												/>
-											}
-											onClick={ () =>
-												selectBlock(
-													firstParentClientId
-												)
+										<ParentSelectorMenuItem
+											parentClientId={
+												firstParentClientId
 											}
-										>
-											{ sprintf(
-												/* translators: %s: Name of the block's parent. */
-												__(
-													'Select parent block (%s)'
-												),
-												parentBlockType.title
-											) }
-										</MenuItem>
+											parentBlockType={ parentBlockType }
+										/>
 									) }
 								{ count === 1 && (
 									<BlockHTMLConvertButton

package/src/components/block-settings-menu-controls/index.js

@@ -22,6 +22,8 @@ import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
 
+import { BlockRenameControl, useBlockRename } from '../block-rename';
+
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( {
@@ -44,7 +46,9 @@ const BlockSettingsMenuControlsSlot = ( {
 	);
 
 	const { canLock } = useBlockLock( selectedClientIds[ 0 ] );
+	const { canRename } = useBlockRename( selectedBlocks[ 0 ] );
 	const showLockButton = selectedClientIds.length === 1 && canLock;
+	const showRenameButton = selectedClientIds.length === 1 && canRename;
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
@@ -84,6 +88,11 @@ const BlockSettingsMenuControlsSlot = ( {
 								clientId={ selectedClientIds[ 0 ] }
 							/>
 						) }
+						{ showRenameButton && (
+							<BlockRenameControl
+								clientId={ selectedClientIds[ 0 ] }
+							/>
+						) }
 						{ fills }
 						{ fillProps?.canMove && ! fillProps?.onlyBlock && (
 							<MenuItem

package/src/components/block-toolbar/block-toolbar-menu.native.js

@@ -212,10 +212,7 @@ const BlockActionsMenu = ( {
 		},
 		convertToRegularBlocks: {
 			id: 'convertToRegularBlocksOption',
-			label:
-				innerBlockCount > 1
-					? __( 'Detach patterns' )
-					: __( 'Detach pattern' ),
+			label: __( 'Detach' ),
 			value: 'convertToRegularBlocksOption',
 			onSelect: () => {
 				/* translators: %s: name of the synced block */

package/src/components/block-types-list/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,11 +26,10 @@ function BlockTypesList( {
 	label,
 	isDraggable = true,
 } ) {
+	const className = 'block-editor-block-types-list';
+	const listId = useInstanceId( BlockTypesList, className );
 	return (
-		<InserterListboxGroup
-			className="block-editor-block-types-list"
-			aria-label={ label }
-		>
+		<InserterListboxGroup className={ className } aria-label={ label }>
 			{ chunk( items, 3 ).map( ( row, i ) => (
 				<InserterListboxRow key={ i }>
 					{ row.map( ( item, j ) => (
@@ -43,6 +43,7 @@ function BlockTypesList( {
 							onHover={ onHover }
 							isDraggable={ isDraggable && ! item.isDisabled }
 							isFirst={ i === 0 && j === 0 }
+							rowId={ `${ listId }-${ i }` }
 						/>
 					) ) }
 				</InserterListboxRow>

package/src/components/button-block-appender/content.scss

@@ -39,8 +39,8 @@
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
 	// Legacy groups have an inner container so need to be targeted separately
-	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > &,
-	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > & {
+	.block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > &,
+	.block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > & {
 		pointer-events: none;
 
 		&::after {

package/src/components/date-format-picker/index.js

@@ -78,12 +78,19 @@ function NonDefaultControls( { format, onChange } ) {
 	// formats.
 	const suggestedFormats = [
 		...new Set( [
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			'Y-m-d',
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'n/j/Y', 'short date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'n/j/Y g:i A', 'short date format with time' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j, Y', 'medium date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j, Y g:i A', 'medium date format with time' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'F j, Y', 'long date format' ),
+			/* translators: See https://www.php.net/manual/datetime.format.php */
 			_x( 'M j', 'short date format without the year' ),
 		] ),
 	];

package/src/components/editable-text/README.md

@@ -47,40 +47,6 @@ _Optional._ Called when the block can be removed. `forward` is true when the sel
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			source: 'html',
-			selector: 'div',
-		},
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.editor.EditableText, {
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return React.createElement( wp.editor.EditableText.Content, {
-			value: props.attributes.content
-		} );
-	}
-} );
-```
-
-{% ESNext %}
-
 ```js
 const { registerBlockType } = wp.blocks;
 const { EditableText } = wp.editor;
@@ -110,5 +76,3 @@ registerBlockType( /* ... */, {
 	}
 } );
 ```
-
-{% end %}

package/src/components/global-styles/advanced-panel.js

@@ -30,7 +30,7 @@ export default function AdvancedPanel( {
 		} );
 		if ( cssError ) {
 			const [ transformed ] = transformStyles(
-				[ { css: value } ],
+				[ { css: newValue } ],
 				'.editor-styles-wrapper'
 			);
 			if ( transformed ) {