Add a basic Options modal

docs/reference/deprecated.md

@@ -1,5 +1,10 @@
 Gutenberg's deprecation policy is intended to support backwards-compatibility for two minor releases, when possible. The current deprecations are listed below and are grouped by _the version at which they will be removed completely_. If your plugin depends on these behaviors, you must update to the recommended alternative before the noted version.
 
+# 4.3.0
+
+- `isEditorSidebarPanelOpened` selector (`core/edit-post`) has been removed. Please use `isEditorPanelEnabled` instead.
+- `toggleGeneralSidebarEditorPanel` action (`core/edit-post`) has been removed. Please use `toggleEditorPanelOpened` instead.
+
 ## 4.2.0
 
 - Writing resolvers as async generators has been removed. Use the controls plugin instead.

packages/edit-post/src/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';
 
 /**
@@ -11,6 +11,7 @@ import { Fragment } from '@wordpress/element';
 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 = () => (
@@ -32,6 +33,9 @@ const MoreMenu = () => (
 				<ModeSwitcher onSelect={ onClose } />
 				<PluginMoreMenuGroup.Slot fillProps={ { onClose } } />
 				<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
+				<MenuGroup>
+					<OptionsMenuItem onSelect={ onClose } />
+				</MenuGroup>
 			</Fragment>
 		) }
 	/>

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

@@ -0,0 +1,27 @@
+/**
+ * WordPress Dependencies
+ */
+import { withDispatch } from '@wordpress/data';
+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 );

packages/edit-post/src/components/layout/index.js

@@ -32,6 +32,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';
@@ -81,6 +82,7 @@ function Layout( {
 				<PreserveScrollInReorder />
 				<EditorModeKeyboardShortcuts />
 				<KeyboardShortcutHelpModal />
+				<OptionsModal />
 				{ mode === 'text' && <TextEditor /> }
 				{ mode === 'visual' && <VisualEditor /> }
 				<div className="edit-post-layout__metaboxes">

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

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { PostTaxonomies, PostExcerptCheck, PageAttributesCheck } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import Section from './section';
+import { EnablePublishSidebarOption, EnableTipsOption, EnablePanelOption } from './options';
+
+const MODAL_NAME = 'edit-post/options';
+
+export function OptionsModal( { isModalActive, closeModal } ) {
+	if ( ! isModalActive ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			className="edit-post-options-modal"
+			title={ <span className="edit-post-options-modal__title">{ __( 'Options' ) }</span> }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ closeModal }
+		>
+			<Section title={ __( 'General' ) }>
+				<EnablePublishSidebarOption label={ __( 'Enable Pre-publish Checks' ) } />
+				<EnableTipsOption label={ __( 'Enable Tips' ) } />
+			</Section>
+			<Section title={ __( 'Document Panels' ) }>
+				<PostTaxonomies
+					taxonomyWrapper={ ( content, taxonomy ) => (
+						<EnablePanelOption
+							label={ get( taxonomy, [ 'labels', 'menu_name' ] ) }
+							panelName={ `taxonomy-panel-${ taxonomy.slug }` }
+						/>
+					) }
+				/>
+				<EnablePanelOption label={ __( 'Featured Image' ) } panelName="featured-image" />
+				<PostExcerptCheck>
+					<EnablePanelOption label={ __( 'Excerpt' ) } panelName="post-excerpt" />
+				</PostExcerptCheck>
+				<EnablePanelOption label={ __( 'Discussion' ) } panelName="discussion-panel" />
+				<PageAttributesCheck>
+					<EnablePanelOption label={ __( 'Page Attributes' ) } panelName="page-attributes" />
+				</PageAttributesCheck>
+			</Section>
+		</Modal>
+	);
+}
+
+export default compose(
+	withSelect( ( select ) => ( {
+		isModalActive: select( 'core/edit-post' ).isModalActive( MODAL_NAME ),
+	} ) ),
+	withDispatch( ( dispatch ) => {
+		return {
+			closeModal: () => dispatch( 'core/edit-post' ).closeModal(),
+		};
+	} )
+)( OptionsModal );

packages/edit-post/src/components/options-modal/options.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+function Option( { label, isChecked, onChange } ) {
+	return (
+		<CheckboxControl
+			className="edit-post-options-modal__option"
+			label={ label }
+			checked={ isChecked }
+			onChange={ onChange }
+		/>
+	);
+}
+
+class DeferredOption extends Component {
+	constructor( { isChecked } ) {
+		super( ...arguments );
+		this.state = {
+			isChecked,
+		};
+	}
+
+	componentWillUnmount() {
+		if ( this.state.isChecked !== this.props.isChecked ) {
+			this.props.onChange( this.state.isChecked );
+		}
+	}
+
+	render() {
+		return (
+			<Option
+				label={ this.props.label }
+				isChecked={ this.state.isChecked }
+				onChange={ ( isChecked ) => this.setState( { isChecked } ) }
+			/>
+		);
+	}
+}
+
+export const EnablePublishSidebarOption = compose(
+	withSelect( ( select ) => ( {
+		isChecked: select( 'core/editor' ).isPublishSidebarEnabled(),
+	} ) ),
+	withDispatch( ( dispatch ) => {
+		const { enablePublishSidebar, disablePublishSidebar } = dispatch( 'core/editor' );
+		return {
+			onChange: ( isEnabled ) => ( isEnabled ? enablePublishSidebar() : disablePublishSidebar() ),
+		};
+	} )
+)( Option );
+
+export const EnableTipsOption = compose(
+	withSelect( ( select ) => ( {
+		isChecked: select( 'core/nux' ).areTipsEnabled(),
+	} ) ),
+	withDispatch( ( dispatch ) => {
+		const { enableTips, disableTips } = dispatch( 'core/nux' );
+		return {
+			onChange: ( isEnabled ) => ( isEnabled ? enableTips() : disableTips() ),
+		};
+	} )
+)(
+	// Using DeferredOption here means enableTips() is called when the Options
+	// modal is dismissed. This stops the NUX guide from appearing above the
+	// Options modal, which looks totally weird.
+	DeferredOption
+);
+
+export const EnablePanelOption = compose(
+	withSelect( ( select, { panelName } ) => ( {
+		isChecked: select( 'core/edit-post' ).isEditorPanelEnabled( panelName ),
+	} ) ),
+	withDispatch( ( dispatch, { panelName } ) => ( {
+		onChange: () => dispatch( 'core/edit-post' ).toggleEditorPanelEnabled( panelName ),
+	} ) )
+)( Option );

packages/edit-post/src/components/options-modal/section.js

@@ -0,0 +1,8 @@
+const Section = ( { title, children } ) => (
+	<section className="edit-post-options-modal__section">
+		<h2 className="edit-post-options-modal__section-title">{ title }</h2>
+		{ children }
+	</section>
+);
+
+export default Section;

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

@@ -0,0 +1,36 @@
+.edit-post-options-modal {
+	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 {
+		border-top: 1px solid $light-gray-500;
+
+		&:last-child {
+			border-bottom: 1px solid $light-gray-500;
+		}
+
+		.components-base-control__field {
+			align-items: center;
+			display: flex;
+			margin: 0;
+		}
+
+		.components-checkbox-control__label {
+			flex-grow: 1;
+			padding: 0.6rem 0 0.6rem 10px;
+		}
+	}
+}

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

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OptionsModal should match snapshot when the modal is active 1`] = `
+<WithInstanceId(Modal)
+  className="edit-post-options-modal"
+  closeLabel="Close"
+  title={
+    <span
+      className="edit-post-options-modal__title"
+    >
+      Options
+    </span>
+  }
+>
+  <Section
+    title="General"
+  >
+    <WithSelect(WithDispatch(Option))
+      label="Enable Pre-publish Checks"
+    />
+    <WithSelect(WithDispatch(DeferredOption))
+      label="Enable Tips"
+    />
+  </Section>
+  <Section
+    title="Document Panels"
+  >
+    <WithSelect(PostTaxonomies)
+      taxonomyWrapper={[Function]}
+    />
+    <WithSelect(WithDispatch(Option))
+      label="Featured Image"
+      panelName="featured-image"
+    />
+    <PostExcerptCheck>
+      <WithSelect(WithDispatch(Option))
+        label="Excerpt"
+        panelName="post-excerpt"
+      />
+    </PostExcerptCheck>
+    <WithSelect(WithDispatch(Option))
+      label="Discussion"
+      panelName="discussion-panel"
+    />
+    <WithSelect(PageAttributesCheck)>
+      <WithSelect(WithDispatch(Option))
+        label="Page Attributes"
+        panelName="page-attributes"
+      />
+    </WithSelect(PageAttributesCheck)>
+  </Section>
+</WithInstanceId(Modal)>
+`;

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

@@ -0,0 +1,21 @@
+/**
+ * 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 not render when the modal is not active', () => {
+		const wrapper = shallow( <OptionsModal isModalActive={ false } /> );
+		expect( wrapper.isEmptyRender() ).toBe( true );
+	} );
+} );

packages/edit-post/src/components/sidebar/discussion-panel/index.js

@@ -12,7 +12,11 @@ import { withSelect, withDispatch } from '@wordpress/data';
  */
 const PANEL_NAME = 'discussion-panel';
 
-function DiscussionPanel( { isOpened, onTogglePanel } ) {
+function DiscussionPanel( { isEnabled, isOpened, onTogglePanel } ) {
+	if ( ! isEnabled ) {
+		return null;
+	}
+
 	return (
 		<PostTypeSupportCheck supportKeys={ [ 'comments', 'trackbacks' ] }>
 			<PanelBody title={ __( 'Discussion' ) } opened={ isOpened } onToggle={ onTogglePanel }>
@@ -35,12 +39,13 @@ function DiscussionPanel( { isOpened, onTogglePanel } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			isOpened: select( 'core/edit-post' ).isEditorSidebarPanelOpened( PANEL_NAME ),
+			isEnabled: select( 'core/edit-post' ).isEditorPanelEnabled( PANEL_NAME ),
+			isOpened: select( 'core/edit-post' ).isEditorPanelOpened( PANEL_NAME ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {
 		onTogglePanel() {
-			return dispatch( 'core/edit-post' ).toggleGeneralSidebarEditorPanel( PANEL_NAME );
+			return dispatch( 'core/edit-post' ).toggleEditorPanelOpened( PANEL_NAME );
 		},
 	} ) ),
 ] )( DiscussionPanel );