rtCamp · RahiDroid · Aug 29, 2022 · Aug 27, 2022 · Aug 27, 2022 · Aug 27, 2022
diff --git a/assets/src/css/core-navigation.scss b/assets/src/css/core-navigation.scss
@@ -0,0 +1,3 @@
+/**
+ * Custom styles required for the core Navigatino block.
+ */
diff --git a/assets/src/js/core-navigation.js b/assets/src/js/core-navigation.js
@@ -0,0 +1,8 @@
+/**
+ * Custom script required for the core Navigatino block.
+ */
+
+/**
+ * Internal dependencies
+ */
+import '../css/core-navigation.scss';
diff --git a/assets/src/js/index.js b/assets/src/js/index.js
diff --git a/inc/classes/class-assets.php b/inc/classes/class-assets.php
@@ -0,0 +1,163 @@
+<?php
+/**
+ * Theme bootstrap file.
+ *
+ * @package Elementary-Theme
+ */
+
+namespace Elementary_Theme;
+
+use Elementary_Theme\Traits\Singleton;
+
+/**
+ * Class Assets
+ *
+ * @since 1.0.0
+ */
+class Assets {
+
+	use Singleton;
+
+	/**
+	 * Constructor.
+	 */
+	protected function __construct() {
+		// Setup hooks.
+		$this->setup_hooks();
+
+	}
+
+	/**
+	 * Setup hooks.
+	 *
+	 * @since 1.0.0
+	 */
+	public function setup_hooks() {
+		add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] );
+		add_filter( 'render_block', [ $this, 'enqueue_block_specific_assets' ], 10, 2 );
+	}
+
+	/**
+	 * Register assets.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @action wp_enqueue_scripts
+	 */
+	public function register_assets() {
+
+		$this->register_script( 'core-navigation', 'js/core-navigation.js' );
+		$this->register_style( 'core-navigation', 'css/core-navigation.css' );
+	}
+
+	/**
+	 * Enqueue block specific assets.
+	 *
+	 * @param string $markup Markup of the block.
+	 * @param array  $block Array with block information.
+	 *
+	 * @since 1.0.0
+	 */
+	public function enqueue_block_specific_assets( $markup, $block ) {
+		if ( is_array( $block ) && ! empty( $block['blockName'] ) && 'core/navigation' === $block['blockName'] ) {
+			wp_enqueue_script( 'core-navigation' );
+			wp_enqueue_style( 'core-navigation' );
+		}
+
+		return $markup;
+	}
+
+	/**
+	 * Get asset dependencies and version info from {handle}.asset.php if exists.
+	 *
+	 * @param string $file File name.
+	 * @param array  $deps Script dependencies to merge with.
+	 * @param string $ver  Asset version string.
+	 *
+	 * @return array
+	 */
+	public function get_asset_meta( $file, $deps = [], $ver = false ) {
+		$asset_meta_file = sprintf( '%s/js/%s.asset.php', untrailingslashit( ELEMENTARY_THEME_BUILD_DIR ), basename( $file, '.' . pathinfo( $file )['extension'] ) );
+		$asset_meta      = is_readable( $asset_meta_file )
+			? require $asset_meta_file
+			: [
+				'dependencies' => [],
+				'version'      => $this->get_file_version( $file, $ver ),
+			];
+
+		$asset_meta['dependencies'] = array_merge( $deps, $asset_meta['dependencies'] );
+
+		return $asset_meta;
+	}
+
+	/**
+	 * Register a new script.
+	 *
+	 * @param string           $handle    Name of the script. Should be unique.
+	 * @param string|bool      $file       script file, path of the script relative to the assets/build/ directory.
+	 * @param array            $deps      Optional. An array of registered script handles this script depends on. Default empty array.
+	 * @param string|bool|null $ver       Optional. String specifying script version number, if not set, filetime will be used as version number.
+	 * @param bool             $in_footer Optional. Whether to enqueue the script before </body> instead of in the <head>.
+	 *                                    Default 'false'.
+	 * @return bool Whether the script has been registered. True on success, false on failure.
+	 */
+	public function register_script( $handle, $file, $deps = [], $ver = false, $in_footer = true ) {
+
+		$file_path = sprintf( '%s/%s', ELEMENTARY_THEME_BUILD_DIR, $file );
+
+		if ( ! \file_exists( $file_path ) ) {
+			return false;
+		}
+
+		$src        = sprintf( ELEMENTARY_THEME_BUILD_URI . '/%s', $file );
+		$asset_meta = $this->get_asset_meta( $file, $deps );
+
+		return wp_register_script( $handle, $src, $asset_meta['dependencies'], $asset_meta['version'], $in_footer );
+	}
+
+	/**
+	 * Register a CSS stylesheet.
+	 *
+	 * @param string           $handle Name of the stylesheet. Should be unique.
+	 * @param string|bool      $file    style file, path of the script relative to the assets/build/ directory.
+	 * @param array            $deps   Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array.
+	 * @param string|bool|null $ver    Optional. String specifying script version number, if not set, filetime will be used as version number.
+	 * @param string           $media  Optional. The media for which this stylesheet has been defined.
+	 *                                 Default 'all'. Accepts media types like 'all', 'print' and 'screen', or media queries like
+	 *                                 '(orientation: portrait)' and '(max-width: 640px)'.
+	 *
+	 * @return bool Whether the style has been registered. True on success, false on failure.
+	 */
+	public function register_style( $handle, $file, $deps = [], $ver = false, $media = 'all' ) {
+
+		$file_path = sprintf( '%s/%s', ELEMENTARY_THEME_BUILD_DIR, $file );
+
+		if ( ! \file_exists( $file_path ) ) {
+			return false;
+		}
+
+		$src        = sprintf( ELEMENTARY_THEME_BUILD_URI . '/%s', $file );
+		$asset_meta = $this->get_asset_meta( $file, $deps );
+
+		return wp_register_style( $handle, $src, $asset_meta['dependencies'], $asset_meta['version'], $media );
+	}
+
+	/**
+	 * Get file version.
+	 *
+	 * @param string             $file File path.
+	 * @param int|string|boolean $ver  File version.
+	 *
+	 * @return bool|false|int
+	 */
+	public function get_file_version( $file, $ver = false ) {
+		if ( ! empty( $ver ) ) {
+			return $ver;
+		}
+
+		$file_path = sprintf( '%s/%s', ELEMENTARY_THEME_BUILD_DIR, $file );
+
+		return file_exists( $file_path ) ? filemtime( $file_path ) : false;
+	}
+
+}
diff --git a/inc/classes/class-elementary-theme.php b/inc/classes/class-elementary-theme.php
@@ -9,6 +9,7 @@
 
 use Elementary_Theme\Traits\Singleton;
 use Elementary_Theme\Patterns\Block_Patterns;
