Site Editor: Replace core/edit-site store name with store object (#28695

) * Expose store * Replace in BlockEditor * Replace in editor * Replace in header * Replace in navigation-sidebar * Replace in sidebar * Replace in template-details * Replace in url-query-controller * Replace in store * Disallow multiple register of editSiteStore * Register edit site store in tests * Use name property * Fix circular dependency
WordPress · Feb 4, 2021 · f7fc728 · f7fc728
1 parent ddee0f4
commit f7fc728
Show file tree

Hide file tree

Showing 23 changed files with 93 additions and 33 deletions.
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -26,6 +26,7 @@ import { DropZoneProvider, Popover } from '@wordpress/components';
 import TemplatePartConverter from '../template-part-converter';
 import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar';
+import { store as editSiteStore } from '../../store';
 
 function Canvas( { body } ) {
 	useBlockSelectionClearer( body );
@@ -48,7 +49,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				getEditedPostType,
 				getPage,
 				__experimentalGetPreviewDeviceType,
-			} = select( 'core/edit-site' );
+			} = select( editSiteStore );
 			return {
 				settings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
@@ -62,7 +63,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		'postType',
 		templateType
 	);
-	const { setPage } = useDispatch( 'core/edit-site' );
+	const { setPage } = useDispatch( editSiteStore );
 
 	const resizedCanvasStyles = useResizeCanvas( deviceType, true );
 	const ref = useRef();

diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js
@@ -33,6 +33,7 @@ import {
 	getPresetVariable,
 } from './utils';
 import getGlobalStyles from './global-styles-renderer';
+import { store as editSiteStore } from '../../store';
 
 const EMPTY_CONTENT = { isGlobalStylesUserThemeJSON: true };
 const EMPTY_CONTENT_STRING = JSON.stringify( EMPTY_CONTENT );
@@ -134,10 +135,10 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
 	const { blockTypes, settings } = useSelect( ( select ) => {
 		return {
 			blockTypes: select( blocksStore ).getBlockTypes(),
-			settings: select( 'core/edit-site' ).getSettings(),
+			settings: select( editSiteStore ).getSettings(),
 		};
 	} );
-	const { updateSettings } = useDispatch( 'core/edit-site' );
+	const { updateSettings } = useDispatch( editSiteStore );
 
 	const contexts = useMemo( () => getContexts( blockTypes ), [ blockTypes ] );
 

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -41,6 +41,7 @@ import KeyboardShortcuts from '../keyboard-shortcuts';
 import GlobalStylesProvider from './global-styles-provider';
 import NavigationSidebar from '../navigation-sidebar';
 import URLQueryController from '../url-query-controller';
+import { store as editSiteStore } from '../../store';
 
 const interfaceLabels = {
 	secondarySidebar: __( 'Block Library' ),
@@ -67,7 +68,7 @@ function Editor() {
 			getEditedPostId,
 			getPage,
 			isNavigationOpened,
-		} = select( 'core/edit-site' );
+		} = select( editSiteStore );
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 
@@ -77,7 +78,7 @@ function Editor() {
 			isFullscreenActive: isFeatureActive( 'fullscreenMode' ),
 			sidebarIsOpened: !! select(
 				interfaceStore
-			).getActiveComplementaryArea( 'core/edit-site' ),
+			).getActiveComplementaryArea( editSiteStore ),
 			settings: getSettings(),
 			templateType: postType,
 			page: getPage(),
@@ -93,7 +94,7 @@ function Editor() {
 		};
 	}, [] );
 	const { updateEditorSettings } = useDispatch( 'core/editor' );
-	const { setPage, setIsInserterOpened } = useDispatch( 'core/edit-site' );
+	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 
 	// Keep the defaultTemplateTypes in the core/editor settings too,
 	// so that they can be selected with core/editor selectors in any editor.

diff --git a/packages/edit-site/src/components/editor/utils.js b/packages/edit-site/src/components/editor/utils.js
@@ -6,6 +6,10 @@ import { get, find, forEach, camelCase, isString } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
 
 /* Supporting data */
 export const ALL_BLOCKS_NAME = 'defaults';
@@ -90,7 +94,7 @@ export const LINK_COLOR_DECLARATION = `a { color: var(${ LINK_COLOR }, #00e); }`
 
 export function useEditorFeature( featurePath, blockName = ALL_BLOCKS_NAME ) {
 	const settings = useSelect( ( select ) => {
-		return select( 'core/edit-site' ).getSettings();
+		return select( editSiteStore ).getSettings();
 	} );
 	return (
 		get(

diff --git a/packages/edit-site/src/components/header/feature-toggle/index.js b/packages/edit-site/src/components/header/feature-toggle/index.js
@@ -12,6 +12,11 @@ import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
 import { speak } from '@wordpress/a11y';
 
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
 export default function FeatureToggle( {
 	feature,
 	label,
@@ -28,10 +33,10 @@ export default function FeatureToggle( {
 	};
 
 	const isActive = useSelect( ( select ) => {
-		return select( 'core/edit-site' ).isFeatureActive( feature );
+		return select( editSiteStore ).isFeatureActive( feature );
 	}, [] );
 
-	const { toggleFeature } = useDispatch( 'core/edit-site' );
+	const { toggleFeature } = useDispatch( editSiteStore );
 
 	return (
 		<MenuItem

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -24,6 +24,7 @@ import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import TemplateDetails from '../template-details';
+import { store as editSiteStore } from '../../store';
 
 export default function Header( { openEntitiesSavedStates } ) {
 	const inserterButton = useRef();
@@ -41,7 +42,7 @@ export default function Header( { openEntitiesSavedStates } ) {
 			getEditedPostType,
 			getEditedPostId,
 			isInserterOpened,
-		} = select( 'core/edit-site' );
+		} = select( editSiteStore );
 		const { getEntityRecord } = select( 'core' );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
 			'core/editor'
@@ -68,7 +69,7 @@ export default function Header( { openEntitiesSavedStates } ) {
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
-	} = useDispatch( 'core/edit-site' );
+	} = useDispatch( editSiteStore );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const displayBlockToolbar =

diff --git a/packages/edit-site/src/components/navigation-sidebar/index.js b/packages/edit-site/src/components/navigation-sidebar/index.js
@@ -9,6 +9,7 @@ import { useSelect } from '@wordpress/data';
  */
 import NavigationPanel from './navigation-panel';
 import NavigationToggle from './navigation-toggle';
+import { store as editSiteStore } from '../../store';
 
 export const {
 	Fill: NavigationPanelPreviewFill,
@@ -17,7 +18,7 @@ export const {
 
 export default function NavigationSidebar() {
 	const isNavigationOpen = useSelect( ( select ) => {
-		return select( 'core/edit-site' ).isNavigationOpened();
+		return select( editSiteStore ).isNavigationOpened();
 	} );
 
 	return (

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/content-navigation.js
@@ -21,12 +21,13 @@ import {
 	MENU_CONTENT_PAGES,
 	MENU_CONTENT_POSTS,
 } from './constants';
+import { store as editSiteStore } from '../../../store';
 
 export default function ContentNavigation( { onActivateMenu } ) {
 	const [ activeMenu, setActiveMenu ] = useState( 'root' );
 
 	const page = useSelect(
-		( select ) => select( 'core/edit-site' ).getPage(),
+		( select ) => select( editSiteStore ).getPage(),
 		[]
 	);
 

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/index.js
@@ -15,11 +15,12 @@ import ContentNavigation from './content-navigation';
 import TemplatesNavigation from './templates-navigation';
 import { useSelect } from '@wordpress/data';
 import { MENU_ROOT } from './constants';
+import { store as editSiteStore } from '../../../store';
 
 const NavigationPanel = ( { isOpen } ) => {
 	const [ contentActiveMenu, setContentActiveMenu ] = useState( MENU_ROOT );
 	const { templatesActiveMenu, siteTitle } = useSelect( ( select ) => {
-		const { getNavigationPanelActiveMenu } = select( 'core/edit-site' );
+		const { getNavigationPanelActiveMenu } = select( editSiteStore );
 		const { getEntityRecord } = select( 'core' );
 
 		const siteData =

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-posts.js b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/content-posts.js
@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
  */
 import NavigationEntityItems from '../navigation-entity-items';
 import { MENU_CONTENT_POSTS, MENU_ROOT } from '../constants';
+import { store as editSiteStore } from '../../../../store';
 
 export default function ContentPostsMenu() {
 	const showOnFront = useSelect(
@@ -22,7 +23,7 @@ export default function ContentPostsMenu() {
 		[]
 	);
 
-	const { setPage } = useDispatch( 'core/edit-site' );
+	const { setPage } = useDispatch( editSiteStore );
 
 	const onActivateFrontItem = () => {
 		setPage( {

diff --git a/...s/edit-site/src/components/navigation-sidebar/navigation-panel/navigation-entity-items.js b/...s/edit-site/src/components/navigation-sidebar/navigation-panel/navigation-entity-items.js
@@ -5,6 +5,11 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __experimentalNavigationItem as NavigationItem } from '@wordpress/components';
 import { getPathAndQueryString } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
 const getEntityTitle = ( kind, entity ) =>
 	'taxonomy' === kind ? entity.name : entity?.title?.rendered;
 
@@ -14,7 +19,7 @@ export default function NavigationEntityItems( { kind, name, query = {} } ) {
 		[ kind, name, query ]
 	);
 
-	const { setPage } = useDispatch( 'core/edit-site' );
+	const { setPage } = useDispatch( editSiteStore );
 
 	if ( ! entities ) {
 		return null;

diff --git a/...ges/edit-site/src/components/navigation-sidebar/navigation-panel/new-template-dropdown.js b/...ges/edit-site/src/components/navigation-sidebar/navigation-panel/new-template-dropdown.js
@@ -21,6 +21,7 @@ import { Icon, plus } from '@wordpress/icons';
  */
 import getClosestAvailableTemplate from '../../../utils/get-closest-available-template';
 import { TEMPLATES_NEW_OPTIONS } from './constants';
+import { store as editSiteStore } from '../../../store';
 
 export default function NewTemplateDropdown() {
 	const { defaultTemplateTypes, templates } = useSelect( ( select ) => {
@@ -36,7 +37,7 @@ export default function NewTemplateDropdown() {
 			templates: templateEntities,
 		};
 	}, [] );
-	const { addTemplate } = useDispatch( 'core/edit-site' );
+	const { addTemplate } = useDispatch( editSiteStore );
 
 	const createTemplate = ( slug ) => {
 		const closestAvailableTemplate = getClosestAvailableTemplate(

diff --git a/.../edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js b/.../edit-site/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js
@@ -14,6 +14,7 @@ import { __ } from '@wordpress/i18n';
  */
 import TemplatePreview from './template-preview';
 import { NavigationPanelPreviewFill } from '../index';
+import { store as editSiteStore } from '../../../store';
 
 export default function TemplateNavigationItem( { item } ) {
 	const { title, description } = useSelect(
@@ -26,7 +27,7 @@ export default function TemplateNavigationItem( { item } ) {
 				  },
 		[]
 	);
-	const { setTemplate, setTemplatePart } = useDispatch( 'core/edit-site' );
+	const { setTemplate, setTemplatePart } = useDispatch( editSiteStore );
 	const [ isPreviewVisible, setIsPreviewVisible ] = useState( false );
 
 	if ( ! item ) {

diff --git a/...ages/edit-site/src/components/navigation-sidebar/navigation-panel/templates-navigation.js b/...ages/edit-site/src/components/navigation-sidebar/navigation-panel/templates-navigation.js
@@ -17,14 +17,15 @@ import TemplatesMenu from './menus/templates';
 import TemplatePartsMenu from './menus/template-parts';
 import MainDashboardButton from '../../main-dashboard-button';
 import { MENU_ROOT, MENU_TEMPLATE_PARTS, MENU_TEMPLATES } from './constants';
+import { store as editSiteStore } from '../../../store';
 
 export default function TemplatesNavigation() {
 	const { postId, postType, activeMenu } = useSelect( ( select ) => {
 		const {
 			getEditedPostType,
 			getEditedPostId,
 			getNavigationPanelActiveMenu,
-		} = select( 'core/edit-site' );
+		} = select( editSiteStore );
 
 		return {
 			postId: getEditedPostId(),
@@ -33,7 +34,7 @@ export default function TemplatesNavigation() {
 		};
 	}, [] );
 
-	const { setNavigationPanelActiveMenu } = useDispatch( 'core/edit-site' );
+	const { setNavigationPanelActiveMenu } = useDispatch( editSiteStore );
 
 	return (
 		<Navigation

diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
@@ -6,10 +6,15 @@ import { Button, Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { wordpress } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+
 function NavigationToggle( { icon, isOpen } ) {
 	const { isActive, isRequestingSiteIcon, siteIconUrl } = useSelect(
 		( select ) => {
-			const { isFeatureActive } = select( 'core/edit-site' );
+			const { isFeatureActive } = select( editSiteStore );
 			const { getEntityRecord } = select( 'core' );
 			const { isResolving } = select( 'core/data' );
 			const siteData =
@@ -28,7 +33,7 @@ function NavigationToggle( { icon, isOpen } ) {
 		[]
 	);
 
-	const { setIsNavigationPanelOpened } = useDispatch( 'core/edit-site' );
+	const { setIsNavigationPanelOpened } = useDispatch( editSiteStore );
 
 	if ( ! isActive ) {
 		return null;

diff --git a/packages/edit-site/src/components/sidebar/color-palette-panel.js b/packages/edit-site/src/components/sidebar/color-palette-panel.js
@@ -14,6 +14,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { useEditorFeature, ALL_BLOCKS_NAME } from '../editor/utils';
+import { store as editSiteStore } from '../../store';
 
 /**
  * Shared reference to an empty array for cases where it is important to avoid
@@ -35,7 +36,7 @@ export default function ColorPalettePanel( {
 	const userColors = getSetting( contextName, 'color.palette' );
 	const immutableColorSlugs = useSelect(
 		( select ) => {
-			const baseStyles = select( 'core/edit-site' ).getSettings()
+			const baseStyles = select( editSiteStore ).getSettings()
 				.__experimentalGlobalStylesBaseStyles;
 			const basePalette =
 				get( baseStyles, [

diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js
@@ -9,14 +9,15 @@ import { useDispatch, useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { MENU_TEMPLATES } from '../navigation-sidebar/navigation-panel/constants';
+import { store as editSiteStore } from '../../store';
 
 export default function TemplateDetails( { template, onClose } ) {
 	const { title, description } = useSelect(
 		( select ) =>
 			select( 'core/editor' ).__experimentalGetTemplateInfo( template ),
 		[]
 	);
-	const { openNavigationPanelToMenu } = useDispatch( 'core/edit-site' );
+	const { openNavigationPanelToMenu } = useDispatch( editSiteStore );
 
 	if ( ! template ) {
 		return null;

diff --git a/packages/edit-site/src/components/url-query-controller/index.js b/packages/edit-site/src/components/url-query-controller/index.js
@@ -5,9 +5,14 @@ import { useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getQueryArg, addQueryArgs, removeQueryArgs } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
 export default function URLQueryController() {
 	const { setTemplate, setTemplatePart, showHomepage, setPage } = useDispatch(
-		'core/edit-site'
+		editSiteStore
 	);
 
 	// Set correct entity on load.
@@ -48,7 +53,7 @@ export default function URLQueryController() {
 function useCurrentPageContext() {
 	return useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId, getPage } = select(
-			'core/edit-site'
+			editSiteStore
 		);
 
 		const page = getPage();