-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Components: Add ImageSizeControl component (#17148)
- Loading branch information
1 parent
2db963f
commit 18393a3
Showing
7 changed files
with
260 additions
and
109 deletions.
There are no files selected for viewing
108 changes: 108 additions & 0 deletions
108
packages/block-editor/src/components/image-size-control/README.md
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,108 @@ | ||
# ImageSizeControl | ||
|
||
Allow users to control the width & height of an image. | ||
|
||
## Usage | ||
|
||
Render a ImageSizeControl. | ||
|
||
```jsx | ||
import { ImageSizeControl } from '@wordpress/components'; | ||
import { withState } from '@wordpress/compose'; | ||
|
||
const MyImageSizeControl = withState( { | ||
width: null, | ||
height: null, | ||
} )( ( { width, height, setState } ) => { | ||
// In this example, we have one image with a fixed size of 600x600. | ||
const imageWidth = 600; | ||
const imageHeight = 600; | ||
|
||
return ( | ||
<ImageSizeControl | ||
onChange={ ( value ) => setState( value ) } | ||
width={ width } | ||
height={ height } | ||
imageWidth={ imageWidth } | ||
imageHeight={ imageHeight } | ||
/> | ||
); | ||
} ); | ||
``` | ||
|
||
## Props | ||
|
||
The component accepts the following props: | ||
|
||
### slug | ||
|
||
The currently-selected image size slug (`thumbnail`, `large`, etc). This is used by the parent component to get the specific image, which is used to populate `imageHeight` & `imageWidth`. This is not required, but necessary when `imageSizeOptions` is used. | ||
|
||
- Type: `string` | ||
- Required: No | ||
|
||
### height | ||
|
||
The height of the image when displayed. | ||
|
||
- Type: `number` | ||
- Required: No | ||
|
||
### width | ||
|
||
The width of the image when displayed. | ||
|
||
- Type: `number` | ||
- Required: No | ||
|
||
### onChange | ||
|
||
The function called when the image size changes. It is passed an object with `{ width, height }` (potentially just one if only one dimension changed). | ||
|
||
- Type: `Function` | ||
- Required: Yes | ||
|
||
### onChangeImage | ||
|
||
The function called when a new image size is selected. It is passed the `slug` as an argument. This is not required, but necessary when `imageSizeOptions` is used. | ||
|
||
- Type: `Function` | ||
- Required: No | ||
|
||
### imageSizeOptions | ||
|
||
An array of image size slugs and labels. Should be of the format: | ||
|
||
```js | ||
[ | ||
{ value: 'thumbnail', label: 'Thumbnail' }, | ||
{ value: 'medium', label: 'Medium' }, | ||
... | ||
] | ||
``` | ||
|
||
If not provided, the "Image Size" dropdown is not displayed. | ||
|
||
- Type: `array` | ||
- Required: No | ||
|
||
### isResizable | ||
|
||
A boolean control for showing the resize fields "Image Dimensions". Set this to false if you want images to always be the fixed size of the selected image. | ||
|
||
- Type: `boolean` | ||
- Required: No | ||
|
||
### imageWidth | ||
|
||
The width of the currently selected image, used for calculating the percentage sizes. This will likely be updated when the image size slug changes, but does not control the image display (that's the `width` prop). | ||
|
||
- Type: `number` | ||
- Required: Yes | ||
|
||
### imageHeight | ||
|
||
The height of the currently selected image, used for calculating the percentage sizes. This will likely be updated when the image size slug changes, but does not control the image display (that's the `height` prop). | ||
|
||
- Type: `number` | ||
- Required: Yes |
112 changes: 112 additions & 0 deletions
112
packages/block-editor/src/components/image-size-control/index.js
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,112 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { isEmpty, noop } from 'lodash'; | ||
|
||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import { Button, ButtonGroup, SelectControl, TextControl } from '@wordpress/components'; | ||
import { Component } from '@wordpress/element'; | ||
|
||
class ImageSizeControl extends Component { | ||
/** | ||
* Run additional operations during component initialization. | ||
* | ||
* @param {Object} props | ||
*/ | ||
constructor( props ) { | ||
super( props ); | ||
|
||
this.updateDimensions = this.updateDimensions.bind( this ); | ||
} | ||
|
||
updateDimensions( width = undefined, height = undefined ) { | ||
return () => { | ||
this.props.onChange( { width, height } ); | ||
}; | ||
} | ||
|
||
render() { | ||
const { | ||
imageWidth, | ||
imageHeight, | ||
imageSizeOptions = [], | ||
isResizable = true, | ||
slug, | ||
width, | ||
height, | ||
onChange, | ||
onChangeImage = noop, | ||
} = this.props; | ||
|
||
return ( | ||
<> | ||
{ ! isEmpty( imageSizeOptions ) && ( | ||
<SelectControl | ||
label={ __( 'Image Size' ) } | ||
value={ slug } | ||
options={ imageSizeOptions } | ||
onChange={ onChangeImage } | ||
/> | ||
) } | ||
{ isResizable && ( | ||
<div className="block-editor-image-size-control"> | ||
<p className="block-editor-image-size-control__row"> | ||
{ __( 'Image Dimensions' ) } | ||
</p> | ||
<div className="block-editor-image-size-control__row"> | ||
<TextControl | ||
type="number" | ||
className="block-editor-image-size-control__width" | ||
label={ __( 'Width' ) } | ||
value={ width || imageWidth || '' } | ||
min={ 1 } | ||
onChange={ ( value ) => onChange( { width: parseInt( value, 10 ) } ) } | ||
/> | ||
<TextControl | ||
type="number" | ||
className="block-editor-image-size-control__height" | ||
label={ __( 'Height' ) } | ||
value={ height || imageHeight || '' } | ||
min={ 1 } | ||
onChange={ ( value ) => onChange( { height: parseInt( value, 10 ) } ) } | ||
/> | ||
</div> | ||
<div className="block-editor-image-size-control__row"> | ||
<ButtonGroup aria-label={ __( 'Image Size' ) }> | ||
{ [ 25, 50, 75, 100 ].map( ( scale ) => { | ||
const scaledWidth = Math.round( imageWidth * ( scale / 100 ) ); | ||
const scaledHeight = Math.round( imageHeight * ( scale / 100 ) ); | ||
|
||
const isCurrent = width === scaledWidth && height === scaledHeight; | ||
|
||
return ( | ||
<Button | ||
key={ scale } | ||
isSmall | ||
isPrimary={ isCurrent } | ||
isPressed={ isCurrent } | ||
onClick={ this.updateDimensions( scaledWidth, scaledHeight ) } | ||
> | ||
{ scale }% | ||
</Button> | ||
); | ||
} ) } | ||
</ButtonGroup> | ||
<Button | ||
isSmall | ||
onClick={ this.updateDimensions() } | ||
> | ||
{ __( 'Reset' ) } | ||
</Button> | ||
</div> | ||
</div> | ||
) } | ||
</> | ||
); | ||
} | ||
} | ||
|
||
export default ImageSizeControl; |
26 changes: 26 additions & 0 deletions
26
packages/block-editor/src/components/image-size-control/style.scss
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,26 @@ | ||
.block-editor-image-size-control { | ||
margin-bottom: 1em; | ||
|
||
.block-editor-image-size-control__row { | ||
display: flex; | ||
justify-content: space-between; | ||
|
||
.block-editor-image-size-control__width, | ||
.block-editor-image-size-control__height { | ||
margin-bottom: 0.5em; | ||
|
||
// Fix the text and placeholder text being misaligned in Safari | ||
input { | ||
line-height: 1.25; | ||
} | ||
} | ||
|
||
.block-editor-image-size-control__width { | ||
margin-right: 5px; | ||
} | ||
|
||
.block-editor-image-size-control__height { | ||
margin-left: 5px; | ||
} | ||
} | ||
} |
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
Oops, something went wrong.