@wordpress/fields 0.5.1-next.cd6172eb0.0 → 0.7.0

package/src/actions/reorder-page.tsx

@@ -122,4 +122,7 @@ const reorderPage: Action< BasePost > = {
 	RenderModal: ReorderModal,
 };
 
+/**
+ * Reorder action for BasePost.
+ */
 export default reorderPage;

package/src/actions/reset-post.tsx

@@ -292,4 +292,7 @@ const resetPostAction: Action< Template | TemplatePart > = {
 	},
 };
 
+/**
+ * Reset action for Template and TemplatePart.
+ */
 export default resetPostAction;

package/src/actions/restore-post.tsx

@@ -131,4 +131,7 @@ const restorePost: Action< PostWithPermissions > = {
 	},
 };
 
+/**
+ * Restore action for PostWithPermissions.
+ */
 export default restorePost;

package/src/actions/trash-post.tsx

@@ -195,4 +195,7 @@ const trashPost: Action< PostWithPermissions > = {
 	},
 };
 
+/**
+ * Trash action for PostWithPermissions.
+ */
 export default trashPost;

package/src/actions/view-post-revisions.tsx

@@ -44,4 +44,7 @@ const viewPostRevisions: Action< Post > = {
 	},
 };
 
+/**
+ * View post revisions action for Post.
+ */
 export default viewPostRevisions;

package/src/actions/view-post.tsx

@@ -27,4 +27,7 @@ const viewPost: Action< BasePost > = {
 	},
 };
 
+/**
+ * View post action for BasePost.
+ */
 export default viewPost;

package/src/components/create-template-part-modal/index.tsx

@@ -5,13 +5,8 @@ import {
 	Icon,
 	BaseControl,
 	TextControl,
-	Flex,
-	FlexItem,
-	FlexBlock,
 	Button,
 	Modal,
-	__experimentalRadioGroup as RadioGroup,
-	__experimentalRadio as Radio,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -28,7 +23,7 @@ import {
 	symbolFilled as symbolFilledIcon,
 } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-// @ts-ignore
+// @ts-expect-error serialize is not typed
 import { serialize } from '@wordpress/blocks';
 
 /**
@@ -40,6 +35,13 @@ import {
 	useExistingTemplateParts,
 } from './utils';
 
+function getAreaRadioId( value: string, instanceId: number ) {
+	return `fields-create-template-part-modal__area-option-${ value }-${ instanceId }`;
+}
+function getAreaRadioDescriptionId( value: string, instanceId: number ) {
+	return `fields-create-template-part-modal__area-option-description-${ value }-${ instanceId }`;
+}
+
 type CreateTemplatePartModalContentsProps = {
 	defaultArea?: string;
 	blocks: any[];
@@ -50,6 +52,13 @@ type CreateTemplatePartModalContentsProps = {
 	defaultTitle?: string;
 };
 
+type TemplatePartArea = {
+	area: string;
+	label: string;
+	icon: string;
+	description: string;
+};
+
 /**
  * A React component that renders a modal for creating a template part. The modal displays a title and the contents for creating the template part.
  * This component should not live in this package, it should be moved to a dedicated package responsible for managing template.
@@ -64,7 +73,7 @@ export default function CreateTemplatePartModal( {
 } & CreateTemplatePartModalContentsProps ) {
 	const defaultModalTitle = useSelect(
 		( select ) =>
-			// @ts-ignore
+			// @ts-expect-error getPostType is not typed with 'wp_template_part' as argument.
 			select( coreStore ).getPostType( 'wp_template_part' )?.labels
 				?.add_new_item,
 		[]
@@ -77,7 +86,6 @@ export default function CreateTemplatePartModal( {
 			focusOnMount="firstContentElement"
 			size="medium"
 		>
-			{ /* @ts-ignore */ }
 			<CreateTemplatePartModalContents { ...restProps } />
 		</Modal>
 	);
