Replace outdated size controls in core blocks

[t-hamano]

Description

ImageSizeControl (__experimentalImageSizeControl) was marked as deprecated in #51545.

However, there are two core blocks that use this component:

• Media & Text Media & Text: Replace the deprecated __experimentalImageSizeControl with ResolutionTool #57540
• Latest Posts

Just as this API in the image block was replaced by another API in #51545, I think it needs to be replaced by another API in these two blocks as well.

This issue has had its tasks/objectives updated. See this comment.

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[mirka]

I've noticed that when you search for the string 25, 50, 75, 100, there are also two other blocks that implement a custom version of this outdated control:

• Button block (related: Button Block: Allow custom width #62247)
• Search block

These should probably also be switched to DimensionTool, is that correct?

I'm going to go ahead and change the title of this issue so it reflects that __experimentalImageSizeControl is not currently deprecated anymore, and that there are other blocks to be switched over as well.

[t-hamano]

I'm going to go ahead and change the title of this issue so it reflects that __experimentalImageSizeControl is not currently deprecated anymore, and that there are other blocks to be switched over as well.

Yes, thanks for the update!

These should probably also be switched to DimensionTool, is that correct?

Since the only setting is the width, I don't think it needs to be switched to the DimensionsPanel. I think we can simply replace it with the recommended component.

Is the recommended component here the ToggleGroupControl? If so, I imagine it would look something like this:

I think the important bit is that we explicitly add an Auto ( or None) option so that we can reset the width.

[mirka]

I'm not against switching to ToggleGroupControl, since that's already better than what's in trunk. I was just thinking we might as well switch to a more standard UI pattern that also allows arbitrary values, for example as requested in #62247.

[t-hamano]

Perhaps we need a component that consists of the ToggleGroupControl and other input field UIs, like the FontSizePicker component?

In addition to RangeControl and UnitControl, we may also be able to use SizeControl, as proposed in #62866.

The Search block has both a field for entering an arbitrary width and the ButtonGroup, so we may be able to try applying the new component to this block first:

By the way, a design update has been proposed for ToggleGroupControl: #64439

[mirka]

In #65339 we will be working on an incremental update to swap out all the ButtonGroups to ToggleGroupControls. That probably won't fully address this issue, but at least it will fix the outdated styling and accessibility issues.

[t-hamano]

Thanks for letting me know. Perhaps once #65346 and #65340 are merged, this issue can be closed?

[t-hamano]

All ButtonGroup components in the core blocks have been replaced with ToggleGroupControl, so I think this issue can be closed.