Skip to content

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

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
noisysocks merged 4 commits into from
Dec 13, 2021
Merged

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

Changes from 1 commit
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
Prev Previous commit
Next Next commit
Remove useMemo
  • Loading branch information
@andrewserong
andrewserong committed Dec 10, 2021
commit 832d1c53e9bca886851050f26907a9a2e6c55339
18 changes: 5 additions & 13 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, useMemo, useState, useRef } from '@wordpress/element';
import { useEffect, 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 @@ -187,18 +187,10 @@ export default function Image( {
// 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 ] );
const naturalWidth =
imageRef.current?.naturalWidth || loadedNaturalWidth || undefined;
const naturalHeight =
imageRef.current?.nautralHeight || loadedNaturalHeight || undefined;

function onResizeStart() {
toggleSelection( false );
Expand Down