-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
edit.js
72 lines (68 loc) · 1.7 KB
/
edit.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
import { BaseControl, PanelBody, ResizableBox } from '@wordpress/components';
import { withInstanceId } from '@wordpress/compose';
const SpacerEdit = ( { attributes, isSelected, setAttributes, toggleSelection, instanceId } ) => {
const { height } = attributes;
const id = `block-spacer-height-input-${ instanceId }`;
return (
<Fragment>
<ResizableBox
className={ classnames(
'block-library-spacer__resize-container',
{ 'is-selected': isSelected },
) }
size={ {
height,
} }
minHeight="20"
enable={ {
top: false,
right: false,
bottom: true,
left: false,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false,
} }
onResizeStop={ ( event, direction, elt, delta ) => {
setAttributes( {
height: parseInt( height + delta.height, 10 ),
} );
toggleSelection( true );
} }
onResizeStart={ () => {
toggleSelection( false );
} }
/>
<InspectorControls>
<PanelBody title={ __( 'Spacer Settings' ) }>
<BaseControl label={ __( 'Height in pixels' ) } id={ id }>
<input
type="number"
id={ id }
onChange={ ( event ) => {
setAttributes( {
height: parseInt( event.target.value, 10 ),
} );
} }
value={ height }
min="20"
step="10"
/>
</BaseControl>
</PanelBody>
</InspectorControls>
</Fragment>
);
};
export default withInstanceId( SpacerEdit );