Subscriptions Block: Update subscriptions block to handle CSS unit font sizes

[aaronrobertshaw]

Fixes #18250

Changes proposed in this Pull Request:

• Updates subscription block font size attributes to be strings containing CSS units
• Updates deprecations to migrate numeric pixel only versions to the new format

Jetpack product discussion

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

No changes.

Testing instructions:

1. Load dev site from Jetpack master with Gutenberg plugin installed and active
2. Create a post, add a subscriptions block and modify the block's font size
3. Save the post and reload the editor, you'll receive a validation error
4. Checkout this PR
5. Reload the post and the block should be migrated
6. Tweak the font size again and save
7. Reload the editor and ensure no further block validation errors
8. Check the block still works on the frontend

Note if syncing to wpcom via a8c-wp-env you'll need to manually sync the views.php file to the correct location. One easy way to do this would be to copy the sync'd file to the different location and name the file exists under on wpcom.

cp ~/public_html/wp-content/mu-plugins/jetpack/modules/subscriptions/views.php ~/public_html/wp-content/mu-plugins/widgets/blog-subscription.php

Screenshots

Before	After

Proposed changelog entry for your changes:

• Bug Fix: Prevent Subscription block validation error when customizing font size.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello aaronrobertshaw! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D57652-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.
  
• ✅ Include a changelog entry for any meaningful change.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  

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 🤖

---

If you are an automattician, once your PR is ready for review 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.undefined

---

jetpack plugin:

• Next scheduled release: April 6, 2021.
• Scheduled code freeze: March 29, 2021

[andrewserong]

@aaronrobertshaw this is testing okay for me in the editor, however the custom font size doesn't appear to be showing up on the front end of the site for me (it always renders at the one size, irrespective of the setting I've used in the editor). Is it working for you? It's possible I might be missing a step in my testing setup! (Testing synced to wpcom)

With Barnsbury theme activated

Editor view	Front end view

With Twenty Twenty One activated

With Twenty Twenty One, the width of the text field and the background of the submit button don't appear to be rendering correctly on the front end either (but that doesn't appear to be caused by this change). I believe I encountered the same issue as the one you raised in: #18809 (comment) so not related to this PR per se.

Editor view	Front end view

[aaronrobertshaw]

Thanks for the review @andrewserong!

this is testing okay for me in the editor, however the custom font size doesn't appear to be showing up on the front end of the site for me (it always renders at the one size, irrespective of the setting I've used in the editor). Is it working for you? It's possible I might be missing a step in my testing setup! (Testing synced to wpcom)

Sounds like you are testing by using the a8c-wp-env sync to your sandbox? Unfortunately, that sync doesn't the subscription block's views.php file correctly. On wpcom that file resides in a different location under a different name. The wpcom diff, D57652-code, will handle that or you can manually sync or copy the file into the correct location.

I've updated the PR's test instructions. It is also testing correctly for me on the frontend with that sync'ing issue accounted for.

I believe I encountered the same issue as the one you raised in: #18809 (comment) so not related to this PR per se.

Yep, there are a few quirks about this block in terms of styles/layout. I think it would be good to revisit this block after #18809 and this PR land. Then via a new issue we can find a solution that takes into account both the custom button widths and font sizes.

[andrewserong]

This is testing nicely for me on the front end too now, thanks for the updated testing instructions! I'm now able to set a ridiculously big font-size: 😄

Also confirmed that the migration from an invalid block appears to be working correctly, too. 👍

[apeatling]

Working well for me!

[leogermani]

Tested well for me. Block was correctly migrated and everything worked as expected. Looks good to go.

[jeherve]

Cherry-picked to jetpack/branch-9.5 in d8b5865

[jeherve]

r222019-wpcom