@wordpress/edit-site 6.2.0 → 6.3.0

package/src/components/global-styles/variations/variations-typography.js

@@ -3,21 +3,22 @@
  */
 import {
 	__experimentalGrid as Grid,
-	__experimentalVStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { useTypographyVariations } from '../hooks';
-import TypographyExample from '../typography-example';
-import PreviewIframe from '../preview-iframe';
+
+import StylesPreviewTypography from '../preview-typography';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import Variation from './variation';
 import Subtitle from '../subtitle';
 
 export default function TypographyVariations( { title, gap = 2 } ) {
-	const typographyVariations = useTypographyVariations();
+	const propertiesToFilter = [ 'typography' ];
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
 
 	// Return null if there is only one variation (the default).
 	if ( typographyVariations?.length <= 1 ) {
@@ -32,40 +33,22 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 				gap={ gap }
 				className="edit-site-global-styles-style-variations-container"
 			>
-				{ typographyVariations &&
-					typographyVariations.length &&
-					typographyVariations.map( ( variation, index ) => (
+				{ typographyVariations.map( ( variation, index ) => {
+					return (
 						<Variation
 							key={ index }
 							variation={ variation }
-							property="typography"
+							properties={ propertiesToFilter }
 							showTooltip
 						>
-							{ ( isFocused ) => (
-								<PreviewIframe
-									label={ variation?.title }
-									isFocused={ isFocused }
-								>
-									{ ( { ratio, key } ) => (
-										<HStack
-											key={ key }
-											spacing={ 10 * ratio }
-											justify="center"
-											style={ {
-												height: '100%',
-												overflow: 'hidden',
-											} }
-										>
-											<TypographyExample
-												variation={ variation }
-												fontSize={ 85 * ratio }
-											/>
-										</HStack>
-									) }
-								</PreviewIframe>
+							{ () => (
+								<StylesPreviewTypography
+									variation={ variation }
+								/>
 							) }
 						</Variation>
-					) ) }
+					);
+				} ) }
 			</Grid>
 		</VStack>
 	);

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

@@ -152,7 +152,7 @@ export default function GlobalStylesSidebar() {
 							isPressed={
 								isStyleBookOpened || isRevisionsStyleBookOpened
 							}
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ shouldClearCanvasContainerView }
 							onClick={ toggleStyleBook }
 							size="compact"
@@ -163,7 +163,7 @@ export default function GlobalStylesSidebar() {
 							label={ __( 'Revisions' ) }
 							icon={ backup }
 							onClick={ toggleRevisions }
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ ! hasRevisions }
 							isPressed={
 								isRevisionsOpened || isRevisionsStyleBookOpened

package/src/components/layout/index.js

@@ -34,16 +34,16 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
  */
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import SiteHub from '../site-hub';
+import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
-import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
 import { useIsSiteEditorLoading } from './hooks';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
 import SaveHub from '../save-hub';
+import SavePanel from '../save-panel';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
@@ -163,6 +163,7 @@ export default function Layout( { route } ) {
 											{ areas.sidebar }
 										</SidebarContent>
 										<SaveHub />
+										<SavePanel />
 									</motion.div>
 								) }
 							</AnimatePresence>
@@ -173,6 +174,16 @@ export default function Layout( { route } ) {
 
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
+							{ canvasMode !== 'edit' && (
+								<SidebarContent routeKey={ routeKey }>
+									<SiteHubMobile
+										ref={ toggleRef }
+										isTransparent={
+											isResizableFrameOversized
+										}
+									/>
+								</SidebarContent>
+							) }
 							{ areas.mobile }
 						</div>
 					) }
@@ -236,8 +247,6 @@ export default function Layout( { route } ) {
 						</div>
 					) }
 				</div>
-
-				<SavePanel />
 			</div>
 		</>
 	);

package/src/components/layout/router.js

@@ -8,9 +8,8 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { useIsSiteEditorLoading } from './hooks';
 import Editor from '../editor';
-import PagePages from '../page-pages';
+import PostsList from '../posts-app/posts-list';
 import PagePatterns from '../page-patterns';
 import PageTemplates from '../page-templates';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
@@ -74,9 +73,9 @@ function useRedirectOldPaths() {
 }
 
 export default function useLayoutAreas() {
-	const isSiteEditorLoading = useIsSiteEditorLoading();
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas } = params;
+	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
 
 	// Page list
@@ -92,16 +91,13 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PagePages />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
-					<Editor isLoading={ isSiteEditorLoading } />
+				content: <PostsList postType={ postType } />,
+				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
+				mobile: hasEditCanvasMode ? (
+					<Editor />
+				) : (
+					<PostsList postType={ postType } />
 				),
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isLoading={ isSiteEditorLoading } />
-					) : (
-						<PagePages />
-					),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -119,10 +115,8 @@ export default function useLayoutAreas() {
 					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
 				),
 				content: <PageTemplates />,
-				preview: ( isListLayout || canvas === 'edit' ) && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
-				mobile: <PageTemplates />,
+				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
+				mobile: hasEditCanvasMode ? <Editor /> : <PageTemplates />,
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -139,10 +133,8 @@ export default function useLayoutAreas() {
 			areas: {
 				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
-				mobile: <PagePatterns />,
-				preview: canvas === 'edit' && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
+				mobile: hasEditCanvasMode ? <Editor /> : <PagePatterns />,
+				preview: hasEditCanvasMode && <Editor />,
 			},
 		};
 	}
@@ -155,10 +147,8 @@ export default function useLayoutAreas() {
 				sidebar: (
 					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
 				),
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
+				preview: <Editor />,
+				mobile: hasEditCanvasMode && <Editor />,
 			},
 		};
 	}
@@ -174,10 +164,8 @@ export default function useLayoutAreas() {
 							backPath={ { postType: NAVIGATION_POST_TYPE } }
 						/>
 					),
-					preview: <Editor isLoading={ isSiteEditorLoading } />,
-					mobile: canvas === 'edit' && (
-						<Editor isLoading={ isSiteEditorLoading } />
-					),
+					preview: <Editor />,
+					mobile: hasEditCanvasMode && <Editor />,
 				},
 			};
 		}
@@ -187,10 +175,8 @@ export default function useLayoutAreas() {
 				sidebar: (
 					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
 				),
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
+				preview: <Editor />,
+				mobile: hasEditCanvasMode && <Editor />,
 			},
 		};
 	}
@@ -200,10 +186,8 @@ export default function useLayoutAreas() {
 		key: 'default',
 		areas: {
 			sidebar: <SidebarNavigationScreenMain />,
-			preview: <Editor isLoading={ isSiteEditorLoading } />,
-			mobile: canvas === 'edit' && (
-				<Editor isLoading={ isSiteEditorLoading } />
-			),
+			preview: <Editor />,
+			mobile: hasEditCanvasMode && <Editor />,
 		},
 	};
 }

package/src/components/layout/style.scss

@@ -56,6 +56,18 @@
 	position: relative;
 	width: 100%;
 	z-index: z-index(".edit-site-layout__canvas-container");
+
+	/*
+	 * The SiteHubMobile component is displayed
+	 * for pages that do not have a sidebar,
+	 * yet it needs the Sidebar component for the React context.
+	 *
+	 * This removes the padding in this scenario.
+	 * See https://github.com/WordPress/gutenberg/pull/63118
+	 */
+	.edit-site-sidebar__screen-wrapper {
+		padding: 0;
+	}
 }
 
 .edit-site-layout__canvas-container {

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

@@ -13,13 +13,7 @@ import {
 	Flex,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
-import {
-	useState,
-	useMemo,
-	useCallback,
-	useId,
-	useEffect,
-} from '@wordpress/element';
+import { useState, useMemo, useId, useEffect } from '@wordpress/element';
 import {
 	BlockPreview,
 	privateApis as blockEditorPrivateApis,
@@ -30,6 +24,8 @@ import { usePrevious } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { parse } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -53,6 +49,7 @@ import PatternsHeader from './header';
 import { useLink } from '../routes/link';
 import { useAddedBy } from '../page-templates/hooks';
 import { useEditPostAction } from '../dataviews-actions';
+import { defaultGetTitle } from './search-items';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
@@ -61,14 +58,18 @@ const { usePostActions } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
-const defaultConfigPerViewType = {
+const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		primaryField: 'title',
+		layout: {
+			primaryField: 'title',
+		},
 	},
 	[ LAYOUT_GRID ]: {
-		mediaField: 'preview',
-		primaryField: 'title',
-		badgeFields: [ 'sync-status' ],
+		layout: {
+			mediaField: 'preview',
+			primaryField: 'title',
+			badgeFields: [ 'sync-status' ],
+		},
 	},
 };
 const DEFAULT_VIEW = {
@@ -76,10 +77,8 @@ const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 20,
-	hiddenFields: [],
-	layout: {
-		...defaultConfigPerViewType[ LAYOUT_GRID ],
-	},
+	layout: defaultLayouts[ LAYOUT_GRID ].layout,
+	fields: [ 'title', 'sync-status' ],
 	filters: [],
 };
 
@@ -115,16 +114,24 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
 
 function Preview( { item, viewType } ) {
 	const descriptionId = useId();
+	const description = item.description || item?.excerpt?.raw;
 	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const isEmpty = ! item.blocks?.length;
-
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const { onClick } = useLink( {
 		postType: item.type,
-		postId: isUserPattern ? item.id : item.name,
+		postId: isUserPattern || isTemplatePart ? item.id : item.name,
 		canvas: 'edit',
 	} );
+	const blocks = useMemo( () => {
+		return (
+			item.blocks ??
+			parse( item.content.raw, {
+				__unstableSkipMigrationLogs: true,
+			} )
+		);
+	}, [ item?.content?.raw, item.blocks ] );
+	const isEmpty = ! blocks?.length;
 
 	return (
 		<div
@@ -134,22 +141,22 @@ function Preview( { item, viewType } ) {
 			<PreviewWrapper
 				item={ item }
 				onClick={ onClick }
-				ariaDescribedBy={ item.description ? descriptionId : undefined }
+				ariaDescribedBy={ !! description ? descriptionId : undefined }
 			>
 				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
 				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
 				{ ! isEmpty && (
 					<Async>
 						<BlockPreview
-							blocks={ item.blocks }
+							blocks={ blocks }
 							viewportWidth={ item.viewportWidth }
 						/>
 					</Async>
 				) }
 			</PreviewWrapper>
-			{ item.description && (
+			{ !! description && (
 				<div hidden id={ descriptionId }>
-					{ item.description }
+					{ description }
 				</div>
 			) }
 		</div>
@@ -188,11 +195,13 @@ function Author( { item, viewType } ) {
 
 function Title( { item } ) {
 	const isUserPattern = item.type === PATTERN_TYPES.user;
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const { onClick } = useLink( {
 		postType: item.type,
-		postId: isUserPattern ? item.id : item.name,
+		postId: isUserPattern || isTemplatePart ? item.id : item.name,
 		canvas: 'edit',
 	} );
+	const title = decodeEntities( defaultGetTitle( item ) );
 	return (
 		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
 			<Flex
@@ -202,7 +211,7 @@ function Title( { item } ) {
 				className="edit-site-patterns__pattern-title"
 			>
 				{ item.type === PATTERN_TYPES.theme ? (
-					item.title
+					title
 				) : (
 					<Button
 						variant="link"
@@ -211,7 +220,7 @@ function Title( { item } ) {
 						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
 						tabIndex="-1"
 					>
-						{ item.title || item.name }
+						{ title }
 					</Button>
 				) }
 			</Flex>
@@ -273,7 +282,6 @@ export default function DataviewsPatterns() {
 					<Preview item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
-				enableHiding: false,
 				width: '1%',
 			},
 			{
@@ -289,23 +297,20 @@ export default function DataviewsPatterns() {
 				header: __( 'Sync status' ),
 				id: 'sync-status',
 				render: ( { item } ) => {
+					const syncStatus =
+						'wp_pattern_sync_status' in item
+							? item.wp_pattern_sync_status ||
+							  PATTERN_SYNC_TYPES.full
+							: PATTERN_SYNC_TYPES.unsynced;
 					// User patterns can have their sync statuses checked directly.
 					// Non-user patterns are all unsynced for the time being.
 					return (
 						<span
-							className={ `edit-site-patterns__field-sync-status-${ item.syncStatus }` }
+							className={ `edit-site-patterns__field-sync-status-${ syncStatus }` }
 						>
 							{
-								(
-									SYNC_FILTERS.find(
-										( { value } ) =>
-											value === item.syncStatus
-									) ||
-									SYNC_FILTERS.find(
-										( { value } ) =>
-											value ===
-											PATTERN_SYNC_TYPES.unsynced
-									)
+								SYNC_FILTERS.find(
+									( { value } ) => value === syncStatus
 								).label
 							}
 						</span>
@@ -322,7 +327,7 @@ export default function DataviewsPatterns() {
 			_fields.push( {
 				header: __( 'Author' ),
 				id: 'author',
-				getValue: ( { item } ) => item.templatePart.author_text,
+				getValue: ( { item } ) => item.author_text,
 				render: ( { item } ) => {
 					return <Author viewType={ view.type } item={ item } />;
 				},
@@ -370,20 +375,6 @@ export default function DataviewsPatterns() {
 		}
 		return [ editAction, ...patternActions ].filter( Boolean );
 	}, [ editAction, type, templatePartActions, patternActions ] );
-	const onChangeView = useCallback(
-		( newView ) => {
-			if ( newView.type !== view.type ) {
-				newView = {
-					...newView,
-					layout: {
-						...defaultConfigPerViewType[ newView.type ],
-					},
-				};
-			}
-			setView( newView );
-		},
-		[ view.type, setView ]
-	);
 	const id = useId();
 	const settings = usePatternSettings();
 	// Wrap everything in a block editor provider.
@@ -407,11 +398,11 @@ export default function DataviewsPatterns() {
 					fields={ fields }
 					actions={ actions }
 					data={ data || EMPTY_ARRAY }
-					getItemId={ ( item ) => item.name }
+					getItemId={ ( item ) => item.name ?? item.id }
 					isLoading={ isResolving }
 					view={ view }
-					onChangeView={ onChangeView }
-					supportedLayouts={ [ LAYOUT_GRID, LAYOUT_TABLE ] }
+					onChangeView={ setView }
+					defaultLayouts={ defaultLayouts }
 				/>
 			</Page>
 		</ExperimentalBlockEditorProvider>

package/src/components/page-patterns/search-items.js

@@ -20,12 +20,46 @@ import {
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_USER_CATEGORY,
 	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
 // Default search helpers.
-const defaultGetName = ( item ) => item.name || '';
-const defaultGetTitle = ( item ) => item.title;
-const defaultGetDescription = ( item ) => item.description || '';
+const defaultGetName = ( item ) => {
+	if ( item.type === PATTERN_TYPES.user ) {
+		return item.slug;
+	}
+
+	if ( item.type === TEMPLATE_PART_POST_TYPE ) {
+		return '';
+	}
+
+	return item.name || '';
+};
+
+export const defaultGetTitle = ( item ) => {
+	if ( typeof item.title === 'string' ) {
+		return item.title;
+	}
+
+	if ( item.title && item.title.rendered ) {
+		return item.title.rendered;
+	}
+
+	if ( item.title && item.title.raw ) {
+		return item.title.raw;
+	}
+
+	return '';
+};
+
+const defaultGetDescription = ( item ) => {
+	if ( item.type === PATTERN_TYPES.user ) {
+		return item.excerpt.raw;
+	}
+
+	return item.description || '';
+};
+
 const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultHasCategory = () => false;
 

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

@@ -35,13 +35,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		border-radius: 3px 3px 0 0;
-
-		&.is-viewtype-grid {
-			.block-editor-block-preview__container {
-				border-radius: 3px 3px 0 0;
-			}
-		}
 
 		&.is-viewtype-table {
 			width: 96px;
@@ -62,7 +55,7 @@
 			cursor: pointer;
 			overflow: hidden;
 			height: 100%;
-			border-radius: 3px 3px 0 0;
+			border-radius: $grid-unit-05;
 
 			&:focus-visible {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);