Custom Fields option: Add confirmation step

packages/e2e-tests/specs/preview.test.js

@@ -70,8 +70,10 @@ async function toggleCustomFieldsOption( shouldBeChecked ) {
 	);
 
 	if ( isChecked !== shouldBeChecked ) {
-		const navigationCompleted = page.waitForNavigation();
 		await checkboxHandle.click();
+		const [ saveButton ] = await page.$x( shouldBeChecked ? '//button[text()="Enable & Reload"]' : '//button[text()="Disable & Reload"]' );
+		const navigationCompleted = page.waitForNavigation();
+		saveButton.click();
 		await navigationCompleted;
 		return;
 	}

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

@@ -3,14 +3,16 @@
  */
 import { CheckboxControl } from '@wordpress/components';
 
-function BaseOption( { label, isChecked, onChange } ) {
+function BaseOption( { label, isChecked, onChange, children } ) {
 	return (
-		<CheckboxControl
-			className="edit-post-options-modal__option"
-			label={ label }
-			checked={ isChecked }
-			onChange={ onChange }
-		/>
+		<div className="edit-post-options-modal__option">
+			<CheckboxControl
+				label={ label }
+				checked={ isChecked }
+				onChange={ onChange }
+			/>
+			{ children }
+		</div>
 	);
 }
 

packages/edit-post/src/components/options-modal/options/enable-custom-fields.js

@@ -1,47 +1,54 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import BaseOption from './base';
 
-export class EnableCustomFieldsOption extends Component {
-	constructor( { isChecked } ) {
-		super( ...arguments );
-
-		this.toggleCustomFields = this.toggleCustomFields.bind( this );
-
-		this.state = { isChecked };
-	}
-
-	toggleCustomFields() {
-		// 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( { isChecked: ! this.props.isChecked } );
-	}
-
-	render() {
-		const { label } = this.props;
-		const { isChecked } = this.state;
+export function CustomFieldsConfirmation( { willEnable } ) {
+	const [ isReloading, setIsReloading ] = useState( false );
+
+	return (
+		<>
+			<p className="edit-post-options-modal__custom-fields-confirmation-message">
+				{ __( 'A page reload is required for this change. Make sure your content is saved before reloading.' ) }
+			</p>
+			<Button
+				className="edit-post-options-modal__custom-fields-confirmation-button"
+				isDefault
+				isBusy={ isReloading }
+				disabled={ isReloading }
+				onClick={ () => {
+					setIsReloading( true );
+					document.getElementById( 'toggle-custom-fields-form' ).submit();
+				} }
+			>
+				{ willEnable ? __( 'Enable & Reload' ) : __( 'Disable & Reload' ) }
+			</Button>
+		</>
+	);
+}
 
-		return (
-			<BaseOption
-				label={ label }
-				isChecked={ isChecked }
-				onChange={ this.toggleCustomFields }
-			/>
-		);
-	}
+export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
+	const [ isChecked, setIsChecked ] = useState( areCustomFieldsEnabled );
+
+	return (
+		<BaseOption
+			label={ label }
+			isChecked={ isChecked }
+			onChange={ setIsChecked }
+		>
+			{ isChecked !== areCustomFieldsEnabled && <CustomFieldsConfirmation willEnable={ isChecked } /> }
+		</BaseOption>
+	);
 }
 
 export default withSelect( ( select ) => ( {
-	isChecked: !! select( 'core/editor' ).getEditorSettings().enableCustomFields,
+	areCustomFieldsEnabled: !! select( 'core/editor' ).getEditorSettings().enableCustomFields,
 } ) )( EnableCustomFieldsOption );

packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap

@@ -1,17 +1,135 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EnableCustomFieldsOption renders properly when checked 1`] = `
-<BaseOption
-  isChecked={true}
-  label="Custom Fields"
-  onChange={[Function]}
-/>
+exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation message when toggled on 1`] = `
+<div
+  className="edit-post-options-modal__option"
+>
+  <div
+    className="components-base-control"
+  >
+    <div
+      className="components-base-control__field"
+    >
+      <input
+        checked={true}
+        className="components-checkbox-control__input"
+        id="inspector-checkbox-control-3"
+        onChange={[Function]}
+        type="checkbox"
+        value="1"
+      />
+      <label
+        className="components-checkbox-control__label"
+        htmlFor="inspector-checkbox-control-3"
+      />
+    </div>
+  </div>
+  <p
+    className="edit-post-options-modal__custom-fields-confirmation-message"
+  >
+    A page reload is required for this change. Make sure your content is saved before reloading.
+  </p>
+  <button
+    className="components-button edit-post-options-modal__custom-fields-confirmation-button is-button is-default"
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Enable & Reload
+  </button>
+</div>
 `;
 
-exports[`EnableCustomFieldsOption renders properly when unchecked 1`] = `
-<BaseOption
-  isChecked={false}
-  label="Custom Fields"
-  onChange={[Function]}
-/>
+exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields are enabled 1`] = `
+<div
+  className="edit-post-options-modal__option"
+>
+  <div
+    className="components-base-control"
+  >
+    <div
+      className="components-base-control__field"
+    >
+      <input
+        checked={true}
+        className="components-checkbox-control__input"
+        id="inspector-checkbox-control-0"
+        onChange={[Function]}
+        type="checkbox"
+        value="1"
+      />
+      <label
+        className="components-checkbox-control__label"
+        htmlFor="inspector-checkbox-control-0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmation message when toggled off 1`] = `
+<div
+  className="edit-post-options-modal__option"
+>
+  <div
+    className="components-base-control"
+  >
+    <div
+      className="components-base-control__field"
+    >
+      <input
+        checked={false}
+        className="components-checkbox-control__input"
+        id="inspector-checkbox-control-2"
+        onChange={[Function]}
+        type="checkbox"
+        value="1"
+      />
+      <label
+        className="components-checkbox-control__label"
+        htmlFor="inspector-checkbox-control-2"
+      />
+    </div>
+  </div>
+  <p
+    className="edit-post-options-modal__custom-fields-confirmation-message"
+  >
+    A page reload is required for this change. Make sure your content is saved before reloading.
+  </p>
+  <button
+    className="components-button edit-post-options-modal__custom-fields-confirmation-button is-button is-default"
+    disabled={false}
+    onClick={[Function]}
+    type="button"
+  >
+    Disable & Reload
+  </button>
+</div>
+`;
+
+exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fields are disabled 1`] = `
+<div
+  className="edit-post-options-modal__option"
+>
+  <div
+    className="components-base-control"
+  >
+    <div
+      className="components-base-control__field"
+    >
+      <input
+        checked={false}
+        className="components-checkbox-control__input"
+        id="inspector-checkbox-control-1"
+        onChange={[Function]}
+        type="checkbox"
+        value="1"
+      />
+      <label
+        className="components-checkbox-control__label"
+        htmlFor="inspector-checkbox-control-1"
+      />
+    </div>
+  </div>
+</div>
 `;

