Skip to content

Commit eafd620

Browse files
chrisvanpattenchrisvanpatten
authored
Introduce a ResizableBox component (#10347)
* Introduce a ResizableBox component and apply to image/spacer blocks * Add a shared class to all drag handles to simplify CSS selectors * Add additional documentation and an example * chore: Tweak docs * Add changelog comment and update readme * Removed a stray "the" * s/5.0.0/4.1.0/g
1 parent 7ec834b commit eafd620

File tree

13 files changed

+172
-125
lines changed

13 files changed

+172
-125
lines changed

‎edit-post/assets/stylesheets/_mixins.scss‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -326,29 +326,3 @@
326326
// icon standards.
327327
margin-right: 2px;
328328
}
329-
330-
331-
/**
332-
* Styles for resize handles
333-
*/
334-
335-
@mixin resize-handler__container() {
336-
display: none;
337-
338-
// The handle itself is a pseudo element, and will sit inside this larger
339-
// container size.
340-
width: $resize-handler-container-size;
341-
height: $resize-handler-container-size;
342-
padding: $grid-size-small;
343-
}
344-
345-
@mixin resize-handler__visible-handle() {
346-
display: block;
347-
content: "";
348-
width: $resize-handler-size;
349-
height: $resize-handler-size;
350-
border: 2px solid $white;
351-
border-radius: 50%;
352-
background: theme(primary);
353-
cursor: inherit;
354-
}

‎packages/block-library/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@
4141
"moment": "^2.22.1",
4242
"querystring": "^0.2.0",
4343
"querystringify": "^1.0.0",
44-
"re-resizable": "^4.7.1",
4544
"url": "^0.11.0"
4645
},
4746
"devDependencies": {

‎packages/block-library/src/image/edit.js‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
* External dependencies
33
*/
44
import classnames from 'classnames';
5-
import ResizableBox from 're-resizable';
65
import {
76
get,
87
isEmpty,
@@ -22,6 +21,7 @@ import {
2221
ButtonGroup,
2322
IconButton,
2423
PanelBody,
24+
ResizableBox,
2525
SelectControl,
2626
TextControl,
2727
TextareaControl,
@@ -446,21 +446,10 @@ class ImageEdit extends Component {
446446
}
447447
/* eslint-enable no-lonely-if */
448448

449-
// Removes the inline styles in the drag handles.
450-
const handleStylesOverrides = {
451-
width: null,
452-
height: null,
453-
top: null,
454-
right: null,
455-
bottom: null,
456-
left: null,
457-
};
458-
459449
return (
460450
<Fragment>
461451
{ getInspectorControls( imageWidth, imageHeight ) }
462452
<ResizableBox
463-
className="block-library-image__resizer"
464453
size={
465454
width && height ? {
466455
width,
@@ -472,16 +461,6 @@ class ImageEdit extends Component {
472461
minHeight={ minHeight }
473462
maxHeight={ maxWidth / ratio }
474463
lockAspectRatio
475-
handleClasses={ {
476-
right: 'block-library-image__resize-handler-right',
477-
bottom: 'block-library-image__resize-handler-bottom',
478-
left: 'block-library-image__resize-handler-left',
479-
} }
480-
handleStyles={ {
481-
right: handleStylesOverrides,
482-
bottom: handleStylesOverrides,
483-
left: handleStylesOverrides,
484-
} }
485464
enable={ {
486465
top: false,
487466
right: showRightHandle,

‎packages/block-library/src/image/editor.scss‎

Lines changed: 8 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -11,51 +11,20 @@
1111
}
1212

1313
// This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
14-
.wp-block-image {
15-
.block-library-image__resizer {
16-
display: inline-block;
14+
.wp-block-image .components-resizable-box__container {
15+
display: inline-block;
1716

18-
img {
19-
display: block;
20-
width: 100%;
21-
}
22-
}
23-
}
24-
25-
.block-library-image__resize-handler-right,
26-
.block-library-image__resize-handler-bottom,
27-
.block-library-image__resize-handler-left {
28-
@include resize-handler__container();
29-
30-
.wp-block-image.is-focused & {
17+
img {
3118
display: block;
32-
z-index: z-index(".block-library-image__resize-handlers");
19+
width: 100%;
3320
}
3421
}
3522

36-
// Draw the visible handle
37-
.block-library-image__resize-handler-right::before,
38-
.block-library-image__resize-handler-bottom::before,
39-
.block-library-image__resize-handler-left::before {
40-
@include resize-handler__visible-handle();
41-
}
42-
43-
/*!rtl:begin:ignore*/
44-
.block-library-image__resize-handler-right {
45-
top: calc(50% - #{$resize-handler-container-size / 2});
46-
right: calc(#{$resize-handler-container-size / 2} * -1);
47-
}
48-
49-
.block-library-image__resize-handler-left {
50-
top: calc(50% - #{$resize-handler-container-size / 2});
51-
left: calc(#{$resize-handler-container-size / 2} * -1);
52-
}
53-
54-
.block-library-image__resize-handler-bottom {
55-
bottom: calc(#{$resize-handler-container-size / 2} * -1);
56-
left: calc(50% - #{$resize-handler-container-size / 2});
23+
// Ensure the resize handles are visible when the image is focused.
24+
.wp-block-image.is-focused .components-resizable-box__handle {
25+
display: block;
26+
z-index: z-index(".block-library-image__resize-handlers");
5727
}
58-
/*!rtl:end:ignore*/
5928

6029
.editor-block-list__block[data-type="core/image"][data-align="center"] {
6130
.wp-block-image {

‎packages/block-library/src/spacer/editor.scss‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,3 @@
1-
.block-library-spacer__resize-container.is-selected {
2-
.block-library-spacer__resize-handler-bottom {
3-
display: block;
4-
}
5-
}
6-
71
.block-library-spacer__resize-container.is-selected {
82
background: $light-gray-200;
93
}
10-
11-
.block-library-spacer__resize-handler-bottom {
12-
@include resize-handler__container();
13-
14-
// Offset the handle container's position.
15-
position: absolute;
16-
bottom: calc(#{$resize-handler-container-size / 2} * -1);
17-
left: calc(50% - #{$resize-handler-container-size / 2});
18-
}
19-
20-
.block-library-spacer__resize-handler-bottom::before {
21-
@include resize-handler__visible-handle();
22-
}

‎packages/block-library/src/spacer/index.js‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/**
22
* External dependencies
33
*/
4-
import ResizableBox from 're-resizable';
54
import classnames from 'classnames';
65

76
/**
@@ -10,7 +9,7 @@ import classnames from 'classnames';
109
import { Fragment } from '@wordpress/element';
1110
import { __ } from '@wordpress/i18n';
1211
import { InspectorControls } from '@wordpress/editor';
13-
import { BaseControl, PanelBody } from '@wordpress/components';
12+
import { BaseControl, PanelBody, ResizableBox } from '@wordpress/components';
1413
import { withInstanceId } from '@wordpress/compose';
1514

1615
export const name = 'core/spacer';
@@ -36,16 +35,6 @@ export const settings = {
3635
const { height } = attributes;
3736
const id = `block-spacer-height-input-${ instanceId }`;
3837

39-
// Removes the inline styles in the drag handles.
40-
const handleStylesOverrides = {
41-
width: null,
42-
height: null,
43-
top: null,
44-
right: null,
45-
bottom: null,
46-
left: null,
47-
};
48-
4938
return (
5039
<Fragment>
5140
<ResizableBox
@@ -57,12 +46,6 @@ export const settings = {
5746
height,
5847
} }
5948
minHeight="20"
60-
handleClasses={ {
61-
bottom: 'block-library-spacer__resize-handler-bottom',
62-
} }
63-
handleStyles={ {
64-
bottom: handleStylesOverrides,
65-
} }
6649
enable={ {
6750
top: false,
6851
right: false,

‎packages/components/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
## 4.1.0 (Unreleased)
2+
3+
### New Feature
4+
5+
- Added a new `ResizableBox` component.
6+
17
## 4.0.0 (2018-09-30)
28

39
### Breaking Change

‎packages/components/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"memize": "^1.0.5",
4141
"moment": "^2.22.1",
4242
"mousetrap": "^1.6.2",
43+
"re-resizable": "^4.7.1",
4344
"react-click-outside": "^2.3.1",
4445
"react-color": "^2.13.4",
4546
"react-datepicker": "^1.4.1",

‎packages/components/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export { default as Popover } from './popover';
4343
export { default as QueryControls } from './query-controls';
4444
export { default as RadioControl } from './radio-control';
4545
export { default as RangeControl } from './range-control';
46+
export { default as ResizableBox } from './resizable-box';
4647
export { default as ResponsiveWrapper } from './responsive-wrapper';
4748
export { default as SandBox } from './sandbox';
4849
export { default as SelectControl } from './select-control';

‎packages/components/src/resizable-box/README.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# ResizableBox
2+
3+
ResizableBox is a wrapper around the [re-resizable package](https://github.com/bokuweb/re-resizable) with pre-defined classes and styles.
4+
5+
## Usage
6+
7+
Most options are passed directly through to [re-resizable](https://github.com/bokuweb/re-resizable) so you may wish to refer to their documentation. The primary differences in this component are that we set `handleClasses` (to use custom class names) and pass some null values to `handleStyles` (to unset some inline styles).
8+
9+
The example below shows how you might use `ResizableBox` to set a width and height inside a block's `edit` component.
10+
11+
```jsx
12+
import { ResizableBox } from '@wordpress/components';
13+
14+
const Edit = ( props ) => {
15+
const {
16+
attributes: {
17+
height,
18+
width,
19+
},
20+
setAttributes,
21+
toggleSelection,
22+
} = props;
23+
24+
return (
25+
<ResizableBox
26+
size={ {
27+
height,
28+
width,
29+
} }
30+
minHeight="50"
31+
minWidth="50"
32+
enable={ {
33+
top: false,
34+
right: true,
35+
bottom: true,
36+
left: false,
37+
topRight: false,
38+
bottomRight: true,
39+
bottomLeft: false,
40+
topLeft: false,
41+
} }
42+
onResizeStop={ ( event, direction, elt, delta ) => {
43+
setAttributes( {
44+
height: parseInt( height + delta.height, 10 ),
45+
width: parseInt( width + delta.width, 10 ),
46+
} );
47+
toggleSelection( true );
48+
} }
49+
onResizeStart={ () => {
50+
toggleSelection( false );
51+
} }
52+
/>
53+
);
54+
}
55+
```

0 commit comments

Comments
 (0)