@wordpress/editor 14.22.0 → 14.23.0

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-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/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 );
+}