-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.js
42 lines (30 loc) · 1.25 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import {
ToggleControl,
} from '@wordpress/components';
function ResponsiveBlockControl( props ) {
const { legend = '', property, toggleLabel, isOpen = false, onToggleResponsive, renderDefaultControl, defaultLabel = __( 'All' ), devices = [ __( 'Desktop' ), __( 'Tablet' ), __( 'Mobile' ) ], renderResponsiveControls } = props;
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( defaultLabel ) }
{ isOpen && ( renderResponsiveControls ? renderResponsiveControls() : responsiveControls ) }
<ToggleControl
label={ toggleControlLabel }
checked={ isOpen }
onChange={ onToggleResponsive }
/>
</div>
</fieldset>
);
}
export default ResponsiveBlockControl;