Upgrade fragment-style links to query param

WordPress · Jul 24, 2024 · 4ee4665 · 4ee4665
1 parent b33aa49
commit 4ee4665
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 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
@@ -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
@@ -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' ),