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

Jump to bottom

Image: Fix resizer controls being hidden in Safari when switching between alignments #37210

Merged
merged 4 commits into from
Dec 13, 2021
Merged

Image: Fix resizer controls being hidden in Safari when switching between alignments #37210

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
590dd73
Image: Update naturalWidth and naturalHeight to pull from image ref i…
andrewserong Dec 8, 2021
62d08a6
Re-introduce onLoad setState behaviour to allow fallback while croppi…
andrewserong Dec 8, 2021
832d1c5
Remove useMemo
andrewserong Dec 10, 2021
bb7301d
Re-instate useMemo as removing it caused the resizer to disappear int…
andrewserong Dec 10, 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
40 changes: 32 additions & 8 deletions packages/block-library/src/image/image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {
__experimentalImageEditor as ImageEditor,
__experimentalImageEditingProvider as ImageEditingProvider,
} from '@wordpress/block-editor';
import { useEffect, useState, useRef } from '@wordpress/element';
import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
import { __, sprintf, isRTL } from '@wordpress/i18n';
import { getFilename } from '@wordpress/url';
import { createBlock, switchToBlockType } from '@wordpress/blocks';
Expand Down Expand Up @@ -79,6 +79,7 @@ export default function Image( {
context,
clientId,
} ) {
const imageRef = useRef();
const captionRef = useRef();
const prevUrl = usePrevious( url );
const { allowResize = true } = context;
Expand Down Expand Up @@ -141,7 +142,10 @@ export default function Image( {
);
const isLargeViewport = useViewportMatch( 'medium' );
const isWideAligned = includes( [ 'wide', 'full' ], align );
const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
const [
{ loadedNaturalWidth, loadedNaturalHeight },
setLoadedNaturalSize,
] = useState( {} );
const [ isEditingImage, setIsEditingImage ] = useState( false );
const [ externalBlob, setExternalBlob ] = useState();
const clientWidth = useClientWidth( containerRef, [ align ] );
Expand Down Expand Up @@ -179,6 +183,27 @@ export default function Image( {
}
}, [ url, prevUrl ] );

// Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural
// width and height. This resolves an issue in Safari where the loaded natural
// witdth and height is otherwise lost when switching between alignments.
// See: https://github.com/WordPress/gutenberg/pull/37210.
const { naturalWidth, naturalHeight } = useMemo( () => {
return {
naturalWidth:
imageRef.current?.naturalWidth ||
loadedNaturalWidth ||
undefined,
naturalHeight:
imageRef.current?.naturalHeight ||
loadedNaturalHeight ||
undefined,
};
}, [
loadedNaturalWidth,
loadedNaturalHeight,
imageRef.current?.complete,
] );

function onResizeStart() {
toggleSelection( false );
}
Expand Down Expand Up @@ -411,13 +436,12 @@ export default function Image( {
alt={ defaultedAlt }
onError={ () => onImageError() }
onLoad={ ( event ) => {
setNaturalSize(
pick( event.target, [
'naturalWidth',
'naturalHeight',
] )
);
setLoadedNaturalSize( {
loadedNaturalWidth: event.target?.naturalWidth,
loadedNaturalHeight: event.target?.naturalHeight,
} );
} }
ref={ imageRef }
/>
{ temporaryURL && <Spinner /> }
</>
Expand Down