Skip to content
Permalink
Browse files

Move the view section of the More Menu to the options panel (#18601)

  • Loading branch information
youknowriad committed Nov 19, 2019
1 parent 99dd0ee commit fb234f5bf1610eb3a6377e571f5ab46832f62179
@@ -3,8 +3,7 @@
*/
import {
createNewPost,
clickOnMoreMenuItem,
toggleMoreMenu,
toggleScreenOption,
} from '@wordpress/e2e-test-utils';

describe( 'Fullscreen Mode', () => {
@@ -13,8 +12,7 @@ describe( 'Fullscreen Mode', () => {
} );

it( 'should open the fullscreen mode from the more menu', async () => {
await clickOnMoreMenuItem( 'Fullscreen Mode' );
await toggleMoreMenu();
await toggleScreenOption( 'Fullscreen Mode' );

const isFullscreenEnabled = await page.$eval( 'body', ( body ) => {
return body.classList.contains( 'is-fullscreen-mode' );
@@ -11,7 +11,6 @@ import ModeSwitcher from '../mode-switcher';
import PluginMoreMenuGroup from '../plugins-more-menu-group';
import ToolsMoreMenuGroup from '../tools-more-menu-group';
import OptionsMenuItem from '../options-menu-item';
import WritingMenu from '../writing-menu';

const POPOVER_PROPS = {
className: 'edit-post-more-menu__content',
@@ -31,7 +30,6 @@ const MoreMenu = () => (
>
{ ( { onClose } ) => (
<>
<WritingMenu />
<ModeSwitcher />
<PluginMoreMenuGroup.Slot fillProps={ { onClose } } />
<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />

This file was deleted.

@@ -6,8 +6,9 @@ import { get } from 'lodash';
/**
* WordPress dependencies
*/
import { withViewportMatch } from '@wordpress/viewport';
import { Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { __, _x } from '@wordpress/i18n';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import {
@@ -33,7 +34,7 @@ import MetaBoxesSection from './meta-boxes-section';

const MODAL_NAME = 'edit-post/options';

export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
export function OptionsModal( { isModalActive, isViewable, isSmallScreen, closeModal } ) {
if ( ! isModalActive ) {
return null;
}
@@ -45,6 +46,25 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
closeLabel={ __( 'Close' ) }
onRequestClose={ closeModal }
>
{ ! isSmallScreen && (
<Section title={ _x( 'View', 'noun' ) }>
<EnableFeature
feature="fixedToolbar"
label={ __( 'Top Toolbar' ) }
help={ __( 'Access all block and document tools in a single place' ) }
/>
<EnableFeature
feature="focusMode"
label={ __( 'Spotlight Mode' ) }
help={ __( 'Focus on one block at a time' ) }
/>
<EnableFeature
feature="fullscreenMode"
label={ __( 'Fullscreen Mode' ) }
help={ __( 'Work without distraction' ) }
/>
</Section>
) }
<Section title={ __( 'General' ) }>
<EnablePublishSidebarOption label={ __( 'Pre-publish Checks' ) } />
<EnableTipsOption label={ __( 'Tips' ) } />
@@ -82,6 +102,7 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
}

export default compose(
withViewportMatch( { isSmallScreen: '< medium' } ),
withSelect( ( select ) => {
const { getEditedPostAttribute } = select( 'core/editor' );
const { getPostType } = select( 'core' );
@@ -3,13 +3,14 @@
*/
import { CheckboxControl } from '@wordpress/components';

function BaseOption( { label, isChecked, onChange, children } ) {
function BaseOption( { label, help, isChecked, onChange, children } ) {
return (
<div className="edit-post-options-modal__option">
<CheckboxControl
label={ label }
checked={ isChecked }
onChange={ onChange }
help={ help }
/>
{ children }
</div>
@@ -25,6 +25,11 @@
flex-grow: 1;
padding: 0.6rem 0 0.6rem 10px;
}

.components-base-control__help {
padding-left: 38px;
color: $dark-gray-300;
}
}

&__custom-fields-confirmation-message,
@@ -6,6 +6,25 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
closeLabel="Close"
title="Options"
>
<Section
title="View"
>
<WithSelect(WithDispatch(BaseOption))
feature="fixedToolbar"
help="Access all block and document tools in a single place"
label="Top Toolbar"
/>
<WithSelect(WithDispatch(BaseOption))
feature="focusMode"
help="Focus on one block at a time"
label="Spotlight Mode"
/>
<WithSelect(WithDispatch(BaseOption))
feature="fullscreenMode"
help="Work without distraction"
label="Fullscreen Mode"
/>
</Section>
<Section
title="General"
>

0 comments on commit fb234f5

Please sign in to comment.
You can’t perform that action at this time.