From a3dda778a72e0d3c0b3341007a6d614f8dfc94e1 Mon Sep 17 00:00:00 2001
From: Anthony Ledesma <30462574+AnthonyLedesma@users.noreply.github.com>
Date: Thu, 7 Sep 2023 13:46:39 -0700
Subject: [PATCH] Enqueue the registered scripts from block.json (#2566)

* enqueue the registered scripts from block.json

* fix the test
---
 includes/class-coblocks-block-assets.php      |  4 ++--
 src/blocks/counter/block.json                 |  3 ++-
 src/blocks/counter/test/counter.cypress.js    | 21 ++++++++++++++++++
 src/blocks/events/block.json                  |  1 +
 src/blocks/events/test/events.cypress.js      | 18 +++++++++++++++
 src/blocks/gist/block.json                    |  1 +
 src/blocks/gist/test/gist.cypress.js          | 22 +++++++++++++++++++
 src/blocks/post-carousel/block.json           |  1 +
 .../test/post-carousel.cypress.js             | 17 ++++++++++++++
 9 files changed, 85 insertions(+), 3 deletions(-)

diff --git a/includes/class-coblocks-block-assets.php b/includes/class-coblocks-block-assets.php
index dd38f6007cf..09bc7720e0c 100644
--- a/includes/class-coblocks-block-assets.php
+++ b/includes/class-coblocks-block-assets.php
@@ -449,7 +449,7 @@ public function frontend_scripts() {
 		// Post Carousel block script.
 		wp_register_script(
 			'coblocks-post-carousel',
-			$this->assets_dir . 'coblocks-post-carousel.js',
+			$this->assets_dir . 'coblocks-post-carousel-script.js',
 			array(),
 			COBLOCKS_VERSION,
 			true
@@ -467,7 +467,7 @@ public function frontend_scripts() {
 		// Events block.
 		wp_register_script(
 			'coblocks-events',
-			$this->assets_dir . 'coblocks-events.js',
+			$this->assets_dir . 'coblocks-events-script.js',
 			array(),
 			COBLOCKS_VERSION,
 			true
diff --git a/src/blocks/counter/block.json b/src/blocks/counter/block.json
index 147343374a6..73665efabe0 100644
--- a/src/blocks/counter/block.json
+++ b/src/blocks/counter/block.json
@@ -44,5 +44,6 @@
 			}
 		}
 	},
-	"editorScript": ["coblocks-13"]
+	"editorScript": ["coblocks-13"],
+	"viewScript": ["coblocks-counter-script"]
 }
diff --git a/src/blocks/counter/test/counter.cypress.js b/src/blocks/counter/test/counter.cypress.js
index ea065e5b3e7..d5ca34d707d 100644
--- a/src/blocks/counter/test/counter.cypress.js
+++ b/src/blocks/counter/test/counter.cypress.js
@@ -102,4 +102,25 @@ describe( 'Test CoBlocks Counter Block', function() {
 
 		helpers.checkForBlockErrors( 'coblocks/counter' );
 	} );
+
+	/**
+	 * Test that we can add counter block and use locale formatting controls
+	 * and save block without errors.
+	 */
+	it( 'Test counter block properly enqueues its scripts.', function() {
+		helpers.addBlockToPost( 'coblocks/counter', true );
+
+		cy.get( '.wp-block-coblocks-counter.rich-text' ).first().focus().type( counterData.counterText );
+		cy.get( '.wp-block-coblocks-counter.rich-text' ).last().focus().type( counterData.counterDescription );
+		cy.get( '.wp-block-coblocks-counter.rich-text' ).first().contains( '10000 hours' );
+
+		helpers.savePage();
+		helpers.checkForBlockErrors( 'coblocks/counter' );
+
+		helpers.viewPage();
+
+		cy.get( "script[src*='coblocks-counter-script']" );
+
+		helpers.editPage();
+	} );
 } );
diff --git a/src/blocks/events/block.json b/src/blocks/events/block.json
index 608a94f71f3..26ac850d73b 100644
--- a/src/blocks/events/block.json
+++ b/src/blocks/events/block.json
@@ -32,5 +32,6 @@
 	"textdomain": "coblocks",
 	"description": "Add a list of events or display events from a public calendar.",
 	"editorScript": ["coblocks-2"],
+	"viewScript": ["coblocks-tiny-swiper","coblocks-events"],
 	"render": "index.php"
 }
diff --git a/src/blocks/events/test/events.cypress.js b/src/blocks/events/test/events.cypress.js
index 75d9b03ba8a..08689a25852 100644
--- a/src/blocks/events/test/events.cypress.js
+++ b/src/blocks/events/test/events.cypress.js
@@ -75,4 +75,22 @@ describe( 'Block: Events', function() {
 
 		helpers.checkForBlockErrors( 'coblocks/events' );
 	} );
+
+	/**
+	 * Test the events block saves with custom classes
+	 */
+	it( 'properly enqueues scripts', function() {
+		// Workaround for the advanced panel not loading consistently.
+		cy.get( '.editor-post-title' ).click();
+
+		helpers.checkForBlockErrors( 'coblocks/events' );
+
+		helpers.savePage();
+		helpers.viewPage();
+
+		cy.get( "script[src*='coblocks-events-script']" );
+		cy.get( "script[src*='tiny-swiper']" );
+
+		helpers.editPage();
+	} );
 } );
diff --git a/src/blocks/gist/block.json b/src/blocks/gist/block.json
index bf6fac2fd5f..7c1011780d8 100644
--- a/src/blocks/gist/block.json
+++ b/src/blocks/gist/block.json
@@ -19,5 +19,6 @@
 	"title": "Gist",
 	"textdomain": "coblocks",
 	"editorScript": ["coblocks-9"],
+	"viewScript": ["coblocks-gist-script"],
 	"description": "Embed a GitHub Gist."
 }
diff --git a/src/blocks/gist/test/gist.cypress.js b/src/blocks/gist/test/gist.cypress.js
index b2b9389e4a9..1239869dc51 100644
--- a/src/blocks/gist/test/gist.cypress.js
+++ b/src/blocks/gist/test/gist.cypress.js
@@ -22,4 +22,26 @@ describe( 'Test CoBlocks Gist Block', function() {
 
 		helpers.checkForBlockErrors( 'core/embed' );
 	} );
+
+	/**
+	 * Test that we can add counter block and use locale formatting controls
+	 * and save block without errors.
+	 */
+	it( 'Test embedded gist properly enqueues its scripts.', function() {
+		helpers.addBlockToPost( 'core/embed', true );
+
+		cy.get( '.wp-block-embed .components-placeholder__input' ).type( 'https://gist.github.com/jrtashjian/98c1fcfd0e9f9ed59d710ccf7ef4291c#file-block-variation-js' );
+		cy.get( '.wp-block-embed .components-button.is-primary' ).click();
+
+		cy.get( '.components-sandbox' ).should( 'exist' );
+
+		helpers.savePage();
+		helpers.checkForBlockErrors( 'core/embed' );
+
+		helpers.viewPage();
+
+		cy.get( "script[src*='coblocks-gist-script']" );
+
+		helpers.editPage();
+	} );
 } );
diff --git a/src/blocks/post-carousel/block.json b/src/blocks/post-carousel/block.json
index de1e2a5ae2e..a8248e4bf7e 100644
--- a/src/blocks/post-carousel/block.json
+++ b/src/blocks/post-carousel/block.json
@@ -75,5 +75,6 @@
 	"textdomain": "coblocks",
 	"description": "Display posts or an external blog feed as a carousel.",
 	"editorScript": ["coblocks-11"],
+	"viewScript": ["coblocks-tiny-swiper","coblocks-post-carousel"],
 	"render": "index.php"
 }
diff --git a/src/blocks/post-carousel/test/post-carousel.cypress.js b/src/blocks/post-carousel/test/post-carousel.cypress.js
index 391488db9b0..1054ad0a635 100644
--- a/src/blocks/post-carousel/test/post-carousel.cypress.js
+++ b/src/blocks/post-carousel/test/post-carousel.cypress.js
@@ -75,4 +75,21 @@ describe( 'Test CoBlocks Post Carousel Block', function() {
 
 		helpers.editPage();
 	} );
+
+	/**
+	 * Test the post-carousel block saves with custom classes
+	 */
+	it( 'Test the post-carousel properly enqueues its scripts.', function() {
+		helpers.addBlockToPost( 'coblocks/post-carousel', true );
+
+		helpers.savePage();
+		helpers.checkForBlockErrors( 'coblocks/post-carousel' );
+
+		helpers.viewPage();
+
+		cy.get( "script[src*='coblocks-post-carousel-script']" );
+		cy.get( "script[src*='tiny-swiper']" );
+
+		helpers.editPage();
+	} );
 } );