diff --git a/packages/e2e-test-utils/src/disable-pre-publish-checks.js b/packages/e2e-test-utils/src/disable-pre-publish-checks.js
index 2c12a0aaaa99e4..25660e48c9555d 100644
--- a/packages/e2e-test-utils/src/disable-pre-publish-checks.js
+++ b/packages/e2e-test-utils/src/disable-pre-publish-checks.js
@@ -10,7 +10,7 @@ import { toggleMoreMenu } from './toggle-more-menu';
export async function disablePrePublishChecks() {
await togglePreferencesOption(
'General',
- 'Include pre-publish checklist',
+ 'Enable pre-publish flow',
false
);
await toggleMoreMenu( 'close' );
diff --git a/packages/e2e-test-utils/src/enable-pre-publish-checks.js b/packages/e2e-test-utils/src/enable-pre-publish-checks.js
index a9c8b572302b15..5a65ba6fc1353d 100644
--- a/packages/e2e-test-utils/src/enable-pre-publish-checks.js
+++ b/packages/e2e-test-utils/src/enable-pre-publish-checks.js
@@ -8,10 +8,6 @@ import { toggleMoreMenu } from './toggle-more-menu';
* Enables Pre-publish checks.
*/
export async function enablePrePublishChecks() {
- await togglePreferencesOption(
- 'General',
- 'Include pre-publish checklist',
- true
- );
+ await togglePreferencesOption( 'General', 'Enable pre-publish flow', true );
await toggleMoreMenu( 'close' );
}
diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
index de6acf67c19834..26cc6bc5871650 100644
--- a/packages/edit-post/src/components/header/writing-menu/index.js
+++ b/packages/edit-post/src/components/header/writing-menu/index.js
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
import { MenuGroup } from '@wordpress/components';
import { __, _x } from '@wordpress/i18n';
import { useViewportMatch } from '@wordpress/compose';
@@ -10,7 +10,6 @@ import {
PreferenceToggleMenuItem,
store as preferencesStore,
} from '@wordpress/preferences';
-import { store as blockEditorStore } from '@wordpress/block-editor';
/**
* Internal dependencies
@@ -19,11 +18,6 @@ import { store as postEditorStore } from '../../../store';
function WritingMenu() {
const registry = useRegistry();
- const isDistractionFree = useSelect(
- ( select ) =>
- select( blockEditorStore ).getSettings().isDistractionFree,
- []
- );
const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
useDispatch( postEditorStore );
@@ -38,6 +32,10 @@ function WritingMenu() {
} );
};
+ const turnOffDistractionFree = () => {
+ setPreference( 'core/edit-post', 'distractionFree', false );
+ };
+
const isLargeViewport = useViewportMatch( 'medium' );
if ( ! isLargeViewport ) {
return null;
@@ -47,8 +45,8 @@ function WritingMenu() {
+
-
);
}
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index c08dda81f8e594..833a10fce13c33 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -76,6 +76,10 @@ export default function EditPostPreferencesModal() {
closeGeneralSidebar();
};
+ const turnOffDistractionFree = () => {
+ setPreference( 'core/edit-post', 'distractionFree', false );
+ };
+
const sections = useMemo(
() => [
{
@@ -86,49 +90,16 @@ export default function EditPostPreferencesModal() {
{ isLargeViewport && (
) }
-
-
-
-
-
+
-
{ showBlockBreadcrumbsOption && (
) }
-
- ),
- },
- {
- name: 'blocks',
- tabLabel: __( 'Blocks' ),
- content: (
- <>
-
-
-
-
-
-
-
-
- ),
- },
- {
- name: 'panels',
- tabLabel: __( 'Panels' ),
- content: (
- <>
@@ -242,12 +159,108 @@ export default function EditPostPreferencesModal() {
/>
-
+
+ ),
+ },
+ {
+ name: 'appearance',
+ tabLabel: __( 'Appearance' ),
+ content: (
+
+
+
+
+
+
+ ),
+ },
+ {
+ name: 'accessibility',
+ tabLabel: __( 'Accessibility' ),
+ content: (
+ <>
+
+
+
+
+
+
+
+ ),
+ },
+ {
+ name: 'blocks',
+ tabLabel: __( 'Blocks' ),
+ content: (
+ <>
+
+
+
+
+
+
),
},
diff --git a/packages/edit-post/src/components/preferences-modal/test/index.js b/packages/edit-post/src/components/preferences-modal/test/index.js
index a0946b478d8f23..01ac1a88fbe7d8 100644
--- a/packages/edit-post/src/components/preferences-modal/test/index.js
+++ b/packages/edit-post/src/components/preferences-modal/test/index.js
@@ -1,13 +1,12 @@
/**
* External dependencies
*/
-import { render, screen, within } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
/**
* Internal dependencies
@@ -19,56 +18,6 @@ jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
describe( 'EditPostPreferencesModal', () => {
- describe( 'should match snapshot when the modal is active', () => {
- afterEach( () => {
- useViewportMatch.mockClear();
- } );
- it( 'large viewports', async () => {
- useSelect.mockImplementation( () => [ true, true, false ] );
- useViewportMatch.mockImplementation( () => true );
- render( );
- const tabPanel = await screen.findByRole( 'tabpanel', {
- name: 'General',
- } );
-
- expect(
- within( tabPanel ).getByLabelText(
- 'Include pre-publish checklist'
- )
- ).toBeInTheDocument();
- } );
- it( 'small viewports', async () => {
- useSelect.mockImplementation( () => [ true, true, false ] );
- useViewportMatch.mockImplementation( () => false );
- render( );
-
- // The tabpanel is not rendered in small viewports.
- expect(
- screen.queryByRole( 'tabpanel', {
- name: 'General',
- } )
- ).not.toBeInTheDocument();
-
- const dialog = screen.getByRole( 'dialog', {
- name: 'Preferences',
- } );
-
- // Checkbox toggle controls are not rendered in small viewports.
- expect(
- within( dialog ).queryByLabelText(
- 'Include pre-publish checklist'
- )
- ).not.toBeInTheDocument();
-
- // Individual preference nav buttons are rendered in small viewports.
- expect(
- within( dialog ).getByRole( 'button', {
- name: 'General',
- } )
- ).toBeInTheDocument();
- } );
- } );
-
it( 'should not render when the modal is not active', () => {
useSelect.mockImplementation( () => [ false, false, false ] );
render( );
diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
index 2185258ad338a6..f6c47c1eb93bd9 100644
--- a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
import { displayShortcut } from '@wordpress/keycodes';
import { external } from '@wordpress/icons';
import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
@@ -36,14 +36,6 @@ import { store as siteEditorStore } from '../../../store';
export default function MoreMenu( { showIconLabels } ) {
const registry = useRegistry();
- const isDistractionFree = useSelect(
- ( select ) =>
- select( preferencesStore ).get(
- 'core/edit-site',
- 'distractionFree'
- ),
- []
- );
const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
useDispatch( siteEditorStore );
@@ -59,6 +51,10 @@ export default function MoreMenu( { showIconLabels } ) {
} );
};
+ const turnOffDistractionFree = () => {
+ setPreference( 'core/edit-site', 'distractionFree', false );
+ };
+
return (
<>
-
+
{
+ setPreference( 'core/edit-site', 'distractionFree', false );
+ };
+
const sections = useMemo( () => [
{
name: 'general',
tabLabel: __( 'General' ),
content: (
-
-
-
-
+
+
+
),
},
+ {
+ name: 'accessibility',
+ tabLabel: __( 'Accessibility' ),
+ content: (
+ <>
+
+
+
+
+
+
+
+ ),
+ },
] );
if ( ! isModalActive ) {
return null;
diff --git a/packages/interface/src/components/preferences-modal/README.md b/packages/interface/src/components/preferences-modal/README.md
index 96ecdf03dcc136..f873ccf297ec12 100644
--- a/packages/interface/src/components/preferences-modal/README.md
+++ b/packages/interface/src/components/preferences-modal/README.md
@@ -28,11 +28,11 @@ function MyEditorPreferencesModal() {
'Review settings, such as visibility and tags.'
) }
label={ __(
- 'Include pre-publish checklist'
+ 'Enable pre-publish flow'
) }
/>
- )
+ )
}
{
@@ -47,7 +47,7 @@ function MyEditorPreferencesModal() {
>
// Section content here
- )
+ )
}
]
diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js
index 0a5e421debedb7..05c4ea3b8e97e3 100644
--- a/test/e2e/specs/editor/various/a11y.spec.js
+++ b/test/e2e/specs/editor/various/a11y.spec.js
@@ -148,9 +148,6 @@ test.describe( 'a11y (@firefox, @webkit)', () => {
const blocksTab = preferencesModal.locator(
'role=tab[name="Blocks"i]'
);
- const panelsTab = preferencesModal.locator(
- 'role=tab[name="Panels"i]'
- );
// Check initial focus is on the modal dialog container.
await expect( preferencesModal ).toBeFocused();
@@ -204,13 +201,5 @@ test.describe( 'a11y (@firefox, @webkit)', () => {
await expect( closeButton ).toBeFocused();
await pageUtils.pressKeys( 'Shift+Tab' );
await expect( preferencesModalContent ).not.toBeFocused();
-
- // The Panels tab panel content is short and not scrollable.
- // Check it's not focusable.
- await clickAndFocusTab( panelsTab );
- await pageUtils.pressKeys( 'Shift+Tab' );
- await expect( closeButton ).toBeFocused();
- await pageUtils.pressKeys( 'Shift+Tab' );
- await expect( preferencesModalContent ).not.toBeFocused();
} );
} );
diff --git a/test/e2e/specs/editor/various/pref-modal.spec.js b/test/e2e/specs/editor/various/pref-modal.spec.js
new file mode 100644
index 00000000000000..f99c7d32a22a94
--- /dev/null
+++ b/test/e2e/specs/editor/various/pref-modal.spec.js
@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Preferences modal', () => {
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost();
+ } );
+
+ test.describe( 'Preferences modal adaps to viewport', () => {
+ test( 'Enable pre-publish flow is visible on desktop ', async ( {
+ page,
+ } ) => {
+ await page.click(
+ 'role=region[name="Editor top bar"i] >> role=button[name="Options"i]'
+ );
+ await page.click( 'role=menuitem[name="Preferences"i]' );
+
+ const prePublishToggle = page.locator(
+ 'role=checkbox[name="Enable pre-publish flow"i]'
+ );
+
+ await expect( prePublishToggle ).toBeVisible();
+ } );
+ } );
+ test.describe( 'Preferences modal adaps to viewport', () => {
+ test( 'Enable pre-publish flow is not visible on mobile ', async ( {
+ page,
+ } ) => {
+ await page.setViewportSize( { width: 500, height: 800 } );
+
+ await page.click(
+ 'role=region[name="Editor top bar"i] >> role=button[name="Options"i]'
+ );
+ await page.click( 'role=menuitem[name="Preferences"i]' );
+
+ const generalButton = page.locator(
+ 'role=button[name="General"i]'
+ );
+
+ const generalTabPanel = page.locator(
+ 'role=tabPanel[name="General"i]'
+ );
+
+ const prePublishToggle = page.locator(
+ 'role=checkbox[name="Enable pre-publish flow"i]'
+ );
+
+ await expect( generalButton ).toBeVisible();
+ await expect( generalTabPanel ).toBeHidden();
+ await expect( prePublishToggle ).toBeHidden();
+ } );
+ } );
+} );
diff --git a/test/e2e/specs/editor/various/preview.spec.js b/test/e2e/specs/editor/various/preview.spec.js
index 8a4ee5a6bd81d2..0666de1405fae1 100644
--- a/test/e2e/specs/editor/various/preview.spec.js
+++ b/test/e2e/specs/editor/various/preview.spec.js
@@ -335,9 +335,9 @@ class PreviewUtils {
);
await this.page.click( 'role=menuitem[name="Preferences"i]' );
- // Navigate to panels section.
+ // Navigate to general section.
await this.page.click(
- 'role=dialog[name="Preferences"i] >> role=tab[name="Panels"i]'
+ 'role=dialog[name="Preferences"i] >> role=tab[name="General"i]'
);
// Find custom fields checkbox.