Alternative: restrict Navigation permissions and show UI warning if cannot create

lib/navigation.php

@@ -50,6 +50,18 @@ function gutenberg_register_navigation_post_type() {
 			'editor',
 			'revisions',
 		),
+		'capabilities'          => array(
+			'edit_others_posts'      => 'edit_theme_options',
+			'delete_posts'           => 'edit_theme_options',
+			'publish_posts'          => 'edit_theme_options',
+			'create_posts'           => 'edit_theme_options',
+			'read_private_posts'     => 'edit_theme_options',
+			'delete_private_posts'   => 'edit_theme_options',
+			'delete_published_posts' => 'edit_theme_options',
+			'delete_others_posts'    => 'edit_theme_options',
+			'edit_private_posts'     => 'edit_theme_options',
+			'edit_published_posts'   => 'edit_theme_options',
+		),
 	);
 
 	register_post_type( 'wp_navigation', $args );

packages/block-library/src/navigation/edit/index.js

@@ -39,7 +39,6 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as noticeStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -54,6 +53,7 @@ import NavigationMenuSelector from './navigation-menu-selector';
 import NavigationMenuNameControl from './navigation-menu-name-control';
 import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
+import useNavigationNotice from './use-navigation-notice';
 
 const EMPTY_ARRAY = [];
 
