Document and update naming of Block Asset Handles (https://github.com/woocommerce/woocommerce-blocks/pull/4324)

* Document the rules

* Document rules inline

* Typescript support in webpack

* Update webpack config

* Update existing handles

* Name stylesheets same as handles

* prefix vendors and blocks

* Fix script filename
This commit is contained in:
Mike Jolley 2021-06-09 15:09:42 +01:00 committed by GitHub
parent 4ed2eb1ce6
commit 44b2003ec5
13 changed files with 78 additions and 58 deletions

View File

@ -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,
},

View File

@ -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':

View File

@ -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',
};

View File

@ -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.

View File

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

View File

@ -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() ) {
@ -114,10 +113,16 @@ final class AssetsController {
* @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' );
}
}
}

View File

@ -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';
}
/**

View File

@ -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' => [],
];

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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' => [],
];

View File

@ -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' => [],
];

View File

@ -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;
}