Adds custom hook useResponsiveBlockControl

Attempt to relieve some of the overhead associated with having ResponsiveBlockControl be a fully controlled component. By consuming this hook, a developer can wire up a default handler for toggling responsive mode without having to worry about creating their own useState-based hooks.

packages/block-editor/src/components/index.js

@@ -33,6 +33,7 @@ export { default as MediaUploadCheck } from './media-upload/check';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as PlainText } from './plain-text';
 export { default as __experimentalResponsiveBlockControl } from './responsive-block-control';
+export { default as __experimentalUseResponsiveBlockControl } from './responsive-block-control/use-responsive-block-control';
 export {
 	default as RichText,
 	RichTextShortcut,

packages/block-editor/src/components/responsive-block-control/test/index.js

@@ -8,7 +8,7 @@ import { uniqueId } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Fragment, useState } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
 
 import {
 	SelectControl,
@@ -18,6 +18,7 @@ import {
  * Internal dependencies
  */
 import ResponsiveBlockControl from '../index';
+import useResponsiveBlockControl from '../use-responsive-block-control';
 
 let container = null;
 beforeEach( () => {
@@ -254,16 +255,14 @@ describe( 'Default and Responsive modes', () => {
 
 	it( 'should switch between default and responsive modes when interacting with toggle control', () => {
 		const ResponsiveBlockControlConsumer = () => {
-			const [ isResponsive, setIsResponsive ] = useState( false );
+			const [ isResponsive, onIsResponsiveChange ] = useResponsiveBlockControl();
 
 			return (
 				<ResponsiveBlockControl
 					title="Padding"
 					property="padding"
 					isResponsive={ isResponsive }
-					onIsResponsiveChange={ () => {
-						setIsResponsive( ! isResponsive );
-					} }
+					onIsResponsiveChange={ onIsResponsiveChange }
 					renderDefaultControl={ renderTestDefaultControlComponent }
 				/>
 			);

packages/block-editor/src/components/responsive-block-control/use-responsive-block-control.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+const useResponsiveBlockControl = ( initialState = false ) => {
+	const [ isResponsive, setIsResponsive ] = useState( initialState );
+
+	const onIsResponsiveChange = () => {
+		setIsResponsive( ! isResponsive );
+	};
+
+	return [
+		isResponsive,
+		onIsResponsiveChange,
+	];
+};
+
+export default useResponsiveBlockControl;

packages/block-library/src/group/edit.js

@@ -15,14 +15,9 @@ import {
 	PanelColorSettings,
 	withColors,
 	__experimentalResponsiveBlockControl as ResponsiveBlockControl,
+	__experimentalUseResponsiveBlockControl as useResponsiveBlockControl,
 } from '@wordpress/block-editor';
 
-import {
-
-	useState,
-
-} from '@wordpress/element';
-
 import {
 	PanelBody,
 	SelectControl,
@@ -34,7 +29,8 @@ function GroupEdit( {
 	backgroundColor,
 	hasInnerBlocks,
 } ) {
-	const [ isResponsive, setIsResponsive ] = useState( false );
+	const [ isResponsive, onIsResponsiveChange ] = useResponsiveBlockControl();
+
 	const styles = {
 		backgroundColor: backgroundColor.color,
 	};
@@ -78,9 +74,7 @@ function GroupEdit( {
 						title="Padding"
 						property="padding"
 						isResponsive={ isResponsive }
-						onIsResponsiveChange={ () => {
-							setIsResponsive( ! isResponsive );
-						} }
+						onIsResponsiveChange={ onIsResponsiveChange }
 						renderDefaultControl={ ( labelComponent ) => (
 							<SelectControl
 								label={ labelComponent }