@wordpress/edit-post 7.26.0 → 7.27.0

package/src/editor.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	ErrorBoundary,
@@ -38,68 +37,61 @@ function Editor( {
 		initialPostType
 	);
 
-	const {
-		hasInlineToolbar,
-		post,
-		preferredStyleVariations,
-		hiddenBlockTypes,
-		blockTypes,
-		template,
-	} = useSelect(
-		( select ) => {
-			const {
-				isFeatureActive,
-				getEditedPostTemplate,
-				getHiddenBlockTypes,
-			} = select( editPostStore );
-			const { getEntityRecord, getPostType, getEntityRecords, canUser } =
-				select( coreStore );
-			const { getEditorSettings } = select( editorStore );
-			const { getBlockTypes } = select( blocksStore );
-			const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
-				currentPost.postType
-			);
-			// Ideally the initializeEditor function should be called using the ID of the REST endpoint.
-			// to avoid the special case.
-			let postObject;
-			if ( isTemplate ) {
-				const posts = getEntityRecords(
-					'postType',
-					currentPost.postType,
-					{
-						wp_id: currentPost.postId,
-					}
-				);
-				postObject = posts?.[ 0 ];
-			} else {
-				postObject = getEntityRecord(
-					'postType',
-					currentPost.postType,
-					currentPost.postId
-				);
-			}
-			const supportsTemplateMode =
-				getEditorSettings().supportsTemplateMode;
-			const isViewable =
-				getPostType( currentPost.postType )?.viewable ?? false;
-			const canEditTemplate = canUser( 'create', 'templates' );
-			return {
-				hasInlineToolbar: isFeatureActive( 'inlineToolbar' ),
-				preferredStyleVariations: select( preferencesStore ).get(
-					'core/edit-post',
-					'preferredStyleVariations'
-				),
-				hiddenBlockTypes: getHiddenBlockTypes(),
-				blockTypes: getBlockTypes(),
-				template:
-					supportsTemplateMode && isViewable && canEditTemplate
-						? getEditedPostTemplate()
-						: null,
-				post: postObject,
-			};
-		},
-		[ currentPost.postType, currentPost.postId ]
-	);
+	const { hasInlineToolbar, post, preferredStyleVariations, template } =
+		useSelect(
+			( select ) => {
+				const { isFeatureActive, getEditedPostTemplate } =
+					select( editPostStore );
+				const {
+					getEntityRecord,
+					getPostType,
+					getEntityRecords,
+					canUser,
+				} = select( coreStore );
+				const { getEditorSettings } = select( editorStore );
+				const isTemplate = [
+					'wp_template',
+					'wp_template_part',
+				].includes( currentPost.postType );
+				// Ideally the initializeEditor function should be called using the ID of the REST endpoint.
+				// to avoid the special case.
+				let postObject;
+				if ( isTemplate ) {
+					const posts = getEntityRecords(
+						'postType',
+						currentPost.postType,
+						{
+							wp_id: currentPost.postId,
+						}
+					);
+					postObject = posts?.[ 0 ];
+				} else {
+					postObject = getEntityRecord(
+						'postType',
+						currentPost.postType,
+						currentPost.postId
+					);
+				}
+				const supportsTemplateMode =
+					getEditorSettings().supportsTemplateMode;
+				const isViewable =
+					getPostType( currentPost.postType )?.viewable ?? false;
+				const canEditTemplate = canUser( 'create', 'templates' );
+				return {
+					hasInlineToolbar: isFeatureActive( 'inlineToolbar' ),
+					preferredStyleVariations: select( preferencesStore ).get(
+						'core/edit-post',
+						'preferredStyleVariations'
+					),
+					template:
+						supportsTemplateMode && isViewable && canEditTemplate
+							? getEditedPostTemplate()
+							: null,
+					post: postObject,
+				};
+			},
+			[ currentPost.postType, currentPost.postId ]
+		);
 
 	const { updatePreferredStyleVariations } = useDispatch( editPostStore );
 
@@ -113,33 +105,11 @@ function Editor( {
 				onChange: updatePreferredStyleVariations,
 			},
 			hasInlineToolbar,
-
-			// Keep a reference of the `allowedBlockTypes` from the server to handle use cases
-			// where we need to differentiate if a block is disabled by the user or some plugin.
-			defaultAllowedBlockTypes: settings.allowedBlockTypes,
 		};
