diff --git a/config/webpack/paths.js b/config/webpack/paths.js index ed42efbbc78..d168fde0945 100644 --- a/config/webpack/paths.js +++ b/config/webpack/paths.js @@ -53,7 +53,6 @@ const getEntries = ( sourceDirectory = "./packages/js/src" ) => ( { workouts: `${ sourceDirectory }/workouts.js`, "frontend-inspector-resources": `${ sourceDirectory }/frontend-inspector-resources.js`, "ai-generator": `${ sourceDirectory }/ai-generator/initialize.js`, - "ai-content-planner": `${ sourceDirectory }/ai-content-planner/initialize.js`, "ai-consent": `${ sourceDirectory }/ai-consent/initialize.js`, plans: `${ sourceDirectory }/plans/initialize.js`, } ); diff --git a/packages/js/src/components/fills/MetaboxFill.js b/packages/js/src/components/fills/MetaboxFill.js index 8b832b29fdb..4b77f13ba63 100644 --- a/packages/js/src/components/fills/MetaboxFill.js +++ b/packages/js/src/components/fills/MetaboxFill.js @@ -1,6 +1,6 @@ /* External dependencies */ import { useSelect } from "@wordpress/data"; -import { Fragment } from "@wordpress/element"; +import { Fragment, lazy, Suspense } from "@wordpress/element"; import { Fill } from "@wordpress/components"; import { __ } from "@wordpress/i18n"; import PropTypes from "prop-types"; @@ -24,9 +24,14 @@ import { BlackFridayPromotion } from "../BlackFridayPromotion"; import { withMetaboxWarningsCheck } from "../higherorder/withMetaboxWarningsCheck"; import isBlockEditor from "../../helpers/isBlockEditor"; import useToggleMarkerStatus from "./hooks/useToggleMarkerStatus"; -import ContentPlannerEditorItem from "../../ai-content-planner/containers/content-planner-editor-item"; import { EditorIntro } from "../EditorIntro"; +// Lazy-loaded so the planner module is not bundled into block-editor.js. +const ContentPlannerEditorItem = lazy( () => import( + /* webpackChunkName: "ai-content-planner-editor" */ + "../../ai-content-planner/containers/content-planner-editor-item" +) ); + const BlackFridayPromotionWithMetaboxWarningsCheck = withMetaboxWarningsCheck( BlackFridayPromotion ); /* eslint-disable complexity */ @@ -77,7 +82,9 @@ export default function MetaboxFill( { settings } ) { ) } { isPost && isBlockEditorActive && isAiFeatureActive && - + + + } { settings.isKeywordAnalysisActive && import( + /* webpackChunkName: "ai-content-planner-editor" */ + "../../ai-content-planner/containers/content-planner-editor-item" +) ); + /* eslint-disable complexity */ /** * Creates the SidebarFill component. @@ -66,7 +71,9 @@ export default function SidebarFill( { settings } ) { { isPost && isBlockEditorActive && isAiFeatureActive && - + + + } { settings.isKeywordAnalysisActive && initContentPlanner() ); } const yoastTab = getQueryArg( window.location.href, "yoast-tab" ); diff --git a/src/ai/content-planner/user-interface/content-planner-integration.php b/src/ai/content-planner/user-interface/content-planner-integration.php index dd399c599f6..75d40e032ce 100644 --- a/src/ai/content-planner/user-interface/content-planner-integration.php +++ b/src/ai/content-planner/user-interface/content-planner-integration.php @@ -61,8 +61,6 @@ public function __construct( */ public function register_hooks() { \add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_assets' ] ); - // Enqueue after Elementor_Premium integration, which re-registers the assets. - \add_action( 'elementor/editor/before_enqueue_scripts', [ $this, 'enqueue_assets' ], 11 ); } /** @@ -77,12 +75,12 @@ public function get_script_data(): array { } /** - * Localizes the content planner script data. + * Localizes the content planner script data onto the block-editor bundle, + * which lazy-loads the planner module on demand. * * @return void */ public function enqueue_assets() { - $this->asset_manager->enqueue_script( 'ai-content-planner' ); - $this->asset_manager->localize_script( 'ai-content-planner', 'wpseoContentPlanner', $this->get_script_data() ); + $this->asset_manager->localize_script( 'block-editor', 'wpseoContentPlanner', $this->get_script_data() ); } }