@wordpress/edit-site 4.18.0 → 4.19.0

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

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  */
 import { useCallback, useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
 import {
 	ToolSelector,
 	__experimentalPreviewOptions as PreviewOptions,
@@ -50,8 +51,8 @@ export default function Header( { showIconLabels } ) {
 		isListViewOpen,
 		listViewShortcut,
 		isVisualMode,
-		settings,
 		blockEditorMode,
+		homeUrl,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -59,13 +60,16 @@ export default function Header( { showIconLabels } ) {
 			isInserterOpened,
 			isListViewOpened,
 			getEditorMode,
-			getSettings,
 		} = select( editSiteStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 
 		const postType = getEditedPostType();
 
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			templateType: postType,
@@ -75,8 +79,8 @@ export default function Header( { showIconLabels } ) {
 				'core/edit-site/toggle-list-view'
 			),
 			isVisualMode: getEditorMode() === 'visual',
-			settings: getSettings(),
 			blockEditorMode: __unstableGetEditorMode(),
+			homeUrl: getUnstableBase()?.home,
 		};
 	}, [] );
 
@@ -218,7 +222,7 @@ export default function Header( { showIconLabels } ) {
 							>
 								<MenuGroup>
 									<MenuItem
-										href={ settings?.siteUrl }
+										href={ homeUrl }
 										target="_blank"
 										icon={ external }
 									>

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

@@ -180,6 +180,10 @@ function KeyboardShortcutsRegister() {
 					modifier: 'access',
 					character: 'p',
 				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
 			],
 		} );
 		registerShortcut( {

package/src/components/list/table.js

@@ -94,7 +94,7 @@ export default function Table( { templateType } ) {
 									) }
 								</Link>
 							</Heading>
-							{ template.description }
+							{ decodeEntities( template.description ) }
 						</td>
 
 						<td className="edit-site-list-table-column" role="cell">

package/src/components/list/use-register-shortcuts.js

@@ -39,6 +39,10 @@ export default function useRegisterShortcuts() {
 					modifier: 'access',
 					character: 'p',
 				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
 			],
 		} );
 	}, [] );

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

@@ -7,13 +7,6 @@
 	color: $white;
 	transition: width 100ms linear;
 	@include reduce-motion("transition");
-
-	// Footer is visible from medium so we subtract footer's height
-	.interface-interface-skeleton.has-footer & {
-		@include break-medium() {
-			height: calc(100% - #{$button-size-small + $border-width});
-		}
-	}
 }
 
 .edit-site-navigation-panel__inner {

package/src/components/navigation-sidebar/navigation-toggle/test/index.js

@@ -15,55 +15,51 @@ import NavigationToggle from '..';
 
 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;
+	return jest.fn();
 } );
-jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
-	useDispatch: () => ( { setNavigationPanelActiveMenu: jest.fn() } ),
-} ) );
-
-jest.mock( '@wordpress/core-data' );
 
 describe( 'NavigationToggle', () => {
 	describe( 'when in full screen mode', () => {
 		it( 'should display a user uploaded site icon if it exists', () => {
-			useSelect.mockImplementation( ( cb ) => {
-				return cb( () => ( {
-					getCurrentTemplateNavigationPanelSubMenu: () => 'root',
+			useSelect.mockImplementation( ( cb ) =>
+				cb( () => ( {
 					getEntityRecord: () => ( {
 						site_icon_url: 'https://fakeUrl.com',
 					} ),
 					isResolving: () => false,
 					isNavigationOpened: () => false,
-				} ) );
-			} );
+				} ) )
+			);
 
-			render( <NavigationToggle /> );
+			const { unmount } = render( <NavigationToggle /> );
 
 			const siteIcon = screen.getByAltText( 'Site Icon' );
-
 			expect( siteIcon ).toBeVisible();
+
+			// Unmount the UI synchronously so that any async effects, like the on-mount focus
+			// that shows and positions a tooltip, are cancelled right away and never run.
+			unmount();
 		} );
 
 		it( 'should display a default site icon if no user uploaded site icon exists', () => {
-			useSelect.mockImplementation( ( cb ) => {
-				return cb( () => ( {
-					getCurrentTemplateNavigationPanelSubMenu: () => 'root',
+			useSelect.mockImplementation( ( cb ) =>
+				cb( () => ( {
 					getEntityRecord: () => ( {
 						site_icon_url: '',
 					} ),
 					isResolving: () => false,
 					isNavigationOpened: () => false,
-				} ) );
-			} );
+				} ) )
+			);
 
-			const { container } = render( <NavigationToggle /> );
+			const { unmount } = render( <NavigationToggle /> );
 
-			expect(
-				screen.queryByAltText( 'Site Icon' )
-			).not.toBeInTheDocument();
+			const siteIcon = screen.queryByAltText( 'Site Icon' );
+			expect( siteIcon ).not.toBeInTheDocument();
 
-			expect( container ).toMatchSnapshot();
+			// Unmount the UI synchronously so that any async effects, like the on-mount focus
+			// that shows and positions a tooltip, are cancelled right away and never run.
+			unmount();
 		} );
 	} );
 } );

