@wordpress/block-editor 15.23.0 → 16.0.0

package/src/components/block-visibility/test/use-block-visibility.js

@@ -6,11 +6,12 @@ import { renderHook } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
+import { useMediaQuery } from '@wordpress/compose';
 
 // Mock WordPress dependencies before importing the hook
 jest.mock( '@wordpress/compose', () => ( {
-	useViewportMatch: jest.fn(),
+	...jest.requireActual( '@wordpress/compose' ),
+	useMediaQuery: jest.fn(),
 } ) );
 
 /**
@@ -20,17 +21,17 @@ import useBlockVisibility from '../use-block-visibility';
 
 describe( 'useBlockVisibility', () => {
 	// Helper function to set up viewport matches
-	const setupViewport = ( { isMobileOrLarger, isMediumOrLarger } ) => {
+	const setupViewport = ( { isMobileViewport, isTabletViewport } ) => {
 		if (
-			isMobileOrLarger !== undefined &&
-			isMediumOrLarger !== undefined
+			isMobileViewport !== undefined &&
+			isTabletViewport !== undefined
 		) {
-			useViewportMatch
-				.mockReturnValueOnce( isMobileOrLarger )
-				.mockReturnValueOnce( isMediumOrLarger );
+			useMediaQuery
+				.mockReturnValueOnce( isMobileViewport )
+				.mockReturnValueOnce( isTabletViewport );
 		} else {
-			useViewportMatch.mockReturnValue(
-				isMobileOrLarger ?? isMediumOrLarger ?? true
+			useMediaQuery.mockReturnValue(
+				isMobileViewport ?? isTabletViewport ?? false
 			);
 		}
 	};
@@ -42,7 +43,7 @@ describe( 'useBlockVisibility', () => {
 
 	describe( 'Device type overrides', () => {
 		it( 'should return true when deviceType is Mobile and block is hidden on mobile', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -55,7 +56,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return false when deviceType is Mobile and block is visible on mobile', () => {
-			setupViewport( { isMobileOrLarger: false } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -74,7 +75,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return true when deviceType is Tablet and block is hidden on tablet', () => {
-			setupViewport( { isMobileOrLarger: false } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -88,8 +89,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should use actual viewport detection when deviceType is Desktop', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: true,
+				isMobileViewport: false,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>
@@ -106,8 +107,8 @@ describe( 'useBlockVisibility', () => {
 	describe( 'Viewport detection with Desktop deviceType', () => {
 		it( 'should return true when on mobile viewport and block is hidden on mobile', () => {
 			setupViewport( {
-				isMobileOrLarger: false,
-				isMediumOrLarger: false,
+				isMobileViewport: true,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>
@@ -122,8 +123,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should return false when on mobile viewport and block is visible on mobile', () => {
 			setupViewport( {
-				isMobileOrLarger: false,
-				isMediumOrLarger: false,
+				isMobileViewport: true,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>
@@ -144,8 +145,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should return true when on tablet viewport and block is hidden on tablet', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: false,
+				isMobileViewport: false,
+				isTabletViewport: true,
 			} );
 
 			const { result } = renderHook( () =>
@@ -160,8 +161,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should return false when on tablet viewport and block is visible on tablet', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: false,
+				isMobileViewport: false,
+				isTabletViewport: true,
 			} );
 
 			const { result } = renderHook( () =>
@@ -182,8 +183,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should return true when on desktop viewport and block is hidden on desktop', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: true,
+				isMobileViewport: false,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>
@@ -198,8 +199,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should return false when on desktop viewport and block is visible on desktop', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: true,
+				isMobileViewport: false,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>
@@ -217,11 +218,103 @@ describe( 'useBlockVisibility', () => {
 
 			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
 		} );
+
+		it( 'should use custom viewport breakpoints for viewport detection', () => {
+			setupViewport( {
+				isMobileViewport: false,
+				isTabletViewport: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { viewport: { tablet: false } },
+					deviceType: 'desktop',
+					viewportSettings: {
+						mobile: '640px',
+						tablet: '960px',
+					},
+				} )
+			);
+
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				1,
+				'(width <= 640px)',
+				window
+			);
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				2,
+				'(640px < width <= 960px)',
+				window
+			);
+			expect( result.current.currentViewport ).toBe( 'tablet' );
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+
+		it( 'should use tablet viewport detection for a single tablet breakpoint', () => {
+			setupViewport( {
+				isMobileViewport: false,
+				isTabletViewport: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { viewport: { tablet: false } },
+					deviceType: 'desktop',
+					viewportSettings: {
+						tablet: '64rem',
+					},
+				} )
+			);
+
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				1,
+				undefined,
+				window
+			);
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				2,
+				'(width <= 64rem)',
+				window
+			);
+			expect( result.current.currentViewport ).toBe( 'tablet' );
+			expect( result.current.isBlockCurrentlyHidden ).toBe( true );
+		} );
+
+		it( 'should not use tablet viewport detection when the tablet breakpoint is not larger than mobile', () => {
+			setupViewport( {
+				isMobileViewport: false,
+				isTabletViewport: true,
+			} );
+
+			const { result } = renderHook( () =>
+				useBlockVisibility( {
+					blockVisibility: { viewport: { tablet: false } },
+					deviceType: 'desktop',
+					viewportSettings: {
+						mobile: '960px',
+						tablet: '640px',
+					},
+				} )
+			);
+
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				1,
+				'(width <= 960px)',
+				window
+			);
+			expect( useMediaQuery ).toHaveBeenNthCalledWith(
+				2,
+				undefined,
+				window
+			);
+			expect( result.current.currentViewport ).toBe( 'desktop' );
+			expect( result.current.isBlockCurrentlyHidden ).toBe( false );
+		} );
 	} );
 
 	describe( 'Block visibility (hidden everywhere)', () => {
 		it( 'should return true when blockVisibility is false', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -234,7 +327,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return false when blockVisibility is true and no viewport restrictions', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -247,7 +340,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return false when blockVisibility is undefined', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -260,7 +353,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return true when blockVisibility is false regardless of viewport settings', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -275,7 +368,7 @@ describe( 'useBlockVisibility', () => {
 
 	describe( 'Edge cases', () => {
 		it( 'should return false when no visibility settings are defined', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -288,7 +381,7 @@ describe( 'useBlockVisibility', () => {
 		} );
 
 		it( 'should return false when blockVisibility is undefined', () => {
-			setupViewport( { isMobileOrLarger: true } );
+			setupViewport( { isMobileViewport: false } );
 
 			const { result } = renderHook( () =>
 				useBlockVisibility( {
@@ -302,8 +395,8 @@ describe( 'useBlockVisibility', () => {
 
 		it( 'should default to desktop deviceType when not provided', () => {
 			setupViewport( {
-				isMobileOrLarger: true,
-				isMediumOrLarger: true,
+				isMobileViewport: false,
+				isTabletViewport: false,
 			} );
 
 			const { result } = renderHook( () =>

package/src/components/block-visibility/test/utils.js

@@ -2,11 +2,22 @@
  * Internal dependencies
  */
 import {
+	getBlockVisibilityViewportEntries,
 	getViewportCheckboxState,
 	getHideEverywhereCheckboxState,
 } from '../utils';
 
 describe( 'block-visibility utils', () => {
+	describe( 'getBlockVisibilityViewportEntries', () => {
+		it( 'returns the configured viewport for a single breakpoint', () => {
+			expect(
+				getBlockVisibilityViewportEntries( { tablet: '64rem' } ).map(
+					( [ key ] ) => key
+				)
+			).toEqual( [ 'desktop', 'tablet' ] );
+		} );
+	} );
+
 	describe( 'getViewportCheckboxState', () => {
 		it( 'should return false for empty or invalid input', () => {
 			expect( getViewportCheckboxState( [], 'mobile' ) ).toBe( false );

package/src/components/block-visibility/use-block-visibility.js

@@ -1,31 +1,47 @@
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
+import { useMediaQuery } from '@wordpress/compose';
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
  */
 import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
+import { unlock } from '../../lock-unlock';
+
+const { getViewportBreakpoints } = unlock( globalStylesEnginePrivateApis );
 
 /**
  * Returns information about the current block visibility state.
  *
- * @param {Object}         options                 Parameters to avoid extra store subscriptions.
- * @param {Object|boolean} options.blockVisibility Block visibility metadata.
- * @param {string}         options.deviceType      Current device type ('desktop', 'tablet', 'mobile').
- * @param {Window?}        options.view            Window instance in which to perform viewport matching
+ * @param {Object}         options                  Parameters to avoid extra store subscriptions.
+ * @param {Object|boolean} options.blockVisibility  Block visibility metadata.
+ * @param {string}         options.deviceType       Current device type ('desktop', 'tablet', 'mobile').
+ * @param {Object}         options.viewportSettings Viewport breakpoint settings.
+ * @param {Window?}        options.view             Window instance in which to perform viewport matching
  * @return {Object} Object with `isBlockCurrentlyHidden` (boolean) and `currentViewport` (string) properties.
  */
 export default function useBlockVisibility( options = {} ) {
 	const {
 		blockVisibility = undefined,
 		deviceType = BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+		viewportSettings,
 		view = window,
 	} = options;
 
-	const isLargerThanMobile = useViewportMatch( 'mobile', '>=', view ); // >= 480px
-	const isLargerThanTablet = useViewportMatch( 'medium', '>=', view ); // >= 782px
+	const viewportBreakpoints = getViewportBreakpoints( viewportSettings );
+	const mobileMediaQuery = viewportBreakpoints.mobile
+		? `(width <= ${ viewportBreakpoints.mobile })`
+		: undefined;
+	const isMobileViewport = useMediaQuery( mobileMediaQuery, view );
+	let tabletMediaQuery;
+	if ( viewportBreakpoints.tablet ) {
+		tabletMediaQuery = viewportBreakpoints.mobile
+			? `(${ viewportBreakpoints.mobile } < width <= ${ viewportBreakpoints.tablet })`
+			: `(width <= ${ viewportBreakpoints.tablet })`;
+	}
+	const isTabletViewport = useMediaQuery( tabletMediaQuery, view );
 
 	/*
 	 * Priority:
@@ -33,13 +49,19 @@ export default function useBlockVisibility( options = {} ) {
 	 * 2. Actual window size (Desktop mode) - uses viewport detection
 	 */
 	let currentViewport;
-	if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.key ) {
+	if (
+		deviceType === BLOCK_VISIBILITY_VIEWPORTS.mobile.key &&
+		viewportBreakpoints.mobile
+	) {
 		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
-	} else if ( deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.key ) {
+	} else if (
+		deviceType === BLOCK_VISIBILITY_VIEWPORTS.tablet.key &&
+		viewportBreakpoints.tablet
+	) {
 		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
-	} else if ( ! isLargerThanMobile ) {
+	} else if ( isMobileViewport ) {
 		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.mobile.key;
-	} else if ( isLargerThanMobile && ! isLargerThanTablet ) {
+	} else if ( isTabletViewport && viewportBreakpoints.tablet ) {
 		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.tablet.key;
 	} else {
 		currentViewport = BLOCK_VISIBILITY_VIEWPORTS.desktop.key;

package/src/components/block-visibility/utils.js

@@ -1,12 +1,32 @@
 /**
  * WordPress dependencies
  */
+import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { BLOCK_VISIBILITY_VIEWPORT_ENTRIES } from './constants';
+import {
+	BLOCK_VISIBILITY_VIEWPORT_ENTRIES,
+	BLOCK_VISIBILITY_VIEWPORTS,
+} from './constants';
+import { unlock } from '../../lock-unlock';
+
+const { getViewportBreakpoints } = unlock( globalStylesEnginePrivateApis );
+
+export function getBlockVisibilityViewportEntries( viewportSettings ) {
+	const breakpoints = getViewportBreakpoints( viewportSettings );
+
+	// Desktop has no breakpoint, so only filter mobile/tablet by configured viewport support.
+	return BLOCK_VISIBILITY_VIEWPORT_ENTRIES.filter(
+		( [ viewport ] ) =>
+			( viewport !== BLOCK_VISIBILITY_VIEWPORTS.tablet.key ||
+				breakpoints.tablet !== undefined ) &&
+			( viewport !== BLOCK_VISIBILITY_VIEWPORTS.mobile.key ||
+				breakpoints.mobile !== undefined )
+	);
+}
 
 /**
  * Checks if a block is hidden for a specific viewport.
@@ -110,10 +130,11 @@ export function getHideEverywhereCheckboxState( blocks ) {
 /**
  * Get a human-readable label describing which viewports a block is hidden on.
  *
- * @param {boolean|Object} blockVisibility The block's visibility metadata.
+ * @param {boolean|Object} blockVisibility  The block's visibility metadata.
+ * @param {Object}         viewportSettings Viewport breakpoint settings.
  * @return {string|null} A descriptive label, or null if the block is not hidden.
  */
-export function getBlockVisibilityLabel( blockVisibility ) {
+export function getBlockVisibilityLabel( blockVisibility, viewportSettings ) {
 	// Not hidden at all
 	if ( ! blockVisibility && blockVisibility !== false ) {
 		return null;
@@ -126,9 +147,13 @@ export function getBlockVisibilityLabel( blockVisibility ) {
 
 	if ( blockVisibility?.viewport ) {
 		// Hidden on specific viewports - list them
-		const hiddenViewports = BLOCK_VISIBILITY_VIEWPORT_ENTRIES.filter(
-			( [ key ] ) => blockVisibility.viewport?.[ key ] === false
-		).map( ( [ , viewport ] ) => viewport.label );
+		const hiddenViewports = getBlockVisibilityViewportEntries(
+			viewportSettings
+		)
+			.filter(
+				( [ key ] ) => blockVisibility.viewport?.[ key ] === false
+			)
+			.map( ( [ , viewport ] ) => viewport.label );
 
 		if ( hiddenViewports.length > 0 ) {
 			return sprintf(

package/src/components/block-visibility/viewport-menu-item.js

@@ -11,8 +11,10 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
  */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useSettings } from '../use-settings';
 
 export default function BlockVisibilityViewportMenuItem( { clientIds } ) {
+	const [ blockVisibility ] = useSettings( 'blockVisibility.allowEditing' );
 	const { areBlocksHiddenAnywhere, shortcut } = useSelect(
 		( select ) => {
 			const { isBlockHiddenAnywhere } = unlock(
@@ -31,7 +33,14 @@ export default function BlockVisibilityViewportMenuItem( { clientIds } ) {
 		},
 		[ clientIds ]
 	);
-	const { showViewportModal } = unlock( useDispatch( blockEditorStore ) );
+	const dispatch = useDispatch( blockEditorStore );
+
+	if ( blockVisibility === false ) {
+		return null;
+	}
+
+	const { showViewportModal } = unlock( dispatch );
+
 	return (
 		<MenuItem
 			onClick={ () => showViewportModal( clientIds ) }

package/src/components/block-visibility/viewport-toolbar.js

@@ -13,9 +13,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useSettings } from '../use-settings';
 
 export default function BlockVisibilityViewportToolbar( { clientIds } ) {
 	const hasBlockVisibilityButtonShownRef = useRef( false );
+	const [ blockVisibility ] = useSettings( 'blockVisibility.allowEditing' );
 	const { canToggleBlockVisibility, areBlocksHiddenAnywhere } = useSelect(
 		( select ) => {
 			const { getBlocksByClientId, getBlockName, isBlockHiddenAnywhere } =
@@ -52,6 +54,10 @@ export default function BlockVisibilityViewportToolbar( { clientIds } ) {
 		}
 	}, [ areBlocksHiddenAnywhere ] );
 
+	if ( blockVisibility === false ) {
+		return null;
+	}
+
 	if (
 		! areBlocksHiddenAnywhere &&
 		! hasBlockVisibilityButtonShownRef.current

package/src/components/block-visibility/viewport-visibility-info.js

@@ -32,6 +32,7 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 	const {
 		currentBlockVisibility,
 		selectedDeviceType,
+		viewportSettings,
 		hasParentHiddenEverywhere,
 	} = useSelect(
 		( select ) => {
@@ -43,13 +44,15 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 				isBlockParentHiddenEverywhere,
 				getSettings,
 			} = unlock( select( blockEditorStore ) );
+			const settings = getSettings();
 
 			return {
 				currentBlockVisibility:
 					getBlockAttributes( clientId )?.metadata?.blockVisibility,
 				selectedDeviceType:
-					getSettings()?.[ deviceTypeKey ]?.toLowerCase() ||
+					settings?.[ deviceTypeKey ]?.toLowerCase() ||
 					BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+				viewportSettings: settings?.__experimentalFeatures?.viewport,
 				hasParentHiddenEverywhere:
 					isBlockParentHiddenEverywhere( clientId ),
 			};
@@ -66,6 +69,7 @@ export default function ViewportVisibilityInfo( { clientId } ) {
 	const { isBlockCurrentlyHidden, currentViewport } = useBlockVisibility( {
 		blockVisibility: currentBlockVisibility,
 		deviceType: selectedDeviceType,
+		viewportSettings,
 		view: canvasView,
 	} );
 

package/src/components/button-block-appender/content.scss

@@ -9,20 +9,14 @@
 	width: 100%;
 	height: auto;
 	color: $gray-900;
-	box-shadow: inset 0 0 0 $border-width $gray-900;
+	border-color: currentColor;
 
 	.is-dark-theme & {
 		color: $light-gray-placeholder;
-		box-shadow: inset 0 0 0 $border-width $light-gray-placeholder;
 	}
 
 	&:hover {
 		color: var(--wp-admin-theme-color);
-		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-
-	&:focus {
-		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 	}
 
 	&:active {

package/src/components/child-layout-control/index.js

@@ -178,7 +178,6 @@ function FlexControls( {
 			panelId={ panelId }
 		>
 			<ToggleGroupControl
-				size="__unstable-large"
 				label={ childLayoutOrientation( parentLayout ) }
 				value={ flexControlValue }
 				help={ helpText( flexControlValue, parentLayout ) }
@@ -225,7 +224,6 @@ function FlexControls( {
 			</ToggleGroupControl>
 			{ hasFlexSizeValue && (
 				<UnitControl
-					size="__unstable-large"
 					units={ units }
 					onChange={ ( value ) => {
 						onChange( {
@@ -308,7 +306,6 @@ function GridControls( {
 			>
 				<FlexItem style={ { width: '50%' } }>
 					<InputControl
-						size="__unstable-large"
 						label={ __( 'Column span' ) }
 						type="number"
 						onChange={ ( value ) => {
@@ -333,7 +330,6 @@ function GridControls( {
 				</FlexItem>
 				<FlexItem style={ { width: '50%' } }>
 					<InputControl
-						size="__unstable-large"
 						label={ __( 'Row span' ) }
 						type="number"
 						onChange={ ( value ) => {
@@ -371,7 +367,6 @@ function GridControls( {
 				>
 					<FlexItem style={ { width: '50%' } }>
 						<InputControl
-							size="__unstable-large"
 							label={ __( 'Column' ) }
 							type="number"
 							onChange={ ( value ) => {
@@ -406,7 +401,6 @@ function GridControls( {
 					</FlexItem>
 					<FlexItem style={ { width: '50%' } }>
 						<InputControl
-							size="__unstable-large"
 							label={ __( 'Row' ) }
 							type="number"
 							onChange={ ( value ) => {