@wordpress/edit-site 5.7.0 → 5.8.0

package/src/components/global-styles/ui.js

@@ -10,17 +10,24 @@ import {
 } from '@wordpress/components';
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import ScreenRoot from './screen-root';
-import ScreenBlockList from './screen-block-list';
+import {
+	useBlockHasGlobalStyles,
+	default as ScreenBlockList,
+} from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
@@ -255,6 +262,40 @@ function GlobalStylesStyleBook( { onClose } ) {
 	);
 }
 
+function GlobalStylesBlockLink() {
+	const navigator = useNavigator();
+	const isMounted = useRef();
+	const { selectedBlockName, selectedBlockClientId } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockName } =
+				select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				selectedBlockName: getBlockName( clientId ),
+				selectedBlockClientId: clientId,
+			};
+		},
+		[]
+	);
+	const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );
+	useEffect( () => {
+		// Avoid navigating to the block screen on mount.
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
+		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
+			return;
+		}
+		const path = '/blocks/' + encodeURIComponent( selectedBlockName );
+		// Avoid navigating to the same path. This can happen when selecting
+		// a new block of the same type.
+		if ( path !== navigator.location.path ) {
+			navigator.goTo( path, { skipFocus: true } );
+		}
+	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
+}
+
 function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 	const blocks = getBlockTypes();
 
@@ -307,6 +348,7 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 			) }
 
 			<GlobalStylesActionMenu />
+			<GlobalStylesBlockLink />
 		</NavigatorProvider>
 	);
 }

package/src/components/header-edit-mode/more-menu/index.js

