Skip to content

Try showing an alignment visualizer when using the drag handle to resize an image block #45056

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

Closed
talldan wants to merge 20 commits into from
Closed

Try showing an alignment visualizer when using the drag handle to resize an image block #45056

Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
a00b7a4
Add initial visualizer popover, sized to the full-width
talldan Oct 18, 2022
fa9c580
Make snapping more magnetic, requiring a longer dwell time from the u…
talldan Mar 15, 2023
94a401f
Show a tooltip above the snapped alignment
talldan Mar 28, 2023
96f47a3
Avoid horizontal scrollbar when resizing
talldan Mar 28, 2023
f556dbb
Ensure block assumes the correct height when snapping
talldan Mar 28, 2023
cb24c0b
Fix typo
talldan Mar 28, 2023
ccefece
Remove unused CSS
talldan Mar 28, 2023
97e30c5
Remove unused code
talldan Mar 29, 2023
7bef33f
Fix image not inheriting correct size
talldan Apr 3, 2023
975bbeb
Prevent image layout animation unless alignment visualizer is visible
talldan Apr 3, 2023
8671b30
Remove duplicate code
talldan Apr 3, 2023
dc6471f
Fix label wrapping
talldan Apr 4, 2023
e2e478b
Make ResizableAlignmentControls a private api
talldan Apr 4, 2023
25dd8bd
Use an experiment toggle
talldan Apr 4, 2023
1342830
Remove popover usage
talldan Apr 4, 2023
c19f072
Revert changes to Popover
talldan Apr 4, 2023
c18891c
Nest entire visualizer in shadow dom container
talldan Apr 4, 2023
8bcef22
Fix merge conflict issue
talldan Apr 18, 2023
7290e20
Fix aspect ratio calculation
talldan Apr 18, 2023
af59e3b
Fix docs. Not sure how this is related to this branch, so :shrug:
talldan Apr 18, 2023
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 duplicate code
  • Loading branch information
@talldan
talldan committed Apr 18, 2023
commit 8671b30ea3d6e5fd5e0908818118fa739c9f89fe
21 changes: 1 addition & 20 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 @@ -561,25 +561,6 @@ export default function Image( {
// becomes available.
const maxWidthBuffer = maxWidth * 2.5;

const imgInner = (
<img
src={ temporaryURL || url }
alt={ defaultedAlt }
onError={ () => onImageError() }
onLoad={ ( event ) => {
setLoadedNaturalSize( {
loadedNaturalWidth: event.target?.naturalWidth,
loadedNaturalHeight: event.target?.naturalHeight,
} );
} }
ref={ imageRef }
className={ borderProps.className }
style={ {
...borderProps.style,
} }
/>
);

img = (
<ResizableAlignmentControls
allowedAlignments={ [ 'none', 'wide', 'full' ] }
Expand Down Expand Up @@ -609,7 +590,7 @@ export default function Image( {
height: height && ! hasCustomBorder ? height : 'auto',
} }
>
{ imgInner }
{ img }
</ResizableAlignmentControls>
);
}
Expand Down