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
GitHub
parent
4ed2eb1ce6
commit
44b2003ec5
|
|
@ -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,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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':
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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 = '';
|
||||
|
|
|
|||
|
|
@ -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' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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' => [],
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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' => [],
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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' => [],
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue