Merge pull request #6773 from ampproject/add/wp-back-compat

Add back-compat to old WP versions for new v2.2 features

Author: westonruter

.phpstorm.meta.php

@@ -54,7 +54,6 @@
 			'rest.scannable_urls_controller'     => \AmpProject\AmpWP\Validation\ScannableURLsRestController::class,
 			'rest.validation_counts_controller'  => \AmpProject\AmpWP\Validation\ValidationCountsRestController::class,
 			'sandboxing'                         => \AmpProject\AmpWP\Sandboxing::class,
-			'save_post_validation_event'         => \AmpProject\AmpWP\Validation\SavePostValidationEvent::class,
 			'server_timing'                      => \AmpProject\AmpWP\Instrumentation\ServerTiming::class,
 			'site_health_integration'            => \AmpProject\AmpWP\Admin\SiteHealth::class,
 			'support'                            => \AmpProject\AmpWP\Support\SupportCliCommand::class,

assets/src/admin/site-scan-notice/index.js

@@ -49,7 +49,7 @@ function Providers( { children } ) {
 					optionsRestPath={ OPTIONS_REST_PATH }
 					populateDefaultValues={ false }
 				>
-					<PluginsContextProvider hasErrorBoundary={ true }>
+					<PluginsContextProvider>
 						<SiteScanContextProvider
 							scannableUrlsRestPath={ SCANNABLE_URLS_REST_PATH }
 							validateNonce={ VALIDATE_NONCE }

assets/src/components/plugins-context-provider/index.js

@@ -6,39 +6,22 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useContext,
-	useEffect,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { createContext, useEffect, useRef, useState } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
-
-/**
- * Internal dependencies
- */
-import { ErrorContext } from '../error-context-provider';
-import { useAsyncError } from '../../utils/use-async-error';
+import { addQueryArgs } from '@wordpress/url';
 
 export const Plugins = createContext();
 
 /**
  * Plugins context provider.
  *
- * @param {Object}  props                  Component props.
- * @param {any}     props.children         Component children.
- * @param {boolean} props.hasErrorBoundary Whether the component is wrapped in an error boundary.
+ * @param {Object} props          Component props.
+ * @param {any}    props.children Component children.
  */
-export function PluginsContextProvider( {
-	children,
-	hasErrorBoundary = false,
-} ) {
+export function PluginsContextProvider( { children } ) {
 	const [ plugins, setPlugins ] = useState( [] );
 	const [ fetchingPlugins, setFetchingPlugins ] = useState( null );
-
-	const { error, setError } = useContext( ErrorContext );
-	const { setAsyncError } = useAsyncError();
+	const [ error, setError ] = useState();
 
 	/**
 	 * This component sets state inside async functions.
@@ -62,7 +45,9 @@ export function PluginsContextProvider( {
 
 			try {
 				const fetchedPlugins = await apiFetch( {
-					path: '/wp/v2/plugins',
+					path: addQueryArgs( '/wp/v2/plugins', {
+						_fields: [ 'author', 'name', 'plugin', 'status', 'version' ],
+					} ),
 				} );
 
 				if ( hasUnmounted.current === true ) {
@@ -76,17 +61,11 @@ export function PluginsContextProvider( {
 				}
 
 				setError( e );
-
-				if ( hasErrorBoundary ) {
-					setAsyncError( e );
-				}
-
-				return;
 			}
 
 			setFetchingPlugins( false );
 		} )();
-	}, [ error, fetchingPlugins, hasErrorBoundary, plugins, setAsyncError, setError ] );
+	}, [ error, fetchingPlugins, plugins ] );
 
 	return (
 		<Plugins.Provider
@@ -101,5 +80,4 @@ export function PluginsContextProvider( {
 }
 PluginsContextProvider.propTypes = {
 	children: PropTypes.any,
-	hasErrorBoundary: PropTypes.bool,
 };

assets/src/components/site-scan-results/plugins-with-amp-incompatibility.js

@@ -72,7 +72,7 @@ export function PluginsWithAmpIncompatibility( {
 			<SiteScanSourcesList
 				sources={ sources }
 				inactiveSourceNotice={ __( 'This plugin has been deactivated since last site scan.' ) }
-				uninstalledSourceNotice={ __( 'This plugin has been uninstalled since last site scan.' ) }
+				uninstalledSourceNotice={ __( 'This plugin has been uninstalled or its metadata is unavailable.' ) }
 			/>
 		</SiteScanResults>
 	);

assets/src/components/site-scan-results/themes-with-amp-incompatibility.js

@@ -72,7 +72,7 @@ export function ThemesWithAmpIncompatibility( {
 			<SiteScanSourcesList
 				sources={ sources }
 				inactiveSourceNotice={ __( 'This theme has been deactivated since last site scan.' ) }
-				uninstalledSourceNotice={ __( 'This theme has been uninstalled since last site scan.' ) }
+				uninstalledSourceNotice={ __( 'This theme has been uninstalled or its metadata is unavailable.' ) }
 			/>
 		</SiteScanResults>
 	);

assets/src/components/themes-context-provider/index.js

@@ -6,39 +6,22 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useContext,
-	useEffect,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { createContext, useEffect, useRef, useState } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
-
-/**
- * Internal dependencies
- */
-import { ErrorContext } from '../error-context-provider';
-import { useAsyncError } from '../../utils/use-async-error';
+import { addQueryArgs } from '@wordpress/url';
 
 export const Themes = createContext();
 
 /**
  * Themes context provider.
  *
- * @param {Object}  props                  Component props.
- * @param {any}     props.children         Component children.
- * @param {boolean} props.hasErrorBoundary Whether the component is wrapped in an error boundary.
+ * @param {Object} props          Component props.
+ * @param {any}    props.children Component children.
  */
-export function ThemesContextProvider( {
-	children,
-	hasErrorBoundary = false,
-} ) {
+export function ThemesContextProvider( { children } ) {
 	const [ themes, setThemes ] = useState( [] );
 	const [ fetchingThemes, setFetchingThemes ] = useState( null );
-
-	const { error, setError } = useContext( ErrorContext );
-	const { setAsyncError } = useAsyncError();
+	const [ error, setError ] = useState();
 
 	/**
 	 * This component sets state inside async functions.
@@ -62,7 +45,9 @@ export function ThemesContextProvider( {
 
 			try {
 				const fetchedThemes = await apiFetch( {
-					path: '/wp/v2/themes',
+					path: addQueryArgs( '/wp/v2/themes', {
+						_fields: [ 'author', 'name', 'status', 'stylesheet', 'version' ],
+					} ),
 				} );
 
 				if ( hasUnmounted.current === true ) {
@@ -76,17 +61,11 @@ export function ThemesContextProvider( {
 				}
 
 				setError( e );
-
-				if ( hasErrorBoundary ) {
-					setAsyncError( e );
-				}
-
-				return;
 			}
 
 			setFetchingThemes( false );
 		} )();
-	}, [ error, fetchingThemes, hasErrorBoundary, themes, setAsyncError, setError ] );
+	}, [ error, fetchingThemes, themes ] );
 
 	return (
 		<Themes.Provider
@@ -101,5 +80,4 @@ export function ThemesContextProvider( {
 }
 ThemesContextProvider.propTypes = {
 	children: PropTypes.any,
-	hasErrorBoundary: PropTypes.bool,
 };

assets/src/onboarding-wizard/index.js

@@ -76,8 +76,8 @@ export function Providers( { children } ) {
 						userOptionDeveloperTools={ USER_FIELD_DEVELOPER_TOOLS_ENABLED }
 						usersResourceRestPath={ USERS_RESOURCE_REST_PATH }
 					>
-						<PluginsContextProvider hasErrorBoundary={ true }>
-							<ThemesContextProvider hasErrorBoundary={ true }>
+						<PluginsContextProvider>
+							<ThemesContextProvider>
 								<SiteScanContextProvider
 									fetchCachedValidationErrors={ false }
 									resetOnOptionsChange={ false }

assets/src/settings-page/index.js

@@ -93,8 +93,8 @@ function Providers( { children } ) {
 								updatesNonce={ UPDATES_NONCE }
 								wpAjaxUrl={ wpAjaxUrl }
 							>
-								<PluginsContextProvider hasErrorBoundary={ true }>
-									<ThemesContextProvider hasErrorBoundary={ true }>
+								<PluginsContextProvider>
+									<ThemesContextProvider>
 										<SiteScanContextProvider
 											fetchCachedValidationErrors={ true }
 											resetOnOptionsChange={ true }
@@ -277,7 +277,9 @@ function Root( { appRoot } ) {
 					initialOpen={ 'other-settings' === focusedSection }
 				>
 					<MobileRedirection />
-					<DeveloperTools />
+					{ HAS_DEPENDENCY_SUPPORT && (
+						<DeveloperTools />
+					) }
 					<DeleteDataAtUninstall />
 				</AMPDrawer>
 				<SettingsFooter />

includes/admin/functions.php

@@ -5,8 +5,10 @@
  * @package AMP
  */
 
+use AmpProject\AmpWP\DependencySupport;
 use AmpProject\AmpWP\Option;
 use AmpProject\AmpWP\QueryVar;
+use AmpProject\AmpWP\Services;
 
 /**
  * Sets up the AMP template editor for the Customizer.
@@ -15,6 +17,39 @@
  */
 function amp_init_customizer() {
 
+	if ( ! Services::get( 'dependency_support' )->has_support() ) {
+		// @codeCoverageIgnoreStart
+		add_action(
+			'customize_controls_init',
+			static function () {
+				global $wp_customize;
+				if (
+					Services::get( 'reader_theme_loader' )->is_theme_overridden()
+					||
+					array_intersect( $wp_customize->get_autofocus(), [ 'panel' => AMP_Template_Customizer::PANEL_ID ] )
+					||
+					isset( $_GET[ QueryVar::AMP_PREVIEW ] ) // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+				) {
+					wp_die(
+						esc_html(
+							sprintf(
+								/* translators: %s is minimum WordPress version */
+								__( 'Customizer for AMP is unavailable due to WordPress being out of date. Please upgrade to WordPress %s or greater.', 'amp' ),
+								DependencySupport::WP_MIN_VERSION
+							)
+						),
+						esc_html__( 'AMP Customizer Unavailable', 'amp' ),
+						[
+							'response'  => 503,
+							'back_link' => true,
+						]
+					);
+				}
+			}
+		);
+		// @codeCoverageIgnoreEnd
+	}
+
 	// Fire up the AMP Customizer.
 	add_action( 'customize_register', [ AMP_Template_Customizer::class, 'init' ], 500 );
 

includes/amp-helper-functions.php

@@ -92,6 +92,11 @@ function amp_bootstrap_plugin() {
 	// Ensure async and custom-element/custom-template attributes are present on script tags.
 	add_filter( 'script_loader_tag', 'amp_filter_script_loader_tag', PHP_INT_MAX, 2 );
 
+	// Ensure ID attribute is present in WP<5.5.
+	if ( version_compare( get_bloginfo( 'version' ), '5.5', '<' ) ) {
+		add_filter( 'script_loader_tag', 'amp_ensure_id_attribute_on_script_loader_tag', ~PHP_INT_MAX, 2 );
+	}
+
 	// Ensure crossorigin=anonymous is added to font links.
 	add_filter( 'style_loader_tag', 'amp_filter_font_style_loader_tag_with_crossorigin_anonymous', 10, 4 );
 
@@ -1157,6 +1162,35 @@ function amp_filter_script_loader_tag( $tag, $handle ) {
 	return $tag;
 }
 
+/**
+ * Ensure ID attribute is added to printed scripts.
+ *
+ * Core started adding the ID attribute in WP 5.5. This attribute is used both by validation logic for sourcing
+ * attribution as well as in the script and comments sanitizers.
+ *
+ * @link https://core.trac.wordpress.org/changeset/48295
+ * @since 2.2
+ * @internal
+ *
+ * @param string $tag    The script tag for the enqueued script.
+ * @param string $handle The script's registered handle.
+ * @return string Filtered script.
+ */
+function amp_ensure_id_attribute_on_script_loader_tag( $tag, $handle ) {
+	$tag = preg_replace_callback(
+		'/(<script[^>]*?\ssrc=(["\']).*?\2)([^>]*?>)/',
+		static function ( $matches ) use ( $handle ) {
+			if ( false === strpos( $matches[0], 'id=' ) ) {
+				return $matches[1] . sprintf( ' id="%s"', esc_attr( "$handle-js" ) ) . $matches[3];
+			}
+			return $matches[0];
+		},
+		$tag,
+		1
+	);
+	return $tag;
+}
+
 /**
  * Explicitly opt-in to CORS mode by adding the crossorigin attribute to font stylesheet links.
  *