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

package/src/components/editor/index.js

@@ -49,6 +49,11 @@ import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 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 );
@@ -84,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(),
@@ -125,12 +117,15 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
-	useEditorTitle();
+	const postWithTemplate = !! context?.postId;
+	useEditorTitle(
+		postWithTemplate ? context.postType : postType,
+		postWithTemplate ? context.postId : postId
+	);
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
 	const isEditMode = canvas === 'edit';
-	const postWithTemplate = !! contextPostId;
 	const loadingProgressId = useInstanceId(
 		CanvasLoader,
 		'edit-site-editor__loading-progress'
@@ -214,18 +209,22 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 
 	return (
 		<>
-			<GlobalStylesRenderer />
+			<GlobalStylesRenderer
+				disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
+			/>
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
-			{ isEditMode && <WelcomeGuide /> }
+			{ isEditMode && (
+				<WelcomeGuide
+					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,
@@ -240,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

@@ -2,34 +2,71 @@
  * WordPress dependencies
  */
 import { _x, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import useEditedEntityRecord from '../use-edited-entity-record';
 import useTitle from '../routes/use-title';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
 
-function useEditorTitle() {
-	const {
-		record: editedPost,
-		getTitle,
-		isLoaded: hasLoadedPost,
-	} = useEditedEntityRecord();
-	let title;
-	if ( hasLoadedPost ) {
-		title = sprintf(
+const { getTemplateInfo } = unlock( editorPrivateApis );
+
+function useEditorTitle( postType, postId ) {
+	const { title, isLoaded } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+
+			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,
+			] );
+
+			return {
+				title: templateInfo.title,
+				isLoaded: _isLoaded,
+			};
+		},
+		[ postType, postId ]
+	);
+
+	let editorTitle;
+	if ( isLoaded ) {
+		editorTitle = sprintf(
 			// translators: A breadcrumb trail for the Admin document title. 1: title of template being edited, 2: type of template (Template or Template Part).
 			_x( '%1$s ‹ %2$s', 'breadcrumb trail' ),
-			getTitle(),
-			POST_TYPE_LABELS[ editedPost.type ] ??
+			decodeEntities( title ),
+			POST_TYPE_LABELS[ postType ] ??
 				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
 		);
 	}
 
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URLQueryController> from double-announcing.
-	useTitle( hasLoadedPost && title );
+	useTitle( isLoaded && editorTitle );
 }
 
 export default useEditorTitle;

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/editor-canvas-container/style.scss

@@ -1,6 +1,5 @@
 .edit-site-editor-canvas-container {
 	height: 100%;
-	background-color: $gray-300;
 
 	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
 	iframe {

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-revisions/revisions-buttons.js

@@ -1,18 +1,13 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, Composite } from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
+import { ENTER, SPACE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
@@ -117,10 +112,11 @@ function RevisionsButtons( {
 	const { datetimeAbbreviated } = getSettings().formats;
 
 	return (
-		<ol
+		<Composite
+			orientation="vertical"
 			className="edit-site-global-styles-screen-revisions__revisions-list"
 			aria-label={ __( 'Global styles revisions list' ) }
-			role="group"
+			role="listbox"
 		>
 			{ userRevisions.map( ( revision, index ) => {
 				const { id, author, modified } = revision;
@@ -149,28 +145,26 @@ function RevisionsButtons( {
 				);
 
 				return (
-					<li
-						className={ clsx(
-							'edit-site-global-styles-screen-revisions__revision-item',
-							{
-								'is-selected': isSelected,
-								'is-active': areStylesEqual,
-								'is-reset': isReset,
-							}
-						) }
+					<Composite.Item
 						key={ id }
+						className="edit-site-global-styles-screen-revisions__revision-item"
 						aria-current={ isSelected }
-					>
-						<Button
-							__next40pxDefaultSize
-							className="edit-site-global-styles-screen-revisions__revision-button"
-							accessibleWhenDisabled
-							disabled={ isSelected }
-							onClick={ () => {
+						role="option"
+						onKeyDown={ ( event ) => {
+							const { keyCode } = event;
+							if ( keyCode === ENTER || keyCode === SPACE ) {
 								onChange( revision );
-							} }
-							aria-label={ revisionLabel }
-						>
+							}
+						} }
+						onClick={ ( event ) => {
+							event.preventDefault();
+							onChange( revision );
+						} }
+						aria-selected={ isSelected }
+						aria-label={ revisionLabel }
+						render={ <div /> }
+					>
+						<span className="edit-site-global-styles-screen-revisions__revision-item-wrapper">
 							{ isReset ? (
 								<span className="edit-site-global-styles-screen-revisions__description">
 									{ __( 'Default styles' ) }
@@ -211,7 +205,7 @@ function RevisionsButtons( {
 									) }
 								</span>
 							) }
-						</Button>
+						</span>
 						{ isSelected &&
 							( areStylesEqual ? (
 								<p className="edit-site-global-styles-screen-revisions__applied-text">
@@ -225,16 +219,19 @@ function RevisionsButtons( {
 									variant="primary"
 									className="edit-site-global-styles-screen-revisions__apply-button"
 									onClick={ onApplyRevision }
+									aria-label={ __(
+										'Apply the selected revision to your site.'
+									) }
 								>
 									{ isReset
 										? __( 'Reset to defaults' )
 										: __( 'Apply' ) }
 								</Button>
 							) ) }
-					</li>
+					</Composite.Item>
 				);
 			} ) }
-		</ol>
+		</Composite>
 	);
 }
 

package/src/components/global-styles/screen-revisions/style.scss

@@ -14,6 +14,11 @@
 	display: flex;
 	flex-direction: column;
 
+	&[role="option"]:active,
+	&[role="option"]:focus {
+		@include button-style__focus();
+	}
+
 	&:hover {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		.edit-site-global-styles-screen-revisions__date {
@@ -42,7 +47,7 @@
 		border: 4px solid transparent;
 	}
 
-	&.is-selected {
+	&[aria-selected="true"] {
 		border-radius: $radius-small;
 
 		// Only visible in Windows High Contrast mode.
@@ -52,10 +57,6 @@
 		color: var(--wp-admin-theme-color);
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
-		.edit-site-global-styles-screen-revisions__revision-button {
-			opacity: 1;
-		}
-
 		.edit-site-global-styles-screen-revisions__date {
 			color: var(--wp-admin-theme-color);
 		}
@@ -86,23 +87,16 @@
 	&:last-child::after {
 		height: $grid-unit-20 + 2;
 	}
-
-	// Nested to override specificity of .components-button.
-	.edit-site-global-styles-screen-revisions__revision-button {
-		width: 100%;
-		height: auto;
-		display: block;
-		padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
-		z-index: 1;
-		position: relative;
-		outline-offset: -2px;
-	}
+}
+.edit-site-global-styles-screen-revisions__revision-item-wrapper {
+	display: block;
+	padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
 }
 
 .edit-site-global-styles-screen-revisions__apply-button.is-primary,
 .edit-site-global-styles-screen-revisions__applied-text {
 	align-self: flex-start;
-	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button.
+	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-item-wrapper.
 	margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50;
 }
 

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/shadows-edit-panel.js

@@ -215,8 +215,10 @@ export default function ShadowsEditPanel() {
 					size="medium"
 				>
 					{ sprintf(
-						// translators: %s: name of the shadow
-						'Are you sure you want to delete "%s"?',
+						/* translators: %s: Name of the shadow preset. */
+						__(
+							'Are you sure you want to delete "%s" shadow preset?'
+						),
 						selectedShadow.name
 					) }
 				</ConfirmDialog>