Add size control in inspector

WordPress · Jan 5, 2018 · 57dd2d6 · 57dd2d6
1 parent 89d67d3
commit 57dd2d6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
@@ -44,6 +44,7 @@ class ImageBlock extends Component {
 		this.onSelectImage = this.onSelectImage.bind( this );
 		this.onSetHref = this.onSetHref.bind( this );
 		this.updateImageURL = this.updateImageURL.bind( this );
+		this.updateSize = this.updateSize.bind( this );
 	}
 
 	componentDidMount() {
@@ -98,6 +99,10 @@ class ImageBlock extends Component {
 		this.props.setAttributes( { url } );
 	}
 
+	updateSize( size ) {
+		this.props.setAttributes( { size } );
+	}
+
 	render() {
 		const { attributes, setAttributes, focus, setFocus, className, settings, toggleSelection } = this.props;
 		const { url, alt, caption, align, id, href, size } = attributes;
@@ -169,7 +174,7 @@ class ImageBlock extends Component {
 		const focusCaption = ( focusValue ) => setFocus( { editable: 'caption', ...focusValue } );
 		const classes = classnames( className, {
 			'is-transient': 0 === url.indexOf( 'blob:' ),
-			'is-resized': !! width,
+			'is-resized': !! size,
 			'is-focused': !! focus,
 		} );
 
@@ -182,6 +187,15 @@ class ImageBlock extends Component {
 				<InspectorControls key="inspector">
 					<h2>{ __( 'Image Settings' ) }</h2>
 					<TextControl label={ __( 'Textual Alternative' ) } value={ alt } onChange={ this.updateAlt } help={ __( 'Describe the purpose of the image. Leave empty if the image is not a key part of the content.' ) } />
+					<TextControl
+						label={ __( 'Size' ) }
+						type={ 'number' }
+						min={ 5 }
+						max={ 100 }
+						value={ size }
+						onChange={ this.updateSize }
+						help={ __( 'Set the image width as a percentage of the content width.' ) }
+					/>
 				</InspectorControls>
 			),
 			<figure key="image" className={ classes } style={ figureStyle }>
@@ -233,10 +247,7 @@ class ImageBlock extends Component {
 									toggleSelection( false );
 								} }
 								onResizeStop={ ( event, direction, elt, delta ) => {
-									setAttributes( {
-										size: parseInt( currentWidth + delta.width, 10 ) * 100 / settings.maxWidth,
-									} );
-
+									this.updateSize( Math.round( ( currentWidth + delta.width ) * 100 / settings.maxWidth ) );
 									toggleSelection( true );
 								} }
 							>

diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
@@ -141,9 +141,9 @@ registerBlockType( 'core/image', {
 	},
 
 	getEditWrapperProps( attributes ) {
-		const { align, width } = attributes;
+		const { align, size } = attributes;
 		if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
-			return { 'data-align': align, 'data-resized': !! width };
+			return { 'data-align': align, 'data-resized': !! size };
 		}
 	},