@wordpress/editor 13.24.1 → 13.26.0

package/src/store/actions.js

@@ -36,7 +36,7 @@ import {
 export const setupEditor =
 	( post, edits, template ) =>
 	( { dispatch } ) => {
-		dispatch.setupEditorState( post );
+		dispatch.setEditedPost( post.type, post.id );
 		// Apply a template for new posts only, if exists.
 		const isNewPost = post.status === 'auto-draft';
 		if ( isNewPost && template ) {
@@ -70,10 +70,18 @@ export const setupEditor =
  * Returns an action object signalling that the editor is being destroyed and
  * that any necessary state or side-effect cleanup should occur.
  *
+ * @deprecated
+ *
  * @return {Object} Action object.
  */
 export function __experimentalTearDownEditor() {
-	return { type: 'TEAR_DOWN_EDITOR' };
+	deprecated(
+		"wp.data.dispatch( 'core/editor' ).__experimentalTearDownEditor",
+		{
+			since: '6.5',
+		}
+	);
+	return { type: 'DO_NOTHING' };
 }
 
 /**
@@ -109,17 +117,33 @@ export function updatePost() {
 }
 
 /**
- * Returns an action object used to setup the editor state when first opening
- * an editor.
+ * Setup the editor state.
+ *
+ * @deprecated
  *
  * @param {Object} post Post object.
+ */
+export function setupEditorState( post ) {
+	deprecated( "wp.data.dispatch( 'core/editor' ).setupEditorState", {
+		since: '6.5',
+		alternative: "wp.data.dispatch( 'core/editor' ).setEditedPost",
+	} );
+	return setEditedPost( post.type, post.id );
+}
+
+/**
+ * Returns an action that sets the current post Type and post ID.
+ *
+ * @param {string} postType Post Type.
+ * @param {string} postId   Post ID.
  *
  * @return {Object} Action object.
  */
-export function setupEditorState( post ) {
+export function setEditedPost( postType, postId ) {
 	return {
-		type: 'SETUP_EDITOR_STATE',
-		post,
+		type: 'SET_EDITED_POST',
+		postType,
+		postId,
 	};
 }
 
@@ -560,8 +584,12 @@ export function updateEditorSettings( settings ) {
  */
 export const setRenderingMode =
 	( mode ) =>
-	( { dispatch, registry } ) => {
-		registry.dispatch( blockEditorStore ).clearSelectedBlock();
+	( { dispatch, registry, select } ) => {
+		if ( select.__unstableIsEditorReady() ) {
+			// We clear the block selection but we also need to clear the selection from the core store.
+			registry.dispatch( blockEditorStore ).clearSelectedBlock();
+			dispatch.editPost( { selection: undefined }, { undoIgnore: true } );
+		}
 
 		dispatch( {
 			type: 'SET_RENDERING_MODE',
@@ -569,6 +597,129 @@ export const setRenderingMode =
 		} );
 	};
 
+/**
+ * Action that changes the width of the editing canvas.
+ *
+ * @param {string} deviceType
+ *
+ * @return {Object} Action object.
+ */
+export function setDeviceType( deviceType ) {
+	return {
+		type: 'SET_DEVICE_TYPE',
+		deviceType,
+	};
+}
+
+/**
+ * Returns an action object used to enable or disable a panel in the editor.
+ *
+ * @param {string} panelName A string that identifies the panel to enable or disable.
+ *
+ * @return {Object} Action object.
+ */
+export const toggleEditorPanelEnabled =
+	( panelName ) =>
+	( { registry } ) => {
+		const inactivePanels =
+			registry
+				.select( preferencesStore )
+				.get( 'core', 'inactivePanels' ) ?? [];
+
+		const isPanelInactive = !! inactivePanels?.includes( panelName );
+
+		// If the panel is inactive, remove it to enable it, else add it to
+		// make it inactive.
+		let updatedInactivePanels;
+		if ( isPanelInactive ) {
+			updatedInactivePanels = inactivePanels.filter(
+				( invactivePanelName ) => invactivePanelName !== panelName
+			);
+		} else {
+			updatedInactivePanels = [ ...inactivePanels, panelName ];
+		}
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'inactivePanels', updatedInactivePanels );
+	};
+
+/**
+ * Opens a closed panel and closes an open panel.
+ *
+ * @param {string} panelName A string that identifies the panel to open or close.
+ */
+export const toggleEditorPanelOpened =
+	( panelName ) =>
+	( { registry } ) => {
+		const openPanels =
+			registry.select( preferencesStore ).get( 'core', 'openPanels' ) ??
+			[];
+
+		const isPanelOpen = !! openPanels?.includes( panelName );
+
+		// If the panel is open, remove it to close it, else add it to
+		// make it open.
+		let updatedOpenPanels;
+		if ( isPanelOpen ) {
+			updatedOpenPanels = openPanels.filter(
+				( openPanelName ) => openPanelName !== panelName
+			);
+		} else {
+			updatedOpenPanels = [ ...openPanels, panelName ];
+		}
+
+		registry
+			.dispatch( preferencesStore )
+			.set( 'core', 'openPanels', updatedOpenPanels );
+	};
+
+/**
+ * Returns an action object used to remove a panel from the editor.
+ *
+ * @param {string} panelName A string that identifies the panel to remove.
+ *
+ * @return {Object} Action object.
+ */
+export function removeEditorPanel( panelName ) {
+	return {
+		type: 'REMOVE_PANEL',
+		panelName,
+	};
+}
+
+/**
+ * Returns an action object used to open/close the inserter.
+ *
+ * @param {boolean|Object} value                Whether the inserter should be
+ *                                              opened (true) or closed (false).
+ *                                              To specify an insertion point,
+ *                                              use an object.
+ * @param {string}         value.rootClientId   The root client ID to insert at.
+ * @param {number}         value.insertionIndex The index to insert at.
+ *
+ * @return {Object} Action object.
+ */
+export function setIsInserterOpened( value ) {
+	return {
+		type: 'SET_IS_INSERTER_OPENED',
+		value,
+	};
+}
+
+/**
+ * Returns an action object used to open/close the list view.
+ *
+ * @param {boolean} isOpen A boolean representing whether the list view should be opened or closed.
+ * @return {Object} Action object.
+ */
+export function setIsListViewOpened( isOpen ) {
+	return {
+		type: 'SET_IS_LIST_VIEW_OPENED',
+		isOpen,
+	};
+}
+
 /**
  * Backward compatibility
  */

package/src/store/defaults.js

@@ -27,4 +27,5 @@ export const EDITOR_SETTINGS_DEFAULTS = {
 	richEditingEnabled: true,
 	codeEditingEnabled: true,
 	enableCustomFields: undefined,
+	defaultRenderingMode: 'post-only',
 };

package/src/store/index.js

@@ -9,7 +9,10 @@ import { createReduxStore, register } from '@wordpress/data';
 import reducer from './reducer';
 import * as selectors from './selectors';
 import * as actions from './actions';
+import * as privateActions from './private-actions';
+import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /**
  * Post editor data store configuration.
@@ -36,3 +39,5 @@ export const store = createReduxStore( STORE_NAME, {
 } );
 
 register( store );
+unlock( store ).registerPrivateActions( privateActions );
+unlock( store ).registerPrivateSelectors( privateSelectors );

package/src/store/private-actions.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Returns an action object used to set which template is currently being used/edited.
+ *
+ * @param {string} id Template Id.
+ *
+ * @return {Object} Action object.
+ */
+export function setCurrentTemplateId( id ) {
+	return {
+		type: 'SET_CURRENT_TEMPLATE_ID',
+		id,
+	};
+}
+
+/**
+ * Create a block based template.
+ *
+ * @param {Object?} template Template to create and assign.
+ */
+export const createTemplate =
+	( template ) =>
+	async ( { select, dispatch, registry } ) => {
+		const savedTemplate = await registry
+			.dispatch( coreStore )
+			.saveEntityRecord( 'postType', 'wp_template', template );
+		registry
+			.dispatch( coreStore )
+			.editEntityRecord(
+				'postType',
+				select.getCurrentPostType(),
+				select.getCurrentPostId(),
+				{
+					template: savedTemplate.slug,
+				}
+			);
+		registry
+			.dispatch( noticesStore )
+			.createSuccessNotice(
+				__( "Custom template created. You're in template mode now." ),
+				{
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Go back' ),
+							onClick: () =>
+								dispatch.setRenderingMode(
+									select.getEditorSettings()
+										.defaultRenderingMode
+								),
+						},
+					],
+				}
+			);
+	};

package/src/store/private-selectors.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { createRegistrySelector } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { getRenderingMode } from './selectors';
+
+const EMPTY_INSERTION_POINT = {
+	rootClientId: undefined,
+	insertionIndex: undefined,
+	filterValue: undefined,
+};
+
+/**
+ * Get the insertion point for the inserter.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Object} The root client ID, index to insert at and starting filter value.
+ */
+export const getInsertionPoint = createRegistrySelector(
+	( select ) => ( state ) => {
+		if ( typeof state.blockInserterPanel === 'object' ) {
+			return state.blockInserterPanel;
+		}
+
+		if ( getRenderingMode( state ) === 'template-locked' ) {
+			const [ postContentClientId ] =
+				select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
+					'core/post-content'
+				);
+			if ( postContentClientId ) {
+				return {
+					rootClientId: postContentClientId,
+					insertionIndex: undefined,
+					filterValue: undefined,
+				};
+			}
+		}
+
+		return EMPTY_INSERTION_POINT;
+	}
+);
+
+export function getListViewToggleRef( state ) {
+	return state.listViewToggleRef;
+}

package/src/store/reducer.js

@@ -83,8 +83,17 @@ export function shouldOverwriteState( action, previousAction ) {
 
 export function postId( state = null, action ) {
 	switch ( action.type ) {
-		case 'SETUP_EDITOR_STATE':
-			return action.post.id;
+		case 'SET_EDITED_POST':
+			return action.postId;
+	}
+
+	return state;
+}
+
+export function templateId( state = null, action ) {
+	switch ( action.type ) {
+		case 'SET_CURRENT_TEMPLATE_ID':
+			return action.id;
 	}
 
 	return state;
@@ -92,8 +101,8 @@ export function postId( state = null, action ) {
 
 export function postType( state = null, action ) {
 	switch ( action.type ) {
-		case 'SETUP_EDITOR_STATE':
-			return action.post.type;
+		case 'SET_EDITED_POST':
+			return action.postType;
 	}
 
 	return state;
@@ -238,66 +247,134 @@ export function postAutosavingLock( state = {}, action ) {
 }
 
 /**
- * Reducer returning whether the editor is ready to be rendered.
- * The editor is considered ready to be rendered once
- * the post object is loaded properly and the initial blocks parsed.
+ * Reducer returning the post editor setting.
  *
- * @param {boolean} state
- * @param {Object}  action
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
  *
- * @return {boolean} Updated state.
+ * @return {Object} Updated state.
  */
-export function isReady( state = false, action ) {
+export function editorSettings( state = EDITOR_SETTINGS_DEFAULTS, action ) {
 	switch ( action.type ) {
-		case 'SETUP_EDITOR_STATE':
-			return true;
+		case 'UPDATE_EDITOR_SETTINGS':
+			return {
+				...state,
+				...action.settings,
+			};
+	}
 
-		case 'TEAR_DOWN_EDITOR':
-			return false;
+	return state;
+}
+
+export function renderingMode( state = 'all', action ) {
+	switch ( action.type ) {
+		case 'SET_RENDERING_MODE':
+			return action.mode;
 	}
 
 	return state;
 }
 
 /**
- * Reducer returning the post editor setting.
+ * Reducer returning the editing canvas device type.
  *
  * @param {Object} state  Current state.
  * @param {Object} action Dispatched action.
  *
  * @return {Object} Updated state.
  */
-export function editorSettings( state = EDITOR_SETTINGS_DEFAULTS, action ) {
+export function deviceType( state = 'Desktop', action ) {
 	switch ( action.type ) {
-		case 'UPDATE_EDITOR_SETTINGS':
-			return {
-				...state,
-				...action.settings,
-			};
+		case 'SET_DEVICE_TYPE':
+			return action.deviceType;
 	}
 
 	return state;
 }
 
-export function renderingMode( state = 'all', action ) {
+/**
+ * Reducer storing the list of all programmatically removed panels.
+ *
+ * @param {Array}  state  Current state.
+ * @param {Object} action Action object.
+ *
+ * @return {Array} Updated state.
+ */
+export function removedPanels( state = [], action ) {
 	switch ( action.type ) {
-		case 'SET_RENDERING_MODE':
-			return action.mode;
+		case 'REMOVE_PANEL':
+			if ( ! state.includes( action.panelName ) ) {
+				return [ ...state, action.panelName ];
+			}
 	}
 
 	return state;
 }
 
+/**
+ * Reducer to set the block inserter panel open or closed.
+ *
+ * Note: this reducer interacts with the list view panel reducer
+ * to make sure that only one of the two panels is open at the same time.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ */
+export function blockInserterPanel( state = false, action ) {
+	switch ( action.type ) {
+		case 'SET_IS_LIST_VIEW_OPENED':
+			return action.isOpen ? false : state;
+		case 'SET_IS_INSERTER_OPENED':
+			return action.value;
+	}
+	return state;
+}
+
+/**
+ * Reducer to set the list view panel open or closed.
+ *
+ * Note: this reducer interacts with the inserter panel reducer
+ * to make sure that only one of the two panels is open at the same time.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ */
+export function listViewPanel( state = false, action ) {
+	switch ( action.type ) {
+		case 'SET_IS_INSERTER_OPENED':
+			return action.value ? false : state;
+		case 'SET_IS_LIST_VIEW_OPENED':
+			return action.isOpen;
+	}
+	return state;
+}
+
+/**
+ * This reducer does nothing aside initializing a ref to the list view toggle.
+ * We will have a unique ref per "editor" instance.
+ *
+ * @param {Object} state
+ * @return {Object} Reference to the list view toggle button.
+ */
+export function listViewToggleRef( state = { current: null } ) {
+	return state;
+}
+
 export default combineReducers( {
 	postId,
 	postType,
+	templateId,
 	saving,
 	deleting,
 	postLock,
 	template,
 	postSavingLock,
-	isReady,
 	editorSettings,
 	postAutosavingLock,
 	renderingMode,
+	deviceType,
+	removedPanels,
+	blockInserterPanel,
+	listViewPanel,
+	listViewToggleRef,
 } );

package/src/store/reducer.native.js

@@ -13,7 +13,6 @@ import {
 	postLock,
 	postSavingLock,
 	template,
-	isReady,
 	editorSettings,
 } from './reducer.js';
 
@@ -87,7 +86,6 @@ export default combineReducers( {
 	postLock,
 	postSavingLock,
 	template,
-	isReady,
 	editorSettings,
 	clipboard,
 	notices,