From 57c47cd04df206ae32c42b1a503fe142f1bf6160 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 Nov 2023 14:49:20 +0100 Subject: [PATCH 1/8] Share the editor settings between the post and site editors --- .../block-editor/use-site-editor-settings.js | 135 ++++++------------ packages/edit-site/src/index.js | 2 + .../edit-site/src/store/private-selectors.js | 4 + .../editor/src/components/provider/index.js | 28 ++-- .../provider/use-block-editor-settings.js | 81 ++++++----- .../use-block-editor-settings.native.js | 4 +- packages/editor/src/private-apis.js | 4 + 7 files changed, 118 insertions(+), 140 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index 001764cbb8595..366b1c0dc75a7 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -4,12 +4,15 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; + /** * Internal dependencies */ import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import inserterMediaCategories from './inserter-media-categories'; + +const { useBlockEditorSettings } = unlock( editorPrivateApis ); function useArchiveLabel( templateSlug ) { const taxonomyMatches = templateSlug?.match( @@ -85,40 +88,25 @@ function useArchiveLabel( templateSlug ) { export default function useSiteEditorSettings() { const { setIsInserterOpened } = useDispatch( editSiteStore ); - const { storedSettings, canvasMode, templateType, siteSettings } = - useSelect( - ( select ) => { - const { canUser, getEntityRecord } = select( coreStore ); - const { getSettings, getCanvasMode, getEditedPostType } = - unlock( select( editSiteStore ) ); - return { - storedSettings: getSettings( setIsInserterOpened ), - canvasMode: getCanvasMode(), - templateType: getEditedPostType(), - siteSettings: canUser( 'read', 'settings' ) - ? getEntityRecord( 'root', 'site' ) - : undefined, - }; - }, - [ setIsInserterOpened ] - ); - - const settingsBlockPatterns = - storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0 - storedSettings.__experimentalBlockPatterns; // WP 5.9 - const settingsBlockPatternCategories = - storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0 - storedSettings.__experimentalBlockPatternCategories; // WP 5.9 - const { - restBlockPatterns, - restBlockPatternCategories, templateSlug, - userPatternCategories, + focusMode, + isDistractionFree, + hasFixedToolbar, + keepCaretInsideBlock, + canvasMode, + settings, + postType, + postId, } = useSelect( ( select ) => { - const { getEditedPostType, getEditedPostId } = select( editSiteStore ); - const { getEditedEntityRecord, getUserPatternCategories } = - select( coreStore ); + const { + getEditedPostType, + getEditedPostId, + __unstableGetPreference, + getCanvasMode, + getSettingsFromServer, + } = unlock( select( editSiteStore ) ); + const { getEditedEntityRecord } = select( coreStore ); const usedPostType = getEditedPostType(); const usedPostId = getEditedPostId(); const _record = getEditedEntityRecord( @@ -127,75 +115,46 @@ export default function useSiteEditorSettings() { usedPostId ); return { - restBlockPatterns: select( coreStore ).getBlockPatterns(), - restBlockPatternCategories: - select( coreStore ).getBlockPatternCategories(), templateSlug: _record.slug, - userPatternCategories: getUserPatternCategories(), + focusMode: !! __unstableGetPreference( 'focusMode' ), + isDistractionFree: !! __unstableGetPreference( 'distractionFree' ), + hasFixedToolbar: !! __unstableGetPreference( 'fixedToolbar' ), + keepCaretInsideBlock: !! __unstableGetPreference( + 'keepCaretInsideBlock' + ), + canvasMode: getCanvasMode(), + settings: getSettingsFromServer(), + postType: usedPostType, + postId: usedPostId, }; }, [] ); const archiveLabels = useArchiveLabel( templateSlug ); - const blockPatterns = useMemo( - () => - [ - ...( settingsBlockPatterns || [] ), - ...( restBlockPatterns || [] ), - ] - .filter( - ( x, index, arr ) => - index === arr.findIndex( ( y ) => x.name === y.name ) - ) - .filter( ( { postTypes } ) => { - return ( - ! postTypes || - ( Array.isArray( postTypes ) && - postTypes.includes( templateType ) ) - ); - } ), - [ settingsBlockPatterns, restBlockPatterns, templateType ] - ); - - const blockPatternCategories = useMemo( - () => - [ - ...( settingsBlockPatternCategories || [] ), - ...( restBlockPatternCategories || [] ), - ].filter( - ( x, index, arr ) => - index === arr.findIndex( ( y ) => x.name === y.name ) - ), - [ settingsBlockPatternCategories, restBlockPatternCategories ] - ); - return useMemo( () => { - const { - __experimentalAdditionalBlockPatterns, - __experimentalAdditionalBlockPatternCategories, - focusMode, - ...restStoredSettings - } = storedSettings; - + const defaultEditorSettings = useMemo( () => { return { - ...restStoredSettings, - inserterMediaCategories, - __experimentalBlockPatterns: blockPatterns, - __experimentalBlockPatternCategories: blockPatternCategories, - __experimentalUserPatternCategories: userPatternCategories, + ...settings, + + __experimentalSetIsInserterOpened: setIsInserterOpened, focusMode: canvasMode === 'view' && focusMode ? false : focusMode, + isDistractionFree, + hasFixedToolbar, + keepCaretInsideBlock, + + // I wonder if they should be set in the post editor too __experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel, __experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel, - pageOnFront: siteSettings?.page_on_front, - pageForPosts: siteSettings?.page_for_posts, }; }, [ - storedSettings, - blockPatterns, - blockPatternCategories, - userPatternCategories, + settings, + setIsInserterOpened, + focusMode, + isDistractionFree, + hasFixedToolbar, + keepCaretInsideBlock, canvasMode, archiveLabels.archiveTypeLabel, archiveLabels.archiveNameLabel, - siteSettings?.page_on_front, - siteSettings?.page_for_posts, ] ); + + return useBlockEditorSettings( defaultEditorSettings, postType, postId ); } diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 18cb0d5e5db69..b1fb289ea96e8 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -39,8 +39,10 @@ export function initializeEditor( id, settings ) { const target = document.getElementById( id ); const root = createRoot( target ); + // This might not be needed anymore. settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) => fetchLinkSuggestions( search, searchOptions, settings ); + // This might not be needed anymore. settings.__experimentalFetchRichUrlData = fetchUrlData; dispatch( blocksStore ).reapplyBlockTypeFilters(); diff --git a/packages/edit-site/src/store/private-selectors.js b/packages/edit-site/src/store/private-selectors.js index 0d4cf2b3eefda..b4ede141e3c62 100644 --- a/packages/edit-site/src/store/private-selectors.js +++ b/packages/edit-site/src/store/private-selectors.js @@ -41,3 +41,7 @@ export function getEditorCanvasContainerView( state ) { export function getPageContentFocusType( state ) { return hasPageContentFocus( state ) ? state.pageContentFocusType : null; } + +export function getSettingsFromServer( state ) { + return state.settings; +} diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index f2f6102a710c6..6baa77aa801a4 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -40,21 +40,14 @@ export const ExperimentalEditorProvider = withRegistryProvider( } return { postId: post.id, postType: post.type }; }, [ post.id, post.type ] ); - const { editorSettings, selection, isReady } = useSelect( - ( select ) => { - const { - getEditorSettings, - getEditorSelection, - __unstableIsEditorReady, - } = select( editorStore ); - return { - editorSettings: getEditorSettings(), - isReady: __unstableIsEditorReady(), - selection: getEditorSelection(), - }; - }, - [] - ); + const { selection, isReady } = useSelect( ( select ) => { + const { getEditorSelection, __unstableIsEditorReady } = + select( editorStore ); + return { + isReady: __unstableIsEditorReady(), + selection: getEditorSelection(), + }; + }, [] ); const { id, type } = __unstableTemplate ?? post; const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', @@ -62,8 +55,9 @@ export const ExperimentalEditorProvider = withRegistryProvider( { id } ); const blockEditorSettings = useBlockEditorSettings( - editorSettings, - !! __unstableTemplate + settings, + type, + id ); const { updatePostLock, diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 1b5e9c9466576..c0804febab0db 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -76,17 +76,20 @@ const BLOCK_EDITOR_SETTINGS = [ '__unstableIsPreviewMode', '__unstableResolvedAssets', '__unstableIsBlockBasedTheme', + '__experimentalArchiveTitleTypeLabel', + '__experimentalArchiveTitleNameLabel', ]; /** * React hook used to compute the block editor settings to use for the post editor. * - * @param {Object} settings EditorProvider settings prop. - * @param {boolean} hasTemplate Whether template mode is enabled. + * @param {Object} settings EditorProvider settings prop. + * @param {string} postType Editor root level post type. + * @param {string} postId Editor root level post ID. * * @return {Object} Block Editor Settings. */ -function useBlockEditorSettings( settings, hasTemplate ) { +function useBlockEditorSettings( settings, postType, postId ) { const { reusableBlocks, hasUploadPermissions, @@ -94,36 +97,42 @@ function useBlockEditorSettings( settings, hasTemplate ) { userCanCreatePages, pageOnFront, pageForPosts, - postType, userPatternCategories, - } = useSelect( ( select ) => { - const { canUserUseUnfilteredHTML, getCurrentPostType } = - select( editorStore ); - const isWeb = Platform.OS === 'web'; - const { canUser, getEntityRecord, getUserPatternCategories } = - select( coreStore ); + } = useSelect( + ( select ) => { + const isWeb = Platform.OS === 'web'; + const { + canUser, + getRawEntityRecord, + getEntityRecord, + getUserPatternCategories, + getEntityRecords, + } = select( coreStore ); - const siteSettings = canUser( 'read', 'settings' ) - ? getEntityRecord( 'root', 'site' ) - : undefined; + const siteSettings = canUser( 'read', 'settings' ) + ? getEntityRecord( 'root', 'site' ) + : undefined; - return { - canUseUnfilteredHTML: canUserUseUnfilteredHTML(), - reusableBlocks: isWeb - ? select( coreStore ).getEntityRecords( - 'postType', - 'wp_block', - { per_page: -1 } - ) - : EMPTY_BLOCKS_LIST, // Reusable blocks are fetched in the native version of this hook. - hasUploadPermissions: canUser( 'create', 'media' ) ?? true, - userCanCreatePages: canUser( 'create', 'pages' ), - pageOnFront: siteSettings?.page_on_front, - pageForPosts: siteSettings?.page_for_posts, - postType: getCurrentPostType(), - userPatternCategories: getUserPatternCategories(), - }; - }, [] ); + return { + canUseUnfilteredHTML: getRawEntityRecord( + 'postType', + postType, + postId + )?._links?.hasOwnProperty( 'wp:action-unfiltered-html' ), + reusableBlocks: isWeb + ? getEntityRecords( 'postType', 'wp_block', { + per_page: -1, + } ) + : EMPTY_BLOCKS_LIST, // Reusable blocks are fetched in the native version of this hook. + hasUploadPermissions: canUser( 'create', 'media' ) ?? true, + userCanCreatePages: canUser( 'create', 'pages' ), + pageOnFront: siteSettings?.page_on_front, + pageForPosts: siteSettings?.page_for_posts, + userPatternCategories: getUserPatternCategories(), + }; + }, + [ postType, postId ] + ); const settingsBlockPatterns = settings.__experimentalAdditionalBlockPatterns ?? // WP 6.0 @@ -214,14 +223,20 @@ function useBlockEditorSettings( settings, hasTemplate ) { fetchLinkSuggestions( search, searchOptions, settings ), inserterMediaCategories, __experimentalFetchRichUrlData: fetchUrlData, + // Todo: This only checks the top level post, not the post within a template or any other entity that can be edited. + // This might be better as a generic "canUser" selector. __experimentalCanUserUseUnfilteredHTML: canUseUnfilteredHTML, + //Todo: this is only needed for native and should probably be removed. __experimentalUndo: undo, - outlineMode: hasTemplate, + // Check whether we want all site editor frames to have outlines + // including the navigation / pattern / parts editors. + outlineMode: postType === 'wp_template', + // Check these two properties: they were not present in the site editor. __experimentalCreatePageEntity: createPageEntity, __experimentalUserCanCreatePages: userCanCreatePages, pageOnFront, pageForPosts, - __experimentalPreferPatternsOnRoot: hasTemplate, + __experimentalPreferPatternsOnRoot: postType === 'wp_template', } ), [ settings, @@ -232,11 +247,11 @@ function useBlockEditorSettings( settings, hasTemplate ) { blockPatternCategories, canUseUnfilteredHTML, undo, - hasTemplate, createPageEntity, userCanCreatePages, pageOnFront, pageForPosts, + postType, ] ); } diff --git a/packages/editor/src/components/provider/use-block-editor-settings.native.js b/packages/editor/src/components/provider/use-block-editor-settings.native.js index e0a289e2c63ba..ece088a09921d 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.native.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.native.js @@ -13,8 +13,8 @@ import { store as editorStore } from '../../store'; const EMPTY_BLOCKS_LIST = []; -function useNativeBlockEditorSettings( settings, hasTemplate ) { - const editorSettings = useBlockEditorSettings( settings, hasTemplate ); +function useNativeBlockEditorSettings( settings, postType, postId ) { + const editorSettings = useBlockEditorSettings( settings, postType, postId ); const supportReusableBlock = settings.capabilities?.reusableBlock === true; const { reusableBlocks, isTitleSelected } = useSelect( diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index b0c2ab86c8bf2..b599278f872dd 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -4,9 +4,13 @@ import { ExperimentalEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; +import useBlockEditorSettings from './components/provider/use-block-editor-settings'; export const privateApis = {}; lock( privateApis, { ExperimentalEditorProvider, EntitiesSavedStatesExtensible, + + // This is a temporary private API while we're updating the site editor to use EditorProvider. + useBlockEditorSettings, } ); From e278a6652bbe99316798df1d9a046fb7be1a9ce6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 Nov 2023 15:08:51 +0100 Subject: [PATCH 2/8] Remove useless settings --- packages/edit-site/src/index.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index b1fb289ea96e8..82014ad06eb49 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -10,10 +10,6 @@ import { import { dispatch } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; import { createRoot } from '@wordpress/element'; -import { - __experimentalFetchLinkSuggestions as fetchLinkSuggestions, - __experimentalFetchUrlData as fetchUrlData, -} from '@wordpress/core-data'; import { store as editorStore } from '@wordpress/editor'; import { store as interfaceStore } from '@wordpress/interface'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -39,12 +35,6 @@ export function initializeEditor( id, settings ) { const target = document.getElementById( id ); const root = createRoot( target ); - // This might not be needed anymore. - settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) => - fetchLinkSuggestions( search, searchOptions, settings ); - // This might not be needed anymore. - settings.__experimentalFetchRichUrlData = fetchUrlData; - dispatch( blocksStore ).reapplyBlockTypeFilters(); const coreBlocks = __experimentalGetCoreBlocks().filter( ( { name } ) => name !== 'core/freeform' From 85daca88422c66fcf2cc29a010bfa387cb833545 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 Nov 2023 15:20:48 +0100 Subject: [PATCH 3/8] More cleanup --- .../data/data-core-edit-site.md | 3 +- .../block-editor/use-site-editor-settings.js | 6 +- .../global-styles-renderer/index.js | 2 +- .../sidebar-edit-mode/default-sidebar.js | 5 +- .../sidebar-edit-mode/plugin-sidebar/index.js | 5 +- .../index.js | 2 +- .../navigation-menu-editor.js | 2 +- .../edit-site/src/store/private-selectors.js | 4 - packages/edit-site/src/store/selectors.js | 74 ++----------------- .../edit-site/src/store/test/selectors.js | 56 -------------- 10 files changed, 22 insertions(+), 137 deletions(-) diff --git a/docs/reference-guides/data/data-core-edit-site.md b/docs/reference-guides/data/data-core-edit-site.md index 6dea8e9b77d1b..1dc3d515a99af 100644 --- a/docs/reference-guides/data/data-core-edit-site.md +++ b/docs/reference-guides/data/data-core-edit-site.md @@ -120,12 +120,11 @@ _Returns_ ### getSettings -Returns the settings, taking into account active features and permissions. +Returns the site editor settings. _Parameters_ - _state_ `Object`: Global application state. -- _setIsInserterOpen_ `Function`: Setter for the open state of the global inserter. _Returns_ diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index 366b1c0dc75a7..7b153d8f94e62 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -104,8 +104,8 @@ export default function useSiteEditorSettings() { getEditedPostId, __unstableGetPreference, getCanvasMode, - getSettingsFromServer, - } = unlock( select( editSiteStore ) ); + getSettings, + } = select( editSiteStore ); const { getEditedEntityRecord } = select( coreStore ); const usedPostType = getEditedPostType(); const usedPostId = getEditedPostId(); @@ -123,7 +123,7 @@ export default function useSiteEditorSettings() { 'keepCaretInsideBlock' ), canvasMode: getCanvasMode(), - settings: getSettingsFromServer(), + settings: getSettings(), postType: usedPostType, postId: usedPostId, }; diff --git a/packages/edit-site/src/components/global-styles-renderer/index.js b/packages/edit-site/src/components/global-styles-renderer/index.js index eca6d9b2662e8..83c7c51bbe366 100644 --- a/packages/edit-site/src/components/global-styles-renderer/index.js +++ b/packages/edit-site/src/components/global-styles-renderer/index.js @@ -32,7 +32,7 @@ function useGlobalStylesRenderer() { styles: [ ...nonGlobalStyles, ...styles ], __experimentalFeatures: settings, } ); - }, [ styles, settings ] ); + }, [ styles, settings, updateSettings, getSettings ] ); } export function GlobalStylesRenderer() { diff --git a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js index a06077e30b176..084d8ca4277a6 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js @@ -24,7 +24,10 @@ export default function DefaultSidebar( { panelClassName, } ) { const showIconLabels = useSelect( - ( select ) => select( editSiteStore ).getSettings().showIconLabels, + ( select ) => + !! select( editSiteStore ).__unstableGetPreference( + 'showIconLabels' + ), [] ); diff --git a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js index d705d0724af9f..5c47f68bf3a09 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js @@ -76,7 +76,10 @@ import { store as editSiteStore } from '../../../store'; */ export default function PluginSidebarEditSite( { className, ...props } ) { const showIconLabels = useSelect( - ( select ) => select( editSiteStore ).getSettings().showIconLabels, + ( select ) => + !! select( editSiteStore ).__unstableGetPreference( + 'showIconLabels' + ), [] ); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index aa955d5dd3378..45fa8102456a5 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -63,7 +63,7 @@ function SidebarNavigationScreenGlobalStylesContent() { const { getSettings } = unlock( select( editSiteStore ) ); return { - storedSettings: getSettings( false ), + storedSettings: getSettings(), }; }, [] ); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js index 7d3be6f631f43..3e19c7f5a29fc 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js @@ -20,7 +20,7 @@ export default function NavigationMenuEditor( { navigationMenuId } ) { const { getSettings } = unlock( select( editSiteStore ) ); return { - storedSettings: getSettings( false ), + storedSettings: getSettings(), }; }, [] ); diff --git a/packages/edit-site/src/store/private-selectors.js b/packages/edit-site/src/store/private-selectors.js index b4ede141e3c62..0d4cf2b3eefda 100644 --- a/packages/edit-site/src/store/private-selectors.js +++ b/packages/edit-site/src/store/private-selectors.js @@ -41,7 +41,3 @@ export function getEditorCanvasContainerView( state ) { export function getPageContentFocusType( state ) { return hasPageContentFocus( state ) ? state.pageContentFocusType : null; } - -export function getSettingsFromServer( state ) { - return state.settings; -} diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 9e861c7567e4a..2df715643f30d 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -1,15 +1,9 @@ -/** - * External dependencies - */ -import createSelector from 'rememo'; - /** * WordPress dependencies */ import { store as coreDataStore } from '@wordpress/core-data'; import { createRegistrySelector } from '@wordpress/data'; import deprecated from '@wordpress/deprecated'; -import { uploadMedia } from '@wordpress/media-utils'; import { Platform } from '@wordpress/element'; import { store as preferencesStore } from '@wordpress/preferences'; import { store as blockEditorStore } from '@wordpress/block-editor'; @@ -18,10 +12,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; * Internal dependencies */ import { getFilteredTemplatePartBlocks } from './utils'; -import { - TEMPLATE_POST_TYPE, - TEMPLATE_PART_POST_TYPE, -} from '../utils/constants'; +import { TEMPLATE_PART_POST_TYPE } from '../utils/constants'; /** * @typedef {'template'|'template_type'} TemplateType Template type. */ @@ -97,67 +88,16 @@ export const getReusableBlocks = createRegistrySelector( ( select ) => () => { } ); /** - * Returns the settings, taking into account active features and permissions. + * Returns the site editor settings. * - * @param {Object} state Global application state. - * @param {Function} setIsInserterOpen Setter for the open state of the global inserter. + * @param {Object} state Global application state. * * @return {Object} Settings. */ -export const getSettings = createSelector( - ( state, setIsInserterOpen ) => { - const settings = { - ...state.settings, - outlineMode: true, - focusMode: !! __unstableGetPreference( state, 'focusMode' ), - isDistractionFree: !! __unstableGetPreference( - state, - 'distractionFree' - ), - hasFixedToolbar: !! __unstableGetPreference( - state, - 'fixedToolbar' - ), - keepCaretInsideBlock: !! __unstableGetPreference( - state, - 'keepCaretInsideBlock' - ), - showIconLabels: !! __unstableGetPreference( - state, - 'showIconLabels' - ), - __experimentalSetIsInserterOpened: setIsInserterOpen, - __experimentalReusableBlocks: getReusableBlocks( state ), - __experimentalPreferPatternsOnRoot: - TEMPLATE_POST_TYPE === getEditedPostType( state ), - }; - - const canUserCreateMedia = getCanUserCreateMedia( state ); - if ( ! canUserCreateMedia ) { - return settings; - } - - settings.mediaUpload = ( { onError, ...rest } ) => { - uploadMedia( { - wpAllowedMimeTypes: state.settings.allowedMimeTypes, - onError: ( { message } ) => onError( message ), - ...rest, - } ); - }; - return settings; - }, - ( state ) => [ - getCanUserCreateMedia( state ), - state.settings, - __unstableGetPreference( state, 'focusMode' ), - __unstableGetPreference( state, 'distractionFree' ), - __unstableGetPreference( state, 'fixedToolbar' ), - __unstableGetPreference( state, 'keepCaretInsideBlock' ), - __unstableGetPreference( state, 'showIconLabels' ), - getReusableBlocks( state ), - getEditedPostType( state ), - ] -); +export function getSettings( state ) { + // It is important that we don't inject anything into these settings locally. + return state.settings; +} /** * @deprecated diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js index 9380f8ea4d276..8b5bdc1b2466d 100644 --- a/packages/edit-site/src/store/test/selectors.js +++ b/packages/edit-site/src/store/test/selectors.js @@ -8,7 +8,6 @@ import { store as coreDataStore } from '@wordpress/core-data'; */ import { getCanUserCreateMedia, - getSettings, getEditedPostType, getEditedPostId, getReusableBlocks, @@ -59,61 +58,6 @@ describe( 'selectors', () => { } ); } ); - describe( 'getSettings', () => { - it( "returns the settings when the user can't create media", () => { - canUser.mockReturnValueOnce( false ); - canUser.mockReturnValueOnce( false ); - get.mockImplementation( ( scope, name ) => { - if ( name === 'focusMode' ) return false; - if ( name === 'fixedToolbar' ) return false; - } ); - const state = { - settings: {}, - preferences: {}, - editedPost: { postType: 'wp_template' }, - }; - const setInserterOpened = () => {}; - expect( getSettings( state, setInserterOpened ) ).toEqual( { - outlineMode: true, - focusMode: false, - hasFixedToolbar: false, - isDistractionFree: false, - keepCaretInsideBlock: false, - showIconLabels: false, - __experimentalSetIsInserterOpened: setInserterOpened, - __experimentalReusableBlocks: [], - __experimentalPreferPatternsOnRoot: true, - } ); - } ); - - it( 'returns the extended settings when the user can create media', () => { - get.mockImplementation( ( scope, name ) => { - if ( name === 'focusMode' ) return true; - if ( name === 'fixedToolbar' ) return true; - } ); - - const state = { - settings: { key: 'value' }, - editedPost: { postType: 'wp_template_part' }, - }; - const setInserterOpened = () => {}; - - expect( getSettings( state, setInserterOpened ) ).toEqual( { - outlineMode: true, - key: 'value', - focusMode: true, - hasFixedToolbar: true, - isDistractionFree: false, - keepCaretInsideBlock: false, - showIconLabels: false, - __experimentalSetIsInserterOpened: setInserterOpened, - __experimentalReusableBlocks: [], - mediaUpload: expect.any( Function ), - __experimentalPreferPatternsOnRoot: false, - } ); - } ); - } ); - describe( 'getEditedPostId', () => { it( 'returns the template ID', () => { const state = { editedPost: { id: 10 } }; From b2fe1e32621af16e9a41761b45532457df803b34 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 Nov 2023 22:50:48 +0100 Subject: [PATCH 4/8] small fix --- .../src/components/block-editor/use-site-editor-settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index 7b153d8f94e62..75570dc5412c2 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -105,7 +105,7 @@ export default function useSiteEditorSettings() { __unstableGetPreference, getCanvasMode, getSettings, - } = select( editSiteStore ); + } = unlock( select( editSiteStore ) ); const { getEditedEntityRecord } = select( coreStore ); const usedPostType = getEditedPostType(); const usedPostId = getEditedPostId(); From 336e8b3707333e5b0ad5b637b8c22657fe7524be Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 Nov 2023 23:01:13 +0100 Subject: [PATCH 5/8] Remove unstable selector --- .../block-editor/use-site-editor-settings.js | 18 +++++++--- .../sidebar-edit-mode/default-sidebar.js | 9 ++--- .../sidebar-edit-mode/plugin-sidebar/index.js | 9 ++--- packages/edit-site/src/store/selectors.js | 36 +++++++------------ .../edit-site/src/store/test/selectors.js | 5 --- 5 files changed, 31 insertions(+), 46 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index 75570dc5412c2..f597abee0726d 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -5,6 +5,7 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Internal dependencies @@ -102,10 +103,10 @@ export default function useSiteEditorSettings() { const { getEditedPostType, getEditedPostId, - __unstableGetPreference, getCanvasMode, getSettings, } = unlock( select( editSiteStore ) ); + const { get: getPreference } = select( preferencesStore ); const { getEditedEntityRecord } = select( coreStore ); const usedPostType = getEditedPostType(); const usedPostId = getEditedPostId(); @@ -116,10 +117,17 @@ export default function useSiteEditorSettings() { ); return { templateSlug: _record.slug, - focusMode: !! __unstableGetPreference( 'focusMode' ), - isDistractionFree: !! __unstableGetPreference( 'distractionFree' ), - hasFixedToolbar: !! __unstableGetPreference( 'fixedToolbar' ), - keepCaretInsideBlock: !! __unstableGetPreference( + focusMode: !! getPreference( 'core/edit-site', 'focusMode' ), + isDistractionFree: !! getPreference( + 'core/edit-site', + 'distractionFree' + ), + hasFixedToolbar: !! getPreference( + 'core/edit-site', + 'fixedToolbar' + ), + keepCaretInsideBlock: !! getPreference( + 'core/edit-site', 'keepCaretInsideBlock' ), canvasMode: getCanvasMode(), diff --git a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js index 084d8ca4277a6..48a59935bf17c 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js @@ -6,11 +6,7 @@ import { ComplementaryAreaMoreMenuItem, } from '@wordpress/interface'; import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../store'; +import { store as preferencesStore } from '@wordpress/preferences'; export default function DefaultSidebar( { className, @@ -25,7 +21,8 @@ export default function DefaultSidebar( { } ) { const showIconLabels = useSelect( ( select ) => - !! select( editSiteStore ).__unstableGetPreference( + !! select( preferencesStore ).get( + 'core/edit-site', 'showIconLabels' ), [] diff --git a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js index 5c47f68bf3a09..45a3f6d48d0b9 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js @@ -3,11 +3,7 @@ */ import { ComplementaryArea } from '@wordpress/interface'; import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../../store'; +import { store as preferencesStore } from '@wordpress/preferences'; /** * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar. @@ -77,7 +73,8 @@ import { store as editSiteStore } from '../../../store'; export default function PluginSidebarEditSite( { className, ...props } ) { const showIconLabels = useSelect( ( select ) => - !! select( editSiteStore ).__unstableGetPreference( + !! select( preferencesStore ).get( + 'core/edit-site', 'showIconLabels' ), [] diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 2df715643f30d..945e9ec2bbc04 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -17,20 +17,6 @@ import { TEMPLATE_PART_POST_TYPE } from '../utils/constants'; * @typedef {'template'|'template_type'} TemplateType Template type. */ -/** - * Helper for getting a preference from the preferences store. - * - * This is only present so that `getSettings` doesn't need to be made a - * registry selector. - * - * It's unstable because the selector needs to be exported and so part of the - * public API to work. - */ -export const __unstableGetPreference = createRegistrySelector( - ( select ) => ( state, name ) => - select( preferencesStore ).get( 'core/edit-site', name ) -); - /** * Returns whether the given feature is enabled or not. * @@ -40,14 +26,16 @@ export const __unstableGetPreference = createRegistrySelector( * * @return {boolean} Is active. */ -export function isFeatureActive( state, featureName ) { - deprecated( `select( 'core/edit-site' ).isFeatureActive`, { - since: '6.0', - alternative: `select( 'core/preferences' ).get`, - } ); +export const isFeatureActive = createRegistrySelector( + ( select ) => ( _, featureName ) => { + deprecated( `select( 'core/edit-site' ).isFeatureActive`, { + since: '6.0', + alternative: `select( 'core/preferences' ).get`, + } ); - return !! __unstableGetPreference( state, featureName ); -} + return select( preferencesStore ).get( 'core/edit-site', featureName ); + } +); /** * Returns the current editing canvas device type. @@ -257,9 +245,9 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector( * * @return {string} Editing mode. */ -export function getEditorMode( state ) { - return __unstableGetPreference( state, 'editorMode' ); -} +export const getEditorMode = createRegistrySelector( ( select ) => () => { + return select( preferencesStore ).get( 'core/edit-site', 'editorMode' ); +} ); /** * @deprecated diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js index 8b5bdc1b2466d..c847e95bcd3a8 100644 --- a/packages/edit-site/src/store/test/selectors.js +++ b/packages/edit-site/src/store/test/selectors.js @@ -13,7 +13,6 @@ import { getReusableBlocks, isInserterOpened, isListViewOpened, - __unstableGetPreference, isPage, hasPageContentFocus, } from '../selectors'; @@ -21,16 +20,12 @@ import { describe( 'selectors', () => { const canUser = jest.fn( () => true ); const getEntityRecords = jest.fn( () => [] ); - const get = jest.fn(); getCanUserCreateMedia.registry = { select: jest.fn( () => ( { canUser } ) ), }; getReusableBlocks.registry = { select: jest.fn( () => ( { getEntityRecords } ) ), }; - __unstableGetPreference.registry = { - select: jest.fn( () => ( { get } ) ), - }; describe( 'getCanUserCreateMedia', () => { it( "selects `canUser( 'create', 'media' )` from the core store", () => { From af5b956ad15f1c56731c0bd9f93654ef267555d3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 8 Nov 2023 23:59:25 +0100 Subject: [PATCH 6/8] More cleanup --- packages/edit-site/src/store/actions.js | 13 +++++++----- packages/edit-site/src/store/selectors.js | 12 ++++++++++- packages/edit-site/src/store/test/actions.js | 16 +++++++++----- .../edit-site/src/store/test/selectors.js | 21 ------------------- 4 files changed, 30 insertions(+), 32 deletions(-) diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 30ee9e6aab01a..d7d45e35fcacd 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -31,11 +31,14 @@ import { */ export function toggleFeature( featureName ) { return function ( { registry } ) { - deprecated( "select( 'core/edit-site' ).toggleFeature( featureName )", { - since: '6.0', - alternative: - "select( 'core/preferences').toggle( 'core/edit-site', featureName )", - } ); + deprecated( + "dispatch( 'core/edit-site' ).toggleFeature( featureName )", + { + since: '6.0', + alternative: + "dispatch( 'core/preferences').toggle( 'core/edit-site', featureName )", + } + ); registry .dispatch( preferencesStore ) diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 945e9ec2bbc04..5be872d2ac791 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -33,7 +33,10 @@ export const isFeatureActive = createRegistrySelector( alternative: `select( 'core/preferences' ).get`, } ); - return select( preferencesStore ).get( 'core/edit-site', featureName ); + return !! select( preferencesStore ).get( + 'core/edit-site', + featureName + ); } ); @@ -67,6 +70,13 @@ export const getCanUserCreateMedia = createRegistrySelector( * @return {Array} The available reusable blocks. */ export const getReusableBlocks = createRegistrySelector( ( select ) => () => { + deprecated( + "select( 'core/core' ).getEntityRecords( 'postType', 'wp_block' )", + { + since: '6.5', + version: '6.8', + } + ); const isWeb = Platform.OS === 'web'; return isWeb ? select( coreDataStore ).getEntityRecords( 'postType', 'wp_block', { diff --git a/packages/edit-site/src/store/test/actions.js b/packages/edit-site/src/store/test/actions.js index 5fbbf62f369e8..839db643efc34 100644 --- a/packages/edit-site/src/store/test/actions.js +++ b/packages/edit-site/src/store/test/actions.js @@ -47,21 +47,27 @@ describe( 'actions', () => { it( 'should toggle a feature flag', () => { const registry = createRegistryWithStores(); - // Should default to false. + // Should start as undefined. expect( - registry.select( editSiteStore ).isFeatureActive( 'name' ) - ).toBe( false ); + registry + .select( preferencesStore ) + .get( 'core/edit-site', 'name' ) + ).toBe( undefined ); // Toggle on. registry.dispatch( editSiteStore ).toggleFeature( 'name' ); expect( - registry.select( editSiteStore ).isFeatureActive( 'name' ) + registry + .select( preferencesStore ) + .get( 'core/edit-site', 'name' ) ).toBe( true ); // Toggle off again. registry.dispatch( editSiteStore ).toggleFeature( 'name' ); expect( - registry.select( editSiteStore ).isFeatureActive( 'name' ) + registry + .select( preferencesStore ) + .get( 'core/edit-site', 'name' ) ).toBe( false ); // Expect a deprecation warning. diff --git a/packages/edit-site/src/store/test/selectors.js b/packages/edit-site/src/store/test/selectors.js index c847e95bcd3a8..7e36d2f4b75f4 100644 --- a/packages/edit-site/src/store/test/selectors.js +++ b/packages/edit-site/src/store/test/selectors.js @@ -10,7 +10,6 @@ import { getCanUserCreateMedia, getEditedPostType, getEditedPostId, - getReusableBlocks, isInserterOpened, isListViewOpened, isPage, @@ -19,13 +18,9 @@ import { describe( 'selectors', () => { const canUser = jest.fn( () => true ); - const getEntityRecords = jest.fn( () => [] ); getCanUserCreateMedia.registry = { select: jest.fn( () => ( { canUser } ) ), }; - getReusableBlocks.registry = { - select: jest.fn( () => ( { getEntityRecords } ) ), - }; describe( 'getCanUserCreateMedia', () => { it( "selects `canUser( 'create', 'media' )` from the core store", () => { @@ -37,22 +32,6 @@ describe( 'selectors', () => { } ); } ); - describe( 'getReusableBlocks', () => { - it( "selects `getEntityRecords( 'postType', 'wp_block' )` from the core store", () => { - expect( getReusableBlocks() ).toEqual( [] ); - expect( getReusableBlocks.registry.select ).toHaveBeenCalledWith( - coreDataStore - ); - expect( getEntityRecords ).toHaveBeenCalledWith( - 'postType', - 'wp_block', - { - per_page: -1, - } - ); - } ); - } ); - describe( 'getEditedPostId', () => { it( 'returns the template ID', () => { const state = { editedPost: { id: 10 } }; From d554abc73dd96512e12cca462f911d0b34c0b3c2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 9 Nov 2023 10:18:02 +0100 Subject: [PATCH 7/8] Small fix --- .../editor/src/components/provider/index.js | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 6baa77aa801a4..6037c6496cc0c 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -40,14 +40,21 @@ export const ExperimentalEditorProvider = withRegistryProvider( } return { postId: post.id, postType: post.type }; }, [ post.id, post.type ] ); - const { selection, isReady } = useSelect( ( select ) => { - const { getEditorSelection, __unstableIsEditorReady } = - select( editorStore ); - return { - isReady: __unstableIsEditorReady(), - selection: getEditorSelection(), - }; - }, [] ); + const { editorSettings, selection, isReady } = useSelect( + ( select ) => { + const { + getEditorSettings, + getEditorSelection, + __unstableIsEditorReady, + } = select( editorStore ); + return { + editorSettings: getEditorSettings(), + isReady: __unstableIsEditorReady(), + selection: getEditorSelection(), + }; + }, + [] + ); const { id, type } = __unstableTemplate ?? post; const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', @@ -55,7 +62,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( { id } ); const blockEditorSettings = useBlockEditorSettings( - settings, + editorSettings, type, id ); From 6e5af82d85a7ef7d4307c190a63a63dc20f9c167 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 9 Nov 2023 11:39:35 +0100 Subject: [PATCH 8/8] add comment --- packages/edit-site/src/store/selectors.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/edit-site/src/store/selectors.js b/packages/edit-site/src/store/selectors.js index 5be872d2ac791..f9c2f7d65cfaf 100644 --- a/packages/edit-site/src/store/selectors.js +++ b/packages/edit-site/src/store/selectors.js @@ -94,6 +94,8 @@ export const getReusableBlocks = createRegistrySelector( ( select ) => () => { */ export function getSettings( state ) { // It is important that we don't inject anything into these settings locally. + // The reason for this is that we have an effect in place that calls setSettings based on the previous value of getSettings. + // If we add computed settings here, we'll be adding these computed settings to the state which is very unexpected. return state.settings; }