Skip to content

Add site logo crop #31607

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

Merged
merged 15 commits into from
Sep 20, 2021
Merged

Add site logo crop #31607

Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
264cb72
Extract image editor component to block-editor
ajlende May 5, 2021
21e44c4
Add site logo cropper
ajlende Jun 21, 2021
3051109
Move react-easy-crop dependency
ajlende May 7, 2021
b364af6
add @wordpress/api-fetch to block-editor
ajlende May 7, 2021
a243c16
Update lockfile
ajlende May 7, 2021
afca925
Update docs
ajlende Jun 21, 2021
1d18680
Revert setLogo and setError changes
ajlende Jun 21, 2021
549b9e9
setLogo with number instead of string
ajlende Jun 21, 2021
e410a4d
Fix container width and height when adjusting size
ajlende Jun 22, 2021
75ba23e
Merge branch 'trunk' into add/site-logo-crop
ajlende Sep 13, 2021
fa8da2a
Remove unused Icon import
ajlende Sep 13, 2021
28ba223
Mark exported image editor as experimental
ajlende Sep 13, 2021
2574192
Update package-lock.json
ajlende Sep 13, 2021
713533e
Close cropper when not selected
ajlende Sep 14, 2021
44480c7
Reset image crop state on deselect
ajlende Sep 14, 2021
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
Prev Previous commit
Next Next commit
Add site logo cropper
  • Loading branch information
@ajlende
ajlende committed Jun 28, 2021
commit 21e44c4cc9177594c7c403b75c2157b6d7d0dba5
110 changes: 79 additions & 31 deletions packages/block-library/src/site-logo/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,21 @@ import { isBlobURL } from '@wordpress/blob';
import { useState, useRef } from '@wordpress/element';
import { __, isRTL } from '@wordpress/i18n';
import {
Icon,
Notice,
PanelBody,
RangeControl,
ResizableBox,
Spinner,
ToggleControl,
Icon,
ToolbarButton,
} from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import {
BlockControls,
BlockIcon,
ImageEditingProvider,
ImageEditor,
InspectorControls,
MediaPlaceholder,
MediaReplaceFlow,
Expand All @@ -31,7 +34,7 @@ import {
} from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { siteLogo as icon } from '@wordpress/icons';
import { crop, siteLogo as icon } from '@wordpress/icons';

/**
* Internal dependencies
Expand All @@ -52,27 +55,30 @@ const SiteLogo = ( {
containerRef,
isSelected,
setAttributes,
setLogo,
logoUrl,
siteUrl,
logoId,
} ) => {
const clientWidth = useClientWidth( containerRef, [ align ] );
const isLargeViewport = useViewportMatch( 'medium' );
const isWideAligned = includes( [ 'wide', 'full' ], align );
const isResizable = ! isWideAligned && isLargeViewport;
const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
const [ isEditingImage, setIsEditingImage ] = useState( false );
const { toggleSelection } = useDispatch( blockEditorStore );
const classes = classnames( 'custom-logo-link', {
'is-transient': isBlobURL( logoUrl ),
} );
const { maxWidth, title } = useSelect( ( select ) => {
const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
const siteEntities = select( coreStore ).getEditedEntityRecord(
'root',
'site'
);
return {
title: siteEntities.title,
...pick( getSettings(), [ 'imageSizes', 'maxWidth' ] ),
...pick( getSettings(), [ 'imageEditing', 'maxWidth' ] ),
};
}, [] );

Expand Down Expand Up @@ -179,6 +185,60 @@ const SiteLogo = ( {
}
/* eslint-enable no-lonely-if */

const canEditImage =
logoId && naturalWidth && naturalHeight && imageEditing;

const imgEdit =
canEditImage && isEditingImage ? (
<ImageEditingProvider
id={ logoId }
url={ logoUrl }
naturalWidth={ naturalWidth }
naturalHeight={ naturalHeight }
clientWidth={ clientWidth }
onSaveImage={ ( imageAttributes ) => {
setLogo( imageAttributes.id.toString() );
} }
isEditing={ isEditingImage }
onFinishEditing={ () => setIsEditingImage( false ) }
>
<ImageEditor
url={ logoUrl }
width={ width }
height={ height }
clientWidth={ clientWidth }
naturalHeight={ naturalHeight }
naturalWidth={ naturalWidth }
/>
</ImageEditingProvider>
) : (
<ResizableBox
size={ { width, height } }
showHandle={ isSelected }
minWidth={ minWidth }
maxWidth={ maxWidthBuffer }
minHeight={ minHeight }
maxHeight={ maxWidthBuffer / ratio }
lockAspectRatio
enable={ {
top: false,
right: showRightHandle,
bottom: true,
left: showLeftHandle,
} }
onResizeStart={ onResizeStart }
onResizeStop={ ( event, direction, elt, delta ) => {
onResizeStop();
setAttributes( {
width: parseInt( currentWidth + delta.width, 10 ),
height: parseInt( currentHeight + delta.height, 10 ),
} );
} }
>
{ imgWrapper }
</ResizableBox>
);

return (
<>
<InspectorControls>
Expand Down Expand Up @@ -217,31 +277,16 @@ const SiteLogo = ( {
) }
</PanelBody>
</InspectorControls>
<ResizableBox
size={ { width, height } }
showHandle={ isSelected }
minWidth={ minWidth }
maxWidth={ maxWidthBuffer }
minHeight={ minHeight }
maxHeight={ maxWidthBuffer / ratio }
lockAspectRatio
enable={ {
top: false,
right: showRightHandle,
bottom: true,
left: showLeftHandle,
} }
onResizeStart={ onResizeStart }
onResizeStop={ ( event, direction, elt, delta ) => {
onResizeStop();
setAttributes( {
width: parseInt( currentWidth + delta.width, 10 ),
height: parseInt( currentHeight + delta.height, 10 ),
} );
} }
>
{ imgWrapper }
</ResizableBox>
<BlockControls group="block">
{ canEditImage && ! isEditingImage && (
<ToolbarButton
onClick={ () => setIsEditingImage( true ) }
icon={ crop }
label={ __( 'Crop' ) }
/>
) }
</BlockControls>
{ imgEdit }
</>
);
};
Expand Down Expand Up @@ -281,6 +326,7 @@ export default function LogoEdit( {
canUserEdit: _canUserEdit,
url: siteData?.url,
mediaItemData: mediaItem && {
id: mediaItem.id,
url: mediaItem.source_url,
alt: mediaItem.alt_text,
},
Expand Down Expand Up @@ -309,8 +355,8 @@ export default function LogoEdit( {

if ( ! media.id && media.url ) {
// This is a temporary blob image
setLogo( undefined );
setError( null );
setLogo( '' );
setError();
setLogoUrl( media.url );
return;
}
Expand Down Expand Up @@ -350,6 +396,8 @@ export default function LogoEdit( {
isSelected={ isSelected }
setAttributes={ setAttributes }
logoUrl={ logoUrl }
setLogo={ setLogo }
logoId={ mediaItemData?.id || siteLogoId }
siteUrl={ url }
/>
);
Expand Down