@wordpress/edit-site 5.12.0 → 5.12.2

package/src/hooks/commands/use-edit-mode-commands.js

@@ -1,11 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { trash, backup } from '@wordpress/icons';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	code,
+	cog,
+	trash,
+	backup,
+	layout,
+	page,
+	drawerLeft,
+	drawerRight,
+	blockDefault,
+} from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -14,41 +26,68 @@ import { store as editSiteStore } from '../../store';
 import useEditedEntityRecord from '../../components/use-edited-entity-record';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
-function useEditModeCommandLoader() {
-	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
-	const history = useHistory();
-	const { isLoaded, record: template } = useEditedEntityRecord();
-	const isRemovable =
-		isLoaded && !! template && isTemplateRemovable( template );
-	const isRevertable =
-		isLoaded && !! template && isTemplateRevertable( template );
+function usePageContentFocusCommands() {
+	const { isPage, canvasMode, hasPageContentFocus } = useSelect(
+		( select ) => ( {
+			isPage: select( editSiteStore ).isPage(),
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
+		} ),
+		[]
+	);
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+
+	if ( ! isPage || canvasMode !== 'edit' ) {
+		return { isLoading: false, commands: [] };
+	}
 
 	const commands = [];
-	if ( isRemovable ) {
-		const label =
-			template.type === 'wp_template'
-				? __( 'Delete template' )
-				: __( 'Delete template part' );
+
+	if ( hasPageContentFocus ) {
 		commands.push( {
-			name: 'core/remove-template',
-			label,
-			icon: trash,
-			context: 'site-editor-edit',
+			name: 'core/switch-to-template-focus',
+			label: __( 'Edit template' ),
+			icon: layout,
 			callback: ( { close } ) => {
-				removeTemplate( template );
-				// Navigate to the template list
-				history.push( {
-					path: '/' + template.type,
-				} );
+				setHasPageContentFocus( false );
+				close();
+			},
+		} );
+	} else {
+		commands.push( {
+			name: 'core/switch-to-page-focus',
+			label: __( 'Back to page' ),
+			icon: page,
+			callback: ( { close } ) => {
+				setHasPageContentFocus( true );
 				close();
 			},
 		} );
 	}
-	if ( isRevertable ) {
+
+	return { isLoading: false, commands };
+}
+
+function useManipulateDocumentCommands() {
+	const { isLoaded, record: template } = useEditedEntityRecord();
+	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
+	const history = useHistory();
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
+		[]
+	);
+
+	if ( ! isLoaded ) {
+		return { isLoading: true, commands: [] };
+	}
+
+	const commands = [];
+
+	if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) {
 		const label =
 			template.type === 'wp_template'
 				? __( 'Reset template' )
@@ -64,16 +103,132 @@ function useEditModeCommandLoader() {
 		} );
 	}
 
+	if ( isTemplateRemovable( template ) && ! hasPageContentFocus ) {
+		const label =
+			template.type === 'wp_template'
+				? __( 'Delete template' )
+				: __( 'Delete template part' );
+		commands.push( {
+			name: 'core/remove-template',
+			label,
+			icon: trash,
+			callback: ( { close } ) => {
+				removeTemplate( template );
+				// Navigate to the template list
+				history.push( {
+					path: '/' + template.type,
+				} );
+				close();
+			},
+		} );
+	}
+
 	return {
 		isLoading: ! isLoaded,
 		commands,
 	};
 }
 
+function useEditUICommands() {
+	const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } =
+		useDispatch( editSiteStore );
+	const { canvasMode, editorMode, activeSidebar } = useSelect(
+		( select ) => ( {
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+			editorMode: select( editSiteStore ).getEditorMode(),
+			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
+				editSiteStore.name
+			),
+		} ),
+		[]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+
+	if ( canvasMode !== 'edit' ) {
+		return { isLoading: false, commands: [] };
+	}
+
+	const commands = [];
+
+	commands.push( {
+		name: 'core/open-settings-sidebar',
+		label: __( 'Toggle settings sidebar' ),
+		icon: isRTL() ? drawerLeft : drawerRight,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-site/template' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-site/template' );
+			}
+		},
+	} );
+
+	commands.push( {
+		name: 'core/open-block-inspector',
+		label: __( 'Toggle block inspector' ),
+		icon: blockDefault,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-site/block-inspector' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-site/block-inspector' );
+			}
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-spotlight-mode',
+		label: __( 'Toggle spotlight mode' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-site', 'focusMode' );
+			close();
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-top-toolbar',
+		label: __( 'Toggle top toolbar' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-site', 'fixedToolbar' );
+			close();
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-code-editor',
+		label: __( 'Toggle code editor' ),
+		icon: code,
+		callback: ( { close } ) => {
+			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
+			close();
+		},
+	} );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
 export function useEditModeCommands() {
+	useCommandLoader( {
+		name: 'core/edit-site/page-content-focus',
+		hook: usePageContentFocusCommands,
+		context: 'site-editor-edit',
+	} );
+
 	useCommandLoader( {
 		name: 'core/edit-site/manipulate-document',
-		hook: useEditModeCommandLoader,
+		hook: useManipulateDocumentCommands,
 		context: 'site-editor-edit',
 	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/edit-ui',
+		hook: useEditUICommands,
+	} );
 }

package/src/hooks/index.js

@@ -4,3 +4,4 @@
 import './components';
 import './push-changes-to-global-styles';
 import './template-part-edit';
+import './navigation-menu-edit';

package/src/hooks/navigation-menu-edit.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import {
+	BlockControls,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { ToolbarButton } from '@wordpress/components';
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { useLink } from '../components/routes/link';
+import { unlock } from '../lock-unlock';
+
+const { useLocation } = unlock( routerPrivateApis );
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
+
+function NavigationMenuEdit( { attributes } ) {
+	const { ref } = attributes;
+	const { params } = useLocation();
+	const blockEditingMode = useBlockEditingMode();
+	const navigationMenu = useSelect(
+		( select ) => {
+			return select( coreStore ).getEntityRecord(
+				'postType',
+				'wp_navigation',
+				// Ideally this should be an official public API.
+				ref
+			);
+		},
+		[ ref ]
+	);
+
+	const linkProps = useLink(
+		{
+			postId: navigationMenu?.id,
+			postType: navigationMenu?.type,
+			canvas: 'edit',
+		},
+		{
+			// this applies to Navigation Menus as well.
+			fromTemplateId: params.postId,
+		}
+	);
+
+	// A non-default setting for block editing mode indicates that the
+	// editor should restrict "editing" actions. Therefore the `Edit` button
+	// should not be displayed.
+	if ( ! navigationMenu || blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	return (
+		<BlockControls group="other">
+			<ToolbarButton
+				{ ...linkProps }
+				onClick={ ( event ) => {
+					linkProps.onClick( event );
+				} }
+			>
+				{ __( 'Edit' ) }
+			</ToolbarButton>
+		</BlockControls>
+	);
+}
+
+export const withEditBlockControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { attributes, name } = props;
+		const isDisplayed = name === 'core/navigation' && attributes.ref;
+
+		return (
+			<>
+				<BlockEdit { ...props } />
+				{ isDisplayed && (
+					<NavigationMenuEdit attributes={ attributes } />
+				) }
+			</>
+		);
+	},
+	'withEditBlockControls'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/edit-site/navigation-edit-button',
+	withEditBlockControls
+);

package/src/hooks/push-changes-to-global-styles/index.js

@@ -27,7 +27,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { useSupportedStyles } from '../../components/global-styles/hooks';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext, useBlockEditingMode } = unlock(
 	blockEditorPrivateApis

package/src/hooks/template-part-edit.js

@@ -14,7 +14,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import { useLink } from '../components/routes/link';
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
 

package/src/index.js

@@ -63,6 +63,7 @@ export function initializeEditor( id, settings ) {
 		editorMode: 'visual',
 		fixedToolbar: false,
 		focusMode: false,
+		distractionFree: false,
 		keepCaretInsideBlock: false,
 		welcomeGuide: true,
 		welcomeGuideStyles: true,

package/src/store/actions.js

@@ -176,6 +176,37 @@ export function setTemplatePart( templatePartId ) {
 	};
 }
 
+/**
+ * Action that sets a navigation menu.
+ *
+ * @param {string} navigationMenuId The Navigation Menu Post ID.
+ *
+ * @return {Object} Action object.
+ */
+export function setNavigationMenu( navigationMenuId ) {
+	return {
+		type: 'SET_EDITED_POST',
+		postType: 'wp_navigation',
+		id: navigationMenuId,
+	};
+}
+
+/**
+ * Action that sets an edited entity.
+ *
+ * @param {string} postType The entity's post type.
+ * @param {string} postId   The entity's ID.
+ *
+ * @return {Object} Action object.
+ */
+export function setEditedEntity( postType, postId ) {
+	return {
+		type: 'SET_EDITED_POST',
+		postType,
+		id: postId,
+	};
+}
+
 /**
  * @deprecated
  */
@@ -532,19 +563,20 @@ export const switchEditorMode =
 	};
 
 /**
- * Sets whether or not the editor is locked so that only page content can be
- * edited.
+ * Sets whether or not the editor allows only page content to be edited.
  *
- * @param {boolean} hasPageContentLock True to enable lock, false to disable.
+ * @param {boolean} hasPageContentFocus True to allow only page content to be
+ *                                      edited, false to allow template to be
+ *                                      edited.
  */
-export const setHasPageContentLock =
-	( hasPageContentLock ) =>
+export const setHasPageContentFocus =
+	( hasPageContentFocus ) =>
 	( { dispatch, registry } ) => {
-		if ( hasPageContentLock ) {
+		if ( hasPageContentFocus ) {
 			registry.dispatch( blockEditorStore ).clearSelectedBlock();
 		}
 		dispatch( {
-			type: 'SET_HAS_PAGE_CONTENT_LOCK',
-			hasPageContentLock,
+			type: 'SET_HAS_PAGE_CONTENT_FOCUS',
+			hasPageContentFocus,
 		} );
 	};

package/src/store/index.js

@@ -12,7 +12,7 @@ import * as privateActions from './private-actions';
 import * as selectors from './selectors';
 import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 export const storeConfig = {
 	reducer,

package/src/store/reducer.js

@@ -158,19 +158,20 @@ function editorCanvasContainerView( state = undefined, action ) {
 }
 
 /**
- * Reducer used to track whether the page content is locked.
+ * Reducer used to track whether the editor allows only page content to be
+ * edited.
  *
  * @param {boolean} state  Current state.
  * @param {Object}  action Dispatched action.
  *
  * @return {boolean} Updated state.
  */
-export function hasPageContentLock( state = false, action ) {
+export function hasPageContentFocus( state = false, action ) {
 	switch ( action.type ) {
 		case 'SET_EDITED_POST':
 			return !! action.context?.postId;
-		case 'SET_HAS_PAGE_CONTENT_LOCK':
-			return action.hasPageContentLock;
+		case 'SET_HAS_PAGE_CONTENT_FOCUS':
+			return action.hasPageContentFocus;
 	}
 
 	return state;
@@ -185,5 +186,5 @@ export default combineReducers( {
 	saveViewPanel,
 	canvasMode,
 	editorCanvasContainerView,
-	hasPageContentLock,
+	hasPageContentFocus,
 } );

package/src/store/selectors.js

@@ -12,6 +12,7 @@ import deprecated from '@wordpress/deprecated';
 import { uploadMedia } from '@wordpress/media-utils';
 import { Platform } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -106,6 +107,10 @@ export const getSettings = createSelector(
 			...state.settings,
 			outlineMode: true,
 			focusMode: !! __unstableGetPreference( state, 'focusMode' ),
+			isDistractionFree: !! __unstableGetPreference(
+				state,
+				'distractionFree'
+			),
 			hasFixedToolbar: !! __unstableGetPreference(
 				state,
 				'fixedToolbar'
@@ -142,6 +147,7 @@ export const getSettings = createSelector(
 		getCanUserCreateMedia( state ),
 		state.settings,
 		__unstableGetPreference( state, 'focusMode' ),
+		__unstableGetPreference( state, 'distractionFree' ),
 		__unstableGetPreference( state, 'fixedToolbar' ),
 		__unstableGetPreference( state, 'keepCaretInsideBlock' ),
 		__unstableGetPreference( state, 'showIconLabels' ),
@@ -224,11 +230,35 @@ export function isInserterOpened( state ) {
  *
  * @return {Object} The root client ID, index to insert at and starting filter value.
  */
-export function __experimentalGetInsertionPoint( state ) {
-	const { rootClientId, insertionIndex, filterValue } =
-		state.blockInserterPanel;
-	return { rootClientId, insertionIndex, filterValue };
-}
+export const __experimentalGetInsertionPoint = createRegistrySelector(
+	( select ) => ( state ) => {
+		if ( typeof state.blockInserterPanel === 'object' ) {
+			const { rootClientId, insertionIndex, filterValue } =
+				state.blockInserterPanel;
+			return { rootClientId, insertionIndex, filterValue };
+		}
+
+		if ( hasPageContentFocus( state ) ) {
+			const [ postContentClientId ] =
+				select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
+					'core/post-content'
+				);
+			if ( postContentClientId ) {
+				return {
+					rootClientId: postContentClientId,
+					insertionIndex: undefined,
+					filterValue: undefined,
+				};
+			}
+		}
+
+		return {
+			rootClientId: undefined,
+			insertionIndex: undefined,
+			filterValue: undefined,
+		};
+	}
+);
 
 /**
  * Returns the current opened/closed state of the list view panel.
@@ -336,12 +366,12 @@ export function isPage( state ) {
 }
 
 /**
- * Whether or not the editor is locked so that only page content can be edited.
+ * Whether or not the editor allows only page content to be edited.
  *
  * @param {Object} state Global application state.
  *
- * @return {boolean} Whether or not the editor is locked.
+ * @return {boolean} Whether or not focus is on editing page content.
  */
-export function hasPageContentLock( state ) {
-	return isPage( state ) ? state.hasPageContentLock : false;
+export function hasPageContentFocus( state ) {
+	return isPage( state ) ? state.hasPageContentFocus : false;
 }

package/src/store/test/actions.js

@@ -13,7 +13,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * Internal dependencies
  */
 import { store as editSiteStore } from '..';
-import { setHasPageContentLock } from '../actions';
+import { setHasPageContentFocus } from '../actions';
 
 const ENTITY_TYPES = {
 	wp_template: {
@@ -217,18 +217,18 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( 'setHasPageContentLock', () => {
+	describe( 'setHasPageContentFocus', () => {
 		it( 'toggles the page content lock on', () => {
 			const dispatch = jest.fn();
 			const clearSelectedBlock = jest.fn();
 			const registry = {
 				dispatch: () => ( { clearSelectedBlock } ),
 			};
-			setHasPageContentLock( true )( { dispatch, registry } );
+			setHasPageContentFocus( true )( { dispatch, registry } );
 			expect( clearSelectedBlock ).toHaveBeenCalled();
 			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'SET_HAS_PAGE_CONTENT_LOCK',
-				hasPageContentLock: true,
+				type: 'SET_HAS_PAGE_CONTENT_FOCUS',
+				hasPageContentFocus: true,
 			} );
 		} );
 
@@ -238,11 +238,11 @@ describe( 'actions', () => {
 			const registry = {
 				dispatch: () => ( { clearSelectedBlock } ),
 			};
-			setHasPageContentLock( false )( { dispatch, registry } );
+			setHasPageContentFocus( false )( { dispatch, registry } );
 			expect( clearSelectedBlock ).not.toHaveBeenCalled();
 			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'SET_HAS_PAGE_CONTENT_LOCK',
-				hasPageContentLock: false,
+				type: 'SET_HAS_PAGE_CONTENT_FOCUS',
+				hasPageContentFocus: false,
 			} );
 		} );
 	} );

package/src/store/test/reducer.js

@@ -11,7 +11,7 @@ import {
 	editedPost,
 	blockInserterPanel,
 	listViewPanel,
-	hasPageContentLock,
+	hasPageContentFocus,
 } from '../reducer';
 
 import { setIsInserterOpened, setIsListViewOpened } from '../actions';
@@ -137,14 +137,14 @@ describe( 'state', () => {
 		} );
 	} );
 
-	describe( 'hasPageContentLocked()', () => {
+	describe( 'hasPageContentFocus()', () => {
 		it( 'defaults to false', () => {
-			expect( hasPageContentLock( undefined, {} ) ).toBe( false );
+			expect( hasPageContentFocus( undefined, {} ) ).toBe( false );
 		} );
 
 		it( 'becomes false when editing a template', () => {
 			expect(
-				hasPageContentLock( true, {
+				hasPageContentFocus( true, {
 					type: 'SET_EDITED_POST',
 					postType: 'wp_template',
 				} )
@@ -153,7 +153,7 @@ describe( 'state', () => {
 
 		it( 'becomes true when editing a page', () => {
 			expect(
-				hasPageContentLock( false, {
+				hasPageContentFocus( false, {
 					type: 'SET_EDITED_POST',
 					postType: 'wp_template',
 					context: {
@@ -166,15 +166,15 @@ describe( 'state', () => {
 
 		it( 'can be set', () => {
 			expect(
-				hasPageContentLock( false, {
-					type: 'SET_HAS_PAGE_CONTENT_LOCK',
-					hasPageContentLock: true,
+				hasPageContentFocus( false, {
+					type: 'SET_HAS_PAGE_CONTENT_FOCUS',
+					hasPageContentFocus: true,
 				} )
 			).toBe( true );
 			expect(
-				hasPageContentLock( true, {
-					type: 'SET_HAS_PAGE_CONTENT_LOCK',
-					hasPageContentLock: false,
+				hasPageContentFocus( true, {
+					type: 'SET_HAS_PAGE_CONTENT_FOCUS',
+					hasPageContentFocus: false,
 				} )
 			).toBe( false );
 		} );