-
-		// Omit hidden block types if exists and non-empty.
-		if ( hiddenBlockTypes.length > 0 ) {
-			// Defer to passed setting for `allowedBlockTypes` if provided as
-			// anything other than `true` (where `true` is equivalent to allow
-			// all block types).
-			const defaultAllowedBlockTypes =
-				true === settings.allowedBlockTypes
-					? blockTypes.map( ( { name } ) => name )
-					: settings.allowedBlockTypes || [];
-
-			result.allowedBlockTypes = defaultAllowedBlockTypes.filter(
-				( type ) => ! hiddenBlockTypes.includes( type )
-			);
-		}
-
 		return result;
 	}, [
 		settings,
 		hasInlineToolbar,
-		hiddenBlockTypes,
-		blockTypes,
 		preferredStyleVariations,
 		updatePreferredStyleVariations,
 		getPostLinkProps,

package/src/editor.native.js

@@ -10,7 +10,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
  */
 import { Component } from '@wordpress/element';
 import { EditorProvider } from '@wordpress/editor';
-import { parse, serialize, store as blocksStore } from '@wordpress/blocks';
+import { parse, serialize } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import {
@@ -47,32 +47,12 @@ class Editor extends Component {
 		this.setTitleRef = this.setTitleRef.bind( this );
 	}
 
-	getEditorSettings( settings, hiddenBlockTypes, blockTypes ) {
+	getEditorSettings( settings ) {
 		settings = {
 			...settings,
 			isRTL: I18nManager.isRTL,
 		};
 
-		// Omit hidden block types if exists and non-empty.
-		if ( hiddenBlockTypes.length > 0 ) {
-			if ( settings.allowedBlockTypes === undefined ) {
-				// If no specific flags for allowedBlockTypes are set, assume `true`
-				// meaning allow all block types.
-				settings.allowedBlockTypes = true;
-			}
-			// Defer to passed setting for `allowedBlockTypes` if provided as
-			// anything other than `true` (where `true` is equivalent to allow
-			// all block types).
-			const defaultAllowedBlockTypes =
-				true === settings.allowedBlockTypes
-					? blockTypes.map( ( { name } ) => name )
-					: settings.allowedBlockTypes || [];
-
-			settings.allowedBlockTypes = defaultAllowedBlockTypes.filter(
-				( type ) => ! hiddenBlockTypes.includes( type )
-			);
-		}
-
 		return settings;
 	}
 
@@ -127,8 +107,6 @@ class Editor extends Component {
 		const {
 			settings,
 			initialEdits,
-			hiddenBlockTypes,
-			blockTypes,
 			post,
 			postId,
 			postType,
@@ -137,11 +115,7 @@ class Editor extends Component {
 			...props
 		} = this.props;
 
-		const editorSettings = this.getEditorSettings(
-			settings,
-			hiddenBlockTypes,
-			blockTypes
-		);
+		const editorSettings = this.getEditorSettings( settings );
 
 		const normalizedPost = post || {
 			id: postId,
@@ -180,13 +154,10 @@ class Editor extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getEditorMode, getHiddenBlockTypes } = select( editPostStore );
-		const { getBlockTypes } = select( blocksStore );
+		const { getEditorMode } = select( editPostStore );
 
 		return {
 			mode: getEditorMode(),
-			hiddenBlockTypes: getHiddenBlockTypes(),
-			blockTypes: getBlockTypes(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

package/src/hooks/commands/use-common-commands.js

@@ -9,7 +9,7 @@ import {
 	drawerRight,
 	blockDefault,
 	keyboard,
-	desktop,
+	fullscreen,
 	listView,
 	external,
 	formatListBullets,
@@ -39,13 +39,17 @@ export default function useCommonCommands() {
 		editorMode,
 		activeSidebar,
 		isListViewOpen,
+		isFullscreen,
 		isPublishSidebarEnabled,
 		showBlockBreadcrumbs,
 		isDistractionFree,
+		isTopToolbar,
+		isFocusMode,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const { getEditorMode } = select( editPostStore );
 		const { isListViewOpened } = select( editorStore );
+
 		return {
 			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
 				editPostStore.name
@@ -56,6 +60,9 @@ export default function useCommonCommands() {
 				select( editorStore ).isPublishSidebarEnabled(),
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
+			isFocusMode: get( 'core', 'focusMode' ),
+			isTopToolbar: get( 'core', 'fixedToolbar' ),
+			isFullscreen: get( 'core/edit-post', 'fullscreenMode' ),
 		};
 	}, [] );
 	const { toggle } = useDispatch( preferencesStore );
@@ -94,7 +101,9 @@ export default function useCommonCommands() {
 
 	useCommand( {
 		name: 'core/toggle-distraction-free',
-		label: __( 'Toggle distraction free' ),
+		label: isDistractionFree
+			? __( 'Exit Distraction Free' )
+			: __( 'Enter Distraction Free ' ),
 		callback: ( { close } ) => {
 			toggleDistractionFree();
 			close();
@@ -103,30 +112,71 @@ export default function useCommonCommands() {
 
 	useCommand( {
 		name: 'core/toggle-spotlight-mode',
-		label: __( 'Toggle spotlight mode' ),
+		label: __( 'Toggle spotlight' ),
 		callback: ( { close } ) => {
 			toggle( 'core', 'focusMode' );
 			close();
+			createInfoNotice(
+				isFocusMode ? __( 'Spotlight off.' ) : __( 'Spotlight on.' ),
+				{
+					id: 'core/edit-post/toggle-spotlight-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								toggle( 'core', 'focusMode' );
+							},
+						},
+					],
+				}
+			);
 		},
 	} );
 
 	useCommand( {
 		name: 'core/toggle-fullscreen-mode',
-		label: __( 'Toggle fullscreen mode' ),
-		icon: desktop,
+		label: isFullscreen
+			? __( 'Exit fullscreen' )
+			: __( 'Enter fullscreen' ),
+		icon: fullscreen,
 		callback: ( { close } ) => {
 			toggle( 'core/edit-post', 'fullscreenMode' );
 			close();
+			createInfoNotice(
+				isFullscreen ? __( 'Fullscreen off.' ) : __( 'Fullscreen on.' ),
+				{
+					id: 'core/edit-post/toggle-fullscreen-mode/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								toggle( 'core/edit-post', 'fullscreenMode' );
+							},
+						},
+					],
+				}
+			);
 		},
 	} );
 
 	useCommand( {
 		name: 'core/toggle-list-view',
-		label: __( 'Toggle list view' ),
+		label: isListViewOpen
+			? __( 'Close List View' )
+			: __( 'Open List View' ),
 		icon: listView,
 		callback: ( { close } ) => {
 			setIsListViewOpened( ! isListViewOpen );
 			close();
+			createInfoNotice(
+				isListViewOpen ? __( 'List View off.' ) : __( 'List View on.' ),
+				{
+					id: 'core/edit-post/toggle-list-view/notice',
+					type: 'snackbar',
+				}
+			);
 		},
 	} );
 
@@ -139,12 +189,32 @@ export default function useCommonCommands() {
 				toggleDistractionFree();
 			}
 			close();
+			createInfoNotice(
+				isTopToolbar
+					? __( 'Top toolbar off.' )
+					: __( 'Top toolbar on.' ),
+				{
+					id: 'core/edit-post/toggle-top-toolbar/notice',
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Undo' ),
+							onClick: () => {
+								toggle( 'core', 'fixedToolbar' );
+							},
+						},
+					],
+				}
+			);
 		},
 	} );
 
 	useCommand( {
 		name: 'core/toggle-code-editor',
-		label: __( 'Toggle code editor' ),
+		label:
+			editorMode === 'visual'
+				? __( 'Open code editor' )
+				: __( 'Exit code editor' ),
 		icon: code,
 		callback: ( { close } ) => {
 			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );

package/src/index.js

@@ -53,9 +53,7 @@ export function initializeEditor(
 	const root = createRoot( target );
 
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
-		editorMode: 'visual',
 		fullscreenMode: true,
-		hiddenBlockTypes: [],
 		isPublishSidebarEnabled: true,
 		preferredStyleVariations: {},
 		themeStyles: true,
@@ -65,7 +63,9 @@ export function initializeEditor(
 
 	dispatch( preferencesStore ).setDefaults( 'core', {
 		allowRightClickOverrides: true,
+		editorMode: 'visual',
 		fixedToolbar: false,
+		hiddenBlockTypes: [],
 		inactivePanels: [],
 		openPanels: [ 'post-status' ],
 		showBlockBreadcrumbs: true,

package/src/index.native.js

@@ -24,7 +24,6 @@ export function initializeEditor( id, postType, postId ) {
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
 		editorMode: 'visual',
 		fullscreenMode: true,
-		hiddenBlockTypes: [],
 		inactivePanels: [],
 		isPublishSidebarEnabled: true,
 		openPanels: [ 'post-status' ],
@@ -32,6 +31,7 @@ export function initializeEditor( id, postType, postId ) {
 		welcomeGuide: true,
 	} );
 	dispatch( preferencesStore ).setDefaults( 'core', {
+		hiddenBlockTypes: [],
 		inactivePanels: [],
 		openPanels: [ 'post-status' ],
 	} );

package/src/store/actions.js

@@ -17,6 +17,7 @@ import { addFilter } from '@wordpress/hooks';
  */
 import { getMetaBoxContainer } from '../utils/meta-boxes';
 import { store as editPostStore } from '.';
+import { unlock } from '../lock-unlock';
 
 /**
  * Returns an action object used in signalling that the user opened an editor sidebar.
@@ -194,9 +195,7 @@ export const toggleFeature =
 export const switchEditorMode =
 	( mode ) =>
 	( { dispatch, registry } ) => {
-		registry
-			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'editorMode', mode );
+		registry.dispatch( preferencesStore ).set( 'core', 'editorMode', mode );
 
 		// Unselect blocks when we switch to the code editor.
 		if ( mode !== 'visual' ) {
@@ -289,21 +288,7 @@ export const updatePreferredStyleVariations =
 export const showBlockTypes =
 	( blockNames ) =>
 	( { registry } ) => {
-		const existingBlockNames =
-			registry
-				.select( preferencesStore )
-				.get( 'core/edit-post', 'hiddenBlockTypes' ) ?? [];
-
-		const newBlockNames = existingBlockNames.filter(
-			( type ) =>
-				! (
-					Array.isArray( blockNames ) ? blockNames : [ blockNames ]
-				).includes( type )
-		);
-
-		registry
-			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'hiddenBlockTypes', newBlockNames );
+		unlock( registry.dispatch( editorStore ) ).showBlockTypes( blockNames );
 	};
 
 /**
@@ -314,21 +299,7 @@ export const showBlockTypes =
 export const hideBlockTypes =
 	( blockNames ) =>
 	( { registry } ) => {
-		const existingBlockNames =
-			registry
-				.select( preferencesStore )
-				.get( 'core/edit-post', 'hiddenBlockTypes' ) ?? [];
-
-		const mergedBlockNames = new Set( [
-			...existingBlockNames,
-			...( Array.isArray( blockNames ) ? blockNames : [ blockNames ] ),
-		] );
-
-		registry
-			.dispatch( preferencesStore )
-			.set( 'core/edit-post', 'hiddenBlockTypes', [
-				...mergedBlockNames,
-			] );
+		unlock( registry.dispatch( editorStore ) ).hideBlockTypes( blockNames );
 	};
 
 /**
@@ -602,6 +573,16 @@ export const toggleDistractionFree =
 					{
 						id: 'core/edit-post/distraction-free-mode/notice',
 						type: 'snackbar',
+						actions: [
+							{
+								label: __( 'Undo' ),
+								onClick: () => {
+									registry
+										.dispatch( preferencesStore )
+										.toggle( 'core', 'distractionFree' );
+								},
+							},
+						],
 					}
 				);
 		} );

package/src/store/selectors.js

@@ -30,8 +30,7 @@ const EMPTY_OBJECT = {};
  */
 export const getEditorMode = createRegistrySelector(
 	( select ) => () =>
-		select( preferencesStore ).get( 'core/edit-post', 'editorMode' ) ??
-		'visual'
+		select( preferencesStore ).get( 'core', 'editorMode' ) ?? 'visual'
 );
 
 /**
@@ -165,21 +164,34 @@ export const getPreferences = createRegistrySelector( ( select ) => () => {
 	// These preferences now exist in the preferences store.
 	// Fetch them so that they can be merged into the post
 	// editor preferences.
-	const preferences = [
-		'hiddenBlockTypes',
-		'editorMode',
-		'preferredStyleVariations',
-	].reduce( ( accumulatedPrefs, preferenceKey ) => {
-		const value = select( preferencesStore ).get(
-			'core/edit-post',
-			preferenceKey
-		);
+	const preferences = [ 'preferredStyleVariations' ].reduce(
+		( accumulatedPrefs, preferenceKey ) => {
+			const value = select( preferencesStore ).get(
+				'core/edit-post',
+				preferenceKey
+			);
 
-		return {
-			...accumulatedPrefs,
-			[ preferenceKey ]: value,
-		};
-	}, {} );
+			return {
+				...accumulatedPrefs,
+				[ preferenceKey ]: value,
+			};
+		},
+		{}
+	);
+	const corePreferences = [ 'editorMode', 'hiddenBlockTypes' ].reduce(
+		( accumulatedPrefs, preferenceKey ) => {
+			const value = select( preferencesStore ).get(
+				'core',
+				preferenceKey
+			);
+
+			return {
+				...accumulatedPrefs,
+				[ preferenceKey ]: value,
+			};
+		},
+		{}
+	);
 
 	// Panels were a preference, but the data structure changed when the state
 	// was migrated to the preferences store. They need to be converted from
@@ -194,6 +206,7 @@ export const getPreferences = createRegistrySelector( ( select ) => () => {
 
 	return {
 		...preferences,
+		...corePreferences,
 		panels,
 	};
 } );
@@ -225,10 +238,8 @@ export function getPreference( state, preferenceKey, defaultValue ) {
  */
 export const getHiddenBlockTypes = createRegistrySelector( ( select ) => () => {
 	return (
-		select( preferencesStore ).get(
-			'core/edit-post',
-			'hiddenBlockTypes'
-		) ?? EMPTY_ARRAY
+		select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ??
+		EMPTY_ARRAY
 	);
 } );
 
@@ -583,12 +594,27 @@ export const getEditedPostTemplate = createRegistrySelector(
 		}
 
 		const post = select( editorStore ).getCurrentPost();
-		if ( post.link ) {
-			return select( coreStore ).__experimentalGetTemplateForLink(
-				post.link
-			);
+		let slugToCheck;
+		// In `draft` status we might not have a slug available, so we use the `single`
+		// post type templates slug(ex page, single-post, single-product etc..).
+		// Pages do not need the `single` prefix in the slug to be prioritized
+		// through template hierarchy.
+		if ( post.slug ) {
+			slugToCheck =
+				post.type === 'page'
+					? `${ post.type }-${ post.slug }`
+					: `single-${ post.type }-${ post.slug }`;
+		} else {
+			slugToCheck =
+				post.type === 'page' ? 'page' : `single-${ post.type }`;
 		}
-
-		return null;
+		const defaultTemplateId = select( coreStore ).getDefaultTemplateId( {
+			slug: slugToCheck,
+		} );
+		return select( coreStore ).getEditedEntityRecord(
+			'postType',
+			'wp_template',
+			defaultTemplateId
+		);
 	}
 );

package/src/store/test/actions.js

@@ -154,16 +154,13 @@ describe( 'actions', () => {
 
 			expect(
 				registry
-					.select( editPostStore )
-					.getPreference( 'hiddenBlockTypes' )
+					.select( preferencesStore )
+					.get( 'core', 'hiddenBlockTypes' )
 			).toEqual( expected );
 
 			expect(
 				registry.select( editPostStore ).getHiddenBlockTypes()
 			).toEqual( expected );
-
-			// Expect a deprecation message for `getPreference`.
-			expect( console ).toHaveWarned();
 		} );
 	} );
 
@@ -177,8 +174,8 @@ describe( 'actions', () => {
 
 			expect(
 				registry
-					.select( editPostStore )
-					.getPreference( 'hiddenBlockTypes' )
+					.select( preferencesStore )
+					.get( 'core', 'hiddenBlockTypes' )
 			).toEqual( expectedA );
 
 			expect(
@@ -193,8 +190,8 @@ describe( 'actions', () => {
 
 			expect(
 				registry
-					.select( editPostStore )
-					.getPreference( 'hiddenBlockTypes' )
+					.select( preferencesStore )
+					.get( 'core', 'hiddenBlockTypes' )
 			).toEqual( expectedB );
 
 			expect(
@@ -220,6 +217,9 @@ describe( 'actions', () => {
 				'core/paragraph': 'fancy',
 				'core/quote': 'posh',
 			} );
+
+			// Expect a deprecation message for `getPreference`.
+			expect( console ).toHaveWarned();
 		} );
 
 		it( 'removes a preferred style variation for a block when a style name is omitted', () => {

package/src/style.scss

@@ -3,7 +3,6 @@
 @import "./components/header/fullscreen-mode-close/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
-@import "./components/block-manager/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/post-format/style.scss";