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 } } /> + + + { __( 'Preferences' ) } + + ) } @@ -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 ),