Skip to content

Introduce a ResizableBox component #10347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrisvanpatten merged 7 commits into from
Oct 7, 2018
Merged

Introduce a ResizableBox component #10347

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aa1acad
Introduce a ResizableBox component and apply to image/spacer blocks
chrisvanpatten Oct 4, 2018
c847d00
Add a shared class to all drag handles to simplify CSS selectors
chrisvanpatten Oct 4, 2018
c06e8e9
Add additional documentation and an example
chrisvanpatten Oct 4, 2018
3d00599
chore: Tweak docs
tofumatt Oct 5, 2018
d3dc6d7
Add changelog comment and update readme
chrisvanpatten Oct 5, 2018
7f07c4e
Removed a stray "the"
chrisvanpatten Oct 5, 2018
29afb11
s/5.0.0/4.1.0/g
chrisvanpatten Oct 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Introduce a ResizableBox component and apply to image/spacer blocks
  • Loading branch information
@chrisvanpatten
chrisvanpatten committed Oct 6, 2018
commit aa1acadbfe1570631ea233a480e495b76af4407c
26 changes: 0 additions & 26 deletions edit-post/assets/stylesheets/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,29 +326,3 @@
// icon standards.
margin-right: 2px;
}


/**
* Styles for resize handles
*/

@mixin resize-handler__container() {
display: none;

// The handle itself is a pseudo element, and will sit inside this larger
// container size.
width: $resize-handler-container-size;
height: $resize-handler-container-size;
padding: $grid-size-small;
}

@mixin resize-handler__visible-handle() {
display: block;
content: "";
width: $resize-handler-size;
height: $resize-handler-size;
border: 2px solid $white;
border-radius: 50%;
background: theme(primary);
cursor: inherit;
}
1 change: 0 additions & 1 deletion packages/block-library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@
"moment": "^2.22.1",
"querystring": "^0.2.0",
"querystringify": "^1.0.0",
"re-resizable": "^4.7.1",
"url": "^0.11.0"
},
"devDependencies": {
Expand Down
23 changes: 1 addition & 22 deletions packages/block-library/src/image/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* External dependencies
*/
import classnames from 'classnames';
import ResizableBox from 're-resizable';
import {
get,
isEmpty,
Expand All @@ -22,6 +21,7 @@ import {
ButtonGroup,
IconButton,
PanelBody,
ResizableBox,
SelectControl,
TextControl,
TextareaControl,
Expand Down Expand Up @@ -446,21 +446,10 @@ class ImageEdit extends Component {
}
/* eslint-enable no-lonely-if */

// Removes the inline styles in the drag handles.
const handleStylesOverrides = {
width: null,
height: null,
top: null,
right: null,
bottom: null,
left: null,
};

return (
<Fragment>
{ getInspectorControls( imageWidth, imageHeight ) }
<ResizableBox
className="block-library-image__resizer"
size={
width && height ? {
width,
Expand All @@ -472,16 +461,6 @@ class ImageEdit extends Component {
minHeight={ minHeight }
maxHeight={ maxWidth / ratio }
lockAspectRatio
handleClasses={ {
right: 'block-library-image__resize-handler-right',
bottom: 'block-library-image__resize-handler-bottom',
left: 'block-library-image__resize-handler-left',
} }
handleStyles={ {
right: handleStylesOverrides,
bottom: handleStylesOverrides,
left: handleStylesOverrides,
} }
enable={ {
top: false,
right: showRightHandle,
Expand Down
40 changes: 7 additions & 33 deletions packages/block-library/src/image/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

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

img {
Expand All @@ -22,40 +22,14 @@
}
}

.block-library-image__resize-handler-right,
.block-library-image__resize-handler-bottom,
.block-library-image__resize-handler-left {
@include resize-handler__container();

.wp-block-image.is-focused & {
display: block;
z-index: z-index(".block-library-image__resize-handlers");
}
.wp-block-image.is-focused .components-resizable-box__handle-top,
.wp-block-image.is-focused .components-resizable-box__handle-right,
.wp-block-image.is-focused .components-resizable-box__handle-bottom,
.wp-block-image.is-focused .components-resizable-box__handle-left {
display: block;
z-index: z-index(".block-library-image__resize-handlers");
}

// Draw the visible handle
.block-library-image__resize-handler-right::before,
.block-library-image__resize-handler-bottom::before,
.block-library-image__resize-handler-left::before {
@include resize-handler__visible-handle();
}

/*!rtl:begin:ignore*/
.block-library-image__resize-handler-right {
top: calc(50% - #{$resize-handler-container-size / 2});
right: calc(#{$resize-handler-container-size / 2} * -1);
}

.block-library-image__resize-handler-left {
top: calc(50% - #{$resize-handler-container-size / 2});
left: calc(#{$resize-handler-container-size / 2} * -1);
}

.block-library-image__resize-handler-bottom {
bottom: calc(#{$resize-handler-container-size / 2} * -1);
left: calc(50% - #{$resize-handler-container-size / 2});
}
/*!rtl:end:ignore*/

.editor-block-list__block[data-type="core/image"][data-align="center"] {
.wp-block-image {
Expand Down
19 changes: 0 additions & 19 deletions packages/block-library/src/spacer/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,3 @@
.block-library-spacer__resize-container.is-selected {
.block-library-spacer__resize-handler-bottom {
display: block;
}
}

.block-library-spacer__resize-container.is-selected {
background: $light-gray-200;
}

.block-library-spacer__resize-handler-bottom {
@include resize-handler__container();

// Offset the handle container's position.
position: absolute;
bottom: calc(#{$resize-handler-container-size / 2} * -1);
left: calc(50% - #{$resize-handler-container-size / 2});
}

.block-library-spacer__resize-handler-bottom::before {
@include resize-handler__visible-handle();
}
19 changes: 1 addition & 18 deletions packages/block-library/src/spacer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/**
* External dependencies
*/
import ResizableBox from 're-resizable';
import classnames from 'classnames';

/**
Expand All @@ -10,7 +9,7 @@ import classnames from 'classnames';
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/editor';
import { BaseControl, PanelBody } from '@wordpress/components';
import { BaseControl, PanelBody, ResizableBox } from '@wordpress/components';
import { withInstanceId } from '@wordpress/compose';

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

// Removes the inline styles in the drag handles.
const handleStylesOverrides = {
width: null,
height: null,
top: null,
right: null,
bottom: null,
left: null,
};

return (
<Fragment>
<ResizableBox
Expand All @@ -57,12 +46,6 @@ export const settings = {
height,
} }
minHeight="20"
handleClasses={ {
bottom: 'block-library-spacer__resize-handler-bottom',
} }
handleStyles={ {
bottom: handleStylesOverrides,
} }
enable={ {
top: false,
right: false,
Expand Down
1 change: 1 addition & 0 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"memize": "^1.0.5",
"moment": "^2.22.1",
"mousetrap": "^1.6.2",
"re-resizable": "^4.7.1",
"react-click-outside": "^2.3.1",
"react-color": "^2.13.4",
"react-datepicker": "^1.4.1",
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export { default as Popover } from './popover';
export { default as QueryControls } from './query-controls';
export { default as RadioControl } from './radio-control';
export { default as RangeControl } from './range-control';
export { default as ResizableBox } from './resizable-box';
export { default as ResponsiveWrapper } from './responsive-wrapper';
export { default as SandBox } from './sandbox';
export { default as SelectControl } from './select-control';
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/resizable-box/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# ResizableBox

ResizableBox is a wrapper around the [re-resizable package](https://github.com/bokuweb/re-resizable) with pre-defined classes and styles.


41 changes: 41 additions & 0 deletions packages/components/src/resizable-box/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import ReResizableBox from 're-resizable';

function ResizableBox( { className, ...props } ) {
// Removes the inline styles in the drag handles.
const handleStylesOverrides = {
width: null,
height: null,
top: null,
right: null,
bottom: null,
left: null,
};

return (
<ReResizableBox
className={ classnames(
'components-resizable-box__container',
className,
) }
handleClasses={ {
top: 'components-resizable-box__handle-top',
right: 'components-resizable-box__handle-right',
bottom: 'components-resizable-box__handle-bottom',
left: 'components-resizable-box__handle-left',
} }
handleStyles={ {
top: handleStylesOverrides,
right: handleStylesOverrides,
bottom: handleStylesOverrides,
left: handleStylesOverrides,
} }
{ ...props }
/>
);
}

export default ResizableBox;
48 changes: 48 additions & 0 deletions packages/components/src/resizable-box/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
.components-resizable-box__handle-top,
.components-resizable-box__handle-right,
.components-resizable-box__handle-bottom,
.components-resizable-box__handle-left {
display: none;

// Show the resize handle when selected.
.components-resizable-box__container.is-selected & {
Copy link
Member

@aduth aduth May 2, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where do we document how a resizable box becomes "selected" to unhide itself? The current documentation for ResizableBox has no indication of this default hidden state. It was quite the journey to find my way here, as I've found it quite difficult to use the component with the documentation as written.

Copy link
Contributor Author

@chrisvanpatten chrisvanpatten May 2, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The behavior here was inherited from the original, non-componentized usages of ResizableBox; you can see it in previous PRs as well such as here.

There are probably other use-cases that would provide more valuable context, and could certainly be referenced and improved in the documentation.

Copy link
Member

@aduth aduth May 3, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While I'd agree it often needs contextualized styling, the main problem for me was that in using the example from the documentation, there is nothing visual which appears. It took me quite a while to realize that the handles are hidden by default.

I understand this is largely a result of how it was used prior to this pull request, but it seems to me that as a generic component, there's no reason to hide those controls by default. I could imagine we might want to keep this behavior for blocks in a block list, but rather than styling in ResizableBox and in individual block stylesheets, it seems like something which should be managed in one of the stylesheets for the block list (apply consistently and exclusively to ResizableBox within blocks).

I could create an issue if it seems reasonable.

display: block;
}

// The handle itself is a pseudo element, and will sit inside this larger
// container size.
width: $resize-handler-container-size;
height: $resize-handler-container-size;
padding: $grid-size-small;
}

.components-resizable-box__handle-top::before,
.components-resizable-box__handle-right::before,
.components-resizable-box__handle-bottom::before,
.components-resizable-box__handle-left::before {
display: block;
content: "";
width: $resize-handler-size;
height: $resize-handler-size;
border: 2px solid $white;
border-radius: 50%;
background: theme(primary);
cursor: inherit;
}

/*!rtl:begin:ignore*/
.components-resizable-box__handle-right {
top: calc(50% - #{$resize-handler-container-size / 2});
right: calc(#{$resize-handler-container-size / 2} * -1);
}

.components-resizable-box__handle-bottom {
bottom: calc(#{$resize-handler-container-size / 2} * -1);
left: calc(50% - #{$resize-handler-container-size / 2});
}

.components-resizable-box__handle-left {
top: calc(50% - #{$resize-handler-container-size / 2});
left: calc(#{$resize-handler-container-size / 2} * -1);
}
/*!rtl:end:ignore*/
1 change: 1 addition & 0 deletions packages/components/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
@import "./popover/style.scss";
@import "./radio-control/style.scss";
@import "./range-control/style.scss";
@import "./resizable-box/style.scss";
@import "./responsive-wrapper/style.scss";
@import "./sandbox/style.scss";
@import "./scroll-lock/style.scss";
Expand Down