perf: lazy-load AI Content Planner from the block editor

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`,
 } );

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 } ) {
 					</SidebarItem>
 				) }
 				{ isPost && isBlockEditorActive && isAiFeatureActive && <SidebarItem key="content-planner" renderPriority={ 2 }>
-					<ContentPlannerEditorItem location="metabox" />
+					<Suspense fallback={ null }>
+						<ContentPlannerEditorItem location="metabox" />
+					</Suspense>
 				</SidebarItem> }
 				{ settings.isKeywordAnalysisActive && <SidebarItem key="keyword-input" renderPriority={ 8 }>
 					<KeywordInput

packages/js/src/components/fills/SidebarFill.js

@@ -1,6 +1,6 @@
 /* External dependencies */
 import { Fill } from "@wordpress/components";
-import { Fragment } from "@wordpress/element";
+import { Fragment, lazy, Suspense } from "@wordpress/element";
 import PropTypes from "prop-types";
 import { __ } from "@wordpress/i18n";
 import { get } from "lodash";
@@ -23,9 +23,14 @@ import WincherSEOPerformanceModal from "../../containers/WincherSEOPerformanceMo
 import KeywordUpsell from "../modals/KeywordUpsell";
 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"
+) );
+
 /* eslint-disable complexity */
 /**
  * Creates the SidebarFill component.
@@ -66,7 +71,9 @@ export default function SidebarFill( { settings } ) {
 					</EditorIntro>
 				</SidebarItem>
 				{ isPost && isBlockEditorActive && isAiFeatureActive && <SidebarItem key="content-planner" renderPriority={ 2 }>
-					<ContentPlannerEditorItem location="sidebar" />
+					<Suspense fallback={ null }>
+						<ContentPlannerEditorItem location="sidebar" />
+					</Suspense>
 				</SidebarItem> }
 				{ settings.isKeywordAnalysisActive && <SidebarItem key="keyword-input" renderPriority={ 8 }>
 					<KeywordInput

packages/js/src/initializers/block-editor-integration.js

@@ -27,7 +27,6 @@ import SidebarFill from "../containers/SidebarFill";
 import WincherPostPublish from "../containers/WincherPostPublish";
 import { isAnnotationAvailable } from "../decorator/gutenberg";
 import { link } from "../inline-links/edit-link";
-import initContentPlanner from "../ai-content-planner/initialize";
 import { getIsAiFeatureEnabled } from "../redux/selectors/preferences";
 
 /**
@@ -211,7 +210,11 @@ export default function initBlockEditorIntegration( store ) {
 	registerFormats();
 	initializeAnnotations( store );
 	if ( getIsAiFeatureEnabled() ) {
-		initContentPlanner();
+		// Lazy-loaded so the planner module is not bundled into block-editor.js.
+		import(
+			/* webpackChunkName: "ai-content-planner-editor" */
+			"../ai-content-planner/initialize"
+		).then( ( { "default": initContentPlanner } ) => initContentPlanner() );
 	}
 
 	const yoastTab = getQueryArg( window.location.href, "yoast-tab" );

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() );
 	}
 }