@wordpress/editor 14.0.0 → 14.1.0

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

@@ -6,7 +6,7 @@
 }
 
 .editor-post-panel__row-label {
-	width: 30%;
+	width: 38%;
 	flex-shrink: 0;
 	min-height: $grid-unit-40;
 	display: flex;
@@ -25,6 +25,7 @@
 	.components-button {
 		max-width: 100%;
 		text-align: left;
+		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
 		height: auto;
 		min-height: $button-size-compact;

package/src/components/post-preview-button/index.js

@@ -183,6 +183,7 @@ export default function PostPreviewButton( {
 			className={ className || 'editor-post-preview' }
 			href={ href }
 			target={ targetId }
+			__experimentalIsFocusable
 			disabled={ ! isSaveable }
 			onClick={ openPreviewWindow }
 			role={ role }

package/src/components/post-preview-button/test/index.js

@@ -139,12 +139,16 @@ describe( 'PostPreviewButton', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should be disabled if post is not saveable.', () => {
+	it( 'should be accessibly disabled if post is not saveable.', () => {
 		mockUseSelect( { isEditedPostSaveable: () => false } );
 
 		render( <PostPreviewButton /> );
 
-		expect( screen.getByRole( 'button' ) ).toBeDisabled();
+		expect( screen.getByRole( 'button' ) ).toBeEnabled();
+		expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
 	} );
 
 	it( 'should not be disabled if post is saveable.', () => {
@@ -153,6 +157,10 @@ describe( 'PostPreviewButton', () => {
 		render( <PostPreviewButton /> );
 
 		expect( screen.getByRole( 'button' ) ).toBeEnabled();
+		expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
 	} );
 
 	it( 'should set `href` to edited post preview link if specified.', () => {

package/src/components/post-publish-button/index.js

@@ -205,6 +205,9 @@ export class PostPublishButton extends Component {
 	}
 }
 
+/**
+ * Renders the publish button.
+ */
 export default compose( [
 	withSelect( ( select ) => {
 		const {

package/src/components/post-publish-button/label.js

@@ -10,6 +10,11 @@ import { useViewportMatch } from '@wordpress/compose';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the label for the publish button.
+ *
+ * @return {string} The label for the publish button.
+ */
 export default function PublishButtonLabel() {
 	const isSmallerThanMediumViewport = useViewportMatch( 'medium', '<' );
 	const {

package/src/components/post-publish-panel/index.js

@@ -93,6 +93,7 @@ export class PostPublishPanel extends Component {
 							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
 								<Button
+									__experimentalIsFocusable
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
 									variant="secondary"
@@ -130,6 +131,9 @@ export class PostPublishPanel extends Component {
 	}
 }
 
+/**
+ * Renders a panel for publishing a post.
+ */
 export default compose( [
 	withSelect( ( select ) => {
 		const { getPostType } = select( coreStore );

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

@@ -1,7 +1,3 @@
-.editor-post-publish-panel {
-	background: $white;
-}
-
 .editor-post-publish-panel__content {
 	// Ensure the post-publish panel accounts for the header and footer height.
 	min-height: calc(100% - #{$header-height + 84px});
@@ -71,6 +67,7 @@
 
 .editor-post-publish-panel__header-publish-button {
 	padding-right: $grid-unit-05;
+	justify-content: center;
 }
 
 .editor-post-publish-panel__header-cancel-button {
@@ -122,6 +119,7 @@
 
 	.components-panel__body-title .components-button {
 		align-items: flex-start;
+		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
 	}
 }
@@ -194,40 +192,34 @@
 	}
 }
 
-.edit-post-layout,
-.edit-site-editor__interface-skeleton {
-	.editor-post-publish-panel {
-		position: fixed;
-		z-index: z-index(".edit-post-layout .edit-post-post-publish-panel");
-		top: $admin-bar-height-big;
-		bottom: 0;
-		right: 0;
-		left: 0;
-		overflow: auto;
-
-		@include break-medium() {
-			z-index: z-index(".edit-post-layout .edit-post-post-publish-panel {greater than small}");
-			top: $admin-bar-height;
-			left: auto;
-			width: $sidebar-width + $border-width;
-			border-left: $border-width solid $gray-300;
-			transform: translateX(+100%);
-			animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
-			@include reduce-motion("animation");
-
-			body.is-fullscreen-mode & {
-				top: 0;
-			}
-
-			// Keep it open on focus to avoid conflict with navigate-regions animation.
-			[role="region"]:focus & {
-				transform: translateX(0%);
-			}
+.editor-post-publish-panel {
+	position: fixed;
+	z-index: z-index(".editor-post-publish-panel");
+	background: $white;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	overflow: auto;
+
+	@include break-medium() {
+		z-index: z-index(".editor-post-publish-panel {greater than small}");
+		top: $admin-bar-height;
+		left: auto;
+		width: $sidebar-width + $border-width;
+		border-left: $border-width solid $gray-300;
+		transform: translateX(+100%);
+		animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+		@include reduce-motion("animation");
+
+		body.is-fullscreen-mode & {
+			top: 0;
 		}
-	}
 
-	.editor-post-publish-panel__header-publish-button {
-		justify-content: center;
+		// Keep it open on focus to avoid conflict with navigate-regions animation.
+		[role="region"]:focus & {
+			transform: translateX(0%);
+		}
 	}
 }
 

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

@@ -41,4 +41,9 @@
 		padding: 0;
 		margin-bottom: $grid-unit-10;
 	}
+
+	p.components-base-control__help:has(.components-checkbox-control__help) {
+		margin-top: $grid-unit-05;
+	}
+
 }

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

@@ -8,6 +8,14 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Wrapper component that renders its children only if post has a sticky action.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component} The component to be rendered or null if post type is not 'post' or hasStickyAction is false.
+ */
 export default function PostStickyCheck( { children } ) {
 	const { hasStickyAction, postType } = useSelect( ( select ) => {
 		const post = select( editorStore ).getCurrentPost();

package/src/components/post-sticky/index.js

@@ -12,6 +12,11 @@ import PostStickyCheck from './check';
 import { store as editorStore } from '../../store';
 import PostPanelRow from '../post-panel-row';
 
+/**
+ * Renders the PostSticky component. It provide toggle control for the sticky post feature.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function PostSticky() {
 	const postSticky = useSelect( ( select ) => {
 		return (

package/src/components/post-switch-to-draft-button/index.js

@@ -8,14 +8,23 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-// TODO: deprecate..
+/**
+ * Renders a button component that allows the user to switch a post to draft status.
+ *
+ * @return {JSX.Element} The rendered component.
+ */
 export default function PostSwitchToDraftButton() {
+	deprecated( 'wp.editor.PostSwitchToDraftButton', {
+		since: '6.7',
+		version: '6.9',
+	} );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
 	const { editPost, savePost } = useDispatch( editorStore );

package/src/components/post-sync-status/index.js

@@ -10,6 +10,11 @@ import { __, _x } from '@wordpress/i18n';
 import PostPanelRow from '../post-panel-row';
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the sync status of a post.
+ *
+ * @return {JSX.Element|null} The rendered sync status component.
+ */
 export default function PostSyncStatus() {
 	const { syncStatus, postType } = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
@@ -35,14 +40,8 @@ export default function PostSyncStatus() {
 		<PostPanelRow label={ __( 'Sync status' ) }>
 			<div className="editor-post-sync-status__value">
 				{ syncStatus === 'unsynced'
-					? _x(
-							'Not synced',
-							'Text that indicates that the pattern is not synchronized'
-					  )
-					: _x(
-							'Synced',
-							'Text that indicates that the pattern is synchronized'
-					  ) }
+					? _x( 'Not synced', 'pattern (singular)' )
+					: _x( 'Synced', 'pattern (singular)' ) }
 			</div>
 		</PostPanelRow>
 	);

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

@@ -9,6 +9,14 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the children components only if the current post type has taxonomies.
+ *
+ * @param {Object}  props          The component props.
+ * @param {Element} props.children The children components to render.
+ *
+ * @return {Component|null} The rendered children components or null if the current post type has no taxonomies.
+ */
 export default function PostTaxonomiesCheck( { children } ) {
 	const hasTaxonomies = useSelect( ( select ) => {
 		const postType = select( editorStore ).getCurrentPostType();

package/src/components/post-taxonomies/flat-term-selector.js

@@ -26,9 +26,12 @@ import MostUsedTerms from './most-used-terms';
 const EMPTY_ARRAY = [];
 
 /**
- * Module constants
+ * How the max suggestions limit was chosen:
+ *  - Matches the `per_page` range set by the REST API.
+ *  - Can't use "unbound" query. The `FormTokenField` needs a fixed number.
+ *  - Matches default for `FormTokenField`.
  */
-const MAX_TERMS_SUGGESTIONS = 20;
+const MAX_TERMS_SUGGESTIONS = 100;
 const DEFAULT_QUERY = {
 	per_page: MAX_TERMS_SUGGESTIONS,
 	_fields: 'id,name',
@@ -49,6 +52,14 @@ const termNamesToIds = ( names, terms ) => {
 		.filter( ( id ) => id !== undefined );
 };
 
+/**
+ * Renders a flat term selector component.
+ *
+ * @param {Object} props      The component props.
+ * @param {string} props.slug The slug of the taxonomy.
+ *
+ * @return {JSX.Element} The rendered flat term selector component.
+ */
 export function FlatTermSelector( { slug } ) {
 	const [ values, setValues ] = useState( [] );
 	const [ search, setSearch ] = useState( '' );

package/src/components/post-taxonomies/index.js

@@ -43,4 +43,12 @@ export function PostTaxonomies( { taxonomyWrapper = identity } ) {
 	} );
 }
 
+/**
+ * Renders the taxonomies associated with a post.
+ *
+ * @param {Object}   props                 The component props.
+ * @param {Function} props.taxonomyWrapper The wrapper function for each taxonomy component.
+ *
+ * @return {Array} An array of JSX elements representing the visible taxonomies.
+ */
 export default PostTaxonomies;

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

@@ -63,4 +63,13 @@ function PostTaxonomies() {
 	);
 }
 
+/**
+ * Renders a panel for a specific taxonomy.
+ *
+ * @param {Object}  props          The component props.
+ * @param {Object}  props.taxonomy The taxonomy object.
+ * @param {Element} props.children The child components.
+ *
+ * @return {Component} The rendered taxonomy panel.
+ */
 export default PostTaxonomies;

package/src/components/post-title/index.js

@@ -30,14 +30,12 @@ import usePostTitle from './use-post-title';
 import PostTypeSupportCheck from '../post-type-support-check';
 
 function PostTitle( _, forwardedRef ) {
-	const { placeholder, hasFixedToolbar } = useSelect( ( select ) => {
+	const { placeholder } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
-		const { titlePlaceholder, hasFixedToolbar: _hasFixedToolbar } =
-			getSettings();
+		const { titlePlaceholder } = getSettings();
 
 		return {
 			placeholder: titlePlaceholder,
-			hasFixedToolbar: _hasFixedToolbar,
 		};
 	}, [] );
 
@@ -186,7 +184,6 @@ function PostTitle( _, forwardedRef ) {
 	// This same block is used in both the visual and the code editor.
 	const className = clsx( DEFAULT_CLASSNAMES, {
 		'is-selected': isSelected,
-		'has-fixed-toolbar': hasFixedToolbar,
 	} );
 
 	return (

package/src/components/post-title/post-title-raw.js

@@ -29,14 +29,12 @@ import usePostTitle from './use-post-title';
  * @return {Component} The rendered component.
  */
 function PostTitleRaw( _, forwardedRef ) {
-	const { placeholder, hasFixedToolbar } = useSelect( ( select ) => {
+	const { placeholder } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
-		const { titlePlaceholder, hasFixedToolbar: _hasFixedToolbar } =
-			getSettings();
+		const { titlePlaceholder } = getSettings();
 
 		return {
 			placeholder: titlePlaceholder,
-			hasFixedToolbar: _hasFixedToolbar,
 		};
 	}, [] );
 
@@ -61,7 +59,6 @@ function PostTitleRaw( _, forwardedRef ) {
 	// This same block is used in both the visual and the code editor.
 	const className = clsx( DEFAULT_CLASSNAMES, {
 		'is-selected': isSelected,
-		'has-fixed-toolbar': hasFixedToolbar,
 		'is-raw-text': true,
 	} );
 

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

@@ -9,6 +9,14 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Wrapper component that renders its children only if the post can trashed.
+ *
+ * @param {Object}  props          - The component props.
+ * @param {Element} props.children - The child components to render.
+ *
+ * @return {Component|null} The rendered child components or null if the post can not trashed.
+ */
 export default function PostTrashCheck( { children } ) {
 	const { canTrashPost } = useSelect( ( select ) => {
 		const { isEditedPostNew, getCurrentPostId, getCurrentPostType } =

package/src/components/post-trash/index.js

@@ -14,6 +14,11 @@ import { useState } from '@wordpress/element';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Displays the Post Trash Button and Confirm Dialog in the Editor.
+ *
+ * @return {JSX.Element|null} The rendered PostTrash component.
+ */
 export default function PostTrash() {
 	const { isNew, isDeleting, postId } = useSelect( ( select ) => {
 		const store = select( editorStore );
@@ -55,6 +60,7 @@ export default function PostTrash() {
 				onConfirm={ handleConfirm }
 				onCancel={ () => setShowConfirmDialog( false ) }
 				confirmButtonText={ __( 'Move to trash' ) }
+				size="medium"
 			>
 				{ __(
 					'Are you sure you want to move this post to the trash?'

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

@@ -6,6 +6,7 @@ import { useSelect } from '@wordpress/data';
 import { Dropdown, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { safeDecodeURIComponent } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -58,10 +59,17 @@ export default function PostURLPanel() {
 }
 
 function PostURLToggle( { isOpen, onClick } ) {
-	const slug = useSelect(
-		( select ) => select( editorStore ).getEditedPostSlug(),
-		[]
-	);
+	const { slug, isFrontPage, postLink } = useSelect( ( select ) => {
+		const { getCurrentPostId, getCurrentPost } = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const siteSettings = getEditedEntityRecord( 'root', 'site' );
+		const _id = getCurrentPostId();
+		return {
+			slug: select( editorStore ).getEditedPostSlug(),
+			isFrontPage: siteSettings?.page_on_front === _id,
+			postLink: getCurrentPost()?.link,
+		};
+	}, [] );
 	const decodedSlug = safeDecodeURIComponent( slug );
 	return (
 		<Button
@@ -73,7 +81,7 @@ function PostURLToggle( { isOpen, onClick } ) {
 			aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
 			onClick={ onClick }
 		>
-			/{ decodedSlug }
+			{ isFrontPage ? postLink : <>/{ decodedSlug }</> }
 		</Button>
 	);
 }

package/src/components/post-visibility/index.js

@@ -133,6 +133,7 @@ export default function PostVisibility( { onClose } ) {
 				onConfirm={ confirmPrivate }
 				onCancel={ handleDialogCancel }
 				confirmButtonText={ __( 'Publish' ) }
+				size="medium"
 			>
 				{ __( 'Would you like to privately publish this post now?' ) }
 			</ConfirmDialog>

package/src/components/provider/disable-non-page-content-blocks.js

@@ -6,31 +6,36 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
 
-const CONTENT_ONLY_BLOCKS = applyFilters( 'editor.postContentBlockTypes', [
+const DEFAULT_CONTENT_ONLY_BLOCKS = [
 	'core/post-title',
 	'core/post-featured-image',
 	'core/post-content',
 	'core/template-part',
-] );
+];
 
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
+	const contentOnlyBlocks = applyFilters(
+		'editor.postContentBlockTypes',
+		DEFAULT_CONTENT_ONLY_BLOCKS
+	);
+
 	// Note that there are two separate subscription because the result for each
 	// returns a new array.
 	const contentOnlyIds = useSelect( ( select ) => {
 		const { getBlocksByName, getBlockParents, getBlockName } =
 			select( blockEditorStore );
-		return getBlocksByName( CONTENT_ONLY_BLOCKS ).filter( ( clientId ) =>
+		return getBlocksByName( contentOnlyBlocks ).filter( ( clientId ) =>
 			getBlockParents( clientId ).every( ( parentClientId ) => {
 				const parentBlockName = getBlockName( parentClientId );
 				return (
 					// Ignore descendents of the query block.
 					parentBlockName !== 'core/query' &&
 					// Enable only the top-most block.
-					! CONTENT_ONLY_BLOCKS.includes( parentBlockName )
+					! contentOnlyBlocks.includes( parentBlockName )
 				);
 			} )
 		);

package/src/components/provider/index.js

@@ -33,6 +33,7 @@ import StartTemplateOptions from '../start-template-options';
 import EditorKeyboardShortcuts from '../global-keyboard-shortcuts';
 import PatternRenameModal from '../pattern-rename-modal';
 import PatternDuplicateModal from '../pattern-duplicate-modal';
+import TemplatePartMenuItems from '../template-part-menu-items';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -160,8 +161,21 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		BlockEditorProviderComponent = ExperimentalBlockEditorProvider,
 		__unstableTemplate: template,
 	} ) => {
-		const mode = useSelect(
-			( select ) => select( editorStore ).getRenderingMode(),
+		const { editorSettings, selection, isReady, mode } = useSelect(
+			( select ) => {
+				const {
+					getEditorSettings,
+					getEditorSelection,
+					getRenderingMode,
+					__unstableIsEditorReady,
+				} = select( editorStore );
+				return {
+					editorSettings: getEditorSettings(),
+					isReady: __unstableIsEditorReady(),
+					mode: getRenderingMode(),
+					selection: getEditorSelection(),
+				};
+			},
 			[]
 		);
 		const shouldRenderTemplate = !! template && mode !== 'post-only';
@@ -187,21 +201,6 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			rootLevelPost.type,
 			rootLevelPost.slug,
 		] );
-		const { editorSettings, selection, isReady } = useSelect(
-			( select ) => {
-				const {
-					getEditorSettings,
-					getEditorSelection,
-					__unstableIsEditorReady,
-				} = select( editorStore );
-				return {
-					editorSettings: getEditorSettings(),
-					isReady: __unstableIsEditorReady(),
-					selection: getEditorSelection(),
-				};
-			},
-			[]
-		);
 		const { id, type } = rootLevelPost;
 		const blockEditorSettings = useBlockEditorSettings(
 			editorSettings,
@@ -301,6 +300,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ ! settings.__unstableIsPreviewMode && (
 								<>
 									<PatternsMenuItems />
+									<TemplatePartMenuItems />
 									<ContentOnlySettingsMenu />
 									{ mode === 'template-locked' && (
 										<DisableNonPageContentBlocks />

package/src/components/save-publish-panels/style.scss

@@ -26,11 +26,3 @@
 		bottom: 0;
 	}
 }
-
-.edit-post-layout__toggle-sidebar-panel {
-	.interface-interface-skeleton__sidebar:focus &,
-	.interface-interface-skeleton__sidebar:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
-}

package/src/components/sidebar/post-summary.js

@@ -30,6 +30,7 @@ import PostsPerPage from '../posts-per-page';
 import SiteDiscussion from '../site-discussion';
 import { store as editorStore } from '../../store';
 import TemplateAreas from '../template-areas';
+import { PrivatePostLastRevision } from '../post-last-revision';
 
 /**
  * Module Constants
@@ -68,7 +69,7 @@ export default function PostSummary( { onActionPerformed } ) {
 								<PostLastEditedPanel />
 							</VStack>
 							{ ! isRemovedPostStatusPanel && (
-								<VStack spacing={ 2 }>
+								<VStack spacing={ 4 }>
 									<VStack spacing={ 1 }>
 										<PostStatusPanel />
 										<PostSchedulePanel />
@@ -76,6 +77,7 @@ export default function PostSummary( { onActionPerformed } ) {
 										<PostAuthorPanel />
 										<PostTemplatePanel />
 										<PostDiscussionPanel />
+										<PrivatePostLastRevision />
 										<PageAttributesPanel />
 										<PostSyncStatus />
 										<BlogTitle />

package/src/components/table-of-contents/index.js

@@ -52,4 +52,14 @@ function TableOfContents(
 	);
 }
 
+/**
+ * Renders a table of contents component.
+ *
+ * @param {Object}      props                         The component props.
+ * @param {boolean}     props.hasOutlineItemsDisabled Whether outline items are disabled.
+ * @param {boolean}     props.repositionDropdown      Whether to reposition the dropdown.
+ * @param {Element.ref} ref                           The component's ref.
+ *
+ * @return {JSX.Element} The rendered table of contents component.
+ */
 export default forwardRef( TableOfContents );