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';