DataViews: Keep icon-only buttons on mobile for bulk actions (#72761)

lezama · lezama · oandregal · web-flow · commit 1ae1d72ad7d1 · 2025-10-29T07:39:02.000Z
Co-authored-by: lezama &lt;migueluy@git.wordpress.org&gt;
Co-authored-by: oandregal &lt;oandregal@git.wordpress.org&gt;
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+- DataViews: keep icon-only buttons on mobile for bulk actions. [#72761](https://github.com/WordPress/gutenberg/pull/72761)
 - DataForm: update spacing for regular and card layouts. [#72249](https://github.com/WordPress/gutenberg/pull/72249).
 - DataForm: Fix password field suffix alignment. [#72524](https://github.com/WordPress/gutenberg/pull/72524).
 
diff --git a/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx b/packages/dataviews/src/components/dataviews-bulk-actions/index.tsx
@@ -15,6 +15,7 @@ import { __, sprintf, _n } from '@wordpress/i18n';
 import { useMemo, useState, useRef, useContext } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -165,6 +166,22 @@ function ActionTrigger< Item >( {
 }: ActionTriggerProps< Item > ) {
 	const label =
 		typeof action.label === 'string' ? action.label : action.label( items );
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	if ( isMobile ) {
+		return (
+			<Button
+				disabled={ isBusy }
+				accessibleWhenDisabled
+				label={ label }
+				icon={ action.icon }
+				size="compact"
+				onClick={ onClick }
+				isBusy={ isBusy }
+			/>
+		);
+	}
+
 	return (
 		<Button
 			disabled={ isBusy }
@@ -308,6 +325,7 @@ function FooterContent< Item >( {
 		null
 	);
 	const footerContentRef = useRef< JSX.Element | null >( null );
+	const isMobile = useViewportMatch( 'medium', '<' );
 
 	const bulkActions = useMemo(
 		() => actions.filter( ( action ) => action.supportsBulk ),
@@ -334,13 +352,14 @@ function FooterContent< Item >( {
 			actions.filter( ( action ) => {
 				return (
 					action.supportsBulk &&
+					( ! isMobile || action.icon ) &&
 					selectedItems.some(
 						( item ) =>
 							! action.isEligible || action.isEligible( item )
 					)
 				);
 			} ),
-		[ actions, selectedItems ]
+		[ actions, selectedItems, isMobile ]
 	);
 	if ( ! actionInProgress ) {
 		if ( footerContentRef.current ) {
