@wordpress/editor 14.21.0 → 14.23.0

package/build-types/utils/search-templates.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Filters a template list given a search term.
+ *
+ * @param {Array}  templates   Item list
+ * @param {string} searchValue Search input.
+ *
+ * @return {Array} Filtered template list.
+ */
+export function searchTemplates(templates?: any[], searchValue?: string): any[];
+//# sourceMappingURL=search-templates.d.ts.map

package/build-types/utils/search-templates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-templates.d.ts","sourceRoot":"","sources":["../../src/utils/search-templates.js"],"names":[],"mappings":"AAuDA;;;;;;;GAOG;AACH,iEAJW,MAAM,SAiBhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "14.21.0",
+	"version": "14.23.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,41 +34,41 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.21.0",
-		"@wordpress/api-fetch": "^7.21.0",
-		"@wordpress/blob": "^4.21.0",
-		"@wordpress/block-editor": "^14.16.0",
-		"@wordpress/blocks": "^14.10.0",
-		"@wordpress/commands": "^1.21.0",
-		"@wordpress/components": "^29.7.0",
-		"@wordpress/compose": "^7.21.0",
-		"@wordpress/core-data": "^7.21.0",
-		"@wordpress/data": "^10.21.0",
-		"@wordpress/dataviews": "^4.17.0",
-		"@wordpress/date": "^5.21.0",
-		"@wordpress/deprecated": "^4.21.0",
-		"@wordpress/dom": "^4.21.0",
-		"@wordpress/element": "^6.21.0",
-		"@wordpress/fields": "^0.13.0",
-		"@wordpress/hooks": "^4.21.0",
-		"@wordpress/html-entities": "^4.21.0",
-		"@wordpress/i18n": "^5.21.0",
-		"@wordpress/icons": "^10.21.0",
-		"@wordpress/interface": "^9.6.0",
-		"@wordpress/keyboard-shortcuts": "^5.21.0",
-		"@wordpress/keycodes": "^4.21.0",
-		"@wordpress/media-utils": "^5.21.0",
-		"@wordpress/notices": "^5.21.0",
-		"@wordpress/patterns": "^2.21.0",
-		"@wordpress/plugins": "^7.21.0",
-		"@wordpress/preferences": "^4.21.0",
-		"@wordpress/private-apis": "^1.21.0",
-		"@wordpress/reusable-blocks": "^5.21.0",
-		"@wordpress/rich-text": "^7.21.0",
-		"@wordpress/server-side-render": "^5.21.0",
-		"@wordpress/url": "^4.21.0",
-		"@wordpress/warning": "^3.21.0",
-		"@wordpress/wordcount": "^4.21.0",
+		"@wordpress/a11y": "^4.23.0",
+		"@wordpress/api-fetch": "^7.23.0",
+		"@wordpress/blob": "^4.23.0",
+		"@wordpress/block-editor": "^14.18.0",
+		"@wordpress/blocks": "^14.12.0",
+		"@wordpress/commands": "^1.23.0",
+		"@wordpress/components": "^29.9.0",
+		"@wordpress/compose": "^7.23.0",
+		"@wordpress/core-data": "^7.23.0",
+		"@wordpress/data": "^10.23.0",
+		"@wordpress/dataviews": "^4.19.0",
+		"@wordpress/date": "^5.23.0",
+		"@wordpress/deprecated": "^4.23.0",
+		"@wordpress/dom": "^4.23.0",
+		"@wordpress/element": "^6.23.0",
+		"@wordpress/fields": "^0.15.0",
+		"@wordpress/hooks": "^4.23.0",
+		"@wordpress/html-entities": "^4.23.0",
+		"@wordpress/i18n": "^5.23.0",
+		"@wordpress/icons": "^10.23.0",
+		"@wordpress/interface": "^9.8.0",
+		"@wordpress/keyboard-shortcuts": "^5.23.0",
+		"@wordpress/keycodes": "^4.23.0",
+		"@wordpress/media-utils": "^5.23.0",
+		"@wordpress/notices": "^5.23.0",
+		"@wordpress/patterns": "^2.23.0",
+		"@wordpress/plugins": "^7.23.0",
+		"@wordpress/preferences": "^4.23.0",
+		"@wordpress/private-apis": "^1.23.0",
+		"@wordpress/reusable-blocks": "^5.23.0",
+		"@wordpress/rich-text": "^7.23.0",
+		"@wordpress/server-side-render": "^5.23.0",
+		"@wordpress/url": "^4.23.0",
+		"@wordpress/warning": "^3.23.0",
+		"@wordpress/wordcount": "^4.23.0",
 		"change-case": "^4.1.2",
 		"client-zip": "^2.4.5",
 		"clsx": "^2.1.1",
