Skip to content

Commit

Permalink
Add interface preferences modal to edit post. (#39176)
Browse files Browse the repository at this point in the history 
* Add interface preferences modal to edit post.

* Update unit tests

* Update to modal tabs component.

* Update to use unstable component.

* Update tests.

* Remove unused components.

* Update meta boxes to use new Section component.

* Remove unused CSS.

* Remove stylesheet import.
  • Loading branch information
@tellthemachines
tellthemachines authored Mar 9, 2022
1 parent a0e4559 commit d103291
Show file tree
Hide file tree
Showing 16 changed files with 280 additions and 684 deletions.
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/editor/various/preview.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ async function waitForPreviewNavigation( previewPage ) {
* @param {boolean} shouldBeChecked If true, turns the option on. If false, off.
*/
async function toggleCustomFieldsOption( shouldBeChecked ) {
const baseXPath = '//*[contains(@class, "edit-post-preferences-modal")]';
const baseXPath = '//*[contains(@class, "interface-preferences-modal")]';
const paneslXPath = `${ baseXPath }//button[contains(text(), "Panels")]`;
const checkboxXPath = `${ baseXPath }//label[contains(text(), "Custom fields")]`;
await clickOnMoreMenuItem( 'Preferences' );
Expand Down Expand Up @@ -83,7 +83,7 @@ async function toggleCustomFieldsOption( shouldBeChecked ) {
return;
}

await clickOnCloseModalButton( '.edit-post-preferences-modal' );
await clickOnCloseModalButton( '.interface-preferences-modal' );
}

describe( 'Preview', () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-post/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import TextEditor from '../text-editor';
import VisualEditor from '../visual-editor';
import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
import PreferencesModal from '../preferences-modal';
import EditPostPreferencesModal from '../preferences-modal';
import BrowserURL from '../browser-url';
import Header from '../header';
import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
Expand Down Expand Up @@ -283,7 +283,7 @@ function Layout( { styles } ) {
next: nextShortcut,
} }
/>
<PreferencesModal />
<EditPostPreferencesModal />
<KeyboardShortcutHelpModal />
<WelcomeGuide />
<Popover.Slot />
Expand Down
174 changes: 24 additions & 150 deletions packages/edit-post/src/components/preferences-modal/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,11 @@ import { get } from 'lodash';
/**
* WordPress dependencies
*/
import {
__experimentalNavigatorProvider as NavigatorProvider,
__experimentalNavigatorScreen as NavigatorScreen,
__experimentalNavigatorButton as NavigatorButton,
__experimentalNavigatorBackButton as NavigatorBackButton,
__experimentalItemGroup as ItemGroup,
__experimentalItem as Item,
__experimentalHStack as HStack,
__experimentalText as Text,
__experimentalTruncate as Truncate,
FlexItem,
Modal,
TabPanel,
Card,
CardHeader,
CardBody,
} from '@wordpress/components';
import { isRTL, __ } from '@wordpress/i18n';

import { __ } from '@wordpress/i18n';
import { useViewportMatch } from '@wordpress/compose';
import { useSelect, useDispatch } from '@wordpress/data';
import { useMemo, useCallback, useState } from '@wordpress/element';
import { useMemo } from '@wordpress/element';
import {
PostTaxonomies,
PostExcerptCheck,
Expand All @@ -36,12 +20,16 @@ import {
store as editorStore,
} from '@wordpress/editor';
import { store as coreStore } from '@wordpress/core-data';
import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
import {
PreferencesModal,
PreferencesModalTabs,
PreferencesModalSection,
} from '@wordpress/interface';

/**
* Internal dependencies
*/
import Section from './section';

import {
EnablePluginDocumentSettingPanelOption,
EnablePublishSidebarOption,
Expand All @@ -53,9 +41,8 @@ import { store as editPostStore } from '../../store';
import BlockManager from '../block-manager';

const MODAL_NAME = 'edit-post/preferences';
const PREFERENCES_MENU = 'preferences-menu';

export default function PreferencesModal() {
export default function EditPostPreferencesModal() {
const isLargeViewport = useViewportMatch( 'medium' );
const { closeModal } = useDispatch( editPostStore );
const { isModalActive, isViewable } = useSelect( ( select ) => {
Expand Down Expand Up @@ -91,7 +78,7 @@ export default function PreferencesModal() {
content: (
<>
{ isLargeViewport && (
<Section
<PreferencesModalSection
title={ __( 'Publishing' ) }
description={ __(
'Change options related to publishing.'
Expand All @@ -105,10 +92,10 @@ export default function PreferencesModal() {
'Include pre-publish checklist'
) }
/>
</Section>
</PreferencesModalSection>
) }

<Section
<PreferencesModalSection
title={ __( 'Appearance' ) }
description={ __(
'Customize options related to the block editor interface and editing flow.'
Expand Down Expand Up @@ -149,7 +136,7 @@ export default function PreferencesModal() {
label={ __( 'Display block breadcrumbs' ) }
/>
) }
</Section>
</PreferencesModalSection>
</>
),
},
Expand All @@ -158,7 +145,7 @@ export default function PreferencesModal() {
tabLabel: __( 'Blocks' ),
content: (
<>
<Section
<PreferencesModalSection
title={ __( 'Block interactions' ) }
description={ __(
'Customize how you interact with blocks in the block library and editing canvas.'
Expand All @@ -180,15 +167,15 @@ export default function PreferencesModal() {
'Contain text cursor inside block'
) }
/>
</Section>
<Section
</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 />
</Section>
</PreferencesModalSection>
</>
),
},
Expand All @@ -197,7 +184,7 @@ export default function PreferencesModal() {
tabLabel: __( 'Panels' ),
content: (
<>
<Section
<PreferencesModalSection
title={ __( 'Document settings' ) }
description={ __(
'Choose what displays in the panel.'
Expand Down Expand Up @@ -253,7 +240,7 @@ export default function PreferencesModal() {
panelName="page-attributes"
/>
</PageAttributesCheck>
</Section>
</PreferencesModalSection>
<MetaBoxesSection
title={ __( 'Additional' ) }
description={ __(
Expand All @@ -267,126 +254,13 @@ export default function PreferencesModal() {
[ isViewable, isLargeViewport, showBlockBreadcrumbsOption ]
);

// This is also used to sync the two different rendered components
// between small and large viewports.
const [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );
/**
* Create helper objects from `sections` for easier data handling.
* `tabs` is used for creating the `TabPanel` and `sectionsContentMap`
* is used for easier access to active tab's content.
*/
const { tabs, sectionsContentMap } = useMemo(
() =>
sections.reduce(
( accumulator, { name, tabLabel: title, content } ) => {
accumulator.tabs.push( { name, title } );
accumulator.sectionsContentMap[ name ] = content;
return accumulator;
},
{ tabs: [], sectionsContentMap: {} }
),
[ sections ]
);
const getCurrentTab = useCallback(
( tab ) => sectionsContentMap[ tab.name ] || null,
[ sectionsContentMap ]
);
if ( ! isModalActive ) {
return null;
}
let modalContent;
// We render different components based on the viewport size.
if ( isLargeViewport ) {
modalContent = (
<TabPanel
className="edit-post-preferences__tabs"
tabs={ tabs }
initialTabName={
activeMenu !== PREFERENCES_MENU ? activeMenu : undefined
}
onSelect={ setActiveMenu }
orientation="vertical"
>
{ getCurrentTab }
</TabPanel>
);
} else {
modalContent = (
<NavigatorProvider initialPath="/">
<NavigatorScreen path="/">
<Card isBorderless size="small">
<CardBody>
<ItemGroup>
{ tabs.map( ( tab ) => {
return (
<NavigatorButton
key={ tab.name }
path={ tab.name }
as={ Item }
isAction
>
<HStack justify="space-between">
<FlexItem>
<Truncate>
{ tab.title }
</Truncate>
</FlexItem>
<FlexItem>
<Icon
icon={
isRTL()
? chevronLeft
: chevronRight
}
/>
</FlexItem>
</HStack>
</NavigatorButton>
);
} ) }
</ItemGroup>
</CardBody>
</Card>
</NavigatorScreen>
{ sections.map( ( section ) => {
return (
<NavigatorScreen
key={ `${ section.name }-menu` }
path={ section.name }
>
<Card isBorderless size="large">
<CardHeader
isBorderless={ false }
justify="left"
size="small"
gap="6"
>
<NavigatorBackButton
icon={
isRTL() ? chevronRight : chevronLeft
}
aria-label={ __(
'Navigate to the previous view'
) }
/>
<Text size="16">{ section.tabLabel }</Text>
</CardHeader>
<CardBody>{ section.content }</CardBody>
</Card>
</NavigatorScreen>
);
} ) }
</NavigatorProvider>
);
}

return (
<Modal
className="edit-post-preferences-modal"
title={ __( 'Preferences' ) }
closeLabel={ __( 'Close' ) }
onRequestClose={ closeModal }
>
{ modalContent }
</Modal>
<PreferencesModal closeModal={ closeModal }>
<PreferencesModalTabs sections={ sections } />
</PreferencesModal>
);
}
6 changes: 3 additions & 3 deletions packages/edit-post/src/components/preferences-modal/meta-boxes-section.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import { filter, map } from 'lodash';
import { __ } from '@wordpress/i18n';
import { withSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';
import { PreferencesModalSection } from '@wordpress/interface';

/**
* Internal dependencies
*/
import Section from './section';
import { EnableCustomFieldsOption, EnablePanelOption } from './options';
import { store as editPostStore } from '../../store';

Expand All @@ -33,7 +33,7 @@ export function MetaBoxesSection( {
}

return (
<Section { ...sectionProps }>
<PreferencesModalSection { ...sectionProps }>
{ areCustomFieldsRegistered && (
<EnableCustomFieldsOption label={ __( 'Custom fields' ) } />
) }
Expand All @@ -44,7 +44,7 @@ export function MetaBoxesSection( {
panelName={ `meta-box-${ id }` }
/>
) ) }
</Section>
</PreferencesModalSection>
);
}

Expand Down
20 changes: 0 additions & 20 deletions packages/edit-post/src/components/preferences-modal/options/base.js
View file

This file was deleted.

6 changes: 1 addition & 5 deletions packages/edit-post/src/components/preferences-modal/options/enable-custom-fields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,7 @@ import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

/**
* Internal dependencies
*/
import BaseOption from './base';
import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';

export function CustomFieldsConfirmation( { willEnable } ) {
const [ isReloading, setIsReloading ] = useState( false );
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-post/src/components/preferences-modal/options/enable-feature.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
*/
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';

/**
* Internal dependencies
*/
import BaseOption from './base';
import { store as editPostStore } from '../../../store';

export default compose(
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-post/src/components/preferences-modal/options/enable-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
*/
import { compose, ifCondition } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';

/**
* Internal dependencies
*/
import BaseOption from './base';
import { store as editPostStore } from '../../../store';

export default compose(
Expand Down
Loading

0 comments on commit d103291

Please sign in to comment.