Add preferences modal to site editor (WordPress#39485)

* Add preferences modal to site editor * Add spotlight feature * Add caret inside block setting * Improvements to enable feature selector.
jostnes · Mar 23, 2022 · 366cef1 · 366cef1
1 parent 145d320
commit 366cef1
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 0 deletions.
diff --git a/packages/edit-site/src/components/header/more-menu/index.js b/packages/edit-site/src/components/header/more-menu/index.js
@@ -14,6 +14,7 @@ import { PreferenceToggleMenuItem } from '@wordpress/preferences';
  * Internal dependencies
  */
 import KeyboardShortcutHelpModal from '../../keyboard-shortcut-help-modal';
+import EditSitePreferencesModal from '../../preferences-modal';
 import ToolsMoreMenuGroup from '../tools-more-menu-group';
 import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
@@ -26,6 +27,11 @@ export default function MoreMenu() {
 		false
 	);
 
+	const [ isPreferencesModalActive, togglePreferencesModal ] = useReducer(
+		( isActive ) => ! isActive,
+		false
+	);
+
 	useShortcut( 'core/edit-site/keyboard-shortcuts', toggleModal );
 
 	return (
@@ -99,13 +105,22 @@ export default function MoreMenu() {
 								fillProps={ { onClose } }
 							/>
 						</MenuGroup>
+						<MenuGroup>
+							<MenuItem onClick={ togglePreferencesModal }>
+								{ __( 'Preferences' ) }
+							</MenuItem>
+						</MenuGroup>
 					</>
 				) }
 			</MoreMenuDropdown>
 			<KeyboardShortcutHelpModal
 				isModalActive={ isModalActive }
 				toggleModal={ toggleModal }
 			/>
+			<EditSitePreferencesModal
+				isModalActive={ isPreferencesModalActive }
+				toggleModal={ togglePreferencesModal }
+			/>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/preferences-modal/enable-feature.js b/packages/edit-site/src/components/preferences-modal/enable-feature.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+export default function EnableFeature( props ) {
+	const { featureName, ...remainingProps } = props;
+	const isChecked = useSelect(
+		( select ) =>
+			!! select( preferencesStore ).get( 'core/edit-site', featureName ),
+		[ featureName ]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+	const onChange = () => toggle( 'core/edit-site', featureName );
+	return (
+		<BaseOption
+			onChange={ onChange }
+			isChecked={ isChecked }
+			{ ...remainingProps }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js
@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PreferencesModal,
+	PreferencesModalTabs,
+	PreferencesModalSection,
+} from '@wordpress/interface';
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import EnableFeature from './enable-feature';
+
+export default function EditSitePreferencesModal( {
+	isModalActive,
+	toggleModal,
+} ) {
+	const sections = useMemo( () => [
+		{
+			name: 'general',
+			tabLabel: __( 'General' ),
+			content: (
+				<PreferencesModalSection
+					title={ __( 'Appearance' ) }
+					description={ __(
+						'Customize options related to the block editor interface and editing flow.'
+					) }
+				>
+					<EnableFeature
+						featureName="focusMode"
+						help={ __(
+							'Highlights the current block and fades other content.'
+						) }
+						label={ __( 'Spotlight mode' ) }
+					/>
+				</PreferencesModalSection>
+			),
+		},
+		{
+			name: 'blocks',
+			tabLabel: __( 'Blocks' ),
+			content: (
+				<PreferencesModalSection
+					title={ __( 'Block interactions' ) }
+					description={ __(
+						'Customize how you interact with blocks in the block library and editing canvas.'
+					) }
+				>
+					<EnableFeature
+						featureName="keepCaretInsideBlock"
+						help={ __(
+							'Aids screen readers by stopping text caret from leaving blocks.'
+						) }
+						label={ __( 'Contain text cursor inside block' ) }
+					/>
+				</PreferencesModalSection>
+			),
+		},
+	] );
+	if ( ! isModalActive ) {
+		return null;
+	}
+	return (
+		<PreferencesModal closeModal={ toggleModal }>
+			<PreferencesModalTabs sections={ sections } />
+		</PreferencesModal>
+	);
+}
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
@@ -61,6 +61,7 @@ export function reinitializeEditor( target, settings ) {
 			editorMode: 'visual',
 			fixedToolbar: false,
 			focusMode: false,
+			keepCaretInsideBlock: false,
 			welcomeGuide: true,
 			welcomeGuideStyles: true,
 		} );

diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js
@@ -120,6 +120,10 @@ export const getSettings = createSelector(
 				state,
 				'fixedToolbar'
 			),
+			keepCaretInsideBlock: !! __unstableGetPreference(
+				state,
+				'keepCaretInsideBlock'
+			),
 			__experimentalSetIsInserterOpened: setIsInserterOpen,
 			__experimentalReusableBlocks: getReusableBlocks( state ),
 			__experimentalPreferPatternsOnRoot:
@@ -145,6 +149,7 @@ export const getSettings = createSelector(
 		state.settings,
 		__unstableGetPreference( state, 'focusMode' ),
 		__unstableGetPreference( state, 'fixedToolbar' ),
+		__unstableGetPreference( state, 'keepCaretInsideBlock' ),
 		getReusableBlocks( state ),
 		getEditedPostType( state ),
 	]

diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js
@@ -79,6 +79,7 @@ describe( 'selectors', () => {
 				outlineMode: true,
 				focusMode: false,
 				hasFixedToolbar: false,
+				keepCaretInsideBlock: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
 				__experimentalPreferPatternsOnRoot: true,
@@ -102,6 +103,7 @@ describe( 'selectors', () => {
 				key: 'value',
 				focusMode: true,
 				hasFixedToolbar: true,
+				keepCaretInsideBlock: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
 				__experimentalReusableBlocks: [],
 				mediaUpload: expect.any( Function ),