From 409809312bfbcd1bad517e38f7ec25e1701479c5 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 26 Oct 2018 13:52:49 +1100
Subject: [PATCH 1/9] Advanced Panels: Add support for the 'Custom Fields' meta
 box

- Adds an option which allows the user to enable the existing
  'postcustom' meta box included in WordPress.
- Don't load the 'postcustom' assets when the option is disabled.
- Stores the option as a site option.
- Reload the editor when the option is changed.
---
 lib/client-assets.php                         | 15 +++-
 lib/meta-box-partial-page.php                 | 52 +++++++++++-
 .../src/components/options-modal/index.js     | 29 +++++--
 .../src/components/options-modal/options.js   | 85 -------------------
 .../components/options-modal/options/base.js  | 17 ++++
 .../options-modal/options/deferred.js         | 36 ++++++++
 .../options/enable-custom-fields.js           | 48 +++++++++++
 .../options-modal/options/enable-panel.js     | 19 +++++
 .../options/enable-publish-sidebar.js         | 26 ++++++
 .../options-modal/options/enable-tips.js      | 27 ++++++
 .../components/options-modal/options/index.js |  4 +
 .../test/__snapshots__/index.js.snap          | 17 ++--
 12 files changed, 275 insertions(+), 100 deletions(-)
 delete mode 100644 packages/edit-post/src/components/options-modal/options.js
 create mode 100644 packages/edit-post/src/components/options-modal/options/base.js
 create mode 100644 packages/edit-post/src/components/options-modal/options/deferred.js
 create mode 100644 packages/edit-post/src/components/options-modal/options/enable-custom-fields.js
 create mode 100644 packages/edit-post/src/components/options-modal/options/enable-panel.js
 create mode 100644 packages/edit-post/src/components/options-modal/options/enable-publish-sidebar.js
 create mode 100644 packages/edit-post/src/components/options-modal/options/enable-tips.js
 create mode 100644 packages/edit-post/src/components/options-modal/options/index.js

diff --git a/lib/client-assets.php b/lib/client-assets.php
index b68c2fa5c9903..246f9f4cfa2d7 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -1602,14 +1602,27 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		'maxUploadFileSize'      => $max_upload_size,
 		'allowedMimeTypes'       => get_allowed_mime_types(),
 		'styles'                 => $styles,
-		'postLock'               => $lock_details,
 
 		// Ideally, we'd remove this and rely on a REST API endpoint.
+		'postLock'               => $lock_details,
 		'postLockUtils'          => array(
 			'nonce'       => wp_create_nonce( 'lock-post_' . $post->ID ),
 			'unlockNonce' => wp_create_nonce( 'update-post_' . $post->ID ),
 			'ajaxUrl'     => admin_url( 'admin-ajax.php' ),
 		),
+
+		// Whether or not to load the 'postcustom' meta box is stored as a site option
+		// so that we're not always loading its assets.
+		'customFields'           => array(
+			'isEnabled' => get_option( 'enable_custom_fields', false ),
+			'toggleURL' => add_query_arg(
+				array(
+					'action'   => 'toggle_custom_fields',
+					'_wpnonce' => wp_create_nonce( 'toggle_custom_fields' ),
+				),
+				admin_url( 'admin-post.php' )
+			),
+		),
 	);
 
 	$post_autosave = gutenberg_get_autosave_newer_than_post_save( $post );
diff --git a/lib/meta-box-partial-page.php b/lib/meta-box-partial-page.php
index e50aaffb8c3a4..db1ec8b500e7c 100644
--- a/lib/meta-box-partial-page.php
+++ b/lib/meta-box-partial-page.php
@@ -113,7 +113,6 @@ function gutenberg_filter_meta_boxes( $meta_boxes ) {
 	$core_normal_meta_boxes = array(
 		'revisionsdiv',
 		'postexcerpt',
-		'postcustom',
 		'trackbacksdiv',
 		'commentstatusdiv',
 		'commentsdiv',
@@ -121,6 +120,13 @@ function gutenberg_filter_meta_boxes( $meta_boxes ) {
 		'authordiv',
 	);
 
+	// Whether or not to load the 'postcustom' meta box is stored as a site option
+	// so that we're not always loading its assets.
+	$enable_custom_fields = get_option( 'enable_custom_fields', false );
+	if ( ! $enable_custom_fields ) {
+		$core_normal_meta_boxes[] = 'postcustom';
+	}
+
 	$taxonomy_callbacks_to_unset = array(
 		'post_tags_meta_box',
 		'post_categories_meta_box',
@@ -359,6 +365,32 @@ function the_gutenberg_metaboxes() {
 		printf( "<script type='text/javascript'>\n%s\n</script>\n", trim( $script ) );
 	}
 
+	/**
+	 * If the 'postcustom' meta box is enabled, then we need to perform some
+	 * extra initialization on it.
+	 */
+	$enable_custom_fields = get_option( 'enable_custom_fields', false );
+	if ( $enable_custom_fields ) {
+		$script = <<<JS
+			( function( $ ) {
+				if ( $('#postcustom').length ) {
+					$( '#the-list' ).wpList( {
+						addBefore: function( s ) {
+							s.data += '&post_id=' + $('#post_ID').val();
+							return s;
+						},
+						addAfter: function() {
+							$('table#list-table').show();
+						}
+					});
+				}
+			} )( jQuery );
+JS;
+
+		wp_enqueue_script( 'wp-lists' );
+		wp_add_inline_script( 'wp-lists', $script );
+	}
+
 	// Reset meta box data.
 	$wp_meta_boxes = $_original_meta_boxes;
 }
@@ -402,3 +434,21 @@ function gutenberg_meta_box_post_form_hidden_fields( $post ) {
 	// Permalink title nonce.
 	wp_nonce_field( 'samplepermalink', 'samplepermalinknonce', false );
 }
+
+/**
+ * Admin action which toggles the 'enable_custom_fields' option, then redirects
+ * back to the editor. This allows Gutenberg to render a control that lets the
+ * user to completely enable or disable the 'postcustom' meta box.
+ *
+ * @since 5.2.0
+ */
+function gutenberg_toggle_custom_fields() {
+	check_admin_referer( 'toggle_custom_fields' );
+
+	$enable_custom_fields = get_option( 'enable_custom_fields', false );
+	update_option( 'enable_custom_fields', ! $enable_custom_fields );
+
+	wp_safe_redirect( wp_get_referer() );
+}
+
+add_action( 'admin_post_toggle_custom_fields', 'gutenberg_toggle_custom_fields' );
diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js
index 16342d851056c..c7498a1644501 100644
--- a/packages/edit-post/src/components/options-modal/index.js
+++ b/packages/edit-post/src/components/options-modal/index.js
@@ -16,7 +16,12 @@ import { PostTaxonomies, PostExcerptCheck, PageAttributesCheck } from '@wordpres
  * Internal dependencies
  */
 import Section from './section';
-import { EnablePublishSidebarOption, EnableTipsOption, EnablePanelOption } from './options';
+import {
+	EnablePublishSidebarOption,
+	EnableTipsOption,
+	EnablePanelOption,
+	EnableCustomFieldsOption,
+} from './options';
 
 const MODAL_NAME = 'edit-post/options';
 
@@ -54,13 +59,21 @@ export function OptionsModal( { isModalActive, closeModal, metaBoxes = [] } ) {
 					<EnablePanelOption label={ __( 'Page Attributes' ) } panelName="page-attributes" />
 				</PageAttributesCheck>
 			</Section>
-			{ metaBoxes.length !== 0 && (
-				<Section title={ __( 'Advanced Panels' ) }>
-					{ map( metaBoxes, ( { title, id } ) => (
-						<EnablePanelOption key={ id } label={ title } panelName={ `meta-box-${ id }` } />
-					) ) }
-				</Section>
-			) }
+			<Section title={ __( 'Advanced Panels' ) }>
+				<EnableCustomFieldsOption label={ __( 'Custom Fields' ) } />
+				{ map(
+					metaBoxes,
+					( { title, id } ) =>
+						// The 'Custom Fields' meta box is a special case handled above.
+						id !== 'postcustom' && (
+							<EnablePanelOption
+								key={ id }
+								label={ title }
+								panelName={ `meta-box-${ id }` }
+							/>
+						)
+				) }
+			</Section>
 		</Modal>
 	);
 }
diff --git a/packages/edit-post/src/components/options-modal/options.js b/packages/edit-post/src/components/options-modal/options.js
deleted file mode 100644
index 7f9cd5845c968..0000000000000
--- a/packages/edit-post/src/components/options-modal/options.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { CheckboxControl } from '@wordpress/components';
-import { Component } from '@wordpress/element';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { ifViewportMatches } from '@wordpress/viewport';
-
-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() ),
-		};
-	} ),
-	// In < medium viewports we override this option and always show the publish sidebar.
-	// See the edit-post's header component for the specific logic.
-	ifViewportMatches( 'medium' ),
-)( 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 );
diff --git a/packages/edit-post/src/components/options-modal/options/base.js b/packages/edit-post/src/components/options-modal/options/base.js
new file mode 100644
index 0000000000000..1dd5b9d013af0
--- /dev/null
+++ b/packages/edit-post/src/components/options-modal/options/base.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl } from '@wordpress/components';
+
+function BaseOption( { label, isChecked, onChange } ) {
+	return (
+		<CheckboxControl
+			className="edit-post-options-modal__option"
+			label={ label }
+			checked={ isChecked }
+			onChange={ onChange }
+		/>
+	);
+}
+
+export default BaseOption;
diff --git a/packages/edit-post/src/components/options-modal/options/deferred.js b/packages/edit-post/src/components/options-modal/options/deferred.js
new file mode 100644
index 0000000000000..2a0f84348d23b
--- /dev/null
+++ b/packages/edit-post/src/components/options-modal/options/deferred.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BaseOption from './base';
+
+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 (
+			<BaseOption
+				label={ this.props.label }
+				isChecked={ this.state.isChecked }
+				onChange={ ( isChecked ) => this.setState( { isChecked } ) }
+			/>
+		);
+	}
+}
+
+export default DeferredOption;
diff --git a/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js b/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js
new file mode 100644
index 0000000000000..db3e436e9033a
--- /dev/null
+++ b/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BaseOption from './base';
+
+class EnableCustomFieldsOption extends Component {
+	constructor( { settings: { isEnabled } } ) {
+		super( ...arguments );
+
+		this.toggleCustomFields = this.toggleCustomFields.bind( this );
+
+		this.state = { isEnabled };
+	}
+
+	toggleCustomFields() {
+		const { toggleURL, isEnabled } = this.props.settings;
+
+		// Redirect to an admin action that toggles the setting and reloads the editor
+		// with the meta box assets included on the page.
+		window.location.href = toggleURL;
+
+		// Make it look like something happened while the page reloads.
+		this.setState( { isEnabled: ! isEnabled } );
+	}
+
+	render() {
+		const { label } = this.props;
+		const { isEnabled } = this.state;
+
+		return (
+			<BaseOption
+				label={ label }
+				isChecked={ isEnabled }
+				onChange={ this.toggleCustomFields }
+			/>
+		);
+	}
+}
+
+export default withSelect( ( select ) => ( {
+	settings: select( 'core/editor' ).getEditorSettings().customFields,
+} ) )( EnableCustomFieldsOption );
diff --git a/packages/edit-post/src/components/options-modal/options/enable-panel.js b/packages/edit-post/src/components/options-modal/options/enable-panel.js
new file mode 100644
index 0000000000000..d21f1051cb039
--- /dev/null
+++ b/packages/edit-post/src/components/options-modal/options/enable-panel.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BaseOption from './base';
+
+export default compose(
+	withSelect( ( select, { panelName } ) => ( {
+		isChecked: select( 'core/edit-post' ).isEditorPanelEnabled( panelName ),
+	} ) ),
+	withDispatch( ( dispatch, { panelName } ) => ( {
+		onChange: () => dispatch( 'core/edit-post' ).toggleEditorPanelEnabled( panelName ),
+	} ) )
+)( BaseOption );
diff --git a/packages/edit-post/src/components/options-modal/options/enable-publish-sidebar.js b/packages/edit-post/src/components/options-modal/options/enable-publish-sidebar.js
new file mode 100644
index 0000000000000..e080fae578127
--- /dev/null
+++ b/packages/edit-post/src/components/options-modal/options/enable-publish-sidebar.js
@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { ifViewportMatches } from '@wordpress/viewport';
+
+/**
+ * Internal dependencies
+ */
+import BaseOption from './base';
+
+export default compose(
+	withSelect( ( select ) => ( {
+		isChecked: select( 'core/editor' ).isPublishSidebarEnabled(),
+	} ) ),
+	withDispatch( ( dispatch ) => {
+		const { enablePublishSidebar, disablePublishSidebar } = dispatch( 'core/editor' );
+		return {
+			onChange: ( isEnabled ) => ( isEnabled ? enablePublishSidebar() : disablePublishSidebar() ),
+		};
+	} ),
+	// In < medium viewports we override this option and always show the publish sidebar.
+	// See the edit-post's header component for the specific logic.
+	ifViewportMatches( 'medium' ),
+)( BaseOption );
diff --git a/packages/edit-post/src/components/options-modal/options/enable-tips.js b/packages/edit-post/src/components/options-modal/options/enable-tips.js
new file mode 100644
index 0000000000000..8771f8437ba53
--- /dev/null
+++ b/packages/edit-post/src/components/options-modal/options/enable-tips.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import DeferredOption from './deferred';
+
+export default 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
+);
diff --git a/packages/edit-post/src/components/options-modal/options/index.js b/packages/edit-post/src/components/options-modal/options/index.js
new file mode 100644
index 0000000000000..7961206caba4e
--- /dev/null
+++ b/packages/edit-post/src/components/options-modal/options/index.js
@@ -0,0 +1,4 @@
+export { default as EnableCustomFieldsOption } from './enable-custom-fields';
+export { default as EnablePanelOption } from './enable-panel';
+export { default as EnablePublishSidebarOption } from './enable-publish-sidebar';
+export { default as EnableTipsOption } from './enable-tips';
diff --git a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
index 826f329f242df..5791ec6904186 100644
--- a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
@@ -15,7 +15,7 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
   <Section
     title="General"
   >
-    <WithSelect(WithDispatch(IfViewportMatches(Option)))
+    <WithSelect(WithDispatch(IfViewportMatches(BaseOption)))
       label="Enable Pre-publish Checks"
     />
     <WithSelect(WithDispatch(DeferredOption))
@@ -28,26 +28,33 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
     <WithSelect(PostTaxonomies)
       taxonomyWrapper={[Function]}
     />
-    <WithSelect(WithDispatch(Option))
+    <WithSelect(WithDispatch(BaseOption))
       label="Featured Image"
       panelName="featured-image"
     />
     <PostExcerptCheck>
-      <WithSelect(WithDispatch(Option))
+      <WithSelect(WithDispatch(BaseOption))
         label="Excerpt"
         panelName="post-excerpt"
       />
     </PostExcerptCheck>
-    <WithSelect(WithDispatch(Option))
+    <WithSelect(WithDispatch(BaseOption))
       label="Discussion"
       panelName="discussion-panel"
     />
     <WithSelect(PageAttributesCheck)>
-      <WithSelect(WithDispatch(Option))
+      <WithSelect(WithDispatch(BaseOption))
         label="Page Attributes"
         panelName="page-attributes"
       />
     </WithSelect(PageAttributesCheck)>
   </Section>
+  <Section
+    title="Advanced Panels"
+  >
+    <WithSelect(EnableCustomFieldsOption)
+      label="Custom Fields"
+    />
+  </Section>
 </WithInstanceId(Modal)>
 `;

From 8e4bae567dd3d96e48f9906235352c37309e69f6 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 26 Oct 2018 15:57:59 +1100
Subject: [PATCH 2/9] Fix E2E tests

The 'Enable Tips' checkbox is obscured by the first Tip now that the
Options modal is taller. Work around this by only testing that tips can
be re-enabled.
---
 test/e2e/specs/nux.test.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/test/e2e/specs/nux.test.js b/test/e2e/specs/nux.test.js
index e18788218e546..8702587f6b55b 100644
--- a/test/e2e/specs/nux.test.js
+++ b/test/e2e/specs/nux.test.js
@@ -87,16 +87,12 @@ describe( 'New User Experience (NUX)', () => {
 		expect( nuxTipElements ).toHaveLength( 0 );
 	} );
 
-	it( 'should toggle tips when the "Enable tips" option is toggled', async () => {
-		// Tips should be enabled at first.
-		let nuxTipElements = await page.$$( '.nux-dot-tip' );
-		expect( nuxTipElements ).toHaveLength( 1 );
-
-		// Toggle the 'Enable Tips' option to disable.
-		await toggleOption( 'Enable Tips' );
+	it( 'should enable tips when the "Enable tips" option is toggled on', async () => {
+		// Start by disabling tips.
+		await page.click( '.nux-dot-tip__disable' );
 
-		// Should disable tips from appearing.
-		nuxTipElements = await page.$$( '.nux-dot-tip' );
+		// Verify no more tips are visible on the page.
+		let nuxTipElements = await page.$$( '.nux-dot-tip' );
 		expect( nuxTipElements ).toHaveLength( 0 );
 
 		// Tips should be disabled in localStorage as well.

From d91cd88d35e533b84d40cb5433220f29fc0ece3a Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 29 Oct 2018 10:28:40 +1100
Subject: [PATCH 3/9] Custom Fields: Remove unnecessary jQuery selector

We can simply interpolate $post->ID when initializing Custom Fields,
rather than selecting from the #post_ID hidden field.
---
 lib/meta-box-partial-page.php | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/lib/meta-box-partial-page.php b/lib/meta-box-partial-page.php
index db1ec8b500e7c..b5850fd51717a 100644
--- a/lib/meta-box-partial-page.php
+++ b/lib/meta-box-partial-page.php
@@ -371,21 +371,19 @@ function the_gutenberg_metaboxes() {
 	 */
 	$enable_custom_fields = get_option( 'enable_custom_fields', false );
 	if ( $enable_custom_fields ) {
-		$script = <<<JS
-			( function( $ ) {
-				if ( $('#postcustom').length ) {
-					$( '#the-list' ).wpList( {
-						addBefore: function( s ) {
-							s.data += '&post_id=' + $('#post_ID').val();
-							return s;
-						},
-						addAfter: function() {
-							$('table#list-table').show();
-						}
-					});
-				}
-			} )( jQuery );
-JS;
+		$script = "( function( $ ) {
+			if ( $('#postcustom').length ) {
+				$( '#the-list' ).wpList( {
+					addBefore: function( s ) {
+						s.data += '&post_id=$post->ID';
+						return s;
+					},
+					addAfter: function() {
+						$('table#list-table').show();
+					}
+				});
+			}
+		} )( jQuery );";
 
 		wp_enqueue_script( 'wp-lists' );
 		wp_add_inline_script( 'wp-lists', $script );

From 391fbfc6a7d7eb5014f575688c6784e28590833e Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 29 Oct 2018 10:56:48 +1100
Subject: [PATCH 4/9] Custom Fields: Use user meta field instead of site option

By using `get_user_meta()` instead of `get_option()`, the Custom Fields
setting won't affect other users.
---
 lib/client-assets.php         |  2 +-
 lib/meta-box-partial-page.php | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index 246f9f4cfa2d7..e9e87e1ad7976 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -1614,7 +1614,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		// Whether or not to load the 'postcustom' meta box is stored as a site option
 		// so that we're not always loading its assets.
 		'customFields'           => array(
-			'isEnabled' => get_option( 'enable_custom_fields', false ),
+			'isEnabled' => (bool) get_user_meta( get_current_user_id(), 'enable_custom_fields', true ),
 			'toggleURL' => add_query_arg(
 				array(
 					'action'   => 'toggle_custom_fields',
diff --git a/lib/meta-box-partial-page.php b/lib/meta-box-partial-page.php
index b5850fd51717a..02584031bd53c 100644
--- a/lib/meta-box-partial-page.php
+++ b/lib/meta-box-partial-page.php
@@ -120,9 +120,9 @@ function gutenberg_filter_meta_boxes( $meta_boxes ) {
 		'authordiv',
 	);
 
-	// Whether or not to load the 'postcustom' meta box is stored as a site option
-	// so that we're not always loading its assets.
-	$enable_custom_fields = get_option( 'enable_custom_fields', false );
+	// Whether or not to load the 'postcustom' meta box is stored as a user meta
+	// field so that we're not always loading its assets.
+	$enable_custom_fields = (bool) get_user_meta( get_current_user_id(), 'enable_custom_fields', true );
 	if ( ! $enable_custom_fields ) {
 		$core_normal_meta_boxes[] = 'postcustom';
 	}
@@ -369,7 +369,7 @@ function the_gutenberg_metaboxes() {
 	 * If the 'postcustom' meta box is enabled, then we need to perform some
 	 * extra initialization on it.
 	 */
-	$enable_custom_fields = get_option( 'enable_custom_fields', false );
+	$enable_custom_fields = (bool) get_user_meta( get_current_user_id(), 'enable_custom_fields', true );
 	if ( $enable_custom_fields ) {
 		$script = "( function( $ ) {
 			if ( $('#postcustom').length ) {
@@ -443,8 +443,11 @@ function gutenberg_meta_box_post_form_hidden_fields( $post ) {
 function gutenberg_toggle_custom_fields() {
 	check_admin_referer( 'toggle_custom_fields' );
 
-	$enable_custom_fields = get_option( 'enable_custom_fields', false );
-	update_option( 'enable_custom_fields', ! $enable_custom_fields );
+	$current_user_id = get_current_user_id();
+	if ( $current_user_id ) {
+		$enable_custom_fields = (bool) get_user_meta( $current_user_id, 'enable_custom_fields', true );
+		update_user_meta( $current_user_id, 'enable_custom_fields', ! $enable_custom_fields );
+	}
 
 	wp_safe_redirect( wp_get_referer() );
 }

From cba77479ee8a01c463fe36027105775f90bf6b5e Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 29 Oct 2018 10:59:41 +1100
Subject: [PATCH 5/9] Custom Fields: Kill the process after redirecting

---
 lib/meta-box-partial-page.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/meta-box-partial-page.php b/lib/meta-box-partial-page.php
index 02584031bd53c..95348ede8d72e 100644
--- a/lib/meta-box-partial-page.php
+++ b/lib/meta-box-partial-page.php
@@ -450,6 +450,7 @@ function gutenberg_toggle_custom_fields() {
 	}
 
 	wp_safe_redirect( wp_get_referer() );
+	exit;
 }
 
 add_action( 'admin_post_toggle_custom_fields', 'gutenberg_toggle_custom_fields' );

From 2491a1835fb2a2e07907d4a0f04b0912d1a54138 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 29 Oct 2018 11:25:32 +1100
Subject: [PATCH 6/9] Custom Fields: Use hidden <form> instead of redirect

Trigger the toggle_custom_fields action using a hidden <form> so that
the action is triggered by a POST request rather than a GET request.
---
 lib/client-assets.php                             | 15 +++------------
 lib/meta-box-partial-page.php                     |  4 ++++
 .../options-modal/options/enable-custom-fields.js | 15 +++++++--------
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index e9e87e1ad7976..d8792b5fa2e96 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -1611,18 +1611,9 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 			'ajaxUrl'     => admin_url( 'admin-ajax.php' ),
 		),
 
-		// Whether or not to load the 'postcustom' meta box is stored as a site option
-		// so that we're not always loading its assets.
-		'customFields'           => array(
-			'isEnabled' => (bool) get_user_meta( get_current_user_id(), 'enable_custom_fields', true ),
-			'toggleURL' => add_query_arg(
-				array(
-					'action'   => 'toggle_custom_fields',
-					'_wpnonce' => wp_create_nonce( 'toggle_custom_fields' ),
-				),
-				admin_url( 'admin-post.php' )
-			),
-		),
+		// Whether or not to load the 'postcustom' meta box is stored as a user meta
+		// field so that we're not always loading its assets.
+		'enableCustomFields'     => (bool) get_user_meta( get_current_user_id(), 'enable_custom_fields', true ),
 	);
 
 	$post_autosave = gutenberg_get_autosave_newer_than_post_save( $post );
diff --git a/lib/meta-box-partial-page.php b/lib/meta-box-partial-page.php
index 95348ede8d72e..b77492bbbb87a 100644
--- a/lib/meta-box-partial-page.php
+++ b/lib/meta-box-partial-page.php
@@ -304,6 +304,10 @@ function the_gutenberg_metaboxes() {
 	<form class="metabox-base-form">
 	<?php gutenberg_meta_box_post_form_hidden_fields( $post ); ?>
 	</form>
+	<form id="toggle-custom-fields-form" method="post" action="<?php echo esc_attr( admin_url( 'admin-post.php' ) ); ?>">
+		<?php wp_nonce_field( 'toggle_custom_fields' ); ?>
+		<input type="hidden" name="action" value="toggle_custom_fields" />
+	</form>
 	<?php foreach ( $locations as $location ) : ?>
 		<form class="metabox-location-<?php echo esc_attr( $location ); ?>">
 			<div id="poststuff" class="sidebar-open">
diff --git a/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js b/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js
index db3e436e9033a..a9157e246a2d6 100644
--- a/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js
+++ b/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js
@@ -10,7 +10,7 @@ import { withSelect } from '@wordpress/data';
 import BaseOption from './base';
 
 class EnableCustomFieldsOption extends Component {
-	constructor( { settings: { isEnabled } } ) {
+	constructor( { isEnabled } ) {
 		super( ...arguments );
 
 		this.toggleCustomFields = this.toggleCustomFields.bind( this );
@@ -19,14 +19,13 @@ class EnableCustomFieldsOption extends Component {
 	}
 
 	toggleCustomFields() {
-		const { toggleURL, isEnabled } = this.props.settings;
-
-		// Redirect to an admin action that toggles the setting and reloads the editor
-		// with the meta box assets included on the page.
-		window.location.href = toggleURL;
+		// Submit a hidden form which triggers the toggle_custom_fields admin action.
+		// This action will toggle the setting and reload the editor with the meta box
+		// assets included on the page.
+		document.getElementById( 'toggle-custom-fields-form' ).submit();
 
 		// Make it look like something happened while the page reloads.
-		this.setState( { isEnabled: ! isEnabled } );
+		this.setState( { isEnabled: ! this.props.isEnabled } );
 	}
 
 	render() {
@@ -44,5 +43,5 @@ class EnableCustomFieldsOption extends Component {
 }
 
 export default withSelect( ( select ) => ( {
-	settings: select( 'core/editor' ).getEditorSettings().customFields,
+	isEnabled: select( 'core/editor' ).getEditorSettings().enableCustomFields,
 } ) )( EnableCustomFieldsOption );

From 2c11c00ac6d9257b0df9ef63e7f8425906be9152 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 2 Nov 2018 10:15:31 +1100
Subject: [PATCH 7/9] =?UTF-8?q?Custom=20Fields:=20Rename=20isEnabled=20?=
 =?UTF-8?q?=E2=86=92=20isChecked?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../options-modal/options/enable-custom-fields.js    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js b/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js
index a9157e246a2d6..a22f96250ccad 100644
--- a/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js
+++ b/packages/edit-post/src/components/options-modal/options/enable-custom-fields.js
@@ -10,12 +10,12 @@ import { withSelect } from '@wordpress/data';
 import BaseOption from './base';
 
 class EnableCustomFieldsOption extends Component {
-	constructor( { isEnabled } ) {
+	constructor( { isChecked } ) {
 		super( ...arguments );
 
 		this.toggleCustomFields = this.toggleCustomFields.bind( this );
 
-		this.state = { isEnabled };
+		this.state = { isChecked };
 	}
 
 	toggleCustomFields() {
@@ -25,17 +25,17 @@ class EnableCustomFieldsOption extends Component {
 		document.getElementById( 'toggle-custom-fields-form' ).submit();
 
 		// Make it look like something happened while the page reloads.
-		this.setState( { isEnabled: ! this.props.isEnabled } );
+		this.setState( { isChecked: ! this.props.isChecked } );
 	}
 
 	render() {
 		const { label } = this.props;
-		const { isEnabled } = this.state;
+		const { isChecked } = this.state;
 
 		return (
 			<BaseOption
 				label={ label }
-				isChecked={ isEnabled }
+				isChecked={ isChecked }
 				onChange={ this.toggleCustomFields }
 			/>
 		);
@@ -43,5 +43,5 @@ class EnableCustomFieldsOption extends Component {
 }
 
 export default withSelect( ( select ) => ( {
-	isEnabled: select( 'core/editor' ).getEditorSettings().enableCustomFields,
+	isChecked: select( 'core/editor' ).getEditorSettings().enableCustomFields,
 } ) )( EnableCustomFieldsOption );

From a7d0a0ca219cc42cc83388a3a8c97b2ae3a8dba0 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 2 Nov 2018 10:13:56 +1100
Subject: [PATCH 8/9] Custom Fields: Move meta box options into their own
 component

---
 .../src/components/options-modal/index.js     | 23 +++---------
 .../options-modal/meta-box-section.js         | 36 +++++++++++++++++++
 .../test/__snapshots__/index.js.snap          |  4 +--
 3 files changed, 41 insertions(+), 22 deletions(-)
 create mode 100644 packages/edit-post/src/components/options-modal/meta-box-section.js

diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js
index c7498a1644501..67453859b8d3b 100644
--- a/packages/edit-post/src/components/options-modal/index.js
+++ b/packages/edit-post/src/components/options-modal/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, map } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -20,12 +20,12 @@ import {
 	EnablePublishSidebarOption,
 	EnableTipsOption,
 	EnablePanelOption,
-	EnableCustomFieldsOption,
 } from './options';
+import MetaBoxSection from './meta-box-section';
 
 const MODAL_NAME = 'edit-post/options';
 
-export function OptionsModal( { isModalActive, closeModal, metaBoxes = [] } ) {
+export function OptionsModal( { isModalActive, closeModal } ) {
 	if ( ! isModalActive ) {
 		return null;
 	}
@@ -59,21 +59,7 @@ export function OptionsModal( { isModalActive, closeModal, metaBoxes = [] } ) {
 					<EnablePanelOption label={ __( 'Page Attributes' ) } panelName="page-attributes" />
 				</PageAttributesCheck>
 			</Section>
-			<Section title={ __( 'Advanced Panels' ) }>
-				<EnableCustomFieldsOption label={ __( 'Custom Fields' ) } />
-				{ map(
-					metaBoxes,
-					( { title, id } ) =>
-						// The 'Custom Fields' meta box is a special case handled above.
-						id !== 'postcustom' && (
-							<EnablePanelOption
-								key={ id }
-								label={ title }
-								panelName={ `meta-box-${ id }` }
-							/>
-						)
-				) }
-			</Section>
+			<MetaBoxSection title={ __( 'Advanced Panels' ) } />
 		</Modal>
 	);
 }
@@ -81,7 +67,6 @@ export function OptionsModal( { isModalActive, closeModal, metaBoxes = [] } ) {
 export default compose(
 	withSelect( ( select ) => ( {
 		isModalActive: select( 'core/edit-post' ).isModalActive( MODAL_NAME ),
-		metaBoxes: select( 'core/edit-post' ).getAllMetaBoxes(),
 	} ) ),
 	withDispatch( ( dispatch ) => {
 		return {
diff --git a/packages/edit-post/src/components/options-modal/meta-box-section.js b/packages/edit-post/src/components/options-modal/meta-box-section.js
new file mode 100644
index 0000000000000..99e91e0c4de02
--- /dev/null
+++ b/packages/edit-post/src/components/options-modal/meta-box-section.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import Section from './section';
+import { EnableCustomFieldsOption, EnablePanelOption } from './options';
+
+function MetaBoxSection( { metaBoxes = [], ...sectionProps } ) {
+	return (
+		<Section { ...sectionProps }>
+			<EnableCustomFieldsOption label={ __( 'Custom Fields' ) } />
+			{ map(
+				metaBoxes,
+				( { title, id } ) =>
+					// The 'Custom Fields' meta box is a special case handled above.
+					id !== 'postcustom' && (
+						<EnablePanelOption key={ id } label={ title } panelName={ `meta-box-${ id }` } />
+					)
+			) }
+		</Section>
+	);
+}
+
+export default withSelect( ( select ) => ( {
+	metaBoxes: select( 'core/edit-post' ).getAllMetaBoxes(),
+} ) )( MetaBoxSection );
diff --git a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
index 5791ec6904186..b4c7465095e7f 100644
--- a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
@@ -52,9 +52,7 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
   <Section
     title="Advanced Panels"
   >
-    <WithSelect(EnableCustomFieldsOption)
-      label="Custom Fields"
-    />
+    <WithSelect(MetaBoxOptions) />
   </Section>
 </WithInstanceId(Modal)>
 `;

From 6368b56edca46782e966c357a8faa2158c67d88d Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 2 Nov 2018 11:12:47 +1100
Subject: [PATCH 9/9] Custom Fields: Only show option if custom fields are
 supported

---
 .../src/components/options-modal/index.js     |  4 +-
 .../options-modal/meta-box-section.js         | 36 -------------
 .../options-modal/meta-boxes-section.js       | 50 +++++++++++++++++++
 .../test/__snapshots__/index.js.snap          |  6 +--
 4 files changed, 54 insertions(+), 42 deletions(-)
 delete mode 100644 packages/edit-post/src/components/options-modal/meta-box-section.js
 create mode 100644 packages/edit-post/src/components/options-modal/meta-boxes-section.js

diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js
index 67453859b8d3b..2206847f19d59 100644
--- a/packages/edit-post/src/components/options-modal/index.js
+++ b/packages/edit-post/src/components/options-modal/index.js
@@ -21,7 +21,7 @@ import {
 	EnableTipsOption,
 	EnablePanelOption,
 } from './options';
-import MetaBoxSection from './meta-box-section';
+import MetaBoxesSection from './meta-boxes-section';
 
 const MODAL_NAME = 'edit-post/options';
 
@@ -59,7 +59,7 @@ export function OptionsModal( { isModalActive, closeModal } ) {
 					<EnablePanelOption label={ __( 'Page Attributes' ) } panelName="page-attributes" />
 				</PageAttributesCheck>
 			</Section>
-			<MetaBoxSection title={ __( 'Advanced Panels' ) } />
+			<MetaBoxesSection title={ __( 'Advanced Panels' ) } />
 		</Modal>
 	);
 }
diff --git a/packages/edit-post/src/components/options-modal/meta-box-section.js b/packages/edit-post/src/components/options-modal/meta-box-section.js
deleted file mode 100644
index 99e91e0c4de02..0000000000000
--- a/packages/edit-post/src/components/options-modal/meta-box-section.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import Section from './section';
-import { EnableCustomFieldsOption, EnablePanelOption } from './options';
-
-function MetaBoxSection( { metaBoxes = [], ...sectionProps } ) {
-	return (
-		<Section { ...sectionProps }>
-			<EnableCustomFieldsOption label={ __( 'Custom Fields' ) } />
-			{ map(
-				metaBoxes,
-				( { title, id } ) =>
-					// The 'Custom Fields' meta box is a special case handled above.
-					id !== 'postcustom' && (
-						<EnablePanelOption key={ id } label={ title } panelName={ `meta-box-${ id }` } />
-					)
-			) }
-		</Section>
-	);
-}
-
-export default withSelect( ( select ) => ( {
-	metaBoxes: select( 'core/edit-post' ).getAllMetaBoxes(),
-} ) )( MetaBoxSection );
diff --git a/packages/edit-post/src/components/options-modal/meta-boxes-section.js b/packages/edit-post/src/components/options-modal/meta-boxes-section.js
new file mode 100644
index 0000000000000..414ed37d34b01
--- /dev/null
+++ b/packages/edit-post/src/components/options-modal/meta-boxes-section.js
@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import Section from './section';
+import { EnableCustomFieldsOption, EnablePanelOption } from './options';
+
+function MetaBoxesSection( { hasCustomFieldsSupport, metaBoxes, ...sectionProps } ) {
+	if ( ! hasCustomFieldsSupport && metaBoxes.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<Section { ...sectionProps }>
+			{ hasCustomFieldsSupport && (
+				<EnableCustomFieldsOption label={ __( 'Custom Fields' ) } />
+			) }
+			{ map(
+				metaBoxes,
+				( { id, title } ) =>
+					// The 'Custom Fields' meta box is a special case handled above.
+					id !== 'postcustom' && (
+						<EnablePanelOption key={ id } label={ title } panelName={ `meta-box-${ id }` } />
+					)
+			) }
+		</Section>
+	);
+}
+
+export default withSelect( ( select ) => {
+	const { getEditedPostAttribute } = select( 'core/editor' );
+	const { getPostType } = select( 'core' );
+	const { getAllMetaBoxes } = select( 'core/edit-post' );
+
+	const postType = getPostType( getEditedPostAttribute( 'type' ) );
+	return {
+		hasCustomFieldsSupport: postType.supports[ 'custom-fields' ],
+		metaBoxes: getAllMetaBoxes(),
+	};
+} )( MetaBoxesSection );
diff --git a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
index b4c7465095e7f..67df8a5bd6089 100644
--- a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
+++ b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap
@@ -49,10 +49,8 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
       />
     </WithSelect(PageAttributesCheck)>
   </Section>
-  <Section
+  <WithSelect(MetaBoxesSection)
     title="Advanced Panels"
-  >
-    <WithSelect(MetaBoxOptions) />
-  </Section>
+  />
 </WithInstanceId(Modal)>
 `;