@wordpress/editor 13.24.1 → 13.25.0

package/src/private-apis.js

@@ -1,17 +1,21 @@
 /**
  * Internal dependencies
  */
+import EditorCanvas from './components/editor-canvas';
 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';
 import PostPanelRow from './components/post-panel-row';
+import PreviewDropdown from './components/preview-dropdown';
 
 export const privateApis = {};
 lock( privateApis, {
+	EditorCanvas,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
 	PostPanelRow,
+	PreviewDropdown,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
 	useBlockEditorSettings,

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,20 @@ 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,
+	};
+}
+
 /**
  * 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,9 @@ 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 { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /**
  * Post editor data store configuration.
@@ -36,3 +38,4 @@ export const store = createReduxStore( STORE_NAME, {
 } );
 
 register( store );
+unlock( store ).registerPrivateActions( privateActions );

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/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;
@@ -237,28 +246,6 @@ export function postAutosavingLock( state = {}, action ) {
 	return state;
 }
 
-/**
- * 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.
- *
- * @param {boolean} state
- * @param {Object}  action
- *
- * @return {boolean} Updated state.
- */
-export function isReady( state = false, action ) {
-	switch ( action.type ) {
-		case 'SETUP_EDITOR_STATE':
-			return true;
-
-		case 'TEAR_DOWN_EDITOR':
-			return false;
-	}
-
-	return state;
-}
-
 /**
  * Reducer returning the post editor setting.
  *
@@ -288,16 +275,34 @@ export function renderingMode( state = 'all', action ) {
 	return state;
 }
 
+/**
+ * Reducer returning the editing canvas device type.
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function deviceType( state = 'Desktop', action ) {
+	switch ( action.type ) {
+		case 'SET_DEVICE_TYPE':
+			return action.deviceType;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	postId,
 	postType,
+	templateId,
 	saving,
 	deleting,
 	postLock,
 	template,
 	postSavingLock,
-	isReady,
 	editorSettings,
 	postAutosavingLock,
 	renderingMode,
+	deviceType,
 } );

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,

package/src/store/selectors.js

@@ -205,6 +205,17 @@ export function getCurrentPostId( state ) {
 	return state.postId;
 }
 
+/**
+ * Returns the template ID currently being rendered/edited
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string?} Template ID.
+ */
+export function getCurrentTemplateId( state ) {
+	return state.templateId;
+}
+
 /**
  * Returns the number of revisions of the post currently being edited.
  *
@@ -819,54 +830,54 @@ export function getEditedPostPreviewLink( state ) {
  * is a single block within the post and it is of a type known to match a
  * default post format. Returns null if the format cannot be determined.
  *
- * @param {Object} state Global application state.
- *
  * @return {?string} Suggested post format.
  */
-export function getSuggestedPostFormat( state ) {
-	const blocks = getEditorBlocks( state );
-
-	if ( blocks.length > 2 ) return null;
-
-	let name;
-	// If there is only one block in the content of the post grab its name
-	// so we can derive a suitable post format from it.
-	if ( blocks.length === 1 ) {
-		name = blocks[ 0 ].name;
-		// Check for core/embed `video` and `audio` eligible suggestions.
-		if ( name === 'core/embed' ) {
-			const provider = blocks[ 0 ].attributes?.providerNameSlug;
-			if ( [ 'youtube', 'vimeo' ].includes( provider ) ) {
-				name = 'core/video';
-			} else if ( [ 'spotify', 'soundcloud' ].includes( provider ) ) {
-				name = 'core/audio';
+export const getSuggestedPostFormat = createRegistrySelector(
+	( select ) => () => {
+		const blocks = select( blockEditorStore ).getBlocks();
+
+		if ( blocks.length > 2 ) return null;
+
+		let name;
+		// If there is only one block in the content of the post grab its name
+		// so we can derive a suitable post format from it.
+		if ( blocks.length === 1 ) {
+			name = blocks[ 0 ].name;
+			// Check for core/embed `video` and `audio` eligible suggestions.
+			if ( name === 'core/embed' ) {
+				const provider = blocks[ 0 ].attributes?.providerNameSlug;
+				if ( [ 'youtube', 'vimeo' ].includes( provider ) ) {
+					name = 'core/video';
+				} else if ( [ 'spotify', 'soundcloud' ].includes( provider ) ) {
+					name = 'core/audio';
+				}
 			}
 		}
-	}
 
-	// If there are two blocks in the content and the last one is a text blocks
-	// grab the name of the first one to also suggest a post format from it.
-	if ( blocks.length === 2 && blocks[ 1 ].name === 'core/paragraph' ) {
-		name = blocks[ 0 ].name;
-	}
+		// If there are two blocks in the content and the last one is a text blocks
+		// grab the name of the first one to also suggest a post format from it.
+		if ( blocks.length === 2 && blocks[ 1 ].name === 'core/paragraph' ) {
+			name = blocks[ 0 ].name;
+		}
 
-	// We only convert to default post formats in core.
-	switch ( name ) {
-		case 'core/image':
-			return 'image';
-		case 'core/quote':
-		case 'core/pullquote':
-			return 'quote';
-		case 'core/gallery':
-			return 'gallery';
-		case 'core/video':
-			return 'video';
-		case 'core/audio':
-			return 'audio';
-		default:
-			return null;
+		// We only convert to default post formats in core.
+		switch ( name ) {
+			case 'core/image':
+				return 'image';
+			case 'core/quote':
+			case 'core/pullquote':
+				return 'quote';
+			case 'core/gallery':
+				return 'gallery';
+			case 'core/video':
+				return 'video';
+			case 'core/audio':
+				return 'audio';
+			default:
+				return null;
+		}
 	}
-}
+);
 
 /**
  * Returns the content of the post being edited.
@@ -1174,7 +1185,7 @@ export function getEditorSelection( state ) {
  * @return {boolean} is Ready.
  */
 export function __unstableIsEditorReady( state ) {
-	return state.isReady;
+	return !! state.postId;
 }
 
 /**
@@ -1199,6 +1210,17 @@ export function getRenderingMode( state ) {
 	return state.renderingMode;
 }
 
+/**
+ * Returns the current editing canvas device type.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Device type.
+ */
+export function getDeviceType( state ) {
+	return state.deviceType;
+}
+
 /*
  * Backward compatibility
  */