@wordpress/editor 14.0.1 → 14.1.0

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

@@ -35,6 +35,10 @@
 
 .editor-post-card-panel__icon.is-sync {
 	fill: var(--wp-block-synced-color);
+
+	& + .editor-post-card-panel__title {
+		color: var(--wp-block-synced-color);
+	}
 }
 
 .editor-post-card-panel__title-badge {

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;

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

@@ -131,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-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 );

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-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/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/sidebar/post-summary.js

@@ -69,7 +69,7 @@ export default function PostSummary( { onActionPerformed } ) {
 								<PostLastEditedPanel />
 							</VStack>
 							{ ! isRemovedPostStatusPanel && (
-								<VStack spacing={ 2 }>
+								<VStack spacing={ 4 }>
 									<VStack spacing={ 1 }>
 										<PostStatusPanel />
 										<PostSchedulePanel />

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 );

package/src/components/template-part-menu-items/convert-to-regular.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function ConvertToRegularBlocks( { clientId, onClose } ) {
+	const { getBlocks } = useSelect( blockEditorStore );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	const canRemove = useSelect(
+		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+		[ clientId ]
+	);
+
+	if ( ! canRemove ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			onClick={ () => {
+				replaceBlocks( clientId, getBlocks( clientId ) );
+				onClose();
+			} }
+		>
+			{ __( 'Detach' ) }
+		</MenuItem>
+	);
+}

package/src/components/template-part-menu-items/convert-to-template-part.js

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { MenuItem } from '@wordpress/components';
+import { createBlock } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { symbolFilled } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import CreateTemplatePartModal from '../create-template-part-modal';
+
+export default function ConvertToTemplatePart( { clientIds, blocks } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const { canCreate } = useSelect( ( select ) => {
+		return {
+			canCreate:
+				select( blockEditorStore ).canInsertBlockType(
+					'core/template-part'
+				),
+		};
+	}, [] );
+
+	if ( ! canCreate ) {
+		return null;
+	}
+
+	const onConvert = async ( templatePart ) => {
+		replaceBlocks(
+			clientIds,
+			createBlock( 'core/template-part', {
+				slug: templatePart.slug,
+				theme: templatePart.theme,
+			} )
+		);
+		createSuccessNotice( __( 'Template part created.' ), {
+			type: 'snackbar',
+		} );
+
+		// The modal and this component will be unmounted because of `replaceBlocks` above,
+		// so no need to call `closeModal` or `onClose`.
+	};
+
+	return (
+		<>
+			<MenuItem
+				icon={ symbolFilled }
+				onClick={ () => {
+					setIsModalOpen( true );
+				} }
+				aria-expanded={ isModalOpen }
+				aria-haspopup="dialog"
+			>
+				{ __( 'Create template part' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<CreateTemplatePartModal
+					closeModal={ () => {
+						setIsModalOpen( false );
+					} }
+					blocks={ blocks }
+					onCreate={ onConvert }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/template-part-menu-items/index.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	BlockSettingsMenuControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ConvertToRegularBlocks from './convert-to-regular';
+import ConvertToTemplatePart from './convert-to-template-part';
+
+export default function TemplatePartMenuItems() {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds, onClose } ) => (
+				<TemplatePartConverterMenuItem
+					clientIds={ selectedClientIds }
+					onClose={ onClose }
+				/>
+			) }
+		</BlockSettingsMenuControls>
+	);
+}
+
+function TemplatePartConverterMenuItem( { clientIds, onClose } ) {
+	const { isContentOnly, blocks } = useSelect(
+		( select ) => {
+			const { getBlocksByClientId, getBlockEditingMode } =
+				select( blockEditorStore );
+			return {
+				blocks: getBlocksByClientId( clientIds ),
+				isContentOnly:
+					clientIds.length === 1 &&
+					getBlockEditingMode( clientIds[ 0 ] ) === 'contentOnly',
+			};
+		},
+		[ clientIds ]
+	);
+
+	// Do not show the convert button if the block is in content-only mode.
+	if ( isContentOnly ) {
+		return null;
+	}
+
+	// Allow converting a single template part to standard blocks.
+	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {
+		return (
+			<ConvertToRegularBlocks
+				clientId={ clientIds[ 0 ] }
+				onClose={ onClose }
+			/>
+		);
+	}
+	return <ConvertToTemplatePart clientIds={ clientIds } blocks={ blocks } />;
+}

package/src/components/template-part-menu-items/index.native.js

@@ -0,0 +1,3 @@
+export default function TemplatePartMenuItems() {
+	return null;
+}

package/src/components/template-validation-notice/index.js

@@ -51,6 +51,7 @@ export default function TemplateValidationNotice() {
 					synchronizeTemplate();
 				} }
 				onCancel={ () => setShowConfirmDialog( false ) }
+				size="medium"
 			>
 				{ __(
 					'Resetting the template may result in loss of content, do you want to continue?'

package/src/components/theme-support-check/index.js

@@ -9,6 +9,15 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Checks if the current theme supports specific features and renders the children if supported.
+ *
+ * @param {Object}          props             The component props.
+ * @param {Element}         props.children    The children to render if the theme supports the specified features.
+ * @param {string|string[]} props.supportKeys The key(s) of the theme support(s) to check.
+ *
+ * @return {JSX.Element|null} The rendered children if the theme supports the specified features, otherwise null.
+ */
 export default function ThemeSupportCheck( { children, supportKeys } ) {
 	const { postType, themeSupports } = useSelect( ( select ) => {
 		return {

package/src/components/time-to-read/index.js

@@ -20,6 +20,11 @@ import { store as editorStore } from '../../store';
  */
 const AVERAGE_READING_RATE = 189;
 
+/**
+ * Component for showing Time To Read in Content.
+ *
+ * @return {JSX.Element} The rendered TimeToRead component.
+ */
 export default function TimeToRead() {
 	const content = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),

package/src/components/visual-editor/edit-template-blocks-notification.js

@@ -80,6 +80,7 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 				} );
 			} }
 			onCancel={ () => setIsDialogOpen( false ) }
+			size="medium"
 		>
 			{ __(
 				'You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?'

package/src/components/word-count/index.js

@@ -10,6 +10,11 @@ import { count as wordCount } from '@wordpress/wordcount';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the word count of the post content.
+ *
+ * @return {JSX.Element|null} The rendered WordCount component.
+ */
 export default function WordCount() {
 	const content = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),