First pass at adding 'Advanced Panels' to Options modal

Allows the user to enable or disable 'Advanced Panels' (AKA Meta Boxes)
via the Options modal.

- The title and ID of each Meta Box is stored in the `core/edit-post`
  Redux store.
- The `MetaBoxTitles` HOC provides an easy way to list all of the
  registered Meta Boxes within Gutenberg.
- The `MetaBoxesVisibility` and `MetaBoxVisibility` components respond
  to the existing `isEditorPanelEnabled` selector and show/hide Meta Boxes
  using `el.style.display = 'none'`;

lib/meta-box-partial-page.php

@@ -291,6 +291,7 @@ function the_gutenberg_metaboxes() {
 	 */
 	$wp_meta_boxes             = apply_filters( 'filter_gutenberg_meta_boxes', $wp_meta_boxes );
 	$locations                 = array( 'side', 'normal', 'advanced' );
+	$priorities                = array( 'high', 'sorted', 'core', 'default', 'low' );
 	$active_meta_box_locations = array();
 	// Render meta boxes.
 	?>
@@ -318,6 +319,16 @@ function the_gutenberg_metaboxes() {
 	<?php endforeach; ?>
 	<?php
 
+	$meta_box_titles = array();
+	foreach ( $locations as $location ) {
+		foreach ( $priorities as $priority ) {
+			$meta_boxes = (array) $wp_meta_boxes[ $current_screen->id ][ $location ][ $priority ];
+			foreach ( $meta_boxes as $meta_box ) {
+				$meta_box_titles[ $meta_box['id'] ] = $meta_box['title'];
+			}
+		}
+	}
+
 	/**
 	 * Sadly we probably can not add this data directly into editor settings.
 	 *
@@ -328,6 +339,7 @@ function the_gutenberg_metaboxes() {
 	 */
 	$script = 'window._wpLoadGutenbergEditor.then( function() {
 		wp.data.dispatch( \'core/edit-post\' ).setActiveMetaBoxLocations( ' . wp_json_encode( $active_meta_box_locations ) . ' );
+		wp.data.dispatch( \'core/edit-post\' ).setMetaBoxTitles( ' . wp_json_encode( $meta_box_titles ) . ' );
 	} );';
 
 	wp_add_inline_script( 'wp-edit-post', $script );

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

@@ -38,6 +38,7 @@ import Sidebar from '../sidebar';
 import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel';
 import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel';
 import FullscreenMode from '../fullscreen-mode';
+import MetaBoxesVisibility from '../meta-boxes-visibility';
 
 function Layout( {
 	mode,
@@ -91,6 +92,7 @@ function Layout( {
 				<div className="edit-post-layout__metaboxes">
 					<MetaBoxes location="advanced" />
 				</div>
+				<MetaBoxesVisibility />
 			</div>
 			{ publishSidebarOpened ? (
 				<PostPublishPanel

packages/edit-post/src/components/meta-box-titles/index.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+
+function MetaBoxTitles( { titles, titleWrapper } ) {
+	return map( titles, ( title, id ) => (
+		<Fragment key={ id }>{ titleWrapper( title, id ) }</Fragment>
+	) );
+}
+
+export default withSelect( ( select ) => ( {
+	titles: select( 'core/edit-post' ).getMetaBoxTitles(),
+} ) )( MetaBoxTitles );

packages/edit-post/src/components/meta-boxes-visibility/index.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import MetaBoxTitles from '../meta-box-titles';
+import MetaBoxVisibility from './meta-box-visibility';
+
+function MetaBoxesVisibility() {
+	return (
+		<MetaBoxTitles
+			titleWrapper={ ( title, id ) => (
+				<MetaBoxVisibility id={ id } />
+			) }
+		/>
+	);
+}
+
+export default MetaBoxesVisibility;

packages/edit-post/src/components/meta-boxes-visibility/meta-box-visibility.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+
+class MetaBoxVisibility extends Component {
+	componentDidMount() {
+		this.updateDOM();
+	}
+
+	componentDidUpdate( prevProps ) {
+		if ( this.props.isVisible !== prevProps.isVisible ) {
+			this.updateDOM();
+		}
+	}
+
+	updateDOM() {
+		const { id, isVisible } = this.props;
+		document.getElementById( id ).style.display = isVisible ? '' : 'none';
+	}
+
+	render() {
+		return null;
+	}
+}
+
+export default withSelect( ( select, { id } ) => ( {
+	isVisible: select( 'core/edit-post' ).isEditorPanelEnabled( `meta-box-${ id }` ),
+} ) )( MetaBoxVisibility );

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

@@ -17,6 +17,7 @@ import { PostTaxonomies, PostExcerptCheck, PageAttributesCheck } from '@wordpres
  */
 import Section from './section';
 import { EnablePublishSidebarOption, EnableTipsOption, EnablePanelOption } from './options';
+import MetaBoxTitles from '../meta-box-titles';
 
 const MODAL_NAME = 'edit-post/options';
 
@@ -54,6 +55,13 @@ export function OptionsModal( { isModalActive, closeModal } ) {
 					<EnablePanelOption label={ __( 'Page Attributes' ) } panelName="page-attributes" />
 				</PageAttributesCheck>
 			</Section>
+			<Section title={ __( 'Advanced Panels' ) }>
+				<MetaBoxTitles
+					titleWrapper={ ( title, id ) => (
+						<EnablePanelOption label={ title } panelName={ `meta-box-${ id }` } />
+					) }
+				/>
+			</Section>
 		</Modal>
 	);
 }

packages/edit-post/src/store/actions.js

@@ -220,6 +220,13 @@ export function setActiveMetaBoxLocations( locations ) {
 	};
 }
 
+export function setMetaBoxTitles( titles ) {
+	return {
+		type: 'SET_META_BOX_TITLES',
+		titles,
+	};
+}
+
 /**
  * Returns an action object used to request meta box update.
  *

packages/edit-post/src/store/reducer.js

@@ -202,12 +202,25 @@ export function activeMetaBoxLocations( state = [], action ) {
 	return state;
 }
 
+export function metaBoxTitles( state = {}, action ) {
+	switch ( action.type ) {
+		case 'SET_META_BOX_TITLES':
+			return {
+				...state,
+				...action.titles,
+			};
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	preferences,
 	activeGeneralSidebar,
 	panel,
 	activeModal,
 	publishSidebarActive,
 	activeMetaBoxLocations,
+	metaBoxTitles,
 	isSavingMetaBoxes,
 } );

packages/edit-post/src/store/selectors.js

@@ -239,6 +239,10 @@ export function isMetaBoxLocationActive( state, location ) {
 	return getActiveMetaBoxLocations( state ).includes( location );
 }
 
+export function getMetaBoxTitles( state ) {
+	return state.metaBoxTitles;
+}
+
 /**
  * Returns the state of legacy meta boxes.
  *