Skip to content

Ensure block toolbar doesn't overlap block by modifying forcePosition and shift popover props #42887

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
talldan merged 20 commits into from
Aug 23, 2022
Merged

Ensure block toolbar doesn't overlap block by modifying forcePosition and shift popover props #42887

Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
8224e2b
Flip popover placement in SelectedBlockPopover component
talldan Aug 2, 2022
1b1e68b
Adjust shift/forcePosition props instead of placement
talldan Aug 12, 2022
b191f72
Remount popover when attached to a different block
talldan Aug 12, 2022
558ce49
Remove key prop
talldan Aug 18, 2022
161d2f1
Update hook to use an effect and handle window resize event
talldan Aug 18, 2022
db3c7bb
Fix props not changing when elements are changed. Tidy up code and ad…
talldan Aug 18, 2022
a7de679
Remove any unrelated changes
talldan Aug 18, 2022
506ae6f
Handle content ref being undefined - fixes widget editor errors
talldan Aug 18, 2022
5be2bd4
Update toolbar popover props on block movement
talldan Aug 19, 2022
fda157e
Use dynamic toolbar height in hook
talldan Aug 19, 2022
6e2be7d
Improve comments
talldan Aug 19, 2022
9ec515c
Add resize observer for block
talldan Aug 19, 2022
eb03600
Refactor into seperate hooks
talldan Aug 19, 2022
e5c20cb
Revert "Refactor into seperate hooks"
talldan Aug 19, 2022
6f2e887
Ensure the resize observer is using the correct view
talldan Aug 19, 2022
bc43d19
Refactor update on block move to a different effect to reduce event b…
talldan Aug 19, 2022
4c3add5
Fix doc block description
talldan Aug 22, 2022
ad97614
Add missing hook dependency
talldan Aug 22, 2022
07ff4b0
Switch to useLayoutEffect
talldan Aug 22, 2022
d4c5772
Use lazy initial state
talldan Aug 23, 2022
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
Switch to useLayoutEffect
  • Loading branch information
@talldan
talldan committed Aug 22, 2022
commit 07ff4b07332d8ef872a6c0b128c89c639716b9dc
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { useRefEffect } from '@wordpress/compose';
import { useSelect } from '@wordpress/data';
import { useCallback, useEffect, useState } from '@wordpress/element';
import { useCallback, useLayoutEffect, useState } from '@wordpress/element';

/**
* Internal dependencies
Expand Down Expand Up @@ -87,10 +87,10 @@ export default function useBlockToolbarPopoverProps( {
// Update props when the block is moved. This also ensures the props are
// correct on initial mount, and when the selected block or content element
// changes (since the callback ref will update).
useEffect( updateProps, [ blockIndex, updateProps ] );
useLayoutEffect( updateProps, [ blockIndex, updateProps ] );

// Update props when the viewport is resized or the block is resized.
useEffect( () => {
useLayoutEffect( () => {
if ( ! contentElement || ! selectedBlockElement ) {
return;
}
Expand Down