@@ -107,8 +107,6 @@ function Navigation( {
 	customPlaceholder: CustomPlaceholder = null,
 	customAppender: CustomAppender = null,
 } ) {
-	const noticeRef = useRef();
-
 	const {
 		openSubmenusOnClick,
 		overlayMenu,
@@ -192,8 +190,6 @@ function Navigation( {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = useDispatch( blockEditorStore );
 
-	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
-
 	const [
 		hasSavedUnsavedInnerBlocks,
 		setHasSavedUnsavedInnerBlocks,
@@ -220,6 +216,8 @@ function Navigation( {
 		hasResolvedCanUserUpdateNavigationEntity,
 		canUserDeleteNavigationEntity,
 		hasResolvedCanUserDeleteNavigationEntity,
+		canUserCreateNavigation,
+		hasResolvedCanUserCreateNavigation,
 	} = useNavigationMenu( ref );
 
 	const navRef = useRef();
@@ -307,7 +305,7 @@ function Navigation( {
 			setDetectedColor,
 			setDetectedBackgroundColor
 		);
-		const subMenuElement = navRef.current.querySelector(
+		const subMenuElement = navRef.current?.querySelector(
 			'[data-type="core/navigation-link"] [data-type="core/navigation-link"]'
 		);
 		if ( subMenuElement ) {
@@ -336,52 +334,52 @@ function Navigation( {
 		}
 	}, [ clientId, ref, hasUncontrolledInnerBlocks, controlledInnerBlocks ] );
 
-	useEffect( () => {
-		const setPermissionsNotice = () => {
-			if ( noticeRef.current ) {
-				return;
-			}
-
-			noticeRef.current =
-				'block-library/core/navigation/permissions/update';
-
-			createWarningNotice(
-				__(
-					'You do not have permission to edit this Menu. Any changes made will not be saved.'
-				),
-				{
-					id: noticeRef.current,
-					type: 'snackbar',
-				}
-			);
-		};
+	const [ showCantEditNotice, hideCantEditNotice ] = useNavigationNotice( {
+		name: 'block-library/core/navigation/permissions/update',
+		message: __(
+			'You do not have permission to edit this Menu. Any changes made will not be saved.'
+		),
+	} );
 
-		const removePermissionsNotice = () => {
-			if ( ! noticeRef.current ) {
-				return;
-			}
-			removeNotice( noticeRef.current );
-			noticeRef.current = null;
-		};
+	const [ showCantCreateNotice, hideCantCreateNotice ] = useNavigationNotice(
+		{
+			name: 'block-library/core/navigation/permissions/create',
+			message: __(
+				'You do not have permission to create Navigation Menus.'
+			),
+		}
+	);
 
+	useEffect( () => {
 		if ( ! isSelected && ! isInnerBlockSelected ) {
-			removePermissionsNotice();
+			hideCantEditNotice();
+			hideCantCreateNotice();
 		}
 
-		if (
-			( isSelected || isInnerBlockSelected ) &&
-			hasResolvedCanUserUpdateNavigationEntity &&
-			! canUserUpdateNavigationEntity
-		) {
-			setPermissionsNotice();
+		if ( isSelected || isInnerBlockSelected ) {
+			if (
+				hasResolvedCanUserUpdateNavigationEntity &&
+				! canUserUpdateNavigationEntity
+			) {
+				showCantEditNotice();
+			}
+
+			if (
+				! ref &&
+				hasResolvedCanUserCreateNavigation &&
+				! canUserCreateNavigation
+			) {
+				showCantCreateNotice();
+			}
 		}
 	}, [
-		ref,
-		isEntityAvailable,
-		hasResolvedCanUserUpdateNavigationEntity,
-		canUserUpdateNavigationEntity,
 		isSelected,
 		isInnerBlockSelected,
+		canUserUpdateNavigationEntity,
+		hasResolvedCanUserUpdateNavigationEntity,
+		canUserCreateNavigation,
+		hasResolvedCanUserCreateNavigation,
+		ref,
 	] );
 
 	const startWithEmptyMenu = useCallback( () => {
@@ -488,6 +486,7 @@ function Navigation( {
 											onClose();
 										} }
 										onCreateNew={ startWithEmptyMenu }
+										showCreate={ canUserCreateNavigation }
 									/>
 								) }
 							</ToolbarDropdownMenu>
@@ -642,11 +641,13 @@ function Navigation( {
 								hasResolvedNavigationMenus
 							}
 							clientId={ clientId }
+							canUserCreateNavigation={ canUserCreateNavigation }
 						/>
 					) }
-					{ ! isEntityAvailable && ! isPlaceholderShown && (
-						<PlaceholderPreview isLoading />
-					) }
+					{ ! hasResolvedCanUserCreateNavigation ||
+						( ! isEntityAvailable && ! isPlaceholderShown && (
+							<PlaceholderPreview isLoading />
+						) ) }
 					{ ! isPlaceholderShown && (
 						<ResponsiveWrapper
 							id={ clientId }

packages/block-library/src/navigation/edit/navigation-menu-selector.js

@@ -12,7 +12,11 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import useNavigationMenu from '../use-navigation-menu';
 
-export default function NavigationMenuSelector( { onSelect, onCreateNew } ) {
+export default function NavigationMenuSelector( {
+	onSelect,
+	onCreateNew,
+	showCreate = false,
+} ) {
 	const { navigationMenus } = useNavigationMenu();
 	const ref = useEntityId( 'postType', 'wp_navigation' );
 
@@ -42,18 +46,20 @@ export default function NavigationMenuSelector( { onSelect, onCreateNew } ) {
 					} ) }
 				/>
 			</MenuGroup>
-			<MenuGroup>
-				<MenuItem onClick={ onCreateNew }>
-					{ __( 'Create new menu' ) }
-				</MenuItem>
-				<MenuItem
-					href={ addQueryArgs( 'edit.php', {
-						post_type: 'wp_navigation',
-					} ) }
-				>
-					{ __( 'Manage menus' ) }
-				</MenuItem>
-			</MenuGroup>
+			{ showCreate && (
+				<MenuGroup>
+					<MenuItem onClick={ onCreateNew }>
+						{ __( 'Create new menu' ) }
+					</MenuItem>
+					<MenuItem
+						href={ addQueryArgs( 'edit.php', {
+							post_type: 'wp_navigation',
+						} ) }
+					>
+						{ __( 'Manage menus' ) }
+					</MenuItem>
+				</MenuGroup>
+			) }
 		</>
 	);
 }

packages/block-library/src/navigation/edit/placeholder/index.js

@@ -31,6 +31,7 @@ const ExistingMenusDropdown = ( {
 	onFinish,
 	menus,
 	onCreateFromMenu,
+	showClassicMenus = false,
 } ) => {
 	const toggleProps = {
 		variant: 'tertiary',
@@ -65,22 +66,24 @@ const ExistingMenusDropdown = ( {
 								);
 							} ) }
 					</MenuGroup>
-					<MenuGroup label={ __( 'Classic Menus' ) }>
-						{ menus?.map( ( menu ) => {
-							return (
-								<MenuItem
-									onClick={ () => {
-										setSelectedMenu( menu.id );
-										onCreateFromMenu( menu.name );
-									} }
-									onClose={ onClose }
-									key={ menu.id }
-								>
-									{ decodeEntities( menu.name ) }
-								</MenuItem>
-							);
-						} ) }
-					</MenuGroup>
+					{ showClassicMenus && (
+						<MenuGroup label={ __( 'Classic Menus' ) }>
+							{ menus?.map( ( menu ) => {
+								return (
+									<MenuItem
+										onClick={ () => {
+											setSelectedMenu( menu.id );
+											onCreateFromMenu( menu.name );
+										} }
+										onClose={ onClose }
+										key={ menu.id }
+									>
+										{ decodeEntities( menu.name ) }
+									</MenuItem>
+								);
+							} ) }
+						</MenuGroup>
+					) }
 				</>
 			) }
 		</DropdownMenu>
@@ -92,6 +95,7 @@ export default function NavigationPlaceholder( {
 	onFinish,
 	canSwitchNavigationMenu,
 	hasResolvedNavigationMenus,
+	canUserCreateNavigation = false,
 } ) {
 	const [ selectedMenu, setSelectedMenu ] = useState();
 	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
@@ -102,6 +106,10 @@ export default function NavigationPlaceholder( {
 		blocks,
 		navigationMenuTitle = null
 	) => {
+		if ( ! canUserCreateNavigation ) {
+			return;
+		}
+
 		const navigationMenu = await createNavigationMenu(
 			navigationMenuTitle,
 			blocks
@@ -176,8 +184,10 @@ export default function NavigationPlaceholder( {
 								<Icon icon={ navigation } />{ ' ' }
 								{ __( 'Navigation' ) }
 							</div>
+
 							<hr />
-							{ hasMenus || navigationMenus.length ? (
+
+							{ hasMenus || navigationMenus?.length ? (
 								<>
 									<ExistingMenusDropdown
 										canSwitchNavigationMenu={
@@ -188,11 +198,14 @@ export default function NavigationPlaceholder( {
 										onFinish={ onFinish }
 										menus={ menus }
 										onCreateFromMenu={ onCreateFromMenu }
+										showClassicMenus={
+											canUserCreateNavigation
+										}
 									/>
 									<hr />
 								</>
 							) : undefined }
-							{ hasPages ? (
+							{ canUserCreateNavigation && hasPages ? (
 								<>
 									<Button
 										variant="tertiary"
@@ -203,12 +216,15 @@ export default function NavigationPlaceholder( {
 									<hr />
 								</>
 							) : undefined }
-							<Button
-								variant="tertiary"
-								onClick={ onCreateEmptyMenu }
-							>
-								{ __( 'Start empty' ) }
-							</Button>
+
+							{ canUserCreateNavigation && (
+								<Button
+									variant="tertiary"
+									onClick={ onCreateEmptyMenu }
+								>
+									{ __( 'Start empty' ) }
+								</Button>
+							) }
 						</div>
 					</div>
 				</Placeholder>

packages/block-library/src/navigation/edit/use-navigation-notice.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticeStore } from '@wordpress/notices';
+
+function useNavigationNotice( { name, message } = {} ) {
+	const noticeRef = useRef();
+
+	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
+
+	const showNotice = () => {
+		if ( noticeRef.current ) {
+			return;
+		}
+
+		noticeRef.current = name;
+
+		createWarningNotice( message, {
+			id: noticeRef.current,
+			type: 'snackbar',
+		} );
+	};
+
+	const hideNotice = () => {
+		if ( ! noticeRef.current ) {
+			return;
+		}
+		removeNotice( noticeRef.current );
+		noticeRef.current = null;
+	};
+
+	return [ showNotice, hideNotice ];
+}
+
+export default useNavigationNotice;

packages/block-library/src/navigation/editor.scss

@@ -372,6 +372,7 @@ $color-control-label-height: 20px;
 	font-size: $default-font-size;
 	font-family: $default-font;
 	gap: $grid-unit-15 * 0.5;
+	align-items: center;
 
 	// Margins.
 	.components-dropdown,