@wordpress/edit-site 6.12.0 → 6.12.1-next.082ed6819.0

package/src/components/editor/index.js

@@ -50,6 +50,10 @@ import useEditorTitle from './use-editor-title';
 import { useIsSiteEditorLoading } from '../layout/hooks';
 import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import {
+	useResolveEditedEntity,
+	useSyncDeprecatedEntityIntoState,
+} from './use-resolve-edited-entity';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -85,38 +89,25 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	const { canvas = 'view' } = params;
 	const isLoading = useIsSiteEditorLoading();
 	useAdaptEditorToCanvas( canvas );
+	const entity = useResolveEditedEntity();
+	// deprecated sync state with url
+	useSyncDeprecatedEntityIntoState( entity );
+	const { postType, postId, context } = entity;
 	const {
-		editedPostType,
-		editedPostId,
-		contextPostType,
-		contextPostId,
-		isEditingPage,
 		supportsGlobalStyles,
 		showIconLabels,
 		editorCanvasView,
 		currentPostIsTrashed,
 		hasSiteIcon,
 	} = useSelect( ( select ) => {
-		const {
-			getEditorCanvasContainerView,
-			getEditedPostContext,
-			isPage,
-			getEditedPostType,
-			getEditedPostId,
-		} = unlock( select( editSiteStore ) );
+		const { getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
 		const { get } = select( preferencesStore );
 		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
-		const _context = getEditedPostContext();
 		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
 		return {
-			editedPostType: getEditedPostType(),
-			editedPostId: getEditedPostId(),
-			contextPostType: _context?.postId ? _context.postType : undefined,
-			contextPostId: _context?.postId ? _context.postId : undefined,
-			isEditingPage: isPage(),
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			editorCanvasView: getEditorCanvasContainerView(),
@@ -126,10 +117,10 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
-	const postWithTemplate = !! contextPostId;
+	const postWithTemplate = !! context?.postId;
 	useEditorTitle(
-		postWithTemplate ? contextPostType : editedPostType,
-		postWithTemplate ? contextPostId : editedPostId
+		postWithTemplate ? context.postType : postType,
+		postWithTemplate ? context.postId : postId
 	);
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
@@ -219,25 +210,21 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	return (
 		<>
 			<GlobalStylesRenderer
-				disableRootPadding={ editedPostType !== TEMPLATE_POST_TYPE }
+				disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
 			/>
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && (
 				<WelcomeGuide
-					postType={
-						postWithTemplate ? contextPostType : editedPostType
-					}
+					postType={ postWithTemplate ? context.postType : postType }
 				/>
 			) }
 			{ isReady && (
 				<Editor
-					postType={
-						postWithTemplate ? contextPostType : editedPostType
-					}
-					postId={ postWithTemplate ? contextPostId : editedPostId }
-					templateId={ postWithTemplate ? editedPostId : undefined }
+					postType={ postWithTemplate ? context.postType : postType }
+					postId={ postWithTemplate ? context.postId : postId }
+					templateId={ postWithTemplate ? postId : undefined }
 					settings={ settings }
 					className={ clsx( 'edit-site-editor__editor-interface', {
 						'show-icon-labels': showIconLabels,
@@ -252,7 +239,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={
-						! isEditingPage && <PluginTemplateSettingPanel.Slot />
+						! postWithTemplate && (
+							<PluginTemplateSettingPanel.Slot />
+						)
 					}
 				>
 					{ isEditMode && (

package/src/components/editor/use-editor-title.js

@@ -4,33 +4,46 @@
 import { _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import useTitle from '../routes/use-title';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { getTemplateInfo } = unlock( editorPrivateApis );
 
 function useEditorTitle( postType, postId ) {
 	const { title, isLoaded } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
-			const { __experimentalGetTemplateInfo: getTemplateInfo } =
-				select( editorStore );
+
 			const _record = getEditedEntityRecord(
 				'postType',
 				postType,
 				postId
 			);
+
+			const { default_template_types: templateTypes = [] } =
+				select( coreStore ).getEntityRecord(
+					'root',
+					'__unstableBase'
+				) ?? {};
+
+			const templateInfo = getTemplateInfo( {
+				template: _record,
+				templateTypes,
+			} );
+
 			const _isLoaded = hasFinishedResolution( 'getEditedEntityRecord', [
 				'postType',
 				postType,
 				postId,
 			] );
-			const templateInfo = getTemplateInfo( _record );
 
 			return {
 				title: templateInfo.title,

package/src/components/editor/use-resolve-edited-entity.js

@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES,
+} from '../../utils/constants';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+const postTypesWithoutParentTemplate = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES.user,
+];
+
+const authorizedPostTypes = [ 'page', 'post' ];
+
+export function useResolveEditedEntity() {
+	const { params = {} } = useLocation();
+	const { postId, postType } = params;
+	const homePage = useSelect( ( select ) => {
+		const { getHomePage } = unlock( select( coreDataStore ) );
+		return getHomePage();
+	}, [] );
+
+	/**
+	 * This is a hook that recreates the logic to resolve a template for a given WordPress postID postTypeId
+	 * in order to match the frontend as closely as possible in the site editor.
+	 *
+	 * It is not possible to rely on the server logic because there maybe unsaved changes that impact the template resolution.
+	 */
+	const resolvedTemplateId = useSelect(
+		( select ) => {
+			// If we're rendering a post type that doesn't have a template
+			// no need to resolve its template.
+			if (
+				postTypesWithoutParentTemplate.includes( postType ) &&
+				postId
+			) {
+				return;
+			}
+
+			// Don't trigger resolution for multi-selected posts.
+			if ( postId && postId.includes( ',' ) ) {
+				return;
+			}
+
+			const { getTemplateId } = unlock( select( coreDataStore ) );
+
+			// If we're rendering a specific page, we need to resolve its template.
+			// The site editor only supports pages for now, not other CPTs.
+			if (
+				postType &&
+				postId &&
+				authorizedPostTypes.includes( postType )
+			) {
+				return getTemplateId( postType, postId );
+			}
+
+			// If we're rendering the home page, and we have a static home page, resolve its template.
+			if ( homePage?.postType === 'page' ) {
+				return getTemplateId( 'page', homePage?.postId );
+			}
+
+			if ( homePage?.postType === 'wp_template' ) {
+				return homePage?.postId;
+			}
+		},
+		[ homePage, postId, postType ]
+	);
+
+	const context = useMemo( () => {
+		if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
+			return {};
+		}
+
+		if ( postType && postId && authorizedPostTypes.includes( postType ) ) {
+			return { postType, postId };
+		}
+		// TODO: for post types lists we should probably not render the front page, but maybe a placeholder
+		// with a message like "Select a page" or something similar.
+		if ( homePage?.postType === 'page' ) {
+			return { postType: 'page', postId: homePage?.postId };
+		}
+
+		return {};
+	}, [ homePage, postType, postId ] );
+
+	if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
+		return { isReady: true, postType, postId, context };
+	}
+
+	if ( !! homePage ) {
+		return {
+			isReady: resolvedTemplateId !== undefined,
+			postType: TEMPLATE_POST_TYPE,
+			postId: resolvedTemplateId,
+			context,
+		};
+	}
+
+	return { isReady: false };
+}
+
+export function useSyncDeprecatedEntityIntoState( {
+	postType,
+	postId,
+	context,
+	isReady,
+} ) {
+	const { setEditedEntity } = useDispatch( editSiteStore );
+
+	useEffect( () => {
+		if ( isReady ) {
+			setEditedEntity( postType, postId, context );
+		}
+	}, [ isReady, postType, postId, context, setEditedEntity ] );
+}

package/src/components/editor-canvas-container/index.js

@@ -141,7 +141,7 @@ function EditorCanvasContainer( {
 }
 
 function useHasEditorCanvasContainer() {
-	const fills = useSlotFills( EditorContentSlotFill.privateKey );
+	const fills = useSlotFills( EditorContentSlotFill.name );
 	return !! fills?.length;
 }
 

package/src/components/global-styles/block-preview-panel.js

@@ -18,16 +18,16 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 			return null;
 		}
 
-		let example = blockExample;
-		if ( variation ) {
-			example = {
-				...example,
-				attributes: {
-					...example.attributes,
-					className: getVariationClassName( variation ),
-				},
-			};
-		}
+		const example = {
+			...blockExample,
+			attributes: {
+				...blockExample.attributes,
+				style: undefined,
+				className: variation
+					? getVariationClassName( variation )
+					: blockExample.attributes?.className,
+			},
+		};
 
 		return getBlockFromExample( name, example );
 	}, [ name, blockExample, variation ] );

package/src/components/global-styles/screen-block.js

@@ -102,20 +102,23 @@ function ScreenBlock( { name, variation } ) {
 	} );
 	const [ userSettings ] = useGlobalSetting( '', name, 'user' );
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+	const settingsForBlockElement = useSettingsForBlockElement(
+		rawSettings,
+		name
+	);
 	const blockType = getBlockType( name );
 
 	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
+	let disableBlockGap = false;
 	if (
-		settings?.spacing?.blockGap &&
+		settingsForBlockElement?.spacing?.blockGap &&
 		blockType?.supports?.spacing?.blockGap &&
-		( blockType?.supports?.spacing?.__experimentalSkipSerialization ===
-			true ||
-			blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
+		( blockType?.supports?.spacing?.skipSerialization === true ||
+			blockType?.supports?.spacing?.skipSerialization?.some?.(
 				( spacingType ) => spacingType === 'blockGap'
 			) )
 	) {
-		settings.spacing.blockGap = false;
+		disableBlockGap = true;
 	}
 
 	// Only allow `aspectRatio` support if the block is not the grouping block.
@@ -124,10 +127,25 @@ function ScreenBlock( { name, variation } ) {
 	// for all three at once. Until there is the ability to set a different aspect
 	// ratio for each variation, we disable the aspect ratio controls for the
 	// grouping block in global styles.
-	if ( settings?.dimensions?.aspectRatio && name === 'core/group' ) {
-		settings.dimensions.aspectRatio = false;
+	let disableAspectRatio = false;
+	if (
+		settingsForBlockElement?.dimensions?.aspectRatio &&
+		name === 'core/group'
+	) {
+		disableAspectRatio = true;
 	}
 
+	const settings = useMemo( () => {
+		const updatedSettings = structuredClone( settingsForBlockElement );
+		if ( disableBlockGap ) {
+			updatedSettings.spacing.blockGap = false;
+		}
+		if ( disableAspectRatio ) {
+			updatedSettings.dimensions.aspectRatio = false;
+		}
+		return updatedSettings;
+	}, [ settingsForBlockElement, disableBlockGap, disableAspectRatio ] );
+
 	const blockVariations = useBlockVariations( name );
 	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	const hasTypographyPanel = useHasTypographyPanel( settings );

package/src/components/global-styles/screen-style-variations.js

@@ -1,11 +1,15 @@
 /**
  * WordPress dependencies
  */
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { Card, CardBody } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,11 +22,16 @@ const { useZoomOut } = unlock( blockEditorPrivateApis );
 
 function ScreenStyleVariations() {
 	// Style Variations should only be previewed in with
-	// - a "zoomed out" editor
+	// - a "zoomed out" editor (but not when in preview mode)
 	// - "Desktop" device preview
+	const isPreviewMode = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings().isPreviewMode;
+	}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
-	useZoomOut();
-	setDeviceType( 'desktop' );
+	useZoomOut( ! isPreviewMode );
+	useEffect( () => {
+		setDeviceType( 'desktop' );
+	}, [ setDeviceType ] );
 
 	return (
 		<>

package/src/components/global-styles/ui.js

@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useEffect, Fragment } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { usePrevious } from '@wordpress/compose';
 
 /**

package/src/components/global-styles-sidebar/index.js

@@ -5,7 +5,7 @@ import { FlexItem, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	store as editorStore,
@@ -29,7 +29,7 @@ const { useLocation } = unlock( routerPrivateApis );
 
 export default function GlobalStylesSidebar() {
 	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { canvas = 'view', path } = params;
 	const {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
@@ -128,6 +128,20 @@ export default function GlobalStylesSidebar() {
 		);
 	};
 
+	const { getActiveComplementaryArea } = useSelect( interfaceStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const previousActiveAreaRef = useRef( null );
+
+	useEffect( () => {
+		if ( path?.startsWith( '/wp_global_styles' ) && canvas === 'edit' ) {
+			previousActiveAreaRef.current =
+				getActiveComplementaryArea( 'core' );
+			enableComplementaryArea( 'core', 'edit-site/global-styles' );
+		} else if ( previousActiveAreaRef.current ) {
+			enableComplementaryArea( 'core', previousActiveAreaRef.current );
+		}
+	}, [ path, enableComplementaryArea, canvas, getActiveComplementaryArea ] );
+
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"

package/src/components/page-patterns/header.js

@@ -9,7 +9,7 @@ import {
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
@@ -32,7 +32,8 @@ export default function PatternsHeader( {
 	const { patternCategories } = usePatternCategories();
 	const templatePartAreas = useSelect(
 		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [],
 		[]
 	);
 

package/src/components/page-patterns/use-patterns.js

@@ -4,7 +4,6 @@
 import { parse } from '@wordpress/blocks';
 import { useSelect, createSelector } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -28,8 +27,7 @@ const selectTemplateParts = createSelector(
 	( select, categoryId, search = '' ) => {
 		const { getEntityRecords, isResolving: isResolvingSelector } =
 			select( coreStore );
-		const { __experimentalGetDefaultTemplatePartAreas } =
-			select( editorStore );
+
 		const query = { per_page: -1 };
 		const templateParts =
 			getEntityRecords( 'postType', TEMPLATE_PART_POST_TYPE, query ) ??
@@ -38,7 +36,10 @@ const selectTemplateParts = createSelector(
 		// In the case where a custom template part area has been removed we need
 		// the current list of areas to cross check against so orphaned template
 		// parts can be treated as uncategorized.
-		const knownAreas = __experimentalGetDefaultTemplatePartAreas() || [];
+		const knownAreas =
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [];
+
 		const templatePartAreas = knownAreas.map( ( area ) => area.area );
 
 		const templatePartHasCategory = ( item, category ) => {
@@ -78,7 +79,8 @@ const selectTemplateParts = createSelector(
 			TEMPLATE_PART_POST_TYPE,
 			{ per_page: -1 },
 		] ),
-		select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.default_template_part_areas,
 	]
 );
 
@@ -156,7 +158,7 @@ const selectPatterns = createSelector(
 				categoryId,
 				hasCategory: ( item, currentCategory ) => {
 					if ( item.type === PATTERN_TYPES.user ) {
-						return item.wp_pattern_category.some(
+						return item.wp_pattern_category?.some(
 							( catId ) =>
 								userPatternCategories.find(
 									( cat ) => cat.id === catId
@@ -173,7 +175,7 @@ const selectPatterns = createSelector(
 						return (
 							userPatternCategories?.length &&
 							( ! item.wp_pattern_category?.length ||
-								! item.wp_pattern_category.some( ( catId ) =>
+								! item.wp_pattern_category?.some( ( catId ) =>
 									userPatternCategories.find(
 										( cat ) => cat.id === catId
 									)

package/src/components/page-templates/style.scss

@@ -60,6 +60,7 @@
 
 	.dataviews-view-table & {
 		margin-bottom: $grid-unit-10;
+		display: block;
 	}
 }
 

package/src/components/post-edit/index.js

@@ -18,10 +18,9 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  * Internal dependencies
  */
 import Page from '../page';
-import usePostFields from '../post-fields';
 import { unlock } from '../../lock-unlock';
 
-const { PostCardPanel } = unlock( editorPrivateApis );
+const { PostCardPanel, usePostFields } = unlock( editorPrivateApis );
 
 const fieldsWithBulkEditSupport = [
 	'title',
@@ -71,9 +70,16 @@ function PostEditForm( { postType, postId } ) {
 		() => ( {
 			type: 'panel',
 			fields: [
-				'featured_media',
+				{
+					id: 'featured_media',
+					layout: 'regular',
+				},
 				'title',
-				'status_and_visibility',
+				{
+					id: 'status',
+					label: __( 'Status & Visibility' ),
+					children: [ 'status', 'password' ],
+				},
 				'author',
 				'date',
 				'slug',
@@ -84,15 +90,6 @@ function PostEditForm( { postType, postId } ) {
 					ids.length === 1 ||
 					fieldsWithBulkEditSupport.includes( field )
 			),
-			combinedFields: [
-				{
-					id: 'status_and_visibility',
-					label: __( 'Status & Visibility' ),
-					children: [ 'status', 'password' ],
-					direction: 'vertical',
-					render: ( { item } ) => item.status,
-				},
-			],
 		} ),
 		[ ids ]
 	);

package/src/components/post-list/index.js

@@ -32,9 +32,8 @@ import AddNewPostModal from '../add-new-post';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
 import { usePrevious } from '@wordpress/compose';
-import usePostFields from '../post-fields';
 
-const { usePostActions } = unlock( editorPrivateApis );
+const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( coreDataPrivateApis );
 const EMPTY_ARRAY = [];

package/src/components/posts-app/index.js

@@ -10,17 +10,16 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import Layout from '../layout';
-import useActiveRoute from './router';
+import { useRegisterPostsAppRoutes } from '../posts-app-routes';
 import { unlock } from '../../lock-unlock';
+import useActiveRoute from '../layout/router';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
 function PostsLayout() {
-	// This ensures the edited entity id and type are initialized properly.
-	useInitEditedEntityFromURL();
+	useRegisterPostsAppRoutes();
 	const route = useActiveRoute();
 	return <Layout route={ route } />;
 }