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

CSSTidy: preserve leading decimal zeros in Gutenberg #19993

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Jun 1, 2021

Fixes Automattic/wp-calypso#45629

Changes proposed in this Pull Request:

CSSTidy performs some "optimizations" that trigger Gutenberg block validation errors.

To prevent this, we've had to add some "optimizations" of our own to CSSTidy's inner workings. See, for example,
#19935

This PR adds a setting to CSSTidy to tell its optimizer to preserve leading decimal zeros.

Currently, CSSTidy strips the 0 from 0.7 resulting in .7.

For Gutenberg inline styles, 0.7 is a valid CSS value for line-height for example. Where the post body content contains .7, we see block validation errors 😱

Screen Shot 2021-06-01 at 2 56 05 pm

TODO

  • Add unit tests
  • Fix linting issues 😸

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

Nope.

Testing instructions:

Patch your sandbox with the diff created by this PR

Create a paragraph or heading block and select a line-height value of less than 0

<!-- wp:paragraph {"style":{"typography":{"lineHeight":"0.4"}}} -->
<p style="line-height:0.4">AM I VALID? AM I?</p>
<!-- /wp:paragraph -->

Save the post and refresh the page.

You should not see any validation errors, e.g.,

Content generated by `save` function:

<p>AM I VALID? AM I?</p>

Content retrieved from post body:

<p style="line-height:.4;">AM I VALID? AM I?</p>

Unit tests

Run yarn docker:up from the Jetpack repo root directory.

In another terminal run yarn run docker:phpunit --testsuite csstidy.

@ramonjd ramonjd added [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ Csstidy labels Jun 1, 2021
@ramonjd ramonjd requested a review from a team June 1, 2021 05:13
@ramonjd ramonjd self-assigned this Jun 1, 2021
@matticbot
Copy link
Contributor

Caution: This PR has changes that must be merged to WordPress.com
Hello ramonjd! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D62096-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

@ramonjd ramonjd changed the title Initial commit. CSSTidy: preserve leading decimal zeros in Gutenberg Jun 1, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Jun 1, 2021

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: July 6, 2021.
  • Scheduled code freeze: June 28, 2021.

@github-actions github-actions bot added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! Unit Tests labels Jun 1, 2021
Adds a setting to csstidy to tell the optimizer to preserve leading decimal zeros.
For Gutenberg inline styles, `0.7` is a valid CSS value for line-height for example. CSSTidy "optimizes" this to remove the leading zero resulting in `.7`. This triggers block validation errors.
@ramonjd ramonjd force-pushed the update/add-csstidy-config-setting-to-preserve-leading-decimal-zero branch from 5d5261e to a816cd8 Compare June 2, 2021 00:41
@glendaviesnz glendaviesnz added [Status] Needs Team Review and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Jun 13, 2021
Copy link
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

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

Tested well for me on sandbox. I couldn't get the unit tests to run locally, they gave a 'Cannot open file "csstidy.php".' error, but running on CI, so assume there is something broken in my local setup.

@glendaviesnz glendaviesnz added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] Needs Team Review labels Jun 14, 2021
…config-setting-to-preserve-leading-decimal-zero
@jeherve jeherve added this to the jetpack/9.9 milestone Jun 14, 2021
@jeherve jeherve removed the [Status] Needs Review To request a review from Crew. Label will be renamed soon. label Jun 14, 2021
@jeherve jeherve added the [Status] Ready to Merge Go ahead, you can push that green button! label Jun 14, 2021
@ramonjd ramonjd merged commit 88ecfe0 into master Jun 15, 2021
@ramonjd ramonjd deleted the update/add-csstidy-config-setting-to-preserve-leading-decimal-zero branch June 15, 2021 04:15
@github-actions
Copy link
Contributor

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

Thank you!

@github-actions github-actions bot removed the [Status] Ready to Merge Go ahead, you can push that green button! label Jun 15, 2021
@ramonjd
Copy link
Member Author

ramonjd commented Jun 15, 2021

r227276-wpcom

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Custom CSS [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ Touches WP.com Files Unit Tests
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Paragraph Block: Duplicated paragraph tag added to markup
5 participants