Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Fix: WooCommerce Blocks causing malfunction of the navigation block on WordPress 6.3 #10388

Merged
1 change: 0 additions & 1 deletion assets/js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { getCategories, setCategories } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { woo } from '@woocommerce/icons';
import { Icon } from '@wordpress/icons';
import '@woocommerce/templates/revert-button';

/**
* Internal dependencies
Expand Down
104 changes: 104 additions & 0 deletions bin/webpack-configs.js
Original file line number Diff line number Diff line change
Expand Up @@ -624,6 +624,109 @@ const getExtensionsConfig = ( options = {} ) => {
};
};

/**
* Build config for scripts to be used exclusively within the Site Editor context.
*
* @param {Object} options Build options.
*/
const getSiteEditorConfig = ( options = {} ) => {
const { alias, resolvePlugins = [] } = options;
const resolve = alias
? {
alias,
plugins: resolvePlugins,
}
: {
plugins: resolvePlugins,
};
return {
entry: getEntryConfig( 'editor', options.exclude || [] ),
output: {
devtoolNamespace: 'wc',
path: path.resolve( __dirname, '../build/' ),
filename: `[name].js`,
jsonpFunction: 'webpackWcBlocksExtensionsMethodExtensionJsonp',
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
presets: [
[
'@wordpress/babel-preset-default',
{
modules: false,
targets: {
browsers: [
'extends @wordpress/browserslist-config',
],
},
},
],
],
plugins: [
isProduction
? require.resolve(
'babel-plugin-transform-react-remove-prop-types'
)
: false,
'@babel/plugin-proposal-optional-chaining',
].filter( Boolean ),
},
},
},
{
test: /\.s[c|a]ss$/,
use: {
loader: 'ignore-loader',
},
},
],
},
optimization: {
concatenateModules:
isProduction && ! process.env.WP_BUNDLE_ANALYZER,
splitChunks: {
automaticNameDelimiter: '--',
},
minimizer: [
new TerserPlugin( {
cache: true,
parallel: true,
terserOptions: {
output: {
comments: /translators:/i,
},
compress: {
passes: 2,
},
mangle: {
reserved: [ '__', '_n', '_nx', '_x' ],
},
},
extractComments: false,
} ),
],
},
plugins: [
...getSharedPlugins( {
bundleAnalyzerReportTitle: 'Site Editor',
} ),
new ProgressBarPlugin(
getProgressBarPluginConfig( 'Site Editor' )
),
],
resolve: {
...resolve,
extensions: [ '.js', '.ts', '.tsx' ],
},
};
};

/**
* Build config for CSS Styles.
*
Expand Down Expand Up @@ -837,6 +940,7 @@ module.exports = {
getMainConfig,
getPaymentsConfig,
getExtensionsConfig,
getSiteEditorConfig,
getStylingConfig,
getInteractivityAPIConfig,
};
8 changes: 8 additions & 0 deletions bin/webpack-entries.js
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,10 @@ const entries = {
'add-to-cart-form':
'./assets/js/atomic/blocks/product-elements/add-to-cart-form/index.tsx',
...getBlockEntries( '{index,block,frontend}.{t,j}s{,x}' ),

// Templates
'wc-blocks-classic-template-revert-button-style':
'./assets/js/templates/revert-button/index.tsx',
},
core: {
wcBlocksRegistry: './assets/js/blocks-registry/index.js',
Expand Down Expand Up @@ -170,6 +174,10 @@ const entries = {
'wc-shipping-method-pickup-location':
'./assets/js/extensions/shipping-methods/pickup-location/index.js',
},
editor: {
'wc-blocks-classic-template-revert-button':
'./assets/js/templates/revert-button/index.tsx',
},
};

const getEntryConfig = ( type = 'main', exclude = [] ) => {
Expand Down
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@
"./assets/js/blocks/filter-wrapper/register-components.ts",
"./assets/js/blocks/product-query/variations/**.tsx",
"./assets/js/blocks/product-query/index.tsx",
"./assets/js/blocks/product-query/inspector-controls.tsx",
"./assets/js/templates/revert-button/index.tsx"
"./assets/js/blocks/product-query/inspector-controls.tsx"
],
"repository": {
"type": "git",
Expand Down
21 changes: 17 additions & 4 deletions src/AssetsController.php
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<?php
namespace Automattic\WooCommerce\Blocks;

use Automattic\WooCommerce\Blocks\Package;
use Automattic\WooCommerce\Blocks\Assets\Api as AssetApi;
use Automattic\WooCommerce\Blocks\Assets\AssetDataRegistry as AssetDataRegistry;

/**
* AssetsController class.
Expand Down Expand Up @@ -35,6 +33,7 @@ public function __construct( AssetApi $asset_api ) {
*/
protected function init() {
add_action( 'init', array( $this, 'register_assets' ) );
add_action( 'enqueue_block_editor_assets', array( $this, 'register_and_enqueue_site_editor_assets' ) );
add_filter( 'wp_resource_hints', array( $this, 'add_resource_hints' ), 10, 2 );
add_action( 'body_class', array( $this, 'add_theme_body_class' ), 1 );
add_action( 'admin_body_class', array( $this, 'add_theme_body_class' ), 1 );
Expand All @@ -56,7 +55,7 @@ public function register_assets() {
$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-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-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.
Expand All @@ -76,6 +75,20 @@ public function register_assets() {
);
}

/**
* Register and enqueue assets for exclusive usage within the Site Editor.
*/
public function register_and_enqueue_site_editor_assets() {
$this->api->register_script( 'wc-blocks-classic-template-revert-button', 'build/wc-blocks-classic-template-revert-button.js' );
$this->api->register_style( 'wc-blocks-classic-template-revert-button-style', 'build/wc-blocks-classic-template-revert-button-style.css' );

$current_screen = get_current_screen();
if ( $current_screen instanceof \WP_Screen && 'site-editor' === $current_screen->base ) {
wp_enqueue_script( 'wc-blocks-classic-template-revert-button' );
wp_enqueue_style( 'wc-blocks-classic-template-revert-button-style' );
}
}

/**
* Defines resource hints to help speed up the loading of some critical blocks.
*
Expand All @@ -93,7 +106,7 @@ public function add_resource_hints( $urls, $relation_type ) {
// We only need to prefetch when the cart has contents.
$cart = wc()->cart;

if ( ! $cart || ! $cart instanceof \WC_Cart || 0 === $cart->get_cart_contents_count() ) {
if ( ! $cart instanceof \WC_Cart || 0 === $cart->get_cart_contents_count() ) {
return $urls;
}

Expand Down
10 changes: 10 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const {
getFrontConfig,
getPaymentsConfig,
getExtensionsConfig,
getSiteEditorConfig,
getStylingConfig,
getInteractivityAPIConfig,
} = require( './bin/webpack-configs.js' );
Expand Down Expand Up @@ -85,12 +86,21 @@ const InteractivityConfig = {
...getInteractivityAPIConfig( { alias: getAlias() } ),
};

/**
* Config to generate the site editor scripts.
*/
const SiteEditorConfig = {
...sharedConfig,
...getSiteEditorConfig( { alias: getAlias() } ),
};

module.exports = [
CoreConfig,
MainConfig,
FrontendConfig,
ExtensionsConfig,
PaymentsConfig,
SiteEditorConfig,
StylingConfig,
InteractivityConfig,
];