Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Share the editor settings between the post and site editors #55970

Merged
merged 8 commits into from
Nov 9, 2023
Merged

Share the editor settings between the post and site editors #55970

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
57c47cd
Share the editor settings between the post and site editors
youknowriad Nov 8, 2023
e278a66
Remove useless settings
youknowriad Nov 8, 2023
85daca8
More cleanup
youknowriad Nov 8, 2023
b2fe1e3
small fix
youknowriad Nov 8, 2023
336e8b3
Remove unstable selector
youknowriad Nov 8, 2023
af5b956
More cleanup
youknowriad Nov 8, 2023
d554abc
Small fix
youknowriad Nov 9, 2023
6e5af82
add comment
youknowriad Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions docs/reference-guides/data/data-core-edit-site.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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_

Expand Down
135 changes: 47 additions & 88 deletions packages/edit-site/src/components/block-editor/use-site-editor-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the existing hook that was already present in the "editor" package that I exposed temporarily to share the logic. (later I'll remove it once the site editor is able to use EditorProvider directly).


function useArchiveLabel( templateSlug ) {
const taxonomyMatches = templateSlug?.match(
Expand Down Expand Up @@ -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,
getSettings,
} = select( editSiteStore );
const { getEditedEntityRecord } = select( coreStore );
const usedPostType = getEditedPostType();
const usedPostId = getEditedPostId();
const _record = getEditedEntityRecord(
Expand All @@ -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'
),
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
canvasMode: getCanvasMode(),
settings: getSettings(),
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,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These two settings are added by the site editor but I wonder if they make sense in the post editor. (Imagine you're using the post editor to edit the archive template, which is possible if you switch the wp_template show_admin flag to true.

I think also regardless of whether it's possible or not to actually access the page right now, we just have to think about this setting, why it's only defined in site editor but not post editor. cc @ntsekouras

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't added these, but it seems they are used by Query Title to show more intuitive titles if the block is inside an archive template.

using the post editor to edit the archive template, which is possible if you switch the wp_template show_admin flag to true.

I wasn't aware of that, and I thought there is no way you can edit such a template in post editor. I think that's the reasoning it was only defined in site editor.

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 );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here I'm trying to mimic exactly what the EditorProvider is going to be doing when we use it directly.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a lot of moving parts here. All the above already exists in useBlockEditorSettings? I didn't see it being added there, so assuming it already exists there.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, I checked all the settings one by one.

}
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles-renderer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function useGlobalStylesRenderer() {
styles: [ ...nonGlobalStyles, ...styles ],
__experimentalFeatures: settings,
} );
}, [ styles, settings ] );
}, [ styles, settings, updateSettings, getSettings ] );
}

export function GlobalStylesRenderer() {
Expand Down
5 changes: 4 additions & 1 deletion packages/edit-site/src/components/sidebar-edit-mode/default-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@ export default function DefaultSidebar( {
panelClassName,
} ) {
const showIconLabels = useSelect(
( select ) => select( editSiteStore ).getSettings().showIconLabels,
( select ) =>
!! select( editSiteStore ).__unstableGetPreference(
'showIconLabels'
),
[]
);

Expand Down
5 changes: 4 additions & 1 deletion packages/edit-site/src/components/sidebar-edit-mode/plugin-sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
),
[]
);

Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
const { getSettings } = unlock( select( editSiteStore ) );

return {
storedSettings: getSettings( false ),
storedSettings: getSettings(),
};
}, [] );

Expand Down
2 changes: 1 addition & 1 deletion ...t-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function NavigationMenuEditor( { navigationMenuId } ) {
const { getSettings } = unlock( select( editSiteStore ) );

return {
storedSettings: getSettings( false ),
storedSettings: getSettings(),
};
}, [] );

Expand Down
8 changes: 0 additions & 8 deletions packages/edit-site/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -39,10 +35,6 @@ export function initializeEditor( id, settings ) {
const target = document.getElementById( id );
const root = createRoot( target );

settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) =>
fetchLinkSuggestions( search, searchOptions, settings );
settings.__experimentalFetchRichUrlData = fetchUrlData;

dispatch( blocksStore ).reapplyBlockTypeFilters();
const coreBlocks = __experimentalGetCoreBlocks().filter(
( { name } ) => name !== 'core/freeform'
Expand Down
74 changes: 7 additions & 67 deletions packages/edit-site/src/store/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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.
*/
Expand Down Expand Up @@ -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;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe add the why to the comment?


/**
* @deprecated
Expand Down
Loading
Loading