The [meta charset] tag is duplicated if it's not parsed correctly

[pierlon]

Bug Description

While investigating the validation errors in #4060, it was found that the postmag theme was throwing the DUPLICATE_UNIQUE_TAG validation error for the [meta charset] tag, although that was not the case after inspecting theme's source code. The rendered meta tag by the theme is:

<meta charset = "UTF-8" >

Upon further investigation within the plugin, it was found that the [meta charset] tag was incorrectly parsed and considered not present within the HTML source, and so another one was added.

Both AMP_Theme_Support::prepare_response() and \Amp\AmpWP\Dom\Document::loadHTML() fail to correctly parse the tag, and a duplicate one will be added by either function.

Within AMP_Theme_Support::prepare_response(), this can be traced to the following regex failing to find the tag:

amp-wp/includes/class-amp-theme-support.php

Line 2219 in 9088fdc

if ( ! preg_match( '#<meta[^>]+charset=#i', substr( $response, 0, 1024 ) ) ) {

The regex pattern is not considering any white-space that may be found between the attribute and the equal sign, and because of this another [meta charset] will be added.

If for some other reason the meta tag is not added there, the call to Document::from_html() will duplicate the tag. This can be traced back to where it adds the required AMP encoding charset via the [meta charset] tag:

amp-wp/src/Dom/Document.php

Lines 353 to 356 in 22727d1

	// Add the required utf-8 meta charset tag.
	$charset = $this->createElement( 'meta' );
	$charset->setAttribute( 'charset', self::AMP_ENCODING );
	$this->head->insertBefore( $charset, $this->head->firstChild );

This is done as it is expected that the original encoding is parsed and removed from the HTML source, but the regex pattern used to parse the charset attribute and its value also fails to consider white-space:

amp-wp/src/Dom/Document.php

Line 121 in 22727d1

const HTML_FIND_TAG_WITH_ATTRIBUTE_PATTERN = '/<%1$s [^>]*?\s*%2$s=[^>]*?>[^<]*(?:<\/%1$s>)?/i';

leading to both the original and required [meta charset] tags being found in the HTML source.

Expected Behaviour

Only one [meta charset] tag should be seen in the HTML source.

Steps to reproduce

1. Add white-space between the charset and the equal sign in the [meta charset] tag, for example:

<meta charset ="UTF-8" >

2. Validate a post with the above tag included in the HTML

3. The following AMP validation error should be seen for the post:

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

• The [meta charset] tag should not be duplicated if white-space is found between the charset attribute and the equal sign.

Implementation brief

The regex patterns to parse the HTML source for the [meta charset] tag should be adapted to consider white-space that may be found between the charset attribute and the equal sign.

QA testing instructions

Demo

Changelog entry