Show a UI warning when user does not have permission to update/edit an existing Navigation block

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import noop from 'lodash';
+import { noop, uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,7 +26,12 @@ import {
 	getColorClassName,
 	Warning,
 } from '@wordpress/block-editor';
-import { EntityProvider, useEntityProp } from '@wordpress/core-data';
+import {
+	EntityProvider,
+	useEntityProp,
+	store as coreStore,
+} from '@wordpress/core-data';
+
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	PanelBody,
@@ -38,6 +43,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as noticeStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -103,6 +109,8 @@ function Navigation( {
 	customPlaceholder: CustomPlaceholder = null,
 	customAppender: CustomAppender = null,
 } ) {
+	const noticeRef = useRef();
+
 	const {
 		openSubmenusOnClick,
 		overlayMenu,
@@ -142,7 +150,15 @@ function Navigation( {
 		`navigationMenu/${ ref }`
 	);
 
-	const { innerBlocks, isInnerBlockSelected, hasSubmenus } = useSelect(
+	const {
+		canUserUpdateNavigationEntity,
+		hasResolvedCanUserUpdateNavigationEntity,
+		canUserDeleteNavigationEntity,
+		hasResolvedCanUserDeleteNavigationEntity,
+		innerBlocks,
+		isInnerBlockSelected,
+		hasSubmenus,
+	} = useSelect(
 		( select ) => {
 			const { getBlocks, hasSelectedInnerBlock } = select(
 				blockEditorStore
@@ -152,13 +168,29 @@ function Navigation( {
 				( block ) => block.name === 'core/navigation-submenu'
 			);
 
+			const { canUser, hasFinishedResolution } = select( coreStore );
+
 			return {
 				hasSubmenus: firstSubmenu,
 				innerBlocks: blocks,
 				isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ),
+				canUserUpdateNavigationEntity: ref
+					? canUser( 'update', 'navigation', ref )
+					: undefined,
+				hasResolvedCanUserUpdateNavigationEntity: hasFinishedResolution(
+					'canUser',
+					[ 'update', 'navigation', ref ]
+				),
+				canUserDeleteNavigationEntity: ref
+					? canUser( 'delete', 'navigation', ref )
+					: undefined,
+				hasResolvedCanUserDeleteNavigationEntity: hasFinishedResolution(
+					'canUser',
+					[ 'delete', 'navigation', ref ]
+				),
 			};
 		},
-		[ clientId ]
+		[ clientId, ref ]
 	);
 	const hasExistingNavItems = !! innerBlocks.length;
 	const {
@@ -167,6 +199,8 @@ function Navigation( {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = useDispatch( blockEditorStore );
 
+	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
+
 	const [
 		hasSavedUnsavedInnerBlocks,
 		setHasSavedUnsavedInnerBlocks,
@@ -303,6 +337,53 @@ function Navigation( {
 		// with the snapshot from the time when ref became undefined.
 	}, [ clientId, ref, innerBlocks ] );
 
+	useEffect( () => {
+		const setPermissionsNotice = () => {
+			if ( noticeRef.current ) {
+				return;
+			}
+
+			noticeRef.current = uniqueId( 'navBlockNoEditPermissions' );
+
+			createWarningNotice(
+				__(
+					'You do not have permission to edit this Navigation. Any edits made will not be saved.'
+				),
+				{
+					id: noticeRef.current,
+					type: 'snackbar',
+				}
+			);
+		};
+
+		const removePermissionsNotice = () => {
+			if ( ! noticeRef.current ) {
+				return;
+			}
+			removeNotice( noticeRef.current );
+			noticeRef.current = null;
+		};
+
+		if ( ! isSelected && ! isInnerBlockSelected ) {
+			removePermissionsNotice();
+		}
+
+		if (
+			( isSelected || isInnerBlockSelected ) &&
+			hasResolvedCanUserUpdateNavigationEntity &&
+			! canUserUpdateNavigationEntity
+		) {
+			setPermissionsNotice();
+		}
+	}, [
+		ref,
+		isEntityAvailable,
+		hasResolvedCanUserUpdateNavigationEntity,
+		canUserUpdateNavigationEntity,
+		isSelected,
+		isInnerBlockSelected,
+	] );
+
 	const startWithEmptyMenu = useCallback( () => {
 		if ( navigationArea ) {
 			setAreaMenu( 0 );
@@ -507,18 +588,24 @@ function Navigation( {
 				</InspectorControls>
 				{ isEntityAvailable && (
 					<InspectorControls __experimentalGroup="advanced">
-						<NavigationMenuNameControl />
-						<NavigationMenuDeleteControl
-							onDelete={ () => {
-								if ( navigationArea ) {
-									setAreaMenu( 0 );
-								}
-								setAttributes( {
-									ref: undefined,
-								} );
-								setIsPlaceholderShown( true );
-							} }
-						/>
+						{ hasResolvedCanUserUpdateNavigationEntity &&
+							canUserUpdateNavigationEntity && (
+								<NavigationMenuNameControl />
+							) }
+						{ hasResolvedCanUserDeleteNavigationEntity &&
+							canUserDeleteNavigationEntity && (
+								<NavigationMenuDeleteControl
+									onDelete={ () => {
+										if ( navigationArea ) {
+											setAreaMenu( 0 );
+										}
+										setAttributes( {
+											ref: undefined,
+										} );
+										setIsPlaceholderShown( true );
+									} }
+								/>
+							) }
 					</InspectorControls>
 				) }
 				<nav { ...blockProps }>

packages/e2e-tests/specs/editor/blocks/navigation.test.js

@@ -17,6 +17,9 @@ import {
 	ensureSidebarOpened,
 	__experimentalRest as rest,
 	publishPost,
+	createUser,
+	loginUser,
+	deleteUser,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -111,6 +114,7 @@ const PLACEHOLDER_ACTIONS_CLASS = 'wp-block-navigation-placeholder__actions';
 const PLACEHOLDER_ACTIONS_XPATH = `//*[contains(@class, '${ PLACEHOLDER_ACTIONS_CLASS }')]`;
 const START_EMPTY_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Start empty']`;
 const ADD_ALL_PAGES_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Add all pages']`;
+const SELECT_MENU_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Select menu']`;
 
 async function turnResponsivenessOn() {
 	const blocks = await getAllBlocks();
@@ -766,4 +770,58 @@ describe( 'Navigation', () => {
 			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
 		} );
 	} );
+
+	describe( 'Permission based restrictions', () => {
+		it( 'shows a warning if user does not have permission to edit / update Navigations', async () => {
+			await createNewPost();
+			await insertBlock( 'Navigation' );
+
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+
+			// This creates an empty Navigation post type entity.
+			await startEmptyButton.click();
+
+			// Publishing the Post ensures the Navigation entity is saved.
+			// The Post itself is irrelevant.
+			await publishPost();
+
+			const username = 'contributoruser';
+
+			const contribUserPassword = await createUser( username, {
+				role: 'contributor',
+			} );
+
+			// Switch to a Contributor role user - they should not have
+			// permission to update Navigations.
+			await loginUser( username, contribUserPassword );
+
+			await createNewPost();
+
+			await insertBlock( 'Navigation' );
+
+			// Select the Navigation post created by the Admin early
+			// in the test.
+			const navigationPostCreatedByAdminName = 'Navigation';
+			const dropdown = await page.waitForXPath( SELECT_MENU_XPATH );
+			await dropdown.click();
+			const theOption = await page.waitForXPath(
+				`//*[contains(@class, 'components-menu-item__item')][ text()="${ navigationPostCreatedByAdminName }" ]`
+			);
+			await theOption.click();
+
+			// Make sure the snackbar error shows up
+			await page.waitForXPath(
+				`//*[contains(@class, 'components-snackbar__content')][ text()="You do not have permission to edit this Navigation. Any edits made will not be saved." ]`
+			);
+
+			// Tidy up after ourselves.
+			await deleteUser( username );
+
+			// Expect a console 403 for request to Navigation Areas.
+			// Todo: removed once Nav Areas are removed from the Gutenberg Plugin.
+			expect( console ).toHaveErrored();
+		} );
+	} );
 } );