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.

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

Add site logo crop #31607

Merged
merged 15 commits into from
Sep 20, 2021
3 changes: 2 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions packages/block-editor/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"@babel/runtime": "^7.13.10",
"@react-spring/web": "^9.2.4",
"@wordpress/a11y": "file:../a11y",
"@wordpress/api-fetch": "file:../api-fetch",
"@wordpress/blob": "file:../blob",
"@wordpress/block-serialization-default-parser": "file:../block-serialization-default-parser",
"@wordpress/blocks": "file:../blocks",
Expand Down Expand Up @@ -66,6 +67,7 @@
"lodash": "^4.17.21",
"memize": "^1.1.0",
"react-autosize-textarea": "^7.1.0",
"react-easy-crop": "^3.0.0",
"redux-multi": "^0.1.12",
"rememo": "^3.0.0",
"tinycolor2": "^1.4.2",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/**
* WordPress dependencies
*/
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarItem } from '@wordpress/components';

/**
* Internal dependencies
*/
import BlockControls from '../block-controls';
import Cropper from './cropper';
import ZoomDropdown from './zoom-dropdown';
import AspectRatioDropdown from './aspect-ratio-dropdown';
Expand Down
4 changes: 4 additions & 0 deletions packages/block-editor/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@ export { default as __experimentalFontFamilyControl } from './font-family';
export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
export { default as __experimentalColorGradientControl } from './colors-gradients/control';
export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
export {
default as __experimentalImageEditor,
ImageEditingProvider as __experimentalImageEditingProvider,
} from './image-editor';
export { default as __experimentalImageSizeControl } from './image-size-control';
export {
default as InnerBlocks,
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@
"memize": "^1.1.0",
"micromodal": "^0.4.6",
"moment": "^2.22.1",
"react-easy-crop": "^3.0.0",
"tinycolor2": "^1.4.2"
},
"publishConfig": {
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/image/image.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ import {
MediaReplaceFlow,
store as blockEditorStore,
BlockAlignmentControl,
__experimentalImageEditor as ImageEditor,
__experimentalImageEditingProvider as ImageEditingProvider,
} from '@wordpress/block-editor';
import { useEffect, useState, useRef } from '@wordpress/element';
import { __, sprintf, isRTL } from '@wordpress/i18n';
Expand All @@ -41,7 +43,6 @@ import { store as coreStore } from '@wordpress/core-data';
*/
import { createUpgradedEmbedBlock } from '../embed/util';
import useClientWidth from './use-client-width';
import ImageEditor, { ImageEditingProvider } from './image-editing';
import { isExternalImage } from './edit';

/**
Expand Down
107 changes: 79 additions & 28 deletions packages/block-library/src/site-logo/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
ResizableBox,
Spinner,
ToggleControl,
ToolbarButton,
Placeholder,
} from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
Expand All @@ -28,10 +29,12 @@ import {
MediaReplaceFlow,
useBlockProps,
store as blockEditorStore,
__experimentalImageEditor as ImageEditor,
__experimentalImageEditingProvider as ImageEditingProvider,
} 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,63 @@ 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 );
} }
isEditing={ isEditingImage }
onFinishEditing={ () => setIsEditingImage( false ) }
>
<ImageEditor
url={ logoUrl }
width={ currentWidth }
height={ currentHeight }
clientWidth={ clientWidth }
naturalHeight={ naturalHeight }
naturalWidth={ naturalWidth }
/>
</ImageEditingProvider>
) : (
<ResizableBox
size={ {
width: currentWidth,
height: currentHeight,
} }
Comment on lines +222 to +225
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using currentWidth and currentHeight fixes the bug described in #29217

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 +280,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 @@ -289,6 +337,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 @@ -357,6 +406,8 @@ export default function LogoEdit( {
isSelected={ isSelected }
setAttributes={ setAttributes }
logoUrl={ logoUrl }
setLogo={ setLogo }
logoId={ mediaItemData?.id || siteLogoId }
siteUrl={ url }
/>
);
Expand Down