From 0f5564fda685a45bd9ae7206fdc55110087506d7 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:30:18 +0200
Subject: [PATCH 01/28] Add experimental-modules build flag

---
 .../themes/wporg-developer-2023/package.json           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/package.json b/source/wp-content/themes/wporg-developer-2023/package.json
index 1f610cfa0..e5354e0f2 100644
--- a/source/wp-content/themes/wporg-developer-2023/package.json
+++ b/source/wp-content/themes/wporg-developer-2023/package.json
@@ -1,7 +1,7 @@
 {
-    "name": "wporg-developer-2023",
-    "version": "1.0.0",
-    "description": "Theme for WordPress Developer Resources",
+	"name": "wporg-developer-2023",
+	"version": "1.0.0",
+	"description": "Theme for WordPress Developer Resources",
 	"author": "WordPress.org",
 	"license": "GPL-2.0-or-later",
 	"private": true,
@@ -16,8 +16,8 @@
 		"extends": "../../../../.stylelintrc"
 	},
 	"scripts": {
-		"build": "wp-scripts build",
-		"start": "wp-scripts start",
+		"build": "wp-scripts build --experimental-modules",
+		"start": "wp-scripts start --experimental-modules",
 		"lint:js": "wp-scripts lint-js src",
 		"lint:css": "wp-scripts lint-style *.css src/**/*.scss",
 		"format": "wp-scripts format src"

From b7b195b95f4be438f1dc3fc47b77de4b25913fb5 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:12:12 +0200
Subject: [PATCH 02/28] Try making a block

---
 .../themes/wporg-developer-2023/functions.php |   1 +
 .../src/dashicons-page/block.json             |  19 ++
 .../src/dashicons-page/index.php              |  24 ++
 .../src/dashicons-page/render.php             | 216 ++++++++++++++++++
 .../src/dashicons-page/view.js                |  10 +
 .../templates/page-dashicons.html             |   4 +-
 6 files changed, 271 insertions(+), 3 deletions(-)
 create mode 100644 source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json
 create mode 100644 source/wp-content/themes/wporg-developer-2023/src/dashicons-page/index.php
 create mode 100644 source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
 create mode 100644 source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js

diff --git a/source/wp-content/themes/wporg-developer-2023/functions.php b/source/wp-content/themes/wporg-developer-2023/functions.php
index 0472684d4..a27c7b7e7 100644
--- a/source/wp-content/themes/wporg-developer-2023/functions.php
+++ b/source/wp-content/themes/wporg-developer-2023/functions.php
@@ -182,6 +182,7 @@
 require_once __DIR__ . '/src/search-filters/index.php';
 require_once __DIR__ . '/src/search-post/index.php';
 require_once __DIR__ . '/src/search-results-context/index.php';
+require_once __DIR__ . '/src/dashicons-page/index.php';
 
 add_action( 'init', __NAMESPACE__ . '\\init' );
 add_filter( 'wporg_block_site_breadcrumbs', __NAMESPACE__ . '\set_site_breadcrumbs' );
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json
new file mode 100644
index 000000000..504a60188
--- /dev/null
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json
@@ -0,0 +1,19 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/dashicons-page",
+	"title": "Dashicons page",
+	"category": "widgets",
+	"description": "Dashicons page block",
+	"keywords": [],
+	"textdomain": "wporg",
+	"attributes": {},
+	"supports": {
+		"inserter": false,
+		"interactivity": true
+	},
+	"allowedBlocks": [ "wporg/notice" ],
+	"style": "file:../../stylesheets/page-dashicons.css",
+	"render": "file:./render.php",
+	"viewScriptModule": "file:./view.js"
+}
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/index.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/index.php
new file mode 100644
index 000000000..ab5ee7496
--- /dev/null
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/index.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * Block Name: Dashicons Page
+ * Description: Dashicons page block.
+ *
+ * @package wporg
+ */
+
+namespace WordPressdotorg\Theme\Developer_2023\Dashicons_Page;
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function init() {
+	register_block_type(
+		dirname( dirname( __DIR__ ) ) . '/build/dashicons-page/block.json'
+	);
+}
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
new file mode 100644
index 000000000..d3d315ef9
--- /dev/null
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -0,0 +1,216 @@
+<?php
+
+namespace WordPressdotorg\Theme\Developer_2023;
+
+require_once dirname( dirname( __DIR__ ) ) . '/inc/dashicons.php';
+
+
+$icons_sections = array();
+foreach ( \DevHub_Dashicons::get_dashicons() as $section ) {
+	$icons = array();
+	foreach ( $section['icons'] as $k => $v ) {
+		$v['slug'] = $k;
+		$icons[] = $v;
+	}
+	$icons_sections[] = array(
+		'label' => $section['label'],
+		'icons' => $icons,
+	);
+}
+
+$selected_icon = array_rand( array_merge( ...$icons_sections ) );
+
+wp_interactivity_state(
+	'@wporg-developer-2023/dashicons',
+	array()
+);
+
+$interactivity_context = array(
+	'iconsSections' => $icons_sections,
+	'selectedIcon' => $selected_icon,
+);
+
+
+?>
+
+<div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="@wporg-developer-2023/dashicons"
+				<?php echo wp_interactivity_data_wp_context( $interactivity_context ); ?>>
+				<?php while ( have_posts() ) :
+					the_post(); ?>
+				<main id="main" <?php post_class( 'site-main' ); ?> role="main">
+
+<!-- wp:wporg/notice {"type":"alert"} -->
+<div class="wp-block-wporg-notice is-alert-notice">
+<div class="wp-block-wporg-notice__icon"></div>
+<div class="wp-block-wporg-notice__content"><p><?php
+echo __( 'The Dashicons project is no longer accepting icon requests. Here’s why:&nbsp;<a href="https://make.wordpress.org/design/2020/04/20/next-steps-for-dashicons/">Next steps for Dashicons</a>.', 'wporg' );
+?></p></div>
+</div>
+<!-- /wp:wporg/notice -->
+					
+					<div class="details clear">
+						<div id="glyph"></div>
+						<div class="entry-content">
+							<?php the_content(); ?>
+						</div><!-- .entry-content -->
+						<div class="icon-filter">
+							<input placeholder="<?php esc_attr_e( 'Filter&hellip;', 'wporg' ); ?>" name="search" id="search" type="text" value="" maxlength="150">
+						</div>
+					</div>
+					<div id="icons">
+						<div id="iconlist">
+							<template
+								data-wp-each--section="context.iconsSections"
+								data-wp-each-key="context.section.label"
+							>
+								<h4>
+									<span data-wp-text="context.section.label"></span>
+									<a data-wp-bind-href="" class="anchor"><span aria-hidden="true">#</span><span class="screen-reader-text" data-wp-text="context.section.label"></span></a>
+								</h4>
+								<ul>
+									<template
+										data-wp-each--icon="context.section.icons"
+										data-wp-each-key="context.icon.slug"
+									>
+										<li data-wp-bind--data-keywords="context.icon.keywords" data-wp-bind--data-code="context.icon.code" data-wp-bind--class="state.iconClass">
+											<span data-wp-text="context.icon.label"></span>
+										</li>
+									</template>
+								</ul>
+							</template>
+						</div>
+					</div>
+		
+					<div id="instructions">
+		
+						<h3><?php _e( 'WordPress Usage', 'wporg' ); ?></h3>
+		
+						<p>
+						<?php  printf(
+							__( 'Admin menu items can be added with <code><a href="%1$s">register_post_type()</a></code> and <code><a href="%2$s">add_menu_page()</a></code>, which both have an option to set an icon. To show the current icon, you should pass in %3$s.', 'wporg' ),
+							'https://developer.wordpress.org/reference/functions/register_post_type/',
+							'https://developer.wordpress.org/reference/functions/add_menu_page/',
+							'<code>\'dashicons-<span id="wp-class-example">{icon}</span>\'</code>'
+						); ?></p>
+		
+						<h4><?php _e( 'Examples', 'wporg' ); ?></h4>
+		
+						<p>
+						<?php printf(
+							__( 'In <code><a href="%s">register_post_type()</a></code>, set <code>menu_icon</code> in the arguments array.', 'wporg' ),
+							'https://developer.wordpress.org/reference/functions/register_post_type/'
+						); ?></p>
+		
+<pre>&lt;?php
+/**
+* Register the Product post type with a Dashicon.
+*
+* @see register_post_type()
+*/
+function wpdocs_create_post_type() {
+	register_post_type( 'acme_product',
+		array(
+			'labels' => array(
+				'name'          => __( 'Products', 'textdomain' ),
+				'singular_name' => __( 'Product', 'textdomain' )
+			),
+			'public'      => true,
+			'has_archive' => true,
+			'menu_icon'   => 'dashicons-products',
+		)
+	);
+}
+add_action( 'init', 'wpdocs_create_post_type', 0 );
+</pre>
+				<p>
+				<?php printf(
+					__( 'The function <code><a href="%s">add_menu_page()</a></code> accepts a parameter after the callback function for an icon URL, which can also accept a dashicons class.', 'wporg' ),
+					'https://developer.wordpress.org/reference/functions/add_menu_page/'
+				); ?></p>
+<pre>&lt;?php
+/**
+* Register a menu page with a Dashicon.
+*
+* @see add_menu_page()
+*/
+function wpdocs_add_my_custom_menu() {
+	// Add an item to the menu.
+	add_menu_page(
+		__( 'My Page', 'textdomain' ),
+		__( 'My Title', 'textdomain' ),
+		'manage_options',
+		'my-page',
+		'my_admin_page_function',
+		'dashicons-admin-media'
+	);
+}</pre>
+				<h3><?php _e( 'CSS/HTML Usage', 'wporg' ); ?></h3>
+				<p><?php _e( "If you want to use dashicons in the admin outside of the menu, there are two helper classes you can use. These are <code>dashicons-before</code> and <code>dashicons</code>, and they can be thought of as setting up dashicons (since you still need your icon's class, too).", 'wporg' ); ?></p>
+				<h4><?php _e( 'Examples', 'wporg' ); ?></h4>
+				<p><?php _e( 'Adding an icon to a header, with the <code>dashicons-before</code> class. This can be added right to the element with text.', 'wporg' ); ?></p>
+<pre>
+&lt;h2 class="dashicons-before dashicons-smiley"&gt;<?php _e( 'A Cheerful Headline', 'wporg' ); ?>&lt;/h2&gt;
+</pre>
+				<p><?php _e( 'Adding an icon to a header, with the <code>dashicons</code> class. Note that here, you need extra markup specifically for the icon.', 'wporg' ); ?></p>
+<pre>
+&lt;h2&gt;&lt;span class="dashicons dashicons-smiley"&gt;&lt;/span&gt; <?php _e( 'A Cheerful Headline', 'wporg' ); ?>&lt;/h2&gt;
+</pre>
+				<h3><?php _e( 'Block Usage', 'wporg' ); ?></h3>
+				<p><?php _e( 'The block editor supports use of dashicons as block icons and as its own component.', 'wporg' ); ?></p>
+				<h4><?php _e( 'Examples', 'wporg' ); ?></h4>
+				<p>
+				<?php printf(
+					/* translators: %s: URL to Block Editor Handbook for registering a block. */
+					__( 'Adding an icon to a block. The <code>registerBlockType</code> function accepts a parameter "icon" which accepts the name of a dashicon. The provided example is truncated. See the <a href="%s">full example</a> in the Block Editor Handbook.', 'wporg' ),
+					'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/#registering-the-block'
+				); ?></p>
+<pre>
+registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
+	apiVersion: 2,
+	title: 'Example: Basic (esnext)',
+	icon: 'universal-access-alt',
+	category: 'design',
+	example: {},
+	edit() {},
+	save() {},
+} );
+</pre>
+				<p>
+				<?php printf(
+					/* translators: %s: URL to handbook page for Dashicon component. */
+					__( 'Using an icon as a component. A dedicated <code>Dashicon</code> component is available. See the <a href="%s">related documentation</a> in the Block Editor Handbook.', 'wporg' ),
+					'https://developer.wordpress.org/block-editor/reference-guides/components/dashicon/'
+				); ?></p>
+<pre>
+import { Dashicon } from '@wordpress/components';
+
+const MyDashicon = () =&gt; (
+	&lt;div&gt;
+		&lt;Dashicon icon="admin-home" /&gt;
+		&lt;Dashicon icon="products" /&gt;
+		&lt;Dashicon icon="wordpress" /&gt;
+	&lt;/div&gt;
+);
+</pre>
+			<h3><?php _e( 'Photoshop Usage', 'wporg' ); ?></h3>
+			<p><?php _e( 'Use the .OTF version of the font for Photoshop mockups, the web-font versions won\'t work. For most accurate results, pick the "Sharp" font smoothing.', 'wporg' ); ?></p>
+		</div><!-- /#instructions -->
+	</main><!-- #main -->
+	<!-- Required for the Copy Glyph functionality -->
+	<div id="temp" style="display:none;"></div>
+	<!--
+	<script type="text/html" id="tmpl-glyphs">
+		<div class="dashicons {{data.cssClass}}"></div>
+		<div class="info">
+			<span><strong>{{data.sectionName}}</strong></span>
+			<span class="name"><code>{{data.cssClass}}</code></span>
+			<span class="charCode"><code>{{data.charCode}}</code></span>
+			<span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'><?php _e( 'Copy CSS', 'wporg' ); ?></a></span>
+			<span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )"><?php _e( 'Copy HTML', 'wporg' ); ?></a></span>
+			<span class="link"><a href="javascript:dashicons.copy( '{{data.glyph}}' )"><?php _e( 'Copy Glyph', 'wporg' ); ?></a></span>
+		</div>
+	</script>
+	-->
+	<?php endwhile; // end of the loop. ?>
+</div><!-- #primary -->
+
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
new file mode 100644
index 000000000..ae49b0974
--- /dev/null
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -0,0 +1,10 @@
+import * as IAPI from '@wordpress/interactivity';
+
+const { state } = IAPI.store( '@wporg-developer-2023/dashicons', {
+	state: {
+		get iconClass() {
+			return `dashicons ${ IAPI.getContext().icon.slug }`;
+		},
+	},
+	actions: {},
+} );
diff --git a/source/wp-content/themes/wporg-developer-2023/templates/page-dashicons.html b/source/wp-content/themes/wporg-developer-2023/templates/page-dashicons.html
index b10c28755..440bfd6c1 100644
--- a/source/wp-content/themes/wporg-developer-2023/templates/page-dashicons.html
+++ b/source/wp-content/themes/wporg-developer-2023/templates/page-dashicons.html
@@ -3,9 +3,7 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"left":"var:preset|spacing|edge-space","right":"var:preset|spacing|edge-space"}}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
 	<div class="wp-block-group alignwide">
-		<!-- wp:shortcode -->
-		[dashicons_page]
-		<!-- /wp:shortcode -->
+		<!-- wp:wporg/dashicons-page /-->
 	</div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->

From 7092fe9ac916c12ca1efb4fdcc2c89711fe720af Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:18:27 +0200
Subject: [PATCH 03/28] PICKME: Upgrade @wordpress/scripts

---
 package.json                                  |   2 +-
 .../themes/wporg-developer-2023/package.json  |   2 +-
 yarn.lock                                     | 344 +++++++++---------
 3 files changed, 178 insertions(+), 170 deletions(-)

diff --git a/package.json b/package.json
index ceeb4fb74..751204523 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
 	"license": "GPL-2.0-or-later",
 	"private": true,
 	"dependencies": {
-		"@wordpress/scripts": "27.1.0"
+		"@wordpress/scripts": "28.3.0"
 	},
 	"devDependencies": {
 		"@wordpress/env": "9.2.0"
diff --git a/source/wp-content/themes/wporg-developer-2023/package.json b/source/wp-content/themes/wporg-developer-2023/package.json
index e5354e0f2..0ae76e8fc 100644
--- a/source/wp-content/themes/wporg-developer-2023/package.json
+++ b/source/wp-content/themes/wporg-developer-2023/package.json
@@ -7,7 +7,7 @@
 	"private": true,
 	"devDependencies": {
 		"@wordpress/eslint-plugin": "^17.7.0",
-		"@wordpress/scripts": "27.1.0"
+		"@wordpress/scripts": "28.3.0"
 	},
 	"eslintConfig": {
 		"extends": "../../../../.eslintrc.js"
diff --git a/yarn.lock b/yarn.lock
index 6daf5eb80..5206ec65d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2543,31 +2543,6 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@tannin/compile@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@tannin/compile/-/compile-1.1.0.tgz#1e4d1c5364cbfeffa1c20352c053e19ef20ffe93"
-  integrity sha512-n8m9eNDfoNZoxdvWiTfW/hSPhehzLJ3zW7f8E7oT6mCROoMNWCB4TYtv041+2FMAxweiE0j7i1jubQU4MEC/Gg==
-  dependencies:
-    "@tannin/evaluate" "^1.2.0"
-    "@tannin/postfix" "^1.1.0"
-
-"@tannin/evaluate@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@tannin/evaluate/-/evaluate-1.2.0.tgz#468a13c45eff45340108836fc46c708457199c3f"
-  integrity sha512-3ioXvNowbO/wSrxsDG5DKIMxC81P0QrQTYai8zFNY+umuoHWRPbQ/TuuDEOju9E+jQDXmj6yI5GyejNuh8I+eg==
-
-"@tannin/plural-forms@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@tannin/plural-forms/-/plural-forms-1.1.0.tgz#cffbb060d2640a56a314e3c77cbf6ea6072b51d5"
-  integrity sha512-xl9R2mDZO/qiHam1AgMnAES6IKIg7OBhcXqy6eDsRCdXuxAFPcjrej9HMjyCLE0DJ/8cHf0i5OQTstuBRhpbHw==
-  dependencies:
-    "@tannin/compile" "^1.1.0"
-
-"@tannin/postfix@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@tannin/postfix/-/postfix-1.1.0.tgz#6071f4204ae26c2e885cf3a3f1203a9f71e3f291"
-  integrity sha512-oocsqY7g0cR+Gur5jRQLSrX2OtpMLMse1I10JQBm8CdGMrDkh1Mg2gjsiquMHRtBs4Qwu5wgEp5GgIYHk4SNPw==
-
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -3232,15 +3207,6 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.5.tgz#325db42395cd49fe6c14057f9a900e427df8810e"
   integrity sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==
 
-"@wordpress/api-fetch@^6.47.0":
-  version "6.47.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/api-fetch/-/api-fetch-6.47.0.tgz#b074f2668121670ed6f7042ab2af6522e727e525"
-  integrity sha512-NA/jWDXoVtJmiVBYhlxts2UrgKJpJM+zTGzLCfRQCZUzpJYm3LonB8x+uCQ78nEyxCY397Esod3jnbquYjOr0Q==
-  dependencies:
-    "@babel/runtime" "^7.16.0"
-    "@wordpress/i18n" "^4.50.0"
-    "@wordpress/url" "^3.51.0"
-
 "@wordpress/babel-plugin-import-jsx-pragma@^4.33.0":
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/@wordpress/babel-plugin-import-jsx-pragma/-/babel-plugin-import-jsx-pragma-4.33.0.tgz#594cd6f1c52a6766036374cd873afb75401ff182"
@@ -3264,37 +3230,56 @@
     core-js "^3.31.0"
     react "^18.2.0"
 
-"@wordpress/base-styles@^4.41.0":
-  version "4.41.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/base-styles/-/base-styles-4.41.0.tgz#8867ba50a72243f77acb96de89f32a13ff8bc222"
-  integrity sha512-MjPAZeAqvyskDXDp2wGZ0DjtYOQLOydI1WqVIZS4wnIdhsQWQD//VMeXgLrcmCzNyQg+iKTx3o+BzmXVTOD0+w==
+"@wordpress/babel-preset-default@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/babel-preset-default/-/babel-preset-default-8.3.0.tgz#9912484c85b2fb7fec7deb98b4a738515ab0d46d"
+  integrity sha512-lLPZuKdJF6CLS/YUv7c2OkGhplEpKZBQ4YiCQUdbhg8joFZH12QICUxtT2kvoUxLQ22zwLtNMPYTzISClE8zSw==
+  dependencies:
+    "@babel/core" "^7.16.0"
+    "@babel/plugin-transform-react-jsx" "^7.16.0"
+    "@babel/plugin-transform-runtime" "^7.16.0"
+    "@babel/preset-env" "^7.16.0"
+    "@babel/preset-typescript" "^7.16.0"
+    "@babel/runtime" "^7.16.0"
+    "@wordpress/browserslist-config" "^6.3.0"
+    "@wordpress/warning" "^3.3.0"
+    browserslist "^4.21.10"
+    core-js "^3.31.0"
+    react "^18.3.0"
+
+"@wordpress/base-styles@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/base-styles/-/base-styles-5.3.0.tgz#11023c7607ae11dcaa4c80f139793ef6b948ed8f"
+  integrity sha512-2Azr6XLCejtEzxhTv71x1VS30D5k0xL91CGRL1PTlnBRe/3Ki09hvz45kr52BI6YWnKtDUvCBw1USiGB9UJhgw==
 
 "@wordpress/browserslist-config@^5.33.0":
   version "5.33.0"
   resolved "https://registry.yarnpkg.com/@wordpress/browserslist-config/-/browserslist-config-5.33.0.tgz#2c0a49d0749976d876a671eec9e6b547f838ed31"
   integrity sha512-dv1ZlpqGk8gaSBJPP/Z/1uOuxjtP0EBsHVKInLRu6FWLTJkK8rnCeC3xJT3/2TtJ0rasLC79RoytfhXTOODVwg==
 
-"@wordpress/dependency-extraction-webpack-plugin@^5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/dependency-extraction-webpack-plugin/-/dependency-extraction-webpack-plugin-5.1.0.tgz#328586558375a96d2c7ff5e536ec7fcce1e13c16"
-  integrity sha512-W2W+9JNAaGirAtGDSf83pjEKb63DLhgpJGgvMOpEPoRPtucgO6CCm3uMoNkJTpKoxJQ2tSZEymAhF/YdLm+ScQ==
+"@wordpress/browserslist-config@^6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/browserslist-config/-/browserslist-config-6.3.0.tgz#693f436f87a4035a5cbd70b71ee916b352f47ade"
+  integrity sha512-DDz/Iiax7RQR7cuTdv1ZlAfPgCDijiszg9xE9c2lO/2Hvv7voP/sLKQhdr/mSUzNW9ZXK7/NVIYAXxFd3Eee2A==
+
+"@wordpress/dependency-extraction-webpack-plugin@^6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/dependency-extraction-webpack-plugin/-/dependency-extraction-webpack-plugin-6.3.0.tgz#2ed151bec641702b2e71e01441068d4a12f8a126"
+  integrity sha512-m7ELFLFVVR8BSEwRaxeKzvldLttIKjbdgRC9lLmCOrbcrpruKr9x6SF1FPCravb3DUfdVVg/RhuGqTMLXSv4Vw==
   dependencies:
     json2php "^0.0.7"
 
-"@wordpress/e2e-test-utils-playwright@^0.18.0":
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/e2e-test-utils-playwright/-/e2e-test-utils-playwright-0.18.0.tgz#7de7aba6e682e79998eb72aa2f6b40f9988a7115"
-  integrity sha512-Z8uH1dUzy/STQjOU6eb9nquVK4RC1rUx0gXY/GN1IVNDJvGN/yJxT/gNKmfiL7KpmHvNp2Q5M4bnUT9uiNcM+Q==
+"@wordpress/e2e-test-utils-playwright@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/e2e-test-utils-playwright/-/e2e-test-utils-playwright-1.3.0.tgz#7f8c5c90dc0e6721ac133a9c7560d1b23c546e24"
+  integrity sha512-QiOLaqxstekAgfC/s0m9yl9ZNw5UXatqGOAY6i6PqJjuwfk1Xkvb5arGyJ6B0dd8puhNweuCv102l3WduWaFYw==
   dependencies:
-    "@wordpress/api-fetch" "^6.47.0"
-    "@wordpress/keycodes" "^3.50.0"
-    "@wordpress/url" "^3.51.0"
     change-case "^4.1.2"
     form-data "^4.0.0"
     get-port "^5.1.1"
     lighthouse "^10.4.0"
     mime "^3.0.0"
-    web-vitals "^3.5.0"
+    web-vitals "^4.2.1"
 
 "@wordpress/env@9.2.0":
   version "9.2.0"
@@ -3337,60 +3322,56 @@
     globals "^13.12.0"
     requireindex "^1.2.0"
 
-"@wordpress/hooks@^3.50.0":
-  version "3.50.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/hooks/-/hooks-3.50.0.tgz#4f6587859b7b69587044da015baf6f1169dc31f7"
-  integrity sha512-YIhwT1y0ss7Byfz46NBx08EUmXzWMu+g5DCY7FMuDNhwxSEoZMB8edKMiwNmFk4mFKBCnXM1d5FeONUPIUkJwg==
-  dependencies:
-    "@babel/runtime" "^7.16.0"
-
-"@wordpress/i18n@^4.50.0":
-  version "4.50.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/i18n/-/i18n-4.50.0.tgz#f66ae6054dbf2b97424e44196ffdeca43558bf66"
-  integrity sha512-FkA2se6HMQm4eFC+/kTWvWQqs51VxpZuvY2MlWUp/L1r1d/dMBHXu049x86+/+6yk3ZNqiK5h6j6Z76dvPHZ4w==
+"@wordpress/eslint-plugin@^20.0.0":
+  version "20.0.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/eslint-plugin/-/eslint-plugin-20.0.0.tgz#76d6b584bdc7c3bd3fbb212e2f92552c9cbc0b8a"
+  integrity sha512-rOzkWHX6xjTt7Gmhe/nwlcgQJe4O6bCXkCJKcL+iyBhYABVjCnzneDiVh4bM1cNmL8zUx6/f1ADjmb3Xz9vG0g==
   dependencies:
-    "@babel/runtime" "^7.16.0"
-    "@wordpress/hooks" "^3.50.0"
-    gettext-parser "^1.3.1"
-    memize "^2.1.0"
-    sprintf-js "^1.1.1"
-    tannin "^1.2.0"
+    "@babel/eslint-parser" "^7.16.0"
+    "@typescript-eslint/eslint-plugin" "^6.4.1"
+    "@typescript-eslint/parser" "^6.4.1"
+    "@wordpress/babel-preset-default" "^8.3.0"
+    "@wordpress/prettier-config" "^4.3.0"
+    cosmiconfig "^7.0.0"
+    eslint-config-prettier "^8.3.0"
+    eslint-plugin-import "^2.25.2"
+    eslint-plugin-jest "^27.2.3"
+    eslint-plugin-jsdoc "^46.4.6"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-playwright "^0.15.3"
+    eslint-plugin-prettier "^5.0.0"
+    eslint-plugin-react "^7.27.0"
+    eslint-plugin-react-hooks "^4.3.0"
+    globals "^13.12.0"
+    requireindex "^1.2.0"
 
-"@wordpress/jest-console@^7.21.0":
-  version "7.21.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/jest-console/-/jest-console-7.21.0.tgz#b9fff909c0b93f201adb38dddc49c96949f2c931"
-  integrity sha512-o2vZRlwwJ6WoxRwnFFT5iZzfdc2d9MZvrtwB093RWPNcyK5qVtApji4VN/ieHijB4bjEHGalm0UKfKpt0EDlUQ==
+"@wordpress/jest-console@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/jest-console/-/jest-console-8.3.0.tgz#0525dfbbbf590c808d7bd8f5e1d459c55d1d060d"
+  integrity sha512-aPVdS1V5YLlqhc00458qmc1TujhDbi6WDoT9m63aOuRGcmb223DNuKEkI77p0RV3F7QB39dBqa466mOUbKaX2w==
   dependencies:
     "@babel/runtime" "^7.16.0"
     jest-matcher-utils "^29.6.2"
 
-"@wordpress/jest-preset-default@^11.21.0":
-  version "11.21.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/jest-preset-default/-/jest-preset-default-11.21.0.tgz#9572b62a94097947318073b17080e2081b485607"
-  integrity sha512-XAztKOROu02iBsz+Qosv/RYuPWB1XwwlU+FiA5Y68tRztrqFy4b/il+DFg4Jue/zXF7UECWUvosd5ow/GmKa6Q==
+"@wordpress/jest-preset-default@^12.3.0":
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/jest-preset-default/-/jest-preset-default-12.3.0.tgz#bbe859b02331ee9f47dd6340f3a80384b7acefcb"
+  integrity sha512-xYXndYJFr9QDsO3fTl5JUXJs80Xq/fxLiOa4zlrrXmWy3L/7+uPik9Jgy0KZOu4FqiYp5wJFX6Arp9dzqH3Xug==
   dependencies:
-    "@wordpress/jest-console" "^7.21.0"
+    "@wordpress/jest-console" "^8.3.0"
     babel-jest "^29.6.2"
 
-"@wordpress/keycodes@^3.50.0":
-  version "3.50.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/keycodes/-/keycodes-3.50.0.tgz#1c8843ba08f2b6f5d31c3e04bcb61aa4eb5f598a"
-  integrity sha512-ykWpyCbgwcaT8i5kSfotYtd2oOHyMDpWEYR73InYrzEhl7pnS3wD7hi/KfeKLvMfYhbysUXlCVr6q/oH+qK/DQ==
-  dependencies:
-    "@babel/runtime" "^7.16.0"
-    "@wordpress/i18n" "^4.50.0"
-
-"@wordpress/npm-package-json-lint-config@^4.35.0":
-  version "4.35.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/npm-package-json-lint-config/-/npm-package-json-lint-config-4.35.0.tgz#a3fd8eeb8edc5fbdc7b10f86e0b12f4bfccbff08"
-  integrity sha512-QmkhYM4/s+2r3RuolVRRmoUa5o3lFgcHA6I3A9akaSVGZr//4p2p+iXOGmNub9njgGlj7j8SAPN8GUsCO/VqZQ==
+"@wordpress/npm-package-json-lint-config@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/npm-package-json-lint-config/-/npm-package-json-lint-config-5.3.0.tgz#1b9da08a8ef086762639ad10589c5b316118f017"
+  integrity sha512-a/y7Y5qutUtmVX89/VuZcO33deIFj96dZWFT43kdzuYPns1O2jIV1jt3dts8VNcykZG6KyQATQGa6M7Sbj1UAQ==
 
-"@wordpress/postcss-plugins-preset@^4.34.0":
-  version "4.34.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/postcss-plugins-preset/-/postcss-plugins-preset-4.34.0.tgz#f83d780a49674a330306e527d0e85e641e9b55d4"
-  integrity sha512-OLQBSLE2q11Ik+WdcO2QfGr/O4X/zJYOGXNsychx/EaMamLzJInFcRL6kGbPX41zPINhadq5x2vFIZI2EC+Uyg==
+"@wordpress/postcss-plugins-preset@^5.3.0":
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/postcss-plugins-preset/-/postcss-plugins-preset-5.3.0.tgz#aa3583eac6d78c9c31722d63601b1ad3635a0f6a"
+  integrity sha512-LzTcAlnjNJKncu9e1BwlnUrW04+WIl+KH1bqJK+FF5WTsVrCAvhvhoYS1WX06oHrpofBPyGovw5hwB2ZqSHv+Q==
   dependencies:
-    "@wordpress/base-styles" "^4.41.0"
+    "@wordpress/base-styles" "^5.3.0"
     autoprefixer "^10.2.5"
 
 "@wordpress/prettier-config@^3.7.0":
@@ -3398,24 +3379,29 @@
   resolved "https://registry.yarnpkg.com/@wordpress/prettier-config/-/prettier-config-3.7.0.tgz#d477395314b541f25364b26b4b9407fef2c419da"
   integrity sha512-JRTc5p7UxtcPkqdSDXSFJoJnVuS510uiRVz8anXEl5nuOx5p+SJAzi9QPrxTgOE8bN3wRABH4eIhfOcta4CFdg==
 
-"@wordpress/scripts@27.1.0":
-  version "27.1.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/scripts/-/scripts-27.1.0.tgz#12bdb23cfcc75f629603fa4d944b7939dd146211"
-  integrity sha512-jewyOxqaNrsct5R1NXv2lT8CA70vzrvpdZHYERCcH9LzKuvrcc32Telm9Jqso6ay1ZgHeIbjHSCd2+r2sBG7hw==
+"@wordpress/prettier-config@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/prettier-config/-/prettier-config-4.3.0.tgz#7c13e8fddb512ce37849d67dcec0e510111e884e"
+  integrity sha512-2OWp2g/e0y2iKh1LZvc+f0pxesI5NYBQSgnJkaXHt6ktc7QaBX3nwYcZQ030TBMxl2hnNclLAPUR85UMSRx0dw==
+
+"@wordpress/scripts@28.3.0":
+  version "28.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/scripts/-/scripts-28.3.0.tgz#c42f5a801858b5a064d25165453b62be65c6d64c"
+  integrity sha512-NoxWYammghicxaU+7glao64KxS6SRdU2fa01dKqhy1UEkNH2TH6spgK4TA14Dpsbudaf5N362dO2n7UZBe/Euw==
   dependencies:
     "@babel/core" "^7.16.0"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.5.11"
     "@svgr/webpack" "^8.0.1"
-    "@wordpress/babel-preset-default" "^7.34.0"
-    "@wordpress/browserslist-config" "^5.33.0"
-    "@wordpress/dependency-extraction-webpack-plugin" "^5.1.0"
-    "@wordpress/e2e-test-utils-playwright" "^0.18.0"
-    "@wordpress/eslint-plugin" "^17.7.0"
-    "@wordpress/jest-preset-default" "^11.21.0"
-    "@wordpress/npm-package-json-lint-config" "^4.35.0"
-    "@wordpress/postcss-plugins-preset" "^4.34.0"
-    "@wordpress/prettier-config" "^3.7.0"
-    "@wordpress/stylelint-config" "^21.33.0"
+    "@wordpress/babel-preset-default" "^8.3.0"
+    "@wordpress/browserslist-config" "^6.3.0"
+    "@wordpress/dependency-extraction-webpack-plugin" "^6.3.0"
+    "@wordpress/e2e-test-utils-playwright" "^1.3.0"
+    "@wordpress/eslint-plugin" "^20.0.0"
+    "@wordpress/jest-preset-default" "^12.3.0"
+    "@wordpress/npm-package-json-lint-config" "^5.3.0"
+    "@wordpress/postcss-plugins-preset" "^5.3.0"
+    "@wordpress/prettier-config" "^4.3.0"
+    "@wordpress/stylelint-config" "^22.3.0"
     adm-zip "^0.5.9"
     babel-jest "^29.6.2"
     babel-loader "^8.2.3"
@@ -3443,7 +3429,6 @@
     minimist "^1.2.0"
     npm-package-json-lint "^6.4.0"
     npm-packlist "^3.0.0"
-    playwright-core "1.39.0"
     postcss "^8.4.5"
     postcss-loader "^6.2.1"
     prettier "npm:wp-prettier@3.0.3"
@@ -3451,6 +3436,7 @@
     react-refresh "^0.14.0"
     read-pkg-up "^7.0.1"
     resolve-bin "^0.4.0"
+    rtlcss-webpack-plugin "^4.0.7"
     sass "^1.35.2"
     sass-loader "^12.1.0"
     source-map-loader "^3.0.0"
@@ -3462,27 +3448,24 @@
     webpack-cli "^5.1.4"
     webpack-dev-server "^4.15.1"
 
-"@wordpress/stylelint-config@^21.33.0":
-  version "21.33.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/stylelint-config/-/stylelint-config-21.33.0.tgz#25d81a45ca6185dfab7f4e00c2ded4153d959461"
-  integrity sha512-DwjXrjRBva0tkYILvDV7rjl3VaKXxvchlxnFfFs6l2DWL/Qo31CJ+f2rVw4XSWuuWxY1EsyIn9tOBS9URloWTQ==
+"@wordpress/stylelint-config@^22.3.0":
+  version "22.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/stylelint-config/-/stylelint-config-22.3.0.tgz#b9132aa7bbd8b78f9261a3bf2e3555e27def77ae"
+  integrity sha512-bVx0sf+SFJKBmOMCPdnGyjNKBBMhqfbDIysqjx7V34mglGdO2+8LJdoyrG6WzJgjjtEceORswEdirX7GBb9pUA==
   dependencies:
     stylelint-config-recommended "^6.0.0"
     stylelint-config-recommended-scss "^5.0.2"
 
-"@wordpress/url@^3.51.0":
-  version "3.51.0"
-  resolved "https://registry.yarnpkg.com/@wordpress/url/-/url-3.51.0.tgz#7a9437d871cee0984fe4cd2704e9ec38c4e889f6"
-  integrity sha512-OjucjlP1763gfKbe8lv/k3RCisyX8AfNBrhASk7JqxAj6rFhb1ZZO7YmAgB2m+WoGB5v7fkOli0FZyDqISdYyg==
-  dependencies:
-    "@babel/runtime" "^7.16.0"
-    remove-accents "^0.5.0"
-
 "@wordpress/warning@^2.50.0":
   version "2.50.0"
   resolved "https://registry.yarnpkg.com/@wordpress/warning/-/warning-2.50.0.tgz#718721684e52e870c2cbb1ce693b5019114fd846"
   integrity sha512-y7Zf48roDfiPgbRAWGXDwN3C8sfbEdneGq+HvXCW6rIeGYnDLdEkpX9i7RfultkFFPVeSP3FpMKVMkto2nbqzA==
 
+"@wordpress/warning@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@wordpress/warning/-/warning-3.3.0.tgz#e098907298b22b855be1a01eb40fcf8f59a14c94"
+  integrity sha512-n82aKCxuGRNwAtSLaycErJuhKgfOc+KtiljyQITPperMh9i8bH6I+JxtYiu+aLMaY5vrVLVb+/kCzKuWVQIKPA==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -3942,6 +3925,14 @@ babel-preset-jest@^29.6.3:
     babel-plugin-jest-hoist "^29.6.3"
     babel-preset-current-node-syntax "^1.0.0"
 
+babel-runtime@~6.25.0:
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.25.0.tgz#33b98eaa5d482bb01a8d1aa6b437ad2b01aec41c"
+  integrity sha512-zeCYxDePWYAT/DfmQWIHsMSFW2vv45UIwIAMjGvQVsTd47RwsiRH0uK1yzyWZ7LDBKdhnGDPM6NYEO5CZyhPrg==
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -4631,6 +4622,11 @@ core-js-pure@^3.23.3:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.35.1.tgz#f33ad7fdf9dddae260339a30e5f8363f5c49a3bc"
   integrity sha512-zcIdi/CL3MWbBJYo5YCeVAAx+Sy9yJE9I3/u9LkFABwbeaPhTMRWraM8mYFp9jW5Z50hOy7FVzCc8dCrpZqtIQ==
 
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^3.31.0:
   version "3.35.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.35.1.tgz#9c28f8b7ccee482796f8590cc8d15739eaaf980c"
@@ -5194,13 +5190,6 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
-encoding@^0.1.12:
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
-  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
-  dependencies:
-    iconv-lite "^0.6.2"
-
 end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -6100,14 +6089,6 @@ get-uri@^6.0.1:
     debug "^4.3.4"
     fs-extra "^8.1.0"
 
-gettext-parser@^1.3.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/gettext-parser/-/gettext-parser-1.4.0.tgz#f8baf34a292f03d5e42f02df099d301f167a7ace"
-  integrity sha512-sedZYLHlHeBop/gZ1jdg59hlUEcpcZJofLq2JFwJT1zTqAU3l2wFv6IsuwFHGqbiT9DWzMUW4/em2+hspnmMMA==
-  dependencies:
-    encoding "^0.1.12"
-    safe-buffer "^5.1.1"
-
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -6488,7 +6469,7 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@0.6.3, iconv-lite@^0.6.2, iconv-lite@^0.6.3:
+iconv-lite@0.6.3, iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -7921,11 +7902,6 @@ memfs@^3.4.3:
   dependencies:
     fs-monkey "1.0.3"
 
-memize@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/memize/-/memize-2.1.0.tgz#6ddd4717887d94825748149ece00d04cf868ce0d"
-  integrity sha512-yywVJy8ctVlN5lNPxsep5urnZ6TTclwPEyigM9M3Bi8vseJBOfqNrGWN/r8NzuIt3PovM323W04blJfGQfQSVg==
-
 meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -8143,6 +8119,11 @@ nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -8677,6 +8658,11 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -8716,11 +8702,6 @@ pkg-dir@4.2.0, pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-playwright-core@1.39.0:
-  version "1.39.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.39.0.tgz#efeaea754af4fb170d11845b8da30b2323287c63"
-  integrity sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==
-
 plur@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/plur/-/plur-4.0.0.tgz#729aedb08f452645fe8c58ef115bf16b0a73ef84"
@@ -9002,6 +8983,15 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@^8.3.11:
+  version "8.4.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
+  integrity sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.1"
+    source-map-js "^1.2.0"
+
 postcss@^8.4.14, postcss@^8.4.5, postcss@^8.4.7:
   version "8.4.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
@@ -9235,6 +9225,13 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
+react@^18.3.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-pkg-up@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -9317,6 +9314,11 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.10.0:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658"
+  integrity sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w==
+
 regenerator-runtime@^0.13.4:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
@@ -9393,11 +9395,6 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
-remove-accents@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.5.0.tgz#77991f37ba212afba162e375b627631315bed687"
-  integrity sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -9521,6 +9518,24 @@ robots-parser@^3.0.0:
   resolved "https://registry.yarnpkg.com/robots-parser/-/robots-parser-3.0.1.tgz#3d8a3cdfa8ac240cbb062a4bd16fcc0e0fb9ed23"
   integrity sha512-s+pyvQeIKIZ0dx5iJiQk1tPLJAWln39+MI5jtM8wnyws+G5azk+dMnMX0qfbqNetKKNgcWWOdi0sfm+FbQbgdQ==
 
+rtlcss-webpack-plugin@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/rtlcss-webpack-plugin/-/rtlcss-webpack-plugin-4.0.7.tgz#38b1708029f890f2db14bee510f25e57faf81669"
+  integrity sha512-ouSbJtgcLBBQIsMgarxsDnfgRqm/AS4BKls/mz/Xb6HSl+PdEzefTR+Wz5uWQx4odoX0g261Z7yb3QBz0MTm0g==
+  dependencies:
+    babel-runtime "~6.25.0"
+    rtlcss "^3.5.0"
+
+rtlcss@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/rtlcss/-/rtlcss-3.5.0.tgz#c9eb91269827a102bac7ae3115dd5d049de636c3"
+  integrity sha512-wzgMaMFHQTnyi9YOwsx9LjOxYXJPzS8sYnFaKm6R5ysvTkwzHiB0vxnbHwchHQT65PTdBjDG21/kQBWI7q9O7A==
+  dependencies:
+    find-up "^5.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.3.11"
+    strip-json-comments "^3.1.1"
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -9562,7 +9577,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.2.0:
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -9911,6 +9926,11 @@ socks@^2.7.1:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
+source-map-js@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+
 source-map-loader@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-3.0.1.tgz#9ae5edc7c2d42570934be4c95d1ccc6352eba52d"
@@ -10025,11 +10045,6 @@ speedline-core@^1.4.3:
     image-ssim "^0.2.0"
     jpeg-js "^0.4.1"
 
-sprintf-js@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.3.tgz#4914b903a2f8b685d17fdf78a70e917e872e444a"
-  integrity sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -10334,13 +10349,6 @@ table@^6.8.0:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tannin@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tannin/-/tannin-1.2.0.tgz#1da6fe65280dca4c3d84efb075b077b1b94362a6"
-  integrity sha512-U7GgX/RcSeUETbV7gYgoz8PD7Ni4y95pgIP/Z6ayI3CfhSujwKEBlGFTCRN+Aqnuyf4AN2yHL+L8x+TCGjb9uA==
-  dependencies:
-    "@tannin/plural-forms" "^1.1.0"
-
 tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -10842,10 +10850,10 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-web-vitals@^3.5.0:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-3.5.2.tgz#5bb58461bbc173c3f00c2ddff8bfe6e680999ca9"
-  integrity sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==
+web-vitals@^4.2.1:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.2.2.tgz#e883245180b95e175eb75a5ca8903b1a11597d7a"
+  integrity sha512-nYfoOqb4EmElljyXU2qdeE76KsvoHdftQKY4DzA9Aw8DervCg2bG634pHLrJ/d6+B4mE3nWTSJv8Mo7B2mbZkw==
 
 webidl-conversions@^3.0.0:
   version "3.0.1"

From f6120b82b320e98a041d010acb97b57810360e9f Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:26:14 +0200
Subject: [PATCH 04/28] Not rendering a post now

---
 .../wporg-developer-2023/src/dashicons-page/render.php       | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index d3d315ef9..4c49412df 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -32,11 +32,8 @@
 
 
 ?>
-
 <div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="@wporg-developer-2023/dashicons"
 				<?php echo wp_interactivity_data_wp_context( $interactivity_context ); ?>>
-				<?php while ( have_posts() ) :
-					the_post(); ?>
 				<main id="main" <?php post_class( 'site-main' ); ?> role="main">
 
 <!-- wp:wporg/notice {"type":"alert"} -->
@@ -211,6 +208,4 @@ function wpdocs_add_my_custom_menu() {
 		</div>
 	</script>
 	-->
-	<?php endwhile; // end of the loop. ?>
 </div><!-- #primary -->
-

From 1119a71bbcbffb673a0a6cb66239fa94bd3c651b Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:52:28 +0200
Subject: [PATCH 05/28] starting to work properly

---
 .../src/dashicons-page/render.php             | 145 ++++++++++--------
 .../src/dashicons-page/view.js                |  14 +-
 2 files changed, 90 insertions(+), 69 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 4c49412df..22f930d0e 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -1,9 +1,13 @@
 <?php
 
-namespace WordPressdotorg\Theme\Developer_2023;
-
 require_once dirname( dirname( __DIR__ ) ) . '/inc/dashicons.php';
 
+wp_enqueue_style(
+	'dashicons-page',
+	get_stylesheet_directory_uri() . '/stylesheets/page-dashicons.css',
+	array(),
+	get_stylesheet_directory() . '/stylesheets/page-dashicons.css'
+);
 
 $icons_sections = array();
 foreach ( \DevHub_Dashicons::get_dashicons() as $section ) {
@@ -21,8 +25,15 @@
 $selected_icon = array_rand( array_merge( ...$icons_sections ) );
 
 wp_interactivity_state(
-	'@wporg-developer-2023/dashicons',
-	array()
+	'wporg/dashicons-page',
+	array(
+		/*'sectionAnchorTarget' => function() {*/
+		/*	return 'icons-' . wp_interactivity_get_context()['section']['label'];*/
+		/*},*/
+		/*'sectionAnchorHref' => function () {*/
+		/*	return '#icons-' . wp_interactivity_get_context()['section']['label'];*/
+		/*}*/
+	)
 );
 
 $interactivity_context = array(
@@ -30,73 +41,71 @@
 	'selectedIcon' => $selected_icon,
 );
 
-
-?>
-<div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="@wporg-developer-2023/dashicons"
-				<?php echo wp_interactivity_data_wp_context( $interactivity_context ); ?>>
-				<main id="main" <?php post_class( 'site-main' ); ?> role="main">
-
-<!-- wp:wporg/notice {"type":"alert"} -->
+$deprecation_notice = sprintf(
+	'<!-- wp:wporg/notice {"type":"alert"} -->
 <div class="wp-block-wporg-notice is-alert-notice">
 <div class="wp-block-wporg-notice__icon"></div>
-<div class="wp-block-wporg-notice__content"><p><?php
-echo __( 'The Dashicons project is no longer accepting icon requests. Here’s why:&nbsp;<a href="https://make.wordpress.org/design/2020/04/20/next-steps-for-dashicons/">Next steps for Dashicons</a>.', 'wporg' );
-?></p></div>
+<div class="wp-block-wporg-notice__content"><p>%s</p></div>
 </div>
-<!-- /wp:wporg/notice -->
-					
-					<div class="details clear">
-						<div id="glyph"></div>
-						<div class="entry-content">
-							<?php the_content(); ?>
-						</div><!-- .entry-content -->
-						<div class="icon-filter">
-							<input placeholder="<?php esc_attr_e( 'Filter&hellip;', 'wporg' ); ?>" name="search" id="search" type="text" value="" maxlength="150">
-						</div>
-					</div>
-					<div id="icons">
-						<div id="iconlist">
-							<template
-								data-wp-each--section="context.iconsSections"
-								data-wp-each-key="context.section.label"
-							>
-								<h4>
-									<span data-wp-text="context.section.label"></span>
-									<a data-wp-bind-href="" class="anchor"><span aria-hidden="true">#</span><span class="screen-reader-text" data-wp-text="context.section.label"></span></a>
-								</h4>
-								<ul>
-									<template
-										data-wp-each--icon="context.section.icons"
-										data-wp-each-key="context.icon.slug"
-									>
-										<li data-wp-bind--data-keywords="context.icon.keywords" data-wp-bind--data-code="context.icon.code" data-wp-bind--class="state.iconClass">
-											<span data-wp-text="context.icon.label"></span>
-										</li>
-									</template>
-								</ul>
-							</template>
-						</div>
-					</div>
-		
-					<div id="instructions">
-		
-						<h3><?php _e( 'WordPress Usage', 'wporg' ); ?></h3>
-		
-						<p>
-						<?php  printf(
-							__( 'Admin menu items can be added with <code><a href="%1$s">register_post_type()</a></code> and <code><a href="%2$s">add_menu_page()</a></code>, which both have an option to set an icon. To show the current icon, you should pass in %3$s.', 'wporg' ),
-							'https://developer.wordpress.org/reference/functions/register_post_type/',
-							'https://developer.wordpress.org/reference/functions/add_menu_page/',
-							'<code>\'dashicons-<span id="wp-class-example">{icon}</span>\'</code>'
-						); ?></p>
-		
-						<h4><?php _e( 'Examples', 'wporg' ); ?></h4>
-		
-						<p>
-						<?php printf(
-							__( 'In <code><a href="%s">register_post_type()</a></code>, set <code>menu_icon</code> in the arguments array.', 'wporg' ),
-							'https://developer.wordpress.org/reference/functions/register_post_type/'
-						); ?></p>
+<!-- /wp:wporg/notice -->',
+	__( 'The Dashicons project is no longer accepting icon requests. Here’s why:&nbsp;<a href="https://make.wordpress.org/design/2020/04/20/next-steps-for-dashicons/">Next steps for Dashicons</a>.', 'wporg' )
+);
+
+?>
+<div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="wporg/dashicons-page"
+	<?php echo wp_interactivity_data_wp_context( $interactivity_context ); ?>>
+	<main id="main" <?php post_class( 'site-main' ); ?> role="main">
+
+		<?php echo do_blocks( wp_kses_post( $deprecation_notice ) ); ?>
+
+		<div class="details clear">
+			<div id="glyph"></div>
+			<div class="entry-content">
+				<?php the_content(); ?>
+			</div><!-- .entry-content -->
+			<div class="icon-filter">
+				<input placeholder="<?php esc_attr_e( 'Filter&hellip;', 'wporg' ); ?>" name="search" id="search" type="text" value="" maxlength="150">
+			</div>
+		</div>
+		<div id="icons">
+			<div id="iconlist">
+				<template
+					data-wp-each--section="context.iconsSections"
+					data-wp-each-key="context.section.label"
+				>
+					<h4 data-wp-bind--id="state.sectionAnchorTarget">
+						<span data-wp-text="context.section.label"></span>
+						<a data-wp-bind--href="state.sectionAnchorHref" class="anchor"><span aria-hidden="true">#</span><span class="screen-reader-text" data-wp-text="context.section.label"></span></a>
+					</h4>
+					<ul>
+						<template
+							data-wp-each--icon="context.section.icons"
+							data-wp-each-key="context.icon.slug"
+						>
+							<li data-wp-bind--data-keywords="context.icon.keywords" data-wp-bind--data-code="context.icon.code" data-wp-bind--class="state.iconClass">
+								<span data-wp-text="context.icon.label"></span>
+							</li>
+						</template>
+					</ul>
+				</template>
+			</div>
+		</div>
+
+		<div id="instructions">
+			<h3><?php _e( 'WordPress Usage', 'wporg' ); ?></h3>
+			<p>
+			<?php  printf(
+				__( 'Admin menu items can be added with <code><a href="%1$s">register_post_type()</a></code> and <code><a href="%2$s">add_menu_page()</a></code>, which both have an option to set an icon. To show the current icon, you should pass in %3$s.', 'wporg' ),
+				'https://developer.wordpress.org/reference/functions/register_post_type/',
+				'https://developer.wordpress.org/reference/functions/add_menu_page/',
+				'<code>\'dashicons-<span id="wp-class-example">{icon}</span>\'</code>'
+			); ?></p>
+
+			<h4><?php _e( 'Examples', 'wporg' ); ?></h4>
+			<p><?php printf(
+				__( 'In <code><a href="%s">register_post_type()</a></code>, set <code>menu_icon</code> in the arguments array.', 'wporg' ),
+				'https://developer.wordpress.org/reference/functions/register_post_type/'
+			); ?></p>
 		
 <pre>&lt;?php
 /**
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index ae49b0974..487bbfb4c 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -1,10 +1,22 @@
 import * as IAPI from '@wordpress/interactivity';
 
-const { state } = IAPI.store( '@wporg-developer-2023/dashicons', {
+const { state } = IAPI.store( 'wporg/dashicons-page', {
 	state: {
 		get iconClass() {
 			return `dashicons ${ IAPI.getContext().icon.slug }`;
 		},
+
+		get iconSectionSlug() {
+			return IAPI.getContext().section.label.toLowerCase().replace( ' ', '-' );
+		},
+
+		get sectionAnchorTarget() {
+			return `icons-${ state.iconSectionSlug }`;
+		},
+
+		get sectionAnchorHref() {
+			return `#icons-${ state.iconSectionSlug }`;
+		},
 	},
 	actions: {},
 } );

From 5eb1e73dc28438a75ac8b5c2672de04b56a172d5 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Tue, 23 Jul 2024 19:22:27 +0200
Subject: [PATCH 06/28] Close to working

---
 .../src/dashicons-page/render.php             | 92 ++++++++++++-------
 .../src/dashicons-page/view.js                | 28 ++++--
 2 files changed, 80 insertions(+), 40 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 22f930d0e..7d7d7a8b0 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -1,5 +1,7 @@
 <?php
 
+namespace WordPressdotorg\Theme\Developer_2023\Block_Dashicons_Page;
+
 require_once dirname( dirname( __DIR__ ) ) . '/inc/dashicons.php';
 
 wp_enqueue_style(
@@ -9,36 +11,59 @@
 	get_stylesheet_directory() . '/stylesheets/page-dashicons.css'
 );
 
+$icons = array();
 $icons_sections = array();
-foreach ( \DevHub_Dashicons::get_dashicons() as $section ) {
-	$icons = array();
-	foreach ( $section['icons'] as $k => $v ) {
-		$v['slug'] = $k;
-		$icons[] = $v;
-	}
-	$icons_sections[] = array(
+
+foreach ( \DevHub_Dashicons::get_dashicons() as $section_group => $section ) {
+	$icon_section = array(
 		'label' => $section['label'],
-		'icons' => $icons,
+		'slug' => sanitize_title( $section_group ),
+		'icons' => array(),
 	);
+	foreach ( $section['icons'] as $k => $v ) {
+		$icons[$k] = $v;
+		$icons[$k]['sectionLabel'] = $section['label'];
+		$icon_section['icons'][] = $k;
+	}
+	$icons_sections[] = $icon_section;
 }
 
-$selected_icon = array_rand( array_merge( ...$icons_sections ) );
+$selected_icon = array_rand( $icons );
 
 wp_interactivity_state(
 	'wporg/dashicons-page',
 	array(
-		/*'sectionAnchorTarget' => function() {*/
-		/*	return 'icons-' . wp_interactivity_get_context()['section']['label'];*/
-		/*},*/
-		/*'sectionAnchorHref' => function () {*/
-		/*	return '#icons-' . wp_interactivity_get_context()['section']['label'];*/
-		/*}*/
+		/*
+		 * START: Derived state.
+		 *
+		 * All these "derived state" getters must be defined in view.js as well
+		 */
+		'iconClass' => function() {
+			return 'dashicons ' . wp_interactivity_get_context()['icon'];
+		},
+		'sectionAnchorTarget' => function() {
+			return 'icons-' . wp_interactivity_get_context()['section']['slug'];
+		},
+		'sectionAnchorHref' => function () {
+			return '#icons-' . wp_interactivity_get_context()['section']['slug'];
+		},
+		'iconSectionLabel' => function() {
+			return wp_interactivity_get_context()['section']['label'];
+		},
+		'eachIcon' => function() use ( $icons ) {
+			return $icons[ wp_interactivity_get_context()['icon'] ];
+		},
+		/*
+		 * END: Derived state
+		 */
+
+		'iconsSections' => $icons_sections,
+		'icons' => $icons,
+		'selectedIcon' => $selected_icon,
 	)
 );
 
 $interactivity_context = array(
-	'iconsSections' => $icons_sections,
-	'selectedIcon' => $selected_icon,
 );
 
 $deprecation_notice = sprintf(
@@ -59,7 +84,19 @@
 		<?php echo do_blocks( wp_kses_post( $deprecation_notice ) ); ?>
 
 		<div class="details clear">
-			<div id="glyph"></div>
+			<div id="glyph">
+				<template data-wp-each--icon="state.selectedIconDetails" data-wp-each-key="state.eachIcon.slug">
+					<div data-wp-bind--class="state.iconClass"></div>
+					<div class="info">
+						<span><strong data-wp-text="state.eachIcon.sectionLabel"></strong></span>
+						<span class="name"><code data-wp-text="state.selectedIcon"></code></span>
+						<span class="charCode"><code data-wp-text="state.eachIcon.code"></code></span>
+						<span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'><?php _e( 'Copy CSS', 'wporg' ); ?></a></span>
+						<span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )"><?php _e( 'Copy HTML', 'wporg' ); ?></a></span>
+						<span class="link"><a href="javascript:dashicons.copy( '{{data.glyph}}' )"><?php _e( 'Copy Glyph', 'wporg' ); ?></a></span>
+					</div>
+				</template>
+			</div>
 			<div class="entry-content">
 				<?php the_content(); ?>
 			</div><!-- .entry-content -->
@@ -70,8 +107,8 @@
 		<div id="icons">
 			<div id="iconlist">
 				<template
-					data-wp-each--section="context.iconsSections"
-					data-wp-each-key="context.section.label"
+					data-wp-each--section="state.iconsSections"
+					data-wp-each-key="context.section.slug"
 				>
 					<h4 data-wp-bind--id="state.sectionAnchorTarget">
 						<span data-wp-text="context.section.label"></span>
@@ -80,10 +117,10 @@
 					<ul>
 						<template
 							data-wp-each--icon="context.section.icons"
-							data-wp-each-key="context.icon.slug"
+							data-wp-each-key="state.eachIcon.slug"
 						>
-							<li data-wp-bind--data-keywords="context.icon.keywords" data-wp-bind--data-code="context.icon.code" data-wp-bind--class="state.iconClass">
-								<span data-wp-text="context.icon.label"></span>
+							<li data-wp-bind--data-keywords="state.eachIcon.keywords" data-wp-bind--data-code="state.sectionIcon.code" data-wp-bind--class="state.iconClass" data-wp-on--click="actions.handleIconClick">
+								<span data-wp-text="state.eachIcon.label"></span>
 							</li>
 						</template>
 					</ul>
@@ -206,15 +243,6 @@ function wpdocs_add_my_custom_menu() {
 	<div id="temp" style="display:none;"></div>
 	<!--
 	<script type="text/html" id="tmpl-glyphs">
-		<div class="dashicons {{data.cssClass}}"></div>
-		<div class="info">
-			<span><strong>{{data.sectionName}}</strong></span>
-			<span class="name"><code>{{data.cssClass}}</code></span>
-			<span class="charCode"><code>{{data.charCode}}</code></span>
-			<span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'><?php _e( 'Copy CSS', 'wporg' ); ?></a></span>
-			<span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )"><?php _e( 'Copy HTML', 'wporg' ); ?></a></span>
-			<span class="link"><a href="javascript:dashicons.copy( '{{data.glyph}}' )"><?php _e( 'Copy Glyph', 'wporg' ); ?></a></span>
-		</div>
 	</script>
 	-->
 </div><!-- #primary -->
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index 487bbfb4c..751f9b248 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -3,20 +3,32 @@ import * as IAPI from '@wordpress/interactivity';
 const { state } = IAPI.store( 'wporg/dashicons-page', {
 	state: {
 		get iconClass() {
-			return `dashicons ${ IAPI.getContext().icon.slug }`;
-		},
-
-		get iconSectionSlug() {
-			return IAPI.getContext().section.label.toLowerCase().replace( ' ', '-' );
+			return `dashicons ${ IAPI.getContext().icon }`;
 		},
 
 		get sectionAnchorTarget() {
-			return `icons-${ state.iconSectionSlug }`;
+			return `icons-${ IAPI.getContext().section.slug }`;
 		},
 
 		get sectionAnchorHref() {
-			return `#icons-${ state.iconSectionSlug }`;
+			return `#icons-${ IAPI.getContext().section.slug }`;
+		},
+
+		get iconSectionLabel() {
+			return IAPI.getContext().section.label;
+		},
+
+		get eachIcon() {
+			return state.icons[ IAPI.getContext().icon ];
+		},
+
+		get selectedIconDetails() {
+			return state.selectedIcon ? [ state.selectedIcon ] : [];
+		},
+	},
+	actions: {
+		handleIconClick() {
+			state.selectedIcon = IAPI.getContext().icon;
 		},
 	},
-	actions: {},
 } );

From dad1fea081c33d8897fb704057a08781d2d5440b Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Tue, 23 Jul 2024 19:26:58 +0200
Subject: [PATCH 07/28] Remove redundant property

---
 .../wporg-developer-2023/src/dashicons-page/render.php      | 6 +++---
 .../themes/wporg-developer-2023/src/dashicons-page/view.js  | 6 +-----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 7d7d7a8b0..8d6b11898 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -59,7 +59,7 @@
 
 		'iconsSections' => $icons_sections,
 		'icons' => $icons,
-		'selectedIcon' => $selected_icon,
+		'selectedIcon' => array( $selected_icon ),
 	)
 );
 
@@ -85,11 +85,11 @@
 
 		<div class="details clear">
 			<div id="glyph">
-				<template data-wp-each--icon="state.selectedIconDetails" data-wp-each-key="state.eachIcon.slug">
+				<template data-wp-each--icon="state.selectedIcon" data-wp-each-key="state.eachIcon.slug">
 					<div data-wp-bind--class="state.iconClass"></div>
 					<div class="info">
 						<span><strong data-wp-text="state.eachIcon.sectionLabel"></strong></span>
-						<span class="name"><code data-wp-text="state.selectedIcon"></code></span>
+						<span class="name"><code data-wp-text="state.selectedIcon.0"></code></span>
 						<span class="charCode"><code data-wp-text="state.eachIcon.code"></code></span>
 						<span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'><?php _e( 'Copy CSS', 'wporg' ); ?></a></span>
 						<span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )"><?php _e( 'Copy HTML', 'wporg' ); ?></a></span>
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index 751f9b248..b7439475e 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -21,14 +21,10 @@ const { state } = IAPI.store( 'wporg/dashicons-page', {
 		get eachIcon() {
 			return state.icons[ IAPI.getContext().icon ];
 		},
-
-		get selectedIconDetails() {
-			return state.selectedIcon ? [ state.selectedIcon ] : [];
-		},
 	},
 	actions: {
 		handleIconClick() {
-			state.selectedIcon = IAPI.getContext().icon;
+			state.selectedIcon = [ IAPI.getContext().icon ];
 		},
 	},
 } );

From 4c5280abbd09e8faf97b7101c82614c54d01631b Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 14:17:01 +0200
Subject: [PATCH 08/28] Copy buttons working

---
 .../src/dashicons-page/render.php             | 24 ++++------
 .../src/dashicons-page/view.js                | 45 +++++++++++++++++--
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 8d6b11898..19d5e2f3b 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -85,15 +85,15 @@
 
 		<div class="details clear">
 			<div id="glyph">
-				<template data-wp-each--icon="state.selectedIcon" data-wp-each-key="state.eachIcon.slug">
+				<template data-wp-each--icon="state.selectedIcon">
 					<div data-wp-bind--class="state.iconClass"></div>
 					<div class="info">
 						<span><strong data-wp-text="state.eachIcon.sectionLabel"></strong></span>
-						<span class="name"><code data-wp-text="state.selectedIcon.0"></code></span>
-						<span class="charCode"><code data-wp-text="state.eachIcon.code"></code></span>
-						<span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'><?php _e( 'Copy CSS', 'wporg' ); ?></a></span>
-						<span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )"><?php _e( 'Copy HTML', 'wporg' ); ?></a></span>
-						<span class="link"><a href="javascript:dashicons.copy( '{{data.glyph}}' )"><?php _e( 'Copy Glyph', 'wporg' ); ?></a></span>
+						<span class="name"><code data-wp-text="context.icon"></code></span>
+						<span class="charCode"><code data-wp-bind--data-code="state.eachIcon.code" data-wp-text="state.eachIcon.code"></code></span>
+						<span class="link"><button data-wp-on--click="copyClickHandlers.css" type="button"><?php _e( 'Copy CSS', 'wporg' ); ?></button></span>
+						<span class="link"><button data-wp-on--click="copyClickHandlers.html"  type="button"><?php _e( 'Copy HTML', 'wporg' ); ?></button></span>
+						<span class="link"><button data-wp-on--click="copyClickHandlers.glyph" type="button"><?php _e( 'Copy Glyph', 'wporg' ); ?></button></span>
 					</div>
 				</template>
 			</div>
@@ -106,20 +106,14 @@
 		</div>
 		<div id="icons">
 			<div id="iconlist">
-				<template
-					data-wp-each--section="state.iconsSections"
-					data-wp-each-key="context.section.slug"
-				>
+				<template data-wp-each--section="state.iconsSections">
 					<h4 data-wp-bind--id="state.sectionAnchorTarget">
 						<span data-wp-text="context.section.label"></span>
 						<a data-wp-bind--href="state.sectionAnchorHref" class="anchor"><span aria-hidden="true">#</span><span class="screen-reader-text" data-wp-text="context.section.label"></span></a>
 					</h4>
 					<ul>
-						<template
-							data-wp-each--icon="context.section.icons"
-							data-wp-each-key="state.eachIcon.slug"
-						>
-							<li data-wp-bind--data-keywords="state.eachIcon.keywords" data-wp-bind--data-code="state.sectionIcon.code" data-wp-bind--class="state.iconClass" data-wp-on--click="actions.handleIconClick">
+						<template data-wp-each--icon="context.section.icons" >
+							<li data-wp-bind--data-keywords="state.eachIcon.keywords" data-wp-bind--data-code="state.sectionIcon.code" data-wp-bind--class="state.iconClass" data-wp-on--click="handleIconClick">
 								<span data-wp-text="state.eachIcon.label"></span>
 							</li>
 						</template>
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index b7439475e..511ea1925 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -22,9 +22,46 @@ const { state } = IAPI.store( 'wporg/dashicons-page', {
 			return state.icons[ IAPI.getContext().icon ];
 		},
 	},
-	actions: {
-		handleIconClick() {
-			state.selectedIcon = [ IAPI.getContext().icon ];
-		},
+
+	handleIconClick: () => {
+		state.selectedIcon = [ IAPI.getContext().icon ];
+	},
+
+	copyClickHandlers: {
+		css: makeCopyHandler( 'css' ),
+		html: makeCopyHandler( 'html' ),
+		glyph: makeCopyHandler( 'glyph' ),
 	},
 } );
+
+/**
+ * @param {'css'|'html'|'glyph'} type
+ */
+function makeCopyHandler( type ) {
+	return () => {
+		console.log( 'clicked %s', type );
+		let text;
+		let copyText;
+		switch ( type ) {
+			case 'css':
+				text = 'Copy this, then paste in your CSS :before selector.';
+				copyText = `content: "\\${ state.eachIcon.code }"`;
+				break;
+
+			case 'html':
+				text = 'Copy this, then paste in your HTML.';
+				copyText = `<span class="dashicons ${ IAPI.getContext().icon }"></span>`;
+				break;
+
+			case 'glyph':
+				text = 'Copy this, then paste in your Photoshop textfield.';
+				const span = document.createElement( 'span' );
+				span.innerHTML = `&#x${ state.eachIcon.code };`;
+				copyText = span.textContent;
+				break;
+		}
+
+		// eslint-disable-next-line no-alert
+		window.prompt( text, copyText );
+	};
+}

From fc1efc6b9dae169a15f927d2e18e7a67944a5e4c Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 14:18:26 +0200
Subject: [PATCH 09/28] Remove unused context

---
 .../wporg-developer-2023/src/dashicons-page/render.php      | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 19d5e2f3b..f38f3bbda 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -63,9 +63,6 @@
 	)
 );
 
-$interactivity_context = array(
-);
-
 $deprecation_notice = sprintf(
 	'<!-- wp:wporg/notice {"type":"alert"} -->
 <div class="wp-block-wporg-notice is-alert-notice">
@@ -77,8 +74,7 @@
 );
 
 ?>
-<div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="wporg/dashicons-page"
-	<?php echo wp_interactivity_data_wp_context( $interactivity_context ); ?>>
+<div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="wporg/dashicons-page">
 	<main id="main" <?php post_class( 'site-main' ); ?> role="main">
 
 		<?php echo do_blocks( wp_kses_post( $deprecation_notice ) ); ?>

From b1bfd0e29cb729a154c148726d72d4ef2e564e8b Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 14:21:49 +0200
Subject: [PATCH 10/28] Localize copy texts

---
 .../wporg-developer-2023/src/dashicons-page/render.php | 10 ++++++++++
 .../wporg-developer-2023/src/dashicons-page/view.js    |  8 ++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index f38f3bbda..9ce5ed2a8 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -30,6 +30,16 @@
 
 $selected_icon = array_rand( $icons );
 
+wp_interactivity_config(
+	'wporg/dashicons-page',
+	array(
+		'texts' => array(
+			'copyCss' => _( 'Copy this, then paste in your CSS :before selector.' ),
+			'copyHtml' =>  _( 'Copy this, then paste in your HTML.' ),
+			'copyGlyph' => _( 'Copy this, then paste in your Photoshop textfield.' ),
+		),
+	)
+);
 wp_interactivity_state(
 	'wporg/dashicons-page',
 	array(
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index 511ea1925..65e626292 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -1,5 +1,6 @@
 import * as IAPI from '@wordpress/interactivity';
 
+const config = IAPI.getConfig( 'wporg/dashicons-page' );
 const { state } = IAPI.store( 'wporg/dashicons-page', {
 	state: {
 		get iconClass() {
@@ -39,22 +40,21 @@ const { state } = IAPI.store( 'wporg/dashicons-page', {
  */
 function makeCopyHandler( type ) {
 	return () => {
-		console.log( 'clicked %s', type );
 		let text;
 		let copyText;
 		switch ( type ) {
 			case 'css':
-				text = 'Copy this, then paste in your CSS :before selector.';
+				text = config.texts.copyCss;
 				copyText = `content: "\\${ state.eachIcon.code }"`;
 				break;
 
 			case 'html':
-				text = 'Copy this, then paste in your HTML.';
+				text = config.texts.copyHtml;
 				copyText = `<span class="dashicons ${ IAPI.getContext().icon }"></span>`;
 				break;
 
 			case 'glyph':
-				text = 'Copy this, then paste in your Photoshop textfield.';
+				text = config.texts.copyGlyph;
 				const span = document.createElement( 'span' );
 				span.innerHTML = `&#x${ state.eachIcon.code };`;
 				copyText = span.textContent;

From a04fd43f4a600744a29076dfcb24e541cfdb415e Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 15:08:41 +0200
Subject: [PATCH 11/28] Add icon to url query param when selecting

---
 .../themes/wporg-developer-2023/src/dashicons-page/view.js    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index 65e626292..befd0ed29 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -25,7 +25,11 @@ const { state } = IAPI.store( 'wporg/dashicons-page', {
 	},
 
 	handleIconClick: () => {
+		const icon = IAPI.getContext().icon;
 		state.selectedIcon = [ IAPI.getContext().icon ];
+		const url = new URL( document.location.href );
+		url.searchParams.set( 'icon', icon );
+		window.history.replaceState( undefined, undefined, url );
 	},
 
 	copyClickHandlers: {

From a5a30dd947f7aab87d0b0a945ce79fa9a3bacb06 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 15:08:44 +0200
Subject: [PATCH 12/28] Revert "Add icon to url query param when selecting"

This reverts commit a04fd43f4a600744a29076dfcb24e541cfdb415e.
---
 .../themes/wporg-developer-2023/src/dashicons-page/view.js    | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index befd0ed29..65e626292 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -25,11 +25,7 @@ const { state } = IAPI.store( 'wporg/dashicons-page', {
 	},
 
 	handleIconClick: () => {
-		const icon = IAPI.getContext().icon;
 		state.selectedIcon = [ IAPI.getContext().icon ];
-		const url = new URL( document.location.href );
-		url.searchParams.set( 'icon', icon );
-		window.history.replaceState( undefined, undefined, url );
 	},
 
 	copyClickHandlers: {

From 48891b1cf7561e4e5adaef6fb00e72d22b28d1f9 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 17:49:42 +0200
Subject: [PATCH 13/28] Filter icons

---
 .../src/dashicons-page/render.php                  | 12 ++++++++----
 .../src/dashicons-page/view.js                     | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 9ce5ed2a8..9b94e4743 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -38,8 +38,10 @@
 			'copyHtml' =>  _( 'Copy this, then paste in your HTML.' ),
 			'copyGlyph' => _( 'Copy this, then paste in your Photoshop textfield.' ),
 		),
+		'icons' => $icons,
 	)
 );
+
 wp_interactivity_state(
 	'wporg/dashicons-page',
 	array(
@@ -68,8 +70,9 @@
 		 */
 
 		'iconsSections' => $icons_sections,
-		'icons' => $icons,
 		'selectedIcon' => array( $selected_icon ),
+		'filter' => '',
+		'style' => '',
 	)
 );
 
@@ -85,6 +88,7 @@
 
 ?>
 <div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="wporg/dashicons-page">
+	<style data-wp-text="state.style"></style>
 	<main id="main" <?php post_class( 'site-main' ); ?> role="main">
 
 		<?php echo do_blocks( wp_kses_post( $deprecation_notice ) ); ?>
@@ -96,7 +100,7 @@
 					<div class="info">
 						<span><strong data-wp-text="state.eachIcon.sectionLabel"></strong></span>
 						<span class="name"><code data-wp-text="context.icon"></code></span>
-						<span class="charCode"><code data-wp-bind--data-code="state.eachIcon.code" data-wp-text="state.eachIcon.code"></code></span>
+						<span class="charCode"><code data-wp-text="state.eachIcon.code"></code></span>
 						<span class="link"><button data-wp-on--click="copyClickHandlers.css" type="button"><?php _e( 'Copy CSS', 'wporg' ); ?></button></span>
 						<span class="link"><button data-wp-on--click="copyClickHandlers.html"  type="button"><?php _e( 'Copy HTML', 'wporg' ); ?></button></span>
 						<span class="link"><button data-wp-on--click="copyClickHandlers.glyph" type="button"><?php _e( 'Copy Glyph', 'wporg' ); ?></button></span>
@@ -107,7 +111,7 @@
 				<?php the_content(); ?>
 			</div><!-- .entry-content -->
 			<div class="icon-filter">
-				<input placeholder="<?php esc_attr_e( 'Filter&hellip;', 'wporg' ); ?>" name="search" id="search" type="text" value="" maxlength="150">
+				<input data-wp-on--input="handleIconFilter" placeholder="<?php esc_attr_e( 'Filter&hellip;', 'wporg' ); ?>" name="search" id="search" type="text" value="" maxlength="150">
 			</div>
 		</div>
 		<div id="icons">
@@ -119,7 +123,7 @@
 					</h4>
 					<ul>
 						<template data-wp-each--icon="context.section.icons" >
-							<li data-wp-bind--data-keywords="state.eachIcon.keywords" data-wp-bind--data-code="state.sectionIcon.code" data-wp-bind--class="state.iconClass" data-wp-on--click="handleIconClick">
+							<li data-wp-bind--data-keywords="state.eachIcon.keywords" data-wp-bind--class="state.iconClass" data-wp-on--click="handleIconClick">
 								<span data-wp-text="state.eachIcon.label"></span>
 							</li>
 						</template>
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index 65e626292..a6610f1fd 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -20,7 +20,14 @@ const { state } = IAPI.store( 'wporg/dashicons-page', {
 		},
 
 		get eachIcon() {
-			return state.icons[ IAPI.getContext().icon ];
+			return config.icons[ IAPI.getContext().icon ];
+		},
+
+		get style() {
+			const cleanedValue = state.filter.replace( /[^a-zA-Z0-9]/, '' );
+			return cleanedValue.length < 3
+				? ''
+				: `#iconlist li:not([data-keywords*="${ cleanedValue }" i]) { display: none; }`;
 		},
 	},
 
@@ -28,6 +35,11 @@ const { state } = IAPI.store( 'wporg/dashicons-page', {
 		state.selectedIcon = [ IAPI.getContext().icon ];
 	},
 
+	/** @param {InputEvent} event */
+	handleIconFilter: ( event ) => {
+		state.filter = event.target.value;
+	},
+
 	copyClickHandlers: {
 		css: makeCopyHandler( 'css' ),
 		html: makeCopyHandler( 'html' ),

From 4f3195ca687e314f071cf3b9158a7a6e168647c3 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 17:50:04 +0200
Subject: [PATCH 14/28] Handle updating URL for selected icon and moving to
 page top

---
 .../themes/wporg-developer-2023/src/dashicons-page/view.js   | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index a6610f1fd..59a98ee17 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -32,7 +32,12 @@ const { state } = IAPI.store( 'wporg/dashicons-page', {
 	},
 
 	handleIconClick: () => {
+		const icon = IAPI.getContext().icon;
 		state.selectedIcon = [ IAPI.getContext().icon ];
+		const url = new URL( document.location.href );
+		url.searchParams.set( 'icon', icon );
+		window.history.replaceState( undefined, undefined, url );
+		document.location.hash = '#glyph';
 	},
 
 	/** @param {InputEvent} event */

From b33aa4948dbdccba397b579d5fd9cff87a8aec1d Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 17:57:19 +0200
Subject: [PATCH 15/28] Handle icon query param to select icon

---
 .../wporg-developer-2023/src/dashicons-page/render.php       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 9b94e4743..3ebaea125 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -28,7 +28,10 @@
 	$icons_sections[] = $icon_section;
 }
 
-$selected_icon = array_rand( $icons );
+$selected_icon = $_GET['icon'] ?? '';
+if ( ! array_key_exists( $selected_icon, $icons ) ) {
+	$selected_icon = array_rand( $icons );
+}
 
 wp_interactivity_config(
 	'wporg/dashicons-page',

From 4ee4665790aab517628c63b25c01fa182a278eca Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 18:07:53 +0200
Subject: [PATCH 16/28] Upgrade fragment-style links to query param

---
 .../src/dashicons-page/render.php             |  2 +-
 .../src/dashicons-page/view.js                | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 3ebaea125..007a264b8 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -90,7 +90,7 @@
 );
 
 ?>
-<div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="wporg/dashicons-page">
+<div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="wporg/dashicons-page" data-wp-init="init">
 	<style data-wp-text="state.style"></style>
 	<main id="main" <?php post_class( 'site-main' ); ?> role="main">
 
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index 59a98ee17..4e32701c1 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -45,6 +45,27 @@ const { state } = IAPI.store( 'wporg/dashicons-page', {
 		state.filter = event.target.value;
 	},
 
+	/**
+	 * A previous implementation used #icon-slug to pick an ico.
+	 * Respect those links, but replace the URL with our query-based version.
+	 */
+	init: () => {
+		const url = new URL( document.location.href );
+		const iconFromQuery = url.searchParams.get( 'icon' );
+
+		// Prefer an icon from query, but if a hash (legacy link) includes it, fall-back to that.
+		if ( ! Object.hasOwn( config.icons, iconFromQuery ) && url.hash ) {
+			const iconFromHash = `dashicons-${ url.hash.substring( 1 ) }`;
+			console.log( iconFromQuery, iconFromHash );
+			if ( Object.hasOwn( config.icons, iconFromHash ) ) {
+				url.hash = '';
+				state.selectedIcon = [ iconFromHash ];
+				url.searchParams.set( 'icon', iconFromHash );
+				window.history.replaceState( undefined, undefined, url );
+			}
+		}
+	},
+
 	copyClickHandlers: {
 		css: makeCopyHandler( 'css' ),
 		html: makeCopyHandler( 'html' ),

From db61bb54d31259ebbefcfbfda51735ca158b17a4 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 19:08:05 +0200
Subject: [PATCH 17/28] Disable server-side intermediate derived state

See https://github.com/WordPress/wordpress-develop/pull/7075
---
 .../src/dashicons-page/render.php                   | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 007a264b8..38bab8585 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -65,9 +65,16 @@
 		'iconSectionLabel' => function() {
 			return wp_interactivity_get_context()['section']['label'];
 		},
-		'eachIcon' => function() use ( $icons ) {
-			return $icons[ wp_interactivity_get_context()['icon'] ];
-		},
+
+		/*
+		 * @todo Restore this when Core supports server-side derived state in non-final position.
+		 * @see https://github.com/WordPress/wordpress-develop/pull/7075
+		 * Expected in WordPress 6.6.2
+		 */
+		// 'eachIcon' => function() use ( $icons ) {
+		// 	return $icons[ wp_interactivity_get_context()['icon'] ];
+		// },
+
 		/*
 		 * END: Derived state
 		 */

From 0f8fbcc5994af92e665a327f3f23a9ec47770ec9 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 19:11:49 +0200
Subject: [PATCH 18/28] Remove unused block properties

---
 .../themes/wporg-developer-2023/src/dashicons-page/block.json   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json
index 504a60188..7969d8ae9 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json
@@ -12,8 +12,6 @@
 		"inserter": false,
 		"interactivity": true
 	},
-	"allowedBlocks": [ "wporg/notice" ],
-	"style": "file:../../stylesheets/page-dashicons.css",
 	"render": "file:./render.php",
 	"viewScriptModule": "file:./view.js"
 }

From 9fdbe140f73f2b9afab0df00fb53f154c5daed2f Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Wed, 24 Jul 2024 19:13:11 +0200
Subject: [PATCH 19/28] Remove console.log

---
 .../themes/wporg-developer-2023/src/dashicons-page/view.js       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index 4e32701c1..2b1c0e492 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -56,7 +56,6 @@ const { state } = IAPI.store( 'wporg/dashicons-page', {
 		// Prefer an icon from query, but if a hash (legacy link) includes it, fall-back to that.
 		if ( ! Object.hasOwn( config.icons, iconFromQuery ) && url.hash ) {
 			const iconFromHash = `dashicons-${ url.hash.substring( 1 ) }`;
-			console.log( iconFromQuery, iconFromHash );
 			if ( Object.hasOwn( config.icons, iconFromHash ) ) {
 				url.hash = '';
 				state.selectedIcon = [ iconFromHash ];

From fe83c7823d63ca279ef4dda2d71108b5faec6053 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 26 Jul 2024 09:56:51 +0200
Subject: [PATCH 20/28] Fix incorrect asset version argument, use filemtime

Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>
---
 .../themes/wporg-developer-2023/src/dashicons-page/render.php   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 38bab8585..fbeceb80f 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -8,7 +8,7 @@
 	'dashicons-page',
 	get_stylesheet_directory_uri() . '/stylesheets/page-dashicons.css',
 	array(),
-	get_stylesheet_directory() . '/stylesheets/page-dashicons.css'
+	filemtime( get_stylesheet_directory() . '/stylesheets/page-dashicons.css' )
 );
 
 $icons = array();

From d811054415c88c9ae41b9ba6ab334b72cf033c89 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:02:43 +0200
Subject: [PATCH 21/28] Fix dirname levels lint

---
 .../themes/wporg-developer-2023/src/dashicons-page/index.php    | 2 +-
 .../themes/wporg-developer-2023/src/dashicons-page/render.php   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/index.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/index.php
index ab5ee7496..fb60423eb 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/index.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/index.php
@@ -19,6 +19,6 @@
  */
 function init() {
 	register_block_type(
-		dirname( dirname( __DIR__ ) ) . '/build/dashicons-page/block.json'
+		dirname( __DIR__, 2 ) . '/build/dashicons-page/block.json'
 	);
 }
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index fbeceb80f..3434b7848 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -2,7 +2,7 @@
 
 namespace WordPressdotorg\Theme\Developer_2023\Block_Dashicons_Page;
 
-require_once dirname( dirname( __DIR__ ) ) . '/inc/dashicons.php';
+require_once dirname( __DIR__, 2) . '/inc/dashicons.php';
 
 wp_enqueue_style(
 	'dashicons-page',

From 51a382cc1443bf7b9764b6269563dd1841178459 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:05:26 +0200
Subject: [PATCH 22/28] Fix translation function __ and textdomain wporg

---
 .../wporg-developer-2023/src/dashicons-page/render.php      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 3434b7848..fef9f74e6 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -37,9 +37,9 @@
 	'wporg/dashicons-page',
 	array(
 		'texts' => array(
-			'copyCss' => _( 'Copy this, then paste in your CSS :before selector.' ),
-			'copyHtml' =>  _( 'Copy this, then paste in your HTML.' ),
-			'copyGlyph' => _( 'Copy this, then paste in your Photoshop textfield.' ),
+			'copyCss' => __( 'Copy this, then paste in your CSS :before selector.', 'wporg' ),
+			'copyHtml' =>  __( 'Copy this, then paste in your HTML.', 'wporg' ),
+			'copyGlyph' => __( 'Copy this, then paste in your Photoshop textfield.', 'wporg' ),
 		),
 		'icons' => $icons,
 	)

From 1023929680f3e52f61efb2e850cfe62baa5709a1 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:07:38 +0200
Subject: [PATCH 23/28] Update store namespace to
 wporg/developer/dashicons-page

---
 .../wporg-developer-2023/src/dashicons-page/render.php      | 6 +++---
 .../themes/wporg-developer-2023/src/dashicons-page/view.js  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index fef9f74e6..311e29f5b 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -34,7 +34,7 @@
 }
 
 wp_interactivity_config(
-	'wporg/dashicons-page',
+	'wporg/developer/dashicons-page',
 	array(
 		'texts' => array(
 			'copyCss' => __( 'Copy this, then paste in your CSS :before selector.', 'wporg' ),
@@ -46,7 +46,7 @@
 );
 
 wp_interactivity_state(
-	'wporg/dashicons-page',
+	'wporg/developer/dashicons-page',
 	array(
 		/*
 		 * START: Derived state.
@@ -97,7 +97,7 @@
 );
 
 ?>
-<div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="wporg/dashicons-page" data-wp-init="init">
+<div id="content-area" <?php body_class( 'dashicons-page' ); ?> data-wp-interactive="wporg/developer/dashicons-page" data-wp-init="init">
 	<style data-wp-text="state.style"></style>
 	<main id="main" <?php post_class( 'site-main' ); ?> role="main">
 
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index 2b1c0e492..b7ebcd787 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -1,7 +1,7 @@
 import * as IAPI from '@wordpress/interactivity';
 
-const config = IAPI.getConfig( 'wporg/dashicons-page' );
-const { state } = IAPI.store( 'wporg/dashicons-page', {
+const config = IAPI.getConfig( 'wporg/developer/dashicons-page' );
+const { state } = IAPI.store( 'wporg/developer/dashicons-page', {
 	state: {
 		get iconClass() {
 			return `dashicons ${ IAPI.getContext().icon }`;

From 5734a4f6f7b9341560ac4e849b76fa68a9e48892 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:17:16 +0200
Subject: [PATCH 24/28] Fix =,=> alignment lints

---
 .../src/dashicons-page/render.php             | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 311e29f5b..67e0b12de 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -11,19 +11,19 @@
 	filemtime( get_stylesheet_directory() . '/stylesheets/page-dashicons.css' )
 );
 
-$icons = array();
+$icons          = array();
 $icons_sections = array();
 
 foreach ( \DevHub_Dashicons::get_dashicons() as $section_group => $section ) {
 	$icon_section = array(
 		'label' => $section['label'],
-		'slug' => sanitize_title( $section_group ),
+		'slug'  => sanitize_title( $section_group ),
 		'icons' => array(),
 	);
 	foreach ( $section['icons'] as $k => $v ) {
-		$icons[$k] = $v;
+		$icons[$k]                 = $v;
 		$icons[$k]['sectionLabel'] = $section['label'];
-		$icon_section['icons'][] = $k;
+		$icon_section['icons'][]   = $k;
 	}
 	$icons_sections[] = $icon_section;
 }
@@ -37,8 +37,8 @@
 	'wporg/developer/dashicons-page',
 	array(
 		'texts' => array(
-			'copyCss' => __( 'Copy this, then paste in your CSS :before selector.', 'wporg' ),
-			'copyHtml' =>  __( 'Copy this, then paste in your HTML.', 'wporg' ),
+			'copyCss'   => __( 'Copy this, then paste in your CSS :before selector.', 'wporg' ),
+			'copyHtml'  => __( 'Copy this, then paste in your HTML.', 'wporg' ),
 			'copyGlyph' => __( 'Copy this, then paste in your Photoshop textfield.', 'wporg' ),
 		),
 		'icons' => $icons,
@@ -53,16 +53,16 @@
 		 *
 		 * All these "derived state" getters must be defined in view.js as well
 		 */
-		'iconClass' => function() {
+		'iconClass'           => function() {
 			return 'dashicons ' . wp_interactivity_get_context()['icon'];
 		},
 		'sectionAnchorTarget' => function() {
 			return 'icons-' . wp_interactivity_get_context()['section']['slug'];
 		},
-		'sectionAnchorHref' => function () {
+		'sectionAnchorHref'   => function () {
 			return '#icons-' . wp_interactivity_get_context()['section']['slug'];
 		},
-		'iconSectionLabel' => function() {
+		'iconSectionLabel'    => function() {
 			return wp_interactivity_get_context()['section']['label'];
 		},
 
@@ -72,17 +72,17 @@
 		 * Expected in WordPress 6.6.2
 		 */
 		// 'eachIcon' => function() use ( $icons ) {
-		// 	return $icons[ wp_interactivity_get_context()['icon'] ];
+		//   return $icons[ wp_interactivity_get_context()['icon'] ];
 		// },
 
 		/*
 		 * END: Derived state
 		 */
 
-		'iconsSections' => $icons_sections,
-		'selectedIcon' => array( $selected_icon ),
-		'filter' => '',
-		'style' => '',
+		'iconsSections'       => $icons_sections,
+		'selectedIcon'        => array( $selected_icon ),
+		'filter'              => '',
+		'style'               => '',
 	)
 );
 

From dab9a18af5fa137c234d5ac75a1202d00f424c94 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:18:50 +0200
Subject: [PATCH 25/28] Fix whitespace lints

---
 .../src/dashicons-page/render.php                  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 67e0b12de..54fd397f8 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -2,7 +2,7 @@
 
 namespace WordPressdotorg\Theme\Developer_2023\Block_Dashicons_Page;
 
-require_once dirname( __DIR__, 2) . '/inc/dashicons.php';
+require_once dirname( __DIR__, 2 ) . '/inc/dashicons.php';
 
 wp_enqueue_style(
 	'dashicons-page',
@@ -21,9 +21,9 @@
 		'icons' => array(),
 	);
 	foreach ( $section['icons'] as $k => $v ) {
-		$icons[$k]                 = $v;
-		$icons[$k]['sectionLabel'] = $section['label'];
-		$icon_section['icons'][]   = $k;
+		$icons[ $k ]                 = $v;
+		$icons[ $k ]['sectionLabel'] = $section['label'];
+		$icon_section['icons'][]     = $k;
 	}
 	$icons_sections[] = $icon_section;
 }
@@ -53,16 +53,16 @@
 		 *
 		 * All these "derived state" getters must be defined in view.js as well
 		 */
-		'iconClass'           => function() {
+		'iconClass'           => function () {
 			return 'dashicons ' . wp_interactivity_get_context()['icon'];
 		},
-		'sectionAnchorTarget' => function() {
+		'sectionAnchorTarget' => function () {
 			return 'icons-' . wp_interactivity_get_context()['section']['slug'];
 		},
 		'sectionAnchorHref'   => function () {
 			return '#icons-' . wp_interactivity_get_context()['section']['slug'];
 		},
-		'iconSectionLabel'    => function() {
+		'iconSectionLabel'    => function () {
 			return wp_interactivity_get_context()['section']['label'];
 		},
 

From 44d4287e2a7851c9ece1c2aac2e667dec19c03fb Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 26 Jul 2024 10:30:49 +0200
Subject: [PATCH 26/28] Move dashicons page css into block viewStyle

---
 .../wporg-developer-2023/src/dashicons-page/block.json     | 1 +
 .../wporg-developer-2023/src/dashicons-page/render.php     | 7 -------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json
index 7969d8ae9..9627cb8b7 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/block.json
@@ -13,5 +13,6 @@
 		"interactivity": true
 	},
 	"render": "file:./render.php",
+	"viewStyle": "file:./../../stylesheets/page-dashicons.css",
 	"viewScriptModule": "file:./view.js"
 }
diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 54fd397f8..4c9d0dc91 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -4,13 +4,6 @@
 
 require_once dirname( __DIR__, 2 ) . '/inc/dashicons.php';
 
-wp_enqueue_style(
-	'dashicons-page',
-	get_stylesheet_directory_uri() . '/stylesheets/page-dashicons.css',
-	array(),
-	filemtime( get_stylesheet_directory() . '/stylesheets/page-dashicons.css' )
-);
-
 $icons          = array();
 $icons_sections = array();
 

From 579eeeac6d6a4fb68b5bdf12647e2ccdaed98a11 Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 26 Jul 2024 19:53:57 +0200
Subject: [PATCH 27/28] Fix replace regex to run global and allow -

Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>
---
 .../themes/wporg-developer-2023/src/dashicons-page/view.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
index b7ebcd787..68ea368fe 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/view.js
@@ -24,7 +24,7 @@ const { state } = IAPI.store( 'wporg/developer/dashicons-page', {
 		},
 
 		get style() {
-			const cleanedValue = state.filter.replace( /[^a-zA-Z0-9]/, '' );
+			const cleanedValue = state.filter.replace( /[^a-zA-Z0-9-]/g, '' );
 			return cleanedValue.length < 3
 				? ''
 				: `#iconlist li:not([data-keywords*="${ cleanedValue }" i]) { display: none; }`;

From e24e9c1df0ca62666c9d8a7bcebbebb699448b9a Mon Sep 17 00:00:00 2001
From: Jon Surrell <sirreal@users.noreply.github.com>
Date: Fri, 26 Jul 2024 19:54:17 +0200
Subject: [PATCH 28/28] Add ignore comment on valid user input usage

Co-authored-by: Kelly Dwan <ryelle@users.noreply.github.com>
---
 .../themes/wporg-developer-2023/src/dashicons-page/render.php   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
index 4c9d0dc91..8895b8042 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/dashicons-page/render.php
@@ -21,7 +21,7 @@
 	$icons_sections[] = $icon_section;
 }
 
-$selected_icon = $_GET['icon'] ?? '';
+$selected_icon = $_GET['icon'] ?? ''; // phpcs:ignore WordPress.Security.ValidatedSanitizedInput -- Value checked against icon safelist.
 if ( ! array_key_exists( $selected_icon, $icons ) ) {
 	$selected_icon = array_rand( $icons );
 }