@wordpress/edit-site 5.22.0 → 5.24.0

package/src/store/selectors.js

@@ -1,45 +1,23 @@
-/**
- * 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';
+import { store as editorStore } from '@wordpress/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.
  */
 
-/**
- * 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.
  *
@@ -49,14 +27,19 @@ 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.
@@ -88,6 +71,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', {
@@ -97,67 +87,18 @@ 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.
+	// 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;
+}
 
 /**
  * @deprecated
@@ -241,7 +182,10 @@ export const __experimentalGetInsertionPoint = createRegistrySelector(
 			return { rootClientId, insertionIndex, filterValue };
 		}
 
-		if ( hasPageContentFocus( state ) ) {
+		if (
+			isPage( state ) &&
+			select( editorStore ).getRenderingMode() !== 'template-only'
+		) {
 			const [ postContentClientId ] =
 				select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
 					'core/post-content'
@@ -317,9 +261,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
@@ -370,10 +314,14 @@ export function isPage( state ) {
 /**
  * Whether or not the editor allows only page content to be edited.
  *
- * @param {Object} state Global application state.
+ * @deprecated
  *
  * @return {boolean} Whether or not focus is on editing page content.
  */
-export function hasPageContentFocus( state ) {
-	return isPage( state ) ? state.hasPageContentFocus : false;
+export function hasPageContentFocus() {
+	deprecated( `select( 'core/edit-site' ).hasPageContentFocus`, {
+		since: '6.5',
+	} );
+
+	return false;
 }

package/src/store/test/actions.js

@@ -1,37 +1,25 @@
 /**
  * WordPress dependencies
  */
-import apiFetch from '@wordpress/api-fetch';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { createRegistry } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '..';
-import { setHasPageContentFocus } from '../actions';
-
-const ENTITY_TYPES = {
-	wp_template: {
-		description: 'Templates to include in your theme.',
-		hierarchical: false,
-		name: 'Templates',
-		rest_base: 'templates',
-		rest_namespace: 'wp/v2',
-		slug: 'wp_template',
-		taxonomies: [],
-	},
-};
 
 function createRegistryWithStores() {
 	// create a registry
 	const registry = createRegistry();
 
 	// register stores
+	registry.register( editorStore );
 	registry.register( blockEditorStore );
 	registry.register( coreStore );
 	registry.register( editSiteStore );
@@ -47,21 +35,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.
@@ -69,86 +63,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( 'setTemplate', () => {
-		const ID = 1;
-		const SLUG = 'archive';
-
-		it( 'should set the template when slug is provided', async () => {
-			const registry = createRegistryWithStores();
-
-			await registry.dispatch( editSiteStore ).setTemplate( ID, SLUG );
-
-			const select = registry.select( editSiteStore );
-			expect( select.getEditedPostId() ).toBe( ID );
-			expect( select.getEditedPostContext().templateSlug ).toBe( SLUG );
-		} );
-
-		it( 'should set the template by fetching the template slug', async () => {
-			const registry = createRegistryWithStores();
-
-			apiFetch.setFetchHandler( async ( options ) => {
-				const { method = 'GET', path } = options;
-				if ( method === 'GET' ) {
-					if ( path.startsWith( '/wp/v2/types' ) ) {
-						return ENTITY_TYPES;
-					}
-
-					if ( path.startsWith( `/wp/v2/templates/${ ID }` ) ) {
-						return { id: ID, slug: SLUG };
-					}
-				}
-
-				throw {
-					code: 'unknown_path',
-					message: `Unknown path: ${ method } ${ path }`,
-				};
-			} );
-
-			await registry.dispatch( editSiteStore ).setTemplate( ID );
-
-			const select = registry.select( editSiteStore );
-			expect( select.getEditedPostId() ).toBe( ID );
-			expect( select.getEditedPostContext().templateSlug ).toBe( SLUG );
-		} );
-	} );
-
-	describe( 'addTemplate', () => {
-		it( 'should issue a REST request to create the template and then set it', async () => {
-			const registry = createRegistryWithStores();
-
-			const ID = 1;
-			const SLUG = 'index';
-
-			apiFetch.setFetchHandler( async ( options ) => {
-				const { method = 'GET', path, data } = options;
-
-				if ( method === 'GET' && path.startsWith( '/wp/v2/types' ) ) {
-					return ENTITY_TYPES;
-				}
-
-				if (
-					method === 'POST' &&
-					path.startsWith( '/wp/v2/templates' )
-				) {
-					return { id: ID, slug: data.slug };
-				}
-
-				throw {
-					code: 'unknown_path',
-					message: `Unknown path: ${ method } ${ path }`,
-				};
-			} );
-
-			await registry
-				.dispatch( editSiteStore )
-				.addTemplate( { slug: SLUG } );
-
-			const select = registry.select( editSiteStore );
-			expect( select.getEditedPostId() ).toBe( ID );
-			expect( select.getEditedPostContext().templateSlug ).toBe( SLUG );
-		} );
-	} );
-
 	describe( 'setTemplatePart', () => {
 		it( 'should set template part', () => {
 			const registry = createRegistryWithStores();
@@ -162,45 +76,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( 'setPage', () => {
-		it( 'should find the template and then set the page', async () => {
-			const registry = createRegistryWithStores();
-
-			const ID = 'emptytheme//single';
-			const SLUG = 'single';
-
-			apiFetch.setFetchHandler( async ( options ) => {
-				const { method = 'GET', path, url } = options;
-
-				// Called with url arg in `__experimentalGetTemplateForLink`
-				if ( url ) {
-					return { data: { id: ID, slug: SLUG } };
-				}
-
-				if ( method === 'GET' ) {
-					if ( path.startsWith( '/wp/v2/types' ) ) {
-						return ENTITY_TYPES;
-					}
-
-					if ( path.startsWith( `/wp/v2/templates/${ ID }` ) ) {
-						return { id: ID, slug: SLUG };
-					}
-				}
-
-				throw {
-					code: 'unknown_path',
-					message: `Unknown path: ${ method } ${ path }`,
-				};
-			} );
-
-			await registry.dispatch( editSiteStore ).setPage( { path: '/' } );
-
-			const select = registry.select( editSiteStore );
-			expect( select.getEditedPostId() ).toBe( 'emptytheme//single' );
-			expect( select.getEditedPostType() ).toBe( 'wp_template' );
-		} );
-	} );
-
 	describe( 'setIsListViewOpened', () => {
 		it( 'should set the list view opened state', () => {
 			const registry = createRegistryWithStores();
@@ -284,7 +159,7 @@ describe( 'actions', () => {
 				registry
 					.select( preferencesStore )
 					.get( 'core/edit-site', 'fixedToolbar' )
-			).toBe( false );
+			).toBe( true );
 			expect( registry.select( editSiteStore ).isListViewOpened() ).toBe(
 				false
 			);
@@ -303,34 +178,4 @@ describe( 'actions', () => {
 			).toBe( true );
 		} );
 	} );
-
-	describe( 'setHasPageContentFocus', () => {
-		it( 'toggles the page content lock on', () => {
-			const dispatch = jest.fn();
-			const clearSelectedBlock = jest.fn();
-			const registry = {
-				dispatch: () => ( { clearSelectedBlock } ),
-			};
-			setHasPageContentFocus( true )( { dispatch, registry } );
-			expect( clearSelectedBlock ).toHaveBeenCalled();
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'SET_HAS_PAGE_CONTENT_FOCUS',
-				hasPageContentFocus: true,
-			} );
-		} );
-
-		it( 'toggles the page content lock off', () => {
-			const dispatch = jest.fn();
-			const clearSelectedBlock = jest.fn();
-			const registry = {
-				dispatch: () => ( { clearSelectedBlock } ),
-			};
-			setHasPageContentFocus( false )( { dispatch, registry } );
-			expect( clearSelectedBlock ).not.toHaveBeenCalled();
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'SET_HAS_PAGE_CONTENT_FOCUS',
-				hasPageContentFocus: false,
-			} );
-		} );
-	} );
 } );

package/src/store/test/reducer.js

@@ -11,8 +11,6 @@ import {
 	editedPost,
 	blockInserterPanel,
 	listViewPanel,
-	hasPageContentFocus,
-	pageContentFocusType,
 } from '../reducer';
 
 import { setIsInserterOpened } from '../actions';
@@ -149,64 +147,4 @@ describe( 'state', () => {
 			);
 		} );
 	} );
