Skip to content

Add Clear button for Overlay color option in Cover Block#63580

Merged
ndiego merged 1 commit intoWordPress:trunkfrom
dhananjaykuber:fix/add-clear-button-to-overlay-color
Jul 16, 2024
Merged

Add Clear button for Overlay color option in Cover Block#63580
ndiego merged 1 commit intoWordPress:trunkfrom
dhananjaykuber:fix/add-clear-button-to-overlay-color

Conversation

@dhananjaykuber
Copy link
Copy Markdown
Contributor

Fixes #63571

What?

This PR adds a clear button for the overlay color in the Cover block inspector controls, similar to the existing clear buttons for text and heading colors.

Why?

The Cover block currently lacks a clear button for the overlay color, which is inconsistent with other color settings like text and heading colors.

How?

Added clearable: true in ColorGradientSettingsDropdown component

Testing Instructions

  1. Open a post or page in the WordPress editor.
  2. Insert a Cover block.
  3. Apply an overlay color to the Cover block.
  4. Verify the new "Clear Overlay Color" button appears in the color settings of the Cover block inspector controls.
  5. Click the "Clear Overlay Color" button and ensure the overlay color is removed, reverting to its default state.

Screenshots or screencast

Screenshot 2024-07-15 at 10 43 27 PM

@github-actions
Copy link
Copy Markdown

github-actions bot commented Jul 15, 2024

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @EldarAgalarov.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: EldarAgalarov.

Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

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

@ndiego ndiego added [Type] Enhancement A suggestion for improvement. [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Jul 15, 2024
@ndiego ndiego self-requested a review July 15, 2024 18:55
Copy link
Copy Markdown
Member

@ndiego ndiego left a comment

Choose a reason for hiding this comment

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

Great addition. Works as expected.

Text Heading Overlay
image image image

@ndiego
Copy link
Copy Markdown
Member

ndiego commented Jul 15, 2024

@EldarAgalarov, do you have a WordPress.org account? If so, can you link it to your GitHub account (see the instructions). This will ensure you get the appropriate props for the original issue. Thanks!

@Mamaduka
Copy link
Copy Markdown
Member

@afercia, I think you created a similar issue to make this action consistent in editor color pickers. Sorry if I'm misremembering something 🙇

@afercia
Copy link
Copy Markdown
Contributor

afercia commented Jul 16, 2024

@Mamaduka yes, thanks for the ping.

In #63310 I'm illustrating how all these popovers with no explicit buttons to 'Cancel' and 'Save' are extremely confusing for keyboard users.

When using the keyboard, there are some expected behaviors:

  • Dismissing an UI by pressing a 'Close' button or pressing the Escape key should revert any change and close the UI. This is the expected behavior as in 'cancel current operation'.
  • Instead, many of these popovers set the new value onChange. Using onChange may work in an inline form but it's les sthan ideal in a popover or in a modal dialog. Because of their own nature, these UIs are 'dialogs' where it is expected to have explicit buttons to Save and Cancel.

@ndiego
Copy link
Copy Markdown
Member

ndiego commented Jul 16, 2024

I love the exploration in #63310, but this does not block the consistency improvement in this PR, correct @Mamaduka @afercia?

@Mamaduka
Copy link
Copy Markdown
Member

@ndiego, it's not a blocker. I was just connecting the dots.

Feel free to merge this ✅

@afercia
Copy link
Copy Markdown
Contributor

afercia commented Jul 16, 2024

@ndiego having a Clear button is definitely an improvement. 👍🏽

@ndiego ndiego merged commit f2a751b into WordPress:trunk Jul 16, 2024
@github-actions github-actions bot added this to the Gutenberg 18.9 milestone Jul 16, 2024
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jul 18, 2024
)

Co-authored-by: dhananjaykuber <dhananjaykuber@git.wordpress.org>
Co-authored-by: ndiego <ndiego@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Cover Block: Missing Clear button for Overlay color

4 participants