Only load block assets on frontend when block exists.

assets/js/frontend/frontend.js

@@ -1,7 +1 @@
 // import foo from './components/bar';
-import Tabs from '@10up/component-tabs';
-
-// eslint-disable-next-line no-new
-new Tabs('.tabs', {
-	orientation: 'horizontal',
-});

includes/blocks/block-editor/tabs-item/block.json

@@ -1,5 +1,7 @@
 {
 	"name": "tenup/tabs-item",
+	"editorScript": "file:./register.js",
+	"viewScript": "file:../tabs/view.js",
 	"attributes":{
 		"header": {
 			"type": "string"

includes/blocks/block-editor/tabs-item/register.php

@@ -17,30 +17,12 @@ function register() {
 
 	if ( function_exists( 'register_block_type_from_metadata' ) ) {
 		register_block_type_from_metadata(
-			PUBLISHER_MEDIA_KIT_BLOCKS_PATH . '/tabs-item', // this is the directory where the block.json is found.
+			PUBLISHER_MEDIA_KIT_PATH . 'dist/blocks/block-editor/tabs-item', // this is the directory where the block.json is found.
 			[
 				'render_callback' => $n( 'render_tabs_item_block_callback' ),
 			]
 		);
 	}
-
-	// Enqueue assets.
-	add_action( 'enqueue_block_assets', $n( 'enqueue_block_assets' ) );
-}
-
-/**
- * Enqueue block assets.
- */
-function enqueue_block_assets() {
-	$asset_file = include PUBLISHER_MEDIA_KIT_PATH . 'dist/blocks/tabs-item-block.asset.php';
-
-	wp_enqueue_script(
-		'publisher-media-kit-tabs-item-block',
-		PUBLISHER_MEDIA_KIT_URL . '/dist/blocks/tabs-item-block.js',
-		$asset_file['dependencies'],
-		$asset_file['version'],
-		true
-	);
 }
 
 /**

includes/blocks/block-editor/tabs/block.json

@@ -4,6 +4,10 @@
 	"description": "Display sections of content with brief headings in a compact tab layout that shows one section at a time.",
 	"text-domain": "publisher-media-kit",
 	"category": "common",
+	"editorScript": "file:./register.js",
+	"editorStyle": "file:./editor.css",
+	"style": "file:./editor.css",
+	"viewScript": "file:./view.js",
 	"example": {
 		"innerBlocks": [
 			{

includes/blocks/block-editor/tabs/register.php

@@ -17,37 +17,12 @@ function register() {
 
 	if ( function_exists( 'register_block_type_from_metadata' ) ) {
 		register_block_type_from_metadata(
-			PUBLISHER_MEDIA_KIT_BLOCKS_PATH . '/tabs', // this is the directory where the block.json is found.
+			PUBLISHER_MEDIA_KIT_PATH . 'dist/blocks/block-editor/tabs', // this is the directory where the block.json is found.
 			[
 				'render_callback' => $n( 'render_tabs_block_callback' ),
 			]
 		);
 	}
-
-	// Enqueue assets.
-	add_action( 'enqueue_block_assets', $n( 'enqueue_block_assets' ) );
-}
-
-/**
- * Enqueue block assets.
- */
-function enqueue_block_assets() {
-	$asset_file = include PUBLISHER_MEDIA_KIT_PATH . 'dist/blocks/tabs-block.asset.php';
-
-	wp_enqueue_script(
-		'publisher-media-kit-tabs-block',
-		PUBLISHER_MEDIA_KIT_URL . '/dist/blocks/tabs-block.js',
-		$asset_file['dependencies'],
-		$asset_file['version'],
-		true
-	);
-
-	wp_enqueue_style(
-		'publisher-media-kit-tabs-block',
-		PUBLISHER_MEDIA_KIT_URL . '/dist/blocks/tabs-block.css',
-		[],
-		$asset_file['version']
-	);
 }
 
 /**

includes/blocks/block-editor/tabs/view.js

@@ -0,0 +1,13 @@
+/**
+ * Tabs Block - Frontend View Script
+ *
+ * @package PublisherMediaKit\Blocks\Tabs
+ */
+
+import Tabs from '@10up/component-tabs';
+
+// Initialize tabs on frontend
+// eslint-disable-next-line no-new
+new Tabs('.tabs', {
+	orientation: 'horizontal',
+});

package.json

@@ -71,7 +71,8 @@
       "shared-style": "./assets/css/shared/shared-style.css",
       "style": "./assets/css/frontend/style.css",
       "tabs-block": "./includes/blocks/block-editor/tabs/register.js",
-      "tabs-item-block": "./includes/blocks/block-editor/tabs-item/register.js"
+      "tabs-item-block": "./includes/blocks/block-editor/tabs-item/register.js",
+      "tabs-view": "./includes/blocks/block-editor/tabs/view.js"
     }
   }
 }

tests/cypress/integration/pmk-block-patterns.test.js

@@ -25,9 +25,9 @@ describe('Check if Media Kit Block Pattern is available for use', () => {
 			} else if ($body.find(':contains("Publisher Media Kit")').length > 0) {
 				cy.contains(/^Publisher Media Kit$/).click();
 			}
-
-			// Check if cover patter exist in the list
-			cy.get('[aria-label="Publisher Media Kit - Cover"]').should('exist');
 		});
+
+		// Wait for patterns to load, then verify cover pattern exists
+		cy.get('[aria-label="Publisher Media Kit - Cover"]', { timeout: 10000 }).should('exist');
 	});
 });