use render_callback for nav block frontend files

WordPress · Mar 18, 2021 · a65b745 · a65b745
1 parent 2cf8e44
commit a65b745
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 24 deletions.
diff --git a/packages/block-library/src/frontend.js b/packages/block-library/src/frontend.js
diff --git a/packages/block-library/src/navigation/frontend.js b/packages/block-library/src/navigation/frontend.js
@@ -0,0 +1,5 @@
+console.log( 'This was loaded from frontend.js in the navigation block' );
+
+// With no exports, this will not be built for the frontend.
+// export default {};
+// export {};
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -121,17 +121,9 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
-	// wp_enqueue_script(
-	// 'core_block_navigation_load_frontend_scripts',
-	// plugins_url( 'gutenberg/build/block-library-frontend/index.js' ),
-	// array(),
-	// null,
-	// true
-	// );
-
-	wp_register_script(
+	wp_enqueue_script(
 		'core_block_navigation_load_frontend_scripts',
-		plugins_url( 'gutenberg/build/block-library-frontend/index.js' ),
+		plugins_url( 'navigation/frontend.js', __FILE__ ),
 		array(),
 		false,
 		true

diff --git a/webpack.config.js b/webpack.config.js
@@ -8,7 +8,7 @@ const TerserPlugin = require( 'terser-webpack-plugin' );
 const postcss = require( 'postcss' );
 const { escapeRegExp, compact } = require( 'lodash' );
 const { sep } = require( 'path' );
-const fg = require( 'fast-glob' );
+const fastGlob = require( 'fast-glob' );
 
 /**
  * WordPress dependencies
@@ -65,15 +65,18 @@ const stylesTransform = ( content ) => {
 	return content;
 };
 
-const blockNameRegex = new RegExp( /(?<=src\/).*(?=(\/script))/g );
+const blockNameRegex = new RegExp( /(?<=src\/).*(?=(\/frontend))/g );
 
 const createEntrypoints = () => {
-	const scriptPaths = fg.sync( './packages/block-library/**/script.js', {
-		ignore: [ '**/build*/**' ],
-	} );
+	const scriptPaths = fastGlob.sync(
+		'./packages/block-library/**/frontend.js',
+		{
+			ignore: [ '**/build*/**' ],
+		}
+	);
 
 	const scriptEntries = scriptPaths.reduce( ( entries, scriptPath ) => {
-		const [ blockName ] = scriptPath.match( blockNameRegex );
+		const [ blockName ] = scriptPath.match( blockNameRegex ) || [];
 
 		return {
 			...entries,
@@ -124,8 +127,8 @@ module.exports = {
 			const { entryModule } = chunk;
 			const { rawRequest } = entryModule;
 
-			if ( rawRequest && rawRequest.includes( '/script.js' ) ) {
-				return `./build/block-library/blocks/[name]/script.js`;
+			if ( rawRequest && rawRequest.includes( '/frontend.js' ) ) {
+				return `./build/block-library/blocks/[name]/frontend.js`;
 			}
 
 			return './build/[name]/index.js';