diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js index 0afc8ffac4485e..4df1131cd40ad3 100644 --- a/blocks/library/image/block.js +++ b/blocks/library/image/block.js @@ -59,6 +59,9 @@ class ImageBlock extends Component { this.onSelectImage = this.onSelectImage.bind( this ); this.onSetHref = this.onSetHref.bind( this ); this.updateImageURL = this.updateImageURL.bind( this ); + this.updateWidth = this.updateWidth.bind( this ); + this.updateHeight = this.updateHeight.bind( this ); + this.updateDimensions = this.updateDimensions.bind( this ); this.state = { captionFocused: false, @@ -140,6 +143,20 @@ class ImageBlock extends Component { this.props.setAttributes( { url, width: undefined, height: undefined } ); } + updateWidth( width ) { + this.props.setAttributes( { width: parseInt( width, 10 ) } ); + } + + updateHeight( height ) { + this.props.setAttributes( { height: parseInt( height, 10 ) } ); + } + + updateDimensions( width = undefined, height = undefined ) { + return () => { + this.props.setAttributes( { width, height } ); + }; + } + getAvailableSizes() { return get( this.props.image, [ 'media_details', 'sizes' ], {} ); } @@ -235,9 +252,7 @@ class ImageBlock extends Component { label={ __( 'Width' ) } value={ width !== undefined ? width : '' } placeholder={ selectedSize.width } - onChange={ ( value ) => { - setAttributes( { width: parseInt( value, 10 ) } ); - } } + onChange={ this.updateWidth } /> { - setAttributes( { height: parseInt( value, 10 ) } ); - } } + onChange={ this.updateHeight } />
@@ -264,9 +277,7 @@ class ImageBlock extends Component { isSmall isPrimary={ isCurrent } aria-pressed={ isCurrent } - onClick={ () => { - setAttributes( { width: scaledWidth, height: scaledHeight } ); - } } + onClick={ this.updateDimensions( scaledWidth, scaledHeight ) } > { scale }% @@ -275,9 +286,7 @@ class ImageBlock extends Component {