1 |
|
2 |
|
3 |
|
4 | import classnames from 'classnames';
|
5 |
|
6 |
|
7 |
|
8 |
|
9 | import { Fragment, useState } from '@wordpress/element';
|
10 | import { __ } from '@wordpress/i18n';
|
11 | import { InspectorControls } from '@wordpress/block-editor';
|
12 | import { BaseControl, PanelBody, ResizableBox, G, SVG, Path } from '@wordpress/components';
|
13 | import { withInstanceId } from '@wordpress/compose';
|
14 |
|
15 | export const name = 'core/spacer';
|
16 |
|
17 | export const settings = {
|
18 | title: __( 'Spacer' ),
|
19 |
|
20 | description: __( 'Add white space between blocks and customize its height.' ),
|
21 |
|
22 | icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><G><Path d="M13 4v2h3.59L6 16.59V13H4v7h7v-2H7.41L18 7.41V11h2V4h-7" /></G></SVG>,
|
23 |
|
24 | category: 'layout',
|
25 |
|
26 | attributes: {
|
27 | height: {
|
28 | type: 'number',
|
29 | default: 100,
|
30 | },
|
31 | },
|
32 |
|
33 | edit: withInstanceId(
|
34 | ( { attributes, isSelected, setAttributes, toggleSelection, instanceId } ) => {
|
35 | const { height } = attributes;
|
36 | const id = `block-spacer-height-input-${ instanceId }`;
|
37 | const [ inputHeightValue, setInputHeightValue ] = useState( height );
|
38 |
|
39 | return (
|
40 | <Fragment>
|
41 | <ResizableBox
|
42 | className={ classnames(
|
43 | 'block-library-spacer__resize-container',
|
44 | { 'is-selected': isSelected }
|
45 | ) }
|
46 | size={ {
|
47 | height,
|
48 | } }
|
49 | minHeight="20"
|
50 | enable={ {
|
51 | top: false,
|
52 | right: false,
|
53 | bottom: true,
|
54 | left: false,
|
55 | topRight: false,
|
56 | bottomRight: false,
|
57 | bottomLeft: false,
|
58 | topLeft: false,
|
59 | } }
|
60 | onResizeStop={ ( event, direction, elt, delta ) => {
|
61 | const spacerHeight = parseInt( height + delta.height, 10 );
|
62 | setAttributes( {
|
63 | height: spacerHeight,
|
64 | } );
|
65 | setInputHeightValue( spacerHeight );
|
66 | toggleSelection( true );
|
67 | } }
|
68 | onResizeStart={ () => {
|
69 | toggleSelection( false );
|
70 | } }
|
71 | />
|
72 | <InspectorControls>
|
73 | <PanelBody title={ __( 'Spacer Settings' ) }>
|
74 | <BaseControl label={ __( 'Height in pixels' ) } id={ id }>
|
75 | <input
|
76 | type="number"
|
77 | id={ id }
|
78 | onChange={ ( event ) => {
|
79 | let spacerHeight = parseInt( event.target.value, 10 );
|
80 | setInputHeightValue( spacerHeight );
|
81 | if ( isNaN( spacerHeight ) ) {
|
82 | // Set spacer height to default size and input box to empty string
|
83 | setInputHeightValue( '' );
|
84 | spacerHeight = 100;
|
85 | } else if ( spacerHeight < 20 ) {
|
86 | // Set spacer height to minimum size
|
87 | spacerHeight = 20;
|
88 | }
|
89 | setAttributes( {
|
90 | height: spacerHeight,
|
91 | } );
|
92 | } }
|
93 | value={ inputHeightValue }
|
94 | min="20"
|
95 | step="10"
|
96 | />
|
97 | </BaseControl>
|
98 | </PanelBody>
|
99 | </InspectorControls>
|
100 | </Fragment>
|
101 | );
|
102 | }
|
103 | ),
|
104 |
|
105 | save( { attributes } ) {
|
106 | return <div style={ { height: attributes.height } } aria-hidden />;
|
107 | },
|
108 | };
|