+use Elementary_Theme\Assets;
 
 /**
  * Class Elementary_Theme
@@ -25,6 +26,7 @@ class Elementary_Theme {
 	protected function __construct() {
 		// Instantiate classes.
 		Block_Patterns::get_instance();
+		Assets::get_instance();
 
 		// Setup hooks.
 		$this->setup_hooks();
@@ -36,7 +38,7 @@ protected function __construct() {
 	 * @since 1.0.0
 	 */
 	public function setup_hooks() {
-		add_action( 'after_setup_theme', array( $this, 'elementary_theme_support' ) );
+		add_action( 'after_setup_theme', [ $this, 'elementary_theme_support' ] );
 	}
 
 	/**

diff --git a/inc/classes/patterns/class-block-patterns.php b/inc/classes/patterns/class-block-patterns.php
@@ -55,17 +55,17 @@ public function setup_hooks() {
 	 * @since 1.0.0
 	 */
 	public function elementary_theme_register_block_patterns_categories() {
-		$block_pattern_categories = array(
-			'featured' => array(
+		$block_pattern_categories = [
+			'featured' => [
 				'label' => __( 'Featured', 'elementary-theme' ),
-			),
-			'footer'   => array(
+			],
+			'footer'   => [
 				'label' => __( 'Footer', 'elementary-theme' ),
-			),
-			'query'    => array(
+			],
+			'query'    => [
 				'label' => __( 'Query', 'elementary-theme' ),
-			),
-		);
+			],
+		];
 
 		/**
 		 * Filters the block pattern categories.
@@ -87,10 +87,10 @@ public function elementary_theme_register_block_patterns_categories() {
 	 * @since 1.0.0
 	 */
 	public function elementary_theme_register_block_patterns() {
-		$block_patterns_classes = array(
+		$block_patterns_classes = [
 			'footer'     => 'Footer',
 			'hidden-404' => 'Hidden_404',
-		);
+		];
 
 		/**
 		 * Filters the theme block patterns.

diff --git a/inc/classes/patterns/content/class-footer.php b/inc/classes/patterns/content/class-footer.php
@@ -22,12 +22,12 @@ final class Footer extends Block_Pattern_Base {
 	 * @return array Block pattern properties.
 	 */
 	public function block_pattern() {
-		return array(
+		return [
 			'title'      => __( 'Footer', 'elementary-theme' ),
-			'categories' => array( 'footer' ),
-			'blockTypes' => array( 'core/template-part/footer' ),
+			'categories' => [ 'footer' ],
+			'blockTypes' => [ 'core/template-part/footer' ],
 			'content'    => $this->block_pattern_content(),
-		);
+		];
 	}
 
 	/**
@@ -36,6 +36,7 @@ public function block_pattern() {
 	 * @return string Block pattern content.
 	 */
 	public function block_pattern_content() {
+		// phpcs:disable WordPressVIPMinimum.Security.Mustache.OutputNotation
 		ob_start();
 		?>
 		<!-- wp:group {"layout":{"inherit":"true"}} -->
@@ -57,5 +58,6 @@ public function block_pattern_content() {
 		</div><!-- /wp:group -->
 		<?php
 		return ob_get_clean();
+		// phpcs:enable WordPressVIPMinimum.Security.Mustache.OutputNotation
 	}
 }
diff --git a/inc/classes/patterns/content/class-hidden-404.php b/inc/classes/patterns/content/class-hidden-404.php
@@ -21,11 +21,11 @@ final class Hidden_404 extends Block_Pattern_Base {
 	 * @return array Block pattern properties.
 	 */
 	public function block_pattern() {
-		return array(
+		return [
 			'title'    => __( '404 content', 'elementary-theme' ),
 			'inserter' => false,
 			'content'  => $this->block_pattern_content(),
-		);
+		];
 	}
 
 	/**

diff --git a/index.php b/index.php
diff --git a/webpack.config.js b/webpack.config.js
@@ -76,15 +76,14 @@ const styles = {
 
 };
 
-/* Example of how to add a new entry point for a JS file.
-const exampleJS = {
+const scripts = {
 	...sharedConfig,
 	entry: {
-		'example-js': path.resolve(process.cwd(), 'assets', 'src', 'js', 'example.js'),
+		'core-navigation': path.resolve( process.cwd(), 'assets', 'src', 'js', 'core-navigation.js' ),
 	},
 };
- */
 
 module.exports = [
-	styles, // Do not remove this.
+	scripts,
+	styles,
 ];