jetpack icon indicating copy to clipboard operation
jetpack copied to clipboard
verified publisher icon Automattic

Button Block: ensure no borders get added by default browser rules

Open jeherve opened this issue 3 years ago • 3 comments

Fixes https://github.com/Automattic/themes/issues/6068 Fixes #25018

Changes proposed in this Pull Request:

This addresses an issue that was brought up in https://github.com/Automattic/themes/issues/6068

When themes do not include any styles that reset the default button browser styles, the Jetpack button block will display borders on the frontend. To avoid that, we add our own reset, except when the button uses the "outline" styles, where we do want to show a border.

The danger here is that those styles will overwrite button border styles that may have been set by the theme.

Jetpack product discussion

  • N/A

Does this pull request change what data or activity we track or use?

  • No

Testing instructions:

  • Start with a site using the Twenty Twenty Two theme.
  • In a new post, add 2 blocks that use the Jetpack button block: the form block as well as the Revue block are good examples.
  • In one of those blocks, use the default "fill" block style, and in the other use the "outline" style.
  • On the frontend, the button should not have a border when using the "fill" block style.

jeherve avatar Jun 06 '22 12:06 jeherve

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • :white_check_mark: Include a description of your PR changes.
  • :white_check_mark: All commits were linted before commit.
  • :white_check_mark: Add a "[Status]" label (In Progress, Needs Team Review, ...).
  • :white_check_mark: Add testing instructions.
  • :white_check_mark: Specify whether this PR includes any changes to data or privacy.
  • :white_check_mark: Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation :robot:

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped. Then, add the "[Status] Needs Team review" label and ask someone from your team review the code. Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

Jetpack plugin:

  • Next scheduled release: May 2, 2023.
  • Scheduled code freeze: April 24, 2023.

github-actions[bot] avatar Jun 06 '22 12:06 github-actions[bot]

LGTM from a code perspective. Do we have an example of a theme that uses borders on filled buttons to check with?

I see design review is still requested, so I'm not going to hit "approve" just yet. Ping or re-add the Needs Review tag when that's ready.

anomiex avatar Jun 10 '22 13:06 anomiex

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run

bin/jetpack-downloader test jetpack fix/button-reset-border

to get started. More details: p9dueE-5Nn-p2

github-actions[bot] avatar Sep 28 '22 21:09 github-actions[bot]

I'll merge this one, since it's been sitting here for a while.

jeherve avatar Mar 31 '23 18:03 jeherve