From 07d5dc7446f0cd29af52c2d550c11867ea4c6035 Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Thu, 13 Jul 2023 15:05:24 -0600 Subject: [PATCH 1/8] Add initial integration into the new Command center --- includes/Classifai/Plugin.php | 8 ++++++++ src/js/gutenberg-plugins/commands.js | 26 ++++++++++++++++++++++++++ webpack.config.js | 1 + 3 files changed, 35 insertions(+) create mode 100644 src/js/gutenberg-plugins/commands.js diff --git a/includes/Classifai/Plugin.php b/includes/Classifai/Plugin.php index 4587dfa18..cad54a30a 100644 --- a/includes/Classifai/Plugin.php +++ b/includes/Classifai/Plugin.php @@ -188,6 +188,14 @@ public function enqueue_admin_assets() { 'ajax_nonce' => wp_create_nonce( 'classifai' ), ] ); + + wp_enqueue_script( + 'classifai-commands', + CLASSIFAI_PLUGIN_URL . 'dist/commands.js', + get_asset_info( 'commands', 'dependencies' ), + get_asset_info( 'commands', 'version' ), + true + ); } /** diff --git a/src/js/gutenberg-plugins/commands.js b/src/js/gutenberg-plugins/commands.js new file mode 100644 index 000000000..b746915b9 --- /dev/null +++ b/src/js/gutenberg-plugins/commands.js @@ -0,0 +1,26 @@ +import { useCommand } from '@wordpress/commands'; +import { settings } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; +import { registerPlugin } from '@wordpress/plugins'; + +/** + * Any general ClassifAI commands can go here. + * + * For commands specific to a certain feature, + * those should probably be placed with the + * rest of the functionality for that feature. + */ +const Commands = () => { + useCommand( { + name: 'classifai/settings', + label: __( 'ClassifAI settings', 'classifai' ), + icon: settings, + callback: () => { + document.location.href = 'tools.php?page=classifai'; + }, + } ); + + return null; +}; + +registerPlugin( 'classifai-commands', { render: Commands } ); diff --git a/webpack.config.js b/webpack.config.js index 5e24a9ca0..2c689f67c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -29,6 +29,7 @@ module.exports = { 'generate-title-classic': [ './src/js/openai/classic-editor-title-generator.js', ], + commands: [ './src/js/gutenberg-plugins/commands.js' ], }, module: { rules: [ From 7931d1fa795543dca38ac5e3d9a449f5930b118f Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Thu, 13 Jul 2023 15:05:44 -0600 Subject: [PATCH 2/8] Add a command that can trigger excerpt generation --- src/js/post-excerpt/index.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/js/post-excerpt/index.js b/src/js/post-excerpt/index.js index c2bea9902..b7aa77dfa 100644 --- a/src/js/post-excerpt/index.js +++ b/src/js/post-excerpt/index.js @@ -2,9 +2,11 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { useCommand } from '@wordpress/commands'; import { dispatch } from '@wordpress/data'; import { PluginDocumentSettingPanel } from '@wordpress/edit-post'; import { PostExcerptCheck } from '@wordpress/editor'; +import { edit } from '@wordpress/icons'; import { registerPlugin } from '@wordpress/plugins'; /** @@ -20,6 +22,26 @@ import MaybeExcerptPanel from './maybe-excerpt-panel'; // Add our own custom Post Excerpt panel. const PostExcerpt = () => { + useCommand( { + name: 'classifai/generate-excerpt', + label: __( 'Generate excerpt', 'classifai' ), + icon: edit, + callback: ( { close } ) => { + const button = document.querySelector( + '.editor-post-excerpt button' + ); + + close(); + + if ( button ) { + button.scrollIntoView( { + block: 'center', + } ); + button.click(); + } + }, + } ); + return ( From 7c8eceee0a3a76e8227cd29c68e6129d0cdc920a Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Thu, 13 Jul 2023 15:12:34 -0600 Subject: [PATCH 3/8] Add a command that can trigger title generation --- src/js/gutenberg-plugins/post-status-info.js | 26 ++++++++++++++++++++ src/js/post-excerpt/index.js | 22 ++++++++++------- 2 files changed, 39 insertions(+), 9 deletions(-) diff --git a/src/js/gutenberg-plugins/post-status-info.js b/src/js/gutenberg-plugins/post-status-info.js index f72d3a99e..816b4a32c 100644 --- a/src/js/gutenberg-plugins/post-status-info.js +++ b/src/js/gutenberg-plugins/post-status-info.js @@ -1,8 +1,10 @@ +import { useCommand } from '@wordpress/commands'; import { dispatch, select } from '@wordpress/data'; import { PluginPostStatusInfo } from '@wordpress/edit-post'; import { PostTypeSupportCheck } from '@wordpress/editor'; import { Button, Modal, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { edit } from '@wordpress/icons'; import { registerPlugin } from '@wordpress/plugins'; import { useState } from '@wordpress/element'; import apiFetch from '@wordpress/api-fetch'; @@ -18,6 +20,30 @@ const RenderError = ( { error } ) => { }; const PostStatusInfo = () => { + useCommand( { + name: 'classifai/generate-titles', + label: __( 'Generate titles', 'classifai' ), + icon: edit, + callback: ( { close } ) => { + dispatch( 'core/edit-post' ) + .toggleEditorPanelOpened( 'post-status' ) + .then( () => { + const button = document.querySelector( + '.classifai-post-status button' + ); + + close(); + + if ( button ) { + button.scrollIntoView( { + block: 'center', + } ); + button.click(); + } + } ); + }, + } ); + const [ isLoading, setIsLoading ] = useState( false ); const [ isOpen, setOpen ] = useState( false ); const [ error, setError ] = useState( false ); diff --git a/src/js/post-excerpt/index.js b/src/js/post-excerpt/index.js index b7aa77dfa..6c1e7b8ae 100644 --- a/src/js/post-excerpt/index.js +++ b/src/js/post-excerpt/index.js @@ -27,18 +27,22 @@ const PostExcerpt = () => { label: __( 'Generate excerpt', 'classifai' ), icon: edit, callback: ( { close } ) => { - const button = document.querySelector( - '.editor-post-excerpt button' - ); + dispatch( 'core/edit-post' ) + .toggleEditorPanelOpened( 'post-excerpt' ) + .then( () => { + const button = document.querySelector( + '.editor-post-excerpt button' + ); - close(); + close(); - if ( button ) { - button.scrollIntoView( { - block: 'center', + if ( button ) { + button.scrollIntoView( { + block: 'center', + } ); + button.click(); + } } ); - button.click(); - } }, } ); From 15e57e48c532df478a8abc14e3cd0cb0c18a6cac Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Thu, 13 Jul 2023 15:47:02 -0600 Subject: [PATCH 4/8] Switch to using useCommandLoader so we can only load the commands we want. Move all commands into one file --- src/js/gutenberg-plugins/commands.js | 77 ++++++++++++++++---- src/js/gutenberg-plugins/post-status-info.js | 26 ------- src/js/post-excerpt/index.js | 26 ------- 3 files changed, 61 insertions(+), 68 deletions(-) diff --git a/src/js/gutenberg-plugins/commands.js b/src/js/gutenberg-plugins/commands.js index b746915b9..5f5e223d1 100644 --- a/src/js/gutenberg-plugins/commands.js +++ b/src/js/gutenberg-plugins/commands.js @@ -1,23 +1,68 @@ -import { useCommand } from '@wordpress/commands'; -import { settings } from '@wordpress/icons'; +import { useCommandLoader } from '@wordpress/commands'; +import { edit, settings } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { registerPlugin } from '@wordpress/plugins'; -/** - * Any general ClassifAI commands can go here. - * - * For commands specific to a certain feature, - * those should probably be placed with the - * rest of the functionality for that feature. - */ const Commands = () => { - useCommand( { - name: 'classifai/settings', - label: __( 'ClassifAI settings', 'classifai' ), - icon: settings, - callback: () => { - document.location.href = 'tools.php?page=classifai'; - }, + const getCommandLoader = () => { + const commands = []; + const excerptButton = document.querySelector( + '.editor-post-excerpt button' + ); + const titleButton = document.querySelector( + '.classifai-post-status button' + ); + + // Command to open the ClassifAI settings page. + commands.push( { + name: 'classifai/settings', + label: __( 'ClassifAI settings', 'classifai' ), + icon: settings, + callback: () => { + document.location.href = 'tools.php?page=classifai'; + }, + } ); + + // Command to generate an excerpt. + if ( excerptButton ) { + commands.push( { + name: 'classifai/generate-excerpt', + label: __( 'Generate excerpt', 'classifai' ), + icon: edit, + callback: ( { close } ) => { + close(); + + excerptButton.scrollIntoView( { + block: 'center', + } ); + excerptButton.click(); + }, + } ); + } + + // Command to generate titles. + if ( titleButton ) { + commands.push( { + name: 'classifai/generate-titles', + label: __( 'Generate titles', 'classifai' ), + icon: edit, + callback: ( { close } ) => { + close(); + + titleButton.scrollIntoView( { + block: 'center', + } ); + titleButton.click(); + }, + } ); + } + + return { commands }; + }; + + useCommandLoader( { + name: 'classifai', + hook: getCommandLoader, } ); return null; diff --git a/src/js/gutenberg-plugins/post-status-info.js b/src/js/gutenberg-plugins/post-status-info.js index 816b4a32c..f72d3a99e 100644 --- a/src/js/gutenberg-plugins/post-status-info.js +++ b/src/js/gutenberg-plugins/post-status-info.js @@ -1,10 +1,8 @@ -import { useCommand } from '@wordpress/commands'; import { dispatch, select } from '@wordpress/data'; import { PluginPostStatusInfo } from '@wordpress/edit-post'; import { PostTypeSupportCheck } from '@wordpress/editor'; import { Button, Modal, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { edit } from '@wordpress/icons'; import { registerPlugin } from '@wordpress/plugins'; import { useState } from '@wordpress/element'; import apiFetch from '@wordpress/api-fetch'; @@ -20,30 +18,6 @@ const RenderError = ( { error } ) => { }; const PostStatusInfo = () => { - useCommand( { - name: 'classifai/generate-titles', - label: __( 'Generate titles', 'classifai' ), - icon: edit, - callback: ( { close } ) => { - dispatch( 'core/edit-post' ) - .toggleEditorPanelOpened( 'post-status' ) - .then( () => { - const button = document.querySelector( - '.classifai-post-status button' - ); - - close(); - - if ( button ) { - button.scrollIntoView( { - block: 'center', - } ); - button.click(); - } - } ); - }, - } ); - const [ isLoading, setIsLoading ] = useState( false ); const [ isOpen, setOpen ] = useState( false ); const [ error, setError ] = useState( false ); diff --git a/src/js/post-excerpt/index.js b/src/js/post-excerpt/index.js index 6c1e7b8ae..c2bea9902 100644 --- a/src/js/post-excerpt/index.js +++ b/src/js/post-excerpt/index.js @@ -2,11 +2,9 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useCommand } from '@wordpress/commands'; import { dispatch } from '@wordpress/data'; import { PluginDocumentSettingPanel } from '@wordpress/edit-post'; import { PostExcerptCheck } from '@wordpress/editor'; -import { edit } from '@wordpress/icons'; import { registerPlugin } from '@wordpress/plugins'; /** @@ -22,30 +20,6 @@ import MaybeExcerptPanel from './maybe-excerpt-panel'; // Add our own custom Post Excerpt panel. const PostExcerpt = () => { - useCommand( { - name: 'classifai/generate-excerpt', - label: __( 'Generate excerpt', 'classifai' ), - icon: edit, - callback: ( { close } ) => { - dispatch( 'core/edit-post' ) - .toggleEditorPanelOpened( 'post-excerpt' ) - .then( () => { - const button = document.querySelector( - '.editor-post-excerpt button' - ); - - close(); - - if ( button ) { - button.scrollIntoView( { - block: 'center', - } ); - button.click(); - } - } ); - }, - } ); - return ( From 9ca324e8b5a05804f3391a023afa5261d116bb5d Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Fri, 14 Jul 2023 08:41:40 -0600 Subject: [PATCH 5/8] Make sure the wp-commands scripts exist before we use them --- includes/Classifai/Plugin.php | 16 +++++++++------- src/js/gutenberg-plugins/commands.js | 4 +++- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/includes/Classifai/Plugin.php b/includes/Classifai/Plugin.php index cad54a30a..d9aad7b04 100644 --- a/includes/Classifai/Plugin.php +++ b/includes/Classifai/Plugin.php @@ -189,13 +189,15 @@ public function enqueue_admin_assets() { ] ); - wp_enqueue_script( - 'classifai-commands', - CLASSIFAI_PLUGIN_URL . 'dist/commands.js', - get_asset_info( 'commands', 'dependencies' ), - get_asset_info( 'commands', 'version' ), - true - ); + if ( wp_script_is( 'wp-commands', 'registered' ) ) { + wp_enqueue_script( + 'classifai-commands', + CLASSIFAI_PLUGIN_URL . 'dist/commands.js', + get_asset_info( 'commands', 'dependencies' ), + get_asset_info( 'commands', 'version' ), + true + ); + } } /** diff --git a/src/js/gutenberg-plugins/commands.js b/src/js/gutenberg-plugins/commands.js index 5f5e223d1..af7ebfb4e 100644 --- a/src/js/gutenberg-plugins/commands.js +++ b/src/js/gutenberg-plugins/commands.js @@ -68,4 +68,6 @@ const Commands = () => { return null; }; -registerPlugin( 'classifai-commands', { render: Commands } ); +if ( 'function' === typeof useCommandLoader ) { + registerPlugin( 'classifai-commands', { render: Commands } ); +} From b8af3789167ff68cf06bf81da4a23e2831942fcd Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Fri, 14 Jul 2023 08:48:06 -0600 Subject: [PATCH 6/8] Add classname to excerpt button. Use button class names in our selectors --- src/js/gutenberg-plugins/commands.js | 4 ++-- src/js/post-excerpt/panel.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/js/gutenberg-plugins/commands.js b/src/js/gutenberg-plugins/commands.js index af7ebfb4e..1804349ed 100644 --- a/src/js/gutenberg-plugins/commands.js +++ b/src/js/gutenberg-plugins/commands.js @@ -7,10 +7,10 @@ const Commands = () => { const getCommandLoader = () => { const commands = []; const excerptButton = document.querySelector( - '.editor-post-excerpt button' + '.editor-post-excerpt button.classifai-post-excerpt' ); const titleButton = document.querySelector( - '.classifai-post-status button' + '.classifai-post-status button.title' ); // Command to open the ClassifAI settings page. diff --git a/src/js/post-excerpt/panel.js b/src/js/post-excerpt/panel.js index 6a17ca582..c50a52848 100644 --- a/src/js/post-excerpt/panel.js +++ b/src/js/post-excerpt/panel.js @@ -55,6 +55,7 @@ function PostExcerpt( { excerpt, onUpdateExcerpt } ) { ) }