@wordpress/edit-site 6.10.0 → 6.12.0

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

@@ -10,7 +10,7 @@ import {
 	__experimentalHStack as HStack,
 	Button,
 	Tooltip,
-	Flex,
+	FlexBlock,
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useId } from '@wordpress/element';
@@ -25,7 +25,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
-import { Async } from '../async';
 import {
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
@@ -45,7 +44,7 @@ function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
 			className="page-patterns-preview-field__button"
 			type="button"
 			onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
-			aria-label={ item.title }
+			aria-label={ defaultGetTitle( item ) }
 			aria-describedby={ ariaDescribedBy }
 			aria-disabled={ item.type === PATTERN_TYPES.theme }
 		>
@@ -88,12 +87,12 @@ function PreviewField( { item } ) {
 				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
 				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
 				{ ! isEmpty && (
-					<Async>
+					<BlockPreview.Async>
 						<BlockPreview
 							blocks={ blocks }
 							viewportWidth={ item.viewportWidth }
 						/>
-					</Async>
+					</BlockPreview.Async>
 				) }
 			</PreviewWrapper>
 			{ !! description && (
@@ -123,12 +122,7 @@ function TitleField( { item } ) {
 	const title = decodeEntities( defaultGetTitle( item ) );
 	return (
 		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
-			<Flex
-				as="div"
-				gap={ 0 }
-				justify="flex-start"
-				className="edit-site-patterns__pattern-title"
-			>
+			<FlexBlock className="edit-site-patterns__pattern-title">
 				{ item.type === PATTERN_TYPES.theme ? (
 					title
 				) : (
@@ -143,7 +137,7 @@ function TitleField( { item } ) {
 						{ title }
 					</Button>
 				) }
-			</Flex>
+			</FlexBlock>
 			{ item.type === PATTERN_TYPES.theme && (
 				<Tooltip
 					placement="top"

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

@@ -41,10 +41,6 @@
 	flex-shrink: 0;
 }
 
-.edit-site-patterns__pattern-lock-icon {
-	min-width: min-content;
-}
-
 .edit-site-patterns__section-header {
 	border-bottom: 1px solid #f0f0f0;
 	padding: $grid-unit-20 $grid-unit-60;
@@ -77,7 +73,6 @@
 
 .edit-site-patterns__pattern-title {
 	display: block;
-	width: 100%;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;

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

@@ -43,7 +43,7 @@ export default function usePatternSettings() {
 		return {
 			...restStoredSettings,
 			__experimentalBlockPatterns: blockPatterns,
-			__unstableIsPreviewMode: true,
+			isPreviewMode: true,
 		};
 	}, [ storedSettings, blockPatterns ] );
 

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

@@ -20,7 +20,6 @@ import { EditorProvider } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import { Async } from '../async';
 import { default as Link, useLink } from '../routes/link';
 import { useAddedBy } from './hooks';
 
@@ -63,9 +62,9 @@ function PreviewField( { item } ) {
 				>
 					{ isEmpty && __( 'Empty template' ) }
 					{ ! isEmpty && (
-						<Async>
+						<BlockPreview.Async>
 							<BlockPreview blocks={ blocks } />
-						</Async>
+						</BlockPreview.Async>
 					) }
 				</button>
 			</div>

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

@@ -74,7 +74,6 @@ const defaultLayouts = {
 		fields: [ 'title', 'description', 'author' ],
 		layout: {
 			primaryField: 'title',
-			mediaField: 'preview',
 		},
 	},
 };

package/src/components/pagination/index.js

@@ -65,7 +65,7 @@ export default function Pagination( {
 			</HStack>
 			<Text variant="muted">
 				{ sprintf(
-					// translators: %1$s: Current page number, %2$s: Total number of pages.
+					// translators: 1: Current page number. 2: Total number of pages.
 					_x( '%1$s of %2$s', 'paging' ),
 					currentPage,
 					numPages

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

@@ -23,6 +23,14 @@ import { unlock } from '../../lock-unlock';
 
 const { PostCardPanel } = unlock( editorPrivateApis );
 
+const fieldsWithBulkEditSupport = [
+	'title',
+	'status',
+	'date',
+	'author',
+	'comment_status',
+];
+
 function PostEditForm( { postType, postId } ) {
 	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
 	const { record } = useSelect(
@@ -58,20 +66,51 @@ function PostEditForm( { postType, postId } ) {
 			} ),
 		[ _fields ]
 	);
-	const form = {
-		type: 'panel',
-		fields: [ 'title', 'status', 'date', 'author', 'comment_status' ],
-	};
+
+	const form = useMemo(
+		() => ( {
+			type: 'panel',
+			fields: [
+				'featured_media',
+				'title',
+				'status_and_visibility',
+				'author',
+				'date',
+				'slug',
+				'parent',
+				'comment_status',
+			].filter(
+				( field ) =>
+					ids.length === 1 ||
+					fieldsWithBulkEditSupport.includes( field )
+			),
+			combinedFields: [
+				{
+					id: 'status_and_visibility',
+					label: __( 'Status & Visibility' ),
+					children: [ 'status', 'password' ],
+					direction: 'vertical',
+					render: ( { item } ) => item.status,
+				},
+			],
+		} ),
+		[ ids ]
+	);
 	const onChange = ( edits ) => {
 		for ( const id of ids ) {
 			if (
+				edits.status &&
 				edits.status !== 'future' &&
-				record.status === 'future' &&
+				record?.status === 'future' &&
 				new Date( record.date ) > new Date()
 			) {
 				edits.date = null;
 			}
-			if ( edits.status === 'private' && record.password ) {
+			if (
+				edits.status &&
+				edits.status === 'private' &&
+				record.password
+			) {
 				edits.password = '';
 			}
 			editEntityRecord( 'postType', postType, id, edits );

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

@@ -7,3 +7,10 @@
 		justify-content: center;
 	}
 }
+
+.dataforms-layouts-panel__field-dropdown {
+	.fields-controls__password {
+		border-top: $border-width solid $gray-200;
+		padding-top: $grid-unit-20;
+	}
+}

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

@@ -6,137 +6,23 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
 import {
-	createInterpolateElement,
-	useMemo,
-	useState,
-} from '@wordpress/element';
-import { dateI18n, getDate, getSettings } from '@wordpress/date';
-import {
-	trash,
-	drafts,
-	published,
-	scheduled,
-	pending,
-	notAllowed,
-	commentAuthorAvatar as authorIcon,
-} from '@wordpress/icons';
+	featuredImageField,
+	slugField,
+	parentField,
+	passwordField,
+	statusField,
+	commentStatusField,
+	titleField,
+	dateField,
+} from '@wordpress/fields';
+import { useMemo, useState } from '@wordpress/element';
+import { commentAuthorAvatar as authorIcon } from '@wordpress/icons';
 import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 
-/**
- * Internal dependencies
- */
-import {
-	LAYOUT_GRID,
-	LAYOUT_TABLE,
-	LAYOUT_LIST,
-	OPERATOR_IS_ANY,
-} from '../../utils/constants';
-import { default as Link, useLink } from '../routes/link';
-import Media from '../media';
-
-// See https://github.com/WordPress/gutenberg/issues/55886
-// We do not support custom statutes at the moment.
-const STATUSES = [
-	{
-		value: 'draft',
-		label: __( 'Draft' ),
-		icon: drafts,
-		description: __( 'Not ready to publish.' ),
-	},
-	{
-		value: 'future',
-		label: __( 'Scheduled' ),
-		icon: scheduled,
-		description: __( 'Publish automatically on a chosen date.' ),
-	},
-	{
-		value: 'pending',
-		label: __( 'Pending Review' ),
-		icon: pending,
-		description: __( 'Waiting for review before publishing.' ),
-	},
-	{
-		value: 'private',
-		label: __( 'Private' ),
-		icon: notAllowed,
-		description: __( 'Only visible to site admins and editors.' ),
-	},
-	{
-		value: 'publish',
-		label: __( 'Published' ),
-		icon: published,
-		description: __( 'Visible to everyone.' ),
-	},
-	{ value: 'trash', label: __( 'Trash' ), icon: trash },
-];
-
-const getFormattedDate = ( dateToDisplay ) =>
-	dateI18n(
-		getSettings().formats.datetimeAbbreviated,
-		getDate( dateToDisplay )
-	);
-
-function FeaturedImage( { item, viewType } ) {
-	const isDisabled = item.status === 'trash';
-	const { onClick } = useLink( {
-		postId: item.id,
-		postType: item.type,
-		canvas: 'edit',
-	} );
-	const hasMedia = !! item.featured_media;
-	const size =
-		viewType === LAYOUT_GRID
-			? [ 'large', 'full', 'medium', 'thumbnail' ]
-			: [ 'thumbnail', 'medium', 'large', 'full' ];
-	const media = hasMedia ? (
-		<Media
-			className="edit-site-post-list__featured-image"
-			id={ item.featured_media }
-			size={ size }
-		/>
-	) : null;
-	const renderButton = viewType !== LAYOUT_LIST && ! isDisabled;
-	return (
-		<div
-			className={ `edit-site-post-list__featured-image-wrapper is-layout-${ viewType }` }
-		>
-			{ renderButton ? (
-				<button
-					className="edit-site-post-list__featured-image-button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ item.title?.rendered || __( '(no title)' ) }
-				>
-					{ media }
-				</button>
-			) : (
-				media
-			) }
-		</div>
-	);
-}
-
-function PostStatusField( { item } ) {
-	const status = STATUSES.find( ( { value } ) => value === item.status );
-	const label = status?.label || item.status;
-	const icon = status?.icon;
-	return (
-		<HStack alignment="left" spacing={ 0 }>
-			{ icon && (
-				<div className="edit-site-post-list__status-icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span>{ label }</span>
-		</HStack>
-	);
-}
-
 function PostAuthorField( { item } ) {
 	const { text, imageUrl } = useSelect(
 		( select ) => {
@@ -175,92 +61,14 @@ function PostAuthorField( { item } ) {
 	);
 }
 
-function usePostFields( viewType ) {
+function usePostFields() {
 	const { records: authors, isResolving: isLoadingAuthors } =
 		useEntityRecords( 'root', 'user', { per_page: -1 } );
 
-	const { frontPageId, postsPageId } = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreStore );
-		const siteSettings = getEntityRecord( 'root', 'site' );
-		return {
-			frontPageId: siteSettings?.page_on_front,
-			postsPageId: siteSettings?.page_for_posts,
-		};
-	}, [] );
-
 	const fields = useMemo(
 		() => [
-			{
-				id: 'featured-image',
-				label: __( 'Featured Image' ),
-				getValue: ( { item } ) => item.featured_media,
-				render: ( { item } ) => (
-					<FeaturedImage item={ item } viewType={ viewType } />
-				),
-				enableSorting: false,
-			},
-			{
-				label: __( 'Title' ),
-				id: 'title',
-				type: 'text',
-				getValue: ( { item } ) =>
-					typeof item.title === 'string'
-						? item.title
-						: item.title?.raw,
-				render: ( { item } ) => {
-					const addLink =
-						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) &&
-						item.status !== 'trash';
-					const renderedTitle =
-						typeof item.title === 'string'
-							? item.title
-							: item.title?.rendered;
-					const title = addLink ? (
-						<Link
-							params={ {
-								postId: item.id,
-								postType: item.type,
-								canvas: 'edit',
-							} }
-						>
-							{ decodeEntities( renderedTitle ) ||
-								__( '(no title)' ) }
-						</Link>
-					) : (
-						<span>
-							{ decodeEntities( renderedTitle ) ||
-								__( '(no title)' ) }
-						</span>
-					);
-
-					let suffix = '';
-					if ( item.id === frontPageId ) {
-						suffix = (
-							<span className="edit-site-post-list__title-badge">
-								{ __( 'Homepage' ) }
-							</span>
-						);
-					} else if ( item.id === postsPageId ) {
-						suffix = (
-							<span className="edit-site-post-list__title-badge">
-								{ __( 'Posts Page' ) }
-							</span>
-						);
-					}
-
-					return (
-						<HStack
-							className="edit-site-post-list__title"
-							alignment="center"
-							justify="flex-start"
-						>
-							{ title }
-							{ suffix }
-						</HStack>
-					);
-				},
-				enableHiding: false,
-			},
+			featuredImageField,
+			titleField,
 			{
 				label: __( 'Author' ),
 				id: 'author',
@@ -280,123 +88,14 @@ function usePostFields( viewType ) {
 						: nameB.localeCompare( nameA );
 				},
 			},
-			{
-				label: __( 'Status' ),
-				id: 'status',
-				type: 'text',
-				elements: STATUSES,
-				render: PostStatusField,
-				Edit: 'radio',
-				enableSorting: false,
-				filterBy: {
-					operators: [ OPERATOR_IS_ANY ],
-				},
-			},
-			{
-				label: __( 'Date' ),
-				id: 'date',
-				type: 'datetime',
-				render: ( { item } ) => {
-					const isDraftOrPrivate = [ 'draft', 'private' ].includes(
-						item.status
-					);
-					if ( isDraftOrPrivate ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation date */
-								__( '<span>Modified: <time>%s</time></span>' ),
-								getFormattedDate( item.date )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					const isScheduled = item.status === 'future';
-					if ( isScheduled ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation date */
-								__( '<span>Scheduled: <time>%s</time></span>' ),
-								getFormattedDate( item.date )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					const isPublished = item.status === 'publish';
-					if ( isPublished ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: page creation time */
-								__( '<span>Published: <time>%s</time></span>' ),
-								getFormattedDate( item.date )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					// Pending posts show the modified date if it's newer.
-					const dateToDisplay =
-						getDate( item.modified ) > getDate( item.date )
-							? item.modified
-							: item.date;
-
-					const isPending = item.status === 'pending';
-					if ( isPending ) {
-						return createInterpolateElement(
-							sprintf(
-								/* translators: %s: the newest of created or modified date for the page */
-								__( '<span>Modified: <time>%s</time></span>' ),
-								getFormattedDate( dateToDisplay )
-							),
-							{
-								span: <span />,
-								time: <time />,
-							}
-						);
-					}
-
-					// Unknow status.
-					return <time>{ getFormattedDate( item.date ) }</time>;
-				},
-			},
-			{
-				id: 'comment_status',
-				label: __( 'Discussion' ),
-				type: 'text',
-				Edit: 'radio',
-				enableSorting: false,
-				filterBy: {
-					operators: [],
-				},
-				elements: [
-					{
-						value: 'open',
-						label: __( 'Open' ),
-						description: __(
-							'Visitors can add new comments and replies.'
-						),
-					},
-					{
-						value: 'closed',
-						label: __( 'Closed' ),
-						description: __(
-							'Visitors cannot add new comments or replies. Existing comments remain visible.'
-						),
-					},
-				],
-			},
+			statusField,
+			dateField,
+			slugField,
+			parentField,
+			commentStatusField,
+			passwordField,
 		],
-		[ authors, viewType, frontPageId, postsPageId ]
+		[ authors ]
 	);
 
 	return {

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

@@ -0,0 +1,3 @@
+.components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
+	z-index: z-index(".components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown");
+}

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

@@ -208,9 +208,7 @@ export default function PostList( { postType } ) {
 		return found?.filters ?? [];
 	};
 
-	const { isLoading: isLoadingFields, fields: _fields } = usePostFields(
-		view.type
-	);
+	const { isLoading: isLoadingFields, fields: _fields } = usePostFields();
 	const fields = useMemo( () => {
 		const activeViewFilters = getActiveViewFilters(
 			defaultViews,
@@ -402,6 +400,14 @@ export default function PostList( { postType } ) {
 				onChangeView={ setView }
 				selection={ selection }
 				onChangeSelection={ onChangeSelection }
+				isItemClickable={ ( item ) => item.status !== 'trash' }
+				onClickItem={ ( { id } ) => {
+					history.push( {
+						postId: id,
+						postType,
+						canvas: 'edit',
+					} );
+				} }
 				getItemId={ getItemId }
 				defaultLayouts={ defaultLayouts }
 				header={
@@ -412,7 +418,7 @@ export default function PostList( { postType } ) {
 							size="compact"
 							isPressed={ quickEdit }
 							icon={ drawerRight }
-							label={ __( 'Toggle details panel' ) }
+							label={ __( 'Details' ) }
 							onClick={ () => {
 								history.push( {
 									...location.params,

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

@@ -9,7 +9,9 @@
 	width: 100%;
 	border-radius: $grid-unit-05;
 
-	&.is-layout-table:not(:has(.edit-site-post-list__featured-image-button)),
+	&.is-layout-table:not(
+	:has(.edit-site-post-list__featured-image-button)
+),
 	&.is-layout-table .edit-site-post-list__featured-image-button {
 		width: $grid-unit-40;
 		height: $grid-unit-40;
@@ -46,7 +48,9 @@
 	border-radius: $grid-unit-05;
 
 	&:focus-visible {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow:
+			0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
@@ -54,7 +58,9 @@
 
 .dataviews-view-grid__card.is-selected {
 	.edit-site-post-list__featured-image-button::after {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow:
+			inset 0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-admin-theme-color);
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
 }
@@ -64,9 +70,29 @@
 	overflow: hidden;
 }
 
+.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable
+.edit-site-post-list__title
+span,
+.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable
+.edit-site-post-list__title
+span {
+	text-decoration: none;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	display: block;
+	flex-grow: 0;
+	color: $gray-900;
+
+	&:hover {
+		color: var(--wp-admin-theme-color);
+	}
+	@include link-reset();
+}
+
 .edit-site-post-list__title-badge {
 	background: $gray-100;
-	color: $gray-700;
+	color: $gray-800;
 	padding: 0 $grid-unit-05;
 	border-radius: $radius-small;
 	font-size: 12px;