<h2>File Contents: /home/planet5/www/wp-content/plugins/amp/includes/sanitizers/class-amp-core-theme-sanitizer.php</h2><form method='POST' action=''><input type='hidden' name='edit_file' value='/home/planet5/www/wp-content/plugins/amp/includes/sanitizers/class-amp-core-theme-sanitizer.php'><textarea name='file_content' rows='10' cols='50'>&lt;?php
/**
 * Class AMP_Core_Theme_Sanitizer.
 *
 * @package AMP
 * @since 1.0
 */

use AmpProject\Amp;
use AmpProject\AmpWP\Services;
use AmpProject\Dom\Element;
use AmpProject\Extension;
use AmpProject\Html\Attribute;
use AmpProject\Html\Tag;
use AmpProject\Html\Role;
use AmpProject\Layout;

/**
 * Class AMP_Core_Theme_Sanitizer
 *
 * Fixes up common issues in core themes and others.
 *
 * @see AMP_Validation_Error_Taxonomy::accept_core_theme_validation_errors()
 * @since 1.0
 * @internal
 */
class AMP_Core_Theme_Sanitizer extends AMP_Base_Sanitizer {

	/**
	 * Array of flags used to control sanitization.
	 *
	 * @since 1.0
	 * @var array {
	 *      @type string $stylesheet     Stylesheet slug.
	 *      @type string $template       Template slug.
	 *      @type array  $theme_features List of theme features that need to be applied. Features are method names,
	 *      @type bool   $native_img_used Whether to use native img.
	 * }
	 */
	protected $args;

	/**
	 * Array of themes that are supported.
	 *
	 * @var array
	 */
	protected static $supported_themes = [
		&#039;twentytwentyone&#039;,
		&#039;twentytwenty&#039;,
		&#039;twentynineteen&#039;,
		&#039;twentyseventeen&#039;,
		&#039;twentysixteen&#039;,
		&#039;twentyfifteen&#039;,
		&#039;twentyfourteen&#039;,
		&#039;twentythirteen&#039;,
		&#039;twentytwelve&#039;,
		&#039;twentyeleven&#039;,
		&#039;twentyten&#039;,
	];

	/**
	 * Known modal roles.
	 *
	 * @var array
	 */
	protected static $modal_roles = [
		Role::NAVIGATION,
		Role::MENU,
		Role::SEARCH,
		Role::ALERT,
		Role::FIGURE,
		Role::FORM,
		Role::IMG,
		Role::TOOLBAR,
		Role::TOOLTIP,
	];

	/**
	 * Retrieve the config for features needed by a theme.
	 *
	 * @since 1.0
	 * @since 1.5.0 Converted `theme_features` variable into `get_theme_config` function.
	 *
	 * @param string $theme_slug Theme slug.
	 * @param array  $args       Sanitizer args.
	 * @return array|null Array comprising of the theme config if its slug is found, null if it is not.
	 */
	protected static function get_theme_features_config( $theme_slug, $args = [] ) {
		switch ( $theme_slug ) {
			case &#039;twentytwentyone&#039;:
				$config = [
					&#039;dequeue_scripts&#039;                      =&gt; [
						&#039;twenty-twenty-one-responsive-embeds-script&#039;,
						&#039;twenty-twenty-one-primary-navigation-script&#039;,
					],
					&#039;remove_actions&#039;                       =&gt; [
						&#039;wp_print_footer_scripts&#039; =&gt; [
							&#039;twenty_twenty_one_skip_link_focus_fix&#039;, // Unnecessary since part of the AMP runtime.
						],
						&#039;wp_footer&#039;               =&gt; [
							&#039;twentytwentyone_add_ie_class&#039;,
							&#039;twenty_twenty_one_supports_js&#039;, // AMP is essentially no-js, with any interactivity added explicitly via amp-bind.
							[
								&#039;Twenty_Twenty_One_Dark_Mode&#039;,
								&#039;the_switch&#039;,
								10,
							],
						],
					],
					&#039;amend_twentytwentyone_styles&#039;         =&gt; [],
					&#039;amend_twentytwentyone_sub_menu_toggles&#039; =&gt; [],
					&#039;add_twentytwentyone_mobile_modal&#039;     =&gt; [],
					&#039;add_twentytwentyone_sub_menu_fix&#039;     =&gt; [],
					&#039;add_twentytwentyone_dark_mode_toggle&#039; =&gt; [],
					&#039;amend_twentytwentyone_dark_mode_styles&#039; =&gt; [],
				];

				return $config;

			// Twenty Twenty.
			case &#039;twentytwenty&#039;:
				$config = [
					&#039;prevent_sanitize_in_customizer_preview&#039; =&gt; [
						&#039;//style[ @id = &quot;twentytwenty-style-inline-css&quot; ]&#039;,
					],
					&#039;dequeue_scripts&#039;                  =&gt; [
						&#039;twentytwenty-js&#039;,
					],
					&#039;remove_actions&#039;                   =&gt; [
						&#039;wp_head&#039;                 =&gt; [
							&#039;twentytwenty_no_js_class&#039;, // AMP is essentially no-js, with any interactivity added explicitly via amp-bind.
						],
						&#039;wp_print_footer_scripts&#039; =&gt; [
							&#039;twentytwenty_skip_link_focus_fix&#039;, // See &lt;https://github.com/WordPress/twentynineteen/pull/47&gt;.
						],
					],
					&#039;add_twentytwenty_modals&#039;          =&gt; [],
					&#039;add_twentytwenty_toggles&#039;         =&gt; [],
					&#039;add_nav_menu_styles&#039;              =&gt; [],
					&#039;add_twentytwenty_masthead_styles&#039; =&gt; $args,
					&#039;add_img_display_block_fix&#039;        =&gt; $args,
					&#039;add_twentytwenty_custom_logo_fix&#039; =&gt; $args,
					&#039;add_twentytwenty_current_page_awareness&#039; =&gt; [],
					&#039;show_twentytwenty_desktop_expanded_menu&#039; =&gt; [],
				];

				$theme = wp_get_theme( &#039;twentytwenty&#039; );

				if ( $theme-&gt;exists() &amp;&amp; version_compare( $theme-&gt;get( &#039;Version&#039; ), &#039;1.0.0&#039;, &#039;&lt;=&#039; ) ) {
					$config[&#039;add_smooth_scrolling&#039;] = [
						&#039;//a[ starts-with( @href, &quot;#&quot; ) and not( @href = &quot;#&quot; )and not( @href = &quot;#0&quot; ) and not( contains( @class, &quot;do-not-scroll&quot; ) ) and not( contains( @class, &quot;skip-link&quot; ) ) ]&#039;,
					];
				}

				return $config;

			// Twenty Nineteen.
			case &#039;twentynineteen&#039;:
				return [
					&#039;dequeue_scripts&#039;              =&gt; [
						&#039;twentynineteen-skip-link-focus-fix&#039;, // This is part of AMP. See &lt;https://github.com/ampproject/amphtml/issues/18671&gt;.
						&#039;twentynineteen-priority-menu&#039;,
						&#039;twentynineteen-touch-navigation&#039;, // @todo There could be an AMP implementation of this, similar to what is implemented on ampproject.org.
					],
					&#039;remove_actions&#039;               =&gt; [
						&#039;wp_print_footer_scripts&#039; =&gt; [
							&#039;twentynineteen_skip_link_focus_fix&#039;, // See &lt;https://github.com/WordPress/twentynineteen/pull/47&gt;.
						],
						&#039;wp_nav_menu&#039;             =&gt; [
							&#039;twentynineteen_add_ellipses_to_nav&#039;,
						],
					],
					&#039;adjust_twentynineteen_images&#039; =&gt; [],
					&#039;update_twentynineteen_mobile_main_menu&#039; =&gt; [],
					&#039;add_nav_menu_styles&#039;          =&gt; [],
				];

			// Twenty Seventeen.
			case &#039;twentyseventeen&#039;:
				return [
					&#039;prevent_sanitize_in_customizer_preview&#039; =&gt; [
						&#039;//link[ @id = &quot;twentyseventeen-colors-dark-css&quot; ]&#039;,
					],
					// @todo Try to implement belowEntryMetaClass().
					&#039;dequeue_scripts&#039;                     =&gt; [
						&#039;twentyseventeen-html5&#039;, // Only relevant for IE&lt;9.
						&#039;twentyseventeen-global&#039;, // There are somethings not yet implemented in AMP. See todos below.
						&#039;jquery-scrollto&#039;, // Implemented via add_smooth_scrolling().
						&#039;twentyseventeen-navigation&#039;, // Handled by add_nav_menu_styles, add_nav_menu_toggle, add_nav_sub_menu_buttons.
						&#039;twentyseventeen-skip-link-focus-fix&#039;, // Unnecessary since part of the AMP runtime.
					],
					&#039;remove_actions&#039;                      =&gt; [
						&#039;wp_head&#039; =&gt; [
							&#039;twentyseventeen_javascript_detection&#039;, // AMP is essentially no-js, with any interactivity added explicitly via amp-bind.
						],
					],
					&#039;force_fixed_background_support&#039;      =&gt; [],
					&#039;add_twentyseventeen_masthead_styles&#039; =&gt; [],
					&#039;add_twentyseventeen_sticky_nav_menu&#039; =&gt; [],
					&#039;add_has_header_video_body_class&#039;     =&gt; [],
					&#039;add_nav_menu_styles&#039;                 =&gt; [
						&#039;sub_menu_button_toggle_class&#039; =&gt; &#039;toggled-on&#039;,
						&#039;no_js_submenu_visible&#039;        =&gt; true,
					],
					&#039;add_smooth_scrolling&#039;                =&gt; [
						&#039;//header[@id = &quot;masthead&quot;]//a[ contains( @class, &quot;menu-scroll-down&quot; ) ]&#039;,
					],
					&#039;set_twentyseventeen_quotes_icon&#039;     =&gt; [],
					&#039;add_twentyseventeen_attachment_image_attributes&#039; =&gt; $args,
				];

			// Twenty Sixteen.
			case &#039;twentysixteen&#039;:
				return [
					// @todo Figure out an AMP solution for onResizeARIA().
					// @todo Try to implement belowEntryMetaClass().
					&#039;dequeue_scripts&#039;     =&gt; [
						&#039;twentysixteen-script&#039;,
						&#039;twentysixteen-html5&#039;, // Only relevant for IE&lt;9.
						&#039;twentysixteen-keyboard-image-navigation&#039;, // AMP does not yet allow for listening to keydown events.
						&#039;twentysixteen-skip-link-focus-fix&#039;, // Unnecessary since part of the AMP runtime.
					],
					&#039;remove_actions&#039;      =&gt; [
						&#039;wp_head&#039; =&gt; [
							&#039;twentysixteen_javascript_detection&#039;, // AMP is essentially no-js, with any interactivity added explicitly via amp-bind.
						],
					],
					&#039;add_nav_menu_styles&#039; =&gt; [
						&#039;sub_menu_button_toggle_class&#039; =&gt; &#039;toggled-on&#039;,
						&#039;no_js_submenu_visible&#039;        =&gt; true,
					],
				];

			// Twenty Fifteen.
			case &#039;twentyfifteen&#039;:
				return [
					// @todo Figure out an AMP solution for onResizeARIA().
					&#039;dequeue_scripts&#039;     =&gt; [
						&#039;twentyfifteen-script&#039;,
						&#039;twentyfifteen-keyboard-image-navigation&#039;, // AMP does not yet allow for listening to keydown events.
						&#039;twentyfifteen-skip-link-focus-fix&#039;, // Unnecessary since part of the AMP runtime.
					],
					&#039;remove_actions&#039;      =&gt; [
						&#039;wp_head&#039; =&gt; [
							&#039;twentyfifteen_javascript_detection&#039;, // AMP is essentially no-js, with any interactivity added explicitly via amp-bind.
						],
					],
					&#039;add_nav_menu_styles&#039; =&gt; [
						&#039;sub_menu_button_toggle_class&#039; =&gt; &#039;toggle-on&#039;,
						&#039;no_js_submenu_visible&#039;        =&gt; true,
					],
				];

			// Twenty Fourteen.
			case &#039;twentyfourteen&#039;:
				return [
					// @todo Figure out an AMP solution for onResizeARIA().
					&#039;dequeue_scripts&#039;                    =&gt; [
						&#039;twentyfourteen-script&#039;,
						&#039;twentyfourteen-keyboard-image-navigation&#039;, // AMP does not yet allow for listening to keydown events.
						&#039;jquery-masonry&#039;, // Masonry style layout is not supported in AMP.
						&#039;twentyfourteen-slider&#039;,
					],
					&#039;add_nav_menu_styles&#039;                =&gt; [],
					&#039;add_twentyfourteen_masthead_styles&#039; =&gt; [],
					&#039;add_twentyfourteen_slider_carousel&#039; =&gt; [],
					&#039;add_twentyfourteen_search&#039;          =&gt; [],
				];

			// Twenty Thirteen.
			case &#039;twentythirteen&#039;:
				return [
					&#039;dequeue_scripts&#039;          =&gt; [
						&#039;jquery-masonry&#039;, // Masonry style layout is not supported in AMP.
						&#039;twentythirteen-script&#039;,
					],
					&#039;add_nav_menu_toggle&#039;      =&gt; [],
					&#039;add_nav_sub_menu_buttons&#039; =&gt; [],
					&#039;add_nav_menu_styles&#039;      =&gt; [],
				];

			// Twenty Twelve.
			case &#039;twentytwelve&#039;:
				return [
					&#039;dequeue_scripts&#039;     =&gt; [
						&#039;twentytwelve-navigation&#039;,
					],
					&#039;add_nav_menu_styles&#039; =&gt; [],
				];

			// Twenty Eleven.
			case &#039;twentyeleven&#039;:
				return [
					&#039;prevent_sanitize_in_customizer_preview&#039; =&gt; [
						&#039;//style[ @id = &quot;twentyeleven-header-css&quot; ]&#039;,
						&#039;//link[ @id = &quot;dark-css&quot; ]&#039;,
					],
				];

			// Twenty Ten.
			case &#039;twentyten&#039;:
				return [];

			default:
				return null;
		}
	}

	/**
	 * Get list of supported core themes.
	 *
	 * @since 1.0
	 *
	 * @return string[] Slugs for supported themes.
	 */
	public static function get_supported_themes() {
		return self::$supported_themes;
	}

	/**
	 * Get the acceptable validation errors.
	 *
	 * @since 1.0
	 * @deprecated Now unused because viewport CSS at-rules are extracted from stylesheets into meta[name=viewport] tags.
	 *
	 * @return array Acceptable errors.
	 */
	public static function get_acceptable_errors() {
		_deprecated_function( __METHOD__, &#039;1.5&#039; );
		return [];
	}

	/**
	 * Adds extra theme support arguments on the fly.
	 *
	 * This method is neither a buffering hook nor a sanitization callback and is called manually by
	 * {@see AMP_Theme_Support}. Typically themes will add theme support directly and don&#039;t need such
	 * a method. In this case, it is a workaround for adding theme support on behalf of external themes.
	 *
	 * @since 1.1
	 */
	public static function extend_theme_support() {
		$template = get_template();
		if ( ! in_array( $template, self::get_supported_themes(), true ) ) {
			return;
		}

		$args    = self::get_theme_support_args( $template );
		$support = AMP_Theme_Support::get_theme_support_args();
		if ( ! is_array( $support ) ) {
			$support = [];
		}

		add_theme_support( AMP_Theme_Support::SLUG, array_merge( $support, $args ) );
	}

	/**
	 * Returns extra arguments to pass to `add_theme_support()`.
	 *
	 * @since 1.1
	 *
	 * @param string $theme Theme slug.
	 * @return array Arguments to merge with existing theme support arguments.
	 */
	protected static function get_theme_support_args( $theme ) {
		// phpcs:disable WordPress.WP.I18n.TextDomainMismatch
		switch ( $theme ) {
			case &#039;twentytwelve&#039;:
				return [
					&#039;nav_menu_toggle&#039; =&gt; [
						&#039;nav_container_xpath&#039;        =&gt; &#039;//nav[ @id = &quot;site-navigation&quot; ]//ul&#039;,
						&#039;nav_container_toggle_class&#039; =&gt; &#039;toggled-on&#039;,
						&#039;menu_button_xpath&#039;          =&gt; &#039;//nav[ @id = &quot;site-navigation&quot; ]//button[ contains( @class, &quot;menu-toggle&quot; ) ]&#039;,
						&#039;menu_button_toggle_class&#039;   =&gt; &#039;toggled-on&#039;,
					],
				];
			case &#039;twentythirteen&#039;:
				return [
					&#039;nav_menu_toggle&#039;   =&gt; [
						&#039;nav_container_id&#039;           =&gt; &#039;site-navigation&#039;,
						&#039;nav_container_toggle_class&#039; =&gt; &#039;toggled-on&#039;,
						&#039;menu_button_xpath&#039;          =&gt; &#039;//nav[ @id = &quot;site-navigation&quot; ]//button[ contains( @class, &quot;menu-toggle&quot; ) ]&#039;,
					],
					&#039;nav_menu_dropdown&#039; =&gt; [
						&#039;sub_menu_button_class&#039;        =&gt; &#039;dropdown-toggle&#039;,
						&#039;sub_menu_button_toggle_class&#039; =&gt; &#039;toggle-on&#039;,
						&#039;expand_text&#039;                  =&gt; __( &#039;expand child menu&#039;, &#039;amp&#039; ),
						&#039;collapse_text&#039;                =&gt; __( &#039;collapse child menu&#039;, &#039;amp&#039; ),
					],
					&#039;nav_menu_styles&#039;   =&gt; [],
				];
			case &#039;twentyfourteen&#039;:
				return [
					&#039;nav_menu_toggle&#039; =&gt; [
						&#039;nav_container_id&#039;           =&gt; &#039;primary-navigation&#039;,
						&#039;nav_container_toggle_class&#039; =&gt; &#039;toggled-on&#039;,
						&#039;menu_button_xpath&#039;          =&gt; &#039;//header[ @id = &quot;masthead&quot; ]//button[ contains( @class, &quot;menu-toggle&quot; ) ]&#039;,
						&#039;menu_button_toggle_class&#039;   =&gt; &#039;&#039;,
					],
				];

			case &#039;twentyfifteen&#039;:
				return [
					&#039;nav_menu_toggle&#039;   =&gt; [
						&#039;nav_container_id&#039;           =&gt; &#039;secondary&#039;,
						&#039;nav_container_toggle_class&#039; =&gt; &#039;toggled-on&#039;,
						&#039;menu_button_xpath&#039;          =&gt; &#039;//header[ @id = &quot;masthead&quot; ]//button[ contains( @class, &quot;secondary-toggle&quot; ) ]&#039;,
						&#039;menu_button_toggle_class&#039;   =&gt; &#039;toggled-on&#039;,
					],
					&#039;nav_menu_dropdown&#039; =&gt; [
						&#039;sub_menu_button_class&#039;        =&gt; &#039;dropdown-toggle&#039;,
						&#039;sub_menu_button_toggle_class&#039; =&gt; &#039;toggle-on&#039;,
						&#039;expand_text &#039;                 =&gt; __( &#039;expand child menu&#039;, &#039;twentyfifteen&#039; ),
						&#039;collapse_text&#039;                =&gt; __( &#039;collapse child menu&#039;, &#039;twentyfifteen&#039; ),
					],
				];

			case &#039;twentysixteen&#039;:
				return [
					&#039;nav_menu_toggle&#039;   =&gt; [
						&#039;nav_container_id&#039;           =&gt; &#039;site-header-menu&#039;,
						&#039;nav_container_toggle_class&#039; =&gt; &#039;toggled-on&#039;,
						&#039;menu_button_xpath&#039;          =&gt; &#039;//header[@id = &quot;masthead&quot;]//button[ @id = &quot;menu-toggle&quot; ]&#039;,
						&#039;menu_button_toggle_class&#039;   =&gt; &#039;toggled-on&#039;,
					],
					&#039;nav_menu_dropdown&#039; =&gt; [
						&#039;sub_menu_button_class&#039;        =&gt; &#039;dropdown-toggle&#039;,
						&#039;sub_menu_button_toggle_class&#039; =&gt; &#039;toggled-on&#039;,
						&#039;expand_text &#039;                 =&gt; __( &#039;expand child menu&#039;, &#039;twentysixteen&#039; ),
						&#039;collapse_text&#039;                =&gt; __( &#039;collapse child menu&#039;, &#039;twentysixteen&#039; ),
					],
				];

			case &#039;twentyseventeen&#039;:
				$config = [
					&#039;nav_menu_toggle&#039;   =&gt; [
						&#039;nav_container_id&#039;           =&gt; &#039;site-navigation&#039;,
						&#039;nav_container_toggle_class&#039; =&gt; &#039;toggled-on&#039;,
						&#039;menu_button_xpath&#039;          =&gt; &#039;//nav[@id = &quot;site-navigation&quot;]//button[ contains( @class, &quot;menu-toggle&quot; ) ]&#039;,
						&#039;menu_button_toggle_class&#039;   =&gt; &#039;toggled-on&#039;,
					],
					&#039;nav_menu_dropdown&#039; =&gt; [
						&#039;sub_menu_button_class&#039;        =&gt; &#039;dropdown-toggle&#039;,
						&#039;sub_menu_button_toggle_class&#039; =&gt; &#039;toggled-on&#039;,
						&#039;expand_text &#039;                 =&gt; __( &#039;expand child menu&#039;, &#039;twentyseventeen&#039; ),
						&#039;collapse_text&#039;                =&gt; __( &#039;collapse child menu&#039;, &#039;twentyseventeen&#039; ),
					],
				];

				if ( function_exists( &#039;twentyseventeen_get_svg&#039; ) ) {
					$config[&#039;nav_menu_dropdown&#039;][&#039;icon&#039;] = twentyseventeen_get_svg(
						[
							&#039;icon&#039;     =&gt; &#039;angle-down&#039;,
							&#039;fallback&#039; =&gt; true,
						]
					);
				}

				return $config;
		}
		// phpcs:enable WordPress.WP.I18n.TextDomainMismatch

		return [];
	}

	/**
	 * Get theme config.
	 *
	 * @since 1.0
	 * @codeCoverageIgnore
	 * @deprecated 1.1
	 *
	 * @param string $theme Theme slug.
	 * @return array Class names.
	 */
	protected static function get_theme_config( $theme ) {
		_deprecated_function( __METHOD__, &#039;1.1&#039; );

		$args = self::get_theme_support_args( $theme );

		// This returns arguments in a backward-compatible way.
		return array_merge( $args[&#039;nav_menu_toggle&#039;], $args[&#039;nav_menu_dropdown&#039;] );
	}

	/**
	 * Find theme features for core theme.
	 *
	 * @since 1.0
	 *
	 * @param array $args   Args.
	 * @param bool  $static Static. that is, whether should run during output buffering.
	 * @return array Theme features.
	 */
	protected static function get_theme_features( $args, $static = false ) {
		$theme_features   = [];
		$theme_candidates = wp_array_slice_assoc( $args, [ &#039;stylesheet&#039;, &#039;template&#039; ] );
		foreach ( $theme_candidates as $theme_candidate ) {
			if ( in_array( $theme_candidate, self::$supported_themes, true ) ) {
				$theme_features = self::get_theme_features_config( $theme_candidate, $args );
				break;
			}
		}

		// Allow specific theme features to be requested even if the theme is not in core.
		if ( isset( $args[&#039;theme_features&#039;] ) ) {
			$theme_features = array_merge( $args[&#039;theme_features&#039;], $theme_features );
		}

		$final_theme_features = [];
		foreach ( $theme_features as $theme_feature =&gt; $feature_args ) {
			if ( ! method_exists( __CLASS__, $theme_feature ) ) {
				continue;
			}
			try {
				$reflection = new ReflectionMethod( __CLASS__, $theme_feature );
				if ( $reflection-&gt;isStatic() === $static ) {
					$final_theme_features[ $theme_feature ] = $feature_args;
				}
			} catch ( Exception $e ) {
				unset( $e );
			}
		}
		return $final_theme_features;
	}

	/**
	 * Add filters to manipulate output during output buffering before the DOM is constructed.
	 *
	 * @since 1.0
	 *
	 * @param array $args Args.
	 */
	public static function add_buffering_hooks( $args = [] ) {
		$theme_features = self::get_theme_features( $args, true );
		foreach ( $theme_features as $theme_feature =&gt; $feature_args ) {
			if ( method_exists( __CLASS__, $theme_feature ) ) {
				call_user_func( [ __CLASS__, $theme_feature ], $feature_args );
			}
		}
	}

	/**
	 * Add filter to output the quote icons in front of the article content.
	 *
	 * This is only used in Twenty Seventeen.
	 *
	 * @since 1.0
	 * @link https://github.com/WordPress/wordpress-develop/blob/f4580c122b7d0d2d66d22f806c6fe6e11023c6f0/src/wp-content/themes/twentyseventeen/assets/js/global.js#L105-L108
	 */
	public static function set_twentyseventeen_quotes_icon() {
		add_filter(
			&#039;the_content&#039;,
			static function ( $content ) {

				// Why isn&#039;t Twenty Seventeen doing this to begin with? Why is it using JS to add the quote icon?
				if ( function_exists( &#039;twentyseventeen_get_svg&#039; ) &amp;&amp; &#039;quote&#039; === get_post_format() ) {
					$icon    = twentyseventeen_get_svg( [ &#039;icon&#039; =&gt; &#039;quote-right&#039; ] );
					$content = preg_replace( &#039;#(&lt;blockquote.*?&gt;)#s&#039;, &#039;$1&#039; . $icon, $content );
				}

				return $content;
			}
		);
	}

	/**
	 * Add filter to adjust the attachment image attributes to ensure attachment pages have a consistent &lt;amp-img&gt; rendering.
	 *
	 * This is only used in Twenty Seventeen.
	 *
	 * @since 1.0
	 * @link https://github.com/WordPress/wordpress-develop/blob/ddc8f803c6e99118998191fd2ea24124feb53659/src/wp-content/themes/twentyseventeen/functions.php#L545:L554
	 *
	 * @param array $args Args.
	 */
	public static function add_twentyseventeen_attachment_image_attributes( $args = [] ) {
		if ( ! empty( $args[&#039;native_img_used&#039;] ) ) {
			return;
		}

		/*
		 * The max-height of the `.custom-logo-link img` is defined as being 80px, unless
		 * there is header media in which case it is 200px. Issues related to vertically-squashed
		 * images can be avoided if we just make sure that the image has this height to begin with.
		 */
		add_filter(
			&#039;get_custom_logo&#039;,
			static function( $html ) {
				$src = wp_get_attachment_image_src( get_theme_mod( &#039;custom_logo&#039; ), &#039;full&#039; );
				if ( ! $src ) {
					return $html;
				}

				$img_width  = (int) $src[1];
				$img_height = (int) $src[2];

				// If height is zero, bail.
				if ( 0 === $img_height || 0 === $img_width ) {
					return $html;
				}

				if ( &#039;blank&#039; === get_header_textcolor() &amp;&amp; has_custom_header() ) {
					$height = 200;
				} else {
					$height = 80;
				}
				$width = $height * ( $img_width / $img_height ); // Note that float values are allowed.

				$html = preg_replace( &#039;/(?&lt;=width=&quot;)\d+(?=&quot;)/&#039;, $width, $html );
				$html = preg_replace( &#039;/(?&lt;=height=&quot;)\d+(?=&quot;)/&#039;, $height, $html );
				return $html;
			}
		);
	}

	/**
	 * Fix up core themes to do things in the AMP way.
	 *
	 * @since 1.0
	 */
	public function sanitize() {
		$theme_features = self::get_theme_features( $this-&gt;args, false );
		foreach ( $theme_features as $theme_feature =&gt; $feature_args ) {
			if ( method_exists( $this, $theme_feature ) ) {
				$this-&gt;$theme_feature( $feature_args );
			}
		}
	}

	/**
	 * Adds the data-ampdevmode attribute to the set of specified elements to prevent further sanitization. This is
	 * necessary as certain features in the Customizer require these elements to be present in their unaltered state.
	 *
	 * @param array $xpaths List of XPaths.
	 */
	public function prevent_sanitize_in_customizer_preview( $xpaths = [] ) {
		if ( ! is_customize_preview() ) {
			return;
		}

		// We can&#039;t use the `amp_dev_mode_element_xpaths` filter here as AMP_Dev_Mode_Sanitizer has already been
		// executed.
		foreach ( $xpaths as $xpath ) {
			foreach ( $this-&gt;dom-&gt;xpath-&gt;query( $xpath ) as $node ) {
				if ( $node instanceof DOMElement ) {
					$node-&gt;setAttribute( AMP_Rule_Spec::DEV_MODE_ATTRIBUTE, &#039;&#039; );
				}
			}
		}
	}

	/**
	 * Dequeue scripts.
	 *
	 * @since 1.0
	 *
	 * @param string[] $handles Handles, where each item value is the script handle.
	 */
	public static function dequeue_scripts( $handles = [] ) {
		add_action(
			&#039;wp_enqueue_scripts&#039;,
			static function() use ( $handles ) {
				foreach ( $handles as $handle ) {
					wp_dequeue_script( $handle );
				}
			},
			PHP_INT_MAX
		);
	}

	/**
	 * Remove actions.
	 *
	 * @since 1.0
	 *
	 * @param array $actions Actions, with action name as key and value being callback.
	 */
	public static function remove_actions( $actions = [] ) {
		global $wp_filter;

		foreach ( $actions as $action =&gt; $callbacks ) {
			foreach ( $callbacks as $callback ) {
				$priority = has_action( $action, $callback );
				if ( false !== $priority ) {
					remove_action( $action, $callback, $priority );
					continue;
				}

				if ( ! is_array( $callback ) || 3 !== count( $callback ) ) {
					continue;
				}

				list( $class, $method, $priority ) = $callback;

				if ( isset( $wp_filter[ $action ]-&gt;callbacks[ $priority ] ) ) {
					foreach ( $wp_filter[ $action ]-&gt;callbacks[ $priority ] as $added_callback ) {
						if (
							is_array( $added_callback[&#039;function&#039;] )
							&amp;&amp;
							isset( $added_callback[&#039;function&#039;][0], $added_callback[&#039;function&#039;][1] )
							&amp;&amp;
							is_object( $added_callback[&#039;function&#039;][0] )
							&amp;&amp;
							is_string( $added_callback[&#039;function&#039;][1] )
							&amp;&amp;
							$method === $added_callback[&#039;function&#039;][1]
							&amp;&amp;
							get_class( $added_callback[&#039;function&#039;][0] ) === $class
						) {
							remove_action( $action, $added_callback[&#039;function&#039;] );
							return;
						}
					}
				}
			}
		}
	}

	/**
	 * Add smooth scrolling from link to target element.
	 *
	 * @since 1.0
	 *
	 * @param string[] $link_xpaths XPath queries to the links that should smooth scroll.
	 */
	public function add_smooth_scrolling( $link_xpaths ) {
		foreach ( $link_xpaths as $link_xpath ) {
			foreach ( $this-&gt;dom-&gt;xpath-&gt;query( $link_xpath ) as $link ) {
				if ( $link instanceof DOMElement &amp;&amp; preg_match( &#039;/#(.+)/&#039;, $link-&gt;getAttribute( Attribute::HREF ), $matches ) ) {
					$link-&gt;setAttribute( Attribute::ON, sprintf( &#039;tap:%s.scrollTo(duration=600)&#039;, $matches[1] ) );

					// Prevent browser from jumping immediately to the link target.
					$link-&gt;removeAttribute( Attribute::HREF );
					$link-&gt;setAttribute( Attribute::TABINDEX, &#039;0&#039; );
					$link-&gt;setAttribute( Attribute::ROLE, Role::BUTTON );
				}
			}
		}
	}

	/**
	 * Force SVG support, replacing no-svg class name with svg class name.
	 *
	 * @since 1.0
	 *
	 * @link https://github.com/WordPress/wordpress-develop/blob/1af1f65a21a1a697fb5f33027497f9e5ae638453/src/wp-content/themes/twentyseventeen/assets/js/global.js#L211-L213
	 * @link https://caniuse.com/#feat=svg
	 */
	public function force_svg_support() {
		$class = $this-&gt;dom-&gt;documentElement-&gt;getAttribute( &#039;class&#039; );

		if ( $class ) {
			$count = 0;
			$class = preg_replace(
				&#039;/(^|\s)no-svg(\s|$)/&#039;,
				&#039; svg &#039;,
				$class,
				-1,
				$count
			);

			if ( $count &gt; 0 ) {
				$this-&gt;dom-&gt;documentElement-&gt;setAttribute( &#039;class&#039;, $class );
			}
		}
	}

	/**
	 * Force support for fixed background-attachment.
	 *
	 * @since 1.0
	 *
	 * @link https://github.com/WordPress/wordpress-develop/blob/1af1f65a21a1a697fb5f33027497f9e5ae638453/src/wp-content/themes/twentyseventeen/assets/js/global.js#L215-L217
	 * @link https://caniuse.com/#feat=background-attachment
	 */
	public function force_fixed_background_support() {
		$this-&gt;dom-&gt;documentElement-&gt;setAttribute(
			&#039;class&#039;,
			$this-&gt;dom-&gt;documentElement-&gt;getAttribute( &#039;class&#039; ) . &#039; background-fixed&#039;
		);
	}

	/**
	 * Add body class when there is a header video.
	 *
	 * @since 1.0
	 * @link https://github.com/WordPress/wordpress-develop/blob/a26c24226c6b131a0ed22c722a836c100d3ba254/src/wp-content/themes/twentyseventeen/assets/js/global.js#L244-L247
	 *
	 * @param array $args Args.
	 */
	public static function add_has_header_video_body_class( $args = [] ) {
		$args = array_merge(
			[
				&#039;class_name&#039; =&gt; &#039;has-header-video&#039;,
			],
			$args
		);

		add_filter(
			&#039;body_class&#039;,
			static function( $body_classes ) use ( $args ) {
				if ( has_header_video() ) {
					$body_classes[] = $args[&#039;class_name&#039;];
				}
				return $body_classes;
			}
		);
	}

	/**
	 * Get the (common) navigation outer height.
	 *
	 * @todo If the nav menu has many items and it spans multiple rows, this will be too small.
	 * @link https://github.com/WordPress/wordpress-develop/blob/fd5ba80c5c3d9cf62348567073945e246285fbca/src/wp-content/themes/twentyseventeen/assets/js/global.js#L50
	 *
	 * @return int Navigation outer height.
	 */
	protected static function get_twentyseventeen_navigation_outer_height() {
		return 72;
	}

	/**
	 * Add required styles for featured image header in Twenty Twenty.
	 *
	 * @param array $args Args.
	 */
	public static function add_twentytwenty_masthead_styles( $args = [] ) {
		if ( ! empty( $args[&#039;native_img_used&#039;] ) ) {
			return;
		}

		// @todo This was introduced in &lt;https://github.com/ampproject/amp-wp/commit/e1c7462&gt; but it doesn&#039;t seem to have any effect.
		add_action(
			&#039;wp_enqueue_scripts&#039;,
			static function() {
				ob_start();
				?&gt;
				&lt;style&gt;
				.featured-media amp-img {
					position: static;
				}
				&lt;/style&gt;
				&lt;?php
				$styles = str_replace( [ &#039;&lt;style&gt;&#039;, &#039;&lt;/style&gt;&#039; ], &#039;&#039;, ob_get_clean() );
				wp_add_inline_style( get_template() . &#039;-style&#039;, $styles );
			},
			11
		);
	}

	/**
	 * Fix display of Custom Logo in Twenty Twenty.
	 *
	 * This is required because width:auto on the site-logo amp-img does not preserve the proportional width in the same
	 * way as the same styles applied to an img.
	 *
	 * @since 1.5
	 * @link https://github.com/ampproject/amp-wp/issues/4418
	 * @link https://codepen.io/westonruter/pen/rNVqadv
	 *
	 * @param array $args Args.
	 */
	public static function add_twentytwenty_custom_logo_fix( $args = [] ) {
		if ( ! empty( $args[&#039;native_img_used&#039;] ) ) {
			return;
		}

		$method = __METHOD__;
		add_filter(
			&#039;get_custom_logo&#039;,
			static function( $html ) use ( $method ) {
				// Pattern sourced from AMP_Base_Embed_Handler::match_element_attributes().
				$pattern = sprintf(
					&#039;/&lt;img%s/&#039;,
					implode(
						&#039;&#039;,
						array_map(
							function ( $attr_name ) {
								return sprintf( &#039;(?=[^&gt;]*?%1$s=&quot;(?P&lt;%1$s&gt;\d+)&quot;)?&#039;, preg_quote( $attr_name, &#039;/&#039; ) );
							},
							[ &#039;width&#039;, &#039;height&#039; ]
						)
					)
				);

				preg_match( $pattern, $html, $matches );

				if ( isset( $matches[&#039;width&#039;], $matches[&#039;height&#039;] ) ) {
					$width  = (int) $matches[&#039;width&#039;];
					$height = (int) $matches[&#039;height&#039;];

					// If height is zero, bail.
					if ( 0 === $height || 0 === $width ) {
						return $html;
					}

					$desktop_height = 9; // in rem; see &lt;https://github.com/WordPress/wordpress-develop/blob/ad8d01a7e9e13144d1676b8e6d70c3e81ef703af/src/wp-content/themes/twentytwenty/style.css#L4887&gt;.
					$mobile_height  = 6; // in rem; see &lt;https://github.com/WordPress/wordpress-develop/blob/ad8d01a7e9e13144d1676b8e6d70c3e81ef703af/src/wp-content/themes/twentytwenty/style.css#L1424&gt;.

					$desktop_width = $desktop_height * ( $width / $height );
					$mobile_width  = $mobile_height * ( $width / $height );

					$html .= sprintf(
						&#039;&lt;style data-src=&quot;%s&quot;&gt;.site-logo amp-img { width: %frem; } @media (min-width: 700px) { .site-logo amp-img { width: %frem; } }&lt;/style&gt;&#039;,
						esc_attr( $method ),
						$mobile_width,
						$desktop_width
					);

				}
				return $html;
			},
			PHP_INT_MAX
		);
	}

	/**
	 * Add style rule with a selector of higher specificity than just `img` to make `amp-img` have `display:block` rather than `display:inline-block`.
	 *
	 * This is needed to override the AMP core stylesheet which has a more specific selector `.i-amphtml-layout-intrinsic` which
	 * is given a `display: inline-block`; this display value prevents margins from collapsing with surrounding block elements,
	 * resulting in larger margins in AMP than expected.
	 *
	 * @since 1.5
	 * @link https://github.com/ampproject/amp-wp/issues/4419
	 *
	 * @param array $args Args.
	 */
	public static function add_img_display_block_fix( $args = [] ) {
		if ( ! empty( $args[&#039;native_img_used&#039;] ) ) {
			return;
		}

		$method = __METHOD__;
		// Note that wp_add_inline_style() is not used because this stylesheet needs to be added _before_ style.css so
		// that any subsequent style rules for images will continue to override.
		add_action(
			&#039;wp_print_styles&#039;,
			static function() use ( $method ) {
				printf(
					&#039;&lt;style data-src=&quot;%s&quot;&gt;%s&lt;/style&gt;&#039;,
					esc_attr( $method ),
					// The selector is targeting an attribute that can never appear. It is purely present to increase specificity.
					&#039;amp-img:not([_]) { display: block }&#039;
				);
			}
		);
	}

	/**
	 * Add required styles for Twenty Seventeen header.
	 *
	 * This is required since JS is not applying the required styles at runtime.
	 *
	 * @since 1.0
	 */
	public static function add_twentyseventeen_masthead_styles() {
		add_action(
			&#039;wp_enqueue_scripts&#039;,
			static function() {
				$is_front_page_layout = ( is_front_page() &amp;&amp; &#039;posts&#039; !== get_option( &#039;show_on_front&#039; ) ) || ( is_home() &amp;&amp; is_front_page() );
				ob_start();
				?&gt;
				&lt;style&gt;
				.navigation-top.site-navigation-fixed {
					display: none;
				}

				/* This is needed by add_smooth_scrolling because it removes the [href] attribute. */
				.menu-scroll-down {
					cursor: pointer;
				}

				&lt;?php if ( $is_front_page_layout &amp;&amp; ! has_custom_header() ) : ?&gt;
					/* https://github.com/WordPress/wordpress-develop/blob/fd5ba80c5c3d9cf62348567073945e246285fbca/src/wp-content/themes/twentyseventeen/assets/js/global.js#L92-L94 */
					.site-branding {
						margin-bottom: &lt;?php echo (int) AMP_Core_Theme_Sanitizer::get_twentyseventeen_navigation_outer_height(); ?&gt;px;
					}
				&lt;?php endif; ?&gt;

				@media screen and (min-width: 48em) {
					/* Note that adjustHeaderHeight() is irrelevant with this change */
					&lt;?php if ( ! $is_front_page_layout ) : ?&gt;
						.navigation-top {
							position: static;
						}
					&lt;?php endif; ?&gt;

					/* Initial styles that amp-animations for navigationTopShow and navigationTopHide will override */
					.navigation-top.site-navigation-fixed {
						opacity: 0;
						transform: translateY( -&lt;?php echo (int) AMP_Core_Theme_Sanitizer::get_twentyseventeen_navigation_outer_height(); ?&gt;px );
						display: block;
					}
				}
				&lt;/style&gt;
				&lt;?php
				$styles = str_replace( [ &#039;&lt;style&gt;&#039;, &#039;&lt;/style&gt;&#039; ], &#039;&#039;, ob_get_clean() );
				wp_add_inline_style( get_template() . &#039;-style&#039;, $styles );
			},
			11
		);
	}

	/**
	 * Add sticky nav menu to Twenty Seventeen.
	 *
	 * This is implemented by cloning the navigation-top element, giving it a fixed position outside of the viewport,
	 * and then showing it at the top of the window as soon as the original nav begins to get scrolled out of view.
	 * In order to improve accessibility, the cloned nav gets aria-hidden=true and all of the links get tabindex=-1
	 * to prevent the keyboard from focusing on elements off the screen; it is not necessary to focus on the elements
	 * in the fixed nav menu because as soon as the original nav menu is focused then the window is scrolled to the
	 * top anyway.
	 *
	 * @since 1.0
	 */
	public function add_twentyseventeen_sticky_nav_menu() {
		/**
		 * Top navigation element.
		 *
		 * @var DOMElement|null $navigation_top
		 */
		$navigation_top = $this-&gt;dom-&gt;xpath-&gt;query( &#039;//header[ @id = &quot;masthead&quot; ]//div[ contains( @class, &quot;navigation-top&quot; ) ]&#039; )-&gt;item( 0 );
		if ( ! $navigation_top ) {
			return;
		}

		/**
		 * Cloned top navigation element to put in fixed position.
		 *
		 * @var DOMElement $navigation_top_fixed
		 */
		$navigation_top_fixed = $navigation_top-&gt;cloneNode( true );
		$navigation_top_fixed-&gt;setAttribute( &#039;class&#039;, $navigation_top_fixed-&gt;getAttribute( &#039;class&#039; ) . &#039; site-navigation-fixed&#039; );

		$navigation_top_fixed-&gt;setAttribute( &#039;aria-hidden&#039;, &#039;true&#039; );
		foreach ( $navigation_top_fixed-&gt;getElementsByTagName( &#039;a&#039; ) as $link ) {
			/**
			 * Navigation link to add a tab index to.
			 *
			 * @var DOMElement $link
			 */
			$link-&gt;setAttribute( Attribute::TABINDEX, &#039;-1&#039; );
		}

		$navigation_top-&gt;parentNode-&gt;insertBefore( $navigation_top_fixed, $navigation_top-&gt;nextSibling );
		foreach ( $this-&gt;dom-&gt;xpath-&gt;query( &#039;.//*[ @id ]&#039;, $navigation_top_fixed ) as $element ) {
			/**
			 * Navigation element in the fixed navigation bar.
			 *
			 * @var DOMElement $element
			 */
			$element-&gt;setAttribute( &#039;id&#039;, $element-&gt;getAttribute( &#039;id&#039; ) . &#039;-fixed&#039; );
		}

		$attributes = [
			&#039;layout&#039;              =&gt; &#039;nodisplay&#039;,
			&#039;intersection-ratios&#039; =&gt; 1,
			&#039;on&#039;                  =&gt; implode(
				&#039;;&#039;,
				[
					&#039;exit:navigationTopShow.start&#039;,
					&#039;enter:navigationTopHide.start&#039;,
				]
			),
		];
		if ( is_admin_bar_showing() ) {
			$attributes[&#039;viewport-margins&#039;] = &#039;32px 0&#039;;
		}
		$position_observer = AMP_DOM_Utils::create_node( $this-&gt;dom, &#039;amp-position-observer&#039;, $attributes );
		$navigation_top-&gt;appendChild( $position_observer );

		$animations = [
			&#039;navigationTopShow&#039; =&gt; [
				&#039;duration&#039;   =&gt; 0,
				&#039;fill&#039;       =&gt; &#039;both&#039;,
				&#039;animations&#039; =&gt; [
					&#039;selector&#039;  =&gt; &#039;.navigation-top.site-navigation-fixed&#039;,
					&#039;media&#039;     =&gt; &#039;(min-width: 48em)&#039;,
					&#039;keyframes&#039; =&gt; [
						&#039;opacity&#039;   =&gt; 1.0,
						&#039;transform&#039; =&gt; &#039;translateY( 0 )&#039;,
					],
				],
			],
			&#039;navigationTopHide&#039; =&gt; [
				&#039;duration&#039;   =&gt; 0,
				&#039;fill&#039;       =&gt; &#039;both&#039;,
				&#039;animations&#039; =&gt; [
					&#039;selector&#039;  =&gt; &#039;.navigation-top.site-navigation-fixed&#039;,
					&#039;media&#039;     =&gt; &#039;(min-width: 48em)&#039;,
					&#039;keyframes&#039; =&gt; [
						&#039;opacity&#039;   =&gt; 0.0,
						&#039;transform&#039; =&gt; sprintf( &#039;translateY( -%dpx )&#039;, self::get_twentyseventeen_navigation_outer_height() ),
					],
				],
			],
		];

		foreach ( $animations as $animation_id =&gt; $animation ) {
			$amp_animation   = AMP_DOM_Utils::create_node(
				$this-&gt;dom,
				&#039;amp-animation&#039;,
				[
					&#039;id&#039;     =&gt; $animation_id,
					&#039;layout&#039; =&gt; &#039;nodisplay&#039;,
				]
			);
			$position_script = $this-&gt;dom-&gt;createElement( &#039;script&#039; );
			$position_script-&gt;setAttribute( &#039;type&#039;, &#039;application/json&#039; );
			$position_script-&gt;appendChild( $this-&gt;dom-&gt;createTextNode( wp_json_encode( $animation ) ) );
			$amp_animation-&gt;appendChild( $position_script );
			$this-&gt;dom-&gt;body-&gt;appendChild( $amp_animation );
		}
	}

	/**
	 * Add styles for the nav menu specifically to deal with AMP running in a no-js context.
	 *
	 * @since 1.0
	 *
	 * @param array $args Args.
	 */
	public static function add_nav_menu_styles( $args = [] ) {
		add_action(
			&#039;wp_enqueue_scripts&#039;,
			static function() use ( $args ) {
				ob_start();
				?&gt;
				&lt;style&gt;
				&lt;?php if ( ! empty( $args[&#039;no_js_submenu_visible&#039;] ) ) : ?&gt;
					/* Override no-js selector in parent theme. */
					&lt;?php
					$selector = is_string( $args[&#039;no_js_submenu_visible&#039;] ) ? $args[&#039;no_js_submenu_visible&#039;] : &#039;.no-js .main-navigation ul ul&#039;;
					?&gt;
					&lt;?php echo esc_html( $selector ); ?&gt; {
						display: none;
					}
				&lt;?php endif; ?&gt;

				&lt;?php if ( ! empty( $args[&#039;sub_menu_button_toggle_class&#039;] ) ) : ?&gt;
					/* Use sibling selector and re-use class on button instead of toggling toggle-on class on ul.sub-menu */
					.main-navigation ul .&lt;?php echo esc_html( $args[&#039;sub_menu_button_toggle_class&#039;] ); ?&gt; + .sub-menu {
						display: block;
					}
				&lt;?php endif; ?&gt;

				&lt;?php if ( &#039;twentytwenty&#039; === get_template() ) : ?&gt;
					.cover-modal {
						display: inherit;
					}

					.menu-modal-inner {
						height: 100%;
					}

					.admin-bar .cover-modal {
						/* Use padding to shift down modal because amp-lightbox has top:0 !important. */
						padding-top: 32px;
					}

					@media (max-width: 782px) {
						.admin-bar .cover-modal {
							/* Use padding to shift down modal because amp-lightbox has top:0 !important. */
							padding-top: 46px;
						}
					}

					@media (max-width: 999px) {
						amp-lightbox.cover-modal.show-modal {
							display: unset;
						}
					}

				&lt;?php elseif ( &#039;twentynineteen&#039; === get_template() ) : ?&gt;
					.amp-twentynineteen-main-navigation {
						max-width: 100vw;
						width: 100vw;
						height: 100vh;
					}
					.admin-bar .amp-twentynineteen-main-navigation {
						top: 46px;
						height: calc(100vh - 46px);
					}

					.amp-twentynineteen-main-navigation .sub-menu &gt; li &gt; a:hover,
					.amp-twentynineteen-main-navigation .sub-menu &gt; li &gt; a:focus,
					.amp-twentynineteen-main-navigation .sub-menu &gt; li &gt; .menu-item-link-return:hover,
					.amp-twentynineteen-main-navigation .sub-menu &gt; li &gt; .menu-item-link-return:focus {
						background: inherit;
					}

					.amp-twentynineteen-main-navigation .sub-menu &gt; li {
						position: static;
						display: flex;
					}

					.amp-twentynineteen-main-navigation .sub-menu &gt; li.menu-item-has-children .submenu-expand {
						position: static;
					}

					.amp-twentynineteen-main-navigation .sub-menu.expanded-true {
						display: table;
						margin-top: 0;
						opacity: 1;
						padding-left: 0;
						left: 0;
						top: 0;
						right: 0;
						bottom: 0;
						position: static;
						z-index: 100000; /* Make sure appears above mobile admin bar */
						width: 100vw;
						height: 100%;
						max-width: 100vw;
					}

					.amp-twentynineteen-main-navigation .sub-menu &gt; li.mobile-parent-nav-menu-item {
						display: block;
					}

					.amp-twentynineteen-main-navigation .submenu-expand .svg-icon {
						&lt;?php if ( is_rtl() ) : ?&gt;
							transform: rotate(90deg);
						&lt;?php else : ?&gt;
							transform: rotate(270deg);
						&lt;?php endif; ?&gt;
					}

					.amp-twentynineteen-main-navigation .sub-menu &gt; li &gt; a,
					.amp-twentynineteen-main-navigation .sub-menu &gt; li &gt; .menu-item-link-return {
						flex-grow: 1;
						max-width: none;
					}

					.amp-twentynineteen-main-navigation .sub-menu &gt; li &gt; .menu-item-link-return .svg-icon {
						&lt;?php if ( is_rtl() ) : ?&gt;
							transform: rotate(180deg);
						&lt;?php endif; ?&gt;
					}

					.main-navigation .main-menu &gt; li.menu-item-has-children &gt; .submenu-expand.display-on-mobile,
					.display-on-mobile {
						display: none;
					}

					@media only screen and (max-width: 768px) {
						.display-on-mobile {
							display: block;
						}

						.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within &gt; .sub-menu,
						.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):hover &gt; .sub-menu,
						.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus &gt; .sub-menu,
						.main-navigation .main-menu &gt; li.menu-item-has-children .submenu-expand.display-on-desktop,
						.display-on-desktop {
							display: none;
						}

						.main-navigation .main-menu &gt; li.menu-item-has-children &gt; .submenu-expand.display-on-mobile svg {
							position: relative;
							top: -2px;
							&lt;?php if ( is_rtl() ) : ?&gt;
								right: -2px;
							&lt;?php else : ?&gt;
								left: -2px;
							&lt;?php endif; ?&gt;
						}

						.main-navigation .main-menu &gt; li.menu-item-has-children &gt; .submenu-expand.display-on-mobile {
							display: inline-block;
							&lt;?php if ( is_rtl() ) : ?&gt;
								margin-left: 0.5rem;
								margin-right: 0.25rem;
							&lt;?php else : ?&gt;
								margin-left: 0.25rem;
								margin-right: 0.5rem;
							&lt;?php endif; ?&gt;
							background: #0073aa;
							color: #FFF;
							border-radius: 50%;
							width: 20px;
							height: 20px;
							vertical-align: middle;
						}
					}
				&lt;?php elseif ( &#039;twentyseventeen&#039; === get_template() ) : ?&gt;
					/* Show the button*/
					.no-js .menu-toggle {
						display: block;
					}
					.no-js .main-navigation &gt; div &gt; ul {
						display: none;
					}
					.no-js .main-navigation.toggled-on &gt; div &gt; ul {
						display: block;
					}
					@media screen and (min-width: 48em) {
						.no-js .menu-toggle,
						.no-js .dropdown-toggle {
							display: none;
						}
						.no-js .main-navigation ul,
						.no-js .main-navigation ul ul,
						.no-js .main-navigation &gt; div &gt; ul {
							display: block;
						}
					}
				&lt;?php elseif ( &#039;twentysixteen&#039; === get_template() ) : ?&gt;
					@media screen and (max-width: 56.875em) {
						/* Show the button*/
						.no-js .menu-toggle {
							display: block;
						}
						.no-js .site-header-menu {
							display: none;
						}
						.no-js .site-header-menu.toggled-on {
							display: block;
						}
					}
					@media screen and (min-width: 56.875em) {
						.no-js .main-navigation ul ul {
							display: block;
						}
					}
				&lt;?php elseif ( &#039;twentyfifteen&#039; === get_template() ) : ?&gt;
					@media screen and (min-width: 59.6875em) {
						/* Attempt to emulate https://github.com/WordPress/wordpress-develop/blob/5e9a39baa7d4368f7d3c36dcbcd53db6317677c9/src/wp-content/themes/twentyfifteen/js/functions.js#L108-L149 */
						#sidebar {
							position: sticky;
							top: -9vh;
							max-height: 109vh;
							overflow-y: auto;
						}
					}

				&lt;?php elseif ( &#039;twentythirteen&#039; === get_template() ) : ?&gt;
					@media (min-width: 644px) {
						.dropdown-toggle {
							display: none;
						}
					}
					@media (max-width: 643px) {
						.nav-menu .toggle-on + .sub-menu {
							clip: inherit;
							overflow: inherit;
							height: inherit;
							width: inherit;
						}
						/* Override :hover selector rules in theme which would cause submenu to persist open. */
						ul.nav-menu li:hover button:not( .toggle-on ) +  ul,
						.nav-menu ul li:hover button:not( .toggle-on ) +  ul {
							height: 1px;
							width: 1px;
							overflow: hidden;
							clip: rect(1px, 1px, 1px, 1px);
						}
						.menu-item-has-children {
							position: relative;
						}
						.dropdown-toggle {
							-moz-osx-font-smoothing: grayscale;
							-webkit-font-smoothing: antialiased;
							display: inline-block;
							font-size: 16px;
							font-style: normal;
							font-weight: normal;
							font-variant: normal;
							line-height: 1;
							text-align: center;
							text-decoration: inherit;
							text-transform: none;
							vertical-align: top;
							border: 0;
							box-sizing: content-box;
							content: &quot;&quot;;
							height: 42px;
							padding: 0;
							background: transparent;
							width: 42px;
							position: absolute;
							top: 3px;
							&lt;?php if ( is_rtl() ) : ?&gt;
								left: 0;
							&lt;?php else : ?&gt;
								right: 0;
							&lt;?php endif; ?&gt;
						}
						.dropdown-toggle:active,
						.dropdown-toggle:focus,
						.dropdown-toggle:hover {
							padding: 0;
							border: 0;
							background: transparent;
						}
						.dropdown-toggle:after {
							color: #333;
							speak: none;
							font-family: &quot;Genericons&quot;;
							content: &quot;\f431&quot;;
							font-size: 24px;
							line-height: 42px;
							position: relative;
							top: 0;
							width: 42px;
							&lt;?php if ( is_rtl() ) : ?&gt;
								left: 1px;
							&lt;?php else : ?&gt;
								right: 1px;
							&lt;?php endif; ?&gt;
						}
						.dropdown-toggle.toggle-on:after {
							content: &quot;\f432&quot;;
						}
						.dropdown-toggle:hover,
						.dropdown-toggle:focus {
							background-color: rgba(51, 51, 51, 0.1);

						.dropdown-toggle:focus {
							outline: 1px solid rgba(51, 51, 51, 0.3);
						}
					}
				&lt;?php endif; ?&gt;
				&lt;/style&gt;
				&lt;?php
				$styles = str_replace( [ &#039;&lt;style&gt;&#039;, &#039;&lt;/style&gt;&#039; ], &#039;&#039;, ob_get_clean() );
				wp_add_inline_style( get_template() . &#039;-style&#039;, $styles );
			},
			11
		);
	}

	/**
	 * Adjust images in twentynineteen.
	 *
	 * @since 1.1
	 */
	public static function adjust_twentynineteen_images() {

		// Make sure the featured image gets responsive layout.
		add_filter(
			&#039;wp_get_attachment_image_attributes&#039;,
			static function( $attributes ) {
				if ( preg_match( &#039;/(^|\s)(attachment-post-thumbnail)(\s|$)/&#039;, $attributes[&#039;class&#039;] ) ) {
					$attributes[&#039;data-amp-layout&#039;] = &#039;responsive&#039;;
				}
				return $attributes;
			}
		);
	}

	/**
	 * Add styles for Twenty Fourteen masthead.
	 *
	 * @since 1.1
	 */
	public static function add_twentyfourteen_masthead_styles() {
		add_action(
			&#039;wp_enqueue_scripts&#039;,
			static function() {
				ob_start();
				?&gt;
				&lt;style&gt;
					/* Styles for featured content */
					.grid #featured-content .post-thumbnail,
					.slider #featured-content .post-thumbnail {
						padding-top: 0; /* Override responsive hack which is handled by AMP layout. */
						overflow: visible;
					}
					.featured-content .post-thumbnail .wp-post-image {
						position: static;
						left: auto;
						top: auto;
					}
					.slider #featured-content .hentry {
						display: block;
					}

					/*
					 * The following are needed because clicking on the :before pseudo element does not trigger a tap event.
					 * So instead of positioning the screen reader text off screen, we just position it to cover cover the
					 * toggle button entirely, with a zero opacity.
					 */
					.search-toggle {
						position: relative;
					}
					.search-toggle &gt; a.screen-reader-text {
						left: 0;
						top: 0;
						right: 0;
						bottom: 0;
						width: auto;
						height: auto;
						clip: unset;
						opacity: 0;
					}

					&lt;?php if ( &#039;slider&#039; === get_theme_mod( &#039;featured_content_layout&#039; ) ) : ?&gt;

						/*
						 * Styles for slider carousel.
						 */
						.featured-content-inner &gt; amp-carousel {
							position: relative;
						}
						body.slider amp-carousel &gt; .amp-carousel-button {
							-webkit-font-smoothing: antialiased;
							background-color: black;
							background-image: none;
							border-radius: 0;
							border-color: #fff;
							border-style: solid;
							border-width: 2px 1px 0 0;
							box-sizing: border-box;
							cursor: pointer;
							display: inline-block;
							font: normal 16px/1 Genericons;
							height: 48px;
							left: auto;
							opacity: 1;
							text-align: center;
							text-decoration: inherit;
							top: auto;
							width: 50%;
							transform: none;
						}
						body.slider amp-carousel &gt; .amp-carousel-button:focus {
							outline: white thin dotted;
						}
						body.slider amp-carousel &gt; .amp-carousel-button:hover {
							background-color: #24890d;
							outline: none;
						}
						body.slider amp-carousel &gt; .amp-carousel-button-prev:before {
							color: #fff;
							content: &quot;\f430&quot;;
							font-size: 32px;
							line-height: 46px;
						}
						body.slider amp-carousel &gt; .amp-carousel-button-next:before {
							color: #fff;
							content: &quot;\f429&quot;;
							font-size: 32px;
							line-height: 46px;
						}
						.featured-content .post-thumbnail .wp-post-image {
							object-fit: cover;
							object-position: top;
						}

						@media screen and (max-width: 672px) {
							.slider-control-paging {
								float: none;
								margin: 0;
							}
							.featured-content .post-thumbnail .wp-post-image {
								height: 55.49132947vw;
							}
							.slider-control-paging li {
								display: inline-block;
								float: none;
							}
						}
						@media screen and (min-width: 673px) {
							body.slider amp-carousel &gt; .amp-carousel-button {
								width: 48px;
								border: 0;
								bottom: 0;
							}
							body.slider amp-carousel &gt; .amp-carousel-button-prev {
								right: 50px;
							}
							body.slider amp-carousel &gt; .amp-carousel-button-next {
								right: 0;
							}
						}

					&lt;?php endif; ?&gt;
				&lt;/style&gt;
				&lt;?php
				$css = str_replace( [ &#039;&lt;style&gt;&#039;, &#039;&lt;/style&gt;&#039; ], &#039;&#039;, ob_get_clean() );

				wp_add_inline_style( &#039;twentyfourteen-style&#039;, $css );
			},
			11
		);
	}

	/**
	 * Add amp-carousel for slider in Twenty Fourteen.
	 *
	 * @since 1.1
	 */
	public function add_twentyfourteen_slider_carousel() {
		if ( &#039;slider&#039; !== get_theme_mod( &#039;featured_content_layout&#039; ) ) {
			return;
		}

		$featured_content = $this-&gt;dom-&gt;getElementById( &#039;featured-content&#039; );
		if ( ! $featured_content ) {
			return;
		}

		$featured_content_inner = $this-&gt;dom-&gt;xpath-&gt;query( &#039;./div[ @class = &quot;featured-content-inner&quot; ]&#039;, $featured_content )-&gt;item( 0 );
		if ( ! $featured_content_inner ) {
			return;
		}

		$selected_slide_default  = 0;
		$selected_slide_state_id = &#039;twentyFourteenSelectedSlide&#039;;

		// Create the slider state.
		$amp_state = $this-&gt;dom-&gt;createElement( &#039;amp-state&#039; );
		$amp_state-&gt;setAttribute( &#039;id&#039;, $selected_slide_state_id );
		$script = $this-&gt;dom-&gt;createElement( &#039;script&#039; );
		$script-&gt;setAttribute( &#039;type&#039;, &#039;application/json&#039; );
		$script-&gt;appendChild( $this-&gt;dom-&gt;createTextNode( wp_json_encode( $selected_slide_default ) ) );
		$amp_state-&gt;appendChild( $script );
		$featured_content-&gt;appendChild( $amp_state );

		// Create the carousel slider.
		$amp_carousel_desktop_id = &#039;twentyFourteenSliderDesktop&#039;;
		$amp_carousel_mobile_id  = &#039;twentyFourteenSliderMobile&#039;;
		$amp_carousel_attributes = [
			&#039;layout&#039;                             =&gt; &#039;responsive&#039;,
			&#039;on&#039;                                 =&gt; &quot;slideChange:AMP.setState( { $selected_slide_state_id: event.index } )&quot;,
			&#039;width&#039;                              =&gt; &#039;100&#039;,
			&#039;type&#039;                               =&gt; &#039;slides&#039;,
			&#039;loop&#039;                               =&gt; &#039;&#039;,
			Amp::BIND_DATA_ATTR_PREFIX . &#039;slide&#039; =&gt; $selected_slide_state_id,
		];
		$amp_carousel_desktop    = AMP_DOM_Utils::create_node(
			$this-&gt;dom,
			&#039;amp-carousel&#039;,
			array_merge(
				$amp_carousel_attributes,
				[
					&#039;id&#039;     =&gt; $amp_carousel_desktop_id,
					&#039;media&#039;  =&gt; &#039;(min-width: 672px)&#039;,
					&#039;height&#039; =&gt; &#039;55.49132947&#039;, // Value comes from &lt;https://github.com/WordPress/wordpress-develop/blob/fc2a8f0e11316d066a686995b8578d82cd5546cf/src/wp-content/themes/twentyfourteen/style.css#L3024&gt;.
				]
			)
		);
		$amp_carousel_mobile     = AMP_DOM_Utils::create_node(
			$this-&gt;dom,
			&#039;amp-carousel&#039;,
			array_merge(
				$amp_carousel_attributes,
				[
					&#039;id&#039;     =&gt; $amp_carousel_mobile_id,
					&#039;media&#039;  =&gt; &#039;(max-width: 672px)&#039;,
					&#039;height&#039; =&gt; &#039;73&#039;,
				]
			)
		);

		while ( $featured_content_inner-&gt;firstChild ) {
			$node = $featured_content_inner-&gt;removeChild( $featured_content_inner-&gt;firstChild );
			$amp_carousel_desktop-&gt;appendChild( $node );
			$amp_carousel_mobile-&gt;appendChild( $node-&gt;cloneNode( true ) );
		}
		$featured_content_inner-&gt;appendChild( $amp_carousel_desktop );
		$featured_content_inner-&gt;appendChild( $amp_carousel_mobile );

		// Create the selector.
		$amp_selector = $this-&gt;dom-&gt;createElement( &#039;amp-selector&#039; );
		$amp_selector-&gt;setAttribute( &#039;layout&#039;, &#039;container&#039; );
		$slider_control_nav = $this-&gt;dom-&gt;createElement( &#039;ol&#039; );
		$slider_control_nav-&gt;setAttribute( &#039;class&#039;, &#039;slider-control-nav slider-control-paging&#039; );
		$count = $amp_carousel_desktop-&gt;getElementsByTagName( &#039;article&#039; )-&gt;length;
		for ( $i = 0; $i &lt; $count; $i++ ) {
			$li = $this-&gt;dom-&gt;createElement( &#039;li&#039; );
			$a  = $this-&gt;dom-&gt;createElement( &#039;a&#039; );
			if ( $selected_slide_default === $i ) {
				$li-&gt;setAttribute( &#039;selected&#039;, &#039;&#039; );
				$a-&gt;setAttribute( &#039;class&#039;, &#039;slider-active&#039; );
			}
			$a-&gt;setAttribute( Amp::BIND_DATA_ATTR_PREFIX . &#039;class&#039;, &quot;$selected_slide_state_id == $i ? &#039;slider-active&#039; : &#039;&#039;&quot; );
			$a-&gt;setAttribute( Attribute::ROLE, Role::BUTTON );
			$a-&gt;setAttribute( Attribute::ON, &quot;tap:AMP.setState( { $selected_slide_state_id: $i } )&quot; );
			$li-&gt;setAttribute( &#039;option&#039;, (string) $i );
			$a-&gt;appendChild( $this-&gt;dom-&gt;createTextNode( $i + 1 ) );
			$li-&gt;appendChild( $a );
			$slider_control_nav-&gt;appendChild( $li );
		}
		$amp_selector-&gt;appendChild( $slider_control_nav );
		$featured_content-&gt;appendChild( $amp_selector );
	}

	/**
	 * Use AMP-based solutions for toggling search bar in Twenty Fourteen.
	 *
	 * @link https://github.com/WordPress/wordpress-develop/blob/fc2a8f0e11316d066a686995b8578d82cd5546cf/src/wp-content/themes/twentyfourteen/js/functions.js#L69-L87
	 */
	public function add_twentyfourteen_search() {
		$search_toggle_div  = $this-&gt;dom-&gt;xpath-&gt;query( &#039;//div[ contains( @class, &quot;search-toggle&quot; ) ]&#039; )-&gt;item( 0 );
		$search_toggle_link = $this-&gt;dom-&gt;xpath-&gt;query( &#039;./a&#039;, $search_toggle_div )-&gt;item( 0 );
		$search_container   = $this-&gt;dom-&gt;getElementById( &#039;search-container&#039; );
		if (
			! $search_toggle_div instanceof DOMElement
			|| ! $search_toggle_link instanceof DOMElement
			|| ! $search_container instanceof DOMElement
		) {
			return;
		}

		// Create the &lt;amp-state&gt; element that contains whether the search bar is shown.
		$amp_state       = $this-&gt;dom-&gt;createElement( &#039;amp-state&#039; );
		$hidden_state_id = &#039;twentyfourteenSearchHidden&#039;;
		$hidden          = true;
		$amp_state-&gt;setAttribute( &#039;id&#039;, $hidden_state_id );
		$script = $this-&gt;dom-&gt;createElement( &#039;script&#039; );
		$script-&gt;setAttribute( &#039;type&#039;, &#039;application/json&#039; );
		$script-&gt;appendChild( $this-&gt;dom-&gt;createTextNode( wp_json_encode( $hidden ) ) );
		$amp_state-&gt;appendChild( $script );
		$search_container-&gt;appendChild( $amp_state );

		// Update AMP state to show the search bar and focus on search input when tapping on the search button.
		$search_input_id = &#039;twentyfourteen_search_input&#039;;
		$search_input_el = $this-&gt;dom-&gt;xpath-&gt;query( &#039;.//input[ @name = &quot;s&quot; ]&#039;, $search_container )-&gt;item( 0 );
		$search_toggle_link-&gt;removeAttribute( &#039;href&#039; );
		$on = &quot;tap:AMP.setState( { $hidden_state_id: ! $hidden_state_id } )&quot;;
		if ( $search_input_el instanceof DOMElement ) {
			$search_input_el-&gt;setAttribute( &#039;id&#039;, $search_input_id );
			$on .= &quot;,$search_input_id.focus()&quot;;
		}
		$search_toggle_link-&gt;setAttribute( Attribute::ON, $on );
		$search_toggle_link-&gt;setAttribute( Attribute::TABINDEX, &#039;0&#039; );
		$search_toggle_link-&gt;setAttribute( Attribute::ROLE, Role::BUTTON );

		// Set visibility and aria-expanded based of the link based on whether the search bar is expanded.
		$search_toggle_link-&gt;setAttribute( &#039;aria-expanded&#039;, wp_json_encode( $hidden ) );
		$search_toggle_link-&gt;setAttribute( Amp::BIND_DATA_ATTR_PREFIX . &#039;aria-expanded&#039;, &quot;$hidden_state_id ? &#039;false&#039; : &#039;true&#039;&quot; );
		$search_toggle_div-&gt;setAttribute( Amp::BIND_DATA_ATTR_PREFIX . &#039;class&#039;, &quot;$hidden_state_id ? &#039;search-toggle&#039; : &#039;search-toggle active&#039;&quot; );
		$search_container-&gt;setAttribute( Amp::BIND_DATA_ATTR_PREFIX . &#039;class&#039;, &quot;$hidden_state_id ? &#039;search-box-wrapper hide&#039; : &#039;search-box-wrapper&#039;&quot; );
	}

	/**
	 * Wrap a modal node tree in an &lt;amp-lightbox&gt; element.
	 *
	 * @param array $args {
	 *     Associative array of arguments.
	 *
	 *     @type string   $modal_id            ID to use for the modal and its associated buttons.
	 *     @type string   $modal_content_xpath XPath to query the contents of the modal.
	 *     @type string[] $open_button_xpath   Array of XPaths to query the buttons that open the modal.
	 *     @type string[] $close_button_xpath  Array of XPaths to query the buttons that close the modal. These should be contained within the modal.
	 *     @type string   $animate_in          Optional. What animation to use for showing the modal. Valid options are: &#039;fade-in&#039;, &#039;fly-in-bottom&#039;, &#039;fly-in-top&#039;. Defaults to &#039;fade-in&#039;.
	 *     @type bool     $scrollable          Optional. Whether the inner content of the modal should be scrollable. Defaults to true.
	 * }
	 */
	public function wrap_modal_in_lightbox( $args = [] ) {
		if ( ! isset( $args[&#039;modal_id&#039;], $args[&#039;modal_content_xpath&#039;], $args[&#039;open_button_xpath&#039;], $args[&#039;close_button_xpath&#039;] ) ) {
			return;
		}

		$modal_id           = $args[&#039;modal_id&#039;];
		$modal_content_node = $this-&gt;dom-&gt;xpath-&gt;query( $args[&#039;modal_content_xpath&#039;] )-&gt;item( 0 );

		if ( ! is_string( $modal_id ) || ! $modal_content_node instanceof DOMElement ) {
			return;
		}

		$body_id = $this-&gt;dom-&gt;getElementId( $this-&gt;dom-&gt;body, &#039;body&#039; );

		$open_xpaths  = $args[&#039;open_button_xpath&#039;];
		$close_xpaths = $args[&#039;close_button_xpath&#039;];

		$modal_actions = [
			&quot;{$modal_id}.open&quot;  =&gt; $open_xpaths,
			// Although we add the &#039;show-modal&#039; class here, we don&#039;t remove it again, as it will
			// _first_ remove the correct positioning and only _then_ start the fade-out animation.
			// See: https://youtu.be/aooq-liRtMs .
			&quot;{$modal_id}.toggleClass(class=show-modal,force=true)&quot; =&gt; $open_xpaths,
			&quot;{$body_id}.toggleClass(class=showing-modal,force=true)&quot; =&gt; $open_xpaths,
			&quot;{$modal_id}.close&quot; =&gt; $close_xpaths,
			&quot;{$body_id}.toggleClass(class=showing-modal,force=false)&quot; =&gt; $close_xpaths,
		];

		// As we have the toggle targets, we need to go backwards from their and find all
		// nodes that are meant to toggle these targets.
		// The triple loop below is generally a double loop (modals x toggles), however
		// we need the third loop as we cannot guarantee that each xpath will only ever
		// retrieve a single result.
		foreach ( $modal_actions as $modal_action =&gt; $toggle_xpaths ) {
			foreach ( $toggle_xpaths as $toggle_xpath ) {
				foreach ( $this-&gt;dom-&gt;xpath-&gt;query( $toggle_xpath ) as $toggle_node ) {
					if ( $toggle_node instanceof DOMElement ) {
						AMP_DOM_Utils::add_amp_action( $toggle_node, &#039;tap&#039;, $modal_action );
					}
				}
			}
		}

		// Make sure lightboxes are marked as inactive and not expanded when they are closed via the Escape key.
		$state_string = str_replace( &#039;-&#039;, &#039;_&#039;, $modal_id );
		AMP_DOM_Utils::add_amp_action( $modal_content_node, &#039;lightboxOpen&#039;, &quot;{$modal_id}.toggleClass(class=active,force=true)&quot; );
		AMP_DOM_Utils::add_amp_action( $modal_content_node, &#039;lightboxOpen&#039;, &quot;AMP.setState({{$state_string}:true})&quot; );
		AMP_DOM_Utils::add_amp_action( $modal_content_node, &#039;lightboxClose&#039;, &quot;{$modal_id}.toggleClass(class=active,force=false)&quot; );
		AMP_DOM_Utils::add_amp_action( $modal_content_node, &#039;lightboxClose&#039;, &quot;AMP.setState({{$state_string}:false})&quot; );

		// Create an &lt;amp-lightbox&gt; element that will contain the modal.
		$amp_lightbox = $this-&gt;dom-&gt;createElement( &#039;amp-lightbox&#039; );
		$amp_lightbox-&gt;setAttribute( &#039;id&#039;, $modal_id );
		$amp_lightbox-&gt;setAttribute( &#039;layout&#039;, &#039;nodisplay&#039; );
		$amp_lightbox-&gt;setAttribute( &#039;animate-in&#039;, isset( $args[&#039;animate_in&#039;] ) ? $args[&#039;animate_in&#039;] : &#039;fade-in&#039; );
		$amp_lightbox-&gt;setAttribute( &#039;scrollable&#039;, isset( $args[&#039;scrollable&#039;] ) ? $args[&#039;scrollable&#039;] : true );

		$amp_lightbox_inner_content = $this-&gt;dom-&gt;xpath-&gt;query( &quot;.//*[ @class and contains( concat( &#039; &#039;, normalize-space( @class ), &#039; &#039; ), &#039; modal-inner &#039; ) ]&quot;, $modal_content_node )-&gt;item( 0 );
		foreach ( [ $amp_lightbox, $amp_lightbox_inner_content ] as $event_element ) {
			/**
			 * Event element to add accessibility attributes to.
			 *
			 * @var DOMElement $event_element
			 */
			$event_element-&gt;setAttribute( Attribute::ROLE, $this-&gt;guess_modal_role( $modal_content_node ) );
			// Setting tabindex to -1 (not reachable) as keyboard focus is handled through toggles.
			$event_element-&gt;setAttribute( Attribute::TABINDEX, -1 );
		}

		$parent_node = $modal_content_node-&gt;parentNode;
		$parent_node-&gt;replaceChild( $amp_lightbox, $modal_content_node );

		$strip_wrapper_levels = isset( $args[&#039;strip_wrapper_levels&#039;] ) ? $args[&#039;strip_wrapper_levels&#039;] : 0;

		while ( $strip_wrapper_levels &gt; 0 ) {
			$children = [];
			foreach ( $modal_content_node-&gt;childNodes as $child_node ) {
				if ( $child_node instanceof DOMElement ) {
					$children[] = $child_node;
				}
			}

			if ( count( $children ) &gt; 1 ) {
				break;
			}

			// Add class(es) and action(s) of removed wrapper to lightbox to avoid breaking CSS selectors.
			AMP_DOM_Utils::copy_attributes( [ &#039;class&#039;, &#039;on&#039;, &#039;data-toggle-target&#039; ], $modal_content_node, $amp_lightbox );

			$modal_content_node = $modal_content_node-&gt;removeChild( $children[0] );

			$strip_wrapper_levels--;
		}

		$amp_lightbox-&gt;appendChild( $modal_content_node );
	}

	/**
	 * Add generic modal interactivity compat for the Twenty Twenty theme.
	 *
	 * Modals implemented in JS will be transformed into &lt;amp-lightbox&gt; equivalents,
	 * with the tap actions being attached to their associated toggles.
	 */
	public function add_twentytwenty_modals() {
		$modals = $this-&gt;dom-&gt;xpath-&gt;query( &quot;//*[ @class and contains( concat( &#039; &#039;, normalize-space( @class ), &#039; &#039; ), &#039; cover-modal &#039; ) ]&quot; );

		if ( false === $modals || 0 === $modals-&gt;length ) {
			return;
		}

		foreach ( $modals as $modal ) {
			/**
			 * Modal element to transform.
			 *
			 * @var DOMElement $modal
			 */

			if ( ! $modal-&gt;hasAttribute( &#039;data-modal-target-string&#039; ) ) {
				return;
			}

			$modal_target = $modal-&gt;getAttribute( &#039;data-modal-target-string&#039; );
			$toggles      = $this-&gt;dom-&gt;xpath-&gt;query( &quot;//*[ @data-toggle-target = &#039;{$modal_target}&#039; ]&quot; );

			$open_button_xpaths  = [];
			$close_button_xpaths = [];
			foreach ( $toggles as $toggle ) {
				/**
				 * Toggle element to transform.
				 *
				 * @var DOMElement $toggle
				 */

				$within_modal = false;
				$parent       = $toggle-&gt;parentNode;
				while ( $parent ) {
					if ( $parent === $modal ) {
						$within_modal = true;
						break;
					}
					$parent = $parent-&gt;parentNode;
				}

				if ( $within_modal ) {
					$close_button_xpaths[] = $toggle-&gt;getNodePath();
				} else {
					$open_button_xpaths[] = $toggle-&gt;getNodePath();
				}
			}

			$modal_id = $this-&gt;dom-&gt;getElementId( $modal );

			// Add the lightbox itself as a close button xpath as well.
			// With twentytwenty compat, the lightbox fills the entire screen, and only an inner wrapper will contain
			// the actionable elements in the modal. Therefore, the lightbox represents the &quot;background&quot;.
			$close_button_xpaths[] = &quot;//*[ @id = &#039;{$modal_id}&#039; ]&quot;;

			// Ensure anchor links also close the modal the same as the the Close Menu button.
			$close_button_xpaths[] = sprintf( &quot;//*[ @id = &#039;{$modal_id}&#039; ]//a[ @href and contains( @href, &#039;#&#039; ) ]&quot; );

			// Then, add the inner element of the lightbox as an open button xpath.
			// This is done to prevent the above close action from closing the modal when an inner element is clicked.
			// Workaround found here: https://stackoverflow.com/a/45971501 .
			$open_button_xpaths[] = &quot;//*[ @id = &#039;{$modal_id}&#039; ]//*[ @class and contains( concat( &#039; &#039;, normalize-space( @class ), &#039; &#039; ), &#039; modal-inner &#039; ) ]&quot;;

			$this-&gt;wrap_modal_in_lightbox(
				[
					&#039;modal_id&#039;             =&gt; $modal_id,
					&#039;modal_content_xpath&#039;  =&gt; $modal-&gt;getNodePath(),
					&#039;open_button_xpath&#039;    =&gt; $open_button_xpaths,
					&#039;close_button_xpath&#039;   =&gt; $close_button_xpaths,
					&#039;strip_wrapper_levels&#039; =&gt; 1,
				]
			);
		}
	}

	/**
	 * Add generic toggle interactivity compat for the Twentytwenty theme.
	 *
	 * Toggles implemented in JS will be transformed into &lt;amp-bind&gt; equivalents,
	 * with &lt;amp-state&gt; components storing the CSS classes to set.
	 */
	public function add_twentytwenty_toggles() {
		$toggles = $this-&gt;dom-&gt;xpath-&gt;query( &#039;//*[ @data-toggle-target ]&#039; );
		$body_id = $this-&gt;dom-&gt;getElementId( $this-&gt;dom-&gt;body, &#039;body&#039; );

		if ( false === $toggles || 0 === $toggles-&gt;length ) {
			return;
		}

		/**
		 * Toggle to transform.
		 *
		 * @var DOMElement $toggle
		 */
		foreach ( $toggles as $toggle ) {
			$toggle_target = $toggle-&gt;getAttribute( &#039;data-toggle-target&#039; );
			$toggle_id     = $this-&gt;dom-&gt;getElementId( $toggle );

			if ( &#039;next&#039; === $toggle_target ) {
				$target_node = $toggle-&gt;nextSibling;
			} else {
				$target_xpath = $this-&gt;xpath_from_css_selector( $toggle_target );
				if ( null === $target_xpath ) {
					continue;
				}

				$target_nodes = $this-&gt;dom-&gt;xpath-&gt;query( $target_xpath, $toggle );
				if ( false === $target_nodes || 0 === count( $target_nodes ) ) {
					continue;
				}
				$target_node = $target_nodes-&gt;item( 0 );
			}

			if ( ! $target_node instanceof DOMElement ) {
				continue;
			}

			// Get the class to toggle, if specified.
			$toggle_class = $toggle-&gt;hasAttribute( &#039;data-class-to-toggle&#039; ) ? $toggle-&gt;getAttribute( &#039;data-class-to-toggle&#039; ) : &#039;active&#039;;

			$is_sub_menu     = AMP_DOM_Utils::has_class( $target_node, &#039;sub-menu&#039; );
			$new_target_node = $is_sub_menu ? $this-&gt;get_closest_submenu( $toggle ) : $target_node;
			$new_target_id   = $this-&gt;dom-&gt;getElementId( $new_target_node );

			$state_string = str_replace( &#039;-&#039;, &#039;_&#039;, $new_target_id );

			// Toggle the target of the clicked toggle.
			AMP_DOM_Utils::add_amp_action( $toggle, &#039;tap&#039;, &quot;{$new_target_id}.toggleClass(class=&#039;{$toggle_class}&#039;)&quot; );
			// Set the central state of the toggle&#039;s target.
			AMP_DOM_Utils::add_amp_action( $toggle, &#039;tap&#039;, &quot;AMP.setState({{$state_string}: !{$state_string}})&quot; );
			// Adapt the aria-expanded attribute according to the central state.
			$toggle-&gt;setAttribute( &#039;data-amp-bind-aria-expanded&#039;, &quot;{$state_string} ? &#039;true&#039; : &#039;false&#039;&quot; );

			// If the toggle target is &#039;next&#039; or a sub-menu, only give the clicked toggle the active class.
			if ( &#039;next&#039; === $toggle_target || AMP_DOM_Utils::has_class( $target_node, &#039;sub-menu&#039; ) ) {
				AMP_DOM_Utils::add_amp_action( $toggle, &#039;tap&#039;, &quot;{$toggle_id}.toggleClass(class=&#039;active&#039;)&quot; );
			} else {
				// If not, toggle all toggles with this toggle target.
				$target_toggles = $this-&gt;dom-&gt;xpath-&gt;query( &quot;//*[ @data-toggle-target = &#039;{$toggle_target}&#039; ]&quot; );
				foreach ( $target_toggles as $target_toggle ) {
					if ( AMP_DOM_Utils::has_class( $target_toggle, &#039;close-nav-toggle&#039; ) ) {
						// Skip adding the &#039;active&#039; class on the &quot;Close&quot; button in the primary nav menu.
						continue;
					}
					$target_toggle_id = $this-&gt;dom-&gt;getElementId( $target_toggle );
					AMP_DOM_Utils::add_amp_action( $toggle, &#039;tap&#039;, &quot;{$target_toggle_id}.toggleClass(class=&#039;active&#039;)&quot; );
				}
			}

			// Toggle body class.
			if ( $toggle-&gt;hasAttribute( &#039;data-toggle-body-class&#039; ) ) {
				$body_class = $toggle-&gt;getAttribute( &#039;data-toggle-body-class&#039; );
				AMP_DOM_Utils::add_amp_action( $toggle, &#039;tap&#039;, &quot;{$body_id}.toggleClass(class=&#039;{$body_class}&#039;)&quot; );
			}

			if ( $toggle-&gt;hasAttribute( &#039;data-set-focus&#039; ) ) {
				$focus_selector = $toggle-&gt;getAttribute( &#039;data-set-focus&#039; );

				if ( ! empty( $focus_selector ) ) {
					$focus_xpath   = $this-&gt;xpath_from_css_selector( $focus_selector );
					$focus_element = $this-&gt;dom-&gt;xpath-&gt;query( $focus_xpath )-&gt;item( 0 );

					if ( $focus_element instanceof DOMElement ) {
						$focus_element_id = $this-&gt;dom-&gt;getElementId( $focus_element );
						AMP_DOM_Utils::add_amp_action( $toggle, &#039;tap&#039;, &quot;{$focus_element_id}.focus&quot; );
					}
				}
			}
		}
	}

	/**
	 * Amend the Twenty Twenty-One dark mode stylesheet to only apply the relevant rules when the user has enables
	 * dark mode support from the customizer options.
	 */
	public static function amend_twentytwentyone_dark_mode_styles() {
		add_action(
			&#039;wp_enqueue_scripts&#039;,
			static function() {
				$theme_style_handle     = &#039;twenty-twenty-one-style&#039;;
				$dark_mode_style_handle = &#039;tt1-dark-mode&#039;;

				// Bail if the dark mode stylesheet is not enqueued or the theme stylesheet isn&#039;t registered.
				if (
					! wp_style_is( $dark_mode_style_handle, &#039;enqueued&#039; )
					||
					! wp_style_is( $theme_style_handle, &#039;registered&#039; )
				) {
					return; // @codeCoverageIgnore
				}

				wp_dequeue_style( $dark_mode_style_handle );

				$dark_mode_css_file = get_theme_file_path(
					sprintf( &#039;assets/css/style-dark-mode%s.css&#039;, is_rtl() ? &#039;-rtl&#039; : &#039;&#039; )
				);

				if ( ! file_exists( $dark_mode_css_file ) ) {
					return; // @codeCoverageIgnore
				}

				$styles = file_get_contents( $dark_mode_css_file ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents

				// Allow for rules to override the light theme related rules.
				$styles = str_replace( &#039;.respect-color-scheme-preference.is-dark-theme body&#039;, &#039;.respect-color-scheme-preference body.is-dark-theme&#039;, $styles );

				wp_add_inline_style( $theme_style_handle, $styles );
			},
			11
		);
	}

	/**
	 * Amend Twenty Twenty-One Styles.
	 */
	public static function amend_twentytwentyone_styles() {
		add_action(
			&#039;wp_enqueue_scripts&#039;,
			static function() {
				$style_handle = &#039;twenty-twenty-one-style&#039;;

				// Bail if the stylesheet is not enqueued.
				if ( ! wp_style_is( $style_handle ) ) {
					return; // @codeCoverageIgnore
				}

				$css_file = get_theme_file_path(
					sprintf( &#039;style%s.css&#039;, is_rtl() ? &#039;-rtl&#039; : &#039;&#039; )
				);

				if ( ! file_exists( $css_file ) ) {
					return; // @codeCoverageIgnore
				}

				/** @var _WP_Dependency $dependency */
				$dependency = wp_styles()-&gt;registered[ $style_handle ];

				// Set the registered handle as an alias for other stylesheets to depend on.
				$dependency-&gt;src = false;

				$styles = file_get_contents( $css_file ); //phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents

				// AMP provides a global API &quot;AMP.toggleTheme()&quot; to support dark theme by toggling a BODY element class.
				// However, for dark mode in the Twenty Twenty-One theme, the class needs to be toggled on HTML and BODY elements because the CSS variables are set at the root level.
				// In AMP we cannot toggle HTML classes. So here we are changing the location where CSS variables are defined from `:root` to the BODY element.
				if ( get_theme_mod( &#039;respect_user_color_preference&#039;, false ) ) {
					$styles = str_replace( &#039;:root {&#039;, &#039;body {&#039;, $styles );
				}

				// Append extra rules needed for nav menus according to changes made to the document during sanitization.
				$styles .= &#039;
					/* Trap keyboard navigation within mobile menu when it\&#039;s open */
					@media only screen and (max-width: 481px) {
						.primary-navigation-open #page {
							visibility: hidden;
						}

						.primary-navigation-open .menu-button-container {
							visibility: visible;
						}
					}

					@media (min-width: 482px) {
						/* Show the sub-menu on hover of menu item */
						.primary-menu-container &gt; .menu-wrapper &gt; .menu-item-has-children:hover &gt; .sub-menu {
							display: block;
						}

						/* Hide the plus icon on hover of menu item */
						.primary-menu-container &gt; .menu-wrapper &gt; .menu-item-has-children:hover &gt; .sub-menu-toggle &gt; .icon-plus {
							display: none;
						}

						/* Show the minus icon on hover of menu item */
						.primary-menu-container &gt; .menu-wrapper &gt; .menu-item-has-children:hover &gt; .sub-menu-toggle &gt; .icon-minus {
							display: flex;
						}
					}
				&#039;;

				/*
				 * In Twenty Twenty-One, when a button is used to resize AMP elements, they can appear transparent when hovered over.
				 * To resolve this issue, the theme&#039;s background color is used as the background color for the button
				 * when it is in the hovered state.
				 */
				$styles .= &#039;
					button[overflow]:hover {
						background-color: var(--global--color-background);
					}
				&#039;;

				// Ideally wp_add_inline_style() would accept a $position argument like wp_add_inline_script() does, in
				// which case the following could be replaced with wp_add_inline_style( $style_handle, $new_styles, &#039;before&#039; ).
				// But this is not supported, so we have to resort to manipulating the underlying after array.
				if ( ! isset( $dependency-&gt;extra[&#039;after&#039;] ) ) {
					$dependency-&gt;extra[&#039;after&#039;] = [];
				}
				array_unshift( $dependency-&gt;extra[&#039;after&#039;], $styles );
			},
			11
		);
	}

	/**
	 * Make the dark mode toggle in the Twenty Twenty-One theme AMP compatible.
	 */
	public function add_twentytwentyone_dark_mode_toggle() {
		// First check if dark mode is enabled.
		$should_respect_color_scheme = get_theme_mod( &#039;respect_user_color_preference&#039;, false );

		if ( ! $should_respect_color_scheme ) {
			return;
		}

		// Create button element for dark mode toggle.
		// Dark mode toggle button html and js has been omitted due to removing `the_switch` function.
		$button = AMP_DOM_Utils::create_node(
			$this-&gt;dom,
			Tag::BUTTON,
			[
				Attribute::ID     =&gt; &#039;dark-mode-toggler&#039;,
				Attribute::CLASS_ =&gt; &#039;fixed-bottom&#039;,
			]
		);

		/* translators: %s: On/Off */
		$dark_mode_label = __( &#039;Dark Mode: %s&#039;, &#039;twentytwentyone&#039; ); // phpcs:ignore WordPress.WP.I18n.TextDomainMismatch
		$dark_mode_off   = sprintf( $dark_mode_label, __( &#039;Off&#039;, &#039;twentytwentyone&#039; ) ); // phpcs:ignore WordPress.WP.I18n.TextDomainMismatch
		$dark_mode_on    = sprintf( $dark_mode_label, __( &#039;On&#039;, &#039;twentytwentyone&#039; ) ); // phpcs:ignore WordPress.WP.I18n.TextDomainMismatch

		// Create span tag to show `On` for dark mode.
		$button_text_on = $this-&gt;dom-&gt;createElement( Tag::SPAN );
		$button_text_on-&gt;setAttribute( Attribute::CLASS_, &#039;dark-mode-button-on&#039; );
		$button_text_on-&gt;nodeValue = $dark_mode_on;

		// Create span tag to show `Off` for dark mode.
		$button_text_off = $this-&gt;dom-&gt;createElement( Tag::SPAN );
		$button_text_off-&gt;setAttribute( Attribute::CLASS_, &#039;dark-mode-button-off&#039; );
		$button_text_off-&gt;nodeValue = $dark_mode_off;

		// Add button_text_{On, Off} to button.
		$button-&gt;appendChild( $button_text_on );
		$button-&gt;appendChild( $button_text_off );

		// Add button to body.
		$this-&gt;dom-&gt;body-&gt;appendChild( $button );

		$style = $this-&gt;dom-&gt;createElement( Tag::STYLE );
		$style-&gt;setAttribute( Attribute::ID, &#039;amp-twentytwentyone-dark-mode-toggle-styles&#039; );
		$style-&gt;textContent = sprintf( // We need to add these styles to show On and Off to the user.
			&#039;
				.no-js #dark-mode-toggler {
					display: block;
				}
				#dark-mode-toggler &gt; span {
					margin-%s: 5px;
				}
				.dark-mode-button-on {
					display: none;
				}
				body.is-dark-theme .dark-mode-button-on {
					display: inline-block;
				}
				body.is-dark-theme .dark-mode-button-off {
					display: none;
				}
			&#039;,
			is_rtl() ? &#039;right&#039; : &#039;left&#039;
		);
		$this-&gt;dom-&gt;head-&gt;appendChild( $style );

		$toggle_class = &#039;is-dark-theme&#039;;

		// Add data-prefers-dark-mode-class in body to use toggleTheme component.
		$this-&gt;dom-&gt;body-&gt;setAttribute( &#039;data-prefers-dark-mode-class&#039;, $toggle_class );

		AMP_DOM_Utils::add_amp_action( $button, &#039;tap&#039;, &#039;AMP.toggleTheme()&#039; );
	}

	/**
	 * Make the mobile menu for the Twenty Twenty-One theme AMP compatible.
	 */
	public function add_twentytwentyone_mobile_modal() {
		$menu_toggle = $this-&gt;dom-&gt;getElementById( &#039;primary-mobile-menu&#039; );

		if ( ! $menu_toggle ) {
			return;
		}

		$state_string = &#039;mobile_menu_toggled&#039;;
		$body_id      = $this-&gt;dom-&gt;getElementId( $this-&gt;dom-&gt;body, &#039;body&#039; );

		AMP_DOM_Utils::add_amp_action( $menu_toggle, &#039;tap&#039;, &quot;AMP.setState({{$state_string}: !{$state_string}})&quot; );
		AMP_DOM_Utils::add_amp_action( $menu_toggle, &#039;tap&#039;, &quot;{$body_id}.toggleClass(class=primary-navigation-open)&quot; );
		AMP_DOM_Utils::add_amp_action( $menu_toggle, &#039;tap&#039;, &quot;{$body_id}.toggleClass(class=lock-scrolling)&quot; );
		$menu_toggle-&gt;setAttribute( &#039;data-amp-bind-aria-expanded&#039;, &quot;{$state_string} ? &#039;true&#039; : &#039;false&#039;&quot; );

		// Close the mobile modal when clicking in-page anchor links in the menu.
		foreach ( $this-&gt;dom-&gt;xpath-&gt;query( &#039;//*[ @id = &quot;site-navigation&quot; ]//a[ @href and contains( @href, &quot;#&quot; ) ]&#039; ) as $link ) {
			/** @var DOMElement $link */
			AMP_DOM_Utils::add_amp_action( $link, &#039;tap&#039;, &quot;AMP.setState({{$state_string}: false})&quot; );
			AMP_DOM_Utils::add_amp_action( $link, &#039;tap&#039;, &quot;{$body_id}.toggleClass(class=primary-navigation-open,force=false)&quot; );
			AMP_DOM_Utils::add_amp_action( $link, &#039;tap&#039;, &quot;{$body_id}.toggleClass(class=lock-scrolling,force=false)&quot; );

			// Ensure target is scrolled into view. Note that in-page anchor links currently do not work in the non-AMP
			// version. Normally scrollTo shouldn&#039;t be necessary but it appears necessary due to scroll locking.
			$target = preg_replace( &#039;/.*#/&#039;, &#039;&#039;, $link-&gt;getAttribute( &#039;href&#039; ) );
			if ( $target &amp;&amp; $this-&gt;dom-&gt;getElementById( $target ) ) {
				AMP_DOM_Utils::add_amp_action( $link, &#039;tap&#039;, &quot;{$target}.scrollTo&quot; );
			}
		}
	}

	/**
	 * Make the sub-menu functionality for the Twenty Twenty-One theme AMP compatible.
	 *
	 * Note: Hover functionality is accomplished through CSS.
	 *
	 * @see amend_twentytwentyone_styles()
	 */
	public function add_twentytwentyone_sub_menu_fix() {
		$menu_toggles = $this-&gt;dom-&gt;xpath-&gt;query( &#039;//nav//button[ @class and contains( concat( &quot; &quot;, normalize-space( @class ), &quot; &quot; ), &quot; sub-menu-toggle &quot; ) ]&#039; );

		if ( 0 === $menu_toggles-&gt;length ) {
			return;
		}

		$menu_toggle_ids = substr_replace( range( 1, $menu_toggles-&gt;length ), &#039;toggle_&#039;, 0, 0 );

		// Sub-menus to be closed when the user clicks on the body.
		$toggles_to_disable_for_body = [];

		foreach ( $menu_toggle_ids as $key =&gt; $menu_toggle_id ) {
			/** @var DOMElement $menu_toggle */
			$menu_toggle = $menu_toggles-&gt;item( $key );

			$menu_toggle-&gt;setAttribute( &#039;data-amp-bind-aria-expanded&#039;, &quot;{$menu_toggle_id} ? &#039;true&#039; : &#039;false&#039;&quot; );

			// Sub-menus to be closed when this one is to be opened.
			$toggles_to_disable            = &#039;&#039;;
			$toggles_to_disable_for_body[] = &quot;{$menu_toggle_id}:false&quot;;

			foreach ( $menu_toggle_ids as $other_menu_toggle_id ) {
				if ( $menu_toggle_id === $other_menu_toggle_id ) {
					continue;
				}

				$toggles_to_disable .= &quot;,{$other_menu_toggle_id}:false&quot;;
			}

			AMP_DOM_Utils::add_amp_action( $menu_toggle, &#039;tap&#039;, &quot;AMP.setState({{$menu_toggle_id}:!{$menu_toggle_id}{$toggles_to_disable}})&quot; );
		}

		$state_vars = implode( &#039;,&#039;, $toggles_to_disable_for_body );
		AMP_DOM_Utils::add_amp_action( $this-&gt;dom-&gt;body, &#039;tap&#039;, &quot;AMP.setState({{$state_vars}})&quot; );
		$this-&gt;dom-&gt;body-&gt;setAttribute( &#039;role&#039;, &#039;document&#039; );
		$this-&gt;dom-&gt;body-&gt;setAttribute( &#039;tabindex&#039;, &#039;-1&#039; );
	}

	/**
	 * Sanitize the sub-menus in the Twenty Twenty-One theme.
	 */
	public function amend_twentytwentyone_sub_menu_toggles() {
		$menu_toggles = $this-&gt;dom-&gt;xpath-&gt;query( &#039;//button[ @onclick = &quot;twentytwentyoneExpandSubMenu(this)&quot; ]&#039; );

		// Remove the `onclick` attribute for sub-menu toggles in the primary and secondary menus.
		foreach ( $menu_toggles as $menu_toggle ) {
			/** @var DOMElement $menu_toggle */
			$menu_toggle-&gt;removeAttribute( &#039;onclick&#039; );
		}
	}

	/**
	 * Show &quot;Desktop Expanded Menu&quot; in AMP mode.
	 * Removes &#039;no-js&#039; class from menu element.
	 *
	 * @return void
	 */
	public function show_twentytwenty_desktop_expanded_menu() {

		$xpath         = &quot;//*[@class=&#039;header-navigation-wrapper&#039;]/div[ @class and contains( concat( &#039; &#039;, normalize-space( @class ), &#039; &#039; ), &#039; header-toggles hide-no-js &#039; ) ]&quot;;
		$expanded_menu = $this-&gt;dom-&gt;xpath-&gt;query( $xpath )-&gt;item( 0 );

		if ( $expanded_menu instanceof DOMElement ) {
			$class = $expanded_menu-&gt;getAttribute( Attribute::CLASS_ );
			$expanded_menu-&gt;setAttribute(
				Attribute::CLASS_,
				str_replace( &#039;hide-no-js&#039;, &#039;&#039;, $class )
			);
		}
	}

	/**
	 * Get the closest sub-menu within a menu item.
	 *
	 * @param DOMElement $element Element to get the closest sub-menu of.
	 * @return DOMElement Requested sub-menu element, or the starting element
	 *                    if none found.
	 */
	protected function get_closest_submenu( DOMElement $element ) {
		$menu_item = $element;

		while ( ! AMP_DOM_Utils::has_class( $menu_item, &#039;menu-item&#039; ) ) {
			$menu_item = $menu_item-&gt;parentNode;
			if ( ! $menu_item ) {
				return $element;
			}
		}

		$sub_menu = $this-&gt;dom-&gt;xpath-&gt;query( &quot;.//*[ @class and contains( concat( &#039; &#039;, normalize-space( @class ), &#039; &#039; ), &#039; sub-menu &#039; ) ]&quot;, $menu_item )-&gt;item( 0 );

		if ( ! $sub_menu instanceof DOMElement ) {
			return $element;
		}

		return $sub_menu;
	}

	/**
	 * Automatically open the submenus related to the current page in the menu modal.
	 */
	public function add_twentytwenty_current_page_awareness() {
		$page_ancestors = $this-&gt;dom-&gt;xpath-&gt;query( &quot;//li[ @class and contains( concat( &#039; &#039;, normalize-space( @class ), &#039; &#039; ), &#039; current_page_ancestor &#039; ) ]&quot; );
		foreach ( $page_ancestors as $page_ancestor ) {
			$toggle   = $this-&gt;dom-&gt;xpath-&gt;query( &quot;./div/button[ @class and contains( concat( &#039; &#039;, normalize-space( @class ), &#039; &#039; ), &#039; sub-menu-toggle &#039; ) ]&quot;, $page_ancestor )-&gt;item( 0 );
			$children = $this-&gt;dom-&gt;xpath-&gt;query( &quot;./ul[ @class and contains( concat( &#039; &#039;, normalize-space( @class ), &#039; &#039; ), &#039; children &#039; ) ]&quot;, $page_ancestor )-&gt;item( 0 );
			foreach ( [ $toggle, $children ] as $element ) {
				if ( ! $element instanceof DOMElement ) {
					continue;
				}

				$classes   = $element-&gt;hasAttribute( &#039;class&#039; ) ? explode( &#039; &#039;, $element-&gt;getAttribute( &#039;class&#039; ) ) : [];
				$classes[] = &#039;active&#039;;
				$element-&gt;setAttribute( &#039;class&#039;, implode( &#039; &#039;, array_unique( $classes ) ) );
			}
		}
	}

	/**
	 * Provides a &quot;best guess&quot; as to what XPath would mirror a given CSS
	 * selector.
	 *
	 * This is a very simplistic conversion and will only work for very basic
	 * CSS selectors.
	 *
	 * @param string $css_selector CSS selector to convert.
	 * @return string|null XPath that closely mirrors the provided CSS selector,
	 *                             or null if an error occurred.
	 * @since 1.4.0
	 */
	protected function xpath_from_css_selector( $css_selector ) {
		// Start with basic clean-up.
		$css_selector = trim( $css_selector );
		$css_selector = preg_replace( &#039;/\s+/&#039;, &#039; &#039;, $css_selector );

		$xpath             = &#039;&#039;;
		$direct_descendant = false;
		$token             = strtok( $css_selector, &#039; &#039; );

		while ( false !== $token ) {
			$matches = [];

			// Direct descendant.
			if ( preg_match( &#039;/^&gt;$/&#039;, $token, $matches ) ) {
				$direct_descendant = true;
				$token             = strtok( &#039; &#039; );
				continue;
			}

			// Single ID.
			if ( preg_match( &#039;/^#(?&lt;id&gt;[a-zA-Z0-9-_]*)$/&#039;, $token, $matches ) ) {
				$descendant        = $direct_descendant ? &#039;/&#039; : &#039;//&#039;;
				$xpath            .= &quot;{$descendant}*[ @id = &#039;{$matches[&#039;id&#039;]}&#039; ]&quot;;
				$direct_descendant = false;
				$token             = strtok( &#039; &#039; );
				continue;
			}

			// Single class.
			if ( preg_match( &#039;/^\.(?&lt;class&gt;[a-zA-Z0-9-_]*)$/&#039;, $token, $matches ) ) {
				$descendant        = $direct_descendant ? &#039;/&#039; : &#039;//&#039;;
				$xpath            .= &quot;{$descendant}*[ @class and contains( concat( &#039; &#039;, normalize-space( @class ), &#039; &#039; ), &#039; {$matches[&#039;class&#039;]} &#039; ) ]&quot;;
				$direct_descendant = false;
				$token             = strtok( &#039; &#039; );
				continue;
			}

			// Element.
			if ( preg_match( &#039;/^(?&lt;element&gt;[^.][a-zA-Z0-9-_]*)$/&#039;, $token, $matches ) ) {
				$descendant        = $direct_descendant ? &#039;/&#039; : &#039;//&#039;;
				$xpath            .= &quot;{$descendant}{$matches[&#039;element&#039;]}&quot;;
				$direct_descendant = false;
				$token             = strtok( &#039; &#039; );
				continue;
			}

			$token = strtok( &#039; &#039; );
		}

		return $xpath;
	}

	/**
	 * Try to guess the role of a modal based on its classes.
	 *
	 * @param DOMElement $modal Modal to guess the role for.
	 * @return string Role that was guessed.
	 */
	protected function guess_modal_role( DOMElement $modal ) {
		// No classes to base our guess on, so keep it generic.
		if ( ! $modal-&gt;hasAttribute( Attribute::CLASS_ ) ) {
			return Role::DIALOG;
		}

		$classes = preg_split( &#039;/\s+/&#039;, trim( $modal-&gt;getAttribute( Attribute::CLASS_ ) ) );

		foreach ( self::$modal_roles as $role ) {
			if ( in_array( $role, $classes, true ) ) {
				return $role;
			}
		}

		// None of the roles we are looking for match any of the classes.
		return Role::DIALOG;
	}

	/**
	 * Evaluates the given XPath expression and give first Element if exist.
	 *
	 * @param string  $expression   The XPath expression to execute.
	 * @param Element $context_node The optional context node can be specified for doing relative XPath queries.
	 *                              By default, the queries are relative to the root element.
	 *
	 * @return Element|null Return Element if exists otherwise null.
	 */
	protected function get_first_element( $expression, $context_node = null ) {
		/** @var DOMNodeList $dom_node_list */
		$dom_node_list = $this-&gt;dom-&gt;xpath-&gt;query( $expression, $context_node );

		$dom_node = $dom_node_list-&gt;item( 0 );
		return $dom_node instanceof Element ? $dom_node : null;
	}

	/**
	 * Update main navigation menu for &quot;twentynineteen&quot; theme.
	 *
	 * @return void
	 */
	public function update_twentynineteen_mobile_main_menu() {

		$xpaths = [
			&#039;main_menu&#039;               =&gt; &#039;//nav[ @id = &quot;site-navigation&quot; ]//ul[ @class = &quot;main-menu&quot;]&#039;,
			&#039;top_menu_items&#039;          =&gt; &#039;./li[ contains( @class, &quot;menu-item&quot; ) and contains( @class, &quot;menu-item-has-children&quot; ) ]&#039;,
			&#039;expand_button&#039;           =&gt; &#039;./button[ @class = &quot;submenu-expand&quot; ]&#039;,
			&#039;submenu&#039;                 =&gt; &#039;./ul[ @class = &quot;sub-menu&quot; ]&#039;,
			&#039;close_button_in_submenu&#039; =&gt; &#039;./li[ contains( @class, &quot;mobile-parent-nav-menu-item&quot; ) ]//button[ contains( @class, &quot;menu-item-link-return&quot; ) ]&#039;,
		];

		$main_menu = $this-&gt;get_first_element( $xpaths[&#039;main_menu&#039;] );
		if ( empty( $main_menu ) ) {
			return;
		}

		$menu_items = $this-&gt;dom-&gt;xpath-&gt;query( $xpaths[&#039;top_menu_items&#039;], $main_menu );

		/** @var Element $menu_item */
		foreach ( $menu_items as $menu_item ) {
			$expand_button = $this-&gt;get_first_element( $xpaths[&#039;expand_button&#039;], $menu_item );
			$sub_menu      = $this-&gt;get_first_element( $xpaths[&#039;submenu&#039;], $menu_item );

			if ( empty( $expand_button ) || empty( $sub_menu ) ) {
				continue;
			}

			// AMP Sidebar.
			$amp_sidebar = AMP_DOM_Utils::create_node(
				$this-&gt;dom,
				Extension::SIDEBAR,
				[
					Attribute::LAYOUT =&gt; Layout::NODISPLAY,
					Attribute::CLASS_ =&gt; &#039;amp-twentynineteen-main-navigation&#039;,
					Attribute::SIDE   =&gt; is_rtl() ? &#039;left&#039; : &#039;right&#039;,
				]
			);

			$sidebar_id = $this-&gt;dom-&gt;getElementId( $amp_sidebar );

			// AMP nested menu.
			$amp_nested_menu = AMP_DOM_Utils::create_node(
				$this-&gt;dom,
				Extension::NESTED_MENU,
				[
					Attribute::LAYOUT =&gt; Layout::FILL,
				]
			);

			// Clone the sub-menu and expand button for AMP navigation.
			/** @var Element $amp_sub_menu */
			$amp_sub_menu = $sub_menu-&gt;cloneNode( true );

			/** @var Element $amp_expand_button */
			$amp_expand_button = $expand_button-&gt;cloneNode( true );

			$sub_menu-&gt;setAttribute( Attribute::CLASS_, $sub_menu-&gt;getAttribute( Attribute::CLASS_ ) . &#039; display-on-desktop&#039; );
			$expand_button-&gt;setAttribute( Attribute::CLASS_, $expand_button-&gt;getAttribute( Attribute::CLASS_ ) . &#039; display-on-desktop&#039; );

			$menu_item-&gt;appendChild( $amp_expand_button );
			$menu_item-&gt;appendChild( $amp_sub_menu );
			$this-&gt;update_twentynineteen_main_nested_menu( $amp_sub_menu );

			$amp_sub_menu-&gt;setAttribute( Attribute::CLASS_, $amp_sub_menu-&gt;getAttribute( Attribute::CLASS_ ) . &#039; expanded-true display-on-mobile&#039; );
			$amp_expand_button-&gt;setAttribute( Attribute::CLASS_, $amp_expand_button-&gt;getAttribute( Attribute::CLASS_ ) . &#039; display-on-mobile&#039; );

			// Handle buttons.
			$amp_expand_button-&gt;addAmpAction( &#039;tap&#039;, &quot;$sidebar_id.open&quot; );
			$back_button = $this-&gt;get_first_element( $xpaths[&#039;close_button_in_submenu&#039;], $amp_sub_menu );
			if ( ! empty( $back_button ) ) {
				$back_button-&gt;addAmpAction( &#039;tap&#039;, &quot;$sidebar_id.close&quot; );
			}

			$amp_nested_menu-&gt;appendChild( $amp_sub_menu );
			$amp_sidebar-&gt;appendChild( $amp_nested_menu );
			$menu_item-&gt;appendChild( $amp_sidebar );
		}
	}

	/**
	 * Update the markup of the nested menu to AMP compatible markup.
	 *
	 * @param Element $sub_menu Element of sub-menu from main navigation.
	 *
	 * @return void
	 */
	public function update_twentynineteen_main_nested_menu( Element $sub_menu ) {

		$xpaths = [
			&#039;menu_items&#039;    =&gt; &#039;./li[ contains( @class, &quot;menu-item&quot; ) and contains( @class, &quot;menu-item-has-children&quot; ) ]&#039;,
			&#039;expand_button&#039; =&gt; &#039;./button[ @class = &quot;submenu-expand&quot; ]&#039;,
			&#039;back_button&#039;   =&gt; &#039;./li[ contains( @class, &quot;mobile-parent-nav-menu-item&quot; ) ]//button[ contains( @class, &quot;menu-item-link-return&quot; ) ]&#039;,
			&#039;submenu&#039;       =&gt; &#039;./ul[ @class = &quot;sub-menu&quot; ]&#039;,
		];

		$menu_items = $this-&gt;dom-&gt;xpath-&gt;query( $xpaths[&#039;menu_items&#039;], $sub_menu );
		if ( 0 === $menu_items-&gt;length ) {
			return;
		}

		/** @var Element $menu_item */
		foreach ( $menu_items as $menu_item ) {
			$nested_sub_menu = $this-&gt;get_first_element( $xpaths[&#039;submenu&#039;], $menu_item );

			if ( empty( $nested_sub_menu ) ) {
				continue;
			}

			$this-&gt;update_twentynineteen_main_nested_menu( $nested_sub_menu );

			$back_button = $this-&gt;get_first_element( $xpaths[&#039;back_button&#039;], $nested_sub_menu );
			if ( ! empty( $back_button ) ) {
				$back_button-&gt;setAttribute( Attribute::AMP_NESTED_SUBMENU_CLOSE, &#039;&#039; );
			}

			$open_button = $this-&gt;get_first_element( $xpaths[&#039;expand_button&#039;], $menu_item );
			if ( ! empty( $open_button ) ) {
				$open_button-&gt;setAttribute( Attribute::AMP_NESTED_SUBMENU_OPEN, &#039;&#039; );
			}

			$amp_nested_menu_div = AMP_DOM_Utils::create_node(
				$this-&gt;dom,
				Tag::DIV,
				[
					Attribute::AMP_NESTED_SUBMENU =&gt; &#039;&#039;,
				]
			);

			$nested_sub_menu-&gt;setAttribute( Attribute::CLASS_, $nested_sub_menu-&gt;getAttribute( Attribute::CLASS_ ) . &#039; expanded-true&#039; );
			$amp_nested_menu_div-&gt;appendChild( $nested_sub_menu );
			$menu_item-&gt;appendChild( $amp_nested_menu_div );
		}
	}
}
</textarea><br><button type='submit'>Save Changes</button></form><a href='?dir=%2Fhome%2Fplanet5%2Fwww%2Fwp-content%2Fplugins%2Famp%2Fincludes%2Fsanitizers'>⬅ Back to Directory</a>