feat: add edit d3 to gutenberg

Author: HardeepAsrani

classes/Visualizer/ChartBuilder/src/AIBuilder/index.js

@@ -944,7 +944,20 @@ export default function AIBuilder( { onClose, initialChartId = null } ) {
 				) }
 
 				{ shortcode && (
-					<PillBtn onClick={ () => { onClose(); window.location.reload(); } } disabled={ isLocked } bg={ C.dark }>
+					<PillBtn
+						onClick={ () => {
+							onClose();
+							if ( typeof window.vizAIBuilderDoneCallback === 'function' ) {
+								const cb = window.vizAIBuilderDoneCallback;
+								window.vizAIBuilderDoneCallback = null;
+								cb();
+							} else {
+								window.location.reload();
+							}
+						} }
+						disabled={ isLocked }
+						bg={ C.dark }
+					>
 						{ __( 'Done', 'visualizer' ) }
 					</PillBtn>
 				) }

classes/Visualizer/Gutenberg/Block.php

@@ -149,6 +149,54 @@ public function enqueue_gutenberg_scripts() {
 
 		// Enqueue frontend and editor block styles
 		wp_enqueue_style( 'visualizer-gutenberg-block', $stylePath, array( 'visualizer-datatables' ), $asset['version'] );
+
+		// Enqueue ChartBuilder (AI Builder) so the D3 edit modal is available in the block editor.
+		$chart_builder_asset = VISUALIZER_ABSPATH . '/classes/Visualizer/ChartBuilder/build/index.asset.php';
+		if ( file_exists( $chart_builder_asset ) && ! wp_script_is( 'visualizer-chart-builder', 'enqueued' ) ) {
+			/**
+			 * Ignore missing build asset in source checkout.
+			 *
+			 * @phpstan-ignore-next-line
+			 */
+			$cb_asset = include $chart_builder_asset;
+			wp_enqueue_script(
+				'visualizer-chart-builder',
+				VISUALIZER_ABSURL . 'classes/Visualizer/ChartBuilder/build/index.js',
+				$cb_asset['dependencies'],
+				$cb_asset['version'],
+				true
+			);
+			wp_enqueue_style(
+				'visualizer-chart-builder',
+				VISUALIZER_ABSURL . 'classes/Visualizer/ChartBuilder/build/style-index.css',
+				array(),
+				$cb_asset['version']
+			);
+			$chart_builder_css = VISUALIZER_ABSPATH . '/classes/Visualizer/ChartBuilder/build/index.css';
+			if ( file_exists( $chart_builder_css ) ) {
+				wp_enqueue_style(
+					'visualizer-chart-builder-runtime',
+					VISUALIZER_ABSURL . 'classes/Visualizer/ChartBuilder/build/index.css',
+					array( 'visualizer-chart-builder' ),
+					$cb_asset['version']
+				);
+			}
+			wp_localize_script(
+				'visualizer-chart-builder',
+				'vizAIBuilder',
+				array(
+					'ajaxUrl' => admin_url( 'admin-ajax.php' ),
+					'nonce'   => wp_create_nonce( 'visualizer-ai-builder' ),
+					'isPro'   => Visualizer_Module::is_pro(),
+				)
+			);
+			// Inject the mount point the ChartBuilder React app needs.
+			wp_add_inline_script(
+				'visualizer-chart-builder',
+				'document.body.insertAdjacentHTML("beforeend","<div id=\"viz-chart-builder-root\"></div>");',
+				'before'
+			);
+		}
 	}
 	/**
 	 * Hook server side rendering into render callback

classes/Visualizer/Gutenberg/src/Components/ChartSelect.js

@@ -156,13 +156,18 @@ class ChartSelect extends Component {
         }
 
 		const openEditChart = ( chartId ) => {
-			const baseURL = ( window.visualizerLocalize.chartEditUrl ) ? window.visualizerLocalize.chartEditUrl : '';
 			if ( isD3 ) {
-				if ( window.visualizerLocalize && window.visualizerLocalize.adminPage ) {
-					window.open( window.visualizerLocalize.adminPage, '_blank' );
+				// Set a callback the AI Builder will invoke instead of reloading the page.
+				window.vizAIBuilderDoneCallback = async() => {
+					await this.props.getChartData( chartId );
+				};
+				if ( typeof window.vizOpenAIBuilderEdit === 'function' ) {
+					window.vizOpenAIBuilderEdit( chartId );
 				}
 				return;
 			}
+
+			const baseURL = ( window.visualizerLocalize.chartEditUrl ) ? window.visualizerLocalize.chartEditUrl : '';
 			let view = new visualizerMediaView.Chart(
 				{
 					action: `${baseURL}?action=visualizer-edit-chart&library=yes&chart=` + chartId
@@ -172,12 +177,11 @@ class ChartSelect extends Component {
 				let result = await apiFetch({ path: `wp/v2/visualizer/${chartId}` });
 				await this.props.editSettings( result['chart_data']['visualizer-settings']);
 				await this.props.getChartData( chartId );
+				view.close();
 			};
 			// eslint-disable-next-line camelcase
 			window.send_to_editor = function() {
-				updateChartState().then( () => {
-					view.close();
-				});
+				updateChartState();
 			};
 
 			view.open();