@wordpress/block-editor 12.10.0 → 12.10.2

package/src/components/inserter/block-patterns-explorer/sidebar.js

@@ -4,12 +4,6 @@
 import { Button, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import { default as BlockPatternsSourceFilter } from '../block-patterns-source-filter';
-import { allPatternsCategory } from '../block-patterns-tab';
-
 function PatternCategoriesList( {
 	selectedCategory,
 	patternCategories,
@@ -56,8 +50,6 @@ function PatternExplorerSidebar( {
 	selectedCategory,
 	patternCategories,
 	onClickCategory,
-	patternSourceFilter,
-	setPatternSourceFilter,
 	searchValue,
 	setSearchValue,
 } ) {
@@ -68,13 +60,6 @@ function PatternExplorerSidebar( {
 				searchValue={ searchValue }
 				setSearchValue={ setSearchValue }
 			/>
-			<BlockPatternsSourceFilter
-				value={ patternSourceFilter }
-				onChange={ ( value ) => {
-					setPatternSourceFilter( value );
-					onClickCategory( allPatternsCategory.name );
-				} }
-			/>
 			{ ! searchValue && (
 				<PatternCategoriesList
 					selectedCategory={ selectedCategory }

package/src/components/inserter/block-patterns-filter.js

@@ -0,0 +1,183 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SVG,
+	Path,
+	DropdownMenu,
+	MenuGroup,
+	MenuItemsChoice,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { useMemo } 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',
+};
+
+const getShouldDisableSyncFilter = ( sourceFilter ) =>
+	sourceFilter !== PATTERN_TYPES.all && sourceFilter !== PATTERN_TYPES.user;
+
+const getShouldDisableNonUserSources = ( category ) => {
+	return category.name === myPatternsCategory.name;
+};
+
+export function BlockPatternsSyncFilter( {
+	setPatternSyncFilter,
+	setPatternSourceFilter,
+	patternSyncFilter,
+	patternSourceFilter,
+	scrollContainerRef,
+	category,
+} ) {
+	// If the category is `myPatterns` then we need to set the source filter to `user`, but
+	// we do this by deriving from props rather than calling setPatternSourceFilter otherwise
+	// the user may be confused when switching to another category if the haven't explicity set
+	// this filter themselves.
+	const currentPatternSourceFilter =
+		category.name === myPatternsCategory.name
+			? PATTERN_TYPES.user
+			: patternSourceFilter;
+
+	// We need to disable the sync filter option if the source filter is not 'all' or 'user'
+	// otherwise applying them will just result in no patterns being shown.
+	const shouldDisableSyncFilter = getShouldDisableSyncFilter(
+		currentPatternSourceFilter
+	);
+
+	// We also need to disable the directory and theme source filter options if the category
+	// is `myPatterns` otherwise applying them will also just result in no patterns being shown.
+	const shouldDisableNonUserSources =
+		getShouldDisableNonUserSources( category );
+
+	const patternSyncMenuOptions = useMemo(
+		() => [
+			{ value: SYNC_TYPES.all, label: __( 'All' ) },
+			{
+				value: SYNC_TYPES.full,
+				label: __( 'Synced' ),
+				info: __( 'Updated everywhere' ),
+				disabled: shouldDisableSyncFilter,
+			},
+			{
+				value: SYNC_TYPES.unsynced,
+				label: __( 'Standard' ),
+				info: __( 'Edit freely' ),
+				disabled: shouldDisableSyncFilter,
+			},
+		],
+		[ shouldDisableSyncFilter ]
+	);
+
+	const patternSourceMenuOptions = useMemo(
+		() => [
+			{
+				value: PATTERN_TYPES.all,
+				label: __( 'All' ),
+				disabled: shouldDisableNonUserSources,
+			},
+			{
+				value: PATTERN_TYPES.directory,
+				label: __( 'Directory' ),
+				info: __( 'Pattern directory & core' ),
+				disabled: shouldDisableNonUserSources,
+			},
+			{
+				value: PATTERN_TYPES.theme,
+				label: __( 'Theme' ),
+				info: __( 'Bundled with the theme' ),
+				disabled: shouldDisableNonUserSources,
+			},
+			{
+				value: PATTERN_TYPES.user,
+				label: __( 'User' ),
+				info: __( 'Custom created' ),
+			},
+		],
+		[ shouldDisableNonUserSources ]
+	);
+
+	function handleSetSourceFilterChange( newSourceFilter ) {
+		setPatternSourceFilter( newSourceFilter );
+		if ( getShouldDisableSyncFilter( newSourceFilter ) ) {
+			setPatternSyncFilter( SYNC_TYPES.all );
+		}
+	}
+
+	return (
+		<>
+			<DropdownMenu
+				popoverProps={ {
+					placement: 'right-end',
+				} }
+				label="Filter patterns"
+				icon={
+					<Icon
+						icon={
+							<SVG
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<Path
+									d="M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z"
+									fill="#1E1E1E"
+								/>
+							</SVG>
+						}
+					/>
+				}
+			>
+				{ () => (
+					<>
+						<MenuGroup label={ __( 'Author' ) }>
+							<MenuItemsChoice
+								choices={ patternSourceMenuOptions }
+								onSelect={ ( value ) => {
+									handleSetSourceFilterChange( value );
+									scrollContainerRef.current?.scrollTo(
+										0,
+										0
+									);
+								} }
+								value={ currentPatternSourceFilter }
+							/>
+						</MenuGroup>
+						<MenuGroup label={ __( 'Type' ) }>
+							<MenuItemsChoice
+								choices={ patternSyncMenuOptions }
+								onSelect={ ( value ) => {
+									setPatternSyncFilter( value );
+									scrollContainerRef.current?.scrollTo(
+										0,
+										0
+									);
+								} }
+								value={ patternSyncFilter }
+							/>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</>
+	);
+}

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

@@ -14,6 +14,9 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
 	FlexBlock,
 	Button,
 } from '@wordpress/components';
@@ -28,48 +31,68 @@ import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
-import BlockPatternsPaging from '../block-patterns-paging';
 import usePatternsPaging from './hooks/use-patterns-paging';
-import {
-	PATTERN_TYPES,
-	default as BlockPatternsSourceFilter,
-} from './block-patterns-source-filter';
 import {
 	BlockPatternsSyncFilter,
 	SYNC_TYPES,
-} from './block-patterns-sync-filter';
+	PATTERN_TYPES,
+} from './block-patterns-filter';
 
 const noop = () => {};
 
 export const allPatternsCategory = {
 	name: 'allPatterns',
-	label: __( 'All categories' ),
+	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 &&
-		pattern.name.startsWith( 'core/block' )
+		( 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;
 	}
-	if (
-		sourceFilter === PATTERN_TYPES.user &&
-		syncFilter === SYNC_TYPES.full &&
-		pattern.syncStatus !== ''
-	) {
+
+	// Filter by sync status.
+	if ( syncFilter === SYNC_TYPES.full && pattern.syncStatus !== '' ) {
 		return true;
 	}
+
 	if (
-		sourceFilter === PATTERN_TYPES.user &&
 		syncFilter === SYNC_TYPES.unsynced &&
-		pattern.syncStatus !== 'unsynced'
+		pattern.syncStatus !== 'unsynced' &&
+		isUserPattern
 	) {
 		return true;
 	}
+
 	return false;
 }
 
@@ -126,6 +149,9 @@ export function usePatternsCategories( rootClientId, sourceFilter = 'all' ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
+		if ( filteredPatterns.some( ( pattern ) => pattern.id ) ) {
+			categories.unshift( myPatternsCategory );
+		}
 		if ( filteredPatterns.length > 0 ) {
 			categories.unshift( {
 				name: allPatternsCategory.name,
@@ -173,6 +199,7 @@ export function BlockPatternsCategoryDialog( {
 			className="block-editor-inserter__patterns-category-dialog"
 		>
 			<BlockPatternsCategoryPanel
+				key={ category.name }
 				rootClientId={ rootClientId }
 				onInsert={ onInsert }
 				onHover={ onHover }
@@ -190,26 +217,26 @@ export function BlockPatternsCategoryPanel( {
 	onHover = noop,
 	category,
 	showTitlesAsTooltip,
-	patternFilter,
 } ) {
 	const [ allPatterns, , onClickPattern ] = usePatternsState(
 		onInsert,
 		rootClientId
 	);
 	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
+	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
 
 	const availableCategories = usePatternsCategories(
 		rootClientId,
-		patternFilter
+		patternSourceFilter
 	);
-	const container = useRef();
+	const scrollContainerRef = useRef();
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) => {
 				if (
 					isPatternFiltered(
 						pattern,
-						patternFilter,
+						patternSourceFilter,
 						patternSyncFilter
 					)
 				) {
@@ -219,6 +246,9 @@ export function BlockPatternsCategoryPanel( {
 				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 );
 				}
@@ -239,7 +269,7 @@ export function BlockPatternsCategoryPanel( {
 			allPatterns,
 			availableCategories,
 			category.name,
-			patternFilter,
+			patternSourceFilter,
 			patternSyncFilter,
 		]
 	);
@@ -247,33 +277,66 @@ export function BlockPatternsCategoryPanel( {
 	const pagingProps = usePatternsPaging(
 		currentCategoryPatterns,
 		category,
-		container
+		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"
-			ref={ container }
-		>
-			<div className="block-editor-inserter__patterns-category-panel-title">
-				{ category.label }
-			</div>
-			<p>{ category.description }</p>
-			{ patternFilter === PATTERN_TYPES.user && (
-				<BlockPatternsSyncFilter
-					patternSyncFilter={ patternSyncFilter }
-					setPatternSyncFilter={ setPatternSyncFilter }
-				/>
-			) }
-			{ ! currentCategoryPatterns.length && (
-				<div>{ __( 'No results found' ) }</div>
-			) }
+		<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>
+					<BlockPatternsSyncFilter
+						patternSyncFilter={ patternSyncFilter }
+						patternSourceFilter={ patternSourceFilter }
+						setPatternSyncFilter={ onSetPatternSyncFilter }
+						setPatternSourceFilter={ onSetPatternSourceFilter }
+						scrollContainerRef={ scrollContainerRef }
+						category={ category }
+					/>
+				</HStack>
+				{ category.description && (
+					<Text>{ category.description }</Text>
+				) }
+				{ ! 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 }
@@ -283,12 +346,10 @@ export function BlockPatternsCategoryPanel( {
 					category={ category.name }
 					isDraggable
 					showTitlesAsTooltip={ showTitlesAsTooltip }
-					patternFilter={ patternFilter }
+					patternFilter={ patternSourceFilter }
+					pagingProps={ pagingProps }
 				/>
 			) }
-			{ pagingProps.numPages > 1 && (
-				<BlockPatternsPaging { ...pagingProps } />
-			) }
 		</div>
 	);
 }
@@ -300,12 +361,8 @@ function BlockPatternsTabs( {
 	rootClientId,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
-	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
 
-	const categories = usePatternsCategories(
-		rootClientId,
-		patternSourceFilter
-	);
+	const categories = usePatternsCategories( rootClientId );
 
 	const initialCategory = selectedCategory || categories[ 0 ];
 	const isMobile = useViewportMatch( 'medium', '<' );
@@ -317,23 +374,13 @@ function BlockPatternsTabs( {
 						aria-label={ __( 'Block pattern categories' ) }
 						className="block-editor-inserter__block-patterns-tabs"
 					>
-						<BlockPatternsSourceFilter
-							value={ patternSourceFilter }
-							onChange={ ( value ) => {
-								setPatternSourceFilter( value );
-								onSelectCategory( allPatternsCategory, value );
-							} }
-						/>
 						<ItemGroup role="list">
 							{ categories.map( ( category ) => (
 								<Item
 									role="listitem"
 									key={ category.name }
 									onClick={ () =>
-										onSelectCategory(
-											category,
-											patternSourceFilter
-										)
+										onSelectCategory( category )
 									}
 									className={
 										category === selectedCategory
@@ -380,6 +427,7 @@ function BlockPatternsTabs( {
 				<MobileTabNavigation categories={ categories }>
 					{ ( category ) => (
 						<BlockPatternsCategoryPanel
+							key={ category.name }
 							onInsert={ onInsert }
 							rootClientId={ rootClientId }
 							category={ category }

package/src/components/inserter/hooks/use-patterns-paging.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useMemo, useState, useEffect } from '@wordpress/element';
 import { useAsyncList, usePrevious } from '@wordpress/compose';
 import { getScrollContainer } from '@wordpress/dom';
 
@@ -54,6 +54,17 @@ export default function usePatternsPaging(
 
 		setCurrentPage( page );
 	};
+
+	useEffect(
+		function scrollToTopOnCategoryChange() {
+			const scrollContainer = getScrollContainer(
+				scrollContainerRef?.current
+			);
+			scrollContainer?.scrollTo( 0, 0 );
+		},
+		[ currentCategory, scrollContainerRef ]
+	);
+
 	return {
 		totalItems,
 		categoryPatterns,

package/src/components/inserter/search-results.js

@@ -184,7 +184,7 @@ function InserterSearchResults( {
 	const patternsUI = !! filteredBlockPatterns.length && (
 		<InserterPanel
 			title={
-				<VisuallyHidden>{ __( 'Block Patterns' ) }</VisuallyHidden>
+				<VisuallyHidden>{ __( 'Block patterns' ) }</VisuallyHidden>
 			}
 		>
 			<div className="block-editor-inserter__quick-inserter-patterns">

package/src/components/inserter/style.scss

@@ -299,13 +299,10 @@ $block-inserter-tabs-height: 44px;
 	border-left: $border-width solid $gray-200;
 	border-right: $border-width solid $gray-200;
 	position: absolute;
-	padding: $grid-unit-40 $grid-unit-30;
 	top: 0;
 	left: 0;
 	height: 100%;
 	width: 100%;
-	overflow-y: auto;
-	scrollbar-gutter: stable both-edges;
 
 	@include break-medium {
 		left: 100%;
@@ -314,7 +311,10 @@ $block-inserter-tabs-height: 44px;
 	}
 
 	.block-editor-block-patterns-list {
-		margin-top: $grid-unit-30;
+		overflow-y: auto;
+		flex-grow: 1;
+		height: 100%;
+		padding: $grid-unit-40 $grid-unit-30;
 	}
 }
 
@@ -331,10 +331,18 @@ $block-inserter-tabs-height: 44px;
 
 .block-editor-inserter__patterns-category-panel {
 	padding: 0 $grid-unit-20;
-
+	display: flex;
+	flex-direction: column;
+	height: 100%;
 	@include break-medium {
 		padding: 0;
 	}
+	.block-editor-inserter__patterns-category-panel-header {
+		padding: 16px $grid-unit-30;
+	}
+	.block-editor-inserter__patterns-category-no-results {
+		margin-top: $grid-unit-30;
+	}
 }
 
 .block-editor-inserter__preview-content {
@@ -472,6 +480,7 @@ $block-inserter-tabs-height: 44px;
 		display: grid;
 		grid-gap: $grid-unit-40;
 		grid-template-columns: repeat(1, 1fr);
+		margin-bottom: $grid-unit-20;
 
 		@include break-xlarge() {
 			grid-template-columns: repeat(2, 1fr);

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -34,7 +34,7 @@ const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
 			/>
 			<InspectorControls.Slot
 				group="background"
-				label={ __( 'Background image' ) }
+				label={ __( 'Background' ) }
 			/>
 			<InspectorControls.Slot group="filter" />
 			<InspectorControls.Slot