-
-	describe( 'hasPageContentFocus()', () => {
-		it( 'defaults to false', () => {
-			expect( hasPageContentFocus( undefined, {} ) ).toBe( false );
-		} );
-
-		it( 'becomes false when editing a template', () => {
-			expect(
-				hasPageContentFocus( true, {
-					type: 'SET_EDITED_POST',
-					postType: 'wp_template',
-				} )
-			).toBe( false );
-		} );
-
-		it( 'becomes true when editing a page', () => {
-			expect(
-				hasPageContentFocus( false, {
-					type: 'SET_EDITED_POST',
-					postType: 'wp_template',
-					context: {
-						postType: 'page',
-						postId: 123,
-					},
-				} )
-			).toBe( true );
-		} );
-
-		it( 'can be set', () => {
-			expect(
-				hasPageContentFocus( false, {
-					type: 'SET_HAS_PAGE_CONTENT_FOCUS',
-					hasPageContentFocus: true,
-				} )
-			).toBe( true );
-			expect(
-				hasPageContentFocus( true, {
-					type: 'SET_HAS_PAGE_CONTENT_FOCUS',
-					hasPageContentFocus: false,
-				} )
-			).toBe( false );
-		} );
-	} );
-
-	describe( 'pageContentFocusType', () => {
-		it( 'defaults to disableTemplate', () => {
-			expect( pageContentFocusType( undefined, {} ) ).toBe(
-				'disableTemplate'
-			);
-		} );
-
-		it( 'can be set', () => {
-			expect(
-				pageContentFocusType( 'disableTemplate', {
-					type: 'SET_PAGE_CONTENT_FOCUS_TYPE',
-					pageContentFocusType: 'enableTemplate',
-				} )
-			).toBe( 'enableTemplate' );
-		} );
-	} );
 } );

package/src/store/test/selectors.js

@@ -8,30 +8,18 @@ import { store as coreDataStore } from '@wordpress/core-data';
  */
 import {
 	getCanUserCreateMedia,
-	getSettings,
 	getEditedPostType,
 	getEditedPostId,
-	getReusableBlocks,
 	isInserterOpened,
 	isListViewOpened,
-	__unstableGetPreference,
 	isPage,
-	hasPageContentFocus,
 } from '../selectors';
 
 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", () => {
@@ -43,77 +31,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( '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 } };
@@ -170,38 +87,4 @@ describe( 'selectors', () => {
 			expect( isPage( state ) ).toBe( false );
 		} );
 	} );
-
-	describe( 'hasPageContentFocus', () => {
-		it( 'returns true if locked and the edited post type is a page', () => {
-			const state = {
-				editedPost: {
-					postType: 'wp_template',
-					context: { postType: 'page', postId: 123 },
-				},
-				hasPageContentFocus: true,
-			};
-			expect( hasPageContentFocus( state ) ).toBe( true );
-		} );
-
-		it( 'returns false if not locked and the edited post type is a page', () => {
-			const state = {
-				editedPost: {
-					postType: 'wp_template',
-					context: { postType: 'page', postId: 123 },
-				},
-				hasPageContentFocus: false,
-			};
-			expect( hasPageContentFocus( state ) ).toBe( false );
-		} );
-
-		it( 'returns false if locked and the edited post type is a template', () => {
-			const state = {
-				editedPost: {
-					postType: 'wp_template',
-				},
-				hasPageContentFocus: true,
-			};
-			expect( hasPageContentFocus( state ) ).toBe( false );
-		} );
-	} );
 } );

package/src/style.scss

@@ -13,6 +13,7 @@
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
+@import "./components/page-templates/style.scss";
 @import "./components/table/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
 @import "./components/sidebar-edit-mode/page-panels/style.scss";
@@ -39,6 +40,7 @@
 @import "./components/sidebar-navigation-screen-pattern/style.scss";
 @import "./components/sidebar-navigation-screen-patterns/style.scss";
 @import "./components/sidebar-navigation-screen-template/style.scss";
+@import "./components/sidebar-dataviews/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";