Preferences modal redesign (#28329)

* new tabbed preferences - web

* mobile using Navigation component

* small cleanup

* small refactor after the rebase

* addressed some first feedback

* remove Block Manager modal from options

* revert move of block manager

* fix more styles

* sync menus in large and small viewports

* add + update unit tests

* fix custom fields button width

* add togglePreferencesOption e2e util and fix some tests

* updated e2e utils

* Polish

* Fix colors.

* Actually fix colors.

* add keys to fix animation because of React reconciliation

* update snapshots

* add key prop to TabPanel

Co-authored-by: jasmussen <[email protected]>

packages/components/src/tab-panel/index.js

@@ -90,6 +90,7 @@ export default function TabPanel( {
 			</NavigableMenu>
 			{ selectedTab && (
 				<div
+					key={ selectedId }
 					aria-labelledby={ selectedId }
 					role="tabpanel"
 					id={ `${ selectedId }-view` }

packages/components/src/tab-panel/style.scss

@@ -1,6 +1,10 @@
 .components-tab-panel__tabs {
 	display: flex;
 	align-items: stretch;
+	flex-direction: row;
+	&[aria-orientation="vertical"] {
+		flex-direction: column;
+	}
 }
 
 .components-tab-panel__tabs-item {

packages/e2e-test-utils/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### Breaking Changes
 
+-   `toggleScreenOption` util has been removed, since `Preferences` modal was redesigned. Use `togglePreferencesOption` instead ([#28329](https://github.com/WordPress/gutenberg/pull/28329)).
+
 -   Increase the minimum Node.js version to 12 ([#27934](https://github.com/WordPress/gutenberg/pull/27934)).
 
 ## 4.16.0 (2020-12-17)

packages/e2e-test-utils/README.md

@@ -653,14 +653,15 @@ Toggles the More Menu.
 
 Undocumented declaration.
 
-<a name="toggleScreenOption" href="#toggleScreenOption">#</a> **toggleScreenOption**
+<a name="togglePreferencesOption" href="#togglePreferencesOption">#</a> **togglePreferencesOption**
 
-Toggles the screen option with the given label.
+Toggles a preference option with the given tab label and the option label.
 
 _Parameters_
 
--   _label_ `string`: The label of the screen option, e.g. 'Show Tips'.
--   _shouldBeChecked_ `?boolean`: If true, turns the option on. If false, off. If undefined, the option will be toggled.
+-   _tabLabel_ `string`: The preferences tab label to click.
+-   _optionLabel_ `string`: The option label to search the button for.
+-   _shouldBeChecked_ `[boolean]`: If true, turns the option on. If false, off. If not provided, the option will be toggled.
 
 <a name="transformBlockTo" href="#transformBlockTo">#</a> **transformBlockTo**
 

packages/e2e-test-utils/src/disable-pre-publish-checks.js

@@ -1,13 +1,17 @@
 /**
  * Internal dependencies
  */
-import { toggleScreenOption } from './toggle-screen-option';
+import { togglePreferencesOption } from './toggle-preferences-option';
 import { toggleMoreMenu } from './toggle-more-menu';
 
 /**
  * Disables Pre-publish checks.
  */
 export async function disablePrePublishChecks() {
-	await toggleScreenOption( 'Include pre-publish checklist', false );
+	await togglePreferencesOption(
+		'General',
+		'Include pre-publish checklist',
+		false
+	);
 	await toggleMoreMenu();
 }

packages/e2e-test-utils/src/enable-pre-publish-checks.js

@@ -1,13 +1,17 @@
 /**
  * Internal dependencies
  */
-import { toggleScreenOption } from './toggle-screen-option';
+import { togglePreferencesOption } from './toggle-preferences-option';
 import { toggleMoreMenu } from './toggle-more-menu';
 
 /**
  * Enables Pre-publish checks.
  */
 export async function enablePrePublishChecks() {
-	await toggleScreenOption( 'Include pre-publish checklist', true );
+	await togglePreferencesOption(
+		'General',
+		'Include pre-publish checklist',
+		true
+	);
 	await toggleMoreMenu();
 }

packages/e2e-test-utils/src/index.js

@@ -70,7 +70,7 @@ export { switchUserToTest } from './switch-user-to-test';
 export { isThemeInstalled } from './theme-installed';
 export { toggleMoreMenu } from './toggle-more-menu';
 export { toggleOfflineMode, isOfflineMode } from './offline-mode';
-export { toggleScreenOption } from './toggle-screen-option';
+export { togglePreferencesOption } from './toggle-preferences-option';
 export { transformBlockTo } from './transform-block-to';
 export { uninstallPlugin } from './uninstall-plugin';
 export { visitAdminPage } from './visit-admin-page';

packages/e2e-test-utils/src/toggle-preferences-option.js

@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import { clickOnCloseModalButton } from './click-on-close-modal-button';
+import { clickOnMoreMenuItem } from './click-on-more-menu-item';
+
+/**
+ * Toggles a preference option with the given tab label and the option label.
+ *
+ * @param {string} tabLabel The preferences tab label to click.
+ * @param {string} optionLabel The option label to search the button for.
+ * @param {boolean} [shouldBeChecked] If true, turns the option on. If false, off. If not provided, the option will be toggled.
+ */
+export async function togglePreferencesOption(
+	tabLabel,
+	optionLabel,
+	shouldBeChecked
+) {
+	await clickOnMoreMenuItem( 'Preferences' );
+	const [ tabHandle ] = await page.$x(
+		`//button[contains(text(), "${ tabLabel }")]`
+	);
+	await tabHandle.click();
+	const [ optionHandle ] = await page.$x(
+		`//label[contains(text(), "${ optionLabel }")]`
+	);
+	const isChecked = await page.evaluate(
+		( element ) => element.control.checked,
+		optionHandle
+	);
+	if ( isChecked !== shouldBeChecked ) {
+		await optionHandle.click();
+	}
+
+	await clickOnCloseModalButton();
+}

packages/e2e-tests/specs/editor/plugins/block-variations.js

@@ -9,7 +9,7 @@ import {
 	searchForBlock,
 	pressKeyWithModifier,
 	openDocumentSettingsSidebar,
-	toggleScreenOption,
+	togglePreferencesOption,
 	toggleMoreMenu,
 } from '@wordpress/e2e-test-utils';
 
@@ -110,12 +110,20 @@ describe( 'Block variations', () => {
 	// @see @wordpres/block-editor/src/components/use-block-display-information (`useBlockDisplayInformation` hook).
 	describe( 'testing block display information with matching variations', () => {
 		beforeEach( async () => {
-			await toggleScreenOption( 'Display block breadcrumbs', true );
+			await togglePreferencesOption(
+				'General',
+				'Display block breadcrumbs',
+				true
+			);
 			await toggleMoreMenu();
 		} );
 
 		afterEach( async () => {
-			await toggleScreenOption( 'Display block breadcrumbs', false );
+			await togglePreferencesOption(
+				'General',
+				'Display block breadcrumbs',
+				false
+			);
 			await toggleMoreMenu();
 		} );
 

packages/e2e-tests/specs/editor/various/preview.test.js

@@ -46,16 +46,21 @@ async function waitForPreviewNavigation( previewPage ) {
 /**
  * Enables or disables the custom fields option.
  *
- * Note that this is implemented separately from the `toggleScreenOptions`
+ * Note that this is implemented separately from the `togglePreferencesOption`
  * utility, since the custom fields option triggers a page reload and requires
  * extra async logic to wait for navigation to complete.
  *
  * @param {boolean} shouldBeChecked If true, turns the option on. If false, off.
  */
 async function toggleCustomFieldsOption( shouldBeChecked ) {
-	const checkboxXPath =
-		'//*[contains(@class, "edit-post-preferences-modal")]//label[contains(text(), "Custom fields")]';
+	const baseXPath = '//*[contains(@class, "edit-post-preferences-modal")]';
+	const paneslXPath = `${ baseXPath }//button[contains(text(), "Panels")]`;
+	const checkboxXPath = `${ baseXPath }//label[contains(text(), "Custom fields")]`;
 	await clickOnMoreMenuItem( 'Preferences' );
+	await page.waitForXPath( paneslXPath );
+	const [ tabHandle ] = await page.$x( paneslXPath );
+	await tabHandle.click();
+
 	await page.waitForXPath( checkboxXPath );
 	const [ checkboxHandle ] = await page.$x( checkboxXPath );
 

packages/edit-post/src/components/header/preferences-menu-item/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 
@@ -10,7 +10,8 @@ import { MenuItem } from '@wordpress/components';
  */
 import { store as editPostStore } from '../../../store';
 
-export function PreferencesMenuItem( { openModal } ) {
+export default function PreferencesMenuItem() {
+	const { openModal } = useDispatch( editPostStore );
 	return (
 		<MenuItem
 			onClick={ () => {
@@ -21,11 +22,3 @@ export function PreferencesMenuItem( { openModal } ) {
 		</MenuItem>
 	);
 }
-
-export default withDispatch( ( dispatch ) => {
-	const { openModal } = dispatch( editPostStore );
-
-	return {
-		openModal,
-	};
-} )( PreferencesMenuItem );

packages/edit-post/src/components/manage-blocks-modal/manager.js

@@ -27,9 +27,9 @@ function BlockManager( {
 	isMatchingSearchTerm,
 	numberOfHiddenBlocks,
 } ) {
-	// Filtering occurs here (as opposed to `withSelect`) to avoid wasted
-	// wasted renders by consequence of `Array#filter` producing a new
-	// value reference on each call.
+	// Filtering occurs here (as opposed to `withSelect`) to avoid
+	// wasted renders by consequence of `Array#filter` producing
+	// a new value reference on each call.
 	blockTypes = blockTypes.filter(
 		( blockType ) =>
 			hasBlockSupport( blockType, 'inserter', true ) &&