@wordpress/block-editor 12.13.0 → 12.15.0

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

@@ -0,0 +1,118 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __, isRTL } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	FlexBlock,
+	Button,
+} from '@wordpress/components';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import PatternsExplorerModal from '../block-patterns-explorer';
+import MobileTabNavigation from '../mobile-tab-navigation';
+import { PatternCategoryPreviews } from './pattern-category-previews';
+import { usePatternCategories } from './use-pattern-categories';
+
+function BlockPatternsTab( {
+	onSelectCategory,
+	selectedCategory,
+	onInsert,
+	rootClientId,
+} ) {
+	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
+
+	const categories = usePatternCategories( rootClientId );
+
+	const initialCategory = selectedCategory || categories[ 0 ];
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return (
+		<>
+			{ ! isMobile && (
+				<div className="block-editor-inserter__block-patterns-tabs-container">
+					<nav
+						aria-label={ __( 'Block pattern categories' ) }
+						className="block-editor-inserter__block-patterns-tabs"
+					>
+						<ItemGroup role="list">
+							{ categories.map( ( category ) => (
+								<Item
+									role="listitem"
+									key={ category.name }
+									onClick={ () =>
+										onSelectCategory( category )
+									}
+									className={
+										category === selectedCategory
+											? 'block-editor-inserter__patterns-category block-editor-inserter__patterns-selected-category'
+											: 'block-editor-inserter__patterns-category'
+									}
+									aria-label={ category.label }
+									aria-current={
+										category === selectedCategory
+											? 'true'
+											: undefined
+									}
+								>
+									<HStack>
+										<FlexBlock>
+											{ category.label }
+										</FlexBlock>
+										<Icon
+											icon={
+												isRTL()
+													? chevronLeft
+													: chevronRight
+											}
+										/>
+									</HStack>
+								</Item>
+							) ) }
+							<div role="listitem">
+								<Button
+									className="block-editor-inserter__patterns-explore-button"
+									onClick={ () =>
+										setShowPatternsExplorer( true )
+									}
+									variant="secondary"
+								>
+									{ __( 'Explore all patterns' ) }
+								</Button>
+							</div>
+						</ItemGroup>
+					</nav>
+				</div>
+			) }
+			{ isMobile && (
+				<MobileTabNavigation categories={ categories }>
+					{ ( category ) => (
+						<PatternCategoryPreviews
+							key={ category.name }
+							onInsert={ onInsert }
+							rootClientId={ rootClientId }
+							category={ category }
+							showTitlesAsTooltip={ false }
+						/>
+					) }
+				</MobileTabNavigation>
+			) }
+			{ showPatternsExplorer && (
+				<PatternsExplorerModal
+					initialCategory={ initialCategory }
+					patternCategories={ categories }
+					onModalClose={ () => setShowPatternsExplorer( false ) }
+					rootClientId={ rootClientId }
+				/>
+			) }
+		</>
+	);
+}
+
+export default BlockPatternsTab;

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

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+
+import { focus } from '@wordpress/dom';
+
+/**
+ * Internal dependencies
+ */
+
+import { PatternCategoryPreviews } from './pattern-category-previews';
+
+export function PatternCategoryPreviewPanel( {
+	rootClientId,
+	onInsert,
+	onHover,
+	category,
+	showTitlesAsTooltip,
+	patternFilter,
+} ) {
+	const container = useRef();
+
+	useEffect( () => {
+		const timeout = setTimeout( () => {
+			const [ firstTabbable ] = focus.tabbable.find( container.current );
+			firstTabbable?.focus();
+		} );
+		return () => clearTimeout( timeout );
+	}, [ category ] );
+
+	return (
+		<div
+			ref={ container }
+			className="block-editor-inserter__patterns-category-dialog"
+		>
+			<PatternCategoryPreviews
+				key={ category.name }
+				rootClientId={ rootClientId }
+				onInsert={ onInsert }
+				onHover={ onHover }
+				category={ category }
+				showTitlesAsTooltip={ showTitlesAsTooltip }
+				patternFilter={ patternFilter }
+			/>
+		</div>
+	);
+}

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

@@ -0,0 +1,179 @@
+/**
+ * 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 BlockPatternsList 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,
+	PATTERN_TYPES,
+} 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.type === PATTERN_TYPES.user
+				) {
+					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 && (
+				<BlockPatternsList
+					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,101 @@
+/**
+ * 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,
+	PATTERN_TYPES,
+} 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.type === PATTERN_TYPES.user
+			)
+		) {
+			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,78 @@
+/**
+ * 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' ),
+};
+
+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.
+	if (
+		sourceFilter === PATTERN_TYPES.user &&
+		pattern.type !== PATTERN_TYPES.user
+	) {
+		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/hooks/use-patterns-state.js

@@ -11,6 +11,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { PATTERN_TYPES } from '../block-patterns-tab/utils';
 
 /**
  * Retrieves the block patterns inserter state.
@@ -57,7 +58,8 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
 			const patternBlocks =
-				pattern.id && pattern.syncStatus !== 'unsynced'
+				pattern.type === PATTERN_TYPES.user &&
+				pattern.syncStatus !== 'unsynced'
 					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 					: blocks;
 			onInsert(

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>