Image block resizing: Try allowing snapping at wide full #49888
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show alignment steps Tidy up and add labels Use a resize observer to handle resizes Set a max width to avoid visualizer step appearing beyond screen edges Only show visualizer while resizing Use availableAlignments instead of hard coded array Refactor away from block popover Adjust sizing to parent/root block list Move into separate component file Move more code into effect for optimization Remove export Hack together a version that dynamically uses the parent block list layout Bring back proper styles Fix popover positioning Tidy up css and naming - Rename step to zone - Use the unstyled variant Use text color as the contrast color Allow popover to render inline by overriding slot Show nearest alignment zone label - Register zones into a slot when they mount - use `getDistanceToNearestEdge` to detect nearest zone to mouse pointer - Make Popover render behind the image and receive mouse events - Add CSS to only show highlighted zone Show nearest zone to mouse by hooking into resizeable box events Allow popover to render inline Add unstyled variant to wrapping popover Rename props Rename prop Take padding and margin of layout into account Lessen opacity of background Rename from blockList to layout Reduce need for margin/padding on container Throttle zone detection Ensure popovers that reference iframe are positioned correctly by not applying padding to iframe Fix zone highlighting when layout has padding Remove spacing variable Remove unused dep Add a basic fade-in animation Animate label Update label style Refactor - Move ResizableImageControls to block editor package and rename to ResizableAlignmentControls - Export ResizableAlignmentControls and remove export for BlockAlignmentVisualizer - Move hardcoded alignments to image block Use context for zones and switch to a map instead of a set for storing zone data Add basic snapping Fix incorrect prop name Move nearest zone detection to event handler Update re-resizeable Detect snapping Document code Speed up iframe rendering Avoid removing iframe head and body and reattaching them Make iframe title a prop Use custom snapping algorithm over resizable box algorithm Reintroduce basic snapping while dragging Set alignment on release of mouse Allow snapping from left/right alignments Fix snapping to content width for images that are larger than content width Increase snap threshold Refactor content width snapping fix to image block code Try allowing resize handles on wide and full aligned images Revert "Try allowing resize handles on wide and full aligned images" This reverts commit f8402c2. Revert "Update re-resizeable" This reverts commit 7d7e231. Add some really dodgy animation code Revert "Add some really dodgy animation code" This reverts commit a60d775. Use a framer motion layout animation for snapping Refactor and rename things Remove unused resize observer Refactor - separate popover code from layout code Fix padding being applied to visualizer incorrectly Move styles to the content.scss Remove border from iframe Switch to using the shadow dom instead of an iframe to encapsulate styles Speed up animation Simplify guide styles Remove offset naming Adjust layout popopover to use correct element Try fixing layout block detection Remove non-existant stylesheet import Fix iframe offsetting Remove buggy padding on cover element Use a consistent value for no snapping Use package-lock from trunk Start implementation of new design Hide old guides Support content justifications for new visualization Simplify guides code, remove use of LayoutStyles Move snapping code into a hook Move getOffsetRect to dom package and rename Try: hide full and wide alignments at smaller container sizes Fix snapping Fix - show/hide block interface actions not usable outside dimensions panel Hide block toolbar when resizing Hide block border when using alignment visualizer
…ser before snapping initiates
talldan
added
[Block] Image
|
Size Change: +3 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This is an addendum to #45056, broken out into a separate PR as it'll require a few image block changes that will need some attention in a review
How?
ResizableBoxwhen an alignment is set, which allows the image to adopt a 100% width.TODO - unsnap the image when starting a resize from a wide or full alignment.
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
TBC