Avatar: Refactor settings panel to use ToolsPanel

[Infinite-Null]

Part of: #67813

What?

Refactored Avatar Block code to include ToolsPanel instead of PanelBody.

Screenshots:

Before	After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

Thanks for the PR!

Everything is working as expected, but there are some reported issues with the order of the controls not matching the order of the dropdown items (See this comment):

We'll probably need to resolve that issue before we can ship this PR.

[Mamaduka]

Hi, @Infinite-Null

Do you have time to follow up on this PR?

[Infinite-Null]

Sure @Mamaduka

[Infinite-Null]

Hi @Mamaduka and @t-hamano ,
I’ve made the necessary changes and moved the conditional addition of settings to the very end so that it matches the expected order. Please let me know if there’s anything else I should update!

[t-hamano]

moved the conditional addition of settings to the very end so that it matches the expected order.

I don't think this is an ideal solution. This may be a problem that should be fixed on the ToolsPanel component side.

For now, I personally prefer to accept this issue and prioritize the migration to the TooslPanel component. See #67813 (comment)

@Mamaduka @fabiankaegy What do you think?

[Infinite-Null]

Sure @t-hamano, I have reverted my refactor changes 😄

[t-hamano]

LGTM! Let's wait and see what others think about this comment before merging.

[Infinite-Null]

Sure @t-hamano 🎉

[Mamaduka]

For now, I personally prefer to accept this issue and prioritize the migration to the TooslPanel component

Makes sense. Retaining correct ordering is a general SlotFill issue.

[Mamaduka]

A small interesting observation regarding ComboboxControl. I noticed that resetting the userId value to undefined doesn't clear out the combobox selection. It works if I change the reset value to null.

This could be an intentional side-effect or a bug. I think it's worth investigating separately, if we can reproduce the same problem in isolation. cc @WordPress/gutenberg-components

Screencast

CleanShot.2025-06-12.at.16.16.13.mp4

[ciampo]

@Mamaduka I'd have to look deeper into the code to let you know whether this is working as intended or a bug — but, at least philosophically, it does follow the controlled/uncontrolled pattern that we've implementing rencently on some component: when a component is controlled, "no value" should be expressed with null (and not undefined).

[t-hamano]

it does follow the controlled/uncontrolled pattern that we've implementing rencently on some component: when a component is controlled, "no value" should be expressed with null (and not undefined).

After looking into this, it seems like this is indeed intentional behavior.

The ComboboxControl component uses the useControlledValue hook internally. In the useControlledValue hook, if the value is undefined, it is considered to be in an "uncontrolled state":

gutenberg/packages/components/src/utils/hooks/use-controlled-value.ts

Line 26 in 386df00

const hasValue = typeof valueProp !== 'undefined';

Related PRs:

• Add useControlledValue #33039
• ComboboxControl: add unit tests #42403

[Mamaduka]

That makes sense, thank you both for the feedback.