Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image: Consolidate crop ratios #22817

Merged
merged 8 commits into from
Jun 8, 2020
Merged

Image: Consolidate crop ratios #22817

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d5f1149
Consolidate crop ratios
ajlende Jun 2, 2020
2006eae
Use MenuGroup label
ajlende Jun 6, 2020
a2b67d3
Use <> instead of <Fragment>
ajlende Jun 6, 2020
aa7a820
Code cleanup for readability
ajlende Jun 6, 2020
6dc7703
Fix square crop ratio
ajlende Jun 6, 2020
045302c
Revert scss changes
ajlende Jun 6, 2020
f479e39
Rename label to title for AspectGroup
ajlende Jun 6, 2020
7a6bea6
Merge branch 'master' into fix/consolidate-crop-ratios
ajlende Jun 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 112 additions & 63 deletions packages/block-library/src/rich-image/rich-image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
BlockControls,
__experimentalBlock as Block,
} from '@wordpress/block-editor';
import { Fragment, Component } from '@wordpress/element';
import { Component } from '@wordpress/element';
import {
rotateLeft,
rotateRight,
Expand All @@ -31,6 +31,8 @@ import {
withNotices,
RangeControl,
DropdownMenu,
MenuGroup,
MenuItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
Expand All @@ -53,6 +55,105 @@ const MAX_ZOOM = 3;
const ZOOM_STEP = 0.1;
const POPOVER_PROPS = { position: 'bottom right' };

function AspectGroup( { aspectRatios, isDisabled, label, onClick } ) {
return (
<MenuGroup label={ label }>
{ aspectRatios.map( ( { title, aspect } ) => (
<MenuItem
key={ aspect }
isDisabled={ isDisabled }
onClick={ () => {
onClick( aspect );
} }
>
{ title }
</MenuItem>
) ) }
</MenuGroup>
);
}

function AspectMenu( { isDisabled, onClick, toggleProps } ) {
return (
<DropdownMenu
icon={ aspectRatio }
label={ __( 'Aspect Ratio' ) }
popoverProps={ POPOVER_PROPS }
toggleProps={ toggleProps }
>
{ ( { onClose } ) => (
<>
<AspectGroup
label={ __( 'Landscape' ) }
isDisabled={ isDisabled }
onClick={ ( aspect ) => {
onClick( aspect );
onClose();
} }
aspectRatios={ [
{
title: __( '16:10' ),
aspect: 16 / 10,
},
{
title: __( '16:9' ),
aspect: 16 / 9,
},
{
title: __( '4:3' ),
aspect: 4 / 3,
},
{
title: __( '3:2' ),
aspect: 3 / 2,
},
] }
/>
<AspectGroup
label={ __( 'Portrait' ) }
isDisabled={ isDisabled }
onClick={ ( aspect ) => {
onClick( aspect );
onClose();
} }
aspectRatios={ [
{
title: __( '10:16' ),
aspect: 10 / 16,
},
{
title: __( '9:16' ),
aspect: 9 / 16,
},
{
title: __( '3:4' ),
aspect: 3 / 4,
},
{
title: __( '2:3' ),
aspect: 2 / 3,
},
] }
/>
<AspectGroup
isDisabled={ isDisabled }
onClick={ ( aspect ) => {
onClick( aspect );
onClose();
} }
aspectRatios={ [
{
title: __( 'Square' ),
aspect: 1,
},
] }
/>
</>
) }
</DropdownMenu>
);
}

class RichImage extends Component {
constructor( props ) {
super( props );
Expand All @@ -66,7 +167,6 @@ class RichImage extends Component {
position: { x: 0, y: 0 },
zoom: 1,
aspect: 4 / 3,
isPortrait: false,
};

this.adjustImage = this.adjustImage.bind( this );
Expand Down Expand Up @@ -124,7 +224,6 @@ class RichImage extends Component {
zoom,
aspect,
imageSize,
isPortrait,
} = this.state;
const { url } = attributes;
const isEditing = ! isCrop && isSelected && url;
Expand All @@ -139,7 +238,7 @@ class RichImage extends Component {
} );

return (
<Fragment>
<>
{ noticeUI }

<div className={ classes }>
Expand Down Expand Up @@ -167,7 +266,7 @@ class RichImage extends Component {
maxZoom={ MAX_ZOOM }
crop={ position }
zoom={ zoom }
aspect={ isPortrait ? 1 / aspect : aspect }
aspect={ aspect }
onCropChange={ ( newPosition ) => {
this.setState( {
position: newPosition,
Expand Down Expand Up @@ -300,67 +399,17 @@ class RichImage extends Component {
<ToolbarGroup>
<ToolbarItem>
{ ( toggleProps ) => (
<DropdownMenu
icon={ aspectRatio }
label={ __( 'Aspect Ratio' ) }
popoverProps={ POPOVER_PROPS }
<AspectMenu
toggleProps={ toggleProps }
controls={ [
{
title: __( '16:10' ),
isDisabled: inProgress,
onClick: () =>
this.setState( {
aspect: 16 / 10,
} ),
},
{
title: __( '16:9' ),
isDisabled: inProgress,
onClick: () =>
this.setState( {
aspect: 16 / 9,
} ),
},
{
title: __( '4:3' ),
isDisabled: inProgress,
onClick: () =>
this.setState( {
aspect: 4 / 3,
} ),
},
{
title: __( '3:2' ),
isDisabled: inProgress,
onClick: () =>
this.setState( {
aspect: 3 / 2,
} ),
},
{
title: __( '1:1' ),
isDisabled: inProgress,
onClick: () =>
this.setState( {
aspect: 1,
} ),
},
] }
isDisabled={ inProgress }
onClick={ ( newAspect ) => {
this.setState( {
aspect: newAspect,
} );
} }
/>
) }
</ToolbarItem>
<ToolbarButton
className="richimage-toolbar__dropdown"
disabled={ inProgress }
icon="image-rotate-right"
label={ __( 'Orientation' ) }
onClick={ () =>
this.setState( ( prev ) => ( {
isPortrait: ! prev.isPortrait,
} ) )
}
/>
</ToolbarGroup>
<ToolbarGroup>
<ToolbarButton onClick={ this.cropImage }>
Expand All @@ -376,7 +425,7 @@ class RichImage extends Component {
</ToolbarGroup>
</BlockControls>
) }
</Fragment>
</>
);
}
}
Expand Down