Feature description

Originally discussed in google/site-kit-wp#505 (comment).

The Site Kit plugin currently marks scripts for being as part of dev mode by:

1. Adding /*googlesitekit*/ to the inline script content.
2. Adding a //script[ contains( text(), "googlesitekit" ) ] to the amp_dev_mode_element_xpaths.

This works but it is not the best developer experience, nor is it the most robust. It depends on injecting a unique string into the scripts which serves no purpose other than for marking content for dev mode. It also slows down the post-processor a bit by requiring XPath to query for the script elements to add the data-ampdevmode attribute to.

For non-inline scripts, marking scripts for dev mode requires either making it a dependency of admin-bar, or to add script_loader_tag/style_loader_tag filters to inject the data-ampdevmode attribute. This is also not the best developer experience.

A much better experience for flagging scripts for dev mode would by to attach data to the script (or style). For example:

wp_script_add_data( 'escript', 'ampdevmode', true );
wp_style_add_data( 'estyle', 'ampdevmode', true );

When this ampdevmode data is attached to a dependency, this can be looked for in the script_loader_tag/style_loader_tag as a signal to add the data-ampdevmode attribute, instead of just relying on the handle being a dependency of admin-bar.

Not all script and style tags are filterable, however. Namely, styles added via wp_add_inline_style() and scripts added via wp_localize_script() get printed directly and are not filterable. (Scripts added via wp_add_inline_script() do get passed through the script_loader_tag filter). For these, we'll need rely on the post-processor to inject the data-ampdevmode attributes. This entails adding new XPath queries via the amp_dev_mode_element_xpaths filter for AMP_Dev_Mode_Sanitizer.

In the end, all scripts and styles—whether external or inline—should automatically have the data-ampdevmode attribute added to them when the underlying registered script/style dependency has the ampdevmode data added to them.

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

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry