Add support for AMP dev mode #505

westonruter · 2019-09-08T06:24:09Z

Addresses issue #438.

Summary

As noted in ampproject/amp-wp#1921, AMP now supports a dev mode (ampproject/amphtml#20974) which allows a document to mark certain elements as being excluded for AMP validation. This is exactly what the AMP plugin has needed to allow the admin bar without fighting against the 50KB CSS limit. It also opens up the door to using scripts on AMP pages to add interactivity to the admin bar without worrying about AMP compatibility. This is exactly what Site Kit has needed for its admin bar integration on AMP pages.

This PR begins to implement support for that. I'll need help to complete it. In short, any markup that is being added by Site Kit to the frontend should be amended with the data-ampdevmode attribute to each element. The elements in the admin bar items will get this automatically, so the primary concern is the script, link, and style elements that are output to integrate Site Kit on the frontend admin bar.

Relevant technical choices

Add data-ampdevmode to elements for scripts and styles on AMP pages to exempt them from AMP validation.

Checklist

My code is tested and passes existing unit tests.
My code has an appropriate set of unit tests which all pass.
My code is backward-compatible with WordPress 4.7 and PHP 5.4.
My code follows the WordPress coding standards.
My code has proper inline documentation.
I have signed the Contributor License Agreement (see https://cla.developers.google.com/).

westonruter · 2019-09-10T05:49:18Z

FYI: I've attached a build of the AMP plugin with a link the PR description at ampproject/amp-wp#3187

westonruter · 2019-09-13T19:12:57Z

@felixarntz I forgot that I had created an issue for this. See #438. Updated description to indicate the relationship.

westonruter · 2019-10-01T23:16:00Z

AMP plugin v1.3 has now been released with the Admin Bar support. Can this be moved forward?

felixarntz

@westonruter This looks good, just one compatibility fix would be good - and maybe we can solve one piece a bit more elegantly.

Can you also make this a proper (non-draft) PR? :)

includes/Core/Admin_Bar/Admin_Bar.php

felixarntz · 2019-10-27T18:01:17Z

includes/Core/Admin_Bar/Admin_Bar.php

+	 * @return string[] XPath queries.
+	 */
+	public function add_amp_dev_mode( $xpath_queries ) {
+		$xpath_queries[] = '//script[ contains( text(), "googlesitekit" ) ]';


Just to clarify, this is only for inline scripts then right? The non-inline scripts receive the attribute in their own *_loader_tag hooks I see.

Adding a random googlesitekit comment to all these scripts is not so great. Is there not a way to add the data-ampdevmode attribute to those inline scripts with a filter too?

Just to clarify, this is only for inline scripts then right? The non-inline scripts receive the attribute in their own *_loader_tag hooks I see.

Yes, that is correct.

Adding a random googlesitekit comment to all these scripts is not so great. Is there not a way to add the data-ampdevmode attribute to those inline scripts with a filter too?

It's not awesome, but it is effective and somewhat nice for debugging to locate and identify scripts coming from Site Kit.

I did try to find a way to filter the inline scripts to inject this data-amp-dev-mode attribute, but I was unable to. The extra scripts get printed in \WP_Scripts::print_extra_script() which unfortunately has no filter like script_loader_tag.

…dev-mode-support * 'develop' of github.com:google/site-kit-wp: (538 commits) keep array casting refactor earnings datapoint to not use array_merge Improve error handling in proxy mode by relying on the actual error response. Revert back to clientId in third-party code argument. fix: Always show proxy setup page when proxy is on fix: Rename TagManagerTest.php file fix docblocks in Data_Request add assertion for data request object immutability update docblock for get_batch_data revert changes to get_batch_data call in SC module Move Data_Request to REST_API namespace refactor Data Request getters with magic methods Fix incorrect Travis-CI script order. Ensure environment preparation failures result in errors in Travis-CI. Remove unnecessary array_map. Improve regex in PHP-Scoper configuration. fix: Rename third-party library preserve case change in Tag Manager datapoints update references to Google_Client fix intVal global prefixing ...

westonruter · 2019-10-27T20:30:23Z

Can you also make this a proper (non-draft) PR? :)

It was a draft because it wasn't fully working. There are a bunch of other script dependencies from Core/Gutenberg that need to get flagged as being in dev mode as well. They include:

escape-html
is-shallow-equal
deprecated
dom
keycodes
priority-queue
redux-routine
data
rich-text

As well as script localization inline scripts.

westonruter · 2019-10-27T20:32:24Z

includes/Core/Assets/Assets.php

+		add_filter(
+			'script_loader_tag',
+			function ( $tag, $handle ) use ( $assets ) {
+				if ( $this->context->is_amp() && isset( $assets[ $handle ] ) && $assets[ $handle ] instanceof Script ) {


This apparently needs to look to also look to see if the $handle is a dependency of any $assets as well.

We can probably add a get_dependency_handles() method to Google\Site_Kit\Core\Assets\Asset, which we can then leverage here to check that.

Out of curiosity, why would the amp plugin not just add the attribute to all style and script tags? Why only whitelist Site Kit assets and dependencies? If needed, why wouldn't the amp plugin add the attributes and let other plugins hook in to whitelist its assets rather than each plugin reimplementing this itself?

The attribute should only be added to JS that is related to functionality not relevant to the frontend (and which thus would not actually break AMP compatibility of the frontend, as long as you're logged-out). That's why it needs to be conservative, any plugin that has JS-powered admin bar functionality needs to explicitly declare that.

Regarding addition of the attributes, that's a good point. @westonruter Maybe the AMP plugin could include a central solution for adding the attribute that scripts/stylesheets could leverage via e.g. a wp_*_add_data( ... )?

Note that any script or stylesheet that has admin-bar as a dependency will automatically get the dev mode attribute. The issue is with scripts/styles that do not have this explicit admin bar linkage, such as dependencies on general libraries.

Maybe the AMP plugin could include a central solution for adding the attribute that scripts/stylesheets could leverage via e.g. a wp_*_add_data( ... )?

I'm not sure I understand. Are you saying you could do something like:

wp_script_add_data( 'lodash', 'ampdevmode', true );

And that this could be used as a dev mode signal equivalent to dependence on the admin-bar script? Then the AMP plugin could include a script_loader_tag filter which adds the data-ampdevmode attribute automatically to any script that has the ampdevmode data or which depends on a script that has this attribute?

This could also be used to automatically add the comment for inline scripts as well. Whereas right now we are manually adding /* googlesitekit */ to the inline scripts, there could be a wp_print_scripts action which loops over all scripts prior to printing and any script which contains the ampdevmode data could also then do:

wp_add_inline_script( $handle, '/*ampdevmode*/' );

And this pattern could be automatically added to the list of amp_dev_mode_element_xpaths.

Does this sound right?

@westonruter Yes, that would be great - really like including inline script support as well.

Work in progress: ampproject/amp-wp#4001

felixarntz · 2019-10-28T10:56:35Z

includes/Core/Assets/Assets.php

+		add_filter(
+			'script_loader_tag',
+			function ( $tag, $handle ) use ( $assets ) {
+				if ( $this->context->is_amp() && isset( $assets[ $handle ] ) && $assets[ $handle ] instanceof Script ) {


We can probably add a get_dependency_handles() method to Google\Site_Kit\Core\Assets\Asset, which we can then leverage here to check that.

…-wp into add/amp-dev-mode-support

…cies of wp-element and wp-compose respectively.

felixarntz · 2019-11-20T08:57:54Z

With the latest commits, AMP dev mode works as expected. Some notes:

We now bundle wp-escape-html and wp-is-shallow-equal. Those scripts are needed because they are dependencies of wp-element and wp-compose respectively, both of which we use. Them not being there in WP<5.0 did not cause any issues, but only because we didn't use the respective functionality yet. The reason I even discovered that those two dependencies were missing is because they weren't whitelisted for AMP dev mode, although they were actually enqueued as a dependency of Site Kit dependencies.
The way we bundle and register these dependencies in PHP is still far from optimal. We should update our build scripts so that all WP dependencies that are dependencies of other dependencies we use are automatically bundled, without us needing to figure that out manually. The same applies to keeping the asset versions in PHP in sync - doing that manually as we currently do is a pain and error-prone.

westonruter · 2019-11-20T17:26:16Z

Awesome. I deployed it to my AMP-first site and I can see the Site Kit admin bar and there are no validation errors being reported!

Co-Authored-By: Evan Mattson <evan.mattson@10up.com>

Add initial support for AMP dev mode

bf18d79

westonruter requested a review from felixarntz September 8, 2019 06:24

googlebot added the cla: yes label Sep 8, 2019

westonruter mentioned this pull request Sep 8, 2019

Integrate admin bar with AMP dev mode ampproject/amp-wp#3187

Merged

17 tasks

Fix typo in phpdoc tag

b50a200

felixarntz requested changes Oct 27, 2019

View reviewed changes

westonruter added 2 commits October 27, 2019 12:40

Short-circuit AMP dev mode integration if not in dev mode

b822bd4

westonruter marked this pull request as ready for review October 27, 2019 20:25

westonruter commented Oct 27, 2019

View reviewed changes

felixarntz requested changes Oct 28, 2019

View reviewed changes

felixarntz added 5 commits November 20, 2019 12:48

Merge branch 'add/amp-dev-mode-support' of github.com:google/site-kit…

62e5bba

…-wp into add/amp-dev-mode-support

Render full Site Kit admin bar menu markup if AMP dev mode is enabled.

7561d0d

Bundle wp-escape-html and wp-is-shallow-equal since they are dependen…

69831d4

…cies of wp-element and wp-compose respectively.

Update external WP asset versions to those actually bundled.

545db10

Merge branch 'develop' into add/amp-dev-mode-support

f7f96a0

felixarntz mentioned this pull request Nov 20, 2019

Optimize our infrastructure for bundling external scripts #885

Closed

westonruter mentioned this pull request Nov 20, 2019

Introduce admin bar integration on AMP pages #438

Closed

felixarntz previously approved these changes Nov 20, 2019

View reviewed changes

felixarntz requested a review from aaemnnosttv November 20, 2019 09:14

felixarntz and others added 2 commits November 20, 2019 20:16

Merge branch 'develop' into add/amp-dev-mode-support

3e4948d

Merge branch 'develop' into add/amp-dev-mode-support

ce61c12

Use traditional array syntax for consistency.

79d344c

Co-Authored-By: Evan Mattson <evan.mattson@10up.com>

felixarntz dismissed their stale review via 79d344c November 20, 2019 17:52

Merge branch 'develop' into add/amp-dev-mode-support

1db67b9

felixarntz approved these changes Nov 20, 2019

View reviewed changes

felixarntz merged commit b5d1314 into develop Nov 20, 2019

felixarntz deleted the add/amp-dev-mode-support branch November 20, 2019 18:33

westonruter mentioned this pull request Nov 30, 2019

Add paired browsing interface ampproject/amp-wp#3656

Merged

10 tasks

westonruter mentioned this pull request Dec 20, 2019

Introduce ampdevmode data flag on script/style dependencies ampproject/amp-wp#4001

Draft

4 tasks

felixarntz mentioned this pull request Feb 18, 2020

Fix AMP violations caused by AMP dev mode regression #1142

Closed

westonruter mentioned this pull request Apr 16, 2020

Facilitate marking script/style dependencies as being covered by AMP dev mode ampproject/amp-wp#4598

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for AMP dev mode #505

Add support for AMP dev mode #505

westonruter commented Sep 8, 2019 •

edited by felixarntz

Loading

westonruter commented Sep 10, 2019

westonruter commented Sep 13, 2019

westonruter commented Oct 1, 2019

felixarntz left a comment

felixarntz Oct 27, 2019

westonruter Oct 27, 2019

westonruter commented Oct 27, 2019

westonruter Oct 27, 2019

felixarntz Oct 28, 2019

aaemnnosttv Nov 20, 2019

felixarntz Nov 20, 2019

westonruter Nov 20, 2019

felixarntz Dec 6, 2019

westonruter Dec 20, 2019

felixarntz Oct 28, 2019

felixarntz commented Nov 20, 2019

westonruter commented Nov 20, 2019

Add support for AMP dev mode #505

Add support for AMP dev mode #505

Conversation

westonruter commented Sep 8, 2019 • edited by felixarntz Loading

Summary

Relevant technical choices

Checklist

westonruter commented Sep 10, 2019

westonruter commented Sep 13, 2019

westonruter commented Oct 1, 2019

felixarntz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter commented Oct 27, 2019

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

felixarntz commented Nov 20, 2019

westonruter commented Nov 20, 2019

westonruter commented Sep 8, 2019 •

edited by felixarntz

Loading