Advanced Panels: Add support for the 'Custom Fields' meta box

lib/client-assets.php

@@ -1602,14 +1602,18 @@ 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 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 );

lib/meta-box-partial-page.php

@@ -113,14 +113,20 @@ function gutenberg_filter_meta_boxes( $meta_boxes ) {
 	$core_normal_meta_boxes = array(
 		'revisionsdiv',
 		'postexcerpt',
-		'postcustom',
 		'trackbacksdiv',
 		'commentstatusdiv',
 		'commentsdiv',
 		'slugdiv',
 		'authordiv',
 	);
 
+	// 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';
+	}
+
 	$taxonomy_callbacks_to_unset = array(
 		'post_tags_meta_box',
 		'post_categories_meta_box',
@@ -298,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">
@@ -359,6 +369,30 @@ 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 = (bool) get_user_meta( get_current_user_id(), 'enable_custom_fields', true );
+	if ( $enable_custom_fields ) {
+		$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 );
+	}
+
 	// Reset meta box data.
 	$wp_meta_boxes = $_original_meta_boxes;
 }
@@ -402,3 +436,25 @@ 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' );
+
+	$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() );
+	exit;
+}
+
+add_action( 'admin_post_toggle_custom_fields', 'gutenberg_toggle_custom_fields' );

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
@@ -16,11 +16,16 @@ import { PostTaxonomies, PostExcerptCheck, PageAttributesCheck } from '@wordpres
  * Internal dependencies
  */
 import Section from './section';
-import { EnablePublishSidebarOption, EnableTipsOption, EnablePanelOption } from './options';
+import {
+	EnablePublishSidebarOption,
+	EnableTipsOption,
+	EnablePanelOption,
+} from './options';
+import MetaBoxesSection from './meta-boxes-section';
 
 const MODAL_NAME = 'edit-post/options';
 
-export function OptionsModal( { isModalActive, closeModal, metaBoxes = [] } ) {
+export function OptionsModal( { isModalActive, closeModal } ) {
 	if ( ! isModalActive ) {
 		return null;
 	}
@@ -54,21 +59,14 @@ 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>
-			) }
+			<MetaBoxesSection title={ __( 'Advanced Panels' ) } />
 		</Modal>
 	);
 }
 
 export default compose(
 	withSelect( ( select ) => ( {
 		isModalActive: select( 'core/edit-post' ).isModalActive( MODAL_NAME ),
-		metaBoxes: select( 'core/edit-post' ).getAllMetaBoxes(),
 	} ) ),
 	withDispatch( ( dispatch ) => {
 		return {

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 );

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;

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;