From 4089eee84ef852c570efa4b29fdecef2cd377624 Mon Sep 17 00:00:00 2001 From: RahiDroid Date: Sat, 27 Aug 2022 19:02:53 +0530 Subject: [PATCH 1/5] Feat: Add scripts and styles demo built files --- assets/src/css/core-navigation.scss | 3 +++ assets/src/js/core-navigation.js | 8 ++++++++ assets/src/js/index.js | 0 webpack.config.js | 9 ++++----- 4 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 assets/src/css/core-navigation.scss create mode 100644 assets/src/js/core-navigation.js delete mode 100644 assets/src/js/index.js diff --git a/assets/src/css/core-navigation.scss b/assets/src/css/core-navigation.scss new file mode 100644 index 00000000..34cf0a96 --- /dev/null +++ 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 new file mode 100644 index 00000000..0b470122 --- /dev/null +++ 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 deleted file mode 100644 index e69de29b..00000000 diff --git a/webpack.config.js b/webpack.config.js index 2a03e195..59c45890 100644 --- 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, ]; From 0bbb97e97efc68f3e6651a2b7281191451e9a875 Mon Sep 17 00:00:00 2001 From: RahiDroid Date: Sat, 27 Aug 2022 19:04:00 +0530 Subject: [PATCH 2/5] Feat: Add sample block-specific asset injection --- inc/classes/class-assets.php | 163 +++++++++++++++++++++++++ inc/classes/class-elementary-theme.php | 2 + 2 files changed, 165 insertions(+) create mode 100644 inc/classes/class-assets.php diff --git a/inc/classes/class-assets.php b/inc/classes/class-assets.php new file mode 100644 index 00000000..1a01c34b --- /dev/null +++ b/inc/classes/class-assets.php @@ -0,0 +1,163 @@ +setup_hooks(); + + } + + /** + * Setup hooks. + * + * @since 1.0.0 + */ + public function setup_hooks() { + add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] ); + add_filter( 'render_block', array( $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 = array(), $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 + : array( + 'dependencies' => array(), + '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 instead of in the . + * Default 'false'. + * @return bool Whether the script has been registered. True on success, false on failure. + */ + public function register_script( $handle, $file, $deps = array(), $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 = array(), $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 index 5aa5887f..bd32773e 100644 --- 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(); From cdfda279af12741f2c76694833d1a68117213e57 Mon Sep 17 00:00:00 2001 From: RahiDroid Date: Sat, 27 Aug 2022 19:04:10 +0530 Subject: [PATCH 3/5] Chore: Remove the index.php file --- index.php | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 index.php diff --git a/index.php b/index.php deleted file mode 100644 index 8a649776..00000000 --- a/index.php +++ /dev/null @@ -1,8 +0,0 @@ - Date: Sat, 27 Aug 2022 19:05:57 +0530 Subject: [PATCH 4/5] Fix: PHPCS error for mustache syntax --- inc/classes/patterns/content/class-footer.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/inc/classes/patterns/content/class-footer.php b/inc/classes/patterns/content/class-footer.php index 80f9afc2..0f8d614b 100644 --- a/inc/classes/patterns/content/class-footer.php +++ b/inc/classes/patterns/content/class-footer.php @@ -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(); ?> @@ -57,5 +58,6 @@ public function block_pattern_content() { Date: Mon, 29 Aug 2022 18:36:56 +0530 Subject: [PATCH 5/5] Refact: Use short array syntax --- inc/classes/class-assets.php | 18 ++++++++--------- inc/classes/class-elementary-theme.php | 2 +- inc/classes/patterns/class-block-patterns.php | 20 +++++++++---------- inc/classes/patterns/content/class-footer.php | 8 ++++---- .../patterns/content/class-hidden-404.php | 4 ++-- 5 files changed, 26 insertions(+), 26 deletions(-) diff --git a/inc/classes/class-assets.php b/inc/classes/class-assets.php index 1a01c34b..895c3e2c 100644 --- a/inc/classes/class-assets.php +++ b/inc/classes/class-assets.php @@ -34,7 +34,7 @@ protected function __construct() { */ public function setup_hooks() { add_action( 'wp_enqueue_scripts', [ $this, 'register_assets' ] ); - add_filter( 'render_block', array( $this, 'enqueue_block_specific_assets' ), 10, 2 ); + add_filter( 'render_block', [ $this, 'enqueue_block_specific_assets' ], 10, 2 ); } /** @@ -53,8 +53,8 @@ public function register_assets() { /** * Enqueue block specific assets. * - * @param String $markup Markup of the block. - * @param Array $block Array with block information. + * @param string $markup Markup of the block. + * @param array $block Array with block information. * * @since 1.0.0 */ @@ -76,14 +76,14 @@ public function enqueue_block_specific_assets( $markup, $block ) { * * @return array */ - public function get_asset_meta( $file, $deps = array(), $ver = false ) { + 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 - : array( - 'dependencies' => array(), + : [ + 'dependencies' => [], 'version' => $this->get_file_version( $file, $ver ), - ); + ]; $asset_meta['dependencies'] = array_merge( $deps, $asset_meta['dependencies'] ); @@ -101,7 +101,7 @@ public function get_asset_meta( $file, $deps = array(), $ver = false ) { * Default 'false'. * @return bool Whether the script has been registered. True on success, false on failure. */ - public function register_script( $handle, $file, $deps = array(), $ver = false, $in_footer = true ) { + public function register_script( $handle, $file, $deps = [], $ver = false, $in_footer = true ) { $file_path = sprintf( '%s/%s', ELEMENTARY_THEME_BUILD_DIR, $file ); @@ -128,7 +128,7 @@ public function register_script( $handle, $file, $deps = array(), $ver = false, * * @return bool Whether the style has been registered. True on success, false on failure. */ - public function register_style( $handle, $file, $deps = array(), $ver = false, $media = 'all' ) { + public function register_style( $handle, $file, $deps = [], $ver = false, $media = 'all' ) { $file_path = sprintf( '%s/%s', ELEMENTARY_THEME_BUILD_DIR, $file ); diff --git a/inc/classes/class-elementary-theme.php b/inc/classes/class-elementary-theme.php index bd32773e..03443e74 100644 --- a/inc/classes/class-elementary-theme.php +++ b/inc/classes/class-elementary-theme.php @@ -38,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 index be3308c1..46dea1c7 100644 --- 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 index 0f8d614b..f5e4656f 100644 --- 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(), - ); + ]; } /** diff --git a/inc/classes/patterns/content/class-hidden-404.php b/inc/classes/patterns/content/class-hidden-404.php index 2e3d9a28..b2ed79cc 100644 --- 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(), - ); + ]; } /**