@@ -93,7 +93,7 @@ export default function MoreMenu( { showIconLabels } ) {
 								icon={ external }
 								role="menuitem"
 								href={ __(
-									'https://wordpress.org/support/article/site-editor/'
+									'https://wordpress.org/documentation/article/site-editor/'
 								) }
 								target="_blank"
 								rel="noopener noreferrer"

package/src/components/keyboard-shortcuts/index.js

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
-import {
-	useShortcut,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { isAppleOS } from '@wordpress/keycodes';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
@@ -136,152 +130,4 @@ function KeyboardShortcuts() {
 	return null;
 }
 
-function KeyboardShortcutsRegister() {
-	// Registering the shortcuts.
-	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-	useEffect( () => {
-		registerShortcut( {
-			name: 'core/edit-site/save',
-			category: 'global',
-			description: __( 'Save your changes.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 's',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/undo',
-			category: 'global',
-			description: __( 'Undo your last changes.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 'z',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/redo',
-			category: 'global',
-			description: __( 'Redo your last undo.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'z',
-			},
-			// Disable on Apple OS because it conflicts with the browser's
-			// history shortcut. It's a fine alias for both Windows and Linux.
-			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
-			// Linux, we keep it as the default for consistency.
-			aliases: isAppleOS()
-				? []
-				: [
-						{
-							modifier: 'primary',
-							character: 'y',
-						},
-				  ],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-list-view',
-			category: 'global',
-			description: __( 'Open the block list view.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'o',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-block-settings-sidebar',
-			category: 'global',
-			description: __( 'Show or hide the block settings sidebar.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: ',',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/keyboard-shortcuts',
-			category: 'main',
-			description: __( 'Display these keyboard shortcuts.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'h',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/next-region',
-			category: 'global',
-			description: __( 'Navigate to the next part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrl',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'n',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/previous-region',
-			category: 'global',
-			description: __( 'Navigate to the previous part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrlShift',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'p',
-				},
-				{
-					modifier: 'ctrlShift',
-					character: '~',
-				},
-			],
-		} );
-		registerShortcut( {
-			name: 'core/edit-site/toggle-mode',
-			category: 'global',
-			description: __( 'Switch between visual editor and code editor.' ),
-			keyCombination: {
-				modifier: 'secondary',
-				character: 'm',
-			},
-		} );
-
-		registerShortcut( {
-			name: `core/edit-site/transform-heading-to-paragraph`,
-			category: 'block-library',
-			description: __( 'Transform heading to paragraph.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: `0`,
-			},
-		} );
-
-		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
-			registerShortcut( {
-				name: `core/edit-site/transform-paragraph-to-heading-${ level }`,
-				category: 'block-library',
-				description: __( 'Transform paragraph to heading.' ),
-				keyCombination: {
-					modifier: 'access',
-					character: `${ level }`,
-				},
-			} );
-		} );
-	}, [ registerShortcut ] );
-
-	return null;
-}
-
-KeyboardShortcuts.Register = KeyboardShortcutsRegister;
 export default KeyboardShortcuts;

package/src/components/layout/index.js

@@ -22,6 +22,7 @@ import { __ } from '@wordpress/i18n';
 import { useState, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { CommandMenu } from '@wordpress/commands';
 
 /**
  * Internal dependencies
@@ -42,6 +43,7 @@ import { unlock } from '../../private-apis';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
+import { useCommands } from '../../hooks/commands';
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -60,6 +62,7 @@ export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
 	useSyncCanvasModeWithURL();
+	useCommands();
 
 	const hubRef = useRef();
 	const { params } = useLocation();
@@ -123,6 +126,7 @@ export default function Layout() {
 
 	return (
 		<>
+			{ window?.__experimentalEnableCommandCenter && <CommandMenu /> }
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
 			{ fullResizer }

package/src/components/preferences-modal/index.js

@@ -48,6 +48,13 @@ export default function EditSitePreferencesModal( {
 						) }
 						label={ __( 'Always open list view' ) }
 					/>
+					<EnableFeature
+						featureName="showBlockBreadcrumbs"
+						help={ __(
+							'Shows block breadcrumbs at the bottom of the editor.'
+						) }
+						label={ __( 'Display block breadcrumbs' ) }
+					/>
 				</PreferencesModalSection>
 			),
 		},

package/src/components/sidebar/index.js

@@ -17,6 +17,7 @@ import useSyncPathWithURL, {
 	getPathFromURL,
 } from '../sync-state-with-url/use-sync-path-with-url';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
 import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
@@ -33,6 +34,9 @@ function SidebarScreens() {
 			<NavigatorScreen path="/navigation">
 				<SidebarNavigationScreenNavigationMenus />
 			</NavigatorScreen>
+			<NavigatorScreen path="/wp_global_styles">
+				<SidebarNavigationScreenGlobalStyles />
+			</NavigatorScreen>
 			<NavigatorScreen path="/navigation/:postType/:postId">
 				<SidebarNavigationScreenNavigationItem />
 			</NavigatorScreen>

package/src/components/sidebar-navigation-screen/index.js

@@ -5,6 +5,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -35,7 +36,7 @@ export default function SidebarNavigationScreen( {
 		<VStack spacing={ 2 }>
 			<HStack
 				spacing={ 4 }
-				justify="flex-start"
+				alignment="flex-start"
 				className="edit-site-sidebar-navigation-screen__title-icon"
 			>
 				{ ! isRoot ? (
@@ -47,14 +48,18 @@ export default function SidebarNavigationScreen( {
 				) : (
 					<SidebarButton
 						icon={ isRTL() ? chevronRight : chevronLeft }
-						aria-label={ __( 'Navigate to the Dashboard' ) }
+						label={ __( 'Go back to the Dashboard' ) }
 						href={ dashboardLink || 'index.php' }
-						label={ __( 'Dashboard' ) }
 					/>
 				) }
-				<h2 className="edit-site-sidebar-navigation-screen__title">
+				<Heading
+					className="edit-site-sidebar-navigation-screen__title"
+					color={ 'white' }
+					level={ 2 }
+					size={ 20 }
+				>
 					{ title }
-				</h2>
+				</Heading>
 				{ actions }
 			</HStack>
 

package/src/components/sidebar-navigation-screen/style.scss

@@ -8,6 +8,7 @@
 .edit-site-sidebar-navigation-screen__content {
 	margin: 0 $grid-unit-20 $grid-unit-20 $button-size;
 	color: $gray-600;
+	//z-index: z-index(".edit-site-sidebar-navigation-screen__content");
 }
 
 .edit-site-sidebar-navigation-screen__page-link {
@@ -34,13 +35,27 @@
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
 	padding-right: $grid-unit-20;
+	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
 }
 
 .edit-site-sidebar-navigation-screen__title {
-	font-size: calc(1.56 * 13px);
-	line-height: normal;
-	font-weight: 500;
 	flex-grow: 1;
-	color: $white;
-	margin: 0;
+	padding: $grid-unit-15 * 0.5 0 0 0;
+}
+
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+	margin-left: $grid-unit-20;
+	.edit-site-global-styles-variations_item-preview {
+		border: $gray-900 $border-width solid;
+	}
+	.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
+		border: $gray-100 $border-width solid;
+	}
+	.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
+		border: var(--wp-admin-theme-color) $border-width solid;
+	}
+
+	.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
+		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+	}
 }

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { edit } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import StyleVariationsContainer from '../global-styles/style-variations-container';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
+
+export default function SidebarNavigationScreenGlobalStyles() {
+	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Styles' ) }
+			description={ __(
+				'Choose a different style combination for the theme styles.'
+			) }
+			content={ <StyleVariationsContainer /> }
+			actions={
+				<SidebarButton
+					icon={ edit }
+					label={ __( 'Edit styles' ) }
+					onClick={ () => {
+						// switch to edit mode.
+						setCanvasMode( 'edit' );
+						// open global styles sidebar.
+						openGeneralSidebar( 'edit-site/global-styles' );
+					} }
+				/>
+			}
+		/>
+	);
+}

package/src/components/sidebar-navigation-screen-main/index.js

@@ -6,7 +6,7 @@ import {
 	__experimentalNavigatorButton as NavigatorButton,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { layout, symbolFilled, navigation } from '@wordpress/icons';
+import { layout, symbolFilled, navigation, styles } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -56,6 +56,14 @@ export default function SidebarNavigationScreenMain() {
 							{ __( 'Navigation' ) }
 						</NavigatorButton>
 					) }
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/wp_global_styles"
+						withChevron
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/wp_template"

package/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -6,10 +6,14 @@ import {
 	store as blockEditorStore,
 	BlockList,
 	BlockTools,
+	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { useCallback } from '@wordpress/element';
+import { Popover } from '@wordpress/components';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -17,17 +21,80 @@ import { useCallback } from '@wordpress/element';
 import { unlock } from '../../private-apis';
 import { NavigationMenuLoader } from './loader';
 
+function CustomLinkAdditionalBlockUI( { block, onClose } ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { label, url, opensInNewTab } = block.attributes;
+	const link = {
+		url,
+		opensInNewTab,
+		title: label && stripHTML( label ),
+	};
+	return (
+		<Popover placement="bottom" shift onClose={ onClose }>
+			<LinkControl
+				hasTextControl
+				hasRichPreviews
+				value={ link }
+				onChange={ ( updatedValue ) => {
+					updateBlockAttributes( block.clientId, {
+						label: updatedValue.title,
+						url: updatedValue.url,
+						opensInNewTab: updatedValue.opensInNewTab,
+					} );
+					onClose();
+				} }
+				onCancel={ onClose }
+			/>
+		</Popover>
+	);
+}
+// Needs to be kept in sync with the query used at packages/block-library/src/page-list/edit.js.
+const MAX_PAGE_COUNT = 100;
+const PAGES_QUERY = [
+	'postType',
+	'page',
+	{
+		per_page: MAX_PAGE_COUNT,
+		_fields: [ 'id', 'link', 'menu_order', 'parent', 'title', 'type' ],
+		// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby
+		// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent
+		// sort.
+		orderby: 'menu_order',
+		order: 'asc',
+	},
+];
+
 export default function NavigationMenuContent( { rootClientId, onSelect } ) {
-	const { clientIdsTree, isLoading } = useSelect(
+	const [ isLoading, setIsLoading ] = useState( true );
+	const { clientIdsTree, shouldKeepLoading, isSinglePageList } = useSelect(
 		( select ) => {
-			const { __unstableGetClientIdsTree, areInnerBlocksControlled } =
-				select( blockEditorStore );
-			return {
-				clientIdsTree: __unstableGetClientIdsTree( rootClientId ),
+			const {
+				__unstableGetClientIdsTree,
+				areInnerBlocksControlled,
+				getBlockName,
+			} = select( blockEditorStore );
+			const { isResolving } = select( coreStore );
 
+			const _clientIdsTree = __unstableGetClientIdsTree( rootClientId );
+			const hasOnlyPageListBlock =
+				_clientIdsTree.length === 1 &&
+				getBlockName( _clientIdsTree[ 0 ].clientId ) ===
+					'core/page-list';
+			const isLoadingPages = isResolving(
+				'getEntityRecords',
+				PAGES_QUERY
+			);
+			return {
+				clientIdsTree: _clientIdsTree,
 				// This is a small hack to wait for the navigation block
 				// to actually load its inner blocks.
-				isLoading: ! areInnerBlocksControlled( rootClientId ),
+				shouldKeepLoading:
+					! areInnerBlocksControlled( rootClientId ) ||
+					isLoadingPages,
+				isSinglePageList:
+					hasOnlyPageListBlock &&
+					! isLoadingPages &&
+					_clientIdsTree[ 0 ].innerBlocks.length > 0,
 			};
 		},
 		[ rootClientId ]
@@ -35,6 +102,48 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
+	const [ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ] =
+		useState( false );
+
+	const renderAdditionalBlockUICallback = useCallback(
+		( block ) => {
+			if (
+				customLinkEditPopoverOpenId &&
+				block.clientId === customLinkEditPopoverOpenId
+			) {
+				return (
+					<CustomLinkAdditionalBlockUI
+						block={ block }
+						onClose={ () => {
+							setIsCustomLinkEditPopoverOpenId( false );
+						} }
+					/>
+				);
+			}
+			return null;
+		},
+		[ customLinkEditPopoverOpenId, setIsCustomLinkEditPopoverOpenId ]
+	);
+
+	// Delay loading stop by 50ms to avoid flickering.
+	useEffect( () => {
+		let timeoutId;
+		if ( shouldKeepLoading && ! isLoading ) {
+			setIsLoading( true );
+		}
+		if ( ! shouldKeepLoading && isLoading ) {
+			timeoutId = setTimeout( () => {
+				setIsLoading( false );
+				timeoutId = undefined;
+			}, 50 );
+		}
+		return () => {
+			if ( timeoutId ) {
+				clearTimeout( timeoutId );
+			}
+		};
+	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
+
 	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
 
 	const offCanvasOnselect = useCallback(
@@ -48,11 +157,22 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					block.clientId,
 					createBlock( 'core/navigation-link', block.attributes )
 				);
+			} else if (
+				block.name === 'core/navigation-link' &&
+				block.attributes.kind === 'custom' &&
+				block.attributes.url
+			) {
+				setIsCustomLinkEditPopoverOpenId( block.clientId );
 			} else {
 				onSelect( block );
 			}
 		},
-		[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
+		[
+			onSelect,
+			__unstableMarkNextChangeAsNotPersistent,
+			replaceBlock,
+			setIsCustomLinkEditPopoverOpenId,
+		]
 	);
 
 	// The hidden block is needed because it makes block edit side effects trigger.
@@ -62,10 +182,15 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 			{ isLoading && <NavigationMenuLoader /> }
 			{ ! isLoading && (
 				<OffCanvasEditor
-					blocks={ clientIdsTree }
+					blocks={
+						isSinglePageList
+							? clientIdsTree[ 0 ].innerBlocks
+							: clientIdsTree
+					}
 					onSelect={ offCanvasOnselect }
 					LeafMoreMenu={ LeafMoreMenu }
 					showAppender={ false }
+					renderAdditionalBlockUI={ renderAdditionalBlockUICallback }
 				/>
 			) }
 			<div style={ { visibility: 'hidden' } }>

package/src/components/site-hub/index.js

@@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { forwardRef } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -29,7 +30,6 @@ const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
 	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
-		select( editSiteStore ).getEditedPostType();
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
 		);
@@ -46,7 +46,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 	const siteIconButtonProps = isBackToDashboardButton
 		? {
 				href: dashboardLink || 'index.php',
-				'aria-label': __( 'Go back to the dashboard' ),
+				label: __( 'Go back to the Dashboard' ),
 		  }
 		: {
 				label: __( 'Open Navigation Sidebar' ),
@@ -97,7 +97,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 
 				{ showLabels && (
 					<div className="edit-site-site-hub__site-title">
-						{ siteTitle }
+						{ decodeEntities( siteTitle ) }
 					</div>
 				) }
 			</HStack>