@@ -125,22 +133,14 @@ export function CreateTemplatePartModalContents( {
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 	const instanceId = useInstanceId( CreateTemplatePartModal );
 
-	const defaultTemplatePartAreas = useSelect( ( select ) => {
-		const areas =
+	const defaultTemplatePartAreas = useSelect(
+		( select ) =>
 			// @ts-expect-error getEntityRecord is not typed with unstableBase as argument.
 			select( coreStore ).getEntityRecord< {
-				default_template_part_areas: Array< {
-					area: string;
-					label: string;
-					icon: string;
-					description: string;
-				} >;
-			} >( 'root', '__unstableBase' )?.default_template_part_areas || [];
-
-		return areas.map( ( item ) => {
-			return { ...item, icon: getTemplatePartIcon( item.icon ) };
-		} );
-	}, [] );
+				default_template_part_areas: Array< TemplatePartArea >;
+			} >( 'root', '__unstableBase' )?.default_template_part_areas,
+		[]
+	);
 
 	async function createTemplatePart() {
 		if ( ! title || isSubmitting ) {
@@ -203,51 +203,66 @@ export function CreateTemplatePartModalContents( {
 					onChange={ setTitle }
 					required
 				/>
-				<BaseControl
-					__nextHasNoMarginBottom
-					label={ __( 'Area' ) }
-					id={ `fields-create-template-part-modal__area-selection-${ instanceId }` }
-					className="fields-create-template-part-modal__area-base-control"
-				>
-					<RadioGroup
-						label={ __( 'Area' ) }
-						className="fields-create-template-part-modal__area-radio-group"
-						id={ `fields-create-template-part-modal__area-selection-${ instanceId }` }
-						onChange={ ( value ) =>
-							value && typeof value === 'string'
-								? setArea( value )
-								: () => void 0
-						}
-						checked={ area }
-					>
-						{ defaultTemplatePartAreas.map(
-							( { icon, label, area: value, description } ) => (
-								<Radio
-									__next40pxDefaultSize
-									key={ label }
-									value={ value }
-									className="fields-create-template-part-modal__area-radio"
+				<fieldset>
+					<BaseControl.VisualLabel as="legend">
+						{ __( 'Area' ) }
+					</BaseControl.VisualLabel>
+					<div className="fields-create-template-part-modal__area-radio-group">
+						{ ( defaultTemplatePartAreas ?? [] ).map( ( item ) => {
+							const icon = getTemplatePartIcon( item.icon );
+							return (
+								<div
+									key={ item.area }
+									className="fields-create-template-part-modal__area-radio-wrapper"
 								>
-									<Flex align="start" justify="start">
-										<FlexItem>
-											<Icon icon={ icon } />
-										</FlexItem>
-										<FlexBlock className="fields-create-template-part-modal__option-label">
-											{ label }
-											<div>{ description }</div>
-										</FlexBlock>
-
-										<FlexItem className="fields-create-template-part-modal__checkbox">
-											{ area === value && (
-												<Icon icon={ check } />
-											) }
-										</FlexItem>
-									</Flex>
-								</Radio>
-							)
-						) }
-					</RadioGroup>
-				</BaseControl>
+									<input
+										type="radio"
+										id={ getAreaRadioId(
+											item.area,
+											instanceId
+										) }
+										name={ `fields-create-template-part-modal__area-${ instanceId }` }
+										value={ item.area }
+										checked={ area === item.area }
+										onChange={ () => {
+											setArea( item.area );
+										} }
+										aria-describedby={ getAreaRadioDescriptionId(
+											item.area,
+											instanceId
+										) }
+									/>
+									<Icon
+										icon={ icon }
+										className="fields-create-template-part-modal__area-radio-icon"
+									/>
+									<label
+										htmlFor={ getAreaRadioId(
+											item.area,
+											instanceId
+										) }
+										className="fields-create-template-part-modal__area-radio-label"
+									>
+										{ item.label }
+									</label>
+									<Icon
+										icon={ check }
+										className="fields-create-template-part-modal__area-radio-checkmark"
+									/>
+									<p
+										className="fields-create-template-part-modal__area-radio-description"
+										id={ getAreaRadioDescriptionId(
+											item.area,
+											instanceId
+										) }
+									>
+										{ item.description }
+									</p>
+								</div>
+							);
+						} ) }
+					</div>
+				</fieldset>
 				<HStack justify="right">
 					<Button
 						__next40pxDefaultSize

package/src/components/create-template-part-modal/style.scss

@@ -3,61 +3,86 @@
 }
 
 .fields-create-template-part-modal__area-radio-group {
-	width: 100%;
-	border: $border-width solid $gray-700;
+	border: $border-width solid $gray-600;
 	border-radius: $radius-small;
+}
+
+.fields-create-template-part-modal__area-radio-wrapper {
+	position: relative;
+	padding: $grid-unit-15;
+
+	display: grid;
+	align-items: center;
+	grid-template-columns: min-content 1fr min-content;
+	grid-gap: $grid-unit-05 $grid-unit-10;
+
+	color: $gray-900;
+
+	& + & {
+		border-top: $border-width solid $gray-600;
+	}
+
+	input[type="radio"] {
+		position: absolute;
+		opacity: 0;
+	}
+
+	&:has(input[type="radio"]:checked) {
+		// This is needed to make sure that the focus ring always renders on top
+		// of the sibling radio "wrapper"'s borders.
+		z-index: 1;
+	}
+
+	&:has(input[type="radio"]:not(:checked)):hover {
+		color: var(--wp-admin-theme-color);
+	}
+
+	// Pass-through pointer events, so that the corresponding radio input
+	// gets checked when clicking on the underlying label
+	> *:not(.fields-create-template-part-modal__area-radio-label) {
+		pointer-events: none;
+	}
+}
+
+.fields-create-template-part-modal__area-radio-label {
+	// Capture pointer clicks for the whole radio wrapper
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+	}
+
+	input[type="radio"]:not(:checked) ~ &::before {
+		cursor: pointer;
+	}
+
+	input[type="radio"]:focus-visible ~ &::before {
+		outline: 4px solid transparent;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+}
+
+.fields-create-template-part-modal__area-radio-icon,
+.fields-create-template-part-modal__area-radio-checkmark {
+	fill: currentColor;
+}
+
+.fields-create-template-part-modal__area-radio-checkmark {
+	input[type="radio"]:not(:checked) ~ & {
+		opacity: 0;
+	}
+}
+
+.fields-create-template-part-modal__area-radio-description {
+	grid-column: 2 / 3;
+	margin: 0;
+
+	color: $gray-700;
+	font-size: $helptext-font-size;
+	line-height: normal;
+	text-wrap: pretty;
 
-	.components-button.fields-create-template-part-modal__area-radio {
-		display: block;
-		width: 100%;
-		height: 100%;
-		text-align: left;
-		padding: $grid-unit-15;
-
-		&,
-		&.is-secondary:hover,
-		&.is-primary:hover {
-			margin: 0;
-			background-color: inherit;
-			border-bottom: $border-width solid $gray-700;
-			border-radius: 0;
-
-			&:not(:focus) {
-				box-shadow: none;
-			}
-
-			&:focus {
-				border-bottom: $border-width solid $white;
-			}
-
-			&:last-of-type {
-				border-bottom: none;
-			}
-		}
-
-		&:not(:hover),
-		&[aria-checked="true"] {
-			color: $gray-900;
-			cursor: auto;
-
-			.fields-create-template-part-modal__option-label div {
-				color: $gray-600;
-			}
-		}
-
-		.fields-create-template-part-modal__option-label {
-			padding-top: $grid-unit-05;
-			white-space: normal;
-
-			div {
-				padding-top: $grid-unit-05;
-				font-size: $helptext-font-size;
-			}
-		}
-
-		.fields-create-template-part-modal__checkbox {
-			margin-left: auto;
-			min-width: $grid-unit-30;
-		}
+	input[type="radio"]:not(:checked):hover ~ & {
+		color: inherit;
 	}
 }

package/src/fields/featured-image/index.ts

@@ -20,4 +20,7 @@ const featuredImageField: Field< BasePost > = {
 	enableSorting: false,
 };
 
+/**
+ * Featured Image field for BasePost.
+ */
 export default featuredImageField;

package/src/fields/index.ts

@@ -1,5 +1,8 @@
 export { default as slugField } from './slug';
 export { default as titleField } from './title';
+export { default as pageTitleField } from './page-title';
+export { default as templateTitleField } from './template-title';
+export { default as patternTitleField } from './pattern-title';
 export { default as orderField } from './order';
 export { default as featuredImageField } from './featured-image';
 export { default as templateField } from './template';

package/src/fields/order/index.ts

@@ -16,4 +16,7 @@ const orderField: Field< BasePost > = {
 	description: __( 'Determines the order of pages.' ),
 };
 
+/**
+ * Order field for BasePost.
+ */
 export default orderField;

package/src/fields/page-title/index.ts

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import PageTitleView from './view';
+
+const pageTitleField: Field< BasePost > = {
+	type: 'text',
+	id: 'title',
+	label: __( 'Title' ),
+	placeholder: __( 'No title' ),
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: PageTitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Title for the page entity.
+ */
+export default pageTitleField;

package/src/fields/page-title/view.tsx

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { Settings } from '@wordpress/core-data';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { CommonPost } from '../../types';
+import { BaseTitleView } from '../title/view';
+import { unlock } from '../../lock-unlock';
+const { Badge } = unlock( componentsPrivateApis );
+
+export default function PageTitleView( { item }: { item: CommonPost } ) {
+	const { frontPageId, postsPageId } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings = getEntityRecord(
+			'root',
+			'site'
+		) as Partial< Settings >;
+		return {
+			frontPageId: siteSettings?.page_on_front,
+			postsPageId: siteSettings?.page_for_posts,
+		};
+	}, [] );
+	return (
+		<BaseTitleView item={ item } className="fields-field__page-title">
+			{ [ frontPageId, postsPageId ].includes( item.id as number ) && (
+				<Badge>
+					{ item.id === frontPageId
+						? __( 'Homepage' )
+						: __( 'Posts Page' ) }
+				</Badge>
+			) }
+		</BaseTitleView>
+	);
+}

package/src/fields/parent/index.ts

@@ -21,6 +21,6 @@ const parentField: Field< BasePost > = {
 };
 
 /**
- * This field is used to display the post parent.
+ * Parent field for BasePost.
  */
 export default parentField;

package/src/fields/password/index.tsx

@@ -19,6 +19,6 @@ const passwordField: Field< BasePost > = {
 };
 
 /**
- * This field is used to display the post password.
+ * Password field for BasePost.
  */
 export default passwordField;

package/src/fields/pattern-title/index.ts

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { Pattern } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import PatternTitleView from './view';
+
+const patternTitleField: Field< Pattern > = {
+	type: 'text',
+	id: 'title',
+	label: __( 'Title' ),
+	placeholder: __( 'No title' ),
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: PatternTitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Title for the pattern entity.
+ */
+export default patternTitleField;

package/src/fields/pattern-title/style.scss

@@ -0,0 +1,3 @@
+.fields-field__pattern-title span:first-child {
+	flex: 1;
+}

package/src/fields/pattern-title/view.tsx

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, lockSmall } from '@wordpress/icons';
+import { Tooltip } from '@wordpress/components';
+// @ts-ignore
+import { privateApis as patternPrivateApis } from '@wordpress/patterns';
+
+/**
+ * Internal dependencies
+ */
+import type { CommonPost } from '../../types';
+import { BaseTitleView } from '../title/view';
+import { unlock } from '../../lock-unlock';
+
+export const { PATTERN_TYPES } = unlock( patternPrivateApis );
+
+export default function PatternTitleView( { item }: { item: CommonPost } ) {
+	return (
+		<BaseTitleView item={ item } className="fields-field__pattern-title">
+			{ item.type === PATTERN_TYPES.theme && (
+				<Tooltip
+					placement="top"
+					text={ __( 'This pattern cannot be edited.' ) }
+				>
+					<Icon icon={ lockSmall } size={ 24 } />
+				</Tooltip>
+			) }
+		</BaseTitleView>
+	);
+}

package/src/fields/slug/index.ts

@@ -19,4 +19,7 @@ const slugField: Field< BasePost > = {
 	render: SlugView,
 };
 
+/**
+ * Slug field for BasePost.
+ */
 export default slugField;

package/src/fields/template/index.ts

@@ -14,9 +14,11 @@ const templateField: Field< BasePost > = {
 	id: 'template',
 	type: 'text',
 	label: __( 'Template' ),
-	getValue: ( { item } ) => item.template,
 	Edit: TemplateEdit,
 	enableSorting: false,
 };
 
+/**
+ * Template field for BasePost.
+ */
 export default templateField;

package/src/fields/template-title/index.ts

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { Template } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+import TitleView from '../title/view';
+
+const templateTitleField: Field< Template > = {
+	type: 'text',
+	label: __( 'Template' ),
+	placeholder: __( 'No title' ),
+	id: 'title',
+	getValue: ( { item } ) => getItemTitle( item ),
+	render: TitleView,
+	enableHiding: false,
+	enableGlobalSearch: true,
+};
+
+/**
+ * Title for the template entity.
+ */
+export default templateTitleField;

package/src/fields/title/index.ts

@@ -7,11 +7,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type { BasePost } from '../../types';
+import type { CommonPost } from '../../types';
 import { getItemTitle } from '../../actions/utils';
-import TitleView from './title-view';
+import TitleView from './view';
 
-const titleField: Field< BasePost > = {
+const titleField: Field< CommonPost > = {
 	type: 'text',
 	id: 'title',
 	label: __( 'Title' ),
@@ -19,6 +19,12 @@ const titleField: Field< BasePost > = {
 	getValue: ( { item } ) => getItemTitle( item ),
 	render: TitleView,
 	enableHiding: false,
+	enableGlobalSearch: true,
 };
 
+/**
+ * Title for the any entity with a `title` property.
+ * For patterns, pages or templates you should use the respective field
+ * because there are some differences in the rendering, labels, etc.
+ */
 export default titleField;

package/src/fields/title/style.scss

@@ -0,0 +1,8 @@
+.fields-field__title span:first-child {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	text-decoration: none;
+	white-space: nowrap;
+	display: block;
+	flex-grow: 0;
+}