Merge branch 'trunk' into guide-button

packages/components/CHANGELOG.md

@@ -5,6 +5,10 @@
 ### Enhancements
 
 -   `Guide`: Use small size button for page controls ([#66607](https://github.com/WordPress/gutenberg/pull/66607)).
+-   
+### Internal
+
+-   `Snackbar`: Use link variant for action Button ([#66560](https://github.com/WordPress/gutenberg/pull/66560)).
 
 ## 28.11.0 (2024-10-30)
 

packages/components/src/snackbar/index.tsx

@@ -150,9 +150,10 @@ function UnforwardedSnackbar(
 				{ actions.map( ( { label, onClick, url }, index ) => {
 					return (
 						<Button
+							__next40pxDefaultSize
 							key={ index }
 							href={ url }
-							variant="tertiary"
+							variant="link"
 							onClick={ (
 								event: MouseEvent< HTMLButtonElement >
 							) => onActionClick( event, onClick ) }

packages/components/src/snackbar/style.scss

@@ -48,25 +48,16 @@
 .components-snackbar__action.components-button {
 	margin-left: $grid-unit-40;
 	color: $white;
-	height: auto;
 	flex-shrink: 0;
-	line-height: $default-line-height;
-	padding: 0;
-
-	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) {
-		text-decoration: underline;
-		background-color: transparent;
 
-		&:focus {
-			color: $white;
-			box-shadow: none;
-			outline: 1px dotted $white;
-		}
+	&:focus {
+		box-shadow: none;
+		outline: 1px dotted $white;
+	}
 
-		&:hover {
-			text-decoration: none;
-			color: $white;
-		}
+	&:hover {
+		text-decoration: none;
+		color: currentColor;
 	}
 }
 

packages/dataviews/src/components/dataform-combined-edit/index.tsx

@@ -12,6 +12,7 @@ import {
  * Internal dependencies
  */
 import type { DataFormCombinedEditProps, NormalizedField } from '../../types';
+import FormFieldVisibility from '../form-field-visibility';
 
 function Header( { title }: { title: string } ) {
 	return (
@@ -41,13 +42,15 @@ function DataFormCombinedEdit< Item >( {
 		);
 	const children = visibleChildren.map( ( child ) => {
 		return (
-			<div className="dataforms-combined-edit__field" key={ child.id }>
-				<child.Edit
-					data={ data }
-					field={ child }
-					onChange={ onChange }
-				/>
-			</div>
+			<FormFieldVisibility key={ child.id } data={ data } field={ child }>
+				<div className="dataforms-combined-edit__field">
+					<child.Edit
+						data={ data }
+						field={ child }
+						onChange={ onChange }
+					/>
+				</div>
+			</FormFieldVisibility>
 		);
 	} );
 

packages/dataviews/src/components/dataform/stories/index.story.tsx

@@ -7,7 +7,18 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import DataForm from '../index';
-import type { CombinedFormField } from '../../../types';
+import type { CombinedFormField, Field } from '../../../types';
+
+type SamplePost = {
+	title: string;
+	order: number;
+	author: number;
+	status: string;
+	reviewer: string;
+	date: string;
+	birthdate: string;
+	password?: string;
+};
 
 const meta = {
 	title: 'DataViews/DataForm',
@@ -75,14 +86,18 @@ const fields = [
 		elements: [
 			{ value: 'draft', label: 'Draft' },
 			{ value: 'published', label: 'Published' },
+			{ value: 'private', label: 'Private' },
 		],
 	},
 	{
 		id: 'password',
 		label: 'Password',
 		type: 'text' as const,
+		isVisible: ( item: SamplePost ) => {
+			return item.status !== 'private';
+		},
 	},
-];
+] as Field< SamplePost >[];
 
 export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 	const [ post, setPost ] = useState( {
@@ -102,13 +117,14 @@ export const Default = ( { type }: { type: 'panel' | 'regular' } ) => {
 			'author',
 			'reviewer',
 			'status',
+			'password',
 			'date',
 			'birthdate',
 		],
 	};
 
 	return (
-		<DataForm
+		<DataForm< SamplePost >
 			data={ post }
 			fields={ fields }
 			form={ {

packages/dataviews/src/components/form-field-visibility/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { NormalizedField } from '../../types';
+
+type FormFieldVisibilityProps< Item > = React.PropsWithChildren< {
+	field: NormalizedField< Item >;
+	data: Item;
+} >;
+
+export default function FormFieldVisibility< Item >( {
+	data,
+	field,
+	children,
+}: FormFieldVisibilityProps< Item > ) {
+	const isVisible = useMemo( () => {
+		if ( field.isVisible ) {
+			return field.isVisible( data );
+		}
+		return true;
+	}, [ field.isVisible, data ] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+	return children;
+}

packages/dataviews/src/dataforms-layouts/panel/index.tsx

@@ -19,6 +19,7 @@ import { closeSmall } from '@wordpress/icons';
 import { normalizeFields } from '../../normalize-fields';
 import { getVisibleFields } from '../get-visible-fields';
 import type { DataFormProps, NormalizedField } from '../../types';
+import FormFieldVisibility from '../../components/form-field-visibility';
 
 interface FormFieldProps< Item > {
 	data: Item;
@@ -156,12 +157,17 @@ export default function FormPanel< Item >( {
 		<VStack spacing={ 2 }>
 			{ visibleFields.map( ( field ) => {
 				return (
-					<FormField
+					<FormFieldVisibility
 						key={ field.id }
 						data={ data }
 						field={ field }
-						onChange={ onChange }
-					/>
+					>
+						<FormField
+							data={ data }
+							field={ field }
+							onChange={ onChange }
+						/>
+					</FormFieldVisibility>
 				);
 			} ) }
 		</VStack>

packages/dataviews/src/dataforms-layouts/regular/index.tsx

@@ -10,6 +10,7 @@ import { useMemo } from '@wordpress/element';
 import { normalizeFields } from '../../normalize-fields';
 import { getVisibleFields } from '../get-visible-fields';
 import type { DataFormProps } from '../../types';
+import FormFieldVisibility from '../../components/form-field-visibility';
 
 export default function FormRegular< Item >( {
 	data,
@@ -33,12 +34,17 @@ export default function FormRegular< Item >( {
 		<VStack spacing={ 4 }>
 			{ visibleFields.map( ( field ) => {
 				return (
-					<field.Edit
+					<FormFieldVisibility
 						key={ field.id }
 						data={ data }
 						field={ field }
-						onChange={ onChange }
-					/>
+					>
+						<field.Edit
+							data={ data }
+							field={ field }
+							onChange={ onChange }
+						/>
+					</FormFieldVisibility>
 				);
 			} ) }
 		</VStack>

packages/dataviews/src/types.ts

@@ -123,6 +123,11 @@ export type Field< Item > = {
 	 */
 	isValid?: ( item: Item, context?: ValidationContext ) => boolean;
 
+	/**
+	 * Callback used to decide if a field should be displayed.
+	 */
+	isVisible?: ( item: Item ) => boolean;
+
 	/**
 	 * Whether the field is sortable.
 	 */

packages/edit-site/src/components/page-patterns/fields.js

@@ -45,7 +45,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 }
 		>