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

Search Block: Fix bug with missing color when border color added #34025

Merged
merged 1 commit into from
Aug 12, 2021

Conversation

stacimc
Copy link
Contributor

@stacimc stacimc commented Aug 12, 2021

Description

There was a bug with the Search block color supports due to a missing space between generated class names for color and border color. If a named background color and a named border color were applied to the same Search block, it would appear correctly in the editor but the background color would not be applied properly on the frontend.

How has this been tested?

Manually.

  1. Create a post and insert a Search block.
  2. Select one of the preset values for background color.
  3. Select one of the preset values for border color.
  4. Save the post and view on the frontend.
  5. Verify that the colors and background colors have persisted.

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@stacimc stacimc added the [Type] Bug An existing feature does not function as intended label Aug 12, 2021
@stacimc stacimc self-assigned this Aug 12, 2021
@stacimc stacimc requested a review from ajitbohra as a code owner August 12, 2021 02:06
Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

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

Thanks for the quick fix!

Tests well for me, the border color class names are now socially distancing themselves as they should.

In the editor:
Screen Shot 2021-08-12 at 12 19 46 pm

Before this change:
Screen Shot 2021-08-12 at 12 22 21 pm

After this change:
Screen Shot 2021-08-12 at 12 19 55 pm

@ramonjd ramonjd added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Aug 12, 2021
Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

This LGTM, too, thanks for the fix @stacimc!

Before:

image

After:

image

@andrewserong andrewserong merged commit ae983c9 into trunk Aug 12, 2021
@andrewserong andrewserong deleted the fix/search-block-color-classes branch August 12, 2021 02:47
@github-actions github-actions bot added this to the Gutenberg 11.4 milestone Aug 12, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants