Site Editor: Add template switcher to navigation panel (#25615)

WordPress · Sep 29, 2020 · d3b04b8 · d3b04b8
1 parent 4c04c6e
commit d3b04b8
Show file tree

Hide file tree

Showing 15 changed files with 398 additions and 397 deletions.
diff --git a/packages/e2e-tests/experimental-features.js b/packages/e2e-tests/experimental-features.js
@@ -37,3 +37,14 @@ export function useExperimentalFeatures( features ) {
  beforeAll( () => setExperimentalFeaturesState( features, true ) );
  afterAll( () => setExperimentalFeaturesState( features, false ) );
 }
+
+export const openNavigation = async () => {
+ const isOpen = !! ( await page.$(
+ '.edit-site-navigation-toggle.is-open'
+ ) );
+
+ if ( ! isOpen ) {
+ await page.click( '.edit-site-navigation-toggle__button' );
+ await page.waitForSelector( '.edit-site-navigation-panel' );
+ }
+};
diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -18,7 +18,10 @@ import { addQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { useExperimentalFeatures } from '../../experimental-features';
+import {
+ useExperimentalFeatures,
+ openNavigation,
+} from '../../experimental-features';
 
 const visitSiteEditor = async () => {
  const query = addQueryArgs( '', {
@@ -31,19 +34,11 @@ const visitSiteEditor = async () => {
  );
 };
 
-const openTemplateDropdown = async () => {
- // Open the dropdown menu.
- const templateDropdown =
- 'button.components-dropdown-menu__toggle[aria-label="Switch Template"]';
- await page.click( templateDropdown );
- await page.waitForSelector( '.edit-site-template-switcher__popover' );
-};
-
 const getTemplateDropdownElement = async ( itemName ) => {
- await openTemplateDropdown();
- const [ item ] = await page.$x(
-  `//div[contains(@class, "edit-site-template-switcher__popover")]//button[contains(., "${ itemName }")]`
- );
+ await openNavigation();
+ const selector = `//div[contains(@class, "edit-site-navigation-panel")]//button[contains(., "${ itemName }")]`;
+ await page.waitForXPath( selector );
+ const [ item ] = await page.$x( selector );
  return item;
 };
 

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
@@ -13,7 +13,10 @@ import { addQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { useExperimentalFeatures } from '../../experimental-features';
+import {
+ useExperimentalFeatures,
+ openNavigation,
+} from '../../experimental-features';
 
 describe( 'Multi-entity save flow', () => {
  // Selectors - usable between Post/Site editors.
@@ -222,8 +225,6 @@ describe( 'Multi-entity save flow', () => {
  const saveSiteSelector = '.edit-site-save-button__button';
  const activeSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=false]`;
  const disabledSaveSiteSelector = `${ saveSiteSelector }[aria-disabled=true]`;
- const templateDropdownSelector =
- '.components-dropdown-menu__toggle[aria-label="Switch Template"]';
  const saveA11ySelector = '.edit-site-editor__toggle-save-panel-button';
 
  it( 'Should be enabled after edits', async () => {
@@ -234,7 +235,7 @@ describe( 'Multi-entity save flow', () => {
  await visitAdminPage( 'admin.php', query );
 
  // Ensure we are on 'front-page' demo template.
- await page.click( templateDropdownSelector );
+ await openNavigation();
  const demoTemplateButton = await page.waitForXPath(
  demoTemplateSelector
  );

diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js
@@ -13,7 +13,10 @@ import { addQueryArgs } from '@wordpress/url';
 /**
  * Internal dependencies
  */
-import { useExperimentalFeatures } from '../../experimental-features';
+import {
+ useExperimentalFeatures,
+ openNavigation,
+} from '../../experimental-features';
 
 describe( 'Template Part', () => {
  useExperimentalFeatures( [
@@ -43,9 +46,7 @@ describe( 'Template Part', () => {
 
  it( 'Should load customizations when in a template even if only the slug and theme attributes are set.', async () => {
  // Switch to editing the header template part.
- await page.click(
- '.components-dropdown-menu__toggle[aria-label="Switch Template"]'
- );
+ await openNavigation();
  const switchToHeaderTemplatePartButton = await page.waitForXPath(
  '//button[contains(text(), "header")]'
  );
@@ -63,9 +64,7 @@ describe( 'Template Part', () => {
  );
 
  // Switch back to the front page template.
- await page.click(
- '.components-dropdown-menu__toggle[aria-label="Switch Template"]'
- );
+ await openNavigation();
  const [ switchToFrontPageTemplateButton ] = await page.$x(
  '//button[contains(text(), "front-page")]'
  );

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -22,7 +22,6 @@ import { Button } from '@wordpress/components';
  */
 import MoreMenu from './more-menu';
 import PageSwitcher from '../page-switcher';
-import TemplateSwitcher from '../template-switcher';
 import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
@@ -40,9 +39,6 @@ export default function Header( {
  deviceType,
  hasFixedToolbar,
  template,
- templateId,
- templatePartId,
- templateType,
  page,
  showOnFront,
  } = useSelect( ( select ) => {
@@ -76,10 +72,6 @@ export default function Header( {
 
  const {
  __experimentalSetPreviewDeviceType: setPreviewDeviceType,
- setTemplate,
- addTemplate,
- removeTemplate,
- setTemplatePart,
  setPage,
  } = useDispatch( 'core/edit-site' );
 
@@ -123,21 +115,6 @@ export default function Header( {
  activePage={ page }
  onActivePageChange={ setPage }
  />
- <div className="edit-site-header__toolbar-switchers-separator">
- /
- </div>
- <TemplateSwitcher
- page={ page }
- activeId={ templateId }
- activeTemplatePartId={ templatePartId }
- isTemplatePart={
- templateType === 'wp_template_part'
- }
- onActiveIdChange={ setTemplate }
- onActiveTemplatePartIdChange={ setTemplatePart }
- onAddTemplate={ addTemplate }
- onRemoveTemplate={ removeTemplate }
- />
  </div>
  </div>
  </div>

diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js
@@ -1,60 +1,80 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import {
  __experimentalNavigation as Navigation,
- __experimentalNavigationBackButton as NavigationBackButton,
- __experimentalNavigationGroup as NavigationGroup,
- __experimentalNavigationItem as NavigationItem,
  __experimentalNavigationMenu as NavigationMenu,
+ __experimentalNavigationBackButton as NavigationBackButton,
 } from '@wordpress/components';
-import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
-import { BlockPreview } from '@wordpress/block-editor';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import TemplateSwitcher from './template-switcher';
+
 const NavigationPanel = () => {
- const [ showPreview, setShowPreview ] = useState( false );
  const ref = useRef();
 
  useEffect( () => {
  ref.current.focus();
  }, [ ref ] );
 
+ const { templateId, templatePartId, templateType, page } = useSelect(
+ ( select ) => {
+ const {
+ getTemplateId,
+ getTemplatePartId,
+ getTemplateType,
+ getPage,
+ } = select( 'core/edit-site' );
+
+ return {
+ templateId: getTemplateId(),
+ templatePartId: getTemplatePartId(),
+ templateType: getTemplateType(),
+ page: getPage(),
+ };
+ },
+ []
+ );
+
+ const {
+ setTemplate,
+ addTemplate,
+ removeTemplate,
+ setTemplatePart,
+ } = useDispatch( 'core/edit-site' );
+
  return (
  <div className="edit-site-navigation-panel">
- <Navigation>
+ <Navigation
+ activeItem={
+ 'wp_template' === templateType
+ ? `template-${ templateId }`
+ : `template-part-${ templatePartId }`
+ }
+ >
  <NavigationBackButton
  backButtonLabel={ __( 'Dashboard' ) }
  className="edit-site-navigation-panel__back-to-dashboard"
  href="index.php"
  ref={ ref }
  />
+
  <NavigationMenu title="Home">
- <NavigationGroup title="Example group">
- <NavigationItem
-  item="item-preview"
-  title="Hover to show preview"
-  onMouseEnter={ () => setShowPreview( true ) }
-  onMouseLeave={ () => setShowPreview( false ) }
- />
- </NavigationGroup>
+ <TemplateSwitcher
+ page={ page }
+ activeId={ templateId }
+ onActiveIdChange={ setTemplate }
+ onActiveTemplatePartIdChange={ setTemplatePart }
+ onAddTemplate={ addTemplate }
+ onRemoveTemplate={ removeTemplate }
+ />
  </NavigationMenu>
  </Navigation>
-
- { showPreview && (
- <div className="edit-site-navigation-panel__preview">
- <BlockPreview
- blocks={ [
- getBlockFromExample(
- 'core/paragraph',
- getBlockType( 'core/paragraph' ).example
- ),
- ] }
- viewportWidth={ 1200 }
- />
- </div>
- ) }
  </div>
  );
 };

diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss
@@ -17,6 +17,29 @@
  .components-navigation {
  height: 100%;
  }
+
+ .components-navigation__item {
+ position: relative;
+
+ .edit-site-template-switcher__label-home-icon svg path {
+ color: inherit;
+ }
+
+ &.is-active {
+ .edit-site-template-switcher__label-customized-dot {
+ background: #fff;
+ }
+ }
+ }
+
+ .edit-site-template-switcher__label-home-icon {
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .edit-site-template-switcher__label-customized-dot {
+ right: 8px;
+ }
 }
 
 .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary {
@@ -44,6 +67,7 @@
  position: absolute;
  top: $grid-unit-15;
  left: calc(100% + #{$grid-unit-15});
+ color: $gray-900;
 
  @include break-medium {
  display: block;