Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove confusing icons from Content / Wide layout settings #64862

Closed
2 tasks done
afercia opened this issue Aug 28, 2024 · 4 comments
Closed
2 tasks done

Remove confusing icons from Content / Wide layout settings #64862

afercia opened this issue Aug 28, 2024 · 4 comments
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Aug 28, 2024

Description

In the editor there is a design convention where some controls do have an associated button that 'does something'. IN some cases, it switches the control to an alternative version, in other cases it performs other actions. The button is generally placed after the control.

This pattern establishes a pretty clear convention and it makes sense as the action button is logically and visually placed after the control.

Instead, the 'Content' and 'Wide' sizes settings in Site Eitor > Styles > Layout do have an icon placed after the control but it's just an icon. It's an ornamental icon. There's no button to perform any action.

As a used, I was pretty confused and I did try to click those icons. I thought they were buttons.

These icons break the convention described above. They are unnecessary anr, more importantly, confusing. I'd like to propose to remove them entirely. Screenshot:

Screenshot 2024-08-28 at 09 03 06 2

Step-by-step reproduction instructions

  • Go to Site Eitor > Styles > Layout > Dimensions > Content / Wide
  • Observe the icons placed after the controls are only non-interactive icons.

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
@afercia afercia added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Needs Design Feedback Needs general design feedback. [Package] Block editor /packages/block-editor Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Aug 28, 2024
@afercia
Copy link
Contributor Author

afercia commented Aug 28, 2024

AdditionallyL

  • The two ToolsPanelItem in this UI do have a label prop set that, as far as I can tell, doesn't do anything.
  • Removing the icons could help with making these input use the __next40pxDefaultSize

@afercia afercia self-assigned this Aug 28, 2024
@t-hamano
Copy link
Contributor

In order to apply the 40-pixel size to the Content/Wide controls, removing these icons is suggested as one approach. Please see #64842.

The discussions exchanged here also give us an idea of the context.

@afercia
Copy link
Contributor Author

afercia commented Aug 28, 2024

Thanks @t-hamano for pointing me at the ongoing discussion about this issue. I'd totally agree with this comment:

#64520 (comment)

One drawback with this approach is that we now have decorative icons situated in a location where you often find interactive icon buttons. In other words those icons look clickable.

@afercia
Copy link
Contributor Author

afercia commented Aug 28, 2024

Closing in favor of #64842

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Package] Block editor /packages/block-editor [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

2 participants