@wordpress/edit-site 6.3.0 → 6.4.0

package/src/components/layout/style.scss

@@ -175,8 +175,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 +196,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 +251,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/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

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

@@ -62,6 +62,14 @@ const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
 			primaryField: 'title',
+			styles: {
+				preview: {
+					width: '1%',
+				},
+				author: {
+					width: '1%',
+				},
+			},
 		},
 	},
 	[ LAYOUT_GRID ]: {
@@ -169,7 +177,7 @@ function Author( { item, viewType } ) {
 	const withIcon = viewType !== LAYOUT_LIST;
 
 	return (
-		<HStack alignment="left" spacing={ 1 }>
+		<HStack alignment="left" spacing={ 0 }>
 			{ withIcon && imageUrl && (
 				<div
 					className={ clsx( 'page-templates-author-field__avatar', {
@@ -276,17 +284,17 @@ export default function DataviewsPatterns() {
 	const fields = useMemo( () => {
 		const _fields = [
 			{
-				header: __( 'Preview' ),
+				label: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => (
 					<Preview item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
-				width: '1%',
 			},
 			{
-				header: __( 'Title' ),
+				label: __( 'Title' ),
 				id: 'title',
+				getValue: ( { item } ) => item.title?.raw || item.title,
 				render: ( { item } ) => <Title item={ item } />,
 				enableHiding: false,
 			},
@@ -294,7 +302,7 @@ export default function DataviewsPatterns() {
 
 		if ( type === PATTERN_TYPES.user ) {
 			_fields.push( {
-				header: __( 'Sync status' ),
+				label: __( 'Sync status' ),
 				id: 'sync-status',
 				render: ( { item } ) => {
 					const syncStatus =
@@ -325,7 +333,7 @@ export default function DataviewsPatterns() {
 			} );
 		} else if ( type === TEMPLATE_PART_POST_TYPE ) {
 			_fields.push( {
-				header: __( 'Author' ),
+				label: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item.author_text,
 				render: ( { item } ) => {
@@ -335,7 +343,6 @@ export default function DataviewsPatterns() {
 				filterBy: {
 					isPrimary: true,
 				},
-				width: '1%',
 			} );
 		}
 
@@ -345,7 +352,7 @@ export default function DataviewsPatterns() {
 	// Reset the page number when the category changes.
 	useEffect( () => {
 		if ( previousCategoryId !== categoryId ) {
-			setView( DEFAULT_VIEW );
+			setView( ( prevView ) => ( { ...prevView, page: 1 } ) );
 		}
 	}, [ categoryId, previousCategoryId ] );
 	const { data, paginationInfo } = useMemo( () => {

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

@@ -6,12 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	Icon,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	VisuallyHidden,
-} from '@wordpress/components';
+import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
@@ -23,7 +18,10 @@ import {
 } from '@wordpress/block-editor';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import {
+	privateApis as editorPrivateApis,
+	EditorProvider,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -47,20 +45,41 @@ import { useEditPostAction } from '../dataviews-actions';
 
 const { usePostActions } = unlock( editorPrivateApis );
 
-const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
-	blockEditorPrivateApis
-);
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
+		fields: [ 'template', 'author' ],
 		layout: {
 			primaryField: 'title',
+			combinedFields: [
+				{
+					id: 'template',
+					label: __( 'Template' ),
+					children: [ 'title', 'description' ],
+					direction: 'vertical',
+				},
+			],
+			styles: {
+				template: {
+					maxWidth: 400,
+					minWidth: 320,
+				},
+				preview: {
+					minWidth: 120,
+					maxWidth: 120,
+				},
+				author: {
+					width: '1%',
+				},
+			},
 		},
 	},
 	[ LAYOUT_GRID ]: {
+		fields: [ 'title', 'description', 'author' ],
 		layout: {
 			mediaField: 'preview',
 			primaryField: 'title',
@@ -68,6 +87,7 @@ const defaultLayouts = {
 		},
 	},
 	[ LAYOUT_LIST ]: {
+		fields: [ 'title', 'description', 'author' ],
 		layout: {
 			primaryField: 'title',
 			mediaField: 'preview',
@@ -84,7 +104,7 @@ const DEFAULT_VIEW = {
 		field: 'title',
 		direction: 'asc',
 	},
-	fields: [ 'title', 'description', 'author' ],
+	fields: defaultLayouts[ LAYOUT_GRID ].fields,
 	layout: defaultLayouts[ LAYOUT_GRID ].layout,
 	filters: [],
 };
@@ -107,14 +127,13 @@ function Title( { item, viewType } ) {
 	);
 }
 
-function AuthorField( { item, viewType } ) {
+function AuthorField( { item } ) {
 	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-	const withIcon = viewType !== LAYOUT_LIST;
 
 	return (
-		<HStack alignment="left" spacing={ 1 }>
-			{ withIcon && imageUrl && (
+		<HStack alignment="left" spacing={ 0 }>
+			{ imageUrl && (
 				<div
 					className={ clsx( 'page-templates-author-field__avatar', {
 						'is-loaded': isImageLoaded,
@@ -127,7 +146,7 @@ function AuthorField( { item, viewType } ) {
 					/>
 				</div>
 			) }
-			{ withIcon && ! imageUrl && (
+			{ ! imageUrl && (
 				<div className="page-templates-author-field__icon">
 					<Icon icon={ icon } />
 				</div>
@@ -158,7 +177,7 @@ function Preview( { item, viewType } ) {
 	// 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 (
-		<ExperimentalBlockEditorProvider settings={ settings }>
+		<EditorProvider post={ item } settings={ settings }>
 			<div
 				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
 				style={ { backgroundColor } }
@@ -184,7 +203,7 @@ function Preview( { item, viewType } ) {
 					</button>
 				) }
 			</div>
-		</ExperimentalBlockEditorProvider>
+		</EditorProvider>
 	);
 }
 
@@ -199,6 +218,7 @@ export default function PageTemplates() {
 			...DEFAULT_VIEW,
 			type: usedType,
 			layout: defaultLayouts[ usedType ].layout,
+			fields: defaultLayouts[ usedType ].fields,
 			filters:
 				activeView !== 'all'
 					? [
@@ -236,12 +256,13 @@ export default function PageTemplates() {
 		}
 	);
 	const history = useHistory();
-	const onSelectionChange = useCallback(
+	const onChangeSelection = useCallback(
 		( items ) => {
+			setSelection( items );
 			if ( view?.type === LAYOUT_LIST ) {
 				history.push( {
 					...params,
-					postId: items.length === 1 ? items[ 0 ].id : undefined,
+					postId: items.length === 1 ? items[ 0 ] : undefined,
 				} );
 			}
 		},
@@ -265,61 +286,46 @@ export default function PageTemplates() {
 	const fields = useMemo(
 		() => [
 			{
-				header: __( 'Preview' ),
+				label: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => {
 					return <Preview item={ item } viewType={ view.type } />;
 				},
-				minWidth: 120,
-				maxWidth: 120,
 				enableSorting: false,
 			},
 			{
-				header: __( 'Template' ),
+				label: __( 'Template' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => (
 					<Title item={ item } viewType={ view.type } />
 				),
-				maxWidth: 400,
 				enableHiding: false,
 				enableGlobalSearch: true,
 			},
 			{
-				header: __( 'Description' ),
+				label: __( 'Description' ),
 				id: 'description',
 				render: ( { item } ) => {
-					return item.description ? (
-						<span className="page-templates-description">
-							{ decodeEntities( item.description ) }
-						</span>
-					) : (
-						view.type === LAYOUT_TABLE && (
-							<>
-								<Text variant="muted" aria-hidden="true">
-									&#8212;
-								</Text>
-								<VisuallyHidden>
-									{ __( 'No description.' ) }
-								</VisuallyHidden>
-							</>
+					return (
+						item.description && (
+							<span className="page-templates-description">
+								{ decodeEntities( item.description ) }
+							</span>
 						)
 					);
 				},
-				maxWidth: 400,
-				minWidth: 320,
 				enableSorting: false,
 				enableGlobalSearch: true,
 			},
 			{
-				header: __( 'Author' ),
+				label: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item.author_text,
 				render: ( { item } ) => {
 					return <AuthorField viewType={ view.type } item={ item } />;
 				},
 				elements: authors,
-				width: '1%',
 			},
 		],
 		[ authors, view.type ]
@@ -367,9 +373,8 @@ export default function PageTemplates() {
 				isLoading={ isLoadingData }
 				view={ view }
 				onChangeView={ onChangeView }
-				onSelectionChange={ onSelectionChange }
+				onChangeSelection={ onChangeSelection }
 				selection={ selection }
-				setSelection={ setSelection }
 				defaultLayouts={ defaultLayouts }
 			/>
 		</Page>

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

@@ -2,6 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	width: 100%;
 
 	.page-templates-preview-field__button {
 		box-shadow: none;
@@ -67,12 +68,12 @@
 	width: $grid-unit-30;
 	height: $grid-unit-30;
 	align-items: center;
-	justify-content: center;
+	justify-content: left;
 	display: flex;
 
 	img {
-		width: 20px;
-		height: 20px;
+		width: $grid-unit-20;
+		height: $grid-unit-20;
 		object-fit: cover;
 		opacity: 0;
 		transition: opacity 0.1s linear;
@@ -94,6 +95,7 @@
 	height: $grid-unit-30;
 
 	svg {
+		margin-left: -$grid-unit-05;
 		fill: currentColor;
 	}
 }

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

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { DataForm } from '@wordpress/dataviews';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { Button } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import usePostFields from '../post-fields';
+
+function PostEditForm( { postType, postId } ) {
+	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
+	const { initialEdits } = useSelect(
+		( select ) => {
+			if ( ids.length !== 1 ) {
+			}
+			return {
+				initialEdits:
+					ids.length === 1
+						? select( coreDataStore ).getEntityRecord(
+								'postType',
+								postType,
+								ids[ 0 ]
+						  )
+						: null,
+			};
+		},
+		[ postType, ids ]
+	);
+	const registry = useRegistry();
+	const { saveEntityRecord } = useDispatch( coreDataStore );
+	const { fields } = usePostFields();
+	const form = {
+		visibleFields: [ 'title' ],
+	};
+	const [ edits, setEdits ] = useState( {} );
+	const itemWithEdits = useMemo( () => {
+		return {
+			...initialEdits,
+			...edits,
+		};
+	}, [ initialEdits, edits ] );
+	const onSubmit = async ( event ) => {
+		event.preventDefault();
+		const { getEntityRecord } = registry.resolveSelect( coreDataStore );
+		for ( const id of ids ) {
+			const item = await getEntityRecord( 'postType', postType, id );
+			saveEntityRecord( 'postType', postType, {
+				...item,
+				...edits,
+			} );
+		}
+		setEdits( {} );
+	};
+
+	return (
+		<form onSubmit={ onSubmit }>
+			<DataForm
+				data={ itemWithEdits }
+				fields={ fields }
+				form={ form }
+				onChange={ setEdits }
+			/>
+			<Button variant="primary" type="submit">
+				{ __( 'Update' ) }
+			</Button>
+		</form>
+	);
+}
+
+export function PostEdit( { postType, postId } ) {
+	return (
+		<Page
+			className={ clsx( 'edit-site-post-edit', {
+				'is-empty': ! postId,
+			} ) }
+			label={ __( 'Post Edit' ) }
+		>
+			{ postId && (
+				<PostEditForm postType={ postType } postId={ postId } />
+			) }
+			{ ! postId && <p>{ __( 'Select a page to edit' ) }</p> }
+		</Page>
+	);
+}

package/src/components/post-edit/style.scss

@@ -0,0 +1,9 @@
+.edit-site-post-edit {
+	padding: $grid-unit-30;
+
+	&.is-empty .edit-site-page-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}