Design Tools: Fix last ToolsPanelItem styling

[aaronrobertshaw]

Fixes: #56470

What?

Updates ToolsPanelItem to use useLayoutEffect for its registration hook to prevent a race condition causing a rendering glitch in a few browsers for the last panel item.

Kudos to @t-hamano for the suggested fix and the debugging efforts of @ciampo and @andrewserong 🙇

Why?

Prevents a rendering glitch causing the appearance of a broken layout in the color panel.

How?

• Switch the panel item registration hook to useLayoutEffect

Testing Instructions

1. Edit a post and add a couple of blocks to it that have color support
2. Select some of the blocks and select background colors for them only
3. Switch between blocks and confirm that there is no space between the background color button and the text color above it
4. Now try adding some other element colors for blocks (e.g. link, heading etc) and select a color for the last color control in the panel
5. Again, switch between blocks and confirm the layout of the color controls is as expected

Screenshots or screencast

Before	After

[andrewserong]

+1 Nice debugging everyone, great work coming up with a suggested fix @t-hamano and thanks for putting up a PR @aaronrobertshaw!

This is testing really well for me, and I haven't been able to break it. The gap is consistently resolved for me, and otherwise the ToolsPanel and its items appears to behave just as on trunk.

Before

After

LGTM! ✨

[youknowriad]

I think this PR might have had a small but noticeable impact on the performance of "block select" and "typing within container". Do you think there's something to be done here?

[aaronrobertshaw]

@ciampo do you have any ideas on how to avoid the useLayoutEffect?

I'm coming up short on options other than perhaps adding a means of filtering the items on which the first and last classes can be applied. That, I know, is a bit of a hack and not desirable, but works.

[youknowriad]

Maybe useLayoutEffect is fine, maybe we're doing some heavy stuff within it. I have no idea here, just sharing random thoughts

[ciampo]

Yeah I agree with Riad — I don't think the issue is about using useLayoutEffect per se, but probably that registering/deregistering items may be running some heavy functions and/or cause multiple re-renders across components. And switching from useEffect to useLayoutEffect suddenly made that complexity matter most due to the different timing of the hooks