📦 NEW: Add init hook to enqueue block assets

This commit fixes issue #21 

- `init` hook added to enqueue block assets on the server-side using `register_block_type` function.
- Adds `null` as the version parameter for block assets.

Author: asharirfan

packages/cgb-scripts/template/src/init.php

@@ -16,49 +16,64 @@
 /**
  * Enqueue Gutenberg block assets for both frontend + backend.
  *
+ * Assets enqueued:
+ * 1. blocks.style.build.css - Frontend + Backend.
+ * 2. blocks.build.js - Backend.
+ * 3. blocks.editor.build.css - Backend.
+ *
+ * @uses {wp-blocks} for block type registration & related functions.
+ * @uses {wp-element} for WP Element abstraction — structure of blocks.
+ * @uses {wp-i18n} to internationalize the block's text.
  * @uses {wp-editor} for WP editor styles.
  * @since 1.0.0
  */
 function <% blockNamePHPLower %>_cgb_block_assets() { // phpcs:ignore
-	// Styles.
-	wp_enqueue_style(
+	/**
+	 * Register block styles for both frontend + backend.
+	 */
+	wp_register_style(
 		'<% blockNamePHPLower %>-cgb-style-css', // Handle.
 		plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS.
-		array( 'wp-editor' ) // Dependency to include the CSS after it.
-		// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
+		array( 'wp-editor' ), // Dependency to include the CSS after it.
+		null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
 	);
-}
-
-// Hook: Frontend assets.
-add_action( 'enqueue_block_assets', '<% blockNamePHPLower %>_cgb_block_assets' );
 
-/**
- * Enqueue Gutenberg block assets for backend editor.
- *
- * @uses {wp-blocks} for block type registration & related functions.
- * @uses {wp-element} for WP Element abstraction — structure of blocks.
- * @uses {wp-i18n} to internationalize the block's text.
- * @uses {wp-editor} for WP editor styles.
- * @since 1.0.0
- */
-function <% blockNamePHPLower %>_cgb_editor_assets() { // phpcs:ignore
-	// Scripts.
-	wp_enqueue_script(
+	/**
+	 * Register block editor script for backend.
+	 */
+	wp_register_script(
 		'<% blockNamePHPLower %>-cgb-block-js', // Handle.
 		plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
 		array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
-		// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: File modification time.
+		null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
 		true // Enqueue the script in the footer.
 	);
 
-	// Styles.
-	wp_enqueue_style(
+	/**
+	 * Register block editor styles for backend.
+	 */
+	wp_register_style(
 		'<% blockNamePHPLower %>-cgb-block-editor-css', // Handle.
 		plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS.
-		array( 'wp-edit-blocks' ) // Dependency to include the CSS after it.
-		// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
+		array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
+		null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
 	);
+
+	/**
+	 * Register Gutenberg block on server-side.
+	 *
+	 * Register the block on server-side to ensure that the block
+	 * scripts and styles for both frontend and backend are
+	 * enqueued when the editor loads.
+	 *
+	 * @link https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type#enqueuing-block-scripts
+	 */
+	register_block_type( 'cgb/block-<% blockName %>', array(
+		'style'         => '<% blockNamePHPLower %>-cgb-style-css', // Enqueue blocks.style.build.css on both frontend & backend.
+		'editor_script' => '<% blockNamePHPLower %>-cgb-block-js', // Enqueue blocks.build.js in the editor only.
+		'editor_style'  => '<% blockNamePHPLower %>-cgb-block-editor-css', // Enqueue blocks.editor.build.css in the editor only.
+	) );
 }
 
-// Hook: Editor assets.
-add_action( 'enqueue_block_editor_assets', '<% blockNamePHPLower %>_cgb_editor_assets' );
+// Hook: Block assets.
+add_action( 'init', '<% blockNamePHPLower %>_cgb_block_assets' );