@wordpress/editor 14.0.1 → 14.0.3

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

@@ -212,14 +212,18 @@ export default function EditorInterface( {
 				)
 			}
 			actions={
-				<SavePublishPanels
-					closeEntitiesSavedStates={ closeEntitiesSavedStates }
-					isEntitiesSavedStatesOpen={ entitiesSavedStatesCallback }
-					setEntitiesSavedStatesCallback={
-						setEntitiesSavedStatesCallback
-					}
-					forceIsDirtyPublishPanel={ forceIsDirty }
-				/>
+				! isPreviewMode ? (
+					<SavePublishPanels
+						closeEntitiesSavedStates={ closeEntitiesSavedStates }
+						isEntitiesSavedStatesOpen={
+							entitiesSavedStatesCallback
+						}
+						setEntitiesSavedStatesCallback={
+							setEntitiesSavedStatesCallback
+						}
+						forceIsDirtyPublishPanel={ forceIsDirty }
+					/>
+				) : undefined
 			}
 			shortcuts={ {
 				previous: previousShortcut,

package/src/components/entities-saved-states/entity-record-item.js

@@ -1,12 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Icon, CheckboxControl, Flex, PanelRow } from '@wordpress/components';
+import { CheckboxControl, PanelRow } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { connection } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -60,18 +59,9 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 				/>
 			</PanelRow>
 			{ hasPostMetaChanges && (
-				<PanelRow>
-					<Flex className="entities-saved-states__post-meta">
-						<Icon
-							className="entities-saved-states__connections-icon"
-							icon={ connection }
-							size={ 24 }
-						/>
-						<span className="entities-saved-states__bindings-text">
-							{ __( 'Post Meta.' ) }
-						</span>
-					</Flex>
-				</PanelRow>
+				<ul className="entities-saved-states__changes">
+					<li>{ __( 'Post Meta.' ) }</li>
+				</ul>
 			) }
 		</>
 	);

package/src/components/entities-saved-states/style.scss

@@ -30,16 +30,3 @@
 		margin-bottom: $grid-unit-05;
 	}
 }
-
-.entities-saved-states__post-meta {
-	margin-left: $grid-unit-30;
-	align-items: center;
-}
-
-.entities-saved-states__connections-icon {
-	flex-grow: 0;
-}
-
-.entities-saved-states__bindings-text {
-	flex-grow: 1;
-}

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 ) => {
@@ -163,7 +82,13 @@ function useGlobalStylesUserConfig() {
 	}, [ settings, styles, _links ] );
 
 	const setConfig = useCallback(
-		( callback, options = {} ) => {
+		/**
+		 * Set the global styles config.
+		 * @param {Function|Object} callbackOrObject If the callbackOrObject is a function, pass the current config to the callback so the consumer can merge values.
+		 *                                           Otherwise, overwrite the current config with the incoming object.
+		 * @param {Object}          options          Options for editEntityRecord Core selector.
+		 */
+		( callbackOrObject, options = {} ) => {
 			const record = getEditedEntityRecord(
 				'root',
 				'globalStyles',
@@ -175,7 +100,11 @@ function useGlobalStylesUserConfig() {
 				settings: record?.settings ?? {},
 				_links: record?._links ?? {},
 			};
-			const updatedConfig = callback( currentConfig );
+
+			const updatedConfig =
+				typeof callbackOrObject === 'function'
+					? callbackOrObject( currentConfig )
+					: callbackOrObject;
 
 			editEntityRecord(
 				'root',
@@ -189,7 +118,7 @@ function useGlobalStylesUserConfig() {
 				options
 			);
 		},
-		[ globalStylesId ]
+		[ globalStylesId, editEntityRecord, getEditedEntityRecord ]
 	);
 
 	return [ isReady, config, setConfig ];
@@ -209,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' ),
@@ -323,12 +341,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 +454,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 +593,11 @@ function useRestorePostAction() {
 			saveEditedEntityRecord,
 		]
 	);
+	return useCanUserEligibilityCheckPostType(
+		'update',
+		resource,
+		restorePostAction
+	);
 }
 
 const viewPostAction = {
@@ -583,6 +619,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 +759,14 @@ const renamePostAction = {
 	},
 };
 
+function useRenamePostAction( resource ) {
+	return useCanUserEligibilityCheckPostType(
+		'update',
+		resource,
+		renamePostAction
+	);
+}
+
 const duplicatePostAction = {
 	id: 'duplicate-post',
 	label: _x( 'Duplicate', 'action label' ),
@@ -783,7 +828,7 @@ const duplicatePostAction = {
 					sprintf(
 						// translators: %s: Title of the created template e.g: "Category".
 						__( '"%s" successfully created.' ),
-						newItem.title?.rendered || title
+						decodeEntities( newItem.title?.rendered || title )
 					),
 					{
 						id: 'duplicate-post-action',
@@ -1029,19 +1074,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 +1114,7 @@ export function usePostActions( postType, onActionPerformed ) {
 			return [];
 		}
 
-		const actions = [
+		let actions = [
 			postTypeObject?.viewable && viewPostAction,
 			supportsRevisions && postRevisionsAction,
 			globalThis.IS_GUTENBERG_PLUGIN
@@ -1063,16 +1122,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 +1192,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-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-trash/index.js

@@ -55,6 +55,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/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/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/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/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/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;

package/src/hooks/pattern-overrides.js

@@ -17,6 +17,7 @@ import { unlock } from '../lock-unlock';
 const {
 	PatternOverridesControls,
 	ResetOverridesControl,
+	PatternOverridesBlockControls,
 	PATTERN_TYPES,
 	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
 	PATTERN_SYNC_TYPES,
@@ -33,9 +34,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 (
 			<>
@@ -43,6 +43,7 @@ const withPatternOverrideControls = createHigherOrderComponent(
 				{ props.isSelected && isSupportedBlock && (
 					<ControlsWithStoreSubscription { ...props } />
 				) }
+				{ isSupportedBlock && <PatternOverridesBlockControls /> }
 			</>
 		);
 	}

package/src/lock-unlock.js

@@ -4,6 +4,6 @@
 import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
 		'@wordpress/editor'
 	);