package/src/components/save-button/index.js

@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -29,6 +30,8 @@ export default function SaveButton() {
 
 	const disabled = ! isDirty || isSaving;
 
+	const label = __( 'Save' );
+
 	return (
 		<Button
 			variant="primary"
@@ -37,8 +40,21 @@ export default function SaveButton() {
 			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
 			onClick={ disabled ? undefined : () => setIsSaveViewOpened( true ) }
+			label={ label }
+			/*
+			 * We want the tooltip to show the keyboard shortcut only when the
+			 * button does something, i.e. when it's not disabled.
+			 */
+			shortcut={ disabled ? undefined : displayShortcut.primary( 's' ) }
+			/*
+			 * Displaying the keyboard shortcut conditionally makes the tooltip
+			 * itself show conditionally. This would trigger a full-rerendering
+			 * of the button that we want to avoid. By setting `showTooltip`,
+			 & the tooltip is always rendered even when there's no keyboard shortcut.
+			 */
+			showTooltip
 		>
-			{ __( 'Save' ) }
+			{ label }
 		</Button>
 	);
 }

package/src/components/sidebar-edit-mode/template-card/index.js

@@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { Icon } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -42,12 +43,12 @@ export default function TemplateCard() {
 			<div className="edit-site-template-card__content">
 				<div className="edit-site-template-card__header">
 					<h2 className="edit-site-template-card__title">
-						{ title }
+						{ decodeEntities( title ) }
 					</h2>
 					<TemplateActions template={ template } />
 				</div>
 				<div className="edit-site-template-card__description">
-					{ description }
+					{ decodeEntities( description ) }
 				</div>
 				<TemplateAreas />
 			</div>

package/src/components/template-details/index.js

@@ -11,6 +11,7 @@ import {
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -65,7 +66,7 @@ export default function TemplateDetails( { template, onClose } ) {
 						className="edit-site-template-details__title"
 						as="p"
 					>
-						{ title }
+						{ decodeEntities( title ) }
 					</Text>
 				) }
 
@@ -75,7 +76,7 @@ export default function TemplateDetails( { template, onClose } ) {
 						className="edit-site-template-details__description"
 						as="p"
 					>
-						{ description }
+						{ decodeEntities( description ) }
 					</Text>
 				) }
 			</VStack>

package/src/components/navigation-sidebar/navigation-toggle/test/__snapshots__/index.js.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavigationToggle when in full screen mode should display a default site icon if no user uploaded site icon exists 1`] = `
-<div>
-  <div
-    class="edit-site-navigation-toggle"
-  >
-    <button
-      aria-label="Toggle navigation"
-      aria-pressed="false"
-      class="components-button edit-site-navigation-toggle__button"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        focusable="false"
-        height="36px"
-        viewBox="-2 -2 24 24"
-        width="36px"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M20 10c0-5.51-4.49-10-10-10C4.48 0 0 4.49 0 10c0 5.52 4.48 10 10 10 5.51 0 10-4.48 10-10zM7.78 15.37L4.37 6.22c.55-.02 1.17-.08 1.17-.08.5-.06.44-1.13-.06-1.11 0 0-1.45.11-2.37.11-.18 0-.37 0-.58-.01C4.12 2.69 6.87 1.11 10 1.11c2.33 0 4.45.87 6.05 2.34-.68-.11-1.65.39-1.65 1.58 0 .74.45 1.36.9 2.1.35.61.55 1.36.55 2.46 0 1.49-1.4 5-1.4 5l-3.03-8.37c.54-.02.82-.17.82-.17.5-.05.44-1.25-.06-1.22 0 0-1.44.12-2.38.12-.87 0-2.33-.12-2.33-.12-.5-.03-.56 1.2-.06 1.22l.92.08 1.26 3.41zM17.41 10c.24-.64.74-1.87.43-4.25.7 1.29 1.05 2.71 1.05 4.25 0 3.29-1.73 6.24-4.4 7.78.97-2.59 1.94-5.2 2.92-7.78zM6.1 18.09C3.12 16.65 1.11 13.53 1.11 10c0-1.3.23-2.48.72-3.59C3.25 10.3 4.67 14.2 6.1 18.09zm4.03-6.63l2.58 6.98c-.86.29-1.76.45-2.71.45-.79 0-1.57-.11-2.29-.33.81-2.38 1.62-4.74 2.42-7.1z"
-        />
-      </svg>
-      <div
-        aria-hidden="true"
-        class="components-popover components-tooltip"
-        style="position: absolute;"
-        tabindex="-1"
-      >
-        <div
-          class="components-popover__content"
-        >
-          Toggle navigation
-        </div>
-      </div>
-    </button>
-  </div>
-</div>
-`;