Add spotlight feature

packages/edit-site/src/components/preferences-modal/enable-feature.js

@@ -0,0 +1,22 @@
+/**
+ * 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 )
+	);
+	const { toggle } = useDispatch( preferencesStore );
+	const onChange = () => toggle( 'core/edit-site', featureName );
+	return (
+		<BaseOption
+			onChange={ onChange }
+			isChecked={ isChecked }
+			{ ...remainingProps }
+		/>
+	);
+}

packages/edit-site/src/components/preferences-modal/index.js

@@ -9,6 +9,11 @@ import {
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import EnableFeature from './enable-feature';
+
 export default function EditSitePreferencesModal( {
 	isModalActive,
 	toggleModal,
@@ -23,7 +28,15 @@ export default function EditSitePreferencesModal( {
 					description={ __(
 						'Customize options related to the block editor interface and editing flow.'
 					) }
-				></PreferencesModalSection>
+				>
+					<EnableFeature
+						featureName="focusMode"
+						help={ __(
+							'Highlights the current block and fades other content.'
+						) }
+						label={ __( 'Spotlight mode' ) }
+					/>
+				</PreferencesModalSection>
 			),
 		},
 	] );