diff --git a/src/experiments/title-generation/components/TitleToolbar.tsx b/src/experiments/title-generation/components/TitleToolbar.tsx
index 21a83dc4e..7c1178c2e 100644
--- a/src/experiments/title-generation/components/TitleToolbar.tsx
+++ b/src/experiments/title-generation/components/TitleToolbar.tsx
@@ -5,7 +5,7 @@
/**
* WordPress dependencies
*/
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { Button, ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { dispatch, select, useDispatch } from '@wordpress/data';
import { store as editorStore, PostTypeSupportCheck } from '@wordpress/editor';
import { useState } from '@wordpress/element';
@@ -62,7 +62,13 @@ async function generateTitle(
*
* @return {JSX.Element} The toolbar component.
*/
-export default function TitleToolbar(): JSX.Element | null {
+interface TitleToolbarProps {
+ isStandalone?: boolean;
+}
+
+export default function TitleToolbar( {
+ isStandalone = false,
+}: TitleToolbarProps ): JSX.Element | null {
const postId = select( editorStore ).getCurrentPostId();
const title = select( editorStore ).getEditedPostAttribute( 'title' );
@@ -79,6 +85,10 @@ export default function TitleToolbar(): JSX.Element | null {
* Handles the generate/re-generate button click.
*/
const handleGenerate = async () => {
+ if ( isGenerating ) {
+ return;
+ }
+
const content = select( editorStore ).getEditedPostContent();
setIsGenerating( true );
( dispatch( noticesStore ) as any ).removeNotice(
@@ -112,17 +122,30 @@ export default function TitleToolbar(): JSX.Element | null {
return (
-
-
{ buttonLabel }
-
-
+
+ ) : (
+
+
+ { buttonLabel }
+
+
+ ) }
);
}
diff --git a/src/experiments/title-generation/components/TitleToolbarWrapper.tsx b/src/experiments/title-generation/components/TitleToolbarWrapper.tsx
index 3213449e9..526a5d0d3 100644
--- a/src/experiments/title-generation/components/TitleToolbarWrapper.tsx
+++ b/src/experiments/title-generation/components/TitleToolbarWrapper.tsx
@@ -293,7 +293,7 @@ function TitleToolbarWrapper(): JSX.Element {
// Render the toolbar into the container
root = createRoot( toolbarContainer );
- root.render( );
+ root.render( );
// Create and attach focus/blur handlers for title input
const titleHandlers = createFocusBlurHandlers(