Implements an Options modal

- Adds a basic Options modal to the More menu.
- Moves the 'Enable Pre-publish Checks' and 'Show Tips' toggles to the
  new modal.
- Allows the user to turn Document panels on or off.

edit-post/components/header/more-menu/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
-import { IconButton, Dropdown } from '@wordpress/components';
+import { IconButton, Dropdown, MenuGroup } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 
 /**
@@ -12,7 +12,7 @@ import './style.scss';
 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 MoreMenu = () => (
@@ -34,6 +34,9 @@ const MoreMenu = () => (
 				<ModeSwitcher onSelect={ onClose } />
 				<PluginMoreMenuGroup.Slot fillProps={ { onClose } } />
 				<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
+				<MenuGroup>
+					<OptionsMenuItem onSelect={ onClose } />
+				</MenuGroup>
 			</Fragment>
 		) }
 	/>

edit-post/components/header/options-menu-item/index.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress Dependencies
+ */
+import { withDispatch } from '@wordpress/data';
+
+/**
+ * WordPress Dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
+
+export function OptionsMenuItem( { openModal, onSelect } ) {
+	return (
+		<MenuItem
+			onClick={ () => {
+				onSelect();
+				openModal( 'edit-post/options' );
+			} }
+		>
+			{ __( 'Options' ) }
+		</MenuItem>
+	);
+}
+
+export default withDispatch( ( dispatch, ) => {
+	const {
+		openModal,
+	} = dispatch( 'core/edit-post' );
+
+	return {
+		openModal,
+	};
+} )( OptionsMenuItem );

edit-post/components/layout/index.js

@@ -33,6 +33,7 @@ import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditorModeKeyboardShortcuts from '../keyboard-shortcuts';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
+import OptionsModal from '../options-modal';
 import MetaBoxes from '../meta-boxes';
 import Sidebar from '../sidebar';
 import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel';
@@ -82,6 +83,7 @@ function Layout( {
 				<PreserveScrollInReorder />
 				<EditorModeKeyboardShortcuts />
 				<KeyboardShortcutHelpModal />
+				<OptionsModal />
 				{ mode === 'text' && <TextEditor /> }
 				{ mode === 'visual' && <VisualEditor /> }
 				<div className="edit-post-layout__metaboxes">

edit-post/components/options-modal/index.js

@@ -0,0 +1,179 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal, CheckboxControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const MODAL_NAME = 'edit-post/options';
+
+const Section = ( { title, children } ) => (
+	<section className="edit-post-options__section">
+		<h2 className="edit-post-options__section-title">
+			{ title }
+		</h2>
+		{ children }
+	</section>
+);
+
+export function OptionsModal( {
+	isModalActive,
+	toggleModal,
+	isPublishSidebarEnabled,
+	setIsPublishSidebarEnabled,
+	areTipsEnabled,
+	setAreTipsEnabled,
+	isStatusPanelEnabled,
+	setIsStatusPanelEnabled,
+	isCategoriesPanelEnabled,
+	setIsCategoriesPanelEnabled,
+	isTagsPanelEnabled,
+	setIsTagsPanelEnabled,
+	isFeaturedImagePanelEnabled,
+	setIsFeaturedImagePanelEnabled,
+	isExcerptPanelEnabled,
+	setIsExcerptPanelEnabled,
+	isDiscussionPanelEnabled,
+	setIsDiscussionPanelEnabled,
+} ) {
+	if ( ! isModalActive ) {
+		return null;
+	}
+
+	const title = (
+		<span className="edit-post-options__title">
+			{ __( 'Options' ) }
+		</span>
+	);
+
+	return (
+		<Modal
+			className="edit-post-options"
+			title={ title }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ toggleModal }
+		>
+			<Section title={ __( 'General' ) }>
+				<CheckboxControl
+					className="edit-post-options__option"
+					label={ __( 'Enable Pre-publish Checks' ) }
+					checked={ isPublishSidebarEnabled }
+					onChange={ setIsPublishSidebarEnabled }
+				/>
+				<CheckboxControl
+					className="edit-post-options__option"
+					label={ __( 'Enable Tips' ) }
+					checked={ areTipsEnabled }
+					onChange={ setAreTipsEnabled }
+				/>
+			</Section>
+			<Section title={ __( 'Document Panels' ) }>
+				<CheckboxControl
+					className="edit-post-options__option"
+					label={ __( 'Status & Visibility' ) }
+					checked={ isStatusPanelEnabled }
+					onChange={ setIsStatusPanelEnabled }
+				/>
+				<CheckboxControl
+					className="edit-post-options__option"
+					label={ __( 'Categories' ) }
+					checked={ isCategoriesPanelEnabled }
+					onChange={ setIsCategoriesPanelEnabled }
+				/>
+				<CheckboxControl
+					className="edit-post-options__option"
+					label={ __( 'Tags' ) }
+					checked={ isTagsPanelEnabled }
+					onChange={ setIsTagsPanelEnabled }
+				/>
+				<CheckboxControl
+					className="edit-post-options__option"
+					label={ __( 'Featured Image' ) }
+					checked={ isFeaturedImagePanelEnabled }
+					onChange={ setIsFeaturedImagePanelEnabled }
+				/>
+				<CheckboxControl
+					className="edit-post-options__option"
+					label={ __( 'Excerpt' ) }
+					checked={ isExcerptPanelEnabled }
+					onChange={ setIsExcerptPanelEnabled }
+				/>
+				<CheckboxControl
+					className="edit-post-options__option"
+					label={ __( 'Discussion' ) }
+					checked={ isDiscussionPanelEnabled }
+					onChange={ setIsDiscussionPanelEnabled }
+				/>
+			</Section>
+		</Modal>
+	);
+}
+
+export default compose( [
+	withSelect( ( select ) => {
+		const { isModalActive, isEditorSidebarPanelEnabled } = select( 'core/edit-post' );
+		const { isPublishSidebarEnabled } = select( 'core/editor' );
+		const { areTipsEnabled } = select( 'core/nux' );
+
+		return {
+			isModalActive: isModalActive( MODAL_NAME ),
+			isPublishSidebarEnabled: isPublishSidebarEnabled(),
+			areTipsEnabled: areTipsEnabled(),
+			isStatusPanelEnabled: isEditorSidebarPanelEnabled( 'post-status' ),
+			isCategoriesPanelEnabled: isEditorSidebarPanelEnabled( 'taxonomy-panel-category' ),
+			isTagsPanelEnabled: isEditorSidebarPanelEnabled( 'taxonomy-panel-post_tag' ),
+			isFeaturedImagePanelEnabled: isEditorSidebarPanelEnabled( 'featured-image' ),
+			isExcerptPanelEnabled: isEditorSidebarPanelEnabled( 'post-excerpt' ),
+			isDiscussionPanelEnabled: isEditorSidebarPanelEnabled( 'discussion-panel' ),
+		};
+	} ),
+	withDispatch( ( dispatch, { isModalActive } ) => {
+		const { openModal, closeModal, enablePanel, disablePanel } = dispatch( 'core/edit-post' );
+		const { enablePublishSidebar, disablePublishSidebar } = dispatch( 'core/editor' );
+		const { enableTips, disableTips } = dispatch( 'core/nux' );
+
+		const buildSetIsPanelEnabled = ( panel ) => ( isEnabled ) => {
+			if ( isEnabled ) {
+				enablePanel( panel );
+			} else {
+				disablePanel( panel );
+			}
+		};
+
+		return {
+			toggleModal() {
+				if ( isModalActive ) {
+					closeModal();
+				} else {
+					openModal( MODAL_NAME );
+				}
+			},
+			setIsPublishSidebarEnabled( isEnabled ) {
+				if ( isEnabled ) {
+					enablePublishSidebar();
+				} else {
+					disablePublishSidebar();
+				}
+			},
+			setAreTipsEnabled( isEnabled ) {
+				if ( isEnabled ) {
+					enableTips();
+				} else {
+					disableTips();
+				}
+			},
+			setIsStatusPanelEnabled: buildSetIsPanelEnabled( 'post-status' ),
+			setIsCategoriesPanelEnabled: buildSetIsPanelEnabled( 'taxonomy-panel-category' ),
+			setIsTagsPanelEnabled: buildSetIsPanelEnabled( 'taxonomy-panel-post_tag' ),
+			setIsFeaturedImagePanelEnabled: buildSetIsPanelEnabled( 'featured-image' ),
+			setIsExcerptPanelEnabled: buildSetIsPanelEnabled( 'post-excerpt' ),
+			setIsDiscussionPanelEnabled: buildSetIsPanelEnabled( 'discussion-panel' ),
+		};
+	} ),
+] )( OptionsModal );

edit-post/components/options-modal/style.scss

@@ -0,0 +1,36 @@
+.edit-post-options {
+	min-width: 450px;
+
+	&__title {
+		font-size: 1rem;
+		font-weight: bold;
+	}
+
+	&__section {
+		margin: 0 0 2rem 0;
+	}
+
+	&__section-title {
+		font-size: 0.9rem;
+		font-weight: bold;
+	}
+
+	&__option {
+		display: flex;
+		align-items: center;
+		padding: 0.6rem 0;
+		border-top: 1px solid $light-gray-500;
+
+		&:last-child {
+			border-bottom: 1px solid $light-gray-500;
+		}
+
+		.components-base-control__field {
+			margin: 0;
+		}
+
+		.components-checkbox-control__input {
+			margin-right: 10px;
+		}
+	}
+}

edit-post/components/options-modal/test/__snapshots__/index.js.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OptionsModal should match snapshot when the modal is active 1`] = `
+<WithInstanceId(Modal)
+  className="edit-post-options"
+  closeLabel="Close"
+  title={
+    <span
+      className="edit-post-options__title"
+    >
+      Options
+    </span>
+  }
+>
+  <Section
+    title="General"
+  >
+    <WithInstanceId(CheckboxControl)
+      className="edit-post-options__option"
+      label="Enable Pre-publish Checks"
+    />
+    <WithInstanceId(CheckboxControl)
+      className="edit-post-options__option"
+      label="Enable Tips"
+    />
+  </Section>
+  <Section
+    title="Document Panels"
+  >
+    <WithInstanceId(CheckboxControl)
+      className="edit-post-options__option"
+      label="Status & Visibility"
+    />
+    <WithInstanceId(CheckboxControl)
+      className="edit-post-options__option"
+      label="Categories"
+    />
+    <WithInstanceId(CheckboxControl)
+      className="edit-post-options__option"
+      label="Tags"
+    />
+    <WithInstanceId(CheckboxControl)
+      className="edit-post-options__option"
+      label="Featured Image"
+    />
+    <WithInstanceId(CheckboxControl)
+      className="edit-post-options__option"
+      label="Excerpt"
+    />
+    <WithInstanceId(CheckboxControl)
+      className="edit-post-options__option"
+      label="Discussion"
+    />
+  </Section>
+</WithInstanceId(Modal)>
+`;
+
+exports[`OptionsModal should match snapshot when the modal is not active 1`] = `""`;

edit-post/components/options-modal/test/index.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { OptionsModal } from '../';
+
+describe( 'OptionsModal', () => {
+	it( 'should match snapshot when the modal is active', () => {
+		const wrapper = shallow(
+			<OptionsModal
+				isModalActive={ true }
+			/>
+		);
+
+		expect( wrapper ).toMatchSnapshot();
+	} );
+
+	it( 'should match snapshot when the modal is not active', () => {
+		const wrapper = shallow(
+			<OptionsModal
+				isModalActive={ false }
+			/>
+		);
+
+		expect( wrapper ).toMatchSnapshot();
+	} );
+} );