@wordpress/block-editor 12.10.0 → 12.10.2

package/build-style/style.css

@@ -903,20 +903,21 @@
   fill: var(--wp-block-synced-color);
 }
 
-.block-editor-patterns__grid-pagination {
+.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination {
   border-top: 1px solid #2f2f2f;
   padding: 4px;
+  justify-content: center;
 }
-.block-editor-patterns__grid-pagination .components-button.is-tertiary {
+.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary {
   width: auto;
   height: 32px;
   justify-content: center;
 }
-.block-editor-patterns__grid-pagination .components-button.is-tertiary:disabled {
+.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary:disabled {
   color: #949494;
   background: none;
 }
-.block-editor-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
+.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
   color: #fff;
   background-color: #757575;
 }
@@ -3200,51 +3201,68 @@
   flex-direction: row;
 }
 
-.block-editor-hooks__background__inspector-upload-container {
+.block-editor-hooks__background__inspector-media-replace-container {
   position: relative;
 }
-.block-editor-hooks__background__inspector-upload-container .components-drop-zone__content-icon {
+.block-editor-hooks__background__inspector-media-replace-container .components-drop-zone__content-icon {
   display: none;
 }
-
-.block-editor-hooks__background__inspector-upload-container button.components-button,
 .block-editor-hooks__background__inspector-media-replace-container button.components-button {
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #ccc;
+  box-shadow: inset 0 0 0 1px #ddd;
   width: 100%;
   display: block;
   height: 40px;
 }
-.block-editor-hooks__background__inspector-upload-container button.components-button:hover,
 .block-editor-hooks__background__inspector-media-replace-container button.components-button:hover {
   color: var(--wp-admin-theme-color);
 }
-.block-editor-hooks__background__inspector-upload-container button.components-button:focus,
 .block-editor-hooks__background__inspector-media-replace-container button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.block-editor-hooks__background__inspector-upload-container .block-editor-hooks__background__inspector-media-replace-title,
 .block-editor-hooks__background__inspector-media-replace-container .block-editor-hooks__background__inspector-media-replace-title {
   word-break: break-all;
   white-space: normal;
   text-align: start;
   text-align-last: center;
 }
-
 .block-editor-hooks__background__inspector-media-replace-container .components-dropdown {
   display: block;
 }
-.block-editor-hooks__background__inspector-media-replace-container img {
-  width: 20px;
-  min-width: 20px;
-  aspect-ratio: 1;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+
+.block-editor-hooks__background__inspector-image-indicator-wrapper {
+  background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
   border-radius: 50% !important;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  display: block;
+  width: 20px;
+  height: 20px;
+  flex: none;
 }
-.block-editor-hooks__background__inspector-media-replace-container .block-editor-hooks__background__inspector-readonly-logo-preview {
-  padding: 6px 12px;
-  display: flex;
-  height: 40px;
+.block-editor-hooks__background__inspector-image-indicator-wrapper.has-image {
+  background: #fff;
+}
+
+.block-editor-hooks__background__inspector-image-indicator {
+  background-size: cover;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: block;
+  position: relative;
+}
+
+.block-editor-hooks__background__inspector-image-indicator::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  bottom: -1px;
+  right: -1px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  border: 1px solid transparent;
+  box-sizing: inherit;
 }
 
 .border-block-support-panel .single-column {
@@ -3834,13 +3852,10 @@
   border-left: 1px solid #e0e0e0;
   border-right: 1px solid #e0e0e0;
   position: absolute;
-  padding: 32px 24px;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
-  overflow-y: auto;
-  scrollbar-gutter: stable both-edges;
 }
 @media (min-width: 782px) {
   .block-editor-inserter__patterns-category-dialog {
@@ -3850,7 +3865,10 @@
   }
 }
 .block-editor-inserter__patterns-category-dialog .block-editor-block-patterns-list {
-  margin-top: 24px;
+  overflow-y: auto;
+  flex-grow: 1;
+  height: 100%;
+  padding: 32px 24px;
 }
 
 .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
@@ -3862,12 +3880,21 @@
 
 .block-editor-inserter__patterns-category-panel {
   padding: 0 16px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 @media (min-width: 782px) {
   .block-editor-inserter__patterns-category-panel {
     padding: 0;
   }
 }
+.block-editor-inserter__patterns-category-panel .block-editor-inserter__patterns-category-panel-header {
+  padding: 16px 24px;
+}
+.block-editor-inserter__patterns-category-panel .block-editor-inserter__patterns-category-no-results {
+  margin-top: 24px;
+}
 
 .block-editor-inserter__preview-content {
   min-height: 144px;
@@ -3988,6 +4015,7 @@
   display: grid;
   grid-gap: 32px;
   grid-template-columns: repeat(1, 1fr);
+  margin-bottom: 16px;
 }
 @media (min-width: 1080px) {
   .block-editor-block-patterns-explorer .block-editor-block-patterns-list {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.10.0",
+	"version": "12.10.2",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,36 +35,36 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.42.0",
-		"@wordpress/api-fetch": "^6.39.0",
-		"@wordpress/blob": "^3.42.0",
-		"@wordpress/blocks": "^12.19.0",
-		"@wordpress/commands": "^0.13.0",
-		"@wordpress/components": "^25.8.0",
-		"@wordpress/compose": "^6.19.0",
-		"@wordpress/data": "^9.12.0",
-		"@wordpress/date": "^4.42.0",
-		"@wordpress/deprecated": "^3.42.0",
-		"@wordpress/dom": "^3.42.0",
-		"@wordpress/element": "^5.19.0",
-		"@wordpress/escape-html": "^2.42.0",
-		"@wordpress/hooks": "^3.42.0",
-		"@wordpress/html-entities": "^3.42.0",
-		"@wordpress/i18n": "^4.42.0",
-		"@wordpress/icons": "^9.33.0",
-		"@wordpress/is-shallow-equal": "^4.42.0",
-		"@wordpress/keyboard-shortcuts": "^4.19.0",
-		"@wordpress/keycodes": "^3.42.0",
-		"@wordpress/notices": "^4.10.0",
-		"@wordpress/preferences": "^3.19.0",
-		"@wordpress/private-apis": "^0.24.0",
-		"@wordpress/rich-text": "^6.19.0",
-		"@wordpress/shortcode": "^3.42.0",
-		"@wordpress/style-engine": "^1.25.0",
-		"@wordpress/token-list": "^2.42.0",
-		"@wordpress/url": "^3.43.0",
-		"@wordpress/warning": "^2.42.0",
-		"@wordpress/wordcount": "^3.42.0",
+		"@wordpress/a11y": "^3.42.2",
+		"@wordpress/api-fetch": "^6.39.2",
+		"@wordpress/blob": "^3.42.2",
+		"@wordpress/blocks": "^12.19.2",
+		"@wordpress/commands": "^0.13.2",
+		"@wordpress/components": "^25.8.2",
+		"@wordpress/compose": "^6.19.2",
+		"@wordpress/data": "^9.12.2",
+		"@wordpress/date": "^4.42.2",
+		"@wordpress/deprecated": "^3.42.2",
+		"@wordpress/dom": "^3.42.2",
+		"@wordpress/element": "^5.19.2",
+		"@wordpress/escape-html": "^2.42.2",
+		"@wordpress/hooks": "^3.42.2",
+		"@wordpress/html-entities": "^3.42.2",
+		"@wordpress/i18n": "^4.42.2",
+		"@wordpress/icons": "^9.33.2",
+		"@wordpress/is-shallow-equal": "^4.42.2",
+		"@wordpress/keyboard-shortcuts": "^4.19.2",
+		"@wordpress/keycodes": "^3.42.2",
+		"@wordpress/notices": "^4.10.2",
+		"@wordpress/preferences": "^3.19.2",
+		"@wordpress/private-apis": "^0.24.2",
+		"@wordpress/rich-text": "^6.19.2",
+		"@wordpress/shortcode": "^3.42.2",
+		"@wordpress/style-engine": "^1.25.2",
+		"@wordpress/token-list": "^2.42.2",
+		"@wordpress/url": "^3.43.2",
+		"@wordpress/warning": "^2.42.2",
+		"@wordpress/wordcount": "^3.42.2",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -86,5 +86,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
+	"gitHead": "5d2e3d07cc97af8090fc32c1e5d5013a2967e752"
 }

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

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__unstableComposite as Composite,
@@ -24,6 +24,7 @@ import { Icon, symbol } from '@wordpress/icons';
  */
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
+import BlockPatternsPaging from '../block-patterns-paging';
 
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
@@ -140,16 +141,20 @@ function BlockPatternPlaceholder() {
 	);
 }
 
-function BlockPatternList( {
-	isDraggable,
-	blockPatterns,
-	shownPatterns,
-	onHover,
-	onClickPattern,
-	orientation,
-	label = __( 'Block Patterns' ),
-	showTitlesAsTooltip,
-} ) {
+function BlockPatternList(
+	{
+		isDraggable,
+		blockPatterns,
+		shownPatterns,
+		onHover,
+		onClickPattern,
+		orientation,
+		label = __( 'Block patterns' ),
+		showTitlesAsTooltip,
+		pagingProps,
+	},
+	ref
+) {
 	const composite = useCompositeState( { orientation } );
 	return (
 		<Composite
@@ -157,6 +162,7 @@ function BlockPatternList( {
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }
+			ref={ ref }
 		>
 			{ blockPatterns.map( ( pattern ) => {
 				const isShown = shownPatterns.includes( pattern );
@@ -174,8 +180,9 @@ function BlockPatternList( {
 					<BlockPatternPlaceholder key={ pattern.name } />
 				);
 			} ) }
+			{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }
 		</Composite>
 	);
 }
 
-export default BlockPatternList;
+export default forwardRef( BlockPatternList );

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

@@ -16,7 +16,7 @@ export default function Pagination( {
 	totalItems,
 } ) {
 	return (
-		<VStack>
+		<VStack className="block-editor-patterns__grid-pagination-wrapper">
 			<Text variant="muted">
 				{
 					// translators: %s: Total number of patterns.
@@ -27,66 +27,69 @@ export default function Pagination( {
 					)
 				}
 			</Text>
-			<HStack
-				expanded={ false }
-				spacing={ 3 }
-				justify="flex-start"
-				className="block-editor-patterns__grid-pagination"
-			>
-				<HStack
-					expanded={ false }
-					spacing={ 1 }
-					className="block-editor-patterns__grid-pagination-previous"
-				>
-					<Button
-						variant="tertiary"
-						onClick={ () => changePage( 1 ) }
-						disabled={ currentPage === 1 }
-						aria-label={ __( 'First page' ) }
-					>
-						<span>«</span>
-					</Button>
-					<Button
-						variant="tertiary"
-						onClick={ () => changePage( currentPage - 1 ) }
-						disabled={ currentPage === 1 }
-						aria-label={ __( 'Previous page' ) }
-					>
-						<span>‹</span>
-					</Button>
-				</HStack>
-				<Text variant="muted">
-					{ sprintf(
-						// translators: %1$s: Current page number, %2$s: Total number of pages.
-						_x( '%1$s of %2$s', 'paging' ),
-						currentPage,
-						numPages
-					) }
-				</Text>
+
+			{ numPages > 1 && (
 				<HStack
 					expanded={ false }
-					spacing={ 1 }
-					className="block-editor-patterns__grid-pagination-next"
+					spacing={ 3 }
+					justify="flex-start"
+					className="block-editor-patterns__grid-pagination"
 				>
-					<Button
-						variant="tertiary"
-						onClick={ () => changePage( currentPage + 1 ) }
-						disabled={ currentPage === numPages }
-						aria-label={ __( 'Next page' ) }
+					<HStack
+						expanded={ false }
+						spacing={ 1 }
+						className="block-editor-patterns__grid-pagination-previous"
 					>
-						<span>›</span>
-					</Button>
-					<Button
-						variant="tertiary"
-						onClick={ () => changePage( numPages ) }
-						disabled={ currentPage === numPages }
-						aria-label={ __( 'Last page' ) }
-						size="default"
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( 1 ) }
+							disabled={ currentPage === 1 }
+							aria-label={ __( 'First page' ) }
+						>
+							<span>«</span>
+						</Button>
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( currentPage - 1 ) }
+							disabled={ currentPage === 1 }
+							aria-label={ __( 'Previous page' ) }
+						>
+							<span>‹</span>
+						</Button>
+					</HStack>
+					<Text variant="muted">
+						{ sprintf(
+							// translators: %1$s: Current page number, %2$s: Total number of pages.
+							_x( '%1$s of %2$s', 'paging' ),
+							currentPage,
+							numPages
+						) }
+					</Text>
+					<HStack
+						expanded={ false }
+						spacing={ 1 }
+						className="block-editor-patterns__grid-pagination-next"
 					>
-						<span>»</span>
-					</Button>
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( currentPage + 1 ) }
+							disabled={ currentPage === numPages }
+							aria-label={ __( 'Next page' ) }
+						>
+							<span>›</span>
+						</Button>
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( numPages ) }
+							disabled={ currentPage === numPages }
+							aria-label={ __( 'Last page' ) }
+							size="default"
+						>
+							<span>»</span>
+						</Button>
+					</HStack>
 				</HStack>
-			</HStack>
+			) }
 		</VStack>
 	);
 }

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

@@ -1,20 +1,23 @@
-.block-editor-patterns__grid-pagination {
-	border-top: 1px solid $gray-800;
-	padding: $grid-unit-05;
+.block-editor-patterns__grid-pagination-wrapper {
 
-	.components-button.is-tertiary {
-		width: auto;
-		height: $button-size-compact;
+	.block-editor-patterns__grid-pagination {
+		border-top: 1px solid $gray-800;
+		padding: $grid-unit-05;
 		justify-content: center;
+		.components-button.is-tertiary {
+			width: auto;
+			height: $button-size-compact;
+			justify-content: center;
 
-		&:disabled {
-			color: $gray-600;
-			background: none;
-		}
+			&:disabled {
+				color: $gray-600;
+				background: none;
+			}
 
-		&:hover:not(:disabled) {
-			color: $white;
-			background-color: $gray-700;
+			&:hover:not(:disabled) {
+				color: $white;
+				background-color: $gray-700;
+			}
 		}
 	}
 }

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

@@ -17,31 +17,13 @@ import InserterListbox from '../../inserter-listbox';
 import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
-import { allPatternsCategory, isPatternFiltered } from '../block-patterns-tab';
-import { BlockPatternsSyncFilter } from '../block-patterns-sync-filter';
-import {
-	PATTERN_TYPES,
-	PATTERN_SOURCE_FILTERS,
-} from '../block-patterns-source-filter';
-
-function PatternsListHeader( {
-	filterValue,
-	filteredBlockPatternsLength,
-	selectedCategory,
-	patternCategories,
-} ) {
+import { allPatternsCategory, myPatternsCategory } from '../block-patterns-tab';
+
+function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	if ( ! filterValue ) {
 		return null;
 	}
-	let filter = filterValue;
-	if ( selectedCategory !== allPatternsCategory.name ) {
-		const category = patternCategories.find(
-			( patternCategory ) => patternCategory.name === selectedCategory
-		);
-		if ( category ) {
-			filter = `${ filter } - ${ category?.label }`;
-		}
-	}
+
 	return (
 		<Heading
 			level={ 2 }
@@ -49,26 +31,19 @@ function PatternsListHeader( {
 			className="block-editor-block-patterns-explorer__search-results-count"
 		>
 			{ sprintf(
-				/* translators: %d: number of patterns. %s: block pattern search query */
+				/* translators: %d: number of patterns. */
 				_n(
-					'%1$d pattern found for "%2$s"',
-					'%1$d patterns found for "%2$s"',
+					'%d pattern found',
+					'%d patterns found',
 					filteredBlockPatternsLength
 				),
-				filteredBlockPatternsLength,
-				filter
+				filteredBlockPatternsLength
 			) }
 		</Heading>
 	);
 }
 
-function PatternList( {
-	searchValue,
-	patternSourceFilter,
-	selectedCategory,
-	patternCategories,
-} ) {
-	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
+function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -89,20 +64,12 @@ function PatternList( {
 
 	const filteredBlockPatterns = useMemo( () => {
 		const filteredPatterns = patterns.filter( ( pattern ) => {
-			if (
-				isPatternFiltered(
-					pattern,
-					patternSourceFilter,
-					patternSyncFilter
-				)
-			) {
-				return false;
-			}
-
 			if ( selectedCategory === allPatternsCategory.name ) {
 				return true;
 			}
-
+			if ( selectedCategory === myPatternsCategory.name && pattern.id ) {
+				return true;
+			}
 			if ( selectedCategory === 'uncategorized' ) {
 				const hasKnownCategory = pattern.categories.some(
 					( category ) =>
@@ -119,18 +86,12 @@ function PatternList( {
 			return filteredPatterns;
 		}
 
-		return searchItems(
-			filteredPatterns,
-			searchValue,
-			patternSourceFilter
-		);
+		return searchItems( filteredPatterns, searchValue );
 	}, [
 		searchValue,
-		patternSourceFilter,
 		patterns,
 		selectedCategory,
 		registeredPatternCategories,
-		patternSyncFilter,
 	] );
 
 	// Announce search results on change.
@@ -150,10 +111,17 @@ function PatternList( {
 	const pagingProps = usePatternsPaging(
 		filteredBlockPatterns,
 		selectedCategory,
-		container,
-		patternSourceFilter
+		container
 	);
 
+	// Reset page when search value changes.
+	const [ previousSearchValue, setPreviousSearchValue ] =
+		useState( searchValue );
+	if ( searchValue !== previousSearchValue ) {
+		setPreviousSearchValue( searchValue );
+		pagingProps.changePage( 1 );
+	}
+
 	const hasItems = !! filteredBlockPatterns?.length;
 	return (
 		<div
@@ -161,33 +129,23 @@ function PatternList( {
 			ref={ container }
 		>
 			<PatternsListHeader
-				filterValue={
-					searchValue || PATTERN_SOURCE_FILTERS[ patternSourceFilter ]
-				}
+				filterValue={ searchValue }
 				filteredBlockPatternsLength={ filteredBlockPatterns.length }
-				selectedCategory={ selectedCategory }
-				patternCategories={ patternCategories }
 			/>
 
 			<InserterListbox>
-				{ patternSourceFilter === PATTERN_TYPES.user &&
-					! searchValue && (
-						<BlockPatternsSyncFilter
-							patternSyncFilter={ patternSyncFilter }
-							setPatternSyncFilter={ setPatternSyncFilter }
-						/>
-					) }
-
 				{ hasItems && (
-					<BlockPatternsList
-						shownPatterns={ pagingProps.categoryPatternsAsyncList }
-						blockPatterns={ pagingProps.categoryPatterns }
-						onClickPattern={ onClickPattern }
-						isDraggable={ false }
-					/>
-				) }
-				{ pagingProps.numPages > 1 && (
-					<BlockPatternsPaging { ...pagingProps } />
+					<>
+						<BlockPatternsList
+							shownPatterns={
+								pagingProps.categoryPatternsAsyncList
+							}
+							blockPatterns={ pagingProps.categoryPatterns }
+							onClickPattern={ onClickPattern }
+							isDraggable={ false }
+						/>
+						<BlockPatternsPaging { ...pagingProps } />
+					</>
 				) }
 			</InserterListbox>
 		</div>