Skip to content

Commit

Permalink
Merge pull request #505 from google/add/amp-dev-mode-support
Browse files Browse the repository at this point in the history 
Add support for AMP dev mode
  • Loading branch information
@felixarntz
felixarntz authored Nov 20, 2019
2 parents 15f1cba + 1db67b9 commit b5d1314
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 18 deletions.
35 changes: 33 additions & 2 deletions includes/Core/Admin_Bar/Admin_Bar.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,11 @@ function( $wp_admin_bar ) {
$this->assets->enqueue_asset( 'googlesitekit_adminbar_css' );

if ( $this->context->is_amp() ) {
return;
if ( ! $this->is_amp_dev_mode() ) {
// AMP Dev Mode support was added in v1.4, and if it is not enabled then short-circuit since scripts will be invalid.
return;
}
add_filter( 'amp_dev_mode_element_xpaths', array( $this, 'add_amp_dev_mode' ) );
}

// Enqueue scripts.
Expand All @@ -92,6 +96,20 @@ function( $wp_admin_bar ) {
add_action( 'wp_enqueue_scripts', $admin_bar_callback, 40 );
}

/**
* Add data-ampdevmode attributes to the elements that need it.
*
* @see \Google\Site_Kit\Core\Assets\Assets::get_assets() The 'googlesitekit' string is added to all inline scripts.
* @see \Google\Site_Kit\Core\Assets\Assets::add_amp_dev_mode_attributes() The data-ampdevmode attribute is added to registered scripts/styles here.
*
* @param string[] $xpath_queries XPath queries for elements that should get the data-ampdevmode attribute.
* @return string[] XPath queries.
*/
public function add_amp_dev_mode( $xpath_queries ) {
$xpath_queries[] = '//script[ contains( text(), "googlesitekit" ) ]';
return $xpath_queries;
}

/**
* Render the Adminbar button.
*
Expand All @@ -113,7 +131,7 @@ private function add_menu_button( $wp_admin_bar ) {
),
);

if ( $this->context->is_amp() ) {
if ( $this->context->is_amp() && ! $this->is_amp_dev_mode() ) {
$post = get_post();
if ( ! $post || ! current_user_can( 'edit_post', $post->ID ) ) {
return;
Expand Down Expand Up @@ -215,6 +233,19 @@ private function is_admin_post_screen() {
return true;
}

/**
* Checks whether AMP dev mode is enabled.
*
* This is only relevant if the current context is AMP.
*
* @since n.e.x.t
*
* @return bool True if AMP dev mode is enabled, false otherwise.
*/
private function is_amp_dev_mode() {
return function_exists( 'amp_is_dev_mode' ) && amp_is_dev_mode();
}

/**
* Return the Adminbar content markup.
*
Expand Down
83 changes: 67 additions & 16 deletions includes/Core/Assets/Assets.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,41 @@ private function register_assets() {
foreach ( $assets as $asset ) {
$asset->register();
}

$this->add_amp_dev_mode_attributes( $assets );
}

/**
* Add data-ampdevmode attributes to assets.
*
* @todo What about dependencies?
*
* @param Asset[] $assets Assets.
*/
private function add_amp_dev_mode_attributes( $assets ) {
add_filter(
'script_loader_tag',
function ( $tag, $handle ) use ( $assets ) {
if ( $this->context->is_amp() && isset( $assets[ $handle ] ) && $assets[ $handle ] instanceof Script ) {
$tag = preg_replace( '/(?<=<script)(?=\s|>)/i', ' data-ampdevmode', $tag );
}
return $tag;
},
10,
2
);

add_filter(
'style_loader_tag',
function ( $tag, $handle ) use ( $assets ) {
if ( $this->context->is_amp() && isset( $assets[ $handle ] ) && $assets[ $handle ] instanceof Stylesheet ) {
$tag = preg_replace( '/(?<=<link)(?=\s|>)/i', ' data-ampdevmode', $tag );
}
return $tag;
},
10,
2
);
}

/**
Expand All @@ -248,7 +283,7 @@ private function enqueue_minimal_admin_script() {
*
* @since 1.0.0
*
* @return array Associative array of asset $handle => $instance pairs.
* @return Asset[] Associative array of asset $handle => $instance pairs.
*/
private function get_assets() {
if ( $this->assets ) {
Expand Down Expand Up @@ -280,7 +315,7 @@ private function get_assets() {
'dependencies' => array( 'sitekit-vendor' ),
'post_register' => function( $handle ) use ( $base_url ) {
$url_polyfill = (
'( typeof URL === \'function\') || ' .
'/*googlesitekit*/ ( typeof URL === \'function\') || ' .
'document.write( \'<script src="' . // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript
$base_url . 'js/externals/wp-polyfill-url.js' .
'"></scr\' + \'ipt>\' );'
Expand Down Expand Up @@ -630,10 +665,10 @@ private function get_external_assets() {
'lodash',
array(
'src' => $base_url . 'vendor/lodash' . $suffix . '.js',
'version' => '4.17.11',
'version' => '4.17.15',
'fallback' => true,
'post_register' => function( $handle ) {
wp_add_inline_script( $handle, 'window.lodash = window.lodash || _.noConflict(); window.lodash_load = true;' );
wp_add_inline_script( $handle, '/*googlesitekit*/ window.lodash = window.lodash || _.noConflict(); window.lodash_load = true;' );
},
)
),
Expand All @@ -649,15 +684,15 @@ private function get_external_assets() {
'react',
array(
'src' => $base_url . 'vendor/react' . $react_suffix . '.js',
'version' => '16.8.5',
'version' => '16.11.0',
'fallback' => true,
)
),
new Script(
'react-dom',
array(
'src' => $base_url . 'vendor/react-dom' . $react_suffix . '.js',
'version' => '16.8.5',
'version' => '16.11.0',
'fallback' => true,
)
),
Expand All @@ -675,7 +710,7 @@ private function get_external_assets() {
'window.FormData && window.FormData.prototype.keys' => $base_url . 'js/externals/wp-polyfill-formdata.js', // phpcs:ignore WordPress.Arrays.MultipleStatementAlignment
'Element.prototype.matches && Element.prototype.closest' => $base_url . 'js/externals/wp-polyfill-element-closest.js', // phpcs:ignore WordPress.Arrays.MultipleStatementAlignment
);
$polyfill_scripts = '';
$polyfill_scripts = '/*googlesitekit*/';
foreach ( $inline_polyfill_tests as $test => $script ) { // phpcs:ignore Generic.WhiteSpace.ScopeIndent.IncorrectExact
$polyfill_scripts .= (
'( ' . $test . ' ) || ' .
Expand All @@ -688,65 +723,81 @@ private function get_external_assets() {
},
)
),
new Script(
'wp-escape-html',
array(
'src' => $base_url . 'js/externals/escapeHtml.js',
'version' => '1.5.1',
'fallback' => true,
)
),
new Script(
'wp-is-shallow-equal',
array(
'src' => $base_url . 'js/externals/isShallowEqual.js',
'version' => '1.6.1',
'fallback' => true,
)
),
new Script(
'wp-hooks',
array(
'src' => $base_url . 'js/externals/hooks.js',
'version' => '2.2.0',
'version' => '2.6.0',
'fallback' => true,
)
),
new Script(
'wp-element',
array(
'src' => $base_url . 'js/externals/element.js',
'version' => '2.3.0',
'version' => '2.8.2',
'fallback' => true,
)
),
new Script(
'wp-dom-ready',
array(
'src' => $base_url . 'js/externals/domReady.js',
'version' => '2.2.0',
'version' => '2.5.1',
'fallback' => true,
)
),
new Script(
'wp-i18n',
array(
'src' => $base_url . 'js/externals/i18n.js',
'version' => '3.3.0',
'version' => '3.6.1',
'fallback' => true,
)
),
new Script(
'wp-url',
array(
'src' => $base_url . 'js/externals/url.js',
'version' => '2.3.3',
'version' => '2.8.2',
'fallback' => true,
)
),
new Script(
'wp-api-fetch',
array(
'src' => $base_url . 'js/externals/apiFetch.js',
'version' => '2.2.8',
'version' => '3.6.4',
'fallback' => true,
'post_register' => function( $handle ) {
wp_add_inline_script(
$handle,
sprintf(
'wp.apiFetch.use( wp.apiFetch.createNonceMiddleware( "%s" ) );',
'/*googlesitekit*/ wp.apiFetch.use( wp.apiFetch.createNonceMiddleware( "%s" ) );',
( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' )
),
'after'
);
wp_add_inline_script(
$handle,
sprintf(
'wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( "%s" ) );',
'/*googlesitekit*/ wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( "%s" ) );',
esc_url_raw( get_rest_url() )
),
'after'
Expand All @@ -758,7 +809,7 @@ private function get_external_assets() {
'wp-compose',
array(
'src' => $base_url . 'js/externals/compose.js',
'version' => '3.2.0',
'version' => '3.7.2',
'fallback' => true,
)
),
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,11 @@
"@wordpress/dom-ready": "^2.5.1",
"@wordpress/e2e-test-utils": "^2.1.0",
"@wordpress/element": "^2.8.2",
"@wordpress/escape-html": "^1.5.1",
"@wordpress/eslint-plugin": "^2.4.0",
"@wordpress/hooks": "^2.6.0",
"@wordpress/i18n": "^3.6.1",
"@wordpress/is-shallow-equal": "^1.6.1",
"@wordpress/library-export-default-webpack-plugin": "^1.1.0",
"@wordpress/scripts": "^3.3.0",
"@wordpress/url": "^2.8.2",
Expand Down
2 changes: 2 additions & 0 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,10 @@ const externalPackages = [
'compose',
'dom-ready',
'element',
'escape-html',
'hooks',
'i18n',
'is-shallow-equal',
'url',
];

Expand Down

0 comments on commit b5d1314

Please sign in to comment.