@wordpress/edit-site 6.3.0 → 6.5.0

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

@@ -9,11 +9,10 @@ import {
 /**
  * Internal dependencies
  */
-
 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';
+import Variation from './variation';
 
 export default function TypographyVariations( { title, gap = 2 } ) {
 	const propertiesToFilter = [ 'typography' ];

package/src/components/layout/index.js

@@ -201,6 +201,17 @@ export default function Layout( { route } ) {
 							</div>
 						) }
 
+					{ ! isMobileViewport && areas.edit && (
+						<div
+							className="edit-site-layout__area"
+							style={ {
+								maxWidth: widths?.edit,
+							} }
+						>
+							{ areas.edit }
+						</div>
+					) }
+
 					{ ! isMobileViewport && areas.preview && (
 						<div className="edit-site-layout__canvas-container">
 							{ canvasResizer }

package/src/components/layout/router.js

@@ -9,7 +9,7 @@ import { useEffect } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 import Editor from '../editor';
-import PostsList from '../posts-app/posts-list';
+import PostList from '../post-list';
 import PagePatterns from '../page-patterns';
 import PageTemplates from '../page-templates';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
@@ -26,6 +26,7 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
+import { PostEdit } from '../post-edit';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -74,13 +75,15 @@ function useRedirectOldPaths() {
 
 export default function useLayoutAreas() {
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas } = params;
+	const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
+		params;
 	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
 
 	// Page list
 	if ( postType === 'page' ) {
 		const isListLayout = layout === 'list' || ! layout;
+		const showQuickEdit = quickEdit && ! isListLayout;
 		return {
 			key: 'pages',
 			areas: {
@@ -91,16 +94,21 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PostsList postType={ postType } />,
-				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
+				content: <PostList postType={ postType } />,
+				preview: ! showQuickEdit &&
+					( isListLayout || hasEditCanvasMode ) && <Editor />,
 				mobile: hasEditCanvasMode ? (
 					<Editor />
 				) : (
-					<PostsList postType={ postType } />
+					<PostList postType={ postType } />
+				),
+				edit: showQuickEdit && (
+					<PostEdit postType={ postType } postId={ postId } />
 				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
+				edit: showQuickEdit ? 380 : undefined,
 			},
 		};
 	}

package/src/components/layout/style.scss

@@ -148,6 +148,14 @@
 html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	animation-delay: 255ms;
 }
+
+@media (prefers-reduced-motion) {
+	::view-transition-group(*),
+	::view-transition-old(*),
+	::view-transition-new(*) {
+		animation: none !important;
+	}
+}
 /* stylelint-enable  */
 
 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
@@ -175,8 +183,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		color: $white;
 	}
 
+	&:focus-visible,
 	&:focus {
-		box-shadow: none;
+		box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
+		outline: 4px solid #0000;
+		outline-offset: 4px;
 	}
 
 	&::before {
@@ -193,13 +204,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		box-shadow: none;
 	}
 
-	// Lightened spot color focus.
-	&:focus::before {
-		box-shadow:
-			inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1),
-			inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
 		height: $grid-unit-80;
@@ -255,3 +259,25 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	padding-left: 16px;
 	padding-right: 16px;
 }
+
+.edit-site-layout.is-full-canvas {
+	.edit-site-layout__view-mode-toggle.components-button {
+		&:focus-visible,
+		&:focus {
+
+			box-shadow: none;
+			outline: none;
+			outline-offset: 0;
+
+			.edit-site-site-icon svg {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
+				outline: 3px solid #0000;
+				height: 40px;
+				width: 40px;
+				padding: 2px;
+				border-radius: 2px;
+			}
+
+		}
+	}
+}

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

@@ -0,0 +1,251 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	Button,
+	Tooltip,
+	Flex,
+} from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useState, useMemo, useId } from '@wordpress/element';
+import {
+	BlockPreview,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { Icon, lockSmall } from '@wordpress/icons';
+import { parse } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import { Async } from '../async';
+import {
+	PATTERN_TYPES,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_SYNC_TYPES,
+	OPERATOR_IS,
+} from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+import { useLink } from '../routes/link';
+import { useAddedBy } from '../page-templates/hooks';
+import { defaultGetTitle } from './search-items';
+
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+
+function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
+	return (
+		<button
+			className="page-patterns-preview-field__button"
+			type="button"
+			onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
+			aria-label={ item.title }
+			aria-describedby={ ariaDescribedBy }
+			aria-disabled={ item.type === PATTERN_TYPES.theme }
+		>
+			{ children }
+		</button>
+	);
+}
+
+function PreviewField( { item } ) {
+	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 [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const { onClick } = useLink( {
+		postType: item.type,
+		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
+			className="page-patterns-preview-field"
+			style={ { backgroundColor } }
+		>
+			<PreviewWrapper
+				item={ item }
+				onClick={ onClick }
+				ariaDescribedBy={ !! description ? descriptionId : undefined }
+			>
+				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+				{ ! isEmpty && (
+					<Async>
+						<BlockPreview
+							blocks={ blocks }
+							viewportWidth={ item.viewportWidth }
+						/>
+					</Async>
+				) }
+			</PreviewWrapper>
+			{ !! description && (
+				<div hidden id={ descriptionId }>
+					{ description }
+				</div>
+			) }
+		</div>
+	);
+}
+
+export const previewField = {
+	label: __( 'Preview' ),
+	id: 'preview',
+	render: PreviewField,
+	enableSorting: false,
+};
+
+function TitleField( { item } ) {
+	const isUserPattern = item.type === PATTERN_TYPES.user;
+	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
+	const { onClick } = useLink( {
+		postType: item.type,
+		postId: isUserPattern || isTemplatePart ? item.id : item.name,
+		canvas: 'edit',
+	} );
+	const title = decodeEntities( defaultGetTitle( item ) );
+	return (
+		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
+			<Flex
+				as="div"
+				gap={ 0 }
+				justify="left"
+				className="edit-site-patterns__pattern-title"
+			>
+				{ item.type === PATTERN_TYPES.theme ? (
+					title
+				) : (
+					<Button
+						variant="link"
+						onClick={ onClick }
+						// Required for the grid's roving tab index system.
+						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
+						tabIndex="-1"
+					>
+						{ title }
+					</Button>
+				) }
+			</Flex>
+			{ item.type === PATTERN_TYPES.theme && (
+				<Tooltip
+					placement="top"
+					text={ __( 'This pattern cannot be edited.' ) }
+				>
+					<Icon
+						className="edit-site-patterns__pattern-lock-icon"
+						icon={ lockSmall }
+						size={ 24 }
+					/>
+				</Tooltip>
+			) }
+		</HStack>
+	);
+}
+
+export const titleField = {
+	label: __( 'Title' ),
+	id: 'title',
+	getValue: ( { item } ) => item.title?.raw || item.title,
+	render: TitleField,
+	enableHiding: false,
+};
+
+const SYNC_FILTERS = [
+	{
+		value: PATTERN_SYNC_TYPES.full,
+		label: _x( 'Synced', 'pattern (singular)' ),
+		description: __( 'Patterns that are kept in sync across the site.' ),
+	},
+	{
+		value: PATTERN_SYNC_TYPES.unsynced,
+		label: _x( 'Not synced', 'pattern (singular)' ),
+		description: __(
+			'Patterns that can be changed freely without affecting the site.'
+		),
+	},
+];
+
+export const patternStatusField = {
+	label: __( '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-${ syncStatus }` }
+			>
+				{
+					SYNC_FILTERS.find( ( { value } ) => value === syncStatus )
+						.label
+				}
+			</span>
+		);
+	},
+	elements: SYNC_FILTERS,
+	filterBy: {
+		operators: [ OPERATOR_IS ],
+		isPrimary: true,
+	},
+	enableSorting: false,
+};
+
+function AuthorField( { item } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
+
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ imageUrl && (
+				<div
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ ! imageUrl && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
+	);
+}
+
+export const templatePartAuthorField = {
+	label: __( 'Author' ),
+	id: 'author',
+	getValue: ( { item } ) => item.author_text,
+	render: AuthorField,
+	filterBy: {
+		isPrimary: true,
+	},
+};

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

@@ -80,7 +80,7 @@ export default function PatternsHeader( {
 							label={ __( 'Actions' ) }
 							toggleProps={ {
 								className: 'edit-site-patterns__button',
-								describedBy: sprintf(
+								description: sprintf(
 									/* translators: %s: pattern category name */
 									__( 'Action menu for %s pattern category' ),
 									title