@wordpress/edit-site 4.16.0 → 4.18.0

package/src/components/{header → header-edit-mode}/style.scss

@@ -1,6 +1,6 @@
 $header-toolbar-min-width: 335px;
 
-.edit-site-header {
+.edit-site-header-edit-mode {
 	align-items: center;
 	background-color: $white;
 	display: flex;
@@ -16,17 +16,17 @@ $header-toolbar-min-width: 335px;
 		@include reduce-motion("transition");
 	}
 
-	.edit-site-header_start {
+	.edit-site-header-edit-mode__start {
 		display: flex;
 		border: none;
 	}
 
-	.edit-site-header_end {
+	.edit-site-header-edit-mode__end {
 		display: flex;
 		justify-content: flex-end;
 	}
 
-	.edit-site-header_center {
+	.edit-site-header-edit-mode__center {
 		display: flex;
 		align-items: center;
 		height: 100%;
@@ -42,7 +42,7 @@ $header-toolbar-min-width: 335px;
 
 // Keeps the document title centered when the sidebar is open
 body.is-navigation-sidebar-open {
-	.edit-site-header {
+	.edit-site-header-edit-mode {
 		padding-left: 0;
 		transition: padding-left 20ms linear;
 		transition-delay: 0ms;
@@ -52,9 +52,9 @@ body.is-navigation-sidebar-open {
 
 // Centred document title on small screens with sidebar open
 @media ( max-width: #{ ($break-large - 1) } ) {
-	body.is-navigation-sidebar-open .edit-site-header {
-		.edit-site-header-toolbar__inserter-toggle ~ .components-button,
-		.edit-site-header_end .components-button:not(.is-primary) {
+	body.is-navigation-sidebar-open .edit-site-header-edit-mode {
+		.edit-site-header-edit-mode__inserter-toggle ~ .components-button,
+		.edit-site-header-edit-mode__end .components-button:not(.is-primary) {
 			display: none;
 		}
 		.edit-site-save-button__button {
@@ -63,7 +63,7 @@ body.is-navigation-sidebar-open {
 	}
 }
 
-.edit-site-header__toolbar {
+.edit-site-header-edit-mode__toolbar {
 	display: flex;
 	align-items: center;
 	padding-left: $grid-unit-10;
@@ -76,7 +76,7 @@ body.is-navigation-sidebar-open {
 		padding-right: $grid-unit-10;
 	}
 
-	.edit-site-header-toolbar__inserter-toggle {
+	.edit-site-header-edit-mode__inserter-toggle {
 		margin-right: $grid-unit-10;
 		min-width: $grid-unit-40;
 		width: $grid-unit-40;
@@ -96,21 +96,11 @@ body.is-navigation-sidebar-open {
 	}
 }
 
-.edit-site-header__toolbar-switchers {
-	align-items: center;
-	display: flex;
-}
-
-.edit-site-header__toolbar-switchers-separator {
-	margin: 0 -6px 0;
-}
-
-
 /**
  * Buttons on the right side
  */
 
-.edit-site-header__actions {
+.edit-site-header-edit-mode__actions {
 	display: inline-flex;
 	align-items: center;
 	padding-right: $grid-unit-05;
@@ -135,7 +125,7 @@ body.is-navigation-sidebar-open {
 	}
 }
 
-.edit-site-header__actions__preview-options {
+.edit-site-header-edit-mode__preview-options {
 	opacity: 1;
 	transition: opacity 0.3s;
 
@@ -144,32 +134,14 @@ body.is-navigation-sidebar-open {
 	}
 }
 
-.edit-site-header__actions-more-menu {
-	margin-left: -4px;
-
-	// The padding and margin of the more menu is intentionally non-standard.
-	.components-icon-button {
-		padding: 8px 2px;
-		width: auto;
-	}
-
-	@include break-small() {
-		margin-left: 4px;
-
-		.components-icon-button {
-			padding: 8px 4px;
-		}
-	}
-}
-
-.edit-site-header_start {
+.edit-site-header-edit-mode__start {
 	display: flex;
 	border: none;
 
 	// The Toolbar component adds different styles to buttons, so we reset them
 	// here to the original button styles
-	.edit-site-header__toolbar > .components-button.has-icon,
-	.edit-site-header__toolbar > .components-dropdown > .components-button.has-icon {
+	.edit-site-header-edit-mode__toolbar > .components-button.has-icon,
+	.edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
 		height: $button-size;
 		min-width: $button-size;
 		padding: 6px;
@@ -188,7 +160,7 @@ body.is-navigation-sidebar-open {
 		}
 	}
 
-	.edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-icon {
+	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
 		margin-right: $grid-unit-10;
 		// Special dimensions for this button.
 		min-width: 32px;
@@ -197,17 +169,15 @@ body.is-navigation-sidebar-open {
 		padding: 0;
 	}
 
-	.edit-site-header__toolbar > .edit-site-header-toolbar__inserter-toggle.has-text.has-icon {
+	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-text.has-icon {
 		width: auto;
 		padding: 0 $grid-unit-10;
 	}
-
-
 }
 
 // Button text label styles
 
-.show-icon-labels .edit-site-header {
+.show-icon-labels .edit-site-header-edit-mode {
 	.components-button.has-icon {
 		width: auto;
 
@@ -242,13 +212,13 @@ body.is-navigation-sidebar-open {
 		}
 	}
 
-	.edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
+	.edit-site-header-edit-mode__inserter-toggle.edit-site-header-edit-mode__inserter-toggle,
 	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {
 		height: 36px;
 		padding: 0 $grid-unit-10;
 	}
 
-	.edit-site-header_start .edit-site-header__toolbar > * + * {
+	.edit-site-header__start .edit-site-header__toolbar > * + * {
 		margin-left: $grid-unit-10;
 	}
 }

package/src/components/keyboard-shortcut-help-modal/shortcut.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -26,20 +21,22 @@ function KeyCombination( { keyCombination, forceAriaLabel } ) {
 			className="edit-site-keyboard-shortcut-help-modal__shortcut-key-combination"
 			aria-label={ forceAriaLabel || ariaLabel }
 		>
-			{ castArray( shortcut ).map( ( character, index ) => {
-				if ( character === '+' ) {
-					return <Fragment key={ index }>{ character }</Fragment>;
-				}
+			{ ( Array.isArray( shortcut ) ? shortcut : [ shortcut ] ).map(
+				( character, index ) => {
+					if ( character === '+' ) {
+						return <Fragment key={ index }>{ character }</Fragment>;
+					}
 
-				return (
-					<kbd
-						key={ index }
-						className="edit-site-keyboard-shortcut-help-modal__shortcut-key"
-					>
-						{ character }
-					</kbd>
-				);
-			} ) }
+					return (
+						<kbd
+							key={ index }
+							className="edit-site-keyboard-shortcut-help-modal__shortcut-key"
+						>
+							{ character }
+						</kbd>
+					);
+				}
+			) }
 		</kbd>
 	);
 }

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

@@ -15,10 +15,10 @@ import { store as interfaceStore } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { SIDEBAR_BLOCK } from '../sidebar/constants';
+import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 import { STORE_NAME } from '../../store/constants';
 
-function KeyboardShortcuts( { openEntitiesSavedStates } ) {
+function KeyboardShortcuts() {
 	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 		useSelect( coreStore );
 	const { getEditorMode } = useSelect( editSiteStore );
@@ -38,6 +38,7 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		useDispatch( editSiteStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();
@@ -49,7 +50,7 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		);
 
 		if ( ! isSaving && isDirty ) {
-			openEntitiesSavedStates();
+			setIsSaveViewOpened( true );
 		}
 	} );
 

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

@@ -28,7 +28,6 @@ import {
  * Internal dependencies
  */
 import { useLink } from '../../routes/link';
-import MainDashboardButton from '../../main-dashboard-button';
 import { store as editSiteStore } from '../../../store';
 
 const SITE_EDITOR_KEY = 'site-editor';
@@ -39,24 +38,33 @@ function NavLink( { params, replace, ...props } ) {
 	return <NavigationItem { ...linkProps } { ...props } />;
 }
 
-const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
-	const { homeTemplate, isNavigationOpen, isTemplatePartsMode, siteTitle } =
-		useSelect( ( select ) => {
-			const { getEntityRecord } = select( coreDataStore );
-			const { getSettings, isNavigationOpened } = select( editSiteStore );
+const NavigationPanel = ( { activeItem } ) => {
+	const {
+		homeTemplate,
+		isNavigationOpen,
+		isTemplatePartsMode,
+		siteTitle,
+		dashboardLink,
+	} = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreDataStore );
+		const { getSettings, isNavigationOpened } = select( editSiteStore );
 
-			const siteData =
-				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
-			const { supportsTemplatePartsMode, __unstableHomeTemplate } =
-				getSettings();
+		const siteData =
+			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+		const {
+			supportsTemplatePartsMode,
+			__unstableHomeTemplate,
+			__experimentalDashboardLink,
+		} = getSettings();
 
-			return {
-				siteTitle: siteData.name,
-				homeTemplate: __unstableHomeTemplate,
-				isNavigationOpen: isNavigationOpened(),
-				isTemplatePartsMode: !! supportsTemplatePartsMode,
-			};
-		}, [] );
+		return {
+			siteTitle: siteData.name,
+			homeTemplate: __unstableHomeTemplate,
+			dashboardLink: __experimentalDashboardLink,
+			isNavigationOpen: isNavigationOpened(),
+			isTemplatePartsMode: !! supportsTemplatePartsMode,
+		};
+	}, [] );
 	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	const closeOnEscape = ( event ) => {
@@ -82,13 +90,11 @@ const NavigationPanel = ( { activeItem = SITE_EDITOR_KEY } ) => {
 				</div>
 				<div className="edit-site-navigation-panel__scroll-container">
 					<Navigation activeItem={ activeItem }>
-						<MainDashboardButton.Slot>
-							<NavigationBackButton
-								backButtonLabel={ __( 'Dashboard' ) }
-								className="edit-site-navigation-panel__back-to-dashboard"
-								href="index.php"
-							/>
-						</MainDashboardButton.Slot>
+						<NavigationBackButton
+							backButtonLabel={ __( 'Dashboard' ) }
+							className="edit-site-navigation-panel__back-to-dashboard"
+							href={ dashboardLink ?? 'index.php' }
+						/>
 
 						<NavigationMenu>
 							<NavigationGroup title={ __( 'Editor' ) }>

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

@@ -0,0 +1,41 @@
+// 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>
+`;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -38,12 +38,11 @@ describe( 'NavigationToggle', () => {
 				} ) );
 			} );
 
-			const { container } = render( <NavigationToggle /> );
-			const siteIcon = container.querySelector(
-				'.edit-site-navigation-toggle__site-icon'
-			);
+			render( <NavigationToggle /> );
+
+			const siteIcon = screen.getByAltText( 'Site Icon' );
 
-			expect( siteIcon ).toBeTruthy();
+			expect( siteIcon ).toBeVisible();
 		} );
 
 		it( 'should display a default site icon if no user uploaded site icon exists', () => {
@@ -59,13 +58,12 @@ describe( 'NavigationToggle', () => {
 			} );
 
 			const { container } = render( <NavigationToggle /> );
-			const siteIcon = container.querySelector(
-				'.edit-site-navigation-toggle__site-icon'
-			);
-			const defaultIcon = container.querySelector( 'svg' );
 
-			expect( siteIcon ).toBeFalsy();
-			expect( defaultIcon ).toBeTruthy();
+			expect(
+				screen.queryByAltText( 'Site Icon' )
+			).not.toBeInTheDocument();
+
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 } );

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

@@ -1,31 +1,31 @@
-/**
- * External dependencies
- */
-import { some } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
-export default function SaveButton( {
-	openEntitiesSavedStates,
-	isEntitiesSavedStatesOpen,
-} ) {
-	const { isDirty, isSaving } = useSelect( ( select ) => {
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function SaveButton() {
+	const { isDirty, isSaving, isSaveViewOpen } = useSelect( ( select ) => {
 		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
 			select( coreStore );
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const { isSaveViewOpened } = select( editSiteStore );
 		return {
 			isDirty: dirtyEntityRecords.length > 0,
-			isSaving: some( dirtyEntityRecords, ( record ) =>
+			isSaving: dirtyEntityRecords.some( ( record ) =>
 				isSavingEntityRecord( record.kind, record.name, record.key )
 			),
+			isSaveViewOpen: isSaveViewOpened(),
 		};
 	}, [] );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
 	const disabled = ! isDirty || isSaving;
 
@@ -34,9 +34,9 @@ export default function SaveButton( {
 			variant="primary"
 			className="edit-site-save-button__button"
 			aria-disabled={ disabled }
-			aria-expanded={ isEntitiesSavedStatesOpen }
+			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
-			onClick={ disabled ? undefined : openEntitiesSavedStates }
+			onClick={ disabled ? undefined : () => setIsSaveViewOpened( true ) }
 		>
 			{ __( 'Save' ) }
 		</Button>

package/src/components/{sidebar → sidebar-edit-mode}/index.js

@@ -81,7 +81,7 @@ export function SidebarComplementaryAreaFills() {
 				icon={ cog }
 				closeLabel={ __( 'Close settings sidebar' ) }
 				header={ <SettingsHeader sidebarName={ sidebarName } /> }
-				headerClassName="edit-site-sidebar__panel-tabs"
+				headerClassName="edit-site-sidebar-edit-mode__panel-tabs"
 			>
 				{ sidebarName === SIDEBAR_TEMPLATE && (
 					<PanelBody>

package/src/components/{sidebar → sidebar-edit-mode}/plugin-sidebar/index.js

@@ -83,7 +83,7 @@ export default function PluginSidebarEditSite( { className, ...props } ) {
 	return (
 		<ComplementaryArea
 			panelClassName={ className }
-			className="edit-site-sidebar"
+			className="edit-site-sidebar-edit-mode"
 			scope="core/edit-site"
 			showIconLabels={ showIconLabels }
 			{ ...props }

package/src/components/{sidebar → sidebar-edit-mode}/settings-header/index.js

@@ -39,7 +39,7 @@ const SettingsHeader = ( { sidebarName } ) => {
 			<li>
 				<Button
 					onClick={ openTemplateSettings }
-					className={ `edit-site-sidebar__panel-tab ${ templateActiveClass }` }
+					className={ `edit-site-sidebar-edit-mode__panel-tab ${ templateActiveClass }` }
 					aria-label={ templateAriaLabel }
 					// translators: Data label for the Template Settings Sidebar tab.
 					data-label={ __( 'Template' ) }
@@ -53,7 +53,7 @@ const SettingsHeader = ( { sidebarName } ) => {
 			<li>
 				<Button
 					onClick={ openBlockSettings }
-					className={ `edit-site-sidebar__panel-tab ${ blockActiveClass }` }
+					className={ `edit-site-sidebar-edit-mode__panel-tab ${ blockActiveClass }` }
 					aria-label={ blockAriaLabel }
 					// translators: Data label for the Block Settings Sidebar tab.
 					data-label={ __( 'Block' ) }

package/src/components/{sidebar → sidebar-edit-mode}/settings-header/style.scss

@@ -1,4 +1,4 @@
-.components-panel__header.edit-site-sidebar__panel-tabs {
+.components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
 	justify-content: flex-start;
 	padding-left: 0;
 	padding-right: $grid-unit-20;
@@ -25,7 +25,7 @@
 	}
 }
 
-.components-button.edit-site-sidebar__panel-tab {
+.components-button.edit-site-sidebar-edit-mode__panel-tab {
 	border-radius: 0;
 	height: $grid-unit-60;
 	background: transparent;

package/src/components/{sidebar → sidebar-edit-mode}/style.scss

@@ -1,4 +1,4 @@
-.edit-site-sidebar {
+.edit-site-sidebar-edit-mode {
 	width: $sidebar-width;
 
 	> .components-panel {

package/src/index.js

@@ -45,7 +45,9 @@ export function reinitializeEditor( target, settings ) {
 				message={ __(
 					'The editor is unable to find a block template for the homepage.'
 				) }
-				dashboardLink="index.php"
+				dashboardLink={
+					settings.__experimentalDashboardLink ?? 'index.php'
+				}
 			/>,
 			target
 		);
@@ -132,7 +134,13 @@ export function reinitializeEditor( target, settings ) {
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render( <EditSiteApp reboot={ reboot } />, target );
+	render(
+		<EditSiteApp
+			reboot={ reboot }
+			homeTemplate={ settings.__unstableHomeTemplate }
+		/>,
+		target
+	);
 }
 
 /**
@@ -159,8 +167,7 @@ export function initializeEditor( id, settings ) {
 	reinitializeEditor( target, settings );
 }
 
-export { default as __experimentalMainDashboardButton } from './components/main-dashboard-button';
 export { default as __experimentalNavigationToggle } from './components/navigation-sidebar/navigation-toggle';
-export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
-export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
-export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item';
+export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar';
+export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';
+export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';

package/src/store/actions.js

@@ -320,6 +320,19 @@ export function setIsListViewOpened( isOpen ) {
 	};
 }
 
+/**
+ * Sets whether the save view panel should be open.
+ *
+ * @param {boolean} isOpen If true, opens the save view. If false, closes it.
+ *                         It does not toggle the state, but sets it directly.
+ */
+export function setIsSaveViewOpened( isOpen ) {
+	return {
+		type: 'SET_IS_SAVE_VIEW_OPENED',
+		isOpen,
+	};
+}
+
 /**
  * Reverts a template to its original theme-provided file.
  *

package/src/store/reducer.js

@@ -183,6 +183,24 @@ export function listViewPanel( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer to set the save view panel open or closed.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ */
+export function saveViewPanel( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN_NAVIGATION_PANEL_TO_MENU':
+			return false;
+		case 'SET_IS_NAVIGATION_PANEL_OPENED':
+			return action.isOpen ? false : state;
+		case 'SET_IS_SAVE_VIEW_OPENED':
+			return action.isOpen;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	deviceType,
 	settings,
@@ -191,4 +209,5 @@ export default combineReducers( {
 	navigationPanel,
 	blockInserterPanel,
 	listViewPanel,
+	saveViewPanel,
 } );