Facilitate using AMP components outside of AMP documents (AMP in PWA, “dirty AMP”) #1013

westonruter · 2018-03-12T07:07:35Z

Add AMP scripts the WordPress way: register all AMP component scripts as defined in spec via WP_Scripts via new function amp_register_default_scripts(), allowing simple enqueueing via wp_enqueue_script( 'amp-list' ), for example.
Also register the AMP Shadow API as a default script.
Use wp_print_scripts() with filtering script_loader_tag to output scripts with necessary attributes. See https://core.trac.wordpress.org/ticket/12009
Update whitelist sanitizer to allow, validate, and sanitize AMP scripts.
Eliminate needless amp_component_scripts filter.

With this in place, you can leverage AMP components entirely outside of pages served as AMP. For example, to add the quadradic formula to the footer of a site, served as AMP or not, all that is needed is:

<?php
add_action( 'wp_enqueue_scripts', function() {
	wp_enqueue_script( 'amp-mathml' );
} );

add_action( 'wp_footer', function() {
	?>
	<amp-mathml
		layout="container"
		data-formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]"
	></amp-mathml>
	<?php
} );

This not only adds the amp-mathml component script to the head, but it also automatically outputs the AMP runtime script, since it is marked as a dependency of all registered AMP component scripts.

Fixes #982.

westonruter · 2018-03-12T07:10:04Z

It would be nice if this were further enhanced to automatically move the AMP scripts from the footer or anywhere else in the body to the head automatically. This would allow us to simplify the above to as follows:

add_action( 'wp_footer', function() {
	wp_print_scripts( 'amp-mathml' );
	?>
	<amp-mathml layout="container" data-formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]"></amp-mathml>
	<?php
} );

* Add AMP scripts the WordPress way: register all AMP component scripts as defined in spec via WP_Scripts via new function amp_register_default_scripts(), allowing simple enqueueing via wp_enqueue_script( 'amp-list' ), for example. * Also register the AMP Shadow API as a default script. * Use wp_print_scripts() with filtering script_loader_tag to output scripts with necessary attributes. * Update whitelist sanitizer to allow, validate, and sanitize AMP scripts. * Eliminate needless amp_component_scripts filter.

Call ensure_required_markup prior to sanitizing document

westonruter · 2018-03-12T07:35:07Z

It would be nice if this were further enhanced to automatically move the AMP scripts from the footer or anywhere else in the body to the head automatically.

This is done on 0154620.

westonruter · 2018-03-12T07:59:53Z

includes/amp-helper-functions.php

+	 */
+	$custom_templates = array( 'amp-mustache' );
+
+	foreach ( $extensions as $extension ) {


Probably should do an array_unique call here.

westonruter · 2018-03-12T08:00:32Z

includes/amp-helper-functions.php

+				continue;
+			}
+			$tag_spec = $rule_spec[ AMP_Rule_Spec::TAG_SPEC ];
+			if ( ! empty( $tag_spec['also_requires_tag_warning'] ) ) {


I don't think this statement is relevant here

westonruter · 2018-03-12T15:00:26Z

includes/amp-helper-functions.php

+		} else {
+			$attributes['custom-element'] = $extension;
+		}
+		$wp_scripts->add_data( $extension, 'amp_script_attributes', $attributes );


This really isn't necessary. In the script_loader_tag filter we can just look to see if the script comes from the AMP CDN and if so then automatically add async and the required custom attribute.

* Eliminate amp_script_attributes script data in favor of just looking at the URL to determine whether to add additional script attributes. * Add array_unique when iterating over extensions to add. * Eliminate looking at also_requires_tag_warning when gathering extension scripts.

westonruter · 2018-03-12T18:54:40Z

Ready for review.

kienstra · 2018-03-12T19:43:22Z

Reviewing Now

Thanks, @westonruter. I'm reviewing this now.

kienstra

Approved, Minor Points

Hi @westonruter,
This looks good, and it's interesting how it uses DOMXPath.

There are a few minor questions here. If you're satisfied, feel free to merge this.

kienstra · 2018-03-12T19:53:06Z

includes/amp-helper-functions.php

+				$attribute_string = sprintf( ' %s="%s"', esc_attr( $key ), esc_attr( $value ) );
+			}
+			$tag = preg_replace(
+				':(?=></script>):',


Should the slash be escaped?

No. This is doing a lookahead search to find ></script> in the string to inject content before it.

kienstra · 2018-03-12T19:59:41Z

includes/class-amp-theme-support.php

+		wp_enqueue_script( 'amp-runtime' );
+
+		// Enqueue default styles expected by sanitizer.
+		wp_enqueue_style( 'amp-default', amp_get_asset_url( 'css/amp-default.css' ) );


It looks like this is just moved from enqueue_amp_default_styles(), which only passed 2 arguments to wp_enqueue_style(). But could this use a $version as the 4th argument: AMP__VERSION?

Oh good point! Yes, this is needed.

kienstra · 2018-03-12T20:01:39Z

includes/class-amp-theme-support.php

+		$script_tags = ob_get_clean();
+		if ( ! empty( $script_tags ) ) {
+			$response = preg_replace(
+				'#(?=</head>)#',


Should the slash be escaped?

westonruter requested a review from kienstra March 12, 2018 07:07

westonruter added this to the v0.7 milestone Mar 12, 2018

westonruter added 2 commits March 12, 2018 00:34

Move any AMP component scripts from body into head

0154620

Call ensure_required_markup prior to sanitizing document

westonruter force-pushed the add/amp-script-enqueues branch from 3860e77 to 0154620 Compare March 12, 2018 07:34

westonruter commented Mar 12, 2018

View reviewed changes

westonruter mentioned this pull request Mar 12, 2018

Include AMP content in REST API responses for embedding (AMP in PWA) #1014

Closed

westonruter changed the title ~~Facilitate using AMP components outside of AMP documents (dirty AMP)~~ Facilitate using AMP components outside of AMP documents (AMP in PWA, “dirty AMP”) Mar 12, 2018

kienstra self-assigned this Mar 12, 2018

kienstra approved these changes Mar 12, 2018

View reviewed changes

kienstra assigned westonruter and unassigned kienstra Mar 12, 2018

Add missing version for amp-default style

6bedf70

westonruter merged commit 839d7ff into develop Mar 12, 2018

westonruter deleted the add/amp-script-enqueues branch March 12, 2018 20:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Facilitate using AMP components outside of AMP documents (AMP in PWA, “dirty AMP”) #1013

Facilitate using AMP components outside of AMP documents (AMP in PWA, “dirty AMP”) #1013

westonruter commented Mar 12, 2018

westonruter commented Mar 12, 2018

westonruter commented Mar 12, 2018

westonruter Mar 12, 2018

westonruter Mar 12, 2018

westonruter Mar 12, 2018

westonruter commented Mar 12, 2018

kienstra commented Mar 12, 2018

kienstra left a comment

kienstra Mar 12, 2018

westonruter Mar 12, 2018

kienstra Mar 12, 2018

westonruter Mar 12, 2018

kienstra Mar 12, 2018

Facilitate using AMP components outside of AMP documents (AMP in PWA, “dirty AMP”) #1013

Facilitate using AMP components outside of AMP documents (AMP in PWA, “dirty AMP”) #1013

Conversation

westonruter commented Mar 12, 2018

westonruter commented Mar 12, 2018

westonruter commented Mar 12, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented Mar 12, 2018

kienstra commented Mar 12, 2018

kienstra left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment