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

Disable CSSTidy property shorthand optimization in the editor or headstart #21891

Merged
merged 2 commits into from
Nov 29, 2021

Conversation

kraftbj
Copy link
Contributor

@kraftbj kraftbj commented Nov 29, 2021

Summary:
This fixes block validation errors, shown in the editor on a blank page load and also fixes block validation issues associated with the pub/payton homepage starter content.

Building on the work in D69931-code and D70357-code

The gutenberg editor does not support property shorthands such as padding: 10px 20px; instead, the property must be specified in long form padding-top:10px; padding-right:20px; etc.

The CSSTidy processor is used to optimise css both when page content is fetched, and when headstart is run. We are currently questioning whether it is still a useful part of wordpress.com https://[private link]

We override CSSTidy's filter_attr function and there is already some code with the intention of disabling the shorthand optimization in the gutenberg editor. But it only checks whether the _gutenberg_nonce is present. It appears that other requests are made when the editor is loaded that do not contain the nonce, but that will still be validated by gutenberg. I haven't determined the source of these requests, but I believe that they are the requests to load block patterns for the editor. In any case, they are returning shorthand properties to the block editor which, as a result, is logging validation errors to the console.

This investigation was originally started to debug validation errors with the pub/payton theme. p1635985973066500-slack-CBTN58FTJ. Disabling the shorthand property optimization for headstart prevents the block validation issues specific to the pub/payton theme.

Test Plan:
with a sandboxed test site:

Install the payton theme to a test site
wp theme activate pub/payton --url=[mytestsite][private link]

Sandbox the headstart_copy_attachment job, with the following code. in 0-sandbox.php

function sandbox_async_job_filter( $sandboxed, $type ) {
    return in_array( $type, array(
        'headstart_copy_attachment',
    ) );
}

add_filter( 'sandbox_async_job', 'sandbox_async_job_filter', 10, 2 );

Run headstart (delting existing content!)
wp headstart run --url=[mytestsite][private link] --user=myusername --delete-content

then in the php error log there will be three lines as follows

[24-Nov-2021 05:50:30 UTC] Sandboxed Job # 65711505536 (headstart_copy_attachment_sandboxed) (prefix: wpj_) - run with ~/public_html/async-jobs/tester.php 65711505536 wpj_
[24-Nov-2021 05:50:30 UTC] Sandboxed Job # 65711505609 (headstart_copy_attachment_sandboxed) (prefix: wpj_) - run with ~/public_html/async-jobs/tester.php 65711505609 wpj_
[24-Nov-2021 05:50:34 UTC] Sandboxed Job # 65711507043 (headstart_copy_attachment_sandboxed) (prefix: wpj_) - run with ~/public_html/async-jobs/tester.php 65711507043 wpj_

Copy the tester.php commands and run the jobs.

Then check that the content of the homepage is valid!

Open the homepage in the editor.
All blocks should load successfully
Open the js console.
There should be no block validation errors.

Reviewers: arthur791004, philipmjackson, ramonopoly, fullofcaffeine

Reviewed By: arthur791004, philipmjackson, fullofcaffeine

Subscribers: fullofcaffeine, simison, philipmjackson, arthur791004, ramonopoly

Tags: #touches_jetpack_files

Differential Revision: D70425-code

This commit syncs r235710-wpcom.

Changes proposed in this Pull Request:

  • Disables CSSTidy properties that lead to block breakage.

Jetpack product discussion

p1635985973066500-slack-CBTN58FTJ

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

No.

Testing instructions:

  • Tested a lot on WP.com already; see above.

…start

Summary:
This fixes block validation errors, shown in the editor on a blank page load and also fixes block validation issues associated with the `pub/payton` homepage starter content.

Building on the work in D69931-code and D70357-code

The gutenberg editor does not support property shorthands such as `padding: 10px 20px;` instead, the property must be specified in long form `padding-top:10px; padding-right:20px;` etc.

The CSSTidy processor is used to optimise css both when page content is fetched, and when headstart is run. We are currently questioning whether it is still a useful part of wordpress.com https://[private link]

We override CSSTidy's `filter_attr` function and there is already some code with the intention of disabling the shorthand optimization in the gutenberg editor. But it only checks whether the `_gutenberg_nonce` is present. It appears that other requests are made when the editor is loaded that do not contain the nonce, but that will still be validated by gutenberg. I haven't determined the source of these requests, but I believe that they are the requests to load block patterns for the editor. In any case, they are returning shorthand properties to the block editor which, as a result, is logging validation errors to the console.

This investigation was originally started to debug validation errors with the `pub/payton` theme. p1635985973066500-slack-CBTN58FTJ. Disabling the shorthand property optimization for headstart prevents the block validation issues specific to the `pub/payton` theme.

Test Plan:
with a sandboxed test site:

Install the payton theme to a test site
`wp theme activate pub/payton --url=[mytestsite][private link]`

Sandbox the `headstart_copy_attachment` job, with the following code. in `0-sandbox.php`
```
function sandbox_async_job_filter( $sandboxed, $type ) {
    return in_array( $type, array(
        'headstart_copy_attachment',
    ) );
}

add_filter( 'sandbox_async_job', 'sandbox_async_job_filter', 10, 2 );
```

Run headstart (delting existing content!)
`wp headstart run --url=[mytestsite][private link] --user=myusername --delete-content`

then in the php error log there will be three lines as follows
```
[24-Nov-2021 05:50:30 UTC] Sandboxed Job # 65711505536 (headstart_copy_attachment_sandboxed) (prefix: wpj_) - run with ~/public_html/async-jobs/tester.php 65711505536 wpj_
[24-Nov-2021 05:50:30 UTC] Sandboxed Job # 65711505609 (headstart_copy_attachment_sandboxed) (prefix: wpj_) - run with ~/public_html/async-jobs/tester.php 65711505609 wpj_
[24-Nov-2021 05:50:34 UTC] Sandboxed Job # 65711507043 (headstart_copy_attachment_sandboxed) (prefix: wpj_) - run with ~/public_html/async-jobs/tester.php 65711507043 wpj_
```
Copy the tester.php commands and run the jobs.

Then check that the content of the homepage is valid!

Open the homepage in the editor.
All blocks should load successfully
Open the js console.
There should be no block validation errors.

Reviewers: arthur791004, philipmjackson, ramonopoly, fullofcaffeine

Reviewed By: arthur791004, philipmjackson, fullofcaffeine

Subscribers: fullofcaffeine, simison, philipmjackson, arthur791004, ramonopoly

Tags: #touches_jetpack_files

Differential Revision: D70425-code

This commit syncs r235710-wpcom.
@kraftbj kraftbj added the [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. label Nov 29, 2021
@kraftbj kraftbj added this to the jetpack/10.4 milestone Nov 29, 2021
@kraftbj kraftbj self-assigned this Nov 29, 2021
@github-actions github-actions bot added [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Feature] Custom CSS labels Nov 29, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Nov 29, 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 🤖


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: December 7, 2021.
  • Scheduled code freeze: November 30, 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! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Nov 29, 2021
@kraftbj kraftbj added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. 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 Nov 29, 2021
@kraftbj kraftbj enabled auto-merge (squash) November 29, 2021 15:24
@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Nov 29, 2021
@kraftbj kraftbj merged commit 926afc0 into master Nov 29, 2021
@kraftbj kraftbj deleted the fusion-sync/kraftbj/r235710-wpcom-1638198488 branch November 29, 2021 17:07
@github-actions github-actions bot removed the [Status] Ready to Merge Go ahead, you can push that green button! label Nov 29, 2021
davidlonjon added a commit that referenced this pull request Dec 2, 2021
* master: (22 commits)
  Update storybook monorepo to v6.4.0 (#21897)
  Refresh the site's modules and settings after successful product activation (#21886)
  Plugin Install: Bump MC stat on success or fail. (#21893)
  Nav Unification: Use correct user capability for the Inbox menu item (#21882)
  Jetpack: Extend disconnection dialog component to handle multiple steps and accept more props (#21048)
  Disable CSSTidy property shorthand optimization in the editor or headstart (#21891)
  Connection UI: Update Composer instructions in README.md (#21890)
  Partner Compatibility: Adding a unique connection screen for customers who receive a coupon from a Jetpack partner (#21813)
  Search package: move search dashboard to package - the base (#21865)
  JITM: wrap CTA below text on small viewports (#21688)
  Licensing JS Package – fix icon positioning and width (#21878)
  JITM: new JS and CSS builder (#21874)
  Support site_intent for `/me/sites` endpoint (#21880)
  Don't render Critical CSS while generating CritCSS. (#21879)
  ConnectScreen: make button full width on small screens (#21683)
  Improve the copy of the license activation banner (#21876)
  Rename Webpack-built files back from `.min.js` and remove hashes (#21748)
  Search: Migrate more helper classes to package (#21751)
  Search: migrate/add search rest API (#21584)
  Add initial state to the connection package (#21864)
  ...
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 [Type] Dotcom Merge
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants