@wordpress/block-editor 12.13.0 → 12.14.0

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -0,0 +1,175 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useMemo,
+	useState,
+	useCallback,
+	useRef,
+	useEffect,
+} from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	FlexBlock,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import usePatternsState from '../hooks/use-patterns-state';
+import BlockPatternList from '../../block-patterns-list';
+import usePatternsPaging from '../hooks/use-patterns-paging';
+import { PatternsFilter } from './patterns-filter';
+import { usePatternCategories } from './use-pattern-categories';
+import {
+	isPatternFiltered,
+	allPatternsCategory,
+	myPatternsCategory,
+} from './utils';
+
+const noop = () => {};
+
+export function PatternCategoryPreviews( {
+	rootClientId,
+	onInsert,
+	onHover = noop,
+	category,
+	showTitlesAsTooltip,
+} ) {
+	const [ allPatterns, , onClickPattern ] = usePatternsState(
+		onInsert,
+		rootClientId
+	);
+	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
+	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
+
+	const availableCategories = usePatternCategories(
+		rootClientId,
+		patternSourceFilter
+	);
+	const scrollContainerRef = useRef();
+	const currentCategoryPatterns = useMemo(
+		() =>
+			allPatterns.filter( ( pattern ) => {
+				if (
+					isPatternFiltered(
+						pattern,
+						patternSourceFilter,
+						patternSyncFilter
+					)
+				) {
+					return false;
+				}
+
+				if ( category.name === allPatternsCategory.name ) {
+					return true;
+				}
+				if ( category.name === myPatternsCategory.name && pattern.id ) {
+					return true;
+				}
+				if ( category.name !== 'uncategorized' ) {
+					return pattern.categories?.includes( category.name );
+				}
+
+				// The uncategorized category should show all the patterns without any category
+				// or with no available category.
+				const availablePatternCategories =
+					pattern.categories?.filter( ( cat ) =>
+						availableCategories.find(
+							( availableCategory ) =>
+								availableCategory.name === cat
+						)
+					) ?? [];
+
+				return availablePatternCategories.length === 0;
+			} ),
+		[
+			allPatterns,
+			availableCategories,
+			category.name,
+			patternSourceFilter,
+			patternSyncFilter,
+		]
+	);
+
+	const pagingProps = usePatternsPaging(
+		currentCategoryPatterns,
+		category,
+		scrollContainerRef
+	);
+	const { changePage } = pagingProps;
+
+	// Hide block pattern preview on unmount.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect( () => () => onHover( null ), [] );
+
+	const onSetPatternSyncFilter = useCallback(
+		( value ) => {
+			setPatternSyncFilter( value );
+			changePage( 1 );
+		},
+		[ setPatternSyncFilter, changePage ]
+	);
+	const onSetPatternSourceFilter = useCallback(
+		( value ) => {
+			setPatternSourceFilter( value );
+			changePage( 1 );
+		},
+		[ setPatternSourceFilter, changePage ]
+	);
+
+	return (
+		<div className="block-editor-inserter__patterns-category-panel">
+			<VStack
+				spacing={ 2 }
+				className="block-editor-inserter__patterns-category-panel-header"
+			>
+				<HStack>
+					<FlexBlock>
+						<Heading level={ 4 } as="div">
+							{ category.label }
+						</Heading>
+					</FlexBlock>
+					<PatternsFilter
+						patternSyncFilter={ patternSyncFilter }
+						patternSourceFilter={ patternSourceFilter }
+						setPatternSyncFilter={ onSetPatternSyncFilter }
+						setPatternSourceFilter={ onSetPatternSourceFilter }
+						scrollContainerRef={ scrollContainerRef }
+						category={ category }
+					/>
+				</HStack>
+				{ ! currentCategoryPatterns.length && (
+					<Text
+						variant="muted"
+						className="block-editor-inserter__patterns-category-no-results"
+					>
+						{ __( 'No results found' ) }
+					</Text>
+				) }
+			</VStack>
+
+			{ currentCategoryPatterns.length > 0 && (
+				<BlockPatternList
+					ref={ scrollContainerRef }
+					shownPatterns={ pagingProps.categoryPatternsAsyncList }
+					blockPatterns={ pagingProps.categoryPatterns }
+					onClickPattern={ onClickPattern }
+					onHover={ onHover }
+					label={ category.label }
+					orientation="vertical"
+					category={ category.name }
+					isDraggable
+					showTitlesAsTooltip={ showTitlesAsTooltip }
+					patternFilter={ patternSourceFilter }
+					pagingProps={ pagingProps }
+				/>
+			) }
+		</div>
+	);
+}

package/src/components/inserter/{block-patterns-filter.js → block-patterns-tab/patterns-filter.js}

@@ -9,29 +9,14 @@ import {
 	MenuItemsChoice,
 	ExternalLink,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useMemo, createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { myPatternsCategory } from './block-patterns-tab';
-
-export const PATTERN_TYPES = {
-	all: 'all',
-	synced: 'synced',
-	unsynced: 'unsynced',
-	user: 'user',
-	theme: 'theme',
-	directory: 'directory',
-};
-
-export const SYNC_TYPES = {
-	all: 'all',
-	full: 'fully',
-	unsynced: 'unsynced',
-};
+import { myPatternsCategory, SYNC_TYPES, PATTERN_TYPES } from './utils';
 
 const getShouldDisableSyncFilter = ( sourceFilter ) =>
 	sourceFilter !== PATTERN_TYPES.all && sourceFilter !== PATTERN_TYPES.user;
@@ -40,7 +25,7 @@ const getShouldDisableNonUserSources = ( category ) => {
 	return category.name === myPatternsCategory.name;
 };
 
-export function BlockPatternsSyncFilter( {
+export function PatternsFilter( {
 	setPatternSyncFilter,
 	setPatternSourceFilter,
 	patternSyncFilter,
@@ -70,15 +55,24 @@ export function BlockPatternsSyncFilter( {
 
 	const patternSyncMenuOptions = useMemo(
 		() => [
-			{ value: SYNC_TYPES.all, label: __( 'All' ) },
+			{
+				value: SYNC_TYPES.all,
+				label: _x( 'All', 'Option that shows all patterns' ),
+			},
 			{
 				value: SYNC_TYPES.full,
-				label: __( 'Synced' ),
+				label: _x(
+					'Synced',
+					'Option that shows all synchronized patterns'
+				),
 				disabled: shouldDisableSyncFilter,
 			},
 			{
 				value: SYNC_TYPES.unsynced,
-				label: __( 'Not synced' ),
+				label: _x(
+					'Not synced',
+					'Option that shows all patterns that are not synchronized'
+				),
 				disabled: shouldDisableSyncFilter,
 			},
 		],

package/src/components/inserter/block-patterns-tab/use-pattern-categories.js

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useCallback } from '@wordpress/element';
+import { _x, _n, sprintf } from '@wordpress/i18n';
+
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import usePatternsState from '../hooks/use-patterns-state';
+import {
+	isPatternFiltered,
+	allPatternsCategory,
+	myPatternsCategory,
+} from './utils';
+
+export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
+	const [ patterns, allCategories ] = usePatternsState(
+		undefined,
+		rootClientId
+	);
+
+	const filteredPatterns = useMemo(
+		() =>
+			sourceFilter === 'all'
+				? patterns
+				: patterns.filter(
+						( pattern ) =>
+							! isPatternFiltered( pattern, sourceFilter )
+				  ),
+		[ sourceFilter, patterns ]
+	);
+
+	const hasRegisteredCategory = useCallback(
+		( pattern ) => {
+			if ( ! pattern.categories || ! pattern.categories.length ) {
+				return false;
+			}
+
+			return pattern.categories.some( ( cat ) =>
+				allCategories.some( ( category ) => category.name === cat )
+			);
+		},
+		[ allCategories ]
+	);
+
+	// Remove any empty categories.
+	const populatedCategories = useMemo( () => {
+		const categories = allCategories
+			.filter( ( category ) =>
+				filteredPatterns.some( ( pattern ) =>
+					pattern.categories?.includes( category.name )
+				)
+			)
+			.sort( ( a, b ) => a.label.localeCompare( b.label ) );
+
+		if (
+			filteredPatterns.some(
+				( pattern ) => ! hasRegisteredCategory( pattern )
+			) &&
+			! categories.find(
+				( category ) => category.name === 'uncategorized'
+			)
+		) {
+			categories.push( {
+				name: 'uncategorized',
+				label: _x( 'Uncategorized' ),
+			} );
+		}
+		if ( filteredPatterns.some( ( pattern ) => pattern.id ) ) {
+			categories.unshift( myPatternsCategory );
+		}
+		if ( filteredPatterns.length > 0 ) {
+			categories.unshift( {
+				name: allPatternsCategory.name,
+				label: allPatternsCategory.label,
+			} );
+		}
+		speak(
+			sprintf(
+				/* translators: %d: number of categories . */
+				_n(
+					'%d category button displayed.',
+					'%d category buttons displayed.',
+					categories.length
+				),
+				categories.length
+			)
+		);
+		return categories;
+	}, [ allCategories, filteredPatterns, hasRegisteredCategory ] );
+
+	return populatedCategories;
+}

package/src/components/inserter/block-patterns-tab/utils.js

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+
+export const PATTERN_TYPES = {
+	all: 'all',
+	synced: 'synced',
+	unsynced: 'unsynced',
+	user: 'user',
+	theme: 'theme',
+	directory: 'directory',
+};
+
+export const SYNC_TYPES = {
+	all: 'all',
+	full: 'fully',
+	unsynced: 'unsynced',
+};
+
+export const allPatternsCategory = {
+	name: 'allPatterns',
+	label: __( 'All patterns' ),
+};
+
+export const myPatternsCategory = {
+	name: 'myPatterns',
+	label: __( 'My patterns' ),
+};
+
+export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
+	const isUserPattern = pattern.name.startsWith( 'core/block' );
+	const isDirectoryPattern =
+		pattern.source === 'core' ||
+		pattern.source?.startsWith( 'pattern-directory' );
+
+	// If theme source selected, filter out user created patterns and those from
+	// the core patterns directory.
+	if (
+		sourceFilter === PATTERN_TYPES.theme &&
+		( isUserPattern || isDirectoryPattern )
+	) {
+		return true;
+	}
+
+	// If the directory source is selected, filter out user created patterns
+	// and those bundled with the theme.
+	if (
+		sourceFilter === PATTERN_TYPES.directory &&
+		( isUserPattern || ! isDirectoryPattern )
+	) {
+		return true;
+	}
+
+	// If user source selected, filter out theme patterns. Any pattern without
+	// an id wasn't created by a user.
+	if ( sourceFilter === PATTERN_TYPES.user && ! pattern.id ) {
+		return true;
+	}
+
+	// Filter by sync status.
+	if ( syncFilter === SYNC_TYPES.full && pattern.syncStatus !== '' ) {
+		return true;
+	}
+
+	if (
+		syncFilter === SYNC_TYPES.unsynced &&
+		pattern.syncStatus !== 'unsynced' &&
+		isUserPattern
+	) {
+		return true;
+	}
+
+	return false;
+}

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

@@ -1,16 +1,17 @@
 /**
  * WordPress dependencies
  */
-import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-} from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { MediaPreview } from './media-preview';
+import { unlock } from '../../../lock-unlock';
+
+const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+	unlock( componentsPrivateApis );
 
 function MediaList( {
 	mediaList,
@@ -18,10 +19,10 @@ function MediaList( {
 	onClick,
 	label = __( 'Media List' ),
 } ) {
-	const composite = useCompositeState();
+	const compositeStore = useCompositeStore();
 	return (
 		<Composite
-			{ ...composite }
+			store={ compositeStore }
 			role="listbox"
 			className="block-editor-inserter__media-list"
 			aria-label={ label }
@@ -32,7 +33,6 @@ function MediaList( {
 					media={ media }
 					category={ category }
 					onClick={ onClick }
-					composite={ composite }
 				/>
 			) ) }
 		</Composite>

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/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.