Utilize new data-amp-bind-* alternative syntax for amp-bind attributes

[westonruter]

There is a new XHTML-compatible amp-bind attribute syntax: ampproject/amphtml#11115 via ampproject/amphtml#15408

Instead of:

<span class="foo" [class]="foo ? 'foo' : 'bar'">

We can now do:

<span class="foo" data-amp-bind-class="foo ? 'foo' : 'bar'">

What this means is that we now have an official way of representing amp-bind attributes in PHP's DOM internals. We can now eliminate AMP_DOM_Utils::get_amp_bind_placeholder_prefix() and AMP_DOM_Utils::restore_amp_bind_attributes() entirely, and AMP_DOM_Utils::convert_amp_bind_attributes() can be modified to just convert the bracketed syntax into the data-amp-bind-* syntax. There would be no need to restore the bracketed syntax when re-serializing. The result will be improved performance.

[lucky42890]

Is this issue solved ?

[westonruter]

No

[westonruter]

We need to update the whitelist sanitizer to automatically enqueue amp-bind when data-amp-bind-* attributes are found. Currently it is only doing so for bracketed attributes:

amp-wp/includes/sanitizers/class-amp-tag-and-attribute-sanitizer.php

Lines 550 to 558 in efd1d07

	$is_bind_attribute = (
	'[' === $name[0]
	||
	( isset( $this->rev_alternate_attr_name_lookup[ $name ] ) && '[' === $this->rev_alternate_attr_name_lookup[ $name ][0] )
	);
	if ( $is_bind_attribute ) {
	$this->script_components[] = 'amp-bind';
	break;
	}

This should also be done in the process_alternate_names method.

[westonruter]

We also need to make sure that the alternative syntax is supported in places like:

amp-wp/includes/sanitizers/class-amp-style-sanitizer.php

Lines 441 to 446 in 437c335

	// Find all [class] attributes and capture the contents of any single- or double-quoted strings.
	foreach ( $this->xpath->query( '//*/@' . AMP_DOM_Utils::get_amp_bind_placeholder_prefix() . 'class' ) as $bound_class_attribute ) {
	if ( preg_match_all( '/([\'"])([^\1]*?)\1/', $bound_class_attribute->nodeValue, $matches ) ) {
	$classes .= ' ' . implode( ' ', $matches[2] );
	}
	}

Anywhere that AMP_DOM_Utils::get_amp_bind_placeholder_prefix() occurs we'd need to also supply 'data-amp-bind-' as an alternative prefix.

Alternatively, we could just rewrite all bracketed-syntax attributes with data-amp-bind-* ones, which is what I suggested above 😄

[conwaydev]

Glad I found this, we recently found out about the wonderful data-amp-bind-class attribute, however the AMP plugin's UnCSS will strip out the classes we pass to it whereas [class] will work just fine. Which is exactly what you mention above.

[westonruter]

I started work on this.

@conwaydev Initial PR ready for testing: #2974

[westonruter]

Also reported on support forum: https://wordpress.org/support/topic/hambuger-menu-no-opening-on-static-version-of-website/

[westonruter]

@conwaydev Please test: #2974