Automatically render responsive controls based on default control

Continue to allow full customisation of the responsive controls, but by default render the responsive fields using the same markup as the default control. This avoids duplication when consuming the component.

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

@@ -8,23 +8,25 @@ import {
 } from '@wordpress/components';
 
 function ResponsiveBlockControl( props ) {
-	const { legend = '', property, toggleLabel, isOpen = false, onToggleResponsive, renderDefaultControl, renderResponsiveControl } = props;
+	const { legend = '', property, toggleLabel, isOpen = false, onToggleResponsive, renderDefaultControl, defaultLabel = __( 'All' ), devices = [ __( 'Desktop' ), __( 'Tablet' ), __( 'Mobile' ) ], renderResponsiveControls } = props;
 
-	if ( ! legend || ! property ) {
+	if ( ! legend || ! property || ! renderDefaultControl ) {
 		return null;
 	}
 
 	const toggleControlLabel = toggleLabel || sprintf( __( 'Manually adjust %s based on screensize.' ), property );
 
+	const responsiveControls = devices.map( ( deviceLabel ) => renderDefaultControl( deviceLabel ) );
+
 	return (
 
 		<fieldset className="block-editor-responsive-block-control">
 			<legend className="block-editor-responsive-block-control__label">{ legend }</legend>
 
 			<div className="block-editor-responsive-block-control__inner">
-				{ ! isOpen && renderDefaultControl() }
+				{ ! isOpen && renderDefaultControl( defaultLabel ) }
 
-				{ isOpen && renderResponsiveControl() }
+				{ isOpen && ( renderResponsiveControls ? renderResponsiveControls() : responsiveControls ) }
 
 				<ToggleControl
 					label={ toggleControlLabel }