Skip to content

Commit fd0e6c6

Browse files
mikachanwestonrutert-hamano
authored
Navigation Overlay: Explicitly set fetchpriority for images (#76208)
* Set images to lazy loading in overlay * Explicitly set fetchpriority=low * Update comment * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Rename function * Use WP_HTML_Tag_Processor in tests * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> --------- Co-authored-by: Weston Ruter <weston@ruter.net> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: westonruter <westonruter@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
1 parent abde66b commit fd0e6c6

2 files changed

Lines changed: 70 additions & 0 deletions

File tree

‎packages/block-library/src/navigation/index.php‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -710,6 +710,12 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
710710
$tags = new WP_HTML_Tag_Processor( $overlay_blocks_html );
711711
$overlay_blocks_html = block_core_navigation_add_directives_to_overlay_close( $tags );
712712
}
713+
// Images in the overlay are hidden until the menu is opened. Pre-set
714+
// fetchpriority="low" so that when wp_filter_content_tags() processes the
715+
// parent template part, it sees the attribute already present and calls
716+
// wp_get_loading_optimization_attributes() with fetchpriority="low", which both prevents
717+
// fetchpriority="high" from being added and stops the LCP counter from being incremented.
718+
$overlay_blocks_html = block_core_navigation_set_overlay_image_fetch_priority( $overlay_blocks_html );
713719
}
714720

715721
$has_custom_overlay = ! empty( $overlay_blocks_html );
@@ -1111,6 +1117,25 @@ function block_core_navigation_add_directives_to_overlay_close( $tags ) {
11111117
return $tags->get_updated_html();
11121118
}
11131119

1120+
/**
1121+
* Sets fetchpriority="low" on all IMG tags within the navigation overlay.
1122+
*
1123+
* Images in the overlay are hidden until the menu is opened, so they should
1124+
* not compete with any actual LCP element image on the page.
1125+
*
1126+
* @since 7.0.0
1127+
*
1128+
* @param string $overlay_blocks_html The rendered HTML of the overlay blocks.
1129+
* @return string Modified HTML with fetchpriority="low" on all IMG tags.
1130+
*/
1131+
function block_core_navigation_set_overlay_image_fetch_priority( string $overlay_blocks_html ): string {
1132+
$tags = new WP_HTML_Tag_Processor( $overlay_blocks_html );
1133+
while ( $tags->next_tag( 'IMG' ) ) {
1134+
$tags->set_attribute( 'fetchpriority', 'low' );
1135+
}
1136+
return $tags->get_updated_html();
1137+
}
1138+
11141139
/**
11151140
* Add Interactivity API directives to the navigation-submenu and page-list
11161141
* blocks markup using the Tag Processor.

‎phpunit/blocks/render-block-navigation-test.php‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,4 +91,49 @@ public function test_block_core_navigation_block_contains_core_navigation_no_nav
9191
$inner_blocks = new WP_Block_List( $parsed_blocks );
9292
$this->assertFalse( gutenberg_block_core_navigation_block_tree_has_block_type( $inner_blocks, 'core/navigation' ) );
9393
}
94+
95+
/**
96+
* @covers ::block_core_navigation_set_overlay_image_fetch_priority
97+
*/
98+
public function test_block_core_navigation_set_overlay_image_fetch_priority_adds_low_priority() {
99+
$html = '<div><img src="example.jpg" width="300" height="300" /></div>';
100+
$result = gutenberg_block_core_navigation_set_overlay_image_fetch_priority( $html );
101+
$tags = new WP_HTML_Tag_Processor( $result );
102+
$this->assertTrue( $tags->next_tag( 'IMG' ) );
103+
$this->assertSame( 'low', $tags->get_attribute( 'fetchpriority' ) );
104+
$this->assertNull( $tags->get_attribute( 'loading' ) );
105+
}
106+
107+
/**
108+
* @covers ::block_core_navigation_set_overlay_image_fetch_priority
109+
*/
110+
public function test_block_core_navigation_set_overlay_image_fetch_priority_overrides_high_priority() {
111+
$html = '<div><img src="example.jpg" fetchpriority="high" /></div>';
112+
$result = gutenberg_block_core_navigation_set_overlay_image_fetch_priority( $html );
113+
$tags = new WP_HTML_Tag_Processor( $result );
114+
$this->assertTrue( $tags->next_tag( 'IMG' ) );
115+
$this->assertSame( 'low', $tags->get_attribute( 'fetchpriority' ) );
116+
}
117+
118+
/**
119+
* @covers ::block_core_navigation_set_overlay_image_fetch_priority
120+
*/
121+
public function test_block_core_navigation_set_overlay_image_fetch_priority_multiple_images() {
122+
$html = '<div><img src="a.jpg" /><img src="b.jpg" /></div>';
123+
$result = gutenberg_block_core_navigation_set_overlay_image_fetch_priority( $html );
124+
$tags = new WP_HTML_Tag_Processor( $result );
125+
$this->assertTrue( $tags->next_tag( 'IMG' ) );
126+
$this->assertSame( 'low', $tags->get_attribute( 'fetchpriority' ) );
127+
$this->assertTrue( $tags->next_tag( 'IMG' ) );
128+
$this->assertSame( 'low', $tags->get_attribute( 'fetchpriority' ) );
129+
}
130+
131+
/**
132+
* @covers ::block_core_navigation_set_overlay_image_fetch_priority
133+
*/
134+
public function test_block_core_navigation_set_overlay_image_fetch_priority_no_images() {
135+
$html = '<div><p>No images here</p></div>';
136+
$result = gutenberg_block_core_navigation_set_overlay_image_fetch_priority( $html );
137+
$this->assertSame( $html, $result );
138+
}
94139
}

0 commit comments

Comments
 (0)