@wordpress/editor 14.8.4 → 14.8.6

package/src/bindings/post-meta.js

@@ -9,26 +9,63 @@ import { store as coreDataStore } from '@wordpress/core-data';
 import { store as editorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
-function getMetadata( registry, context, registeredFields ) {
-	let metaFields = {};
-	const type = registry.select( editorStore ).getCurrentPostType();
-	const { getEditedEntityRecord } = registry.select( coreDataStore );
+/**
+ * Gets a list of post meta fields with their values and labels
+ * to be consumed in the needed callbacks.
+ * If the value is not available based on context, like in templates,
+ * it falls back to the default value, label, or key.
+ *
+ * @param {Object} select  The select function from the data store.
+ * @param {Object} context The context provided.
+ * @return {Object} List of post meta fields with their value and label.
+ *
+ * @example
+ * ```js
+ * {
+ *     field_1_key: {
+ *         label: 'Field 1 Label',
+ *         value: 'Field 1 Value',
+ *     },
+ *     field_2_key: {
+ *         label: 'Field 2 Label',
+ *         value: 'Field 2 Value',
+ *     },
+ *     ...
+ * }
+ * ```
+ */
+function getPostMetaFields( select, context ) {
+	const { getEditedEntityRecord } = select( coreDataStore );
+	const { getRegisteredPostMeta } = unlock( select( coreDataStore ) );
 
+	let entityMetaValues;
+	// Try to get the current entity meta values.
 	if ( context?.postType && context?.postId ) {
-		metaFields = getEditedEntityRecord(
+		entityMetaValues = getEditedEntityRecord(
 			'postType',
 			context?.postType,
 			context?.postId
 		).meta;
-	} else if ( type === 'wp_template' ) {
-		// Populate the `metaFields` object with the default values.
-		Object.entries( registeredFields || {} ).forEach(
-			( [ key, props ] ) => {
-				if ( props.default ) {
-					metaFields[ key ] = props.default;
-				}
-			}
-		);
+	}
+
+	const registeredFields = getRegisteredPostMeta( context?.postType );
+	const metaFields = {};
+	Object.entries( registeredFields || {} ).forEach( ( [ key, props ] ) => {
+		// Don't include footnotes or private fields.
+		if ( key !== 'footnotes' && key.charAt( 0 ) !== '_' ) {
+			metaFields[ key ] = {
+				label: props.title || key,
+				value:
+					// When using the entity value, an empty string IS a valid value.
+					entityMetaValues?.[ key ] ??
+					// When using the default, an empty string IS NOT a valid value.
+					( props.default || undefined ),
+			};
+		}
+	} );
+
+	if ( ! Object.keys( metaFields || {} ).length ) {
+		return null;
 	}
 
 	return metaFields;
@@ -36,34 +73,33 @@ function getMetadata( registry, context, registeredFields ) {
 
 export default {
 	name: 'core/post-meta',
-	getValues( { registry, context, bindings } ) {
-		const { getRegisteredPostMeta } = unlock(
-			registry.select( coreDataStore )
-		);
-		const registeredFields = getRegisteredPostMeta( context?.postType );
-		const metaFields = getMetadata( registry, context, registeredFields );
+	getValues( { select, context, bindings } ) {
+		const metaFields = getPostMetaFields( select, context );
 
 		const newValues = {};
 		for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
 			// Use the value, the field label, or the field key.
-			const metaKey = source.args.key;
-			newValues[ attributeName ] =
-				metaFields?.[ metaKey ] ??
-				registeredFields?.[ metaKey ]?.title ??
-				metaKey;
+			const fieldKey = source.args.key;
+			const { value: fieldValue, label: fieldLabel } =
+				metaFields?.[ fieldKey ] || {};
+			newValues[ attributeName ] = fieldValue ?? fieldLabel ?? fieldKey;
 		}
 		return newValues;
 	},
-	setValues( { registry, context, bindings } ) {
+	setValues( { dispatch, context, bindings } ) {
 		const newMeta = {};
 		Object.values( bindings ).forEach( ( { args, newValue } ) => {
 			newMeta[ args.key ] = newValue;
 		} );
-		registry
-			.dispatch( coreDataStore )
-			.editEntityRecord( 'postType', context?.postType, context?.postId, {
+
+		dispatch( coreDataStore ).editEntityRecord(
+			'postType',
+			context?.postType,
+			context?.postId,
+			{
 				meta: newMeta,
-			} );
+			}
+		);
 	},
 	canUserEditValue( { select, context, args } ) {
 		// Lock editing in query loop.
@@ -79,14 +115,9 @@ export default {
 			return false;
 		}
 
-		// Check that the custom field is not protected and available in the REST API.
+		const fieldValue = getPostMetaFields( select, context )?.[ args.key ]
+			?.value;
 		// Empty string or `false` could be a valid value, so we need to check if the field value is undefined.
-		const fieldValue = select( coreDataStore ).getEntityRecord(
-			'postType',
-			postType,
-			context?.postId
-		)?.meta?.[ args.key ];
-
 		if ( fieldValue === undefined ) {
 			return false;
 		}
@@ -109,32 +140,7 @@ export default {
 
 		return true;
 	},
-	getFieldsList( { registry, context } ) {
-		const { getRegisteredPostMeta } = unlock(
-			registry.select( coreDataStore )
-		);
-		const registeredFields = getRegisteredPostMeta( context?.postType );
-		const metaFields = getMetadata( registry, context, registeredFields );
-
-		if ( ! metaFields || ! Object.keys( metaFields ).length ) {
-			return null;
-		}
-
-		return Object.fromEntries(
-			Object.entries( metaFields )
-				// Remove footnotes or private keys from the list of fields.
-				.filter(
-					( [ key ] ) =>
-						key !== 'footnotes' && key.charAt( 0 ) !== '_'
-				)
-				// Return object with label and value.
-				.map( ( [ key, value ] ) => [
-					key,
-					{
-						label: registeredFields?.[ key ]?.title || key,
-						value,
-					},
-				] )
-		);
+	getFieldsList( { select, context } ) {
+		return getPostMetaFields( select, context );
 	},
 };

package/src/components/entities-saved-states/index.js

@@ -128,11 +128,21 @@ export function EntitiesSavedStatesExtensible( {
 			aria-describedby={ renderDialog ? dialogDescription : undefined }
 		>
 			<Flex className="entities-saved-states__panel-header" gap={ 2 }>
+				<FlexItem
+					isBlock
+					as={ Button }
+					variant="secondary"
+					size="compact"
+					onClick={ dismissPanel }
+				>
+					{ __( 'Cancel' ) }
+				</FlexItem>
 				<FlexItem
 					isBlock
 					as={ Button }
 					ref={ saveButtonRef }
 					variant="primary"
+					size="compact"
 					disabled={ ! saveEnabled }
 					accessibleWhenDisabled
 					onClick={ () =>
@@ -147,14 +157,6 @@ export function EntitiesSavedStatesExtensible( {
 				>
 					{ saveLabel }
 				</FlexItem>
-				<FlexItem
-					isBlock
-					as={ Button }
-					variant="secondary"
-					onClick={ dismissPanel }
-				>
-					{ __( 'Cancel' ) }
-				</FlexItem>
 			</Flex>
 
 			<div className="entities-saved-states__text-prompt">

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

@@ -1,8 +1,8 @@
 .entities-saved-states__panel-header {
 	box-sizing: border-box;
 	background: $white;
-	padding-left: $grid-unit-10;
-	padding-right: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
 	height: $header-height;
 	border-bottom: $border-width solid $gray-300;
 }

package/src/components/post-publish-panel/maybe-upload-media.js

@@ -98,8 +98,8 @@ function Image( { clientId, alt, url } ) {
 			animate={ { opacity: 1 } }
 			exit={ { opacity: 0, scale: 0 } }
 			style={ {
-				width: '36px',
-				height: '36px',
+				width: '32px',
+				height: '32px',
 				objectFit: 'cover',
 				borderRadius: '2px',
 				cursor: 'pointer',
@@ -256,7 +256,7 @@ export default function MaybeUploadMediaPanel() {
 					<Spinner />
 				) : (
 					<Button
-						__next40pxDefaultSize
+						size="compact"
 						variant="primary"
 						onClick={ uploadImages }
 					>

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

@@ -28,6 +28,7 @@ import { ActionItem } from '@wordpress/interface';
 import { store as editorStore } from '../../store';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import PostPreviewButton from '../post-preview-button';
+import { unlock } from '../../lock-unlock';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
@@ -46,10 +47,12 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	const handleDevicePreviewChange = ( newDeviceType ) => {
 		setDeviceType( newDeviceType );
 		__unstableSetEditorMode( 'edit' );
+		resetZoomLevel();
 	};
 
 	const isMobile = useViewportMatch( 'medium', '<' );

package/src/components/provider/index.js

@@ -188,26 +188,19 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			const postContext = {};
 			// If it is a template, try to inherit the post type from the slug.
 			if ( post.type === 'wp_template' ) {
-				if ( ! post.is_custom ) {
-					const [ kind ] = post.slug.split( '-' );
-					switch ( kind ) {
-						case 'page':
-							postContext.postType = 'page';
-							break;
-						case 'single':
-							// Infer the post type from the slug.
-							const postTypesSlugs =
-								postTypes?.map( ( entity ) => entity.slug ) ||
-								[];
-							const match = post.slug.match(
-								`^single-(${ postTypesSlugs.join(
-									'|'
-								) })(?:-.+)?$`
-							);
-							if ( match ) {
-								postContext.postType = match[ 1 ];
-							}
-							break;
+				if ( post.slug === 'page' ) {
+					postContext.postType = 'page';
+				} else if ( post.slug === 'single' ) {
+					postContext.postType = 'post';
+				} else if ( post.slug.split( '-' )[ 0 ] === 'single' ) {
+					// If the slug is single-{postType}, infer the post type from the slug.
+					const postTypesSlugs =
+						postTypes?.map( ( entity ) => entity.slug ) || [];
+					const match = post.slug.match(
+						`^single-(${ postTypesSlugs.join( '|' ) })(?:-.+)?$`
+					);
+					if ( match ) {
+						postContext.postType = match[ 1 ];
 					}
 				}
 			} else if (

package/src/components/zoom-out-toggle/index.js

@@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { square as zoomOutIcon } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -14,8 +15,12 @@ import { square as zoomOutIcon } from '@wordpress/icons';
 import { unlock } from '../../lock-unlock';
 
 const ZoomOutToggle = () => {
-	const { isZoomOut } = useSelect( ( select ) => ( {
+	const { isZoomOut, showIconLabels } = useSelect( ( select ) => ( {
 		isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
+		showIconLabels: select( preferencesStore ).get(
+			'core',
+			'showIconLabels'
+		),
 	} ) );
 
 	const { resetZoomLevel, setZoomLevel, __unstableSetEditorMode } = unlock(
@@ -38,6 +43,7 @@ const ZoomOutToggle = () => {
 			label={ __( 'Toggle Zoom Out' ) }
 			isPressed={ isZoomOut }
 			size="compact"
+			showTooltip={ ! showIconLabels }
 		/>
 	);
 };

package/src/hooks/pattern-overrides.js

@@ -6,7 +6,7 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useBlockEditingMode } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import { getBlockBindingsSource } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -58,7 +58,6 @@ function ControlsWithStoreSubscription( props ) {
 	const blockEditingMode = useBlockEditingMode();
 	const { hasPatternOverridesSource, isEditingSyncedPattern } = useSelect(
 		( select ) => {
-			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			const { getCurrentPostType, getEditedPostAttribute } =
 				select( editorStore );
 

package/src/store/actions.js

@@ -12,7 +12,11 @@ import {
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { applyFilters } from '@wordpress/hooks';
+import {
+	applyFilters,
+	applyFiltersAsync,
+	doActionAsync,
+} from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 
@@ -184,7 +188,7 @@ export const savePost =
 		}
 
 		const previousRecord = select.getCurrentPost();
-		const edits = {
+		let edits = {
 			id: previousRecord.id,
 			...registry
 				.select( coreStore )
@@ -199,9 +203,9 @@ export const savePost =
 
 		let error = false;
 		try {
-			error = await applyFilters(
-				'editor.__unstablePreSavePost',
-				Promise.resolve( false ),
+			edits = await applyFiltersAsync(
+				'editor.preSavePost',
+				edits,
 				options
 			);
 		} catch ( err ) {
@@ -236,14 +240,25 @@ export const savePost =
 				);
 		}
 
+		// Run the hook with legacy unstable name for backward compatibility
 		if ( ! error ) {
-			await applyFilters(
-				'editor.__unstableSavePost',
-				Promise.resolve(),
-				options
-			).catch( ( err ) => {
+			try {
+				await applyFilters(
+					'editor.__unstableSavePost',
+					Promise.resolve(),
+					options
+				);
+			} catch ( err ) {
 				error = err;
-			} );
+			}
+		}
+
+		if ( ! error ) {
+			try {
+				await doActionAsync( 'editor.savePost', options );
+			} catch ( err ) {
+				error = err;
+			}
 		}
 		dispatch( { type: 'REQUEST_POST_UPDATE_FINISH', options } );