Block Toolbar: update position when moving blocks #44301
Merged
Conversation
This file contains 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
ciampo
added
[Type] Bug
ciampo
requested review from
youknowriad,
talldan,
jasmussen and
ntsekouras
67 tasks
|
Size Change: +145 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
talldan
approved these changes
Sep 21, 2022
| @@ -47,8 +52,34 @@ function BlockPopover( | |||
| }; | |||
| }, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] ); | |||
|
|
|||
| const [ popoverAnchorRecomputeCounter, forceRecomputePopoverAnchor ] = | |||
| useReducer( ( s ) => s + 1, 0 ); | |||
There was a problem hiding this comment.
I guess it's unlikely, but I'm always concerned about the integer overflowing with this kind of code (Number.MAX_VALUE === Number.MAX_VALUE + 1).
Would a boolean that flips work just as well? Or perhaps using a modulo so that it loops back to zero when it reaches a particular number (Number.MAX_SAFE_INTEGER).
There was a problem hiding this comment.
Good point! I've done that in 5b72aee
| const popoverAnchor = useMemo( () => { | ||
| if ( | ||
| popoverAnchorRecomputeCounter < 0 || |
There was a problem hiding this comment.
Ah, I see that this wouldn't work so well if the counter looped back to zero or if it were a boolean. Though it could start out as null and the check could be popoverAnchorRecomputeCounter === null.
There was a problem hiding this comment.
That check is actually mostly there to make sure that every dependency that is listed for useMemo is actually used in the hook. Technically, the counter would always be equal or greater than 0 — so that check would always be false.
I've added an inline comment to explain this in 6a9bd8c
There was a problem hiding this comment.
I see, I completely misread < 0 as > 0 for some reason!
ntsekouras
approved these changes
Sep 21, 2022
ciampo
force-pushed
the
fix/block-toolbar-update-popover-mover
branch
from
9606af4
to
cae1376
Compare
That's great to hear, I had the same feeling! I also decided to apply the same enhancements suggested by @talldan and apply them to the inbetween inserter, which was using the same technique for updating the popover correctly: cae1376 Let me know if you'd like to give this PR a final look, otherwise I'll do some testing myself and merge once CI is ✅ |
This was referenced Sep 21, 2022
ciampo
added
the
Backport to WP 6.7 Beta/RC
|
@c4rl0sbr4v0 @ockham this one should also be backported if possible. Thank you 🙏 |
|
Too late for Beta 1 I'm afraid. We'll review the next round of PRs with the Backport label for inclusion in Beta 2 in about a week's time 😊 |
That's fine! Is there any action needed from my side (i.e changing the label), or can I assume it will considered for Beta 2 already? |
|
No action needed, the label is enough! 👍 |
|
Thanks for fixing this, it's a very important part of the experience |
|
I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: 1845fda |
ockham
pushed a commit
that referenced
this pull request
Sep 26, 2022
* Block Toolbar: update position when moving blocks * Make sure counter does not overflow * Add explainer for "< 0" check * Apply same enhancements to inbetween inserter
ockham
removed
the
Backport to WP 6.7 Beta/RC
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 27, 2022
Package updates for bug and regression fixes: * @wordpress/block-directory: 3.15.3 * @wordpress/block-editor: 10.0.3 * @wordpress/block-library: 7.14.3 * @wordpress/block-serialization-default-parser: 4.17.1 * @wordpress/blocks: 11.16.3 * @wordpress/components: 21.0.3 * @wordpress/compose: 5.15.2 * @wordpress/core-data: 5.0.3 * @wordpress/customize-widgets: 3.14.3 * @wordpress/edit-post: 6.14.3 * @wordpress/edit-site: 4.14.4 * @wordpress/edit-widgets: 4.14.3 * @wordpress/editor: 12.16.3 * @wordpress/format-library: 3.15.3 * @wordpress/interface: 4.16.3 * @wordpress/list-reusable-blocks: 3.15.3 * @wordpress/nux: 5.15.3 * @wordpress/preferences: 2.9.3 * @wordpress/reusable-blocks: 3.15.3 * @wordpress/server-side-render: 3.15.3 * @wordpress/style-engine: 1.0.2 * @wordpress/widgets: 2.15.3 References: * [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string * [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks * [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes * [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks * [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords * [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash * [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type. * [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe * [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor * [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled * [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter) * [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty * [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA * [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus * [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor * [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels * [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core * [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template * [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks * [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts * [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers * [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header Props bernhard-reiter, cbravobernal. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54335 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 27, 2022
Package updates for bug and regression fixes: * @wordpress/block-directory: 3.15.3 * @wordpress/block-editor: 10.0.3 * @wordpress/block-library: 7.14.3 * @wordpress/block-serialization-default-parser: 4.17.1 * @wordpress/blocks: 11.16.3 * @wordpress/components: 21.0.3 * @wordpress/compose: 5.15.2 * @wordpress/core-data: 5.0.3 * @wordpress/customize-widgets: 3.14.3 * @wordpress/edit-post: 6.14.3 * @wordpress/edit-site: 4.14.4 * @wordpress/edit-widgets: 4.14.3 * @wordpress/editor: 12.16.3 * @wordpress/format-library: 3.15.3 * @wordpress/interface: 4.16.3 * @wordpress/list-reusable-blocks: 3.15.3 * @wordpress/nux: 5.15.3 * @wordpress/preferences: 2.9.3 * @wordpress/reusable-blocks: 3.15.3 * @wordpress/server-side-render: 3.15.3 * @wordpress/style-engine: 1.0.2 * @wordpress/widgets: 2.15.3 References: * [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string * [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks * [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes * [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks * [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords * [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash * [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type. * [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe * [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor * [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled * [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter) * [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty * [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA * [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus * [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor * [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels * [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core * [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template * [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks * [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts * [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers * [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header Props bernhard-reiter, cbravobernal. See #56467. Built from https://develop.svn.wordpress.org/trunk@54335 git-svn-id: http://core.svn.wordpress.org/trunk@53894 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Sep 27, 2022
Package updates for bug and regression fixes: * @wordpress/block-directory: 3.15.3 * @wordpress/block-editor: 10.0.3 * @wordpress/block-library: 7.14.3 * @wordpress/block-serialization-default-parser: 4.17.1 * @wordpress/blocks: 11.16.3 * @wordpress/components: 21.0.3 * @wordpress/compose: 5.15.2 * @wordpress/core-data: 5.0.3 * @wordpress/customize-widgets: 3.14.3 * @wordpress/edit-post: 6.14.3 * @wordpress/edit-site: 4.14.4 * @wordpress/edit-widgets: 4.14.3 * @wordpress/editor: 12.16.3 * @wordpress/format-library: 3.15.3 * @wordpress/interface: 4.16.3 * @wordpress/list-reusable-blocks: 3.15.3 * @wordpress/nux: 5.15.3 * @wordpress/preferences: 2.9.3 * @wordpress/reusable-blocks: 3.15.3 * @wordpress/server-side-render: 3.15.3 * @wordpress/style-engine: 1.0.2 * @wordpress/widgets: 2.15.3 References: * [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string * [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks * [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes * [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks * [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords * [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash * [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type. * [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe * [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor * [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled * [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter) * [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty * [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA * [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus * [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor * [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels * [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core * [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template * [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks * [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts * [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers * [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header Props bernhard-reiter, cbravobernal. See #56467. Built from https://develop.svn.wordpress.org/trunk@54335 git-svn-id: https://core.svn.wordpress.org/trunk@53894 1a063a9b-81f0-0310-95a4-ce76da25c4cd
ootwch
pushed a commit
to ootwch/wordpress-develop
that referenced
this pull request
Nov 4, 2022
Package updates for bug and regression fixes: * @wordpress/block-directory: 3.15.3 * @wordpress/block-editor: 10.0.3 * @wordpress/block-library: 7.14.3 * @wordpress/block-serialization-default-parser: 4.17.1 * @wordpress/blocks: 11.16.3 * @wordpress/components: 21.0.3 * @wordpress/compose: 5.15.2 * @wordpress/core-data: 5.0.3 * @wordpress/customize-widgets: 3.14.3 * @wordpress/edit-post: 6.14.3 * @wordpress/edit-site: 4.14.4 * @wordpress/edit-widgets: 4.14.3 * @wordpress/editor: 12.16.3 * @wordpress/format-library: 3.15.3 * @wordpress/interface: 4.16.3 * @wordpress/list-reusable-blocks: 3.15.3 * @wordpress/nux: 5.15.3 * @wordpress/preferences: 2.9.3 * @wordpress/reusable-blocks: 3.15.3 * @wordpress/server-side-render: 3.15.3 * @wordpress/style-engine: 1.0.2 * @wordpress/widgets: 2.15.3 References: * [WordPress/gutenberg#44233 Gutenberg PR 44233] – Blocks: Fix searching of blocks when description is non-string * [WordPress/gutenberg#44301 Gutenberg PR 44301] – Block Toolbar: update position when moving blocks * [WordPress/gutenberg#44334 Gutenberg PR 44334] – Global Styles: Re-add styles that were removed, for classic themes * [WordPress/gutenberg#44351 Gutenberg PR 44351] – Comments block: Support nested comments settings in the comments blocks * [WordPress/gutenberg#44448 Gutenberg PR 44448] – Add a correct TS signature for useEntityRecords * [WordPress/gutenberg#44315 Gutenberg PR 44315] – Pullquote: fix transform to quote crash * [WordPress/gutenberg#44446 Gutenberg PR 44446] – Fix spacing property generation in flow layout type. * [WordPress/gutenberg#44408 Gutenberg PR 44408] – Upgrade react-easy-crop to bring in fix for site editor iframe * [WordPress/gutenberg#44406 Gutenberg PR 44406] – Style engine: kebab case preset slugs in the editor * [WordPress/gutenberg#44209 Gutenberg PR 44209] – Fixing padding on the post editor when RootPaddingAwareAlignments setting is enabled * [WordPress/gutenberg#42950 Gutenberg PR 42950] – Popover: fix limitShift logic by adding iframe offset correctly (and a custom shift limiter) * [WordPress/gutenberg#44337 Gutenberg PR 44337] – Submenu block href only if url is not empty * [WordPress/gutenberg#44291 Gutenberg PR 44291] – Add role=application to list view to prevent browse mode triggering in NVDA * [WordPress/gutenberg#44283 Gutenberg PR 44283] – Navigation block: Fix submenu colors for imported classic menus * [WordPress/gutenberg#44282 Gutenberg PR 44282] – Fix popover stacking in the customize widgets editor * [WordPress/gutenberg#44247 Gutenberg PR 44247] – Spacing presets: switch to using numbers instead of t-shirt sizes for labels * [WordPress/gutenberg#44299 Gutenberg PR 44299] – Backport template creation changes from core * [WordPress/gutenberg#44294 Gutenberg PR 44294] – [Block Library - Query Loop]: Fix broken preview in specific category template * [WordPress/gutenberg#44287 Gutenberg PR 44287] – [Block Library]: Rename Comments pagination inner blocks * [WordPress/gutenberg#44256 Gutenberg PR 44256] – Avoid showing the recursion warning in previews when replacing template parts * [WordPress/gutenberg#44265 Gutenberg PR 44265] – Blocks: officially deprecated the children and node matchers * [WordPress/gutenberg#44251 Gutenberg PR 44251] – Global styles: Remove the beta label from global styles header Props bernhard-reiter, cbravobernal. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54335 602fd350-edb4-49c9-b593-d223f7449a82
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?
Fixes #44220
Fixes partially #44281 (only the disappearing part is left)
Use a
MutationObserverto make sure that the Block Toolbar updates its position correctly when a block is moved up / downWhy?
Restoring the intended behaviour of the block toolbar.
How?
Using a Mutation Observer to track the changes to the block's
transforminline style attribute, so that we can re-compute the Popover'sanchor(which causes thePopoverto recompute its position correctly).This technique was previously implemented directly in the
Popovercomponent via the__unstableObservedElementprop, which we decided to remove in #43617 while trying to simplify the component's logic.Testing Instructions
Screenshots or screencast
Kapture.2022-09-20.at.17.10.06.mp4