From 0a3d1437eb16d032c00400e349fa3ed04fa0bbc2 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 16 Mar 2022 17:47:15 +1100 Subject: [PATCH 1/4] Add preferences modal to site editor --- .../src/components/header/more-menu/index.js | 15 ++++++++ .../src/components/preferences-modal/index.js | 38 +++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 packages/edit-site/src/components/preferences-modal/index.js 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/index.js b/packages/edit-site/src/components/preferences-modal/index.js new file mode 100644 index 0000000000000..0faea285fa604 --- /dev/null +++ b/packages/edit-site/src/components/preferences-modal/index.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { + PreferencesModal, + PreferencesModalTabs, + PreferencesModalSection, +} from '@wordpress/interface'; +import { useMemo } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +export default function EditSitePreferencesModal( { + isModalActive, + toggleModal, +} ) { + const sections = useMemo( () => [ + { + name: 'general', + tabLabel: __( 'General' ), + content: ( + + ), + }, + ] ); + if ( ! isModalActive ) { + return null; + } + return ( + + + + ); +} From f55c01c3b834dbff1ef600796798f0af0153d26b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 17 Mar 2022 13:46:28 +1100 Subject: [PATCH 2/4] Add spotlight feature --- .../preferences-modal/enable-feature.js | 22 +++++++++++++++++++ .../src/components/preferences-modal/index.js | 15 ++++++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 packages/edit-site/src/components/preferences-modal/enable-feature.js 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..292211c766579 --- /dev/null +++ b/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 ( + + ); +} diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js index 0faea285fa604..f7afaac287e43 100644 --- a/packages/edit-site/src/components/preferences-modal/index.js +++ b/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.' ) } - > + > + + ), }, ] ); From f88d9498dca70ffbc8bac06f254a72b84a348d34 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 17 Mar 2022 14:07:49 +1100 Subject: [PATCH 3/4] Add caret inside block setting --- .../src/components/preferences-modal/index.js | 20 +++++++++++++++++++ packages/edit-site/src/index.js | 1 + packages/edit-site/src/store/selectors.js | 5 +++++ .../edit-site/src/store/test/selectors.js | 2 ++ 4 files changed, 28 insertions(+) diff --git a/packages/edit-site/src/components/preferences-modal/index.js b/packages/edit-site/src/components/preferences-modal/index.js index f7afaac287e43..1ba1583e337a7 100644 --- a/packages/edit-site/src/components/preferences-modal/index.js +++ b/packages/edit-site/src/components/preferences-modal/index.js @@ -39,6 +39,26 @@ export default function EditSitePreferencesModal( { ), }, + { + name: 'blocks', + tabLabel: __( 'Blocks' ), + content: ( + + + + ), + }, ] ); if ( ! isModalActive ) { return null; 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 ), From 7fcfe064ad8bd92962ee864aef155ba50c6854eb Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 18 Mar 2022 13:55:28 +1100 Subject: [PATCH 4/4] Improvements to enable feature selector. --- .../src/components/preferences-modal/enable-feature.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/preferences-modal/enable-feature.js b/packages/edit-site/src/components/preferences-modal/enable-feature.js index 292211c766579..ca4a8a1bb1a32 100644 --- a/packages/edit-site/src/components/preferences-modal/enable-feature.js +++ b/packages/edit-site/src/components/preferences-modal/enable-feature.js @@ -7,8 +7,10 @@ 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 isChecked = useSelect( + ( select ) => + !! select( preferencesStore ).get( 'core/edit-site', featureName ), + [ featureName ] ); const { toggle } = useDispatch( preferencesStore ); const onChange = () => toggle( 'core/edit-site', featureName );