@wordpress/edit-site 5.12.12 → 5.12.13

package/build-style/style-rtl.css

@@ -1446,17 +1446,18 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 
 .edit-site-document-actions {
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   height: 36px;
+  justify-content: space-between;
   min-width: 0;
   background: #f0f0f0;
   border-radius: 4px;
   width: min(100%, 450px);
-  overflow: hidden;
 }
-.edit-site-document-actions:hover {
-  color: currentColor;
+.edit-site-document-actions .components-button:hover {
+  color: var(--wp-block-synced-color);
   background: #e0e0e0;
 }
 @media (min-width: 782px) {
@@ -1471,20 +1472,22 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 
 .edit-site-document-actions__command {
-  grid-column: 1/-1;
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
-  grid-row: 1;
+  flex-grow: 1;
+  color: var(--wp-block-synced-color);
+  overflow: hidden;
 }
 
 .edit-site-document-actions__title {
   flex-grow: 1;
   color: var(--wp-block-synced-color);
   overflow: hidden;
-  grid-column: 2/3;
+}
+.edit-site-document-actions__title:hover {
+  color: var(--wp-block-synced-color);
 }
 .edit-site-document-actions__title .block-editor-block-icon {
   min-width: 24px;
+  flex-shrink: 0;
 }
 .edit-site-document-actions__title h1 {
   white-space: nowrap;
@@ -1517,31 +1520,25 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   }
 }
 
-.edit-site-document-actions__shortcut,
-.edit-site-document-actions__back {
-  color: #2f2f2f;
-}
-.edit-site-document-actions:hover .edit-site-document-actions__shortcut,
-.edit-site-document-actions:hover .edit-site-document-actions__back {
-  color: #1e1e1e;
-}
-
 .edit-site-document-actions__shortcut {
-  text-align: left;
+  color: #2f2f2f;
 }
 
-.edit-site-document-actions__back {
+.edit-site-document-actions__back.components-button.has-icon.has-text {
   min-width: 36px;
   flex-shrink: 0;
-  grid-column: 1/2;
-  grid-row: 1;
+  color: #757575;
+  gap: 0;
   z-index: 1;
 }
-.edit-site-document-actions.is-animated .edit-site-document-actions__back {
+.edit-site-document-actions__back.components-button.has-icon.has-text:hover {
+  color: currentColor;
+}
+.edit-site-document-actions.is-animated .edit-site-document-actions__back.components-button.has-icon.has-text {
   animation: edit-site-document-actions__slide-in-left 0.3s;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-site-document-actions.is-animated .edit-site-document-actions__back {
+  .edit-site-document-actions.is-animated .edit-site-document-actions__back.components-button.has-icon.has-text {
     animation-duration: 1ms;
     animation-delay: 0s;
   }

package/build-style/style.css

@@ -1447,17 +1447,18 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 
 .edit-site-document-actions {
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   height: 36px;
+  justify-content: space-between;
   min-width: 0;
   background: #f0f0f0;
   border-radius: 4px;
   width: min(100%, 450px);
-  overflow: hidden;
 }
-.edit-site-document-actions:hover {
-  color: currentColor;
+.edit-site-document-actions .components-button:hover {
+  color: var(--wp-block-synced-color);
   background: #e0e0e0;
 }
 @media (min-width: 782px) {
@@ -1472,20 +1473,22 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 
 .edit-site-document-actions__command {
-  grid-column: 1/-1;
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
-  grid-row: 1;
+  flex-grow: 1;
+  color: var(--wp-block-synced-color);
+  overflow: hidden;
 }
 
 .edit-site-document-actions__title {
   flex-grow: 1;
   color: var(--wp-block-synced-color);
   overflow: hidden;
-  grid-column: 2/3;
+}
+.edit-site-document-actions__title:hover {
+  color: var(--wp-block-synced-color);
 }
 .edit-site-document-actions__title .block-editor-block-icon {
   min-width: 24px;
+  flex-shrink: 0;
 }
 .edit-site-document-actions__title h1 {
   white-space: nowrap;
@@ -1518,31 +1521,25 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   }
 }
 
-.edit-site-document-actions__shortcut,
-.edit-site-document-actions__back {
-  color: #2f2f2f;
-}
-.edit-site-document-actions:hover .edit-site-document-actions__shortcut,
-.edit-site-document-actions:hover .edit-site-document-actions__back {
-  color: #1e1e1e;
-}
-
 .edit-site-document-actions__shortcut {
-  text-align: right;
+  color: #2f2f2f;
 }
 
-.edit-site-document-actions__back {
+.edit-site-document-actions__back.components-button.has-icon.has-text {
   min-width: 36px;
   flex-shrink: 0;
-  grid-column: 1/2;
-  grid-row: 1;
+  color: #757575;
+  gap: 0;
   z-index: 1;
 }
-.edit-site-document-actions.is-animated .edit-site-document-actions__back {
+.edit-site-document-actions__back.components-button.has-icon.has-text:hover {
+  color: currentColor;
+}
+.edit-site-document-actions.is-animated .edit-site-document-actions__back.components-button.has-icon.has-text {
   animation: edit-site-document-actions__slide-in-left 0.3s;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-site-document-actions.is-animated .edit-site-document-actions__back {
+  .edit-site-document-actions.is-animated .edit-site-document-actions__back.components-button.has-icon.has-text {
     animation-duration: 1ms;
     animation-delay: 0s;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.12.12",
+	"version": "5.12.13",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,40 +29,40 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.35.1",
 		"@wordpress/api-fetch": "^6.32.1",
-		"@wordpress/block-editor": "^12.3.10",
-		"@wordpress/block-library": "^8.12.12",
+		"@wordpress/block-editor": "^12.3.11",
+		"@wordpress/block-library": "^8.12.13",
 		"@wordpress/blocks": "^12.12.6",
-		"@wordpress/commands": "^0.6.9",
-		"@wordpress/components": "^25.1.9",
+		"@wordpress/commands": "^0.6.10",
+		"@wordpress/components": "^25.1.10",
 		"@wordpress/compose": "^6.12.2",
-		"@wordpress/core-commands": "^0.4.10",
-		"@wordpress/core-data": "^6.12.10",
+		"@wordpress/core-commands": "^0.4.11",
+		"@wordpress/core-data": "^6.12.11",
 		"@wordpress/data": "^9.5.5",
 		"@wordpress/date": "^4.35.1",
 		"@wordpress/deprecated": "^3.35.1",
 		"@wordpress/dom": "^3.35.1",
-		"@wordpress/editor": "^13.12.10",
+		"@wordpress/editor": "^13.12.11",
 		"@wordpress/element": "^5.12.1",
 		"@wordpress/escape-html": "^2.35.1",
 		"@wordpress/hooks": "^3.35.1",
 		"@wordpress/html-entities": "^3.35.1",
 		"@wordpress/i18n": "^4.35.1",
 		"@wordpress/icons": "^9.26.2",
-		"@wordpress/interface": "^5.12.9",
+		"@wordpress/interface": "^5.12.10",
 		"@wordpress/keyboard-shortcuts": "^4.12.5",
 		"@wordpress/keycodes": "^3.35.1",
 		"@wordpress/media-utils": "^4.26.1",
 		"@wordpress/notices": "^4.3.5",
-		"@wordpress/plugins": "^6.3.9",
-		"@wordpress/preferences": "^3.12.9",
+		"@wordpress/plugins": "^6.3.10",
+		"@wordpress/preferences": "^3.12.10",
 		"@wordpress/primitives": "^3.33.1",
 		"@wordpress/private-apis": "^0.17.2",
-		"@wordpress/reusable-blocks": "^4.12.10",
+		"@wordpress/reusable-blocks": "^4.12.11",
 		"@wordpress/router": "^0.4.2",
 		"@wordpress/style-engine": "^1.18.1",
 		"@wordpress/url": "^3.36.1",
 		"@wordpress/viewport": "^5.12.5",
-		"@wordpress/widgets": "^3.12.10",
+		"@wordpress/widgets": "^3.12.11",
 		"@wordpress/wordcount": "^3.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "609a9df27d25e3d224dd1e2b97beb1bc02693255"
+	"gitHead": "a6c8348f0058e714c97df49b4025e5d7d1c9e437"
 }

package/src/components/block-editor/constants.js

@@ -1 +1,5 @@
-export const FOCUSABLE_ENTITIES = [ 'wp_template_part', 'wp_navigation' ];
+export const FOCUSABLE_ENTITIES = [
+	'wp_template_part',
+	'wp_navigation',
+	'wp_block',
+];

package/src/components/editor/index.js

@@ -58,7 +58,7 @@ const interfaceLabels = {
 };
 
 const typeLabels = {
-	wp_template: __( 'Template Part' ),
+	wp_template: __( 'Template' ),
 	wp_template_part: __( 'Template Part' ),
 	wp_block: __( 'Pattern' ),
 };
@@ -165,12 +165,11 @@ export default function Editor( { isLoading } ) {
 
 	let title;
 	if ( hasLoadedPost ) {
-		const type = typeLabels[ editedPostType ] ?? __( 'Template' );
 		title = sprintf(
 			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
 			__( '%1$s ‹ %2$s ‹ Editor' ),
 			getTitle(),
-			type
+			typeLabels[ editedPostType ] ?? typeLabels.wp_template
 		);
 	}
 

package/src/components/header-edit-mode/document-actions/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { sprintf, __ } from '@wordpress/i18n';
+import { sprintf, __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
@@ -17,7 +17,8 @@ import {
 import { BlockIcon } from '@wordpress/block-editor';
 import { store as commandsStore } from '@wordpress/commands';
 import {
-	chevronLeftSmall as chevronLeftSmallIcon,
+	chevronLeftSmall,
+	chevronRightSmall,
 	page as pageIcon,
 	navigation as navigationIcon,
 	symbol,
@@ -153,7 +154,7 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 			{ onBack && (
 				<Button
 					className="edit-site-document-actions__back"
-					icon={ chevronLeftSmallIcon }
+					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
 					onClick={ ( event ) => {
 						event.stopPropagation();
 						onBack();

package/src/components/header-edit-mode/document-actions/style.scss

@@ -1,7 +1,9 @@
 .edit-site-document-actions {
-	display: grid;
-	grid-template-columns: 1fr 2fr 1fr;
+	display: flex;
+	align-items: center;
+	gap: $grid-unit;
 	height: $button-size;
+	justify-content: space-between;
 	// Flex items will, by default, refuse to shrink below a minimum
 	// intrinsic width. In order to shrink this flexbox item, and
 	// subsequently truncate child text, we set an explicit min-width.
@@ -10,11 +12,12 @@
 	background: $gray-100;
 	border-radius: 4px;
 	width: min(100%, 450px);
-	overflow: hidden;
 
-	&:hover {
-		color: currentColor;
-		background: $gray-200;
+	.components-button {
+		&:hover {
+			color: var(--wp-block-synced-color);
+			background: $gray-200;
+		}
 	}
 
 	@include break-medium() {
@@ -27,21 +30,23 @@
 }
 
 .edit-site-document-actions__command {
-	grid-column: 1 / -1;
-	display: grid;
-	grid-template-columns: 1fr 2fr 1fr;
-	grid-row: 1;
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
 }
 
-
 .edit-site-document-actions__title {
 	flex-grow: 1;
 	color: var(--wp-block-synced-color);
 	overflow: hidden;
-	grid-column: 2 / 3;
+
+	&:hover {
+		color: var(--wp-block-synced-color);
+	}
 
 	.block-editor-block-icon {
 		min-width: $grid-unit-30;
+		flex-shrink: 0;
 	}
 
 	h1 {
@@ -70,26 +75,21 @@
 	}
 }
 
-.edit-site-document-actions__shortcut,
-.edit-site-document-actions__back {
-	color: $gray-800;
-
-	.edit-site-document-actions:hover & {
-		color: $gray-900;
-	}
-}
-
 .edit-site-document-actions__shortcut {
-	text-align: right;
+	color: $gray-800;
 }
 
-.edit-site-document-actions__back {
+.edit-site-document-actions__back.components-button.has-icon.has-text {
 	min-width: $button-size;
 	flex-shrink: 0;
-	grid-column: 1 / 2;
-	grid-row: 1;
+	color: $gray-700;
+	gap: 0;
 	z-index: 1;
 
+	&:hover {
+		color: currentColor;
+	}
+
 	.edit-site-document-actions.is-animated & {
 		animation: edit-site-document-actions__slide-in-left 0.3s;
 		@include reduce-motion("animation");

package/src/components/page-patterns/grid.js

@@ -6,7 +6,7 @@ import {
 	__experimentalText as Text,
 	Button,
 } from '@wordpress/components';
-import { useRef, useState, useMemo } from '@wordpress/element';
+import { useRef, useMemo } from '@wordpress/element';
 import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { useAsyncList } from '@wordpress/compose';
 
@@ -82,8 +82,13 @@ function Pagination( { currentPage, numPages, changePage, totalItems } ) {
 	);
 }
 
-export default function Grid( { categoryId, items, ...props } ) {
-	const [ currentPage, setCurrentPage ] = useState( 1 );
+export default function Grid( {
+	categoryId,
+	items,
+	currentPage,
+	setCurrentPage,
+	...props
+} ) {
 	const gridRef = useRef();
 	const totalItems = items.length;
 	const pageIndex = currentPage - 1;

package/src/components/page-patterns/patterns-list.js

@@ -48,6 +48,7 @@ const SYNC_DESCRIPTIONS = {
 };
 
 export default function PatternsList( { categoryId, type } ) {
+	const [ currentPage, setCurrentPage ] = useState( 1 );
 	const location = useLocation();
 	const history = useHistory();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -73,6 +74,16 @@ export default function PatternsList( { categoryId, type } ) {
 		}
 	);
 
+	const updateSearchFilter = ( value ) => {
+		setCurrentPage( 1 );
+		setFilterValue( value );
+	};
+
+	const updateSyncFilter = ( value ) => {
+		setCurrentPage( 1 );
+		setSyncFilter( value );
+	};
+
 	const id = useId();
 	const titleId = `${ id }-title`;
 	const descriptionId = `${ id }-description`;
@@ -109,7 +120,7 @@ export default function PatternsList( { categoryId, type } ) {
 				<FlexBlock className="edit-site-patterns__search-block">
 					<SearchControl
 						className="edit-site-patterns__search"
-						onChange={ ( value ) => setFilterValue( value ) }
+						onChange={ ( value ) => updateSearchFilter( value ) }
 						placeholder={ __( 'Search patterns' ) }
 						label={ __( 'Search patterns' ) }
 						value={ filterValue }
@@ -123,7 +134,7 @@ export default function PatternsList( { categoryId, type } ) {
 						label={ __( 'Filter by sync status' ) }
 						value={ syncFilter }
 						isBlock
-						onChange={ ( value ) => setSyncFilter( value ) }
+						onChange={ ( value ) => updateSyncFilter( value ) }
 						__nextHasNoMarginBottom
 					>
 						{ Object.entries( SYNC_FILTERS ).map(
@@ -157,6 +168,8 @@ export default function PatternsList( { categoryId, type } ) {
 					items={ patterns }
 					aria-labelledby={ titleId }
 					aria-describedby={ descriptionId }
+					currentPage={ currentPage }
+					setCurrentPage={ setCurrentPage }
 				/>
 			) }
 			{ ! isResolving && ! hasPatterns && <NoPatterns /> }

package/src/components/page-patterns/use-patterns.js

@@ -4,6 +4,7 @@
 import { parse } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -39,14 +40,12 @@ const templatePartToPattern = ( templatePart ) => ( {
 	templatePart,
 } );
 
-const templatePartHasCategory = ( item, category ) =>
-	item.templatePart.area === category;
-
 const selectTemplatePartsAsPatterns = (
 	select,
 	{ categoryId, search = '' } = {}
 ) => {
 	const { getEntityRecords, getIsResolving } = select( coreStore );
+	const { __experimentalGetDefaultTemplatePartAreas } = select( editorStore );
 	const query = { per_page: -1 };
 	const rawTemplateParts =
 		getEntityRecords( 'postType', TEMPLATE_PARTS, query ) ??
@@ -55,6 +54,23 @@ const selectTemplatePartsAsPatterns = (
 		templatePartToPattern( templatePart )
 	);
 
+	// In the case where a custom template part area has been removed we need
+	// the current list of areas to cross check against so orphaned template
+	// parts can be treated as uncategorized.
+	const knownAreas = __experimentalGetDefaultTemplatePartAreas() || [];
+	const templatePartAreas = knownAreas.map( ( area ) => area.area );
+
+	const templatePartHasCategory = ( item, category ) => {
+		if ( category !== 'uncategorized' ) {
+			return item.templatePart.area === category;
+		}
+
+		return (
+			item.templatePart.area === category ||
+			! templatePartAreas.includes( item.templatePart.area )
+		);
+	};
+
 	const isResolving = getIsResolving( 'getEntityRecords', [
 		'postType',
 		'wp_template_part',

package/src/components/sidebar-navigation-screen-patterns/category-item.js

@@ -12,19 +12,11 @@ export default function CategoryItem( {
 	label,
 	type,
 } ) {
-	const linkInfo = useLink(
-		{
-			path: '/patterns',
-			categoryType: type,
-			categoryId: id,
-		},
-		{
-			// Keep a record of where we came from in state so we can
-			// use the browser's back button to go back to Patterns.
-			// See the implementation of the back button in patterns-list.
-			backPath: '/patterns',
-		}
-	);
+	const linkInfo = useLink( {
+		path: '/patterns',
+		categoryType: type,
+		categoryId: id,
+	} );
 
 	if ( ! count ) {
 		return;

package/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -58,10 +58,7 @@ export default function useSyncCanvasModeWithURL() {
 
 	useEffect( () => {
 		currentCanvasInUrl.current = canvasInUrl;
-		if (
-			canvasInUrl === undefined &&
-			currentCanvasMode.current !== 'view'
-		) {
+		if ( canvasInUrl !== 'edit' && currentCanvasMode.current !== 'view' ) {
 			setCanvasMode( 'view' );
 		} else if (
 			canvasInUrl === 'edit' &&