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

Include text content of style element in validation error #3717

Merged
merged 2 commits into from
Nov 12, 2019

Conversation

westonruter
Copy link
Member

Summary

In #2326 (comment) it was discovered that an excessive CSS validation error for one style element will get conflated with validation error for another style element, if the style elements don't vary in their attributes. This is because the text content of the style element was not being included in the validation error attributes; this was unlike what is being done for inline script elements. So this PR ensures that the validation errors are distinct for distinct style elements.

This PR also improves the display of the text content by putting the contents in code element, and putting it inside of a details element that has the byte count.

Before

image

image

After

image

Screen Shot 2019-11-11 at 22 53 23

image

Checklist

  • My pull request is addressing an open issue (please create one otherwise).
  • My code is tested and passes existing tests.
  • My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

Copy link
Contributor

@pierlon pierlon left a comment

Choose a reason for hiding this comment

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

For clarity, here's what it looks like when validation errors for style elements get conflated:

image

And after the changes are applied:

image


No issues to report otherwise.

@westonruter
Copy link
Member Author

Let me re-clarify.

In Standard mode if I add a Custom HTML block that has 50KB+ of CSS:

image

I will then get, as expected, the invalid markup kept by default:

image

If I go ahead and mark that as removed, and then add two other 50KB+ style elements:

image

Then the other invalid markup is automatically marked as removed, even though in Standard mode it should have defaulted to kept:

image

This doesn't happen because the status of the validation error is being applied to the other validation errors since they all have the same attributes (since the text is not included).

What should actually have been the result, and what this PR does, is make the other two style elements also validation errors that have markup default to kept:

image

@westonruter westonruter merged commit 9a33ea0 into develop Nov 12, 2019
@westonruter westonruter deleted the add/style-validation-error-contents branch November 12, 2019 16:57
westonruter added a commit that referenced this pull request Nov 12, 2019
* Include text content in validation error for invalid style elements

* Improve presentation of text content in validation error
@csossi
Copy link

csossi commented Nov 12, 2019

Verified in QA:
image

westonruter added a commit that referenced this pull request Nov 13, 2019
…ve-duplicate-amp-scripts

* 'develop' of github.com:ampproject/amp-wp: (66 commits)
  Improve display of validation errors for scripts (#3722)
  Conditionally run E2E tests (#3723)
  Tidy up validation error details (#3721)
  Add missing space after sentence (#3720)
  Default to the homepage instead of fetching the first AMP compatible post to customize (#3715)
  Include text content of style element in validation error (#3717)
  Fix summarizing error sources both parent theme and child theme (#3709)
  Exclude WordPress.PHP.DisallowShortTernary phpcs sniff
  Fix phpcs issues with date() and current_time()
  Exclude Generic.Arrays.DisallowShortArraySyntax from WordPress-Core
  Update dependency wp-coding-standards/wpcs to v2.2.0
  Improve specificity of JS doc
  Fix identifying sources for validation errors coming child themes (#3708)
  Fix failing E2E tests (#3707)
  Remove amp_validate query var from Validated URL 'View' row action
  Re-factor get_html_attribute_pattern as match_element_attributes
  Quote variables added to regex pattern
  Replace incorrect usage of esc_url() with esc_url_raw()
  Remove empty alt attributes
  Add object-fit=contain to amp-youtube placeholder image
  ...
westonruter added a commit that referenced this pull request Nov 14, 2019
* tag '1.4.1': (26 commits)
  Bump 1.4.1
  Update screenshots for 1.4.1
  Fix expected image name after upstream change (#3749)
  Use length property instead of count() method on DOMNodeList (#3727)
  Improve display of validation errors for scripts (#3722)
  Conditionally run E2E tests (#3723)
  Tidy up validation error details (#3721)
  Bump 1.4.1-RC1
  Default to the homepage instead of fetching the first AMP compatible post to customize (#3715)
  Add missing space after sentence (#3720)
  Include text content of style element in validation error (#3717)
  Use bitwise operator.
  Check if element is not in top toolbar.
  Fix user select for meta date and author
  Allow right click for meta blocks
  Fix summarizing error sources both parent theme and child theme (#3709)
  Fix identifying sources for validation errors coming child themes (#3708)
  Fix failing E2E tests (#3707)
  Remove amp_validate query var from Validated URL 'View' row action (#3706)
  Escape instances of unescapeed output in AMP settings screen code (#3703)
  ...
@csossi csossi added the QA passed Has passed QA and is done label Feb 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla: yes Signed the Google CLA QA passed Has passed QA and is done
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants