@wordpress/editor 14.15.1 → 14.16.0

package/src/components/post-template/swap-template-button.js

@@ -37,7 +37,7 @@ export default function SwapTemplateButton( { onClick } ) {
 	return (
 		<>
 			<MenuItem onClick={ () => setShowModal( true ) }>
-				{ __( 'Swap template' ) }
+				{ __( 'Change template' ) }
 			</MenuItem>
 			{ showModal && (
 				<Modal

package/src/components/provider/index.js

@@ -56,6 +56,11 @@ const NON_CONTEXTUAL_POST_TYPES = [
 	'wp_template_part',
 ];
 
+/**
+ * These are rendering modes that the editor supports.
+ */
+const RENDERING_MODES = [ 'post-only', 'template-locked' ];
+
 /**
  * Depending on the post, template and template mode,
  * returns the appropriate blocks and change handlers for the block editor provider.
@@ -171,7 +176,6 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			mode,
 			defaultMode,
 			postTypeEntities,
-			hasLoadedPostObject,
 		} = useSelect(
 			( select ) => {
 				const {
@@ -180,24 +184,32 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					getRenderingMode,
 					__unstableIsEditorReady,
 				} = select( editorStore );
-				const { getEntitiesConfig } = select( coreStore );
+				const {
+					getEntitiesConfig,
+					getPostType,
+					hasFinishedResolution,
+				} = select( coreStore );
 
-				const postTypeObject = select( coreStore ).getPostType(
-					post.type
+				const postTypeSupports = getPostType( post.type )?.supports;
+				const hasLoadedPostObject = hasFinishedResolution(
+					'getPostType',
+					[ post.type ]
 				);
 
-				const _hasLoadedPostObject = select(
-					coreStore
-				).hasFinishedResolution( 'getPostType', [ post.type ] );
+				const _defaultMode = Array.isArray( postTypeSupports?.editor )
+					? postTypeSupports.editor.find(
+							( features ) => 'default_mode' in features
+					  )?.default_mode
+					: undefined;
+				const hasDefaultMode = RENDERING_MODES.includes( _defaultMode );
 
 				return {
-					hasLoadedPostObject: _hasLoadedPostObject,
 					editorSettings: getEditorSettings(),
-					isReady: __unstableIsEditorReady(),
+					isReady: __unstableIsEditorReady() && hasLoadedPostObject,
 					mode: getRenderingMode(),
 					defaultMode:
-						hasTemplate && postTypeObject?.default_rendering_mode
-							? postTypeObject?.default_rendering_mode
+						hasTemplate && hasDefaultMode
+							? _defaultMode
 							: 'post-only',
 					selection: getEditorSelection(),
 					postTypeEntities:
@@ -334,7 +346,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		// Register the editor commands.
 		useCommands();
 
-		if ( ! isReady || ! mode || ! hasLoadedPostObject ) {
+		if ( ! isReady || ! mode ) {
 			return null;
 		}
 
@@ -391,14 +403,14 @@ export const ExperimentalEditorProvider = withRegistryProvider(
  *
  * All modification and changes are performed to the `@wordpress/core-data` store.
  *
- * @param {Object}  props                      The component props.
- * @param {Object}  [props.post]               The post object to edit. This is required.
- * @param {Object}  [props.__unstableTemplate] The template object wrapper the edited post.
- *                                             This is optional and can only be used when the post type supports templates (like posts and pages).
- * @param {Object}  [props.settings]           The settings object to use for the editor.
- *                                             This is optional and can be used to override the default settings.
- * @param {Element} [props.children]           Children elements for which the BlockEditorProvider context should apply.
- *                                             This is optional.
+ * @param {Object}          props                      The component props.
+ * @param {Object}          [props.post]               The post object to edit. This is required.
+ * @param {Object}          [props.__unstableTemplate] The template object wrapper the edited post.
+ *                                                     This is optional and can only be used when the post type supports templates (like posts and pages).
+ * @param {Object}          [props.settings]           The settings object to use for the editor.
+ *                                                     This is optional and can be used to override the default settings.
+ * @param {React.ReactNode} [props.children]           Children elements for which the BlockEditorProvider context should apply.
+ *                                                     This is optional.
  *
  * @example
  * ```jsx

package/src/components/sidebar/post-summary.js

@@ -38,7 +38,7 @@ const PANEL_NAME = 'post-status';
 export default function PostSummary( { onActionPerformed } ) {
 	const { isRemovedPostStatusPanel, postType, postId } = useSelect(
 		( select ) => {
-			// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
+			// We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do
 			// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
 			const {
 				isEditorPanelRemoved,

package/src/components/visual-editor/edit-template-blocks-notification.js

@@ -19,7 +19,7 @@ import { store as editorStore } from '../../store';
  *   user is focusing on editing page content and clicks on a disabled template
  *   block.
  * - Displays a 'Edit your template to edit this block' dialog when the user
- *   is focusing on editing page conetnt and double clicks on a disabled
+ *   is focusing on editing page content and double clicks on a disabled
  *   template block.
  *
  * @param {Object}                                 props

package/src/components/visual-editor/index.js

@@ -337,7 +337,7 @@ function VisualEditor( {
 		! isPreview &&
 		// Disable resizing in mobile viewport.
 		! isMobileViewport &&
-		// Dsiable resizing in zoomed-out mode.
+		// Disable resizing in zoomed-out mode.
 		! isZoomedOut;
 
 	const iframeStyles = useMemo( () => {
@@ -434,7 +434,7 @@ function VisualEditor( {
 						<div
 							className={ clsx(
 								'editor-visual-editor__post-title-wrapper',
-								// The following class is only here for backward comapatibility
+								// The following class is only here for backward compatibility
 								// some themes might be using it to style the post title.
 								'edit-post-visual-editor__post-title-wrapper',
 								{

package/src/dataviews/fields/content-preview/content-preview-view.tsx

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+	// @ts-ignore
+} from '@wordpress/block-editor';
+import type { BasePost } from '@wordpress/fields';
+import { useSelect } from '@wordpress/data';
+import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { EditorProvider } from '../../../components/provider';
+import { unlock } from '../../../lock-unlock';
+// @ts-ignore
+import { store as editorStore } from '../../../store';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+function PostPreviewContainer( {
+	template,
+	post,
+}: {
+	template: any;
+	post: any;
+} ) {
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const [ postBlocks ] = useEntityBlockEditor( 'postType', post.type, {
+		id: post.id,
+	} );
+	const [ templateBlocks ] = useEntityBlockEditor(
+		'postType',
+		template?.type,
+		{
+			id: template?.id,
+		}
+	);
+	const blocks = template && templateBlocks ? templateBlocks : postBlocks;
+	const isEmpty = ! blocks?.length;
+	return (
+		<div
+			className="editor-fields-content-preview"
+			style={ {
+				backgroundColor,
+			} }
+		>
+			{ isEmpty && (
+				<span className="editor-fields-content-preview__empty">
+					{ __( 'Empty content' ) }
+				</span>
+			) }
+			{ ! isEmpty && (
+				<BlockPreview.Async>
+					<BlockPreview blocks={ blocks } />
+				</BlockPreview.Async>
+			) }
+		</div>
+	);
+}
+
+export default function PostPreviewView( { item }: { item: BasePost } ) {
+	const { settings, template } = useSelect(
+		( select ) => {
+			const { canUser, getPostType, getTemplateId, getEntityRecord } =
+				unlock( select( coreStore ) );
+			const canViewTemplate = canUser( 'read', {
+				kind: 'postType',
+				name: 'wp_template',
+			} );
+			const _settings = select( editorStore ).getEditorSettings();
+			// @ts-ignore
+			const supportsTemplateMode = _settings.supportsTemplateMode;
+			const isViewable = getPostType( item.type )?.viewable ?? false;
+
+			const templateId =
+				supportsTemplateMode && isViewable && canViewTemplate
+					? getTemplateId( item.type, item.id )
+					: null;
+			return {
+				settings: _settings,
+				template: templateId
+					? getEntityRecord( 'postType', 'wp_template', templateId )
+					: undefined,
+			};
+		},
+		[ item.type, item.id ]
+	);
+	// Wrap everything in a block editor provider to ensure 'styles' that are needed
+	// for the previews are synced between the site editor store and the block editor store.
+	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
+	// render patterns inside the previews.
+	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
+	// the block editor settings are needed in context where we don't have the block editor.
+	// Explore how we can solve this in a better way.
+	return (
+		<EditorProvider
+			post={ item }
+			settings={ settings }
+			__unstableTemplate={ template }
+		>
+			<PostPreviewContainer template={ template } post={ item } />
+		</EditorProvider>
+	);
+}

package/src/dataviews/fields/content-preview/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import type { BasePost } from '@wordpress/fields';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostPreviewView from './content-preview-view';
+
+const postPreviewField: Field< BasePost > = {
+	type: 'media',
+	id: 'content-preview',
+	label: __( 'Content preview' ),
+	render: PostPreviewView,
+	enableSorting: false,
+};
+
+export default postPreviewField;

package/src/dataviews/fields/content-preview/style.scss

@@ -0,0 +1,21 @@
+.editor-fields-content-preview {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	border-radius: $radius-medium;
+
+	.dataviews-view-table & {
+		width: 96px;
+		flex-grow: 0;
+	}
+
+	.block-editor-block-preview__container,
+	.editor-fields-content-preview__empty {
+		margin-top: auto;
+		margin-bottom: auto;
+	}
+}
+
+.editor-fields-content-preview__empty {
+	text-align: center;
+}

package/src/dataviews/store/private-actions.ts

@@ -38,6 +38,7 @@ import {
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import postPreviewField from '../fields/content-preview';
 import { unlock } from '../../lock-unlock';
 
 export function registerEntityAction< Item >(
@@ -175,6 +176,9 @@ export const registerPostTypeSchema =
 			postTypeConfig.supports?.comments && commentStatusField,
 			templateField,
 			passwordField,
+			postTypeConfig.supports?.editor &&
+				postTypeConfig.viewable &&
+				postPreviewField,
 		].filter( Boolean );
 		if ( postTypeConfig.supports?.title ) {
 			let _titleField;

package/src/store/private-actions.js

@@ -388,7 +388,7 @@ export const removeTemplates =
 			} )
 		);
 
-		// If all the promises were fulfilled with sucess.
+		// If all the promises were fulfilled with success.
 		if ( promiseResult.every( ( { status } ) => status === 'fulfilled' ) ) {
 			let successMessage;
 

package/src/store/private-selectors.js

@@ -26,6 +26,7 @@ import {
 	getEntityFields as _getEntityFields,
 	isEntityReady as _isEntityReady,
 } from '../dataviews/store/private-selectors';
+import { getTemplatePartIcon } from '../utils';
 
 const EMPTY_INSERTION_POINT = {
 	rootClientId: undefined,
@@ -97,15 +98,21 @@ export const getPostIcon = createRegistrySelector(
 				postType === 'wp_template_part' ||
 				postType === 'wp_template'
 			) {
-				return (
-					(
-						select( coreStore ).getEntityRecord(
-							'root',
-							'__unstableBase'
-						)?.default_template_part_areas || []
-					).find( ( item ) => options.area === item.area )?.icon ||
-					layout
+				const templateAreas =
+					select( coreStore ).getEntityRecord(
+						'root',
+						'__unstableBase'
+					)?.default_template_part_areas || [];
+
+				const areaData = templateAreas.find(
+					( item ) => options.area === item.area
 				);
+
+				if ( areaData?.icon ) {
+					return getTemplatePartIcon( areaData.icon );
+				}
+
+				return layout;
 			}
 			if ( CARD_ICONS[ postType ] ) {
 				return CARD_ICONS[ postType ];

package/src/style.scss

@@ -54,3 +54,4 @@
 @import "./components/table-of-contents/style.scss";
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";
+@import "./dataviews/fields/content-preview/style.scss";