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