@wordpress/edit-site 5.11.0 → 5.12.1

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,9 +27,11 @@ 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 } = unlock( blockEditorPrivateApis );
+const { GlobalStylesContext, useBlockEditingMode } = unlock(
+	blockEditorPrivateApis
+);
 
 // TODO: Temporary duplication of constant in @wordpress/block-editor. Can be
 // removed by moving PushChangesToGlobalStylesControl to
@@ -208,15 +210,19 @@ function PushChangesToGlobalStylesControl( {
 }
 
 const withPushChangesToGlobalStyles = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) =>
-		(
+	( BlockEdit ) => ( props ) => {
+		const blockEditingMode = useBlockEditingMode();
+		return (
 			<>
 				<BlockEdit { ...props } />
-				<InspectorAdvancedControls>
-					<PushChangesToGlobalStylesControl { ...props } />
-				</InspectorAdvancedControls>
+				{ blockEditingMode === 'default' && (
+					<InspectorAdvancedControls>
+						<PushChangesToGlobalStylesControl { ...props } />
+					</InspectorAdvancedControls>
+				) }
 			</>
-		)
+		);
+	}
 );
 
 addFilter(

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/store/actions.js

@@ -12,6 +12,7 @@ import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { speak } from '@wordpress/a11y';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -144,7 +145,7 @@ export const removeTemplate =
 				sprintf(
 					/* translators: The template/part's name. */
 					__( '"%s" deleted.' ),
-					template.title.rendered
+					decodeEntities( template.title.rendered )
 				),
 				{ type: 'snackbar', id: 'site-editor-template-deleted-success' }
 			);
@@ -175,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
  */
@@ -529,3 +561,22 @@ export const switchEditorMode =
 			speak( __( 'Code editor selected' ), 'assertive' );
 		}
 	};
+
+/**
+ * Sets whether or not the editor allows only page content to be edited.
+ *
+ * @param {boolean} hasPageContentFocus True to allow only page content to be
+ *                                      edited, false to allow template to be
+ *                                      edited.
+ */
+export const setHasPageContentFocus =
+	( hasPageContentFocus ) =>
+	( { dispatch, registry } ) => {
+		if ( hasPageContentFocus ) {
+			registry.dispatch( blockEditorStore ).clearSelectedBlock();
+		}
+		dispatch( {
+			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

@@ -157,6 +157,26 @@ function editorCanvasContainerView( state = undefined, action ) {
 	return state;
 }
 
+/**
+ * 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 hasPageContentFocus( state = false, action ) {
+	switch ( action.type ) {
+		case 'SET_EDITED_POST':
+			return !! action.context?.postId;
+		case 'SET_HAS_PAGE_CONTENT_FOCUS':
+			return action.hasPageContentFocus;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	deviceType,
 	settings,
@@ -166,4 +186,5 @@ export default combineReducers( {
 	saveViewPanel,
 	canvasMode,
 	editorCanvasContainerView,
+	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
@@ -224,11 +225,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.
@@ -321,3 +346,27 @@ export function isNavigationOpened() {
 		version: '6.4',
 	} );
 }
+
+/**
+ * Whether or not the editor has a page loaded into it.
+ *
+ * @see setPage
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether or not the editor has a page loaded into it.
+ */
+export function isPage( state ) {
+	return !! state.editedPost.context?.postId;
+}
+
+/**
+ * Whether or not the editor allows only page content to be edited.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether or not focus is on editing page content.
+ */
+export function hasPageContentFocus( state ) {
+	return isPage( state ) ? state.hasPageContentFocus : false;
+}

package/src/store/test/actions.js

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

package/src/store/test/reducer.js

@@ -11,6 +11,7 @@ import {
 	editedPost,
 	blockInserterPanel,
 	listViewPanel,
+	hasPageContentFocus,
 } from '../reducer';
 
 import { setIsInserterOpened, setIsListViewOpened } from '../actions';
@@ -135,4 +136,47 @@ describe( 'state', () => {
 			);
 		} );
 	} );
