diff --git a/packages/edit-site/src/components/header/more-menu/index.js b/packages/edit-site/src/components/header/more-menu/index.js
index 47580b2cc5175..10e3746588d3f 100644
--- 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,6 +105,11 @@ export default function MoreMenu() {
fillProps={ { onClose } }
/>
+
+
+
>
) }
@@ -106,6 +117,10 @@ export default function MoreMenu() {
isModalActive={ isModalActive }
toggleModal={ toggleModal }
/>
+
>
);
}
diff --git a/packages/edit-site/src/components/preferences-modal/enable-feature.js b/packages/edit-site/src/components/preferences-modal/enable-feature.js
new file mode 100644
index 0000000000000..ca4a8a1bb1a32
--- /dev/null
+++ 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 (
+
+ );
+}
diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js
new file mode 100644
index 0000000000000..1ba1583e337a7
--- /dev/null
+++ 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: (
+
+
+
+ ),
+ },
+ {
+ name: 'blocks',
+ tabLabel: __( 'Blocks' ),
+ content: (
+
+
+
+ ),
+ },
+ ] );
+ if ( ! isModalActive ) {
+ return null;
+ }
+ return (
+
+
+
+ );
+}
diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
index b1aaa26e6907f..139a2f7a096a7 100644
--- 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
index 93d1822283f36..c3d6c01c9fb51 100644
--- 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
index 977d67efae041..5e1c390e8a7c9 100644
--- 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 ),