@wordpress/editor 14.22.0 → 14.24.0

package/src/components/collab-sidebar/comment-form.js

@@ -7,7 +7,7 @@ import {
 	Button,
 	TextareaControl,
 } from '@wordpress/components';
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -36,6 +36,8 @@ function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
 				__nextHasNoMarginBottom
 				value={ inputComment ?? '' }
 				onChange={ setInputComment }
+				label={ __( 'Comment' ) }
+				hideLabelFromVision
 			/>
 			<HStack alignment="left" spacing="3" justify="flex-start">
 				<Button

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

@@ -56,7 +56,6 @@ export default function EditorInterface( {
 } ) {
 	const {
 		mode,
-		isRichEditingEnabled,
 		isInserterOpened,
 		isListViewOpened,
 		isDistractionFree,
@@ -69,9 +68,16 @@ export default function EditorInterface( {
 		const editorSettings = getEditorSettings();
 		const postTypeLabel = getPostTypeLabel();
 
+		let _mode = select( editorStore ).getEditorMode();
+		if ( ! editorSettings.richEditingEnabled && _mode === 'visual' ) {
+			_mode = 'text';
+		}
+		if ( ! editorSettings.codeEditingEnabled && _mode === 'text' ) {
+			_mode = 'visual';
+		}
+
 		return {
-			mode: select( editorStore ).getEditorMode(),
-			isRichEditingEnabled: editorSettings.richEditingEnabled,
+			mode: _mode,
 			isInserterOpened: select( editorStore ).isInserterOpened(),
 			isListViewOpened: select( editorStore ).isListViewOpened(),
 			isDistractionFree: get( 'core', 'distractionFree' ),
@@ -148,23 +154,20 @@ export default function EditorInterface( {
 								editorCanvasView
 							) : (
 								<>
-									{ ! isPreviewMode &&
-										( mode === 'text' ||
-											! isRichEditingEnabled ) && (
-											<TextEditor
-												// We should auto-focus the canvas (title) on load.
-												// eslint-disable-next-line jsx-a11y/no-autofocus
-												autoFocus={ autoFocus }
-											/>
-										) }
+									{ ! isPreviewMode && mode === 'text' && (
+										<TextEditor
+											// We should auto-focus the canvas (title) on load.
+											// eslint-disable-next-line jsx-a11y/no-autofocus
+											autoFocus={ autoFocus }
+										/>
+									) }
 									{ ! isPreviewMode &&
 										! isLargeViewport &&
 										mode === 'visual' && (
 											<BlockToolbar hideDragHandle />
 										) }
 									{ ( isPreviewMode ||
-										( isRichEditingEnabled &&
-											mode === 'visual' ) ) && (
+										mode === 'visual' ) && (
 										<VisualEditor
 											styles={ styles }
 											contentRef={ contentRef }
@@ -187,7 +190,6 @@ export default function EditorInterface( {
 				! isDistractionFree &&
 				isLargeViewport &&
 				showBlockBreadcrumbs &&
-				isRichEditingEnabled &&
 				mode === 'visual' && (
 					<BlockBreadcrumb rootLabelText={ documentLabel } />
 				)

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-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/postpublish.js

@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, Button, TextControl } from '@wordpress/components';
+import {
+	PanelBody,
+	Button,
+	TextControl,
+	ExternalLink,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -9,6 +15,7 @@ import { addQueryArgs, safeDecodeURIComponent } from '@wordpress/url';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
+import { external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -118,9 +125,9 @@ export default function PostPublishPanelPostpublish( {
 	return (
 		<div className="post-publish-panel__postpublish">
 			<PanelBody className="post-publish-panel__postpublish-header">
-				<a ref={ postLinkRef } href={ link }>
+				<ExternalLink ref={ postLinkRef } href={ link }>
 					{ decodeEntities( post.title ) || __( '(no title)' ) }
-				</a>{ ' ' }
+				</ExternalLink>{ ' ' }
 				{ postPublishNonLinkHeader }
 			</PanelBody>
 			<PanelBody>
@@ -153,8 +160,17 @@ export default function PostPublishPanelPostpublish( {
 							variant="primary"
 							href={ link }
 							__next40pxDefaultSize
+							icon={ external }
+							iconPosition="right"
+							target="_blank"
 						>
 							{ viewPostLabel }
+							<VisuallyHidden as="span">
+								{
+									/* translators: accessibility text */
+									__( '(opens in a new tab)' )
+								}
+							</VisuallyHidden>
 						</Button>
 					) }
 					<Button

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

@@ -138,9 +138,11 @@
 	flex-wrap: wrap;
 	gap: $grid-unit-20;
 
-	.components-button {
+	.components-button,
+	.components-button.has-icon {
 		justify-content: center;
 		flex: 1;
+		min-width: unset;
 	}
 
 	.components-clipboard-button {

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -27,7 +27,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   padding: 0;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -47,7 +47,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
   width: 100%;
 }
 
-.emotion-10>* {
+.emotion-12>* {
   min-width: 0;
 }
 
@@ -87,9 +87,22 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           class="components-panel__body post-publish-panel__postpublish-header is-opened"
         >
           <a
+            class="components-external-link"
             href="https://wordpress.local/sample-page/"
+            rel="external noreferrer noopener"
+            target="_blank"
           >
-            (no title)
+            <span
+              class="components-external-link__contents"
+            >
+              (no title)
+            </span>
+            <span
+              aria-label="(opens in a new tab)"
+              class="components-external-link__icon"
+            >
+              ↗
+            </span>
           </a>
            
           is now live.
@@ -143,9 +156,31 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-next-40px-default-size is-primary"
+              class="components-button is-next-40px-default-size is-primary has-icon"
               href="https://wordpress.local/sample-page/"
-            />
+              target="_blank"
+            >
+              <span
+                class="components-visually-hidden emotion-6 emotion-7"
+                data-wp-c16t="true"
+                data-wp-component="VisuallyHidden"
+                style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+              >
+                (opens in a new tab)
+              </span>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
+                />
+              </svg>
+            </a>
             <a
               class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
@@ -164,7 +199,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="components-flex components-h-stack emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="HStack"
           >
@@ -219,7 +254,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   padding: 0;
 }
 
-.emotion-10 {
+.emotion-12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -239,7 +274,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
   width: 100%;
 }
 
-.emotion-10>* {
+.emotion-12>* {
   min-width: 0;
 }
 
@@ -279,9 +314,22 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           class="components-panel__body post-publish-panel__postpublish-header is-opened"
         >
           <a
+            class="components-external-link"
             href="https://wordpress.local/sample-page/"
+            rel="external noreferrer noopener"
+            target="_blank"
           >
-            (no title)
+            <span
+              class="components-external-link__contents"
+            >
+              (no title)
+            </span>
+            <span
+              aria-label="(opens in a new tab)"
+              class="components-external-link__icon"
+            >
+              ↗
+            </span>
           </a>
            
           is now live.
@@ -335,9 +383,31 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
             class="post-publish-panel__postpublish-buttons"
           >
             <a
-              class="components-button is-next-40px-default-size is-primary"
+              class="components-button is-next-40px-default-size is-primary has-icon"
               href="https://wordpress.local/sample-page/"
-            />
+              target="_blank"
+            >
+              <span
+                class="components-visually-hidden emotion-6 emotion-7"
+                data-wp-c16t="true"
+                data-wp-component="VisuallyHidden"
+                style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+              >
+                (opens in a new tab)
+              </span>
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z"
+                />
+              </svg>
+            </a>
             <a
               class="components-button is-next-40px-default-size is-secondary"
               href="post-new.php?"
@@ -356,7 +426,7 @@ exports[`PostPublishPanel should render the post-publish panel if the post is sc
           class="components-base-control__field emotion-2 emotion-3"
         >
           <div
-            class="components-flex components-h-stack emotion-10 emotion-11"
+            class="components-flex components-h-stack emotion-12 emotion-7"
             data-wp-c16t="true"
             data-wp-component="HStack"
           >

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/template-part-menu-items/convert-to-template-part.js

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { symbolFilled } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -20,8 +21,10 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
-	const { canCreate } = useSelect( ( select ) => {
+	const { isBlockBasedTheme, canCreate } = useSelect( ( select ) => {
 		return {
+			isBlockBasedTheme:
+				select( coreStore ).getCurrentTheme()?.is_block_theme,
 			canCreate:
 				select( blockEditorStore ).canInsertBlockType(
 					'core/template-part'
@@ -29,7 +32,7 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 		};
 	}, [] );
 
-	if ( ! canCreate ) {
+	if ( ! isBlockBasedTheme || ! canCreate ) {
 		return null;
 	}
 

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/store/private-actions.js

@@ -216,6 +216,7 @@ export const saveDirtyEntities =
 								{
 									label: __( 'View site' ),
 									url: homeUrl,
+									openInNewTab: true,
 								},
 							],
 						} );

package/src/store/utils/notice-builder.js

@@ -58,6 +58,7 @@ export function getNotificationArgumentsForSaveSuccess( data ) {
 		actions.push( {
 			label: isDraft ? __( 'View Preview' ) : postType.labels.view_item,
 			url: post.link,
+			openInNewTab: true,
 		} );
 	}
 	return [

package/src/store/utils/test/notice-builder.js

@@ -70,7 +70,9 @@ describe( 'getNotificationArgumentsForSaveSuccess()', () => {
 				'updated',
 				{
 					...defaultExpectedAction,
-					actions: [ { label: 'view', url: 'some_link' } ],
+					actions: [
+						{ label: 'view', openInNewTab: true, url: 'some_link' },
+					],
 				},
 			],
 		],