Skip to content

Commit ddcf6df

Browse files
ramonjdramonjd
committed
Refactor image editing context and integrate with cropper functionality
* Reintroduced the `@wordpress/interactivity` package in package-lock.json. * Removed unused `useTransformImage` hook from the image editing context. * Integrated `ImageEditingProvider` into the `ImageEditor` component to manage image editing state. * Updated `RotationButton` and `ZoomDropdown` components to utilize the editing context for disabling buttons during image processing. * Adjusted `useSaveImage` to derive crop and rotation state from the image cropper context.
1 parent 46e30b8 commit ddcf6df

File tree

6 files changed

+41
-46
lines changed

6 files changed

+41
-46
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/block-editor/src/components/image-editor/context.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { createContext, useContext, useMemo } from '@wordpress/element';
77
* Internal dependencies
88
*/
99
import useSaveImage from './use-save-image';
10-
import useTransformImage from './use-transform-image';
1110

1211
const ImageEditingContext = createContext( {} );
1312
ImageEditingContext.displayName = 'ImageEditingContext';
@@ -17,32 +16,22 @@ export const useImageEditingContext = () => useContext( ImageEditingContext );
1716
export default function ImageEditingProvider( {
1817
id,
1918
url,
20-
naturalWidth,
21-
naturalHeight,
2219
onFinishEditing,
2320
onSaveImage,
2421
children,
2522
} ) {
26-
const transformImage = useTransformImage( {
27-
url,
28-
naturalWidth,
29-
naturalHeight,
30-
} );
31-
3223
const saveImage = useSaveImage( {
3324
id,
3425
url,
3526
onSaveImage,
3627
onFinishEditing,
37-
...transformImage,
3828
} );
3929

4030
const providerValue = useMemo(
4131
() => ( {
42-
...transformImage,
4332
...saveImage,
4433
} ),
45-
[ transformImage, saveImage ]
34+
[ saveImage ]
4635
);
4736

4837
return (

‎packages/block-editor/src/components/image-editor/index.js‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Cropper from './cropper';
1313
import ZoomDropdown from './zoom-dropdown';
1414
import RotationButton from './rotation-button';
1515
import FormControls from './form-controls';
16+
import ImageEditingProvider from './context';
1617

1718
export default function ImageEditor( {
1819
id,
@@ -27,36 +28,37 @@ export default function ImageEditor( {
2728
} ) {
2829
return (
2930
<ImageCropperProvider>
30-
<Cropper
31-
borderProps={ borderProps }
31+
<ImageEditingProvider
32+
id={ id }
3233
url={ url }
33-
width={ width }
34-
height={ height }
35-
naturalHeight={ naturalHeight }
36-
naturalWidth={ naturalWidth }
37-
/>
38-
<BlockControls>
39-
<ToolbarGroup>
40-
<ZoomDropdown />
41-
<RotationButton />
42-
</ToolbarGroup>
43-
</BlockControls>
44-
45-
46-
{/* <BlockControls>
47-
<ToolbarGroup>
48-
<ZoomDropdown />
49-
<ToolbarItem>
50-
{ ( toggleProps ) => (
51-
<AspectRatioDropdown toggleProps={ toggleProps } />
52-
) }
53-
</ToolbarItem>
54-
<RotationButton />
55-
</ToolbarGroup>
56-
<ToolbarGroup>
57-
<FormControls />
58-
</ToolbarGroup>
59-
</BlockControls> */}
34+
onSaveImage={ onSaveImage }
35+
onFinishEditing={ onFinishEditing }
36+
>
37+
<Cropper
38+
borderProps={ borderProps }
39+
url={ url }
40+
width={ width }
41+
height={ height }
42+
naturalHeight={ naturalHeight }
43+
naturalWidth={ naturalWidth }
44+
/>
45+
<BlockControls>
46+
<ToolbarGroup>
47+
<ZoomDropdown />
48+
<ToolbarItem>
49+
{ ( toggleProps ) => (
50+
<AspectRatioDropdown
51+
toggleProps={ toggleProps }
52+
/>
53+
) }
54+
</ToolbarItem>
55+
<RotationButton />
56+
</ToolbarGroup>
57+
<ToolbarGroup>
58+
<FormControls />
59+
</ToolbarGroup>
60+
</BlockControls>
61+
</ImageEditingProvider>
6062
</ImageCropperProvider>
6163
);
6264
}

‎packages/block-editor/src/components/image-editor/rotation-button.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { useImageEditingContext } from './context';
1414

1515
export default function RotationButton() {
1616
const { cropperState, setCropperState } = useImageCropper();
17+
const { isInProgress } = useImageEditingContext();
1718
const { rotation } = cropperState;
1819
const rotateClockwise = () => {
1920
setCropperState( { rotation: rotation + 90 } );
@@ -23,7 +24,7 @@ export default function RotationButton() {
2324
icon={ rotateRightIcon }
2425
label={ __( 'Rotate' ) }
2526
onClick={ rotateClockwise }
26-
//disabled={ isInProgress }
27+
disabled={ isInProgress }
2728
/>
2829
);
2930
}

‎packages/block-editor/src/components/image-editor/use-save-image.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
66
import { __, sprintf } from '@wordpress/i18n';
77
import { store as noticesStore } from '@wordpress/notices';
88
import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
9+
import { useImageCropper } from '@wordpress/image-cropper';
910

1011
/**
1112
* Internal dependencies
@@ -20,13 +21,13 @@ const messages = {
2021
};
2122

2223
export default function useSaveImage( {
23-
crop,
24-
rotation,
2524
url,
2625
id,
2726
onSaveImage,
2827
onFinishEditing,
2928
} ) {
29+
const { cropperState } = useImageCropper();
30+
const { rotation, croppedArea: crop } = cropperState;
3031
const { createErrorNotice, createSuccessNotice } =
3132
useDispatch( noticesStore );
3233
const [ isInProgress, setIsInProgress ] = useState( false );

‎packages/block-editor/src/components/image-editor/zoom-dropdown.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,15 @@ import { useImageCropper } from '@wordpress/image-cropper';
1515
* Internal dependencies
1616
*/
1717
import { MIN_ZOOM, MAX_ZOOM, POPOVER_PROPS } from './constants';
18+
import { useImageEditingContext } from './context';
1819

1920
function roundToTwo( numValue ) {
2021
return Math.round( numValue * 100 ) / 100;
2122
}
2223

2324
export default function ZoomDropdown() {
2425
const { cropperState, setCropperState } = useImageCropper();
26+
const { isInProgress } = useImageEditingContext();
2527
const { zoom } = cropperState;
2628
const value = ( roundToTwo( zoom * 100 ) || 0 ) + '%';
2729
const setZoom = ( newValue ) => {
@@ -40,7 +42,7 @@ export default function ZoomDropdown() {
4042
label={ __( 'Zoom' ) }
4143
onClick={ onToggle }
4244
aria-expanded={ isOpen }
43-
//disabled={ isInProgress }
45+
disabled={ isInProgress }
4446
/>
4547
) }
4648
renderContent={ () => (

0 commit comments

Comments
 (0)