Enqueue the registered scripts from block.json (#2566)

* enqueue the registered scripts from block.json

* fix the test

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

src/blocks/counter/block.json

@@ -44,5 +44,6 @@
  }
  }
  },
- "editorScript": ["coblocks-13"]
+ "editorScript": ["coblocks-13"],
+ "viewScript": ["coblocks-counter-script"]
 }

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

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"
 }

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

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."
 }

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

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"
 }

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