@wordpress/editor 14.1.0 → 14.3.0

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

@@ -42,7 +42,7 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 			postType: _postType,
 		};
 	}, [] );
-	const allActions = usePostActions( postType, onActionPerformed );
+	const allActions = usePostActions( { postType, onActionPerformed } );
 
 	const actions = useMemo( () => {
 		return allActions.filter( ( action ) => {
@@ -59,7 +59,7 @@ export default function PostActions( { onActionPerformed, buttonProps } ) {
 					icon={ moreVertical }
 					label={ __( 'Actions' ) }
 					disabled={ ! actions.length }
-					__experimentalIsFocusable
+					accessibleWhenDisabled
 					className="editor-all-actions-button"
 					onClick={ () =>
 						setIsActionsMenuOpen( ! isActionsMenuOpen )
@@ -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

@@ -14,6 +14,7 @@
 			flex-wrap: wrap;
 			column-gap: $grid-unit-10;
 			row-gap: $grid-unit-05;
+			word-break: break-word;
 		}
 	}
 

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

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { ExternalLink, TextareaControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -52,7 +53,9 @@ export default function PostExcerpt( {
 		[]
 	);
 	const { editPost } = useDispatch( editorStore );
-	const [ localExcerpt, setLocalExcerpt ] = useState( excerpt );
+	const [ localExcerpt, setLocalExcerpt ] = useState(
+		decodeEntities( excerpt )
+	);
 	const updatePost = ( value ) => {
 		editPost( { [ usedAttribute ]: value } );
 	};

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

@@ -13,6 +13,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo, useState } from '@wordpress/element';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -172,8 +173,8 @@ function PrivateExcerpt() {
 		return false;
 	}
 	const excerptText = !! excerpt && (
-		<Text align="left" numberOfLines={ 4 } truncate>
-			{ excerpt }
+		<Text align="left" numberOfLines={ 4 } truncate={ allowEditing }>
+			{ decodeEntities( excerpt ) }
 		</Text>
 	);
 	if ( ! allowEditing ) {

package/src/components/post-featured-image/style.scss

@@ -20,6 +20,21 @@
 			opacity: 1;
 		}
 	}
+
+	.components-drop-zone__content {
+		border-radius: $radius-block-ui;
+	}
+
+	// Align text and icons horizontally to avoid clipping when the featured image is not set.
+	&:has(.editor-post-featured-image__toggle) .components-drop-zone .components-drop-zone__content-inner {
+		display: flex;
+		align-items: center;
+		gap: $grid-unit-10;
+
+		.components-drop-zone__content-icon {
+			margin: 0;
+		}
+	}
 }
 
 .editor-post-featured-image__toggle,

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

@@ -25,6 +25,7 @@
 	.components-button {
 		max-width: 100%;
 		text-align: left;
+		white-space: normal;
 		text-wrap: balance; // Fallback for Safari.
 		text-wrap: pretty;
 		height: auto;

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

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

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

@@ -93,7 +93,7 @@ export class PostPublishPanel extends Component {
 							</div>
 							<div className="editor-post-publish-panel__header-cancel-button">
 								<Button
-									__experimentalIsFocusable
+									accessibleWhenDisabled
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
 									variant="secondary"

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

@@ -196,7 +196,7 @@
 	position: fixed;
 	z-index: z-index(".editor-post-publish-panel");
 	background: $white;
-	top: 0;
+	top: $admin-bar-height-big;
 	bottom: 0;
 	right: 0;
 	left: 0;

package/src/components/post-saved-state/index.js

@@ -21,6 +21,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 /**
  * Internal dependencies
  */
+import { STATUS_OPTIONS } from '../../components/post-status';
 import { store as editorStore } from '../../store';
 
 /**
@@ -104,10 +105,19 @@ export default function PostSavedState( { forceIsDirty } ) {
 		return null;
 	}
 
+	// We shouldn't render the button if the post has not one of the following statuses: pending, draft, auto-draft.
+	// The reason for this is that this button handles the `save as pending` and `save draft` actions.
+	// An exception for this is when the post has a custom status and there should be a way to save changes without
+	// having to publish. This should be handled better in the future when custom statuses have better support.
+	// @see https://github.com/WordPress/gutenberg/issues/3144.
+	const isIneligibleStatus =
+		! [ 'pending', 'draft', 'auto-draft' ].includes( postStatus ) &&
+		STATUS_OPTIONS.map( ( { value } ) => value ).includes( postStatus );
+
 	if (
 		isPublished ||
 		isScheduled ||
-		! [ 'pending', 'draft', 'auto-draft' ].includes( postStatus ) ||
+		isIneligibleStatus ||
 		( postStatusHasChanged &&
 			[ 'pending', 'draft' ].includes( postStatus ) )
 	) {

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

@@ -7,6 +7,7 @@ import { parseISO, endOfMonth, startOfMonth } from 'date-fns';
  * WordPress dependencies
  */
 import { getSettings } from '@wordpress/date';
+import { _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useState, useMemo } from '@wordpress/element';
@@ -98,6 +99,10 @@ export function PrivatePostSchedule( {
 			currentDate={ postDate }
 			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
+			dateOrder={
+				/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+				_x( 'dmy', 'date order' )
+			}
 			events={ events }
 			onMonthPreviewed={ ( date ) =>
 				setPreviewedMonth( parseISO( date ) )

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';
 
@@ -39,7 +40,7 @@ const labels = {
 	publish: __( 'Published' ),
 };
 
-const STATUS_OPTIONS = [
+export const STATUS_OPTIONS = [
 	{
 		label: (
 			<>
@@ -281,6 +282,7 @@ export default function PostStatus() {
 											) }
 										</VStack>
 									) }
+									<PostSticky />
 								</VStack>
 							</form>
 						</>

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,10 +10,9 @@ 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 provide toggle control for the sticky post feature.
+ * Renders the PostSticky component. It provides a checkbox control for the sticky post feature.
  *
  * @return {Component} The component to be rendered.
  */
@@ -27,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-taxonomies/README.md

@@ -3,7 +3,7 @@
 `PostTaxonomies` is a component used to render the taxonomy picker
 UI. It uses the `FlatTermSelector` or `HierarchicalTermSelector` components
 based on the value of the `hierarchical` argument specified in
-[register_taxonomy](https://codex.wordpress.org/Function_Reference/register_taxonomy).
+[register_taxonomy](https://developer.wordpress.org/reference/functions/register_taxonomy).
 
 The output of the respective taxonomy components can be customized using
 the following filter:

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

@@ -85,21 +85,14 @@ function PostTitle( _, forwardedRef ) {
 		let plainText = '';
 		let html = '';
 
-		// IE11 only supports `Text` as an argument for `getData` and will
-		// otherwise throw an invalid argument error, so we try the standard
-		// arguments first, then fallback to `Text` if they fail.
 		try {
 			plainText = clipboardData.getData( 'text/plain' );
 			html = clipboardData.getData( 'text/html' );
-		} catch ( error1 ) {
-			try {
-				html = clipboardData.getData( 'Text' );
-			} catch ( error2 ) {
-				// Some browsers like UC Browser paste plain text by default and
-				// don't support clipboardData at all, so allow default
-				// behaviour.
-				return;
-			}
+		} catch ( error ) {
+			// Some browsers like UC Browser paste plain text by default and
+			// don't support clipboardData at all, so allow default
+			// behaviour.
+			return;
 		}
 
 		// Allows us to ask for this information when we get a report.

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

@@ -26,3 +26,7 @@
 .editor-post-url__input input.components-input-control__input {
 	padding-inline-start: 0 !important;
 }
+
+.editor-post-url__panel-toggle {
+	word-break: break-word;
+}

package/src/components/preview-dropdown/index.js

@@ -50,7 +50,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		size: 'compact',
 		showTooltip: ! showIconLabels,
 		disabled,
-		__experimentalIsFocusable: disabled,
+		accessibleWhenDisabled: disabled,
 	};
 	const menuProps = {
 		'aria-label': __( 'View options' ),

package/src/components/provider/index.native.js

@@ -171,17 +171,9 @@ class NativeEditorProvider extends Component {
 		);
 
 		this.subscriptionParentUpdateEditorSettings =
-			subscribeUpdateEditorSettings(
-				( { galleryWithImageBlocks, ...editorSettings } ) => {
-					if ( typeof galleryWithImageBlocks === 'boolean' ) {
-						window.wp.galleryBlockV2Enabled =
-							galleryWithImageBlocks;
-					}
-					updateEditorSettings(
-						this.getThemeColors( editorSettings )
-					);
-				}
-			);
+			subscribeUpdateEditorSettings( ( { ...editorSettings } ) => {
+				updateEditorSettings( this.getThemeColors( editorSettings ) );
+			} );
 
 		this.subscriptionParentUpdateCapabilities = subscribeUpdateCapabilities(
 			( payload ) => {

package/src/components/provider/use-block-editor-settings.js

@@ -27,7 +27,7 @@ import { lock, unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
 
 const EMPTY_BLOCKS_LIST = [];
-const DEFAULT_STYLES = {};
+const EMPTY_OBJECT = {};
 
 function __experimentalReusableBlocksSelect( select ) {
 	return (
@@ -42,7 +42,6 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalDiscussionSettings',
 	'__experimentalFeatures',
 	'__experimentalGlobalStylesBaseStyles',
-	'__unstableGalleryWithImageBlocks',
 	'alignWide',
 	'blockInspectorTabs',
 	'allowedMimeTypes',
@@ -88,8 +87,12 @@ const BLOCK_EDITOR_SETTINGS = [
 	'__experimentalArchiveTitleNameLabel',
 ];
 
-const { globalStylesDataKey, selectBlockPatternsKey, reusableBlocksSelectKey } =
-	unlock( privateApis );
+const {
+	globalStylesDataKey,
+	globalStylesLinksDataKey,
+	selectBlockPatternsKey,
+	reusableBlocksSelectKey,
+} = unlock( privateApis );
 
 /**
  * React hook used to compute the block editor settings to use for the post editor.
@@ -179,7 +182,8 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	);
 
 	const { merged: mergedGlobalStyles } = useGlobalStylesContext();
-	const globalStylesData = mergedGlobalStyles.styles ?? DEFAULT_STYLES;
+	const globalStylesData = mergedGlobalStyles.styles ?? EMPTY_OBJECT;
+	const globalStylesLinksData = mergedGlobalStyles._links ?? EMPTY_OBJECT;
 
 	const settingsBlockPatterns =
 		settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -268,6 +272,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				)
 			),
 			[ globalStylesDataKey ]: globalStylesData,
+			[ globalStylesLinksDataKey ]: globalStylesLinksData,
 			allowedBlockTypes,
 			allowRightClickOverrides,
 			focusMode: focusMode && ! forceDisableFocusMode,

package/src/components/save-publish-panels/index.js

@@ -30,20 +30,28 @@ export default function SavePublishPanels( {
 		useDispatch( editorStore );
 	const {
 		publishSidebarOpened,
-		hasNonPostEntityChanges,
-		hasPostMetaChanges,
-	} = useSelect(
-		( select ) => ( {
-			publishSidebarOpened:
-				select( editorStore ).isPublishSidebarOpened(),
-			hasNonPostEntityChanges:
-				select( editorStore ).hasNonPostEntityChanges(),
-			hasPostMetaChanges: unlock(
-				select( editorStore )
-			).hasPostMetaChanges(),
-		} ),
-		[]
-	);
+		isPublishable,
+		isDirty,
+		hasOtherEntitiesChanges,
+	} = useSelect( ( select ) => {
+		const {
+			isPublishSidebarOpened,
+			isEditedPostPublishable,
+			isCurrentPostPublished,
+			isEditedPostDirty,
+			hasNonPostEntityChanges,
+		} = select( editorStore );
+		const _hasOtherEntitiesChanges =
+			hasNonPostEntityChanges() ||
+			unlock( select( editorStore ) ).hasPostMetaChanges();
+		return {
+			publishSidebarOpened: isPublishSidebarOpened(),
+			isPublishable:
+				! isCurrentPostPublished() && isEditedPostPublishable(),
+			isDirty: _hasOtherEntitiesChanges || isEditedPostDirty(),
+			hasOtherEntitiesChanges: _hasOtherEntitiesChanges,
+		};
+	}, [] );
 
 	const openEntitiesSavedStates = useCallback(
 		() => setEntitiesSavedStatesCallback( true ),
@@ -62,29 +70,31 @@ export default function SavePublishPanels( {
 				PostPublishExtension={ PluginPostPublishPanel.Slot }
 			/>
 		);
-	} else if ( hasNonPostEntityChanges || hasPostMetaChanges ) {
+	} else if ( isPublishable && ! hasOtherEntitiesChanges ) {
 		unmountableContent = (
-			<div className="editor-layout__toggle-entities-saved-states-panel">
+			<div className="editor-layout__toggle-publish-panel">
 				<Button
 					variant="secondary"
-					className="editor-layout__toggle-entities-saved-states-panel-button"
-					onClick={ openEntitiesSavedStates }
+					className="editor-layout__toggle-publish-panel-button"
+					onClick={ togglePublishSidebar }
 					aria-expanded={ false }
 				>
-					{ __( 'Open save panel' ) }
+					{ __( 'Open publish panel' ) }
 				</Button>
 			</div>
 		);
 	} else {
 		unmountableContent = (
-			<div className="editor-layout__toggle-publish-panel">
+			<div className="editor-layout__toggle-entities-saved-states-panel">
 				<Button
 					variant="secondary"
-					className="editor-layout__toggle-publish-panel-button"
-					onClick={ togglePublishSidebar }
+					className="editor-layout__toggle-entities-saved-states-panel-button"
+					onClick={ openEntitiesSavedStates }
 					aria-expanded={ false }
+					disabled={ ! isDirty }
+					accessibleWhenDisabled
 				>
-					{ __( 'Open publish panel' ) }
+					{ __( 'Open save panel' ) }
 				</Button>
 			</div>
 		);

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';
@@ -111,9 +112,8 @@ const SidebarContent = ( {
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
 					<PostSummary onActionPerformed={ onActionPerformed } />
 					<PluginDocumentSettingPanel.Slot />
-					{ renderingMode !== 'post-only' && (
-						<TemplateContentPanel />
-					) }
+					<TemplateContentPanel renderingMode={ renderingMode } />
+					<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';
@@ -29,7 +28,6 @@ import BlogTitle from '../blog-title';
 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';
 
 /**
@@ -84,9 +82,7 @@ export default function PostSummary( { onActionPerformed } ) {
 										<PostsPerPage />
 										<SiteDiscussion />
 										<PostFormatPanel />
-										<PostStickyPanel />
 									</VStack>
-									<TemplateAreas />
 									{ fills }
 								</VStack>
 							) }

package/src/components/template-content-panel/index.js

@@ -1,18 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
+import { store as editorStore } from '../../store';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
@@ -22,15 +25,36 @@ const PAGE_CONTENT_BLOCKS = [
 	'core/post-title',
 ];
 
-export default function TemplateContentPanel() {
-	const clientIds = useSelect( ( select ) => {
+const TEMPLATE_PART_BLOCK = 'core/template-part';
+
+export default function TemplateContentPanel( { renderingMode } ) {
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { clientIds, postType } = useSelect( ( select ) => {
 		const { getBlocksByName } = select( blockEditorStore );
-		return getBlocksByName( PAGE_CONTENT_BLOCKS );
+		const { getCurrentPostType } = select( editorStore );
+		const _postType = getCurrentPostType();
+		return {
+			postType: _postType,
+			clientIds: getBlocksByName(
+				TEMPLATE_POST_TYPE === _postType
+					? TEMPLATE_PART_BLOCK
+					: PAGE_CONTENT_BLOCKS
+			),
+		};
 	}, [] );
 
+	if ( renderingMode === 'post-only' && postType !== TEMPLATE_POST_TYPE ) {
+		return null;
+	}
+
 	return (
 		<PanelBody title={ __( 'Content' ) }>
-			<BlockQuickNavigation clientIds={ clientIds } />
+			<BlockQuickNavigation
+				clientIds={ clientIds }
+				onSelect={ () => {
+					enableComplementaryArea( 'core', 'edit-post/document' );
+				} }
+			/>
 		</PanelBody>
 	);
 }