Skip to content

Move the palette Randomize colors to the edit palette panel and remove the color previews from the edit palette button labeling #66169

Open

Description

Description

Splitting this out from #65124
Please refer to the conversation on that PR and issue.

  • The 'Edit palette' button uses an unique, inconsistent, design as the visual labeling includes some 'color previews'. This is inconsistent and confusing.
  • The colors preview are supposed to change when clicking the 'Randomize colors' button below them. However, this doesn't work for all themes. For example with Twenty Twenty-Four no changes are shown at all. The previews are aribtrarily limited to the first 5 colors provided by the theme. Depending on the color, the randomization may not genereate any change (or may generate barely visible changes).
  • The 'Randomize colors' button should be better placed one level deeper into the edit palette panel, where the entire color palette is shown. This way, randomized colors will eb shown for the entire palette.

In the animated GIFs below, with Twenty Twenty-Four or any other theme with the first 5 colors that aren't changed by the randomization:

  • Current: No change is shown.
  • Proposed: Randomizaiton moved to the edit palette panel, where the entire palette is shown and not arbitrarilu limited to the first 5 colors.
Current Proposed
before after

Step-by-step reproduction instructions

  • Set Twenty Twenty-Four as active theme.
  • Go to Site editor > Styles > Colors
  • Observe the 'Palette' section.
  • Observe the colors preview are places inside the 'edit palette' button, which is an unique and inconsistent pattern.
  • Observe that clicking the 'Randommie colors' button doesn't show any change in the colors preview.

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Edit Site/packages/edit-site/packages/edit-site[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions