fix: widget not loading

References: #1156

classes/Visualizer/Module/Admin.php

@@ -53,6 +53,7 @@ public function __construct( Visualizer_Plugin $plugin ) {
 		parent::__construct( $plugin );
 		$this->_addAction( 'load-post.php', 'enqueueMediaScripts' );
 		$this->_addAction( 'load-post-new.php', 'enqueueMediaScripts' );
+		$this->_addAction( 'enqueue_block_editor_assets', 'enqueueMediaScripts' );
 		$this->_addAction( 'admin_footer', 'renderTemplates' );
 		$this->_addAction( 'admin_enqueue_scripts', 'enqueueLibraryScripts', null, 0 );
 		$this->_addAction( 'admin_menu', 'registerAdminMenu' );
@@ -330,7 +331,9 @@ public function feedbackReviewTrigger( $dumb ) {
 	 */
 	public function enqueueMediaScripts() {
 		global $typenow;
-		if ( post_type_supports( $typenow, 'editor' ) ) {
+		global $current_screen;
+
+		if ( post_type_supports( $typenow, 'editor' ) || $current_screen->id === 'widgets' ) {
 			wp_enqueue_style( 'visualizer-media', VISUALIZER_ABSURL . 'css/media.css', array( 'media-views' ), Visualizer_Plugin::VERSION );
 
 			// Load all the assets for the different libraries we support.

tests/e2e/specs/gutenberg-editor.spec.js

@@ -31,7 +31,7 @@ test.describe( 'Charts with Gutenberg Editor', () => {
     test('new chart creation', async ( { admin, editor, page } ) => {
         await admin.createNewPost();
         await editor.insertBlock( { name: 'visualizer/chart'} );
-        
+
         await expect( page.getByText('Make a new chart or display') ).toBeVisible();
         await expect( page.getByLabel('Editor content').locator('a') ).toBeVisible();
 
@@ -40,7 +40,7 @@ test.describe( 'Charts with Gutenberg Editor', () => {
         // Create chart via popup.
         await page.frameLocator('iframe').getByRole('button', { name: 'Next' }).click();
         await page.frameLocator('iframe').getByRole('button', { name: 'Create Chart' }).click();
-        
+
         await expect( page.getByRole('button', { name: 'Save', exact: true }) ).toBeVisible();
         await page.getByRole('button', { name: 'Save', exact: true }).click();
         await expect( page.getByRole('button', { name: 'Done' }) ).toBeVisible();
@@ -98,7 +98,7 @@ test.describe( 'Charts with Gutenberg Editor', () => {
         await page.getByRole('button', { name: 'Import from other chart' }).click();
 
         await page.getByRole('button', { name: 'Import data from database' }).click();
-        
+
         const upgradeLinks = await page.locator('a').filter({ hasText: 'Upgrade Now' }).count();
         expect( upgradeLinks ).toBe( 6 );
 
@@ -131,4 +131,21 @@ test.describe( 'Charts with Gutenberg Editor', () => {
         await expect(page.getByLabel('Visualizer', { exact: true }).locator('h1')).toContainText('Visualizer');
         await page.getByRole('button', { name: ' Close dialog' }).click();
     } );
+
+    test( 'check widgets', async ( { admin, editor, page } ) => {
+        await createChartWithAdmin( admin, page );
+
+        await admin.visitAdminPage( 'widgets.php' );
+
+        await page.getByLabel('Close', { exact: true }).click();
+        await page.getByLabel('Toggle block inserter').click();
+        await page.getByPlaceholder('Search').fill('visuali');
+        await page.getByRole('option', { name: ' Visualizer Chart' }).click();
+        await page.locator('div').filter({ hasText: /^Display an existing chart$/ }).click();
+        await page.getByTitle('Insert Chart').first().click();
+
+        await expect(page.getByLabel('Block: Visualizer Chart')).toContainText('Visualizer');
+        await expect(page.locator('rect').first()).toBeVisible();
+
+    } );
 } );