@wordpress/editor 14.0.2 → 14.0.4

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

@@ -55,6 +55,7 @@ export default function EditorInterface( {
 	disableIframe,
 	autoFocus,
 	customSaveButton,
+	customSavePanel,
 	forceDisableBlockTools,
 	title,
 	iframeProps,
@@ -212,14 +213,22 @@ export default function EditorInterface( {
 				)
 			}
 			actions={
-				<SavePublishPanels
-					closeEntitiesSavedStates={ closeEntitiesSavedStates }
-					isEntitiesSavedStatesOpen={ entitiesSavedStatesCallback }
-					setEntitiesSavedStatesCallback={
-						setEntitiesSavedStatesCallback
-					}
-					forceIsDirtyPublishPanel={ forceIsDirty }
-				/>
+				! isPreviewMode
+					? customSavePanel || (
+							<SavePublishPanels
+								closeEntitiesSavedStates={
+									closeEntitiesSavedStates
+								}
+								isEntitiesSavedStatesOpen={
+									entitiesSavedStatesCallback
+								}
+								setEntitiesSavedStatesCallback={
+									setEntitiesSavedStatesCallback
+								}
+								forceIsDirtyPublishPanel={ forceIsDirty }
+							/>
+					  )
+					: undefined
 			}
 			shortcuts={ {
 				previous: previousShortcut,

package/src/components/global-styles-provider/index.js

@@ -7,17 +7,15 @@ import { isPlainObject } from 'is-plain-object';
 /**
  * WordPress dependencies
  */
-import { registerBlockStyle, store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useMemo, useCallback } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import setNestedValue from '../../utils/set-nested-value';
 
 const { GlobalStylesContext, cleanEmptyObject } = unlock(
 	blockEditorPrivateApis
@@ -32,85 +30,6 @@ export function mergeBaseAndUserConfigs( base, user ) {
 	} );
 }
 
-/**
- * Resolves shared block style variation definitions from the user origin
- * under their respective block types and registers the block style if required.
- *
- * @param {Object} userConfig Current user origin global styles data.
- * @return {Object} Updated global styles data.
- */
-function useResolvedBlockStyleVariationsConfig( userConfig ) {
-	const { getBlockStyles } = useSelect( blocksStore );
-	const sharedVariations = userConfig?.styles?.blocks?.variations;
-
-	// Collect block style variation definitions to merge and unregistered
-	// block styles for automatic registration.
-	const [ userConfigToMerge, unregisteredStyles ] = useMemo( () => {
-		if ( ! sharedVariations ) {
-			return [];
-		}
-
-		const variationsConfigToMerge = {};
-		const unregisteredBlockStyles = [];
-
-		Object.entries( sharedVariations ).forEach(
-			( [ variationName, variation ] ) => {
-				if ( ! variation?.blockTypes?.length ) {
-					return;
-				}
-
-				variation.blockTypes.forEach( ( blockName ) => {
-					const blockStyles = getBlockStyles( blockName );
-					const registeredBlockStyle = blockStyles.find(
-						( { name } ) => name === variationName
-					);
-
-					if ( ! registeredBlockStyle ) {
-						unregisteredBlockStyles.push( [
-							blockName,
-							{
-								name: variationName,
-								label: variationName,
-							},
-						] );
-					}
-
-					const path = [
-						'styles',
-						'blocks',
-						blockName,
-						'variations',
-						variationName,
-					];
-					setNestedValue( variationsConfigToMerge, path, variation );
-				} );
-			}
-		);
-
-		return [ variationsConfigToMerge, unregisteredBlockStyles ];
-	}, [ sharedVariations, getBlockStyles ] );
-
-	// Automatically register missing block styles from variations.
-	useEffect(
-		() =>
-			unregisteredStyles?.forEach( ( unregisteredStyle ) =>
-				registerBlockStyle( ...unregisteredStyle )
-			),
-		[ unregisteredStyles ]
-	);
-
-	// Merge shared block style variation definitions into overall user config.
-	const updatedConfig = useMemo( () => {
-		if ( ! userConfigToMerge ) {
-			return userConfig;
-		}
-
-		return deepmerge( userConfigToMerge, userConfig );
-	}, [ userConfigToMerge, userConfig ] );
-
-	return updatedConfig;
-}
-
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
 		( select ) => {
@@ -199,7 +118,7 @@ function useGlobalStylesUserConfig() {
 				options
 			);
 		},
-		[ globalStylesId ]
+		[ globalStylesId, editEntityRecord, getEditedEntityRecord ]
 	);
 
 	return [ isReady, config, setConfig ];
@@ -219,28 +138,26 @@ export function useGlobalStylesContext() {
 	const [ isUserConfigReady, userConfig, setUserConfig ] =
 		useGlobalStylesUserConfig();
 	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
-	const userConfigWithVariations =
-		useResolvedBlockStyleVariationsConfig( userConfig );
 
 	const mergedConfig = useMemo( () => {
-		if ( ! baseConfig || ! userConfigWithVariations ) {
+		if ( ! baseConfig || ! userConfig ) {
 			return {};
 		}
 
-		return mergeBaseAndUserConfigs( baseConfig, userConfigWithVariations );
-	}, [ userConfigWithVariations, baseConfig ] );
+		return mergeBaseAndUserConfigs( baseConfig, userConfig );
+	}, [ userConfig, baseConfig ] );
 
 	const context = useMemo( () => {
 		return {
 			isReady: isUserConfigReady && isBaseConfigReady,
-			user: userConfigWithVariations,
+			user: userConfig,
 			base: baseConfig,
 			merged: mergedConfig,
 			setUserConfig,
 		};
 	}, [
 		mergedConfig,
-		userConfigWithVariations,
+		userConfig,
 		baseConfig,
 		setUserConfig,
 		isUserConfigReady,

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

@@ -3,7 +3,7 @@
  */
 import { external, trash, backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
 import { __, _n, sprintf, _x } from '@wordpress/i18n';
@@ -155,6 +155,24 @@ const deletePostAction = {
 	},
 };
 
+function useCanUserEligibilityCheckPostType( capability, resource, action ) {
+	const registry = useRegistry();
+	return useMemo(
+		() => ( {
+			...action,
+			isEligible( item ) {
+				return (
+					action.isEligible( item ) &&
+					registry
+						.select( coreStore )
+						.canUser( capability, resource, item.id )
+				);
+			},
+		} ),
+		[ action, registry, capability, resource ]
+	);
+}
+
 const trashPostAction = {
 	id: 'move-to-trash',
 	label: __( 'Move to Trash' ),
@@ -239,7 +257,11 @@ const trashPostAction = {
 								} else if ( items[ 0 ].type === 'page' ) {
 									successMessage = sprintf(
 										/* translators: The number of items. */
-										__( '%s items moved to trash.' ),
+										_n(
+											'%s item moved to trash.',
+											'%s items moved to trash.',
+											items.length
+										),
 										items.length
 									);
 								} else {
@@ -323,12 +345,20 @@ const trashPostAction = {
 	},
 };
 
-function usePermanentlyDeletePostAction() {
+function useTrashPostAction( resource ) {
+	return useCanUserEligibilityCheckPostType(
+		'delete',
+		resource,
+		trashPostAction
+	);
+}
+
+function usePermanentlyDeletePostAction( resource ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { deleteEntityRecord } = useDispatch( coreStore );
 
-	return useMemo(
+	const permanentlyDeletePostAction = useMemo(
 		() => ( {
 			id: 'permanently-delete',
 			label: __( 'Permanently delete' ),
@@ -428,15 +458,20 @@ function usePermanentlyDeletePostAction() {
 		} ),
 		[ createSuccessNotice, createErrorNotice, deleteEntityRecord ]
 	);
+	return useCanUserEligibilityCheckPostType(
+		'delete',
+		resource,
+		permanentlyDeletePostAction
+	);
 }
 
-function useRestorePostAction() {
+function useRestorePostAction( resource ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { editEntityRecord, saveEditedEntityRecord } =
 		useDispatch( coreStore );
 
-	return useMemo(
+	const restorePostAction = useMemo(
 		() => ( {
 			id: 'restore',
 			label: __( 'Restore' ),
@@ -562,6 +597,11 @@ function useRestorePostAction() {
 			saveEditedEntityRecord,
 		]
 	);
+	return useCanUserEligibilityCheckPostType(
+		'update',
+		resource,
+		restorePostAction
+	);
 }
 
 const viewPostAction = {
@@ -583,6 +623,7 @@ const viewPostAction = {
 
 const postRevisionsAction = {
 	id: 'view-post-revisions',
+	context: 'list',
 	label( items ) {
 		const revisionsCount =
 			items[ 0 ]._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
@@ -722,6 +763,14 @@ const renamePostAction = {
 	},
 };
 
+function useRenamePostAction( resource ) {
+	return useCanUserEligibilityCheckPostType(
+		'update',
+		resource,
+		renamePostAction
+	);
+}
+
 const duplicatePostAction = {
 	id: 'duplicate-post',
 	label: _x( 'Duplicate', 'action label' ),
@@ -1029,19 +1078,33 @@ export const duplicateTemplatePartAction = {
 	},
 };
 
-export function usePostActions( postType, onActionPerformed ) {
-	const { postTypeObject } = useSelect(
+export function usePostActions( { postType, onActionPerformed, context } ) {
+	const {
+		postTypeObject,
+		resource,
+		cachedCanUserResolvers,
+		userCanCreatePostType,
+	} = useSelect(
 		( select ) => {
-			const { getPostType } = select( coreStore );
+			const { getPostType, getCachedResolvers, canUser } =
+				select( coreStore );
+			const _postTypeObject = getPostType( postType );
+			const _resource = _postTypeObject?.rest_base || '';
 			return {
-				postTypeObject: getPostType( postType ),
+				postTypeObject: _postTypeObject,
+				resource: _resource,
+				cachedCanUserResolvers: getCachedResolvers()?.canUser,
+				userCanCreatePostType: canUser( 'create', _resource ),
 			};
 		},
 		[ postType ]
 	);
 
-	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
-	const restorePostAction = useRestorePostAction();
+	const trashPostActionForPostType = useTrashPostAction( resource );
+	const permanentlyDeletePostActionForPostType =
+		usePermanentlyDeletePostAction( resource );
+	const renamePostActionForPostType = useRenamePostAction( resource );
+	const restorePostActionForPostType = useRestorePostAction( resource );
 	const isTemplateOrTemplatePart = [
 		TEMPLATE_POST_TYPE,
 		TEMPLATE_PART_POST_TYPE,
@@ -1055,7 +1118,7 @@ export function usePostActions( postType, onActionPerformed ) {
 			return [];
 		}
 
-		const actions = [
+		let actions = [
 			postTypeObject?.viewable && viewPostAction,
 			supportsRevisions && postRevisionsAction,
 			globalThis.IS_GUTENBERG_PLUGIN
@@ -1063,16 +1126,33 @@ export function usePostActions( postType, onActionPerformed ) {
 				  ! isPattern &&
 				  duplicatePostAction
 				: false,
-			isTemplateOrTemplatePart && duplicateTemplatePartAction,
-			isPattern && duplicatePatternAction,
-			supportsTitle && renamePostAction,
+			isTemplateOrTemplatePart &&
+				userCanCreatePostType &&
+				duplicateTemplatePartAction,
+			isPattern && userCanCreatePostType && duplicatePatternAction,
+			supportsTitle && renamePostActionForPostType,
 			isPattern && exportPatternAsJSONAction,
-			isTemplateOrTemplatePart ? resetTemplateAction : restorePostAction,
+			isTemplateOrTemplatePart
+				? resetTemplateAction
+				: restorePostActionForPostType,
 			isTemplateOrTemplatePart || isPattern
 				? deletePostAction
-				: trashPostAction,
-			! isTemplateOrTemplatePart && permanentlyDeletePostAction,
+				: trashPostActionForPostType,
+			! isTemplateOrTemplatePart &&
+				permanentlyDeletePostActionForPostType,
 		].filter( Boolean );
+		// Filter actions based on provided context. If not provided
+		// all actions are returned. We'll have a single entry for getting the actions
+		// and the consumer should provide the context to filter the actions, if needed.
+		// Actions should also provide the `context` they support, if it's specific, to
+		// compare with the provided context to get all the actions.
+		// Right now the only supported context is `list`.
+		actions = actions.filter( ( action ) => {
+			if ( ! action.context ) {
+				return true;
+			}
+			return action.context === context;
+		} );
 
 		if ( onActionPerformed ) {
 			for ( let i = 0; i < actions.length; ++i ) {
@@ -1116,15 +1196,23 @@ export function usePostActions( postType, onActionPerformed ) {
 		}
 
 		return actions;
+		// We are making this use memo depend on cachedCanUserResolvers as a way to make the component using this hook re-render
+		// when user capabilities are resolved. This makes sure the isEligible functions of actions dependent on capabilities are re-evaluated.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		isTemplateOrTemplatePart,
 		isPattern,
 		postTypeObject?.viewable,
-		permanentlyDeletePostAction,
-		restorePostAction,
+		permanentlyDeletePostActionForPostType,
+		restorePostActionForPostType,
+		renamePostActionForPostType,
+		trashPostActionForPostType,
 		onActionPerformed,
 		isLoaded,
 		supportsRevisions,
 		supportsTitle,
+		context,
+		userCanCreatePostType,
+		cachedCanUserResolvers,
 	] );
 }

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 ) => {

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
@@ -173,7 +174,7 @@ function PrivateExcerpt() {
 	}
 	const excerptText = !! excerpt && (
 		<Text align="left" numberOfLines={ 4 } truncate>
-			{ excerpt }
+			{ 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-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-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/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 }
+					__experimentalIsFocusable
 				>
-					{ __( 'Open publish panel' ) }
+					{ __( 'Open save panel' ) }
 				</Button>
 			</div>
 		);

package/src/components/visual-editor/style.scss

@@ -3,6 +3,8 @@
 	height: 100%;
 	display: block;
 	background-color: $gray-300;
+	// Make this a stacking context to contain the z-index of children elements.
+	isolation: isolate;
 
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
@@ -17,7 +19,7 @@
 
 	// 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 {
+	&.is-iframed {
 		overflow: hidden;
 	}
 

package/src/hooks/pattern-overrides.js

@@ -14,6 +14,8 @@ import { store as blocksStore } from '@wordpress/blocks';
 import { store as editorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
+/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
+
 const {
 	PatternOverridesControls,
 	ResetOverridesControl,
@@ -34,9 +36,8 @@ const {
  */
 const withPatternOverrideControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isSupportedBlock = Object.keys(
-			PARTIAL_SYNCING_SUPPORTED_BLOCKS
-		).includes( props.name );
+		const isSupportedBlock =
+			!! PARTIAL_SYNCING_SUPPORTED_BLOCKS[ props.name ];
 
 		return (
 			<>
@@ -47,7 +48,8 @@ const withPatternOverrideControls = createHigherOrderComponent(
 				{ isSupportedBlock && <PatternOverridesBlockControls /> }
 			</>
 		);
-	}
+	},
+	'withPatternOverrideControls'
 );
 
 // Split into a separate component to avoid a store subscription