@wordpress/editor 14.0.3 → 14.2.0

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

@@ -123,6 +123,8 @@ function ActionWithModal( { action, item, ActionTrigger, onClose } ) {
 					overlayClassName={ `editor-action-modal editor-action-modal__${ kebabCase(
 						action.id
 					) }` }
+					focusOnMount="firstContentElement"
+					size="small"
 				>
 					<RenderModal
 						items={ [ item ] }

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

@@ -36,6 +36,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-slug/check.js

@@ -3,6 +3,14 @@
  */
 import PostTypeSupportCheck from '../post-type-support-check';
 
+/**
+ * Wrapper component that renders its children only if the post type supports the slug.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function PostSlugCheck( { children } ) {
 	return (
 		<PostTypeSupportCheck supportKeys="slug">

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

@@ -58,6 +58,11 @@ function PostSlugControl() {
 	);
 }
 
+/**
+ * Renders the PostSlug component. It provide a control for editing the post slug.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function PostSlug() {
 	return (
 		<PostSlugCheck>

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

@@ -27,6 +27,7 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
 import PostPanelRow from '../post-panel-row';
+import PostSticky from '../post-sticky';
 import { PrivatePostSchedule } from '../post-schedule';
 import { store as editorStore } from '../../store';
 
@@ -281,6 +282,7 @@ export default function PostStatus() {
 											) }
 										</VStack>
 									) }
+									<PostSticky />
 								</VStack>
 							</form>
 						</>

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, VisuallyHidden } from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -10,8 +10,12 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import PostStickyCheck from './check';
 import { store as editorStore } from '../../store';
-import PostPanelRow from '../post-panel-row';
 
+/**
+ * Renders the PostSticky component. It provides a checkbox control for the sticky post feature.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function PostSticky() {
 	const postSticky = useSelect( ( select ) => {
 		return (
@@ -22,16 +26,14 @@ export default function PostSticky() {
 
 	return (
 		<PostStickyCheck>
-			<PostPanelRow label={ __( 'Sticky' ) }>
-				<ToggleControl
-					className="editor-post-sticky__toggle-control"
-					label={
-						<VisuallyHidden>{ __( 'Sticky' ) }</VisuallyHidden>
-					}
-					checked={ postSticky }
-					onChange={ () => editPost( { sticky: ! postSticky } ) }
-				/>
-			</PostPanelRow>
+			<CheckboxControl
+				className="editor-post-sticky__checkbox-control"
+				label={ __( 'Sticky' ) }
+				help={ __( 'Pin this post to the top of the blog' ) }
+				checked={ postSticky }
+				onChange={ () => editPost( { sticky: ! postSticky } ) }
+				__nextHasNoMarginBottom
+			/>
 		</PostStickyCheck>
 	);
 }

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

@@ -1,3 +1,4 @@
-.editor-post-sticky__toggle-control {
-	padding: 6px 12px;
+.editor-post-sticky__checkbox-control {
+	border-top: $border-width solid $gray-200;
+	padding-top: $grid-unit-20;
 }

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-template/create-new-template-modal.js

@@ -109,6 +109,8 @@ export default function CreateNewTemplateModal( { onClose } ) {
 		<Modal
 			title={ __( 'Create custom template' ) }
 			onRequestClose={ cancel }
+			focusOnMount="firstContentElement"
+			size="small"
 		>
 			<form
 				className="editor-post-template__create-form"

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

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

@@ -30,6 +30,7 @@ import PostTaxonomiesPanel from '../post-taxonomies/panel';
 import PostTransformPanel from '../post-transform-panel';
 import SidebarHeader from './header';
 import TemplateContentPanel from '../template-content-panel';
+import TemplatePartContentPanel from '../template-part-content-panel';
 import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars';
 import { sidebars } from './constants';
 import { unlock } from '../../lock-unlock';
@@ -114,6 +115,7 @@ const SidebarContent = ( {
 					{ renderingMode !== 'post-only' && (
 						<TemplateContentPanel />
 					) }
+					<TemplatePartContentPanel />
 					<PostTransformPanel />
 					<PostTaxonomiesPanel />
 					<PatternOverridesPanel />

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

@@ -21,7 +21,6 @@ import PostLastEditedPanel from '../post-last-edited-panel';
 import PostPanelSection from '../post-panel-section';
 import PostSchedulePanel from '../post-schedule/panel';
 import PostStatusPanel from '../post-status';
-import PostStickyPanel from '../post-sticky';
 import PostSyncStatus from '../post-sync-status';
 import PostTemplatePanel from '../post-template/panel';
 import PostURLPanel from '../post-url/panel';
@@ -69,7 +68,7 @@ export default function PostSummary( { onActionPerformed } ) {
 								<PostLastEditedPanel />
 							</VStack>
 							{ ! isRemovedPostStatusPanel && (
-								<VStack spacing={ 2 }>
+								<VStack spacing={ 4 }>
 									<VStack spacing={ 1 }>
 										<PostStatusPanel />
 										<PostSchedulePanel />
@@ -84,7 +83,6 @@ export default function PostSummary( { onActionPerformed } ) {
 										<PostsPerPage />
 										<SiteDiscussion />
 										<PostFormatPanel />
-										<PostStickyPanel />
 									</VStack>
 									<TemplateAreas />
 									{ fills }

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-content-panel/index.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { TEMPLATE_PART_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
+
+const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
+
+function TemplatePartContentPanelInner() {
+	const blockTypes = useSelect( ( select ) => {
+		const { getBlockTypes } = select( blocksStore );
+		return getBlockTypes();
+	}, [] );
+	const themeBlockNames = useMemo( () => {
+		return blockTypes
+			.filter( ( blockType ) => {
+				return blockType.category === 'theme';
+			} )
+			.map( ( { name } ) => name );
+	}, [ blockTypes ] );
+	const themeBlocks = useSelect(
+		( select ) => {
+			const { getBlocksByName } = select( blockEditorStore );
+			return getBlocksByName( themeBlockNames );
+		},
+		[ themeBlockNames ]
+	);
+	if ( themeBlocks.length === 0 ) {
+		return null;
+	}
+	return (
+		<PanelBody title={ __( 'Content' ) }>
+			<BlockQuickNavigation clientIds={ themeBlocks } />
+		</PanelBody>
+	);
+}
+
+export default function TemplatePartContentPanel() {
+	const postType = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		return getCurrentPostType();
+	}, [] );
+	if ( postType !== TEMPLATE_PART_POST_TYPE ) {
+		return null;
+	}
+
+	return <TemplatePartContentPanelInner />;
+}

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