westonruter

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"25%"} -->
    <div class="wp-block-column" style="flex-basis:25%"><!-- wp:image {"id":112,"sizeSlug":"full","linkDestination":"none"} -->
        <figure class="wp-block-image size-full"><img src="http://example.org/wp-content/uploads/2023/09/image.jpeg" alt="" class="wp-image-112"/><figcaption class="wp-element-caption">"<a href="https://www.flickr.com/photos/136485307@N06/21912132615" target="_blank" rel="noreferrer noopener">AS17-152-23275</a>" by <a href="https://www.flickr.com/photos/136485307@N06" target="_blank" rel="noreferrer noopener">Apollo Image Gallery</a>/ <a href="https://creativecommons.org/publicdomain/mark/1.0/?ref=openverse" target="_blank" rel="noreferrer noopener">pdm 1.0</a></figcaption></figure>
        <!-- /wp:image --></div>
    <!-- /wp:column -->

    <!-- wp:column {"width":"50%"} -->
    <div class="wp-block-column" style="flex-basis:50%"><!-- wp:image {"id":115,"sizeSlug":"large","linkDestination":"none"}

westonruter

<!-- wp:media-text {"mediaId":112,"mediaType":"image","mediaWidth":32} -->
<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:32% auto"><figure class="wp-block-media-text__media"><img src="http://example.org/wp-content/uploads/2023/09/image.jpeg" alt="" class="wp-image-112 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
    <p>The moon is coming into view!</p>
    <!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:image {"id":115,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://example.org/wp-content/uploads/2023/09/image-3-1024x1024.jpeg" alt="" class="wp-image-115"/><figcaption class="wp-element-caption">"<a href="https://www.rawpixel.com/image/8718239/photo-image-moon-space-planet" target="_blank" rel="noreferrer noopener">Taken by Apollo 8 crewmember</a>"/ <a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse" target

westonruter

<?php
/**
 * Plugin Name: Insert Random Initial Image With the_content Filter
 */

add_filter(
	'the_content',
	static function ( string $content ): string {
		$content = '<p><img src="https://source.unsplash.com/featured/1600x900" style="max-width:100%; height:auto" width="1600" height="900"></p>' . $content;
		return $content;

westonruter

<?php
/**
 * Inline Image Size Fix Plugin for WordPress.
 *
 * @package   InlineImageSizeFix
 * @author    Weston Ruter, Google
 * @license   GPL-2.0-or-later
 * @copyright 2023 Google Inc.
 *
 * @wordpress-plugin

westonruter

<?php
/**
 * Optimize Content Hero Image WordPress Plugin.
 *
 * @package   OptimizeContentHeroImage
 * @author    Weston Ruter, Google
 * @license   GPL-2.0-or-later
 * @copyright 2023 Google Inc.
 *
 * @wordpress-plugin

westonruter

<!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"layout":{"type":"default"}} -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":112,"sizeSlug":"thumbnail"} -->
<figure class="wp-block-image aligncenter size-thumbnail"><img src="http://localhost:8889/wp-content/uploads/2023/09/image-150x150.jpeg" alt="" class="wp-image-112"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":113,"sizeSlug":"thumbnail"} -->
<figure class="wp-block-image aligncenter size-thumbnail"><img src="http://localhost:8889/wp-content/uploads/2023/09/image-1-150x150.jpeg" alt="" class="wp-image-113"/></figure>

westonruter

<?php
/**
 * Benchmark Web Vitals for Themes with Script Loading Strategies.
 *
 * USAGE:
 * 1. Place this script is in the root of the WordPress/wordpress-develop Git repo; make sure environment is started.
 * 2. Fetch the trac-59316 branch from https://github.com/WordPress/wordpress-develop/pull/5170.
 * 3. Clone the GoogleChromeLabs/wpp-research repo, for example at ../wpp-research and run `npm install`.
 * 4. Make sure that each theme has been configured, including the Showcase page for Twenty Eleven.
 * 5. Then to invoke this script, do: WPP_RESEARCH_DIR=../wpp-research php benchmark-theme-web-vitals.php

westonruter

<!-- 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/G

westonruter

<?php
/**
 * Strict CSP Plugin for WordPress 6.4-alpha.
 *
 * @package   StrictCSP
 * @author    Weston Ruter, Google
 * @license   GPL-2.0-or-later
 * @copyright 2023 Google Inc.
 *
 * @wordpress-plugin

westonruter

<?php
/**
 * Plugin Name: Disable Cache-Control: no-store when remembering
 * Author: Weston Ruter
 * Plugin URI: https://gist.github.com/westonruter/8c19d87a80a36e8f24db910750162628
 * Update URI: https://gist.github.com/westonruter/8c19d87a80a36e8f24db910750162628
 */

add_filter(
	'nocache_headers',