packages/edit-post/src/components/options-modal/options/test/enable-custom-fields.js

@@ -1,62 +1,63 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { default as TestRenderer, act } from 'react-test-renderer';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { EnableCustomFieldsOption } from '../enable-custom-fields';
+import { EnableCustomFieldsOption, CustomFieldsConfirmation } from '../enable-custom-fields';
+import BaseOption from '../base';
 
 describe( 'EnableCustomFieldsOption', () => {
-	it( 'renders properly when checked', () => {
-		const wrapper = shallow( <EnableCustomFieldsOption label="Custom Fields" isChecked /> );
-		expect( wrapper ).toMatchSnapshot();
+	it( 'renders a checked checkbox when custom fields are enabled', () => {
+		const renderer = TestRenderer.create( <EnableCustomFieldsOption areCustomFieldsEnabled /> );
+		expect( renderer ).toMatchSnapshot();
 	} );
 
-	it( 'can be unchecked', () => {
-		const submit = jest.fn();
-		const getElementById = jest.spyOn( document, 'getElementById' ).mockImplementation( () => ( {
-			submit,
-		} ) );
-
-		const wrapper = shallow( <EnableCustomFieldsOption label="Custom Fields" isChecked /> );
-
-		expect( wrapper.prop( 'isChecked' ) ).toBe( true );
-
-		wrapper.prop( 'onChange' )();
-		wrapper.update();
-
-		expect( wrapper.prop( 'isChecked' ) ).toBe( false );
-		expect( getElementById ).toHaveBeenCalledWith( 'toggle-custom-fields-form' );
-		expect( submit ).toHaveBeenCalled();
+	it( 'renders an unchecked checkbox when custom fields are disabled', () => {
+		const renderer = TestRenderer.create(
+			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
+		);
+		expect( renderer ).toMatchSnapshot();
+	} );
 
-		getElementById.mockRestore();
+	it( 'renders an unchecked checkbox and a confirmation message when toggled off', () => {
+		const renderer = new TestRenderer.create( <EnableCustomFieldsOption areCustomFieldsEnabled /> );
+		act( () => {
+			renderer.root.findByType( BaseOption ).props.onChange( false );
+		} );
+		expect( renderer ).toMatchSnapshot();
 	} );
 
-	it( 'renders properly when unchecked', () => {
-		const wrapper = shallow(
-			<EnableCustomFieldsOption label="Custom Fields" isChecked={ false } />
+	it( 'renders a checked checkbox and a confirmation message when toggled on', () => {
+		const renderer = new TestRenderer.create(
+			<EnableCustomFieldsOption areCustomFieldsEnabled={ false } />
 		);
-		expect( wrapper ).toMatchSnapshot();
+		act( () => {
+			renderer.root.findByType( BaseOption ).props.onChange( true );
+		} );
+		expect( renderer ).toMatchSnapshot();
 	} );
+} );
 
-	it( 'can be checked', () => {
+describe( 'CustomFieldsConfirmation', () => {
+	it( 'submits the toggle-custom-fields-form', () => {
 		const submit = jest.fn();
 		const getElementById = jest.spyOn( document, 'getElementById' ).mockImplementation( () => ( {
 			submit,
 		} ) );
 
-		const wrapper = shallow(
-			<EnableCustomFieldsOption label="Custom Fields" isChecked={ false } />
-		);
-
-		expect( wrapper.prop( 'isChecked' ) ).toBe( false );
-
-		wrapper.prop( 'onChange' )();
-		wrapper.update();
+		const renderer = new TestRenderer.create( <CustomFieldsConfirmation /> );
+		act( () => {
+			renderer.root.findByType( Button ).props.onClick();
+		} );
 
-		expect( wrapper.prop( 'isChecked' ) ).toBe( true );
 		expect( getElementById ).toHaveBeenCalledWith( 'toggle-custom-fields-form' );
 		expect( submit ).toHaveBeenCalled();
 

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

@@ -21,13 +21,21 @@
 			margin: 0;
 		}
 
-		&.components-base-control + &.components-base-control {
-			margin-bottom: 0;
-		}
-
 		.components-checkbox-control__label {
 			flex-grow: 1;
 			padding: 0.6rem 0 0.6rem 10px;
 		}
 	}
+
+	&__custom-fields-confirmation-message,
+	&__custom-fields-confirmation-button {
+		margin: 0 0 0.6rem 48px;
+
+		@include break-medium() {
+			margin-left: 38px;
+		}
+		@include break-small() {
+			max-width: 300px;
+		}
+	}
 }