@wordpress/block-library 7.6.0 → 7.9.0

package/src/navigation/test/use-navigation-menu.js

@@ -0,0 +1,241 @@
+/**
+ * WordPress dependencies
+ */
+import { createRegistry, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import useNavigationMenu from '../use-navigation-menu';
+
+function createRegistryWithStores() {
+	// Create a registry and register used stores.
+	const registry = createRegistry();
+	registry.register( coreStore );
+
+	const navigationConfig = {
+		kind: 'postType',
+		name: 'wp_navigation',
+		baseURL: '/wp/v2/navigation',
+		rawAttributes: [ 'title', 'excerpt', 'content' ],
+	};
+	// Register post type entity.
+	registry.dispatch( coreStore ).addEntities( [ navigationConfig ] );
+	return registry;
+}
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+function resolveRecords( registry, menus ) {
+	const dispatch = registry.dispatch( coreStore );
+	dispatch.startResolution( 'getEntityRecords', [
+		'postType',
+		'wp_navigation',
+		{ per_page: -1, status: 'publish' },
+	] );
+	dispatch.finishResolution( 'getEntityRecords', [
+		'postType',
+		'wp_navigation',
+		{ per_page: -1, status: 'publish' },
+	] );
+	dispatch.receiveEntityRecords( 'postType', 'wp_navigation', menus, {
+		per_page: -1,
+		status: 'publish',
+	} );
+}
+
+function resolveCreatePermission( registry, allowed ) {
+	const dispatch = registry.dispatch( coreStore );
+	dispatch.receiveUserPermission( 'create/navigation', allowed );
+	dispatch.startResolution( 'canUser', [ 'create', 'navigation' ] );
+	dispatch.finishResolution( 'canUser', [ 'create', 'navigation' ] );
+}
+
+function resolveUpdatePermission( registry, ref, allowed ) {
+	const dispatch = registry.dispatch( coreStore );
+	dispatch.receiveUserPermission( `update/navigation/${ ref }`, allowed );
+	dispatch.startResolution( 'canUser', [ 'update', 'navigation', ref ] );
+	dispatch.finishResolution( 'canUser', [ 'update', 'navigation', ref ] );
+}
+
+function resolveDeletePermission( registry, ref, allowed ) {
+	const dispatch = registry.dispatch( coreStore );
+	dispatch.receiveUserPermission( `delete/navigation/${ ref }`, allowed );
+	dispatch.startResolution( 'canUser', [ 'delete', 'navigation', ref ] );
+	dispatch.finishResolution( 'canUser', [ 'delete', 'navigation', ref ] );
+}
+
+describe( 'useNavigationMenus', () => {
+	const navigationMenu1 = { id: 1, title: 'Menu 1', status: 'publish' };
+	const navigationMenu2 = { id: 2, title: 'Menu 2', status: 'publish' };
+	const navigationMenu3 = { id: 3, title: 'Menu 3', status: 'publish' };
+	const navigationMenus = [
+		navigationMenu1,
+		navigationMenu2,
+		navigationMenu3,
+	];
+
+	let registry;
+	beforeEach( () => {
+		registry = createRegistryWithStores();
+		useSelect.mockImplementation( ( fn ) => fn( registry.select ) );
+	} );
+
+	it( 'Should return no information when no data is resolved', () => {
+		expect( useNavigationMenu() ).toEqual( {
+			navigationMenus: null,
+			navigationMenu: undefined,
+			canSwitchNavigationMenu: false,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: undefined,
+			canUserUpdateNavigationMenu: undefined,
+			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: undefined,
+			hasResolvedCanUserUpdateNavigationMenu: undefined,
+			hasResolvedNavigationMenus: false,
+			isNavigationMenuMissing: true,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return information about all menus when ref is missing', () => {
+		resolveRecords( registry, navigationMenus );
+		resolveCreatePermission( registry, true );
+		expect( useNavigationMenu() ).toEqual( {
+			navigationMenus,
+			navigationMenu: undefined,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: true,
+			canUserDeleteNavigationMenu: undefined,
+			canUserUpdateNavigationMenu: undefined,
+			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserDeleteNavigationMenu: undefined,
+			hasResolvedCanUserUpdateNavigationMenu: undefined,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: true,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return information about a specific menu when ref is given', () => {
+		resolveRecords( registry, navigationMenus );
+		expect( useNavigationMenu( 1 ) ).toEqual( {
+			navigationMenu: navigationMenu1,
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return null for the menu when menu status is "draft"', () => {
+		const navigationMenuDraft = { id: 4, title: 'Menu 3', status: 'draft' };
+		const testMenus = [ ...navigationMenus, navigationMenuDraft ];
+		resolveRecords( registry, testMenus );
+		expect( useNavigationMenu( 4 ) ).toEqual( {
+			navigationMenu: null,
+			navigationMenus: testMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return correct permissions (create, update)', () => {
+		resolveRecords( registry, navigationMenus );
+		resolveCreatePermission( registry, true );
+		resolveUpdatePermission( registry, 1, true );
+		resolveDeletePermission( registry, 1, false );
+		expect( useNavigationMenu( 1 ) ).toEqual( {
+			navigationMenu: navigationMenu1,
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: true,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: true,
+			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserDeleteNavigationMenu: true,
+			hasResolvedCanUserUpdateNavigationMenu: true,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return correct permissions (delete only)', () => {
+		resolveRecords( registry, navigationMenus );
+		resolveCreatePermission( registry, false );
+		resolveUpdatePermission( registry, 1, false );
+		resolveDeletePermission( registry, 1, true );
+		expect( useNavigationMenu( 1 ) ).toEqual( {
+			navigationMenu: navigationMenu1,
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: true,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: true,
+			hasResolvedCanUserDeleteNavigationMenu: true,
+			hasResolvedCanUserUpdateNavigationMenu: true,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+
+	it( 'Should return correct permissions (no permissions)', () => {
+		const requestedMenu = navigationMenu1;
+		// Note the "delete" permission is resolved for menu 2, but we're requesting
+		// the details of menu 1.
+		resolveDeletePermission( registry, navigationMenu2, true );
+		resolveRecords( registry, navigationMenus );
+
+		expect( useNavigationMenu( requestedMenu.id ) ).toEqual( {
+			navigationMenu: requestedMenu,
+			navigationMenus,
+			canSwitchNavigationMenu: true,
+			canUserCreateNavigationMenu: false,
+			canUserDeleteNavigationMenu: false,
+			canUserUpdateNavigationMenu: false,
+			hasResolvedCanUserCreateNavigationMenu: false,
+			hasResolvedCanUserDeleteNavigationMenu: false,
+			hasResolvedCanUserUpdateNavigationMenu: false,
+			hasResolvedNavigationMenus: true,
+			isNavigationMenuMissing: false,
+			isNavigationMenuResolved: false,
+			isResolvingCanUserCreateNavigationMenu: false,
+			isResolvingNavigationMenus: false,
+		} );
+	} );
+} );

package/src/navigation/use-navigation-entities.js

@@ -43,19 +43,17 @@ export default function useNavigationEntities( menuId ) {
 		context: 'view',
 	} );
 
-	const {
-		records: menuItems,
-		hasResolved: hasResolvedMenuItems,
-	} = useEntityRecords(
-		'root',
-		'menuItem',
-		{
-			menus: menuId,
-			per_page: -1,
-			context: 'view',
-		},
-		{ enabled: !! menuId }
-	);
+	const { records: menuItems, hasResolved: hasResolvedMenuItems } =
+		useEntityRecords(
+			'root',
+			'menuItem',
+			{
+				menus: menuId,
+				per_page: -1,
+				context: 'view',
+			},
+			{ enabled: !! menuId }
+		);
 
 	return {
 		pages,

package/src/navigation/use-navigation-menu.js

@@ -1,100 +1,113 @@
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseResourcePermissions as useResourcePermissions,
+} from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 export default function useNavigationMenu( ref ) {
+	const permissions = useResourcePermissions( 'navigation', ref );
+
 	return useSelect(
 		( select ) => {
+			const [
+				hasResolvedPermissions,
+				{ canCreate, canUpdate, canDelete, isResolving },
+			] = permissions;
+
 			const {
-				getEntityRecord,
-				getEditedEntityRecord,
-				getEntityRecords,
-				hasFinishedResolution,
-				isResolving,
-				canUser,
-			} = select( coreStore );
-
-			const navigationMenuSingleArgs = [
-				'postType',
-				'wp_navigation',
-				ref,
-			];
-			const rawNavigationMenu = ref
-				? getEntityRecord( ...navigationMenuSingleArgs )
-				: null;
-			let navigationMenu = ref
-				? getEditedEntityRecord( ...navigationMenuSingleArgs )
-				: null;
-
-			// getEditedEntityRecord will return the post regardless of status.
-			// Therefore if the found post is not published then we should ignore it.
-			if ( navigationMenu?.status !== 'publish' ) {
-				navigationMenu = null;
-			}
-
-			const hasResolvedNavigationMenu = ref
-				? hasFinishedResolution(
-						'getEditedEntityRecord',
-						navigationMenuSingleArgs
-				  )
-				: false;
-
-			const navigationMenuMultipleArgs = [
-				'postType',
-				'wp_navigation',
-				{ per_page: -1, status: 'publish' },
-			];
-			const navigationMenus = getEntityRecords(
-				...navigationMenuMultipleArgs
-			);
-
-			const canSwitchNavigationMenu = ref
-				? navigationMenus?.length > 1
-				: navigationMenus?.length > 0;
+				navigationMenus,
+				isResolvingNavigationMenus,
+				hasResolvedNavigationMenus,
+			} = selectNavigationMenus( select, ref );
 
-			return {
-				isNavigationMenuResolved: hasResolvedNavigationMenu,
-				isNavigationMenuMissing:
-					! ref ||
-					( hasResolvedNavigationMenu && ! rawNavigationMenu ),
-				canSwitchNavigationMenu,
-				isResolvingNavigationMenus: isResolving(
-					'getEntityRecords',
-					navigationMenuMultipleArgs
-				),
-				hasResolvedNavigationMenus: hasFinishedResolution(
-					'getEntityRecords',
-					navigationMenuMultipleArgs
-				),
+			const {
 				navigationMenu,
+				isNavigationMenuResolved,
+				isNavigationMenuMissing,
+			} = selectExistingMenu( select, ref );
+
+			return {
 				navigationMenus,
-				canUserUpdateNavigationMenu: ref
-					? canUser( 'update', 'navigation', ref )
+				isResolvingNavigationMenus,
+				hasResolvedNavigationMenus,
+
+				navigationMenu,
+				isNavigationMenuResolved,
+				isNavigationMenuMissing,
+
+				canSwitchNavigationMenu: ref
+					? navigationMenus?.length > 1
+					: navigationMenus?.length > 0,
+
+				canUserCreateNavigationMenu: canCreate,
+				isResolvingCanUserCreateNavigationMenu: isResolving,
+				hasResolvedCanUserCreateNavigationMenu: hasResolvedPermissions,
+
+				canUserUpdateNavigationMenu: canUpdate,
+				hasResolvedCanUserUpdateNavigationMenu: ref
+					? hasResolvedPermissions
 					: undefined,
-				hasResolvedCanUserUpdateNavigationMenu: hasFinishedResolution(
-					'canUser',
-					[ 'update', 'navigation', ref ]
-				),
-				canUserDeleteNavigationMenu: ref
-					? canUser( 'delete', 'navigation', ref )
+
+				canUserDeleteNavigationMenu: canDelete,
+				hasResolvedCanUserDeleteNavigationMenu: ref
+					? hasResolvedPermissions
 					: undefined,
-				hasResolvedCanUserDeleteNavigationMenu: hasFinishedResolution(
-					'canUser',
-					[ 'delete', 'navigation', ref ]
-				),
-				canUserCreateNavigationMenu: canUser( 'create', 'navigation' ),
-				isResolvingCanUserCreateNavigationMenu: isResolving(
-					'canUser',
-					[ 'create', 'navigation' ]
-				),
-				hasResolvedCanUserCreateNavigationMenu: hasFinishedResolution(
-					'canUser',
-					[ 'create', 'navigation' ]
-				),
 			};
 		},
-		[ ref ]
+		[ ref, permissions ]
 	);
 }
+
+function selectNavigationMenus( select ) {
+	const { getEntityRecords, hasFinishedResolution, isResolving } =
+		select( coreStore );
+
+	const args = [
+		'postType',
+		'wp_navigation',
+		{ per_page: -1, status: 'publish' },
+	];
+	return {
+		navigationMenus: getEntityRecords( ...args ),
+		isResolvingNavigationMenus: isResolving( 'getEntityRecords', args ),
+		hasResolvedNavigationMenus: hasFinishedResolution(
+			'getEntityRecords',
+			args
+		),
+	};
+}
+
+function selectExistingMenu( select, ref ) {
+	if ( ! ref ) {
+		return {
+			isNavigationMenuResolved: false,
+			isNavigationMenuMissing: true,
+		};
+	}
+
+	const { getEntityRecord, getEditedEntityRecord, hasFinishedResolution } =
+		select( coreStore );
+
+	const args = [ 'postType', 'wp_navigation', ref ];
+	const navigationMenu = getEntityRecord( ...args );
+	const editedNavigationMenu = getEditedEntityRecord( ...args );
+	const hasResolvedNavigationMenu = hasFinishedResolution(
+		'getEditedEntityRecord',
+		args
+	);
+
+	return {
+		isNavigationMenuResolved: hasResolvedNavigationMenu,
+		isNavigationMenuMissing: hasResolvedNavigationMenu && ! navigationMenu,
+
+		// getEditedEntityRecord will return the post regardless of status.
+		// Therefore if the found post is not published then we should ignore it.
+		navigationMenu:
+			editedNavigationMenu.status === 'publish'
+				? editedNavigationMenu
+				: null,
+	};
+}

package/src/navigation/use-template-part-area-label.js

@@ -21,9 +21,8 @@ export default function useTemplatePartAreaLabel( clientId ) {
 				return;
 			}
 
-			const { getBlock, getBlockParentsByBlockName } = select(
-				blockEditorStore
-			);
+			const { getBlock, getBlockParentsByBlockName } =
+				select( blockEditorStore );
 
 			const withAscendingResults = true;
 			const parentTemplatePartClientIds = getBlockParentsByBlockName(
@@ -40,10 +39,12 @@ export default function useTemplatePartAreaLabel( clientId ) {
 			// Blocks can be loaded into a *non-post* block editor.
 			// This code is lifted from this file:
 			// packages/block-library/src/template-part/edit/advanced-controls.js
-			// eslint-disable-next-line @wordpress/data-no-store-string-literals
-			const definedAreas = select(
-				'core/editor'
-			).__experimentalGetDefaultTemplatePartAreas();
+			/* eslint-disable @wordpress/data-no-store-string-literals */
+			const definedAreas =
+				select(
+					'core/editor'
+				).__experimentalGetDefaultTemplatePartAreas();
+			/* eslint-enable @wordpress/data-no-store-string-literals */
 			const { getEditedEntityRecord } = select( coreStore );
 
 			for ( const templatePartClientId of parentTemplatePartClientIds ) {

package/src/navigation/view.js

@@ -4,6 +4,8 @@ function closeSubmenus( element ) {
 		.querySelectorAll( '[aria-expanded="true"]' )
 		.forEach( function ( toggle ) {
 			toggle.setAttribute( 'aria-expanded', 'false' );
+			// Always focus the trigger, this becomes especially useful in closing submenus with escape key to ensure focus doesn't get trapped.
+			toggle.focus();
 		} );
 }
 
@@ -55,13 +57,16 @@ window.addEventListener( 'load', () => {
 			}
 		} );
 	} );
-	// Close on focus outside.
+	// Close on focus outside or escape key.
 	document.addEventListener( 'keyup', function ( event ) {
 		const submenuBlocks = document.querySelectorAll(
 			'.wp-block-navigation-item.has-child'
 		);
 		submenuBlocks.forEach( function ( block ) {
-			if ( ! block.contains( event.target ) ) {
+			if (
+				! block.contains( event.target ) ||
+				( block.contains( event.target ) && event.key === 'Escape' )
+			) {
 				closeSubmenus( block );
 			}
 		} );

package/src/navigation-link/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape } from 'lodash';
+import { escape, unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -43,6 +43,7 @@ import {
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -224,24 +225,41 @@ export const updateNavigationLinkBlockAttributes = (
 	} = blockAttributes;
 
 	const {
-		title = '', // the title of any provided Post.
-		url = '',
+		title: newLabel = '', // the title of any provided Post.
+		url: newUrl = '',
 
 		opensInNewTab,
 		id,
 		kind: newKind = originalKind,
 		type: newType = originalType,
 	} = updatedValue;
-	const normalizedTitle = title.replace( /http(s?):\/\//gi, '' );
-	const normalizedURL = url.replace( /http(s?):\/\//gi, '' );
-	const escapeTitle =
-		title !== '' &&
-		normalizedTitle !== normalizedURL &&
-		originalLabel !== title;
 
-	const label = escapeTitle
-		? escape( title )
-		: originalLabel || escape( normalizedURL );
+	const newLabelWithoutHttp = newLabel.replace( /http(s?):\/\//gi, '' );
+	const newUrlWithoutHttp = newUrl.replace( /http(s?):\/\//gi, '' );
+
+	const useNewLabel =
+		newLabel &&
+		newLabel !== originalLabel &&
+		// LinkControl without the title field relies
+		// on the check below. Specifically, it assumes that
+		// the URL is the same as a title.
+		// This logic a) looks suspicious and b) should really
+		// live in the LinkControl and not here. It's a great
+		// candidate for future refactoring.
+		newLabelWithoutHttp !== newUrlWithoutHttp;
+
+	// Unfortunately this causes the escaping model to be inverted.
+	// The escaped content is stored in the block attributes (and ultimately in the database),
+	// and then the raw data is "recovered" when outputting into the DOM.
+	// It would be preferable to store the **raw** data in the block attributes and escape it in JS.
+	// Why? Because there isn't one way to escape data. Depending on the context, you need to do
+	// different transforms. It doesn't make sense to me to choose one of them for the purposes of storage.
+	// See also:
+	// - https://github.com/WordPress/gutenberg/pull/41063
+	// - https://github.com/WordPress/gutenberg/pull/18617.
+	const label = useNewLabel
+		? escape( newLabel )
+		: originalLabel || escape( newUrlWithoutHttp );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -255,7 +273,7 @@ export const updateNavigationLinkBlockAttributes = (
 
 	setAttributes( {
 		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-		...( url && { url: encodeURI( safeDecodeURI( url ) ) } ),
+		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
 		...( label && { label } ),
 		...( undefined !== opensInNewTab && { opensInNewTab } ),
 		...( id && Number.isInteger( id ) && { id } ),
@@ -437,10 +455,8 @@ export default function NavigationLinkEdit( {
 		title: label && navStripHTML( label ), // don't allow HTML to display inside the <LinkControl>
 	};
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const {
-		replaceBlock,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
+	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
@@ -606,7 +622,17 @@ export default function NavigationLinkEdit( {
 		return {
 			id: page.id,
 			type: postType,
-			title: page.title.rendered,
+			// Make `title` property consistent with that in `fetchLinkSuggestions` where the `rendered` title (containing HTML entities)
+			// is also being decoded. By being consistent in both locations we avoid having to branch in the rendering output code.
+			// Ideally in the future we will update both APIs to utilise the "raw" form of the title which is better suited to edit contexts.
+			// e.g.
+			// - title.raw = "Yes & No"
+			// - title.rendered = "Yes &#038; No"
+			// - decodeEntities( title.rendered ) = "Yes & No"
+			// See:
+			// - https://github.com/WordPress/gutenberg/pull/41063
+			// - https://github.com/WordPress/gutenberg/blob/a1e1fdc0e6278457e9f4fc0b31ac6d2095f5450b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js#L212-L218
+			title: decodeEntities( page.title.rendered ),
 			url: page.link,
 			kind: 'post-type',
 		};
@@ -638,10 +664,8 @@ export default function NavigationLinkEdit( {
 			'has-text-color': !! textColor || !! customTextColor,
 			[ getColorClassName( 'color', textColor ) ]: !! textColor,
 			'has-background': !! backgroundColor || customBackgroundColor,
-			[ getColorClassName(
-				'background-color',
-				backgroundColor
-			) ]: !! backgroundColor,
+			[ getColorClassName( 'background-color', backgroundColor ) ]:
+				!! backgroundColor,
 		} ),
 		style: {
 			color: ! textColor && customTextColor,
@@ -795,10 +819,20 @@ export default function NavigationLinkEdit( {
 										text={ tooltipText }
 									>
 										<>
-											<span>
+											<span
+												aria-label={ __(
+													'Navigation link text'
+												) }
+											>
 												{
-													/* Trim to avoid trailing white space when the placeholder text is not present */
-													`${ label } ${ placeholderText }`.trim()
+													// Some attributes are stored in an escaped form. It's a legacy issue.
+													// Ideally they would be stored in a raw, unescaped form.
+													// Unescape is used here to "recover" the escaped characters
+													// so they display without encoding.
+													// See `updateNavigationLinkBlockAttributes` for more details.
+													`${ unescape(
+														label
+													) } ${ placeholderText }`.trim()
 												}
 											</span>
 											<span className="wp-block-navigation-link__missing_text-tooltip">