Make the command registration dynamic

Yoast · May 2, 2024 · 3b71ae1 · 3b71ae1
1 parent ba957d1
commit 3b71ae1
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 25 deletions.
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
@@ -26,6 +26,7 @@ const wordpressPackages = [
 	"@wordpress/api-fetch",
 	"@wordpress/block-editor",
 	"@wordpress/blocks",
+	"@wordpress/commands",
 	"@wordpress/components",
 	"@wordpress/compose",
 	"@wordpress/data",

diff --git a/js/src/command-palette.js b/js/src/command-palette.js
@@ -1,3 +1,4 @@
+import { useCommandLoader } from '@wordpress/commands';
 import { select } from "@wordpress/data";
 import { __ } from '@wordpress/i18n';
 import { registerPlugin } from '@wordpress/plugins';
@@ -11,32 +12,49 @@ registerPlugin(
 	'duplicate-post-command-palette',
 	{
 		render: () => {
-			const currentPostStatus = select( 'core/editor' ).getEditedPostAttribute( 'status' );
+			useCommandLoader(
+				{
+					name: 'duplicate-post/command-palette',
+					hook: useDuplicatePostCommandLoader,
+				}
+			);
+		}
+	}
+);
+
+function useDuplicatePostCommandLoader( { search } ) {
+	const commands = [];
+
+	const currentPostStatus = select( 'core/editor' ).getEditedPostAttribute( 'status' );
 
-			if ( duplicatePost.newDraftLink !== '' ) {
-				wp.commands.useCommand(
-					{
-						name: "duplicate-post/new-draft",
-						label: __( "Copy to a new draft", "duplicate-post" ),
-						icon: icon,
-						callback: () => {
-							document.location = duplicatePost.newDraftLink
-						},
-					}
-				);
+	if ( duplicatePost.newDraftLink !== '' ) {
+		commands.push(
+			{
+				name: "duplicate-post/new-draft",
+				label: __( "Copy to a new draft", "duplicate-post" ),
+				icon: icon,
+				callback: () => {
+					document.location = duplicatePost.newDraftLink
+				},
 			}
-			if (  currentPostStatus === 'publish' && duplicatePost.rewriteAndRepublishLink !== '' ) {
-				wp.commands.useCommand(
-					{
-						name: "duplicate-post/rewrite-republish",
-						label: __( "Rewrite & Republish", "duplicate-post" ),
-						icon: icon,
-						callback: () => {
-							document.location = duplicatePost.rewriteAndRepublishLink
-						},
-					}
-				);
+		);
+	}
+
+	if (  currentPostStatus === 'publish' && duplicatePost.rewriteAndRepublishLink !== '' ) {
+		commands.push(
+			{
+				name: "duplicate-post/rewrite-republish",
+				label: __( "Rewrite & Republish", "duplicate-post" ),
+				icon: icon,
+				callback: () => {
+					document.location = duplicatePost.rewriteAndRepublishLink
+				},
 			}
-		}
+		);
 	}
-);
+
+	return {
+		commands,
+		isLoading: false,
+	};
+}