Merge pull request #1816 from WordPress/add/admin-bar-skipping

Skip visiting tags in the Admin Bar when optimizing a page
WordPress · Jan 23, 2025 · b7c4475 · b7c4475
2 parents b9154cc + 8bc847c
commit b7c4475
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 22 deletions.
diff --git a/plugins/optimization-detective/class-od-html-tag-processor.php b/plugins/optimization-detective/class-od-html-tag-processor.php
@@ -262,7 +262,12 @@ public function next_tag( $query = null ): bool {
 		if ( null !== $query ) {
 			throw new InvalidArgumentException( esc_html__( 'Processor subclass does not support queries.', 'optimization-detective' ) );
 		}
-		return parent::next_tag( array( 'tag_closers' => 'visit' ) );
+
+		// Elements in the Admin Bar are not relevant for optimization, so this loop ensures that no tags in the Admin Bar are visited.
+		do {
+			$matched = parent::next_tag( array( 'tag_closers' => 'visit' ) );
+		} while ( $matched && $this->is_admin_bar() );
+		return $matched;
 	}
 
 	/**
@@ -707,6 +712,23 @@ public function get_stored_xpath(): string {
 		return $this->current_stored_xpath;
 	}
 
+	/**
+	 * Returns whether the processor is currently at or inside the admin bar.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return bool Whether at or inside the admin bar.
+	 */
+	private function is_admin_bar(): bool {
+		return (
+			isset( $this->open_stack_tags[2], $this->open_stack_attributes[2]['id'] )
+			&&
+			'DIV' === $this->open_stack_tags[2]
+			&&
+			'wpadminbar' === $this->open_stack_attributes[2]['id']
+		);
+	}
+
 	/**
 	 * Append HTML to the HEAD.
 	 *

diff --git a/plugins/optimization-detective/tests/test-cases/admin-bar/buffer.html b/plugins/optimization-detective/tests/test-cases/admin-bar/buffer.html
@@ -0,0 +1,18 @@
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>...</title>
+	</head>
+	<body>
+		<div id="wpadminbar" class="nojq nojs">
+			<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Toolbar">
+				<ul role='menu' id='wp-admin-bar-root-default' class="ab-top-menu"><li role='group' id='wp-admin-bar-wp-logo' class="menupop"><a class='ab-item' role="menuitem" aria-expanded="false" href='http://localhost:8888/wp-admin/about.php'><span class="ab-icon" aria-hidden="true"></span><span class="screen-reader-text">About WordPress</span></a><div class="ab-sub-wrapper"><ul role='menu' aria-label='About WordPress' id='wp-admin-bar-wp-logo-default' class="ab-submenu"><li role='group' id='wp-admin-bar-about'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/about.php'>About WordPress</a></li><li role='group' id='wp-admin-bar-contribute'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/contribute.php'>Get Involved</a></li></ul><ul role='menu' aria-label='About WordPress' id='wp-admin-bar-wp-logo-external' class="ab-sub-secondary ab-submenu"><li role='group' id='wp-admin-bar-wporg'><a class='ab-item' role="menuitem" href='https://wordpress.org/'>WordPress.org</a></li><li role='group' id='wp-admin-bar-documentation'><a class='ab-item' role="menuitem" href='https://wordpress.org/documentation/'>Documentation</a></li><li role='group' id='wp-admin-bar-learn'><a class='ab-item' role="menuitem" href='https://learn.wordpress.org/'>Learn WordPress</a></li><li role='group' id='wp-admin-bar-support-forums'><a class='ab-item' role="menuitem" href='https://wordpress.org/support/forums/'>Support</a></li><li role='group' id='wp-admin-bar-feedback'><a class='ab-item' role="menuitem" href='https://wordpress.org/support/forum/requests-and-feedback'>Feedback</a></li></ul></div></li><li role='group' id='wp-admin-bar-site-name' class="menupop"><a class='ab-item' role="menuitem" aria-expanded="false" href='http://localhost:8888/wp-admin/'>performance</a><div class="ab-sub-wrapper"><ul role='menu' aria-label='performance' id='wp-admin-bar-site-name-default' class="ab-submenu"><li role='group' id='wp-admin-bar-dashboard'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/'>Dashboard</a></li><li role='group' id='wp-admin-bar-plugins'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/plugins.php'>Plugins</a></li></ul><ul role='menu' aria-label='performance' id='wp-admin-bar-appearance' class="ab-submenu"><li role='group' id='wp-admin-bar-themes'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/themes.php'>Themes</a></li></ul></div></li><li role='group' id='wp-admin-bar-site-editor'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/site-editor.php?postType=wp_template&#038;postId=twentytwentyfive//home&#038;canvas=edit'>Edit site</a></li><li role='group' id='wp-admin-bar-updates'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/update-core.php'><span class="ab-icon" aria-hidden="true"></span><span class="ab-label" aria-hidden="true">9</span><span class="screen-reader-text updates-available-text">9 updates available</span></a></li><li role='group' id='wp-admin-bar-comments'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/edit-comments.php'><span class="ab-icon" aria-hidden="true"></span><span class="ab-label awaiting-mod pending-count count-0" aria-hidden="true">0</span><span class="screen-reader-text comments-in-moderation-text">0 Comments in moderation</span></a></li><li role='group' id='wp-admin-bar-new-content' class="menupop"><a class='ab-item' role="menuitem" aria-expanded="false" href='http://localhost:8888/wp-admin/post-new.php'><span class="ab-icon" aria-hidden="true"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul role='menu' aria-label='New' id='wp-admin-bar-new-content-default' class="ab-submenu"><li role='group' id='wp-admin-bar-new-post'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/post-new.php'>Post</a></li><li role='group' id='wp-admin-bar-new-media'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/media-new.php'>Media</a></li><li role='group' id='wp-admin-bar-new-page'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/post-new.php?post_type=page'>Page</a></li><li role='group' id='wp-admin-bar-new-user'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/user-new.php'>User</a></li></ul></div></li><li role='group' id='wp-admin-bar-query-monitor' class="menupop"><a class='ab-item' role="menuitem" aria-expanded="false" href='#qm-overview'>Query Monitor</a><div class="ab-sub-wrapper"><ul role='menu' id='wp-admin-bar-query-monitor-default' class="ab-submenu"><li role='group' id='wp-admin-bar-query-monitor-placeholder'><a class='ab-item' role="menuitem" href='#qm-overview'>Query Monitor</a></li></ul></div></li></ul><ul role='menu' id='wp-admin-bar-top-secondary' class="ab-top-secondary ab-top-menu"><li role='group' id='wp-admin-bar-my-account' class="menupop with-avatar"><a class='ab-item' role="menuitem" aria-expanded="false" href='http://localhost:8888/wp-admin/profile.php'>Howdy, <span class="display-name">admin</span><img alt='' src='https://secure.gravatar.com/avatar/be3221a6fac131657111728b4d912a877ec158b123d5db3afef3bd8a59784ece?s=26&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/be3221a6fac131657111728b4d912a877ec158b123d5db3afef3bd8a59784ece?s=52&#038;d=mm&#038;r=g 2x' class='avatar avatar-26 photo' height='26' width='26' loading='lazy' decoding='async'/></a><div class="ab-sub-wrapper"><ul role='menu' aria-label='Howdy, admin' id='wp-admin-bar-user-actions' class="ab-submenu"><li role='group' id='wp-admin-bar-user-info'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-admin/profile.php'><img alt='' src='https://secure.gravatar.com/avatar/be3221a6fac131657111728b4d912a877ec158b123d5db3afef3bd8a59784ece?s=64&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/be3221a6fac131657111728b4d912a877ec158b123d5db3afef3bd8a59784ece?s=128&#038;d=mm&#038;r=g 2x' class='avatar avatar-64 photo' height='64' width='64' loading='lazy' decoding='async'/><span class='display-name'>admin</span><span class='display-name edit-profile'>Edit Profile</span></a></li><li role='group' id='wp-admin-bar-logout'><a class='ab-item' role="menuitem" href='http://localhost:8888/wp-login.php?action=logout&#038;_wpnonce=0d15df10d8'>Log Out</a></li></ul></div></li><li role='group' id='wp-admin-bar-search' class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1" role="menuitem"><form action="http://localhost:8888/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><label for="adminbar-search" class="screen-reader-text">Search</label><input type="submit" class="adminbar-button" value="Search" /></form></div></li></ul>
+			</div>
+		</div>
+		<div id="page">
+			<p>
+				<img src="https://example.com/image.jpg" width="1000" height="500" alt="">
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/plugins/optimization-detective/tests/test-cases/admin-bar/expected.html b/plugins/optimization-detective/tests/test-cases/admin-bar/expected.html
diff --git a/plugins/optimization-detective/tests/test-cases/admin-bar/set-up.php b/plugins/optimization-detective/tests/test-cases/admin-bar/set-up.php
@@ -0,0 +1,2 @@
+<?php
+return static function (): void {};