+
+	describe( 'hasPageContentFocus()', () => {
+		it( 'defaults to false', () => {
+			expect( hasPageContentFocus( undefined, {} ) ).toBe( false );
+		} );
+
+		it( 'becomes false when editing a template', () => {
+			expect(
+				hasPageContentFocus( true, {
+					type: 'SET_EDITED_POST',
+					postType: 'wp_template',
+				} )
+			).toBe( false );
+		} );
+
+		it( 'becomes true when editing a page', () => {
+			expect(
+				hasPageContentFocus( false, {
+					type: 'SET_EDITED_POST',
+					postType: 'wp_template',
+					context: {
+						postType: 'page',
+						postId: 123,
+					},
+				} )
+			).toBe( true );
+		} );
+
+		it( 'can be set', () => {
+			expect(
+				hasPageContentFocus( false, {
+					type: 'SET_HAS_PAGE_CONTENT_FOCUS',
+					hasPageContentFocus: true,
+				} )
+			).toBe( true );
+			expect(
+				hasPageContentFocus( true, {
+					type: 'SET_HAS_PAGE_CONTENT_FOCUS',
+					hasPageContentFocus: false,
+				} )
+			).toBe( false );
+		} );
+	} );
 } );

package/src/store/test/selectors.js

@@ -15,6 +15,8 @@ import {
 	isInserterOpened,
 	isListViewOpened,
 	__unstableGetPreference,
+	isPage,
+	hasPageContentFocus,
 } from '../selectors';
 
 describe( 'selectors', () => {
@@ -145,4 +147,59 @@ describe( 'selectors', () => {
 			expect( isListViewOpened( state ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'isPage', () => {
+		it( 'returns true if the edited post type is a page', () => {
+			const state = {
+				editedPost: {
+					postType: 'wp_template',
+					context: { postType: 'page', postId: 123 },
+				},
+			};
+			expect( isPage( state ) ).toBe( true );
+		} );
+
+		it( 'returns false if the edited post type is a template', () => {
+			const state = {
+				editedPost: {
+					postType: 'wp_template',
+				},
+			};
+			expect( isPage( state ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'hasPageContentFocus', () => {
+		it( 'returns true if locked and the edited post type is a page', () => {
+			const state = {
+				editedPost: {
+					postType: 'wp_template',
+					context: { postType: 'page', postId: 123 },
+				},
+				hasPageContentFocus: true,
+			};
+			expect( hasPageContentFocus( state ) ).toBe( true );
+		} );
+
+		it( 'returns false if not locked and the edited post type is a page', () => {
+			const state = {
+				editedPost: {
+					postType: 'wp_template',
+					context: { postType: 'page', postId: 123 },
+				},
+				hasPageContentFocus: false,
+			};
+			expect( hasPageContentFocus( state ) ).toBe( false );
+		} );
+
+		it( 'returns false if locked and the edited post type is a template', () => {
+			const state = {
+				editedPost: {
+					postType: 'wp_template',
+				},
+				hasPageContentFocus: true,
+			};
+			expect( hasPageContentFocus( state ) ).toBe( false );
+		} );
+	} );
 } );

package/src/style.scss

@@ -9,10 +9,16 @@
 @import "./components/header-edit-mode/style.scss";
 @import "./components/header-edit-mode/document-actions/style.scss";
 @import "./components/list/style.scss";
+@import "./components/page/style.scss";
+@import "./components/page-library/style.scss";
+@import "./components/table/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
+@import "./components/sidebar-edit-mode/page-panels/style.scss";
 @import "./components/sidebar-edit-mode/settings-header/style.scss";
-@import "./components/sidebar-edit-mode/template-card/style.scss";
+@import "./components/sidebar-edit-mode/sidebar-card/style.scss";
+@import "./components/sidebar-edit-mode/template-panel/style.scss";
 @import "./components/editor/style.scss";
+@import "./components/create-pattern-modal/style.scss";
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/secondary-sidebar/style.scss";
 @import "./components/welcome-guide/style.scss";
@@ -25,10 +31,13 @@
 @import "./components/sidebar-button/style.scss";
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
-@import "./components/sidebar-navigation-screen-pages/style.scss";
+@import "./components/sidebar-navigation-screen-details-footer/style.scss";
+@import "./components/sidebar-navigation-screen-global-styles/style.scss";
+@import "./components/sidebar-navigation-screen-library/style.scss";
+@import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
+@import "./components/sidebar-navigation-screen-page/style.scss";
+@import "components/sidebar-navigation-screen-details-panel/style.scss";
 @import "./components/sidebar-navigation-screen-template/style.scss";
-@import "./components/sidebar-navigation-screen-templates/style.scss";
-@import "./components/sidebar-navigation-subtitle/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";
@@ -57,6 +66,10 @@ body.site-editor-php {
 	@include wp-admin-reset(".edit-site");
 }
 
+body.site-editor-php {
+	background: $gray-900;
+}
+
 .edit-site,
 // The modals are shown outside the .edit-site wrapper, they need these styles.
 .components-modal__frame {

package/src/utils/get-is-list-page.js

@@ -1,11 +1,23 @@
 /**
  * Returns if the params match the list page route.
  *
- * @param {Object} params      The url params.
- * @param {string} params.path The current path.
+ * @param {Object}  params                The url params.
+ * @param {string}  params.path           The current path.
+ * @param {string}  [params.categoryType] The current category type.
+ * @param {string}  [params.categoryId]   The current category id.
+ * @param {boolean} isMobileViewport      Is mobile viewport.
  *
  * @return {boolean} Is list page or not.
  */
-export default function getIsListPage( { path } ) {
-	return path === '/wp_template/all' || path === '/wp_template_part/all';
+export default function getIsListPage(
+	{ path, categoryType, categoryId },
+	isMobileViewport
+) {
+	return (
+		path === '/wp_template/all' ||
+		( path === '/library' &&
+			// Don't treat "/library" without categoryType and categoryId as a list page
+			// in mobile because the sidebar covers the whole page.
+			( ! isMobileViewport || ( !! categoryType && !! categoryId ) ) )
+	);
 }

package/src/utils/is-previewing-theme.js

@@ -5,14 +5,13 @@ import { getQueryArg } from '@wordpress/url';
 
 export function isPreviewingTheme() {
 	return (
-		window?.__experimentalEnableThemePreviews &&
-		getQueryArg( window.location.href, 'theme_preview' ) !== undefined
+		getQueryArg( window.location.href, 'wp_theme_preview' ) !== undefined
 	);
 }
 
 export function currentlyPreviewingTheme() {
 	if ( isPreviewingTheme() ) {
-		return getQueryArg( window.location.href, 'theme_preview' );
+		return getQueryArg( window.location.href, 'wp_theme_preview' );
 	}
 	return null;
 }

package/src/utils/use-activate-theme.js

@@ -6,7 +6,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 import {
 	isPreviewingTheme,
 	currentlyPreviewingTheme,
@@ -31,7 +31,8 @@ export function useActivateTheme() {
 				'&_wpnonce=' +
 				window.BLOCK_THEME_ACTIVATE_NONCE;
 			await window.fetch( activationURL );
-			const { theme_preview: themePreview, ...params } = location.params;
+			const { wp_theme_preview: themePreview, ...params } =
+				location.params;
 			history.replace( params );
 		}
 	};

package/src/utils/use-debounced-input.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce } from '@wordpress/compose';
+
+export default function useDebouncedInput( defaultValue = '' ) {
+	const [ input, setInput ] = useState( defaultValue );
+	const [ debounced, setter ] = useState( defaultValue );
+	const setDebounced = useDebounce( setter, 250 );
+	useEffect( () => {
+		if ( debounced !== input ) {
+			setDebounced( input );
+		}
+	}, [ debounced, input ] );
+	return [ input, setInput, debounced ];
+}