@@ -88,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "104af00f9abcd7a4d36b87e648f148c72cc4ea5f"
+	"gitHead": "ab5c79cd40adbb68898536c50e035b0a734338ea"
 }

package/src/components/editor-interface/style.scss

@@ -8,6 +8,5 @@
 }
 
 .editor-visual-editor {
-	// Fits the height to the parent — flex-shrink ensures it doesn’t create overflow.
-	flex: 1 1 0%;
+	flex: 1 0 auto;
 }

package/src/components/post-actions/set-as-homepage.js

@@ -160,6 +160,7 @@ export const useSetAsHomepageAction = () => {
 
 				return true;
 			},
+			modalFocusOnMount: 'firstContentElement',
 			RenderModal: SetAsHomepageModal,
 		} ),
 		[ pageForPosts, pageOnFront ]

package/src/components/post-actions/set-as-posts-page.js

@@ -157,6 +157,7 @@ export const useSetAsPostsPageAction = () => {
 
 				return true;
 			},
+			modalFocusOnMount: 'firstContentElement',
 			RenderModal: SetAsPostsPageModal,
 		} ),
 		[ pageForPosts, pageOnFront ]

package/src/components/post-author/check.js

@@ -2,14 +2,12 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
-import { AUTHORS_QUERY } from './constants';
 
 /**
  * Wrapper component that renders its children only if the post type supports the author.
@@ -21,20 +19,17 @@ import { AUTHORS_QUERY } from './constants';
  * supports the author or if there are no authors available.
  */
 export default function PostAuthorCheck( { children } ) {
-	const { hasAssignAuthorAction, hasAuthors } = useSelect( ( select ) => {
+	const { hasAssignAuthorAction } = useSelect( ( select ) => {
 		const post = select( editorStore ).getCurrentPost();
 		const canAssignAuthor = post?._links?.[ 'wp:action-assign-author' ]
 			? true
 			: false;
 		return {
 			hasAssignAuthorAction: canAssignAuthor,
-			hasAuthors: canAssignAuthor
-				? select( coreStore ).getUsers( AUTHORS_QUERY )?.length >= 1
-				: false,
 		};
 	}, [] );
 
-	if ( ! hasAssignAuthorAction || ! hasAuthors ) {
+	if ( ! hasAssignAuthorAction ) {
 		return null;
 	}
 

package/src/components/post-author/panel.js

@@ -6,6 +6,8 @@ import { Button, Dropdown } from '@wordpress/components';
 import { useState, useMemo } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -13,10 +15,16 @@ import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '
 import PostAuthorCheck from './check';
 import PostAuthorForm from './index';
 import PostPanelRow from '../post-panel-row';
-import { useAuthorsQuery } from './hook';
+import { BASE_QUERY } from './constants';
+import { store as editorStore } from '../../store';
 
 function PostAuthorToggle( { isOpen, onClick } ) {
-	const { postAuthor } = useAuthorsQuery();
+	const { postAuthor } = useSelect( ( select ) => {
+		const id = select( editorStore ).getEditedPostAttribute( 'author' );
+		return {
+			postAuthor: select( coreStore ).getUser( id, BASE_QUERY ),
+		};
+	}, [] );
 	const authorName =
 		decodeEntities( postAuthor?.name ) || __( '(No author)' );
 	return (

package/src/components/post-author/test/check.js

@@ -19,7 +19,7 @@ jest.mock( '@wordpress/data/src/components/use-select', () => {
 	return mock;
 } );
 
-function setupUseSelectMock( hasAssignAuthorAction, hasAuthors ) {
+function setupUseSelectMock( hasAssignAuthorAction ) {
 	useSelect.mockImplementation( ( cb ) => {
 		return cb( () => ( {
 			getPostType: () => ( { supports: { author: true } } ),
@@ -29,28 +29,20 @@ function setupUseSelectMock( hasAssignAuthorAction, hasAuthors ) {
 					'wp:action-assign-author': hasAssignAuthorAction,
 				},
 			} ),
-			getUsers: () => Array( hasAuthors ? 1 : 0 ).fill( {} ),
 		} ) );
 	} );
 }
 
 describe( 'PostAuthorCheck', () => {
-	it( 'should not render anything if has no authors', () => {
-		setupUseSelectMock( false, true );
-
-		render( <PostAuthorCheck>authors</PostAuthorCheck> );
-		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
-	} );
-
 	it( "should not render anything if doesn't have author action", () => {
-		setupUseSelectMock( true, false );
+		setupUseSelectMock( false );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render control', () => {
-		setupUseSelectMock( true, true );
+		setupUseSelectMock( true );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.getByText( 'authors' ) ).toBeVisible();

package/src/components/post-publish-panel/style.scss

@@ -129,6 +129,7 @@
 .post-publish-panel__postpublish .components-panel__body {
 	border-bottom: $border-width solid $gray-200;
 	border-top: none;
+	word-break: break-word;
 }
 
 .post-publish-panel__postpublish-buttons {

package/src/components/post-template/create-new-template-modal.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+
 /**
  * WordPress dependencies
  */
@@ -12,7 +17,6 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { cleanForSlug } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -92,7 +96,7 @@ export default function CreateNewTemplateModal( { onClose } ) {
 			] );
 
 		const newTemplate = await createTemplate( {
-			slug: cleanForSlug( title || DEFAULT_TITLE ),
+			slug: kebabCase( title || DEFAULT_TITLE ) || 'wp-custom-template',
 			content: newTemplateContent,
 			title: title || DEFAULT_TITLE,
 		} );

package/src/components/post-template/style.scss

@@ -1,5 +1,15 @@
 .editor-post-template__swap-template-modal {
 	z-index: z-index(".editor-post-template__swap-template-modal");
+
+	.editor-post-template__swap-template-search {
+		background: $white;
+		position: sticky;
+		top: 0;
+		padding: $grid-unit-20 0;
+		transform: translateY(- $grid-unit-05); // Offsets the top padding on the modal content container
+		margin-bottom: - $grid-unit-05;
+		z-index: z-index(".editor-post-template__swap-template-search");
+	}
 }
 
 .editor-post-template__create-template-modal {

package/src/components/post-template/swap-template-button.js

@@ -4,7 +4,7 @@
 import { useMemo, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
-import { MenuItem, Modal } from '@wordpress/components';
+import { MenuItem, Modal, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -14,6 +14,7 @@ import { parse } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { useAvailableTemplates, useEditedPostContext } from './hooks';
+import { searchTemplates } from '../../utils/search-templates';
 
 export default function SwapTemplateButton( { onClick } ) {
 	const [ showModal, setShowModal ] = useState( false );
@@ -61,6 +62,7 @@ export default function SwapTemplateButton( { onClick } ) {
 }
 
 function TemplatesList( { postType, onSelect } ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
 	const availableTemplates = useAvailableTemplates( postType );
 	const templatesAsPatterns = useMemo(
 		() =>
@@ -72,11 +74,26 @@ function TemplatesList( { postType, onSelect } ) {
 			} ) ),
 		[ availableTemplates ]
 	);
+
+	const filteredBlockTemplates = useMemo( () => {
+		return searchTemplates( templatesAsPatterns, searchValue );
+	}, [ templatesAsPatterns, searchValue ] );
+
 	return (
-		<BlockPatternsList
-			label={ __( 'Templates' ) }
-			blockPatterns={ templatesAsPatterns }
-			onClickPattern={ onSelect }
-		/>
+		<>
+			<SearchControl
+				__nextHasNoMarginBottom
+				onChange={ setSearchValue }
+				value={ searchValue }
+				label={ __( 'Search' ) }
+				placeholder={ __( 'Search' ) }
+				className="editor-post-template__swap-template-search"
+			/>
+			<BlockPatternsList
+				label={ __( 'Templates' ) }
+				blockPatterns={ filteredBlockTemplates }
+				onClickPattern={ onSelect }
+			/>
+		</>
 	);
 }

package/src/components/start-page-options/index.js

@@ -17,6 +17,7 @@ import { store as interfaceStore } from '@wordpress/interface';
 /**
  * Internal dependencies
  */
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 import { store as editorStore } from '../../store';
 
 export function useStartPatterns() {
@@ -152,7 +153,8 @@ export default function StartPageOptions() {
 		return {
 			postId: getCurrentPostId(),
 			enabled:
-				choosePatternModalEnabled && 'page' === getCurrentPostType(),
+				choosePatternModalEnabled &&
+				TEMPLATE_POST_TYPE !== getCurrentPostType(),
 		};
 	}, [] );
 

package/src/components/visual-editor/index.js

@@ -385,7 +385,6 @@ function VisualEditor( {
 					'has-padding': isFocusedEntity || enableResizing,
 					'is-resizable': enableResizing,
 					'is-iframed': ! disableIframe,
-					'is-scrollable': disableIframe || deviceType !== 'Desktop',
 				}
 			) }
 		>

package/src/components/visual-editor/style.scss

@@ -6,9 +6,6 @@
 	// when the iframe doesn't cover the whole canvas
 	// like the "focused entities".
 	background-color: $gray-300;
-	// Allows the height to fit the parent container and avoids parent scrolling contexts from
-	// having overflow due to popovers of block tools.
-	overflow: hidden;
 
 	// This overrides the iframe background since it's applied again here
 	// It also prevents some style glitches if `editor-visual-editor`
@@ -28,6 +25,12 @@
 		padding: $grid-unit-30 $grid-unit-30 0;
 	}
 
+	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the
+	// legacy (non-iframed) canvas, overflow must not be hidden in order to maintain support for sticky positioning.
+	&.is-iframed {
+		overflow: hidden;
+	}
+
 	// The button element easily inherits styles that are meant for the editor style.
 	// These rules enhance the specificity to reduce that inheritance.
 	// This is duplicated in edit-site.
@@ -41,30 +44,4 @@
 			padding: 6px;
 		}
 	}
-
-	// The cases for this are non-iframed editor canvas or previewing devices. The block canvas is
-	// made the scrolling context.
-	&.is-scrollable .block-editor-block-canvas {
-		overflow: auto;
-
-		// Applicable only when legacy (non-iframed).
-		> .block-editor-writing-flow {
-			display: flow-root;
-			min-height: 100%;
-			box-sizing: border-box; // Ensures that 100% min-height doesn’t create overflow.
-		}
-
-		// Applicable only when iframed. These styles ensure that if the the iframe is
-		// given a fixed height and it’s taller than the viewport then scrolling is
-		// allowed. This is needed for device previews.
-		> .block-editor-iframe__container {
-			display: flex;
-			flex-direction: column;
-
-			> .block-editor-iframe__scale-container {
-				flex: 1 0 fit-content;
-				display: flow-root;
-			}
-		}
-	}
 }

package/src/utils/search-templates.js

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Sanitizes the search input string.
+ *
+ * @param {string} input The search input to normalize.
+ *
+ * @return {string} The normalized search input.
+ */
+function normalizeSearchInput( input = '' ) {
+	// Disregard diacritics.
+	input = removeAccents( input );
+
+	// Trim & Lowercase.
+	input = input.trim().toLowerCase();
+
+	return input;
+}
+
+/**
+ * Get the search rank for a given template and a specific search term.
+ *
+ * @param {Object} template    Template to rank
+ * @param {string} searchValue Search term
+ *
+ * @return {number} A template search rank
+ */
+function getTemplateSearchRank( template, searchValue ) {
+	const normalizedSearchValue = normalizeSearchInput( searchValue );
+	const normalizedTitle = normalizeSearchInput( template.title );
+
+	let rank = 0;
+
+	if ( normalizedSearchValue === normalizedTitle ) {
+		rank += 30;
+	} else if ( normalizedTitle.startsWith( normalizedSearchValue ) ) {
+		rank += 20;
+	} else {
+		const searchTerms = normalizedSearchValue.split( ' ' );
+		const hasMatchedTerms = searchTerms.every( ( searchTerm ) =>
+			normalizedTitle.includes( searchTerm )
+		);
+
+		// Prefer template with every search word in the title.
+		if ( hasMatchedTerms ) {
+			rank += 10;
+		}
+	}
+
+	return rank;
+}
+
+/**
+ * Filters a template list given a search term.
+ *
+ * @param {Array}  templates   Item list
+ * @param {string} searchValue Search input.
+ *
+ * @return {Array} Filtered template list.
+ */
+export function searchTemplates( templates = [], searchValue = '' ) {
+	if ( ! searchValue ) {
+		return templates;
+	}
+
+	const rankedTemplates = templates
+		.map( ( template ) => {
+			return [ template, getTemplateSearchRank( template, searchValue ) ];
+		} )
+		.filter( ( [ , rank ] ) => rank > 0 );
+
+	rankedTemplates.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 );
+	return rankedTemplates.map( ( [ template ] ) => template );
+}