Skip to content

Commit

Permalink
Update preferences organization (#56481)
Browse files Browse the repository at this point in the history 
* Preferences reorganization:

- Add "Appeareance" and "Accessibility" panels.
- Update sections across the panels (blocks->inserter).
- Improve copy for clarity and consistency.

* Add "top toolbar" setting to the appearance panel.

* Adjust copy of block breadcrumbs option

* Simplify distraction free setting copy

* Update site editor preferences panel to align

* Fix e2e test utilities

* Fix more tests

* make top toolbar and distraction free work in tandem across editors and preference UIs

* stub e2e for pref modal

* improved the test

* updated tests and moved a unit tests to an e2e because it tested what the user sees on screen

---------

Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com>
  • Loading branch information
@mtias @draganescu
mtias and draganescu authored Dec 4, 2023
1 parent 17db200 commit c1852f3
Show file tree
Hide file tree
Showing 11 changed files with 265 additions and 243 deletions.
2 changes: 1 addition & 1 deletion packages/e2e-test-utils/src/disable-pre-publish-checks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down
6 changes: 1 addition & 5 deletions packages/e2e-test-utils/src/enable-pre-publish-checks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
}
34 changes: 16 additions & 18 deletions packages/edit-post/src/components/header/writing-menu/index.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -10,7 +10,6 @@ import {
PreferenceToggleMenuItem,
store as preferencesStore,
} from '@wordpress/preferences';
import { store as blockEditorStore } from '@wordpress/block-editor';

/**
* Internal dependencies
Expand All @@ -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 );
Expand All @@ -38,6 +32,10 @@ function WritingMenu() {
} );
};

const turnOffDistractionFree = () => {
setPreference( 'core/edit-post', 'distractionFree', false );
};

const isLargeViewport = useViewportMatch( 'medium' );
if ( ! isLargeViewport ) {
return null;
Expand All @@ -47,15 +45,25 @@ function WritingMenu() {
<MenuGroup label={ _x( 'View', 'noun' ) }>
<PreferenceToggleMenuItem
scope="core/edit-post"
disabled={ isDistractionFree }
name="fixedToolbar"
onToggle={ turnOffDistractionFree }
label={ __( 'Top toolbar' ) }
info={ __(
'Access all block and document tools in a single place'
) }
messageActivated={ __( 'Top toolbar activated' ) }
messageDeactivated={ __( 'Top toolbar deactivated' ) }
/>
<PreferenceToggleMenuItem
scope="core/edit-post"
name="distractionFree"
onToggle={ toggleDistractionFree }
label={ __( 'Distraction free' ) }
info={ __( 'Write with calmness' ) }
messageActivated={ __( 'Distraction free mode activated' ) }
messageDeactivated={ __( 'Distraction free mode deactivated' ) }
shortcut={ displayShortcut.primaryShift( '\\' ) }
/>
<PreferenceToggleMenuItem
scope="core/edit-post"
name="focusMode"
Expand All @@ -73,16 +81,6 @@ function WritingMenu() {
messageDeactivated={ __( 'Fullscreen mode deactivated' ) }
shortcut={ displayShortcut.secondary( 'f' ) }
/>
<PreferenceToggleMenuItem
scope="core/edit-post"
name="distractionFree"
onToggle={ toggleDistractionFree }
label={ __( 'Distraction free' ) }
info={ __( 'Write with calmness' ) }
messageActivated={ __( 'Distraction free mode activated' ) }
messageDeactivated={ __( 'Distraction free mode deactivated' ) }
shortcut={ displayShortcut.primaryShift( '\\' ) }
/>
</MenuGroup>
);
}
Expand Down
205 changes: 109 additions & 96 deletions packages/edit-post/src/components/preferences-modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ export default function EditPostPreferencesModal() {
closeGeneralSidebar();
};

const turnOffDistractionFree = () => {
setPreference( 'core/edit-post', 'distractionFree', false );
};

const sections = useMemo(
() => [
{
Expand All @@ -86,124 +90,37 @@ export default function EditPostPreferencesModal() {
{ isLargeViewport && (
<PreferencesModalSection
title={ __( 'Publishing' ) }
description={ __(
'Change options related to publishing.'
) }
>
<EnablePublishSidebarOption
help={ __(
'Review settings, such as visibility and tags.'
) }
label={ __(
'Include pre-publish checklist'
) }
label={ __( 'Enable pre-publish flow' ) }
/>
</PreferencesModalSection>
) }

<PreferencesModalSection
title={ __( 'Appearance' ) }
description={ __(
'Customize options related to the block editor interface and editing flow.'
) }
>
<EnableFeature
featureName="distractionFree"
onToggle={ toggleDistractionFree }
help={ __(
'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
) }
label={ __( 'Distraction free' ) }
/>
<EnableFeature
featureName="focusMode"
help={ __(
'Highlights the current block and fades other content.'
) }
label={ __( 'Spotlight mode' ) }
/>
<EnableFeature
featureName="showIconLabels"
label={ __( 'Show button text labels' ) }
help={ __(
'Show text instead of icons on buttons.'
) }
/>
<PreferencesModalSection title={ __( 'Interface' ) }>
<EnableFeature
featureName="showListViewByDefault"
help={ __(
'Opens the block list view sidebar by default.'
) }
label={ __( 'Always open list view' ) }
/>
<EnableFeature
featureName="themeStyles"
help={ __(
'Make the editor look like your theme.'
) }
label={ __( 'Use theme styles' ) }
/>
{ showBlockBreadcrumbsOption && (
<EnableFeature
featureName="showBlockBreadcrumbs"
help={ __(
'Shows block breadcrumbs at the bottom of the editor.'
'Display the block hierarchy trail at the bottom of the editor.'
) }
label={ __( 'Display block breadcrumbs' ) }
label={ __( 'Show block breadcrumbs' ) }
/>
) }
</PreferencesModalSection>
</>
),
},
{
name: 'blocks',
tabLabel: __( 'Blocks' ),
content: (
<>
<PreferencesModalSection
title={ __( 'Block interactions' ) }
description={ __(
'Customize how you interact with blocks in the block library and editing canvas.'
) }
>
<EnableFeature
featureName="mostUsedBlocks"
help={ __(
'Places the most frequent blocks in the block library.'
) }
label={ __( 'Show most used blocks' ) }
/>
<EnableFeature
featureName="keepCaretInsideBlock"
help={ __(
'Aids screen readers by stopping text caret from leaving blocks.'
) }
label={ __(
'Contain text cursor inside block'
) }
/>
</PreferencesModalSection>
<PreferencesModalSection
title={ __( 'Visible blocks' ) }
description={ __(
"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
) }
>
<BlockManager />
</PreferencesModalSection>
</>
),
},
{
name: 'panels',
tabLabel: __( 'Panels' ),
content: (
<>
<PreferencesModalSection
title={ __( 'Document settings' ) }
description={ __(
'Choose what displays in the panel.'
'Select what settings are shown in the document panel.'
) }
>
<EnablePluginDocumentSettingPanelOption.Slot />
Expand Down Expand Up @@ -242,12 +159,108 @@ export default function EditPostPreferencesModal() {
/>
</PageAttributesCheck>
</PreferencesModalSection>
<MetaBoxesSection
title={ __( 'Additional' ) }
description={ __(
'Add extra areas to the editor.'
<MetaBoxesSection title={ __( 'Advanced' ) } />
</>
),
},
{
name: 'appearance',
tabLabel: __( 'Appearance' ),
content: (
<PreferencesModalSection
title={ __( 'Appearance' ) }
description={ __(
'Customize the editor interface to suit your needs.'
) }
>
<EnableFeature
featureName="fixedToolbar"
onToggle={ turnOffDistractionFree }
help={ __(
'Access all block and document tools in a single place.'
) }
label={ __( 'Top toolbar' ) }
/>
<EnableFeature
featureName="distractionFree"
onToggle={ toggleDistractionFree }
help={ __(
'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
) }
label={ __( 'Distraction free' ) }
/>
<EnableFeature
featureName="focusMode"
help={ __(
'Highlights the current block and fades other content.'
) }
label={ __( 'Spotlight mode' ) }
/>
<EnableFeature
featureName="themeStyles"
help={ __(
'Make the editor look like your theme.'
) }
label={ __( 'Use theme styles' ) }
/>
</PreferencesModalSection>
),
},
{
name: 'accessibility',
tabLabel: __( 'Accessibility' ),
content: (
<>
<PreferencesModalSection
title={ __( 'Navigation' ) }
description={ __(
'Optimize the editing experience for enhanced control.'
) }
>
<EnableFeature
featureName="keepCaretInsideBlock"
help={ __(
'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
) }
label={ __(
'Contain text cursor inside block'
) }
/>
</PreferencesModalSection>
<PreferencesModalSection title={ __( 'Interface' ) }>
<EnableFeature
featureName="showIconLabels"
label={ __( 'Show button text labels' ) }
help={ __(
'Show text instead of icons on buttons across the interface.'
) }
/>
</PreferencesModalSection>
</>
),
},
{
name: 'blocks',
tabLabel: __( 'Blocks' ),
content: (
<>
<PreferencesModalSection title={ __( 'Inserter' ) }>
<EnableFeature
featureName="mostUsedBlocks"
help={ __(
'Adds a category with the most frequently used blocks in the inserter.'
) }
label={ __( 'Show most used blocks' ) }
/>
</PreferencesModalSection>
<PreferencesModalSection
title={ __( 'Manage block visibility' ) }
description={ __(
"Disable blocks that you don't want to appear in the inserter. They can always be toggled back on later."
) }
>
<BlockManager />
</PreferencesModalSection>
</>
),
},
Expand Down
Loading

0 comments on commit c1852f3

Please sign in to comment.