Skip to content

Design Tools: Fix last ToolsPanelItem styling#56536

Merged
aaronrobertshaw merged 2 commits intotrunkfrom
fix/color-panel-last-item-glitch
Nov 27, 2023
Merged

Design Tools: Fix last ToolsPanelItem styling#56536
aaronrobertshaw merged 2 commits intotrunkfrom
fix/color-panel-last-item-glitch

Conversation

@aaronrobertshaw
Copy link
Copy Markdown
Contributor

@aaronrobertshaw aaronrobertshaw commented Nov 27, 2023

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
Screenshot 2023-11-27 at 11 39 46 am Screenshot 2023-11-27 at 11 39 14 am

@aaronrobertshaw aaronrobertshaw added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Nov 27, 2023
@aaronrobertshaw aaronrobertshaw self-assigned this Nov 27, 2023
@aaronrobertshaw aaronrobertshaw mentioned this pull request Nov 27, 2023
Closed
andrewserong
andrewserong approved these changes Nov 27, 2023
View reviewed changes
Copy link
Copy Markdown
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+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

2023-11-27 13 51 35

After

2023-11-27 13 51 56

LGTM! ✨

@aaronrobertshaw aaronrobertshaw merged commit 0246a6b into trunk Nov 27, 2023
@aaronrobertshaw aaronrobertshaw deleted the fix/color-panel-last-item-glitch branch November 27, 2023 03:29
@github-actions github-actions bot added this to the Gutenberg 17.2 milestone Nov 27, 2023
@andrewserong andrewserong mentioned this pull request Nov 27, 2023
Closed
7 tasks
@youknowriad
Copy link
Copy Markdown
Contributor

youknowriad commented Nov 30, 2023

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
Copy link
Copy Markdown
Contributor Author

aaronrobertshaw commented Dec 1, 2023

@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
Copy link
Copy Markdown
Contributor

youknowriad commented Dec 1, 2023

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

@ciampo
Copy link
Copy Markdown
Contributor

ciampo commented Dec 1, 2023

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

@jsnajdr jsnajdr mentioned this pull request Sep 19, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@andrewserong andrewserong andrewserong approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@ciampo ciampo Awaiting requested review from ciampo

@t-hamano t-hamano Awaiting requested review from t-hamano

Assignees

@aaronrobertshaw aaronrobertshaw

Labels

[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 17.2

Development

Successfully merging this pull request may close these issues.

Design Tools: Broken layout in color panel

4 participants

@aaronrobertshaw @youknowriad @ciampo @andrewserong