Rename "Options" modal to "Preferences". (#25683)

* Rename "Options" modal to "Preferences".

* Simplify "Keyboard options" to "Keyboard".

packages/e2e-test-utils/src/toggle-screen-option.js

@@ -12,7 +12,7 @@ import { clickOnMoreMenuItem } from './click-on-more-menu-item';
  * undefined, the option will be toggled.
  */
 export async function toggleScreenOption( label, shouldBeChecked = undefined ) {
- await clickOnMoreMenuItem( 'Options' );
+ await clickOnMoreMenuItem( 'Preferences' );
  const [ handle ] = await page.$x(
  `//label[contains(text(), "${ label }")]`
  );

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

@@ -79,8 +79,8 @@ async function waitForPreviewNavigation( previewPage ) {
  */
 async function toggleCustomFieldsOption( shouldBeChecked ) {
  const checkboxXPath =
- '//*[contains(@class, "edit-post-options-modal")]//label[contains(text(), "Custom fields")]';
- await clickOnMoreMenuItem( 'Options' );
+ '//*[contains(@class, "edit-post-preferences-modal")]//label[contains(text(), "Custom fields")]';
+ await clickOnMoreMenuItem( 'Preferences' );
  await page.waitForXPath( checkboxXPath );
  const [ checkboxHandle ] = await page.$x( checkboxXPath );
 
@@ -102,7 +102,7 @@ async function toggleCustomFieldsOption( shouldBeChecked ) {
  return;
  }
 
- await clickOnCloseModalButton( '.edit-post-options-modal' );
+ await clickOnCloseModalButton( '.edit-post-preferences-modal' );
 }
 
 describe( 'Preview', () => {

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

@@ -11,8 +11,8 @@ import { useViewportMatch } from '@wordpress/compose';
  * Internal dependencies
  */
 import ModeSwitcher from '../mode-switcher';
+import PreferencesMenuItem from '../preferences-menu-item';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
-import OptionsMenuItem from '../options-menu-item';
 import WritingMenu from '../writing-menu';
 
 const POPOVER_PROPS = {
@@ -57,7 +57,7 @@ const MoreMenu = ( { showIconLabels } ) => {
  />
  <ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
  <MenuGroup>
- <OptionsMenuItem />
+ <PreferencesMenuItem />
  </MenuGroup>
  </>
  ) }

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

@@ -5,14 +5,14 @@ import { withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 
-export function OptionsMenuItem( { openModal } ) {
+export function PreferencesMenuItem( { openModal } ) {
  return (
  <MenuItem
  onClick={ () => {
- openModal( 'edit-post/options' );
+ openModal( 'edit-post/preferences' );
  } }
  >
- { __( 'Options' ) }
+ { __( 'Preferences' ) }
  </MenuItem>
  );
 }
@@ -23,4 +23,4 @@ export default withDispatch( ( dispatch ) => {
  return {
  openModal,
  };
-} )( OptionsMenuItem );
+} )( PreferencesMenuItem );

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

@@ -43,7 +43,7 @@ import VisualEditor from '../visual-editor';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import ManageBlocksModal from '../manage-blocks-modal';
-import OptionsModal from '../options-modal';
+import PreferencesModal from '../preferences-modal';
 import BrowserURL from '../browser-url';
 import Header from '../header';
 import SettingsSidebar from '../sidebar/settings-sidebar';
@@ -290,7 +290,7 @@ function Layout() {
  } }
  />
  <ManageBlocksModal />
- <OptionsModal />
+ <PreferencesModal />
  <KeyboardShortcutHelpModal />
  <WelcomeGuide />
  <Popover.Slot />

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

@@ -30,17 +30,17 @@ import {
 } from './options';
 import MetaBoxesSection from './meta-boxes-section';
 
-const MODAL_NAME = 'edit-post/options';
+const MODAL_NAME = 'edit-post/preferences';
 
-export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
+export function PreferencesModal( { isModalActive, isViewable, closeModal } ) {
  if ( ! isModalActive ) {
  return null;
  }
 
  return (
  <Modal
- className="edit-post-options-modal"
- title={ __( 'Options' ) }
+ className="edit-post-preferences-modal"
+ title={ __( 'Preferences' ) }
  closeLabel={ __( 'Close' ) }
  onRequestClose={ closeModal }
  >
@@ -59,7 +59,7 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) {
  label={ __( 'Show button text labels' ) }
  />
  </Section>
- <Section title={ __( 'Keyboard options' ) }>
+ <Section title={ __( 'Keyboard' ) }>
  <EnableFeature
  featureName="keepCaretInsideBlock"
  label={ __( 'Contain text cursor inside active block' ) }
@@ -145,4 +145,4 @@ export default compose(
  closeModal: () => dispatch( 'core/edit-post' ).closeModal(),
  };
  } )
-)( OptionsModal );
+)( PreferencesModal );

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

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

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

@@ -16,13 +16,13 @@ export function CustomFieldsConfirmation( { willEnable } ) {
 
  return (
  <>
- <p className="edit-post-options-modal__custom-fields-confirmation-message">
+ <p className="edit-post-preferences-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"
+ className="edit-post-preferences-modal__custom-fields-confirmation-button"
  isSecondary
  isBusy={ isReloading }
  disabled={ isReloading }

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

@@ -2,7 +2,7 @@
 
 exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation message when toggled on 1`] = `
 <div
- className="edit-post-options-modal__option"
+ className="edit-post-preferences-modal__option"
 >
  <div
  className="components-base-control"
@@ -43,12 +43,12 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
  </div>
  </div>
  <p
- className="edit-post-options-modal__custom-fields-confirmation-message"
+ className="edit-post-preferences-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-secondary"
+ className="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
  disabled={false}
  onClick={[Function]}
  type="button"
@@ -60,7 +60,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
 
 exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields are enabled 1`] = `
 <div
- className="edit-post-options-modal__option"
+ className="edit-post-preferences-modal__option"
 >
  <div
  className="components-base-control"
@@ -105,7 +105,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
 
 exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmation message when toggled off 1`] = `
 <div
- className="edit-post-options-modal__option"
+ className="edit-post-preferences-modal__option"
 >
  <div
  className="components-base-control"
@@ -132,12 +132,12 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
  </div>
  </div>
  <p
- className="edit-post-options-modal__custom-fields-confirmation-message"
+ className="edit-post-preferences-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-secondary"
+ className="components-button edit-post-preferences-modal__custom-fields-confirmation-button is-secondary"
  disabled={false}
  onClick={[Function]}
  type="button"
@@ -149,7 +149,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
 
 exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fields are disabled 1`] = `
 <div
- className="edit-post-options-modal__option"
+ className="edit-post-preferences-modal__option"
 >
  <div
  className="components-base-control"

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

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

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

@@ -1,4 +1,4 @@
-.edit-post-options-modal {
+.edit-post-preferences-modal {
  &__section {
  margin: 0 0 2rem 0;
  }

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

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OptionsModal should match snapshot when the modal is active 1`] = `
+exports[`PreferencesModal should match snapshot when the modal is active 1`] = `
 <WithInstanceId(Modal)
- className="edit-post-options-modal"
+ className="edit-post-preferences-modal"
  closeLabel="Close"
- title="Options"
+ title="Preferences"
 >
  <Section
  title="General"
@@ -22,7 +22,7 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
  />
  </Section>
  <Section
- title="Keyboard options"
+ title="Keyboard"
  >
  <WithSelect(WithDispatch(BaseOption))
  featureName="keepCaretInsideBlock"

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

@@ -6,16 +6,16 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { OptionsModal } from '../';
+import { PreferencesModal } from '../';
 
-describe( 'OptionsModal', () => {
+describe( 'PreferencesModal', () => {
  it( 'should match snapshot when the modal is active', () => {
- const wrapper = shallow( <OptionsModal isModalActive={ true } /> );
+ const wrapper = shallow( <PreferencesModal isModalActive={ true } /> );
  expect( wrapper ).toMatchSnapshot();
  } );
 
  it( 'should not render when the modal is not active', () => {
- const wrapper = shallow( <OptionsModal isModalActive={ false } /> );
+ const wrapper = shallow( <PreferencesModal isModalActive={ false } /> );
  expect( wrapper.isEmptyRender() ).toBe( true );
  } );
 } );

packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js

@@ -14,7 +14,7 @@ import warning from '@wordpress/warning';
 /**
  * Internal dependencies
  */
-import { EnablePluginDocumentSettingPanelOption } from '../../options-modal/options';
+import { EnablePluginDocumentSettingPanelOption } from '../../preferences-modal/options';
 
 export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
 

packages/edit-post/src/style.scss

@@ -7,6 +7,7 @@
 @import "./components/layout/style.scss";
 @import "./components/manage-blocks-modal/style.scss";
 @import "./components/meta-boxes/meta-boxes-area/style.scss";
+@import "./components/preferences-modal/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/last-revision/style.scss";
 @import "./components/sidebar/post-author/style.scss";
@@ -18,7 +19,6 @@
 @import "./components/sidebar/settings-header/style.scss";
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";
-@import "./components/options-modal/style.scss";
 @import "./components/welcome-guide/style.scss";
 
 /**