-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
7ec834b
commit eafd620
Showing
13 changed files
with
172 additions
and
125 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| # ResizableBox | ||
|
|
||
| ResizableBox is a wrapper around the [re-resizable package](https://github.com/bokuweb/re-resizable) with pre-defined classes and styles. | ||
|
|
||
| ## Usage | ||
|
|
||
| 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). | ||
|
|
||
| The example below shows how you might use `ResizableBox` to set a width and height inside a block's `edit` component. | ||
|
|
||
| ```jsx | ||
| import { ResizableBox } from '@wordpress/components'; | ||
|
|
||
| const Edit = ( props ) => { | ||
| const { | ||
| attributes: { | ||
| height, | ||
| width, | ||
| }, | ||
| setAttributes, | ||
| toggleSelection, | ||
| } = props; | ||
|
|
||
| return ( | ||
| <ResizableBox | ||
| size={ { | ||
| height, | ||
| width, | ||
| } } | ||
| minHeight="50" | ||
| minWidth="50" | ||
| enable={ { | ||
| top: false, | ||
| right: true, | ||
| bottom: true, | ||
| left: false, | ||
| topRight: false, | ||
| bottomRight: true, | ||
| bottomLeft: false, | ||
| topLeft: false, | ||
| } } | ||
| onResizeStop={ ( event, direction, elt, delta ) => { | ||
| setAttributes( { | ||
| height: parseInt( height + delta.height, 10 ), | ||
| width: parseInt( width + delta.width, 10 ), | ||
| } ); | ||
| toggleSelection( true ); | ||
| } } | ||
| onResizeStart={ () => { | ||
| toggleSelection( false ); | ||
| } } | ||
| /> | ||
| ); | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /** | ||
| * 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, | ||
| }; | ||
|
|
||
| const handleClassName = 'components-resizable-box__handle'; | ||
|
|
||
| return ( | ||
| <ReResizableBox | ||
| className={ classnames( | ||
| 'components-resizable-box__container', | ||
| className, | ||
| ) } | ||
| handleClasses={ { | ||
| top: classnames( | ||
| handleClassName, | ||
| 'components-resizable-box__handle-top', | ||
| ), | ||
| right: classnames( | ||
| handleClassName, | ||
| 'components-resizable-box__handle-right', | ||
| ), | ||
| bottom: classnames( | ||
| handleClassName, | ||
| 'components-resizable-box__handle-bottom', | ||
| ), | ||
| left: classnames( | ||
| handleClassName, | ||
| 'components-resizable-box__handle-left', | ||
| ), | ||
| } } | ||
| handleStyles={ { | ||
| top: handleStylesOverrides, | ||
| right: handleStylesOverrides, | ||
| bottom: handleStylesOverrides, | ||
| left: handleStylesOverrides, | ||
| } } | ||
| { ...props } | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export default ResizableBox; |
Oops, something went wrong.