setCanvasMode( 'edit' ) }
+ label={ __( 'Edit' ) }
+ icon={ pencil }
+ />
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
index e3b8b2a85d672..7f0085ba3aa22 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js
@@ -9,7 +9,6 @@ import {
import { __, sprintf } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
-
import { store as noticesStore } from '@wordpress/notices';
/**
@@ -18,6 +17,7 @@ import { store as noticesStore } from '@wordpress/notices';
import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
import ScreenNavigationMoreMenu from './more-menu';
import NavigationMenuEditor from './navigation-menu-editor';
+import EditButton from './edit-button';
export const noop = () => {};
@@ -217,17 +217,33 @@ export default function SidebarNavigationScreenNavigationMenu() {
return (
+ <>
+
+
+
}
title={ decodeEntities( menuTitle ) }
- description={ __(
- 'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
- ) }
+ description={
+ <>
+
+ { sprintf(
+ /* translators: %s: Navigation menu title */
+ 'This is your "%s" navigation menu. ',
+ decodeEntities( menuTitle )
+ ) }
+
+
+ { __(
+ 'You can edit this menu here, but be aware that visual styles might be applied separately in templates or template parts, so the preview shown here can be incomplete.'
+ ) }
+
+
+ }
>
diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
index 510932d7c4f37..32413a943bb9a 100644
--- a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
+++ b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
@@ -31,7 +31,7 @@ export default function useInitEditedEntityFromURL() {
};
}, [] );
- const { setTemplate, setTemplatePart, setPage } =
+ const { setTemplate, setTemplatePart, setPage, setNavigationMenu } =
useDispatch( editSiteStore );
useEffect( () => {
@@ -43,6 +43,9 @@ export default function useInitEditedEntityFromURL() {
case 'wp_template_part':
setTemplatePart( postId );
break;
+ case 'wp_navigation':
+ setNavigationMenu( postId );
+ break;
default:
setPage( {
context: { postType, postId },
@@ -71,5 +74,6 @@ export default function useInitEditedEntityFromURL() {
setPage,
setTemplate,
setTemplatePart,
+ setNavigationMenu,
] );
}
diff --git a/packages/edit-site/src/hooks/index.js b/packages/edit-site/src/hooks/index.js
index 513634c55b8f0..4e871f4e3824e 100644
--- a/packages/edit-site/src/hooks/index.js
+++ b/packages/edit-site/src/hooks/index.js
@@ -4,3 +4,4 @@
import './components';
import './push-changes-to-global-styles';
import './template-part-edit';
+import './navigation-menu-edit';
diff --git a/packages/edit-site/src/hooks/navigation-menu-edit.js b/packages/edit-site/src/hooks/navigation-menu-edit.js
new file mode 100644
index 0000000000000..6b2c1166c9aa2
--- /dev/null
+++ b/packages/edit-site/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 (
+
+ {
+ linkProps.onClick( event );
+ } }
+ >
+ { __( 'Edit' ) }
+
+
+ );
+}
+
+export const withEditBlockControls = createHigherOrderComponent(
+ ( BlockEdit ) => ( props ) => {
+ const { attributes, name } = props;
+ const isDisplayed = name === 'core/navigation' && attributes.ref;
+
+ return (
+ <>
+
+ { isDisplayed && (
+
+ ) }
+
+ );
+ },
+ 'withEditBlockControls'
+);
+
+addFilter(
+ 'editor.BlockEdit',
+ 'core/edit-site/navigation-edit-button',
+ withEditBlockControls
+);
diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
index 0e4e1ff00770f..eba997f1a6f68 100644
--- a/packages/edit-site/src/store/actions.js
+++ b/packages/edit-site/src/store/actions.js
@@ -176,6 +176,21 @@ 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,
+ };
+}
+
/**
* @deprecated
*/