Amp-wp: Investigate validation errors that are not sanitized in WordPress.org themes

[westonruter]

Bug Description

I'm doing an analysis of how the entire directory of themes on WordPress.org fair in terms of AMP-compatibility. For each theme (which doesn't go over the 50KB limit), I've obtained the validation results for the initial Hello World post, using the current 1.5-alpha state of the plugin.

The themes which the AMP plugin thinks is serving as valid AMP but actually is not, are:

Theme | Validation Error
------|-----------------
brovy | The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
catch-wedding | CSS syntax error in tag 'style amp-custom' - invalid declaration.
catch-wheels | CSS syntax error in tag 'style amp-custom' - invalid declaration.
curiosity-lite | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
curiosity-lite | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
curiosity-lite | CSS syntax error in tag 'style amp-custom' - invalid declaration.
foodoholic | CSS syntax error in tag 'style amp-custom' - invalid declaration.
hamza-lite | The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
intuitive | CSS syntax error in tag 'style amp-custom' - invalid declaration.
keep-calm-and-e-comm | The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
lakshmi-lite | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
lakshmi-lite | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
lakshmi-lite | CSS syntax error in tag 'style amp-custom' - invalid declaration.
namaste-lite | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
namaste-lite | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
namaste-lite | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
namaste-lite | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
namaste-lite | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
nullpoint | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
nullpoint | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
organic-lite | CSS syntax error in tag 'style amp-custom' - invalid declaration.
organic-lite | CSS syntax error in tag 'style amp-custom' - invalid declaration.
palette | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
palette | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
personal-trainer | CSS syntax error in tag 'style amp-custom' - invalid declaration.
postmag | The property 'width' in attribute 'content' in tag 'meta name=viewport' is set to ' device-width', which is invalid. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
robot | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
robot | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
ultimate-showcase | The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
zincy-lite | The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)

The frequency is as follows:

Count | Error
-----: | ------
15 | CSS syntax error in tag 'style amp-custom' - end of stylesheet encountered in prelude of a qualified rule.
9 | CSS syntax error in tag 'style amp-custom' - invalid declaration.
5 | The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)
1 | The property 'width' in attribute 'content' in tag 'meta name=viewport' is set to ' device-width', which is invalid. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)

The themes are:

1. brovy
2. catch-wedding
3. catch-wheels
4. curiosity-lite
5. foodoholic
6. hamza-lite
7. intuitive
8. keep-calm-and-e-comm
9. lakshmi-lite
10. namaste-lite
11. nullpoint
12. organic-lite
13. palette
14. personal-trainer
15. postmag
16. robot
17. ultimate-showcase
18. zincy-lite

Expected Behaviour

When the AMP plugin intends to serve a valid AMP page, no validation errors should be encountered by the AMP validator.

Steps to reproduce

1. Enable AMP Standard template mode.
2. Activate one of the above themes.
3. Navigate to the Hello World post.
4. Look for validation errors reported by the AMP validator.

Screenshots

Additional context

• WordPress version:
• Plugin version:
• Gutenberg plugin version (if applicable):
• AMP plugin template mode:
• PHP version:
• OS:
• Browser: [e.g. chrome, safari]
• Device: [e.g. iPhone6]

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance criteria

Issues #4070, #4113, #4179 and #4197 were created to resolve the errors above and they should be resolved before this issue can be closed.

Implementation brief

QA testing instructions

Demo

Changelog entry

[westonruter]

For the themes that have excessive CSS, there is just one that has unexpected validation errors: corpoz. There appears to be a problem with the output buffering because the first content is <title> followed later by <!DOCTYPE html>.

[westonruter]

CSS syntax error in tag 'style amp-custom' - invalid declaration.

These seem to all be instances of #4113, except for curiosity-lite and lakshmi-lite.

In organic-lite it is due to properties like 4z-index:1;.

[westonruter]

brovy The mandatory tag 'meta name=viewport' is missing or incorrect. (see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml#required-markup)

I suspect this one will be resolved by #4070. The meta viewport added by the theme is:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalabe=no">

So the invalid properties are causing the meta tag to be removed.

[pierlon]

An overview of the work being done to resolve the validation errors reported above:

Theme | Reported Issue
---|---
brovy | #4070
catch-wedding | #4113
catch-wheels | #4113
curiosity-lite | #4197
foodoholic | #4113
hamza-lite | #4070
intuitive | #4113
keep-calm-and-e-comm | #4070
lakshmi-lite | #4197
namaste-lite | #4197
nullpoint | #4197
organic-lite | #4113
palette | #4197
personal-trainer | #4113
postmag | #4070, #4179 and #4197
robot | #4197
ultimate-showcase | #4070
zincy-lite | #4070

[pierlon]

Now that the sub-issues (#4070, #4113, #4179, #4197) created from this discovery are resolved, I'll review the themes in question once more to ensure the reported validation errors for each no longer occurs.