Update @wordpress/components and @wordpress/dataviews packages to the latest versions as of 22nd of October 2025 (#106646)

* Update @wordpress/components and @wordpress/dataviews to 30.6.0 and 10.1.0
* Move away from isItemValid to useFormValidity
* Fix the form validation to use validity and also fixed a failing test
* Remove isDestructive action property
* Fix how we handle async validators for the phone field
* Remove dependency on wordpress/components/src/utils/theme-variables
* Change the action labels for domains and remove the obsolete icons
* Set isPrimary to false for actions while in list view for Sites

Author: hambai

apps/design-system-docs/package.json

@@ -28,8 +28,8 @@
 		"@mdx-js/react": "^3.1.0",
 		"@wordpress/base-styles": "^5.23.0",
 		"@wordpress/browserslist-config": "^6.23.0",
-		"@wordpress/components": "^30.4.0",
-		"@wordpress/dataviews": "^9.0.0",
+		"@wordpress/components": "30.6.0",
+		"@wordpress/dataviews": "10.1.0",
 		"docusaurus-plugin-sass": "^0.2.6",
 		"prism-react-renderer": "^2.4.1",
 		"react": "^18.3.1",

apps/happy-blocks/package.json

@@ -37,7 +37,7 @@
 		"@wordpress/base-styles": "^5.23.0",
 		"@wordpress/block-editor": "^14.18.0",
 		"@wordpress/blocks": "^14.12.0",
-		"@wordpress/components": "^30.4.0",
+		"@wordpress/components": "30.6.0",
 		"@wordpress/data": "^10.23.0",
 		"@wordpress/element": "^6.23.0",
 		"@wordpress/i18n": "^5.23.0",

apps/help-center/package.json

@@ -37,7 +37,7 @@
 		"@automattic/i18n-utils": "workspace:^",
 		"@automattic/zendesk-client": "workspace:^",
 		"@tanstack/react-query": "^5.83.0",
-		"@wordpress/components": "^30.4.0",
+		"@wordpress/components": "30.6.0",
 		"@wordpress/compose": "^7.23.0",
 		"@wordpress/data": "^10.23.0",
 		"@wordpress/dom-ready": "^4.29.0",

apps/notifications/package.json

@@ -30,9 +30,9 @@
 		"@automattic/components": "workspace:^",
 		"@automattic/i18n-utils": "workspace:^",
 		"@automattic/webpack-extensive-lodash-replacement-plugin": "workspace:^",
-		"@wordpress/components": "^30.4.0",
+		"@wordpress/components": "30.6.0",
 		"@wordpress/data": "^10.23.0",
-		"@wordpress/dataviews": "^9.0.0",
+		"@wordpress/dataviews": "10.1.0",
 		"@wordpress/element": "^6.23.0",
 		"@wordpress/i18n": "^5.23.0",
 		"@wordpress/icons": "^10.23.0",

apps/o2-blocks/package.json

@@ -27,7 +27,7 @@
 		"@wordpress/base-styles": "^5.23.0",
 		"@wordpress/block-editor": "^14.18.0",
 		"@wordpress/blocks": "^14.12.0",
-		"@wordpress/components": "^30.4.0",
+		"@wordpress/components": "30.6.0",
 		"@wordpress/data": "^10.23.0",
 		"@wordpress/editor": "^14.23.0",
 		"@wordpress/element": "^6.23.0",

apps/wpcom-block-editor/package.json

@@ -29,7 +29,7 @@
 		"@wordpress/base-styles": "^5.23.0",
 		"@wordpress/block-editor": "^14.18.0",
 		"@wordpress/blocks": "^14.12.0",
-		"@wordpress/components": "^30.4.0",
+		"@wordpress/components": "30.6.0",
 		"@wordpress/compose": "^7.23.0",
 		"@wordpress/data": "^10.23.0",
 		"@wordpress/dom-ready": "^4.23.0",

client/dashboard/domains/dataviews/actions.tsx

@@ -3,10 +3,8 @@ import { userPurchasesQuery, siteSetPrimaryDomainMutation } from '@automattic/ap
 import { isFreeUrlDomainName } from '@automattic/domains-table/src/utils/is-free-url-domain-name';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { useRouter } from '@tanstack/react-router';
-import { Icon } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
-import { payment, tool } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo, Suspense, lazy } from 'react';
 import {
@@ -53,8 +51,7 @@ export const useActions = ( { user, sites }: { user: User; sites?: Site[] } ) =>
 			{
 				id: 'renew',
 				isPrimary: true,
-				icon: <Icon icon={ payment } />,
-				label: __( 'Renew now' ),
+				label: __( 'Renew' ),
 				callback: ( items: DomainSummary[] ) => {
 					const domain = items[ 0 ];
 					const purchase = purchases?.find(
@@ -72,8 +69,7 @@ export const useActions = ( { user, sites }: { user: User; sites?: Site[] } ) =>
 			{
 				id: 'setup',
 				isPrimary: true,
-				icon: <Icon icon={ tool } />,
-				label: __( 'Set up connection' ),
+				label: __( 'Set up' ),
 				callback: ( items: DomainSummary[] ) => {
 					const domain = items[ 0 ];
 

client/dashboard/domains/domain-contact-details/contact-form-fields.tsx

@@ -7,7 +7,7 @@ import {
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { type Field } from '@wordpress/dataviews';
-import { createInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import InlineSupportLink from '../../components/inline-support-link';
 import PhoneNumberInput from '../../components/phone-number-input';
@@ -68,7 +68,20 @@ export const getContactFormFields = (
 					( country ) => country.numeric_code === countryNumericCode
 				);
 
-				const validationMessage = field.isValid?.custom?.( data, field );
+				// Handle both sync and async validators
+				const [ validationMessage, setValidationMessage ] = useState< string | null >( null );
+
+				useEffect( () => {
+					const result = field.isValid?.custom?.( data, field );
+
+					// Check if the result is a Promise (async validator)
+					if ( result instanceof Promise ) {
+						result.then( setValidationMessage );
+					} else {
+						// Sync validator - set the result directly
+						setValidationMessage( result ?? null );
+					}
+				}, [ data, field ] );
 
 				return (
 					<PhoneNumberInput

client/dashboard/domains/domain-contact-details/contact-form.tsx

@@ -14,7 +14,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { useDispatch } from '@wordpress/data';
-import { DataForm, Field, isItemValid, FormField } from '@wordpress/dataviews';
+import { DataForm, Field, useFormValidity, FormField } from '@wordpress/dataviews';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -125,7 +125,7 @@ export default function ContactForm( { domainName, initialData }: ContactFormPro
 		],
 	};
 
-	const canSave = isItemValid( normalizedFormData, fields, form );
+	const { isValid: canSave } = useFormValidity( normalizedFormData, fields, form );
 
 	return (
 		<VStack spacing={ 10 }>

client/dashboard/domains/domain-dns/email-setup-form.tsx

@@ -2,7 +2,7 @@ import { type DnsTemplateVariables } from '@automattic/api-core';
 import { domainDnsApplyTemplateMutation } from '@automattic/api-queries';
 import { useMutation } from '@tanstack/react-query';
 import { __experimentalVStack as VStack, Button } from '@wordpress/components';
-import { DataForm, Field, isItemValid } from '@wordpress/dataviews';
+import { DataForm, Field, useFormValidity } from '@wordpress/dataviews';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from 'react';
 import { domainRoute } from '../../app/router/domains';
@@ -101,8 +101,9 @@ export default function EmailSetupForm( {
 			},
 		},
 	];
+	const { isValid } = useFormValidity( formData, fields, form );
 
-	const canSubmit = formData.record && isItemValid( formData, fields, form );
+	const canSubmit = formData.record && isValid;
 
 	return (
 		<div style={ { marginTop: '28px' } }>