WhatsApp block: Increase specificity for background styling

[stacimc]

Fixes #18688

Changes proposed in this Pull Request:

• When the WhatsApp button is focused on the frontend, the icon disappears. This is caused by a style from the Twenty Twenty One theme applying a background style that overrides the block style when focused. This PR adds a selector with higher specificity to make sure the background styling is not overridden.
• Also a small tweak to the editor styles to correctly center the button text and remove unnecessary bottom border in some themes.

Notes
Adding the :focus selector was not enough to increase the specificity; I also had to select on the parent div.wp-block-jetpack-whatsapp-button. I added this in a separate selector rather than applying to all of the WhatsApp button styles to prevent the styling from breaking if the user deletes the parent block in the code editor.

Jetpack product discussion

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

Testing instructions:

• Sync this branch.
• Activate the Twenty Twenty One theme.
• Create a new post and insert a WhatsApp button block.
• View the post on the frontend.
• Click on the button and observe that the icon does not disappear.
• Clicking will redirect the page, so you can also test by forcing the ":focus" state in the Chrome devtools or Tabbing to the component in order to focus it.

Before

After

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello stacimc! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D59526-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[github-actions]

Thank you for your PR!

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

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ 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 🤖

---

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: April 13, 2021.
• Scheduled code freeze: April 6, 2021.

[andrewserong]

This is looking good to me @stacimc and tests nicely, I tried it with a couple of different themes applied to confirm it doesn't regress anything.

In the process I found a couple of subtle other styling issues with the WhatsApp block. In the editor with Seedlet or Spearhead themes, the line height gets overridden and the text is slightly off vertically within the editor (but not on the front end). It also adds a 1px bottom border to the button:

If I add the following to the main a.whatsapp-block__button selector, I can get it back to looking normal in the editor:

line-height: 36px; // 20px font size + 16 px padding
border: none;

Not sure if you want to include it in this PR, if not I'm happy to open up a separate PR for it 🙂

[stacimc]

Thanks @andrewserong, well spotted. Added!

[andrewserong]

Thanks for adding in the extra CSS @stacimc! Looks like the CI jobs are complaining that the PR needs a rebase, but it's testing well for me now, across Twenty Twenty, Twenty Twenty One, Spearhead, Seedlet, Barnsbury and Mayland themes.

I notice that the vertical position of the text feels slightly different on each of these themes, which is most likely normal... if we wanted to, we could possibly tweak the line-height down slightly to 32px to even out the difference between some of the themes, but I think I might have been staring at this button for too long now, it's probably fine how it is 😅

[jeherve]

Looks good to me. 🚢

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D59526-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[andrewserong]

r224577-wpcom