Skip to content

Commit

Permalink
Image Block: Show image blocks with external URLs and support resizing (
Browse files Browse the repository at this point in the history 
#6240)
  • Loading branch information
@youknowriad
youknowriad authored Apr 18, 2018
1 parent 0815bc4 commit cee2df5
Showing 1 changed file with 112 additions and 110 deletions.
222 changes: 112 additions & 110 deletions blocks/library/image/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import classnames from 'classnames';
import ResizableBox from 're-resizable';
import {
find,
get,
isEmpty,
map,
Expand All @@ -16,7 +15,7 @@ import {
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component, compose } from '@wordpress/element';
import { Component, compose, Fragment } from '@wordpress/element';
import { getBlobByURL, revokeBlobURL, viewPort } from '@wordpress/utils';
import {
Button,
Expand Down Expand Up @@ -198,9 +197,8 @@ class ImageBlock extends Component {
);

const availableSizes = this.getAvailableSizes();
const selectedSize = find( availableSizes, ( size ) => size.source_url === url );

if ( ! url || ! selectedSize ) {
if ( ! url ) {
return [
controls,
<ImagePlaceholder
Expand All @@ -221,84 +219,85 @@ class ImageBlock extends Component {

const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1 && ( ! viewPort.isExtraSmall() );

const getInspectorControls = ( imageWidth, imageHeight )=> (
<InspectorControls>
<PanelBody title={ __( 'Image Settings' ) }>
<TextareaControl
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.' ) }
/>
{ ! isEmpty( availableSizes ) && (
<SelectControl
label={ __( 'Source Type' ) }
value={ url }
options={ map( availableSizes, ( size, name ) => ( {
value: size.source_url,
label: startCase( name ),
} ) ) }
onChange={ this.updateImageURL }
/>
) }
<div className="blocks-image__dimensions">
<p className="blocks-image__dimensions__row">
{ __( 'Image Dimensions' ) }
</p>
<div className="blocks-image__dimensions__row">
<TextControl
type="number"
className="blocks-image__dimensions__width"
label={ __( 'Width' ) }
value={ width !== undefined ? width : '' }
placeholder={ imageWidth }
onChange={ this.updateWidth }
/>
<TextControl
type="number"
className="blocks-image__dimensions__height"
label={ __( 'Height' ) }
value={ height !== undefined ? height : '' }
placeholder={ imageHeight }
onChange={ this.updateHeight }
/>
</div>
<div className="blocks-image__dimensions__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 }
aria-pressed={ isCurrent }
onClick={ this.updateDimensions( scaledWidth, scaledHeight ) }
>
{ scale }%
</Button>
);
} ) }
</ButtonGroup>
<Button
isSmall
onClick={ this.updateDimensions() }
>
{ __( 'Reset' ) }
</Button>
</div>
</div>
</PanelBody>
</InspectorControls>
);

// Disable reason: Each block can be selected by clicking on it
/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
return [
controls,
isSelected && (
<InspectorControls key="inspector">
<PanelBody title={ __( 'Image Settings' ) }>
<TextareaControl
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.' ) }
/>
{ ! isEmpty( availableSizes ) && (
<SelectControl
label={ __( 'Source Type' ) }
value={ url }
options={ map( availableSizes, ( size, name ) => ( {
value: size.source_url,
label: startCase( name ),
} ) ) }
onChange={ this.updateImageURL }
/>
) }
<div className="blocks-image__dimensions">
<p className="blocks-image__dimensions__row">
{ __( 'Image Dimensions' ) }
</p>
<div className="blocks-image__dimensions__row">
<TextControl
type="number"
className="blocks-image__dimensions__width"
label={ __( 'Width' ) }
value={ width !== undefined ? width : '' }
placeholder={ selectedSize.width }
onChange={ this.updateWidth }
/>
<TextControl
type="number"
className="blocks-image__dimensions__height"
label={ __( 'Height' ) }
value={ height !== undefined ? height : '' }
placeholder={ selectedSize.height }
onChange={ this.updateHeight }
/>
</div>
<div className="blocks-image__dimensions__row">
<ButtonGroup aria-label={ __( 'Image Size' ) }>
{ [ 25, 50, 75, 100 ].map( ( scale ) => {
const scaledWidth = Math.round( selectedSize.width * ( scale / 100 ) );
const scaledHeight = Math.round( selectedSize.height * ( scale / 100 ) );

const isCurrent = width === scaledWidth && height === scaledHeight;

return (
<Button
key={ scale }
isSmall
isPrimary={ isCurrent }
aria-pressed={ isCurrent }
onClick={ this.updateDimensions( scaledWidth, scaledHeight ) }
>
{ scale }%
</Button>
);
} ) }
</ButtonGroup>
<Button
isSmall
onClick={ this.updateDimensions() }
>
{ __( 'Reset' ) }
</Button>
</div>
</div>
</PanelBody>
</InspectorControls>
),
<figure key="image" className={ classes }>
<ImageSize src={ url } dirtynessTrigger={ align }>
{ ( sizes ) => {
Expand Down Expand Up @@ -330,38 +329,41 @@ class ImageBlock extends Component {
const minHeight = imageHeight < imageWidth ? MIN_SIZE : MIN_SIZE / ratio;

return (
<ResizableBox
size={
width && height ? {
width,
height,
} : undefined
}
minWidth={ minWidth }
maxWidth={ settings.maxWidth }
minHeight={ minHeight }
maxHeight={ settings.maxWidth / ratio }
lockAspectRatio
handleClasses={ {
topRight: 'wp-block-image__resize-handler-top-right',
bottomRight: 'wp-block-image__resize-handler-bottom-right',
topLeft: 'wp-block-image__resize-handler-top-left',
bottomLeft: 'wp-block-image__resize-handler-bottom-left',
} }
enable={ { top: false, right: true, bottom: false, left: false, topRight: true, bottomRight: true, bottomLeft: true, topLeft: true } }
onResizeStart={ () => {
toggleSelection( false );
} }
onResizeStop={ ( event, direction, elt, delta ) => {
setAttributes( {
width: parseInt( currentWidth + delta.width, 10 ),
height: parseInt( currentHeight + delta.height, 10 ),
} );
toggleSelection( true );
} }
>
{ img }
</ResizableBox>
<Fragment>
{ getInspectorControls( imageWidth, imageHeight ) }
<ResizableBox
size={
width && height ? {
width,
height,
} : undefined
}
minWidth={ minWidth }
maxWidth={ settings.maxWidth }
minHeight={ minHeight }
maxHeight={ settings.maxWidth / ratio }
lockAspectRatio
handleClasses={ {
topRight: 'wp-block-image__resize-handler-top-right',
bottomRight: 'wp-block-image__resize-handler-bottom-right',
topLeft: 'wp-block-image__resize-handler-top-left',
bottomLeft: 'wp-block-image__resize-handler-bottom-left',
} }
enable={ { top: false, right: true, bottom: false, left: false, topRight: true, bottomRight: true, bottomLeft: true, topLeft: true } }
onResizeStart={ () => {
toggleSelection( false );
} }
onResizeStop={ ( event, direction, elt, delta ) => {
setAttributes( {
width: parseInt( currentWidth + delta.width, 10 ),
height: parseInt( currentHeight + delta.height, 10 ),
} );
toggleSelection( true );
} }
>
{ img }
</ResizableBox>
</Fragment>
);
} }
</ImageSize>
Expand Down

0 comments on commit cee2df5

Please sign in to comment.