Last active
September 5, 2023 22:39
-
-
Save westonruter/1dffdd6d6d5bb0e13b167875f1165659 to your computer and use it in GitHub Desktop.
Demonstration of blocks in post content that cause fetchpriority to be applied to the wrong image
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- wp:paragraph --> | |
<p><em>Note how the first image is getting <code>fetchpriority=high</code> even though the second image is larger and is the LCP element.</em></p> | |
<!-- /wp:paragraph --> | |
<!-- wp:media-text {"mediaId":23,"mediaType":"image","mediaWidth":34,"isStackedOnMobile":false,"imageFill":true,"focalPoint":{"x":0.73,"y":0.42}} --> | |
<div class="wp-block-media-text is-image-fill" style="grid-template-columns:34% auto"><figure class="wp-block-media-text__media" style="background-image:url(http://localhost:10008/wp-content/uploads/2023/05/American_bison_k5680-1-300x196.webp);background-position:73% 42%"><img src="http://localhost:10008/wp-content/uploads/2023/05/American_bison_k5680-1-300x196.webp" alt="" class="wp-image-23 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} --> | |
<p>A <strong>bison</strong> (pl: <strong>bison</strong>) is a large <a href="https://en.wikipedia.org/wiki/Bovine">bovine</a> in the <a href="https://en.wikipedia.org/wiki/Genus">genus</a> <em><strong>Bison</strong></em> (Greek: "wild ox" (bison)) within the tribe <a href="https://en.wikipedia.org/wiki/Bovini">Bovini</a>. Two <a href="https://en.wikipedia.org/wiki/Extant_taxon">extant</a> and numerous <a href="https://en.wikipedia.org/wiki/Extinction">extinct</a> species are recognised.</p> | |
<!-- /wp:paragraph --></div></div> | |
<!-- /wp:media-text --> | |
<!-- wp:image {"id":33,"sizeSlug":"large"} --> | |
<figure class="wp-block-image size-large"><img src="http://localhost:10008/wp-content/uploads/2023/09/image-1024x683.jpeg" alt="" class="wp-image-33"/><figcaption class="wp-element-caption">"<a href="https://www.rawpixel.com/image/8732279/photo-image-face-public-domain-animal" target="_blank" rel="noreferrer noopener">Portrait of a bull bison</a>" by National Park Service/ <a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse" target="_blank" rel="noreferrer noopener">CC0 1.0</a></figcaption></figure> | |
<!-- /wp:image --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p><em>Note how the first image is getting <code>fetchpriority=high</code> even though the second image is larger and is | |
the LCP element.</em></p> | |
<div class="wp-block-media-text is-image-fill" style="grid-template-columns:34% auto"> | |
<figure class="wp-block-media-text__media" | |
style="background-image:url(http://localhost:10008/wp-content/uploads/2023/05/American_bison_k5680-1-300x196.webp);background-position:73% 42%"> | |
<img decoding="async" fetchpriority="high" width="300" height="196" | |
src="http://localhost:10008/wp-content/uploads/2023/05/American_bison_k5680-1-300x196.webp" alt="" | |
class="wp-image-23 size-full"></figure> | |
<div class="wp-block-media-text__content"> | |
<p>A <strong>bison</strong> (pl: <strong>bison</strong>) is a large <a | |
href="https://en.wikipedia.org/wiki/Bovine">bovine</a> in the <a | |
href="https://en.wikipedia.org/wiki/Genus">genus</a> <em><strong>Bison</strong></em> (Greek: “wild ox” | |
(bison)) within the tribe <a href="https://en.wikipedia.org/wiki/Bovini">Bovini</a>. Two <a | |
href="https://en.wikipedia.org/wiki/Extant_taxon">extant</a> and numerous <a | |
href="https://en.wikipedia.org/wiki/Extinction">extinct</a> species are recognised.</p> | |
</div> | |
</div> | |
<figure class="wp-block-image"><img decoding="async" width="1300" height="867" | |
src="http://localhost:10008/wp-content/uploads/2023/09/image.jpeg" alt="" | |
class="wp-image-33"> | |
<figcaption class="wp-element-caption">“<a | |
href="https://www.rawpixel.com/image/8732279/photo-image-face-public-domain-animal" target="_blank" | |
rel="noreferrer noopener">Portrait of a bull bison</a>” by National Park Service/ <a | |
href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse" target="_blank" | |
rel="noreferrer noopener">CC0 1.0</a></figcaption> | |
</figure> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
First image was uploaded to the media library. The medium resolution was selected, which is 300x300 by default in WordPress.
Second image was inserted via Openverse.