diff --git a/plugins/woocommerce-blocks/bin/webpack-configs.js b/plugins/woocommerce-blocks/bin/webpack-configs.js index 04bfcc6cf97..dd508812def 100644 --- a/plugins/woocommerce-blocks/bin/webpack-configs.js +++ b/plugins/woocommerce-blocks/bin/webpack-configs.js @@ -222,7 +222,7 @@ const getMainConfig = ( options = {} ) => { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, - name: 'vendors', + name: 'wc-blocks-vendors', chunks: 'all', enforce: true, }, @@ -575,7 +575,7 @@ const getStylingConfig = ( options = {} ) => { minSize: 0, automaticNameDelimiter: '--', cacheGroups: { - editor: { + editorStyle: { // Capture all `editor` stylesheets and editor-components stylesheets. test: ( module = {} ) => module.constructor.name === 'CssModule' && @@ -584,21 +584,20 @@ const getStylingConfig = ( options = {} ) => { module, /[\\/]assets[\\/]js[\\/]editor-components[\\/]/ ) ), - name: 'editor', + name: 'wc-blocks-editor-style', chunks: 'all', priority: 10, }, - 'vendors-style': { + vendorsStyle: { test: /\/node_modules\/.*?style\.s?css$/, - name: 'vendors-style', + name: 'wc-blocks-vendors-style', chunks: 'all', priority: 7, }, - style: { - // Capture all stylesheets with name `style` or - // name that starts with underscore (abstracts). + blocksStyle: { + // Capture all stylesheets with name `style` or name that starts with underscore (abstracts). test: /(style|_.*)\.scss$/, - name: 'style', + name: 'wc-blocks-style', chunks: 'all', priority: 5, }, diff --git a/plugins/woocommerce-blocks/bin/webpack-entries.js b/plugins/woocommerce-blocks/bin/webpack-entries.js index 6ac410a544d..abfed5e87bd 100644 --- a/plugins/woocommerce-blocks/bin/webpack-entries.js +++ b/plugins/woocommerce-blocks/bin/webpack-entries.js @@ -105,21 +105,21 @@ const entries = { wcSettings: './assets/js/settings/shared/index.ts', wcBlocksData: './assets/js/data/index.js', wcBlocksMiddleware: './assets/js/middleware/index.js', - wcSharedContext: './assets/js/shared/context/index.js', - wcSharedHocs: './assets/js/shared/hocs/index.js', + wcBlocksSharedContext: './assets/js/shared/context/index.js', + wcBlocksSharedHocs: './assets/js/shared/hocs/index.js', priceFormat: './packages/prices/index.js', blocksCheckout: './packages/checkout/index.js', }, main: { // Shared blocks code - blocks: './assets/js/index.js', + 'wc-blocks': './assets/js/index.js', // Blocks - ...getBlockEntries( 'index.js' ), + ...getBlockEntries( 'index.{t,j}s{,x}' ), }, frontend: { reviews: './assets/js/blocks/reviews/frontend.js', - ...getBlockEntries( 'frontend.js' ), + ...getBlockEntries( 'frontend.{t,j}s{,x}' ), }, payments: { 'wc-payment-method-stripe': diff --git a/plugins/woocommerce-blocks/bin/webpack-helpers.js b/plugins/woocommerce-blocks/bin/webpack-helpers.js index dd7deb11e86..8a377ebdb06 100644 --- a/plugins/woocommerce-blocks/bin/webpack-helpers.js +++ b/plugins/woocommerce-blocks/bin/webpack-helpers.js @@ -15,8 +15,8 @@ const wcDepMap = { '@woocommerce/blocks-registry': [ 'wc', 'wcBlocksRegistry' ], '@woocommerce/settings': [ 'wc', 'wcSettings' ], '@woocommerce/block-data': [ 'wc', 'wcBlocksData' ], - '@woocommerce/shared-context': [ 'wc', 'wcSharedContext' ], - '@woocommerce/shared-hocs': [ 'wc', 'wcSharedHocs' ], + '@woocommerce/shared-context': [ 'wc', 'wcBlocksSharedContext' ], + '@woocommerce/shared-hocs': [ 'wc', 'wcBlocksSharedHocs' ], '@woocommerce/price-format': [ 'wc', 'priceFormat' ], '@woocommerce/blocks-checkout': [ 'wc', 'blocksCheckout' ], }; @@ -26,8 +26,8 @@ const wcHandleMap = { '@woocommerce/settings': 'wc-settings', '@woocommerce/block-settings': 'wc-settings', '@woocommerce/block-data': 'wc-blocks-data-store', - '@woocommerce/shared-context': 'wc-shared-context', - '@woocommerce/shared-hocs': 'wc-shared-hocs', + '@woocommerce/shared-context': 'wc-blocks-shared-context', + '@woocommerce/shared-hocs': 'wc-blocks-shared-hocs', '@woocommerce/price-format': 'wc-price-format', '@woocommerce/blocks-checkout': 'wc-blocks-checkout', }; diff --git a/plugins/woocommerce-blocks/docs/contributors/block-assets.md b/plugins/woocommerce-blocks/docs/contributors/block-assets.md index ec8fffa4537..8c9ab253f62 100644 --- a/plugins/woocommerce-blocks/docs/contributors/block-assets.md +++ b/plugins/woocommerce-blocks/docs/contributors/block-assets.md @@ -14,6 +14,23 @@ In an admin editor context we must also ensure asset _data_ is available when th Note: `enqueue_block_editor_assets` fires regardless of whether or not a block has been rendered in the editor context, so unless handled correctly, block data may be loaded twice. The `AbstractBlock` class below handles this for you, or you can track whether or not assets have been loaded already with a class variable. +## Choosing Handles for Assets (and scripts in general) + +When creating a script or style assets, the following rules should be followed to keep asset names consistent, and to avoid +conflicts with other similarly named scripts. + +1. All asset handles should have a `wc-` prefix. +2. If the asset handle is for a Block (in editor context) use the `-block` suffix. +3. If the asset handle is for a Block (in frontend context) use the `-block-frontend` suffix. +4. If the asset is for any other script being consumed or enqueued by the blocks plugin, use the `wc-blocks-` prefix. + +Some examples: + +1. A Block called 'featured-product' would have asset handles named: `wc-featured-product-block` and `wc-featured-product-block-frontend`. +2. A script being used by a block, for example, named 'tag-manager' would have the handle: `wc-blocks-tag-manager`. + +These rules also apply to styles. + ## Using the `AbstractBlock` class The [`AbstractBlock` class](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/src/BlockTypes/AbstractBlock.php) has some helper methods to make asset management easier. Most Block Types in this plugin extend this class. diff --git a/plugins/woocommerce-blocks/src/Assets/Api.php b/plugins/woocommerce-blocks/src/Assets/Api.php index d4a36f694f8..bf64a11db8b 100644 --- a/plugins/woocommerce-blocks/src/Assets/Api.php +++ b/plugins/woocommerce-blocks/src/Assets/Api.php @@ -61,22 +61,21 @@ class Api { } /** - * Registers a script according to `wp_register_script`, additionally - * loading the translations for the file. + * Registers a script according to `wp_register_script`, adding the correct prefix, and additionally loading translations. + * + * When creating script assets, the following rules should be followed: + * 1. All asset handles should have a `wc-` prefix. + * 2. If the asset handle is for a Block (in editor context) use the `-block` suffix. + * 3. If the asset handle is for a Block (in frontend context) use the `-block-frontend` suffix. + * 4. If the asset is for any other script being consumed or enqueued by the blocks plugin, use the `wc-blocks-` prefix. * * @since 2.5.0 - * - * @param string $handle Name of the script. Should be unique. - * @param string $relative_src Relative url for the script to the path - * from plugin root. - * @param array $dependencies Optional. An array of registered script - * handles this script depends on. Default - * empty array. - * @param bool $has_i18n Optional. Whether to add a script - * translation call to this file. Default: - * true. - * * @throws Exception If the registered script has a dependency on itself. + * + * @param string $handle Unique name of the script. + * @param string $relative_src Relative url for the script to the path from plugin root. + * @param array $dependencies Optional. An array of registered script handles this script depends on. Default empty array. + * @param bool $has_i18n Optional. Whether to add a script translation call to this file. Default: true. */ public function register_script( $handle, $relative_src, $dependencies = [], $has_i18n = true ) { $src = ''; diff --git a/plugins/woocommerce-blocks/src/AssetsController.php b/plugins/woocommerce-blocks/src/AssetsController.php index e04d454c65f..a871b14814a 100644 --- a/plugins/woocommerce-blocks/src/AssetsController.php +++ b/plugins/woocommerce-blocks/src/AssetsController.php @@ -43,20 +43,19 @@ final class AssetsController { * Register block scripts & styles. */ public function register_assets() { - $this->register_style( 'wc-block-vendors-style', plugins_url( $this->api->get_block_asset_build_path( 'vendors-style', 'css' ), __DIR__ ) ); - $this->register_style( 'wc-block-editor', plugins_url( $this->api->get_block_asset_build_path( 'editor', 'css' ), __DIR__ ), array( 'wp-edit-blocks' ) ); - $this->register_style( 'wc-block-style', plugins_url( $this->api->get_block_asset_build_path( 'style', 'css' ), __DIR__ ), array( 'wc-block-vendors-style' ) ); - - wp_style_add_data( 'wc-block-editor', 'rtl', 'replace' ); - wp_style_add_data( 'wc-block-style', 'rtl', 'replace' ); + $this->register_style( 'wc-blocks-vendors-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-vendors-style', 'css' ), __DIR__ ) ); + $this->register_style( 'wc-blocks-editor-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-editor-style', 'css' ), __DIR__ ), [ 'wp-edit-blocks' ], 'all', true ); + $this->register_style( 'wc-blocks-style', plugins_url( $this->api->get_block_asset_build_path( 'wc-blocks-style', 'css' ), __DIR__ ), [ 'wc-blocks-vendors-style' ], 'all', true ); $this->api->register_script( 'wc-blocks-middleware', 'build/wc-blocks-middleware.js', [], false ); $this->api->register_script( 'wc-blocks-data-store', 'build/wc-blocks-data.js', [ 'wc-blocks-middleware' ] ); - $this->api->register_script( 'wc-blocks', $this->api->get_block_asset_build_path( 'blocks' ), [], false ); - $this->api->register_script( 'wc-vendors', $this->api->get_block_asset_build_path( 'vendors' ), [], false ); + $this->api->register_script( 'wc-blocks-vendors', $this->api->get_block_asset_build_path( 'wc-blocks-vendors' ), [], false ); $this->api->register_script( 'wc-blocks-registry', 'build/wc-blocks-registry.js', [], false ); - $this->api->register_script( 'wc-shared-context', 'build/wc-shared-context.js', [] ); - $this->api->register_script( 'wc-shared-hocs', 'build/wc-shared-hocs.js', [], false ); + $this->api->register_script( 'wc-blocks', $this->api->get_block_asset_build_path( 'wc-blocks' ), [ 'wc-blocks-vendors' ], false ); + $this->api->register_script( 'wc-blocks-shared-context', 'build/wc-blocks-shared-context.js', [] ); + $this->api->register_script( 'wc-blocks-shared-hocs', 'build/wc-blocks-shared-hocs.js', [], false ); + + // The price package is shared externally so has no blocks prefix. $this->api->register_script( 'wc-price-format', 'build/price-format.js', [], false ); if ( Package::feature()->is_feature_plugin_build() ) { @@ -109,15 +108,21 @@ final class AssetsController { /** * Registers a style according to `wp_register_style`. * - * @param string $handle Name of the stylesheet. Should be unique. - * @param string $src Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory. - * @param array $deps Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array. - * @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)'. + * @param string $handle Name of the stylesheet. Should be unique. + * @param string $src Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory. + * @param array $deps Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array. + * @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)'. + * @param boolean $rtl Optional. Whether or not to register RTL styles. */ - protected function register_style( $handle, $src, $deps = [], $media = 'all' ) { + protected function register_style( $handle, $src, $deps = [], $media = 'all', $rtl = false ) { $filename = str_replace( plugins_url( '/', __DIR__ ), '', $src ); $ver = self::get_file_version( $filename ); + wp_register_style( $handle, $src, $deps, $ver, $media ); + + if ( $rtl ) { + wp_style_add_data( $handle, 'rtl', 'replace' ); + } } } diff --git a/plugins/woocommerce-blocks/src/BlockTypes/AbstractBlock.php b/plugins/woocommerce-blocks/src/BlockTypes/AbstractBlock.php index e6512abc817..cd1eed73e81 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/AbstractBlock.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/AbstractBlock.php @@ -189,9 +189,9 @@ abstract class AbstractBlock { */ protected function get_block_type_editor_script( $key = null ) { $script = [ - 'handle' => 'wc-' . $this->block_name, + 'handle' => 'wc-' . $this->block_name . '-block', 'path' => $this->asset_api->get_block_asset_build_path( $this->block_name ), - 'dependencies' => [ 'wc-vendors', 'wc-blocks' ], + 'dependencies' => [ 'wc-blocks' ], ]; return $key ? $script[ $key ] : $script; } @@ -203,7 +203,7 @@ abstract class AbstractBlock { * @return string|null */ protected function get_block_type_editor_style() { - return 'wc-block-editor'; + return 'wc-blocks-editor-style'; } /** @@ -215,7 +215,7 @@ abstract class AbstractBlock { */ protected function get_block_type_script( $key = null ) { $script = [ - 'handle' => 'wc-' . $this->block_name . '-frontend', + 'handle' => 'wc-' . $this->block_name . '-block-frontend', 'path' => $this->asset_api->get_block_asset_build_path( $this->block_name . '-frontend' ), 'dependencies' => [], ]; @@ -229,7 +229,7 @@ abstract class AbstractBlock { * @return string|null */ protected function get_block_type_style() { - return 'wc-block-style'; + return 'wc-blocks-style'; } /** diff --git a/plugins/woocommerce-blocks/src/BlockTypes/AllReviews.php b/plugins/woocommerce-blocks/src/BlockTypes/AllReviews.php index 8f550357cb7..a3dffa4f126 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/AllReviews.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/AllReviews.php @@ -21,7 +21,7 @@ class AllReviews extends AbstractBlock { */ protected function get_block_type_script( $key = null ) { $script = [ - 'handle' => 'wc-reviews-frontend', + 'handle' => 'wc-reviews-block-frontend', 'path' => $this->asset_api->get_block_asset_build_path( 'reviews-frontend' ), 'dependencies' => [], ]; diff --git a/plugins/woocommerce-blocks/src/BlockTypes/Cart.php b/plugins/woocommerce-blocks/src/BlockTypes/Cart.php index 8dc25656c5f..bf2fd7621af 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/Cart.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/Cart.php @@ -28,7 +28,7 @@ class Cart extends AbstractBlock { $script = [ 'handle' => 'wc-' . $this->block_name . '-block', 'path' => $this->asset_api->get_block_asset_build_path( $this->block_name ), - 'dependencies' => [ 'wc-vendors', 'wc-blocks' ], + 'dependencies' => [ 'wc-blocks' ], ]; return $key ? $script[ $key ] : $script; } diff --git a/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php b/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php index 906e11797a4..7187ec1d630 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/Checkout.php @@ -24,7 +24,7 @@ class Checkout extends AbstractBlock { $script = [ 'handle' => 'wc-' . $this->block_name . '-block', 'path' => $this->asset_api->get_block_asset_build_path( $this->block_name ), - 'dependencies' => [ 'wc-vendors', 'wc-blocks' ], + 'dependencies' => [ 'wc-blocks' ], ]; return $key ? $script[ $key ] : $script; } diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ReviewsByCategory.php b/plugins/woocommerce-blocks/src/BlockTypes/ReviewsByCategory.php index 9bf86fb8797..1189e221b20 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/ReviewsByCategory.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/ReviewsByCategory.php @@ -21,7 +21,7 @@ class ReviewsByCategory extends AbstractBlock { */ protected function get_block_type_script( $key = null ) { $script = [ - 'handle' => 'wc-reviews-frontend', + 'handle' => 'wc-reviews-block-frontend', 'path' => $this->asset_api->get_block_asset_build_path( 'reviews-frontend' ), 'dependencies' => [], ]; diff --git a/plugins/woocommerce-blocks/src/BlockTypes/ReviewsByProduct.php b/plugins/woocommerce-blocks/src/BlockTypes/ReviewsByProduct.php index 4ebb885f936..6053c40b023 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/ReviewsByProduct.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/ReviewsByProduct.php @@ -21,7 +21,7 @@ class ReviewsByProduct extends AbstractBlock { */ protected function get_block_type_script( $key = null ) { $script = [ - 'handle' => 'wc-reviews-frontend', + 'handle' => 'wc-reviews-block-frontend', 'path' => $this->asset_api->get_block_asset_build_path( 'reviews-frontend' ), 'dependencies' => [], ]; diff --git a/plugins/woocommerce-blocks/src/BlockTypes/SingleProduct.php b/plugins/woocommerce-blocks/src/BlockTypes/SingleProduct.php index b4c2334036c..8a4f76014e6 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/SingleProduct.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/SingleProduct.php @@ -22,7 +22,7 @@ class SingleProduct extends AbstractBlock { $script = [ 'handle' => 'wc-' . $this->block_name . '-block', 'path' => $this->asset_api->get_block_asset_build_path( $this->block_name ), - 'dependencies' => [ 'wc-vendors', 'wc-blocks' ], + 'dependencies' => [ 'wc-blocks' ], ]; return $key ? $script[ $key ] : $script; }