@wordpress/block-editor 12.13.0 → 12.15.0

package/src/components/inserter/media-tab/media-preview.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	__unstableCompositeItem as CompositeItem,
 	Tooltip,
 	DropdownMenu,
 	MenuGroup,
@@ -17,6 +16,7 @@ import {
 	Flex,
 	FlexItem,
 	Button,
+	privateApis as componentsPrivateApis,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -33,6 +33,7 @@ import { isBlobURL } from '@wordpress/blob';
 import InserterDraggableBlocks from '../../inserter-draggable-blocks';
 import { getBlockAndPreviewFromMedia } from './utils';
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const MAXIMUM_TITLE_LENGTH = 25;
@@ -42,6 +43,8 @@ const MEDIA_OPTIONS_POPOVER_PROPS = {
 		'block-editor-inserter__media-list__item-preview-options__popover',
 };
 
+const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
+
 function MediaPreviewOptions( { category, media } ) {
 	if ( ! category.getReportUrl ) {
 		return null;
@@ -113,7 +116,7 @@ function InsertExternalImageModal( { onClose, onSubmit } ) {
 	);
 }
 
-export function MediaPreview( { media, onClick, composite, category } ) {
+export function MediaPreview( { media, onClick, category } ) {
 	const [ showExternalUploadModal, setShowExternalUploadModal ] =
 		useState( false );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -216,20 +219,22 @@ export function MediaPreview( { media, onClick, composite, category } ) {
 						onDragStart={ onDragStart }
 						onDragEnd={ onDragEnd }
 					>
-						<Tooltip text={ truncatedTitle || title }>
-							{ /* Adding `is-hovered` class to the wrapper element is needed
-							because the options Popover is rendered outside of this node. */ }
-							<div
-								onMouseEnter={ onMouseEnter }
-								onMouseLeave={ onMouseLeave }
-							>
+						{ /* Adding `is-hovered` class to the wrapper element is needed
+						because the options Popover is rendered outside of this node. */ }
+						<div
+							onMouseEnter={ onMouseEnter }
+							onMouseLeave={ onMouseLeave }
+						>
+							<Tooltip text={ truncatedTitle || title }>
 								<CompositeItem
-									role="option"
-									as="div"
-									{ ...composite }
-									className="block-editor-inserter__media-list__item"
+									render={
+										<div
+											aria-label={ title }
+											role="option"
+											className="block-editor-inserter__media-list__item"
+										/>
+									}
 									onClick={ () => onMediaInsert( block ) }
-									aria-label={ title }
 								>
 									<div className="block-editor-inserter__media-list__item-preview">
 										{ preview }
@@ -240,14 +245,14 @@ export function MediaPreview( { media, onClick, composite, category } ) {
 										) }
 									</div>
 								</CompositeItem>
-								{ ! isInserting && (
-									<MediaPreviewOptions
-										category={ category }
-										media={ media }
-									/>
-								) }
-							</div>
-						</Tooltip>
+							</Tooltip>
+							{ ! isInserting && (
+								<MediaPreviewOptions
+									category={ category }
+									media={ media }
+								/>
+							) }
+						</div>
 					</div>
 				) }
 			</InserterDraggableBlocks>

package/src/components/inserter/menu.js

@@ -24,9 +24,8 @@ import { useSelect } from '@wordpress/data';
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
-import BlockPatternsTabs, {
-	BlockPatternsCategoryDialog,
-} from './block-patterns-tab';
+import BlockPatternsTab from './block-patterns-tab';
+import { PatternCategoryPreviewPanel } from './block-patterns-tab/pattern-category-preview-panel';
 import { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab';
 import InserterSearchResults from './search-results';
 import useDebouncedInput from './hooks/use-debounced-input';
@@ -160,7 +159,7 @@ function InserterMenu(
 
 	const patternsTab = useMemo(
 		() => (
-			<BlockPatternsTabs
+			<BlockPatternsTab
 				rootClientId={ destinationRootClientId }
 				onInsert={ onInsertPattern }
 				onSelectCategory={ onClickPatternCategory }
@@ -297,7 +296,7 @@ function InserterMenu(
 				<InserterPreviewPanel item={ hoveredItem } />
 			) }
 			{ showPatternPanel && (
-				<BlockPatternsCategoryDialog
+				<PatternCategoryPreviewPanel
 					rootClientId={ destinationRootClientId }
 					onInsert={ onInsertPattern }
 					onHover={ onHoverPattern }

package/src/components/inserter-listbox/index.js

@@ -1,26 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { __unstableUseCompositeState as useCompositeState } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
 
 export { default as InserterListboxGroup } from './group';
 export { default as InserterListboxRow } from './row';
 export { default as InserterListboxItem } from './item';
 
+const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+	unlock( componentsPrivateApis );
+
 function InserterListbox( { children } ) {
-	const compositeState = useCompositeState( {
-		shift: true,
-		wrap: 'horizontal',
+	const store = useCompositeStore( {
+		focusShift: true,
+		focusWrap: 'horizontal',
 	} );
+
 	return (
-		<InserterListboxContext.Provider value={ compositeState }>
+		<Composite store={ store } render={ <></> }>
 			{ children }
-		</InserterListboxContext.Provider>
+		</Composite>
 	);
 }
 

package/src/components/inserter-listbox/item.js

@@ -3,32 +3,31 @@
  */
 import {
 	Button,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { forwardRef, useContext } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 
 function InserterListboxItem(
 	{ isFirst, as: Component, children, ...props },
 	ref
 ) {
-	const state = useContext( InserterListboxContext );
 	return (
 		<CompositeItem
 			ref={ ref }
-			state={ state }
 			role="option"
-			// Use the CompositeItem `focusable` prop over Button's
-			// isFocusable. The latter was shown to cause an issue
-			// with tab order in the inserter list.
-			focusable
+			// Use the CompositeItem `accessibleWhenDisabled` prop
+			// over Button's `isFocusable`. The latter was shown to
+			// cause an issue with tab order in the inserter list.
+			accessibleWhenDisabled
 			{ ...props }
-		>
-			{ ( htmlProps ) => {
+			render={ ( htmlProps ) => {
 				const propsWithTabIndex = {
 					...htmlProps,
 					tabIndex: isFirst ? 0 : htmlProps.tabIndex,
@@ -45,7 +44,7 @@ function InserterListboxItem(
 				}
 				return <Button { ...propsWithTabIndex }>{ children }</Button>;
 			} }
-		</CompositeItem>
+		/>
 	);
 }
 

package/src/components/inserter-listbox/row.js

@@ -1,24 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef, useContext } from '@wordpress/element';
-import { __unstableCompositeGroup as CompositeGroup } from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import InserterListboxContext from './context';
+import { unlock } from '../../lock-unlock';
+
+const { CompositeGroupV2: CompositeGroup } = unlock( componentsPrivateApis );
 
 function InserterListboxRow( props, ref ) {
-	const state = useContext( InserterListboxContext );
-	return (
-		<CompositeGroup
-			state={ state }
-			role="presentation"
-			ref={ ref }
-			{ ...props }
-		/>
-	);
+	return <CompositeGroup role="presentation" ref={ ref } { ...props } />;
 }
 
 export default forwardRef( InserterListboxRow );

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

@@ -275,14 +275,14 @@ If passed, children are rendered after the input.
 
 ```jsx
 <LinkControlSearchInput>
-	<div className="block-editor-link-control__search-actions">
+	<HStack justify="right">
 		<Button
 			type="submit"
 			label={ __( 'Submit' ) }
 			icon={ keyboardReturn }
 			className="block-editor-link-control__search-submit"
 		/>
-	</div>
+	</HStack>
 </LinkControlSearchInput>
 ```
 

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

@@ -6,7 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
+import {
+	Button,
+	Spinner,
+	Notice,
+	TextControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
@@ -467,7 +473,13 @@ function LinkControl( {
 			) }
 
 			{ showActions && (
-				<div className="block-editor-link-control__search-actions">
+				<HStack
+					justify="right"
+					className="block-editor-link-control__search-actions"
+				>
+					<Button variant="tertiary" onClick={ handleCancel }>
+						{ __( 'Cancel' ) }
+					</Button>
 					<Button
 						variant="primary"
 						onClick={ isDisabled ? noop : handleSubmit }
@@ -476,10 +488,7 @@ function LinkControl( {
 					>
 						{ __( 'Save' ) }
 					</Button>
-					<Button variant="tertiary" onClick={ handleCancel }>
-						{ __( 'Cancel' ) }
-					</Button>
-				</div>
+				</HStack>
 			) }
 
 			{ renderControlBottom && renderControlBottom() }

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

@@ -61,6 +61,10 @@ $preview-image-height: 140px;
 .block-editor-link-control__field {
 	margin: $grid-unit-20; // allow margin collapse for vertical spacing.
 
+	.components-base-control__label {
+		color: $gray-900;
+	}
+
 	input[type="text"],
 	// Specificity overide of URLInput defaults.
 	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
@@ -92,12 +96,7 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-actions {
-	display: flex;
-	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 $grid-unit-20 $grid-unit-20;
-	order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
@@ -419,6 +418,10 @@ $preview-image-height: 140px;
 
 	.components-base-control__field {
 		display: flex; // don't allow label to wrap under checkbox.
+
+		.components-checkbox-control__label {
+			color: $gray-900;
+		}
 	}
 
 	// Cancel left margin inherited from WP Admin Forms CSS.

package/src/components/list-view/block-select-button.js

@@ -19,6 +19,7 @@ import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { __, sprintf } from '@wordpress/i18n';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -30,6 +31,7 @@ import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 import useListViewImages from './use-list-view-images';
+import { useListViewContext } from './context';
 
 function ListViewBlockSelectButton(
 	{
@@ -64,10 +66,12 @@ function ListViewBlockSelectButton(
 		getBlocksByClientId,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
-	const { duplicateBlocks, removeBlocks } = useDispatch( blockEditorStore );
+	const { duplicateBlocks, multiSelect, removeBlocks } =
+		useDispatch( blockEditorStore );
 	const isMatch = useShortcutEventMatch();
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
+	const { rootClientId } = useListViewContext();
 
 	const positionLabel = blockInformation?.positionLabel
 		? sprintf(
@@ -183,6 +187,45 @@ function ListViewBlockSelectButton(
 					updateFocusAndSelection( updatedBlocks[ 0 ], false );
 				}
 			}
+		} else if ( isMatch( 'core/block-editor/select-all', event ) ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			event.preventDefault();
+
+			const { firstBlockRootClientId, selectedBlockClientIds } =
+				getBlocksToUpdate();
+			const blockClientIds = getBlockOrder( firstBlockRootClientId );
+			if ( ! blockClientIds.length ) {
+				return;
+			}
+
+			// If we have selected all sibling nested blocks, try selecting up a level.
+			// This is a similar implementation to that used by `useSelectAll`.
+			// `isShallowEqual` is used for the list view instead of a length check,
+			// as the array of siblings of the currently focused block may be a different
+			// set of blocks from the current block selection if the user is focused
+			// on a different part of the list view from the block selection.
+			if ( isShallowEqual( selectedBlockClientIds, blockClientIds ) ) {
+				// Only select up a level if the first block is not the root block.
+				// This ensures that the block selection can't break out of the root block
+				// used by the list view, if the list view is only showing a partial hierarchy.
+				if (
+					firstBlockRootClientId &&
+					firstBlockRootClientId !== rootClientId
+				) {
+					updateFocusAndSelection( firstBlockRootClientId, true );
+					return;
+				}
+			}
+
+			// Select all while passing `null` to skip focusing to the editor canvas,
+			// and retain focus within the list view.
+			multiSelect(
+				blockClientIds[ 0 ],
+				blockClientIds[ blockClientIds.length - 1 ],
+				null
+			);
 		}
 	}
 

package/src/components/list-view/block.js

@@ -69,17 +69,17 @@ function ListViewBlock( {
 	const blockTitle =
 		blockInformation?.name || blockInformation?.title || __( 'Untitled' );
 
-	const block = useSelect(
-		( select ) => select( blockEditorStore ).getBlock( clientId ),
-		[ clientId ]
-	);
-	const blockName = useSelect(
-		( select ) => select( blockEditorStore ).getBlockName( clientId ),
-		[ clientId ]
-	);
-	const blockEditingMode = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockEditingMode( clientId ),
+	const { block, blockName, blockEditingMode } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockName, getBlockEditingMode } =
+				select( blockEditorStore );
+
+			return {
+				block: getBlock( clientId ),
+				blockName: getBlockName( clientId ),
+				blockEditingMode: getBlockEditingMode( clientId ),
+			};
+		},
 		[ clientId ]
 	);
 

package/src/components/list-view/index.js

@@ -222,6 +222,7 @@ function ListViewComponent(
 			insertedBlock,
 			setInsertedBlock,
 			treeGridElementRef: elementRef,
+			rootClientId,
 		} ),
 		[
 			draggedClientIds,
@@ -233,6 +234,7 @@ function ListViewComponent(
 			AdditionalBlockContent,
 			insertedBlock,
 			setInsertedBlock,
+			rootClientId,
 		]
 	);
 

package/src/components/list-view/use-list-view-expand-selected-item.js

@@ -27,12 +27,6 @@ export default function useListViewExpandSelectedItem( {
 		[ firstSelectedBlockClientId ]
 	);
 
-	const parentClientIds =
-		Array.isArray( selectedBlockParentClientIds ) &&
-		selectedBlockParentClientIds.length
-			? selectedBlockParentClientIds
-			: null;
-
 	// Expand tree when a block is selected.
 	useEffect( () => {
 		// If the selectedTreeId is the same as the selected block,
@@ -42,7 +36,7 @@ export default function useListViewExpandSelectedItem( {
 		}
 
 		// If the selected block has parents, get the top-level parent.
-		if ( parentClientIds ) {
+		if ( selectedBlockParentClientIds?.length ) {
 			// If the selected block has parents,
 			// expand the tree branch.
 			setExpandedState( {
@@ -50,7 +44,12 @@ export default function useListViewExpandSelectedItem( {
 				clientIds: selectedBlockParentClientIds,
 			} );
 		}
-	}, [ firstSelectedBlockClientId ] );
+	}, [
+		firstSelectedBlockClientId,
+		selectedBlockParentClientIds,
+		selectedTreeId,
+		setExpandedState,
+	] );
 
 	return {
 		setSelectedTreeId,

package/src/components/media-replace-flow/style.scss

@@ -17,6 +17,7 @@
 	&.has-siblings {
 		border-top: $border-width solid $gray-900;
 		margin-top: $grid-unit-10;
+		padding-bottom: $grid-unit-10;
 	}
 
 	.block-editor-media-replace-flow__image-url-label {
@@ -55,8 +56,7 @@
 		}
 
 		.block-editor-link-control__search-actions {
-			top: 0; // cancel default top positioning
-			right: 4px;
+			padding: $grid-unit-10 0 0;
 		}
 	}
 }