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

Commit

Permalink
Register missing C & C inner blocks and update fallback template for …
Browse files Browse the repository at this point in the history 
…older C & C versions

This will fix the issues with missing order summary inner blocks: Coupons (both in C & C blocks) and the Cart header. The issue was happening because, for example, for Cart the coupons were registred on the on frontend, but it just wasn't forced in the attributes. Because it also wasn't added to the PHP fallback layout, the render function didn't include it. For the Checkout block the coupons inner block wasn't registered at all.
  • Loading branch information
@ralucaStan
ralucaStan committed Apr 8, 2022
1 parent c82da76 commit e4ab313
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 34 deletions.
22 changes: 16 additions & 6 deletions assets/js/blocks/cart/inner-blocks/register-components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,16 @@ registerCheckoutBlock( {
),
} );

registerCheckoutBlock( {
metadata: metadata.CART_ORDER_SUMMARY_HEADING,
component: lazy( () =>
import(
/* webpackChunkName: "cart-blocks/order-summary-heading" */
'./cart-order-summary-heading/frontend'
)
),
} );

registerCheckoutBlock( {
metadata: metadata.CART_ORDER_SUMMARY_SUBTOTAL,
component: lazy( () =>
Expand Down Expand Up @@ -135,21 +145,21 @@ registerCheckoutBlock( {
} );

registerCheckoutBlock( {
metadata: metadata.CART_ORDER_SUMMARY_SHIPPING,
metadata: metadata.CART_ORDER_SUMMARY_COUPON_FORM,
component: lazy( () =>
import(
/* webpackChunkName: "cart-blocks/order-summary-shipping" */
'./cart-order-summary-shipping/frontend'
/* webpackChunkName: "cart-blocks/order-summary-coupon-form" */
'./cart-order-summary-coupon-form/frontend'
)
),
} );

registerCheckoutBlock( {
metadata: metadata.CART_ORDER_SUMMARY_COUPON_FORM,
metadata: metadata.CART_ORDER_SUMMARY_SHIPPING,
component: lazy( () =>
import(
/* webpackChunkName: "cart-blocks/order-summary-coupon-form" */
'./cart-order-summary-coupon-form/frontend'
/* webpackChunkName: "cart-blocks/order-summary-shipping" */
'./cart-order-summary-shipping/frontend'
)
),
} );
Expand Down
32 changes: 16 additions & 16 deletions assets/js/blocks/checkout/inner-blocks/register-components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,16 @@ registerCheckoutBlock( {
),
} );

registerCheckoutBlock( {
metadata: metadata.CHECKOUT_ORDER_SUMMARY_CART_ITEMS,
component: lazy( () =>
import(
/* webpackChunkName: "checkout-blocks/order-summary-cart-items" */
'./checkout-order-summary-cart-items/frontend'
)
),
} );

registerCheckoutBlock( {
metadata: metadata.CHECKOUT_ORDER_SUMMARY_SUBTOTAL,
component: lazy( () =>
Expand Down Expand Up @@ -153,16 +163,6 @@ registerCheckoutBlock( {
),
} );

registerCheckoutBlock( {
metadata: metadata.CHECKOUT_ORDER_SUMMARY_SHIPPING,
component: lazy( () =>
import(
/* webpackChunkName: "checkout-blocks/order-summary-shipping" */
'./checkout-order-summary-shipping/frontend'
)
),
} );

registerCheckoutBlock( {
metadata: metadata.CHECKOUT_ORDER_SUMMARY_COUPON_FORM,
component: lazy( () =>
Expand All @@ -174,21 +174,21 @@ registerCheckoutBlock( {
} );

registerCheckoutBlock( {
metadata: metadata.CHECKOUT_ORDER_SUMMARY_TAXES,
metadata: metadata.CHECKOUT_ORDER_SUMMARY_SHIPPING,
component: lazy( () =>
import(
/* webpackChunkName: "checkout-blocks/order-summary-taxes" */
'./checkout-order-summary-taxes/frontend'
/* webpackChunkName: "checkout-blocks/order-summary-shipping" */
'./checkout-order-summary-shipping/frontend'
)
),
} );

registerCheckoutBlock( {
metadata: metadata.CHECKOUT_ORDER_SUMMARY_CART_ITEMS,
metadata: metadata.CHECKOUT_ORDER_SUMMARY_TAXES,
component: lazy( () =>
import(
/* webpackChunkName: "checkout-blocks/order-summary-cart-items" */
'./checkout-order-summary-cart-items/frontend'
/* webpackChunkName: "checkout-blocks/order-summary-taxes" */
'./checkout-order-summary-taxes/frontend'
)
),
} );
29 changes: 23 additions & 6 deletions src/BlockTypes/Cart.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,20 +80,37 @@ protected function render( $attributes, $content ) {
wp_dequeue_script( 'selectWoo' );
wp_dequeue_style( 'select2' );

// If the content contains new inner blocks, it means we're in the newer version of Cart.
$regex_for_new_block = '/<div[\n\r\s\ta-zA-Z0-9_\-=\'"]*data-block-name="woocommerce\/filled-cart-block"[\n\r\s\ta-zA-Z0-9_\-=\'"]*>/mi';
/**
* We need to check if $content has the latest template, searching for one of the newly added blocks from the last iteration
* The new block needs to be always in the template, so only test for blocks with the locked:{remove:true} attribute.
* If it does, we are in the latest version of the block
* If not, we need to add a fallback to assure a successful migration of the block to the new template
* woocommerce/cart-order-summary-subtotal-block was added in C&C i3 and is a locked block, that should always appear
*/
$regex_for_new_block = '/<div[\n\r\s\ta-zA-Z0-9_\-=\'"]*data-block-name="woocommerce\/cart-order-summary-subtotal-block"[\n\r\s\ta-zA-Z0-9_\-=\'"]*>/mi';

$is_new = preg_match( $regex_for_new_block, $content );
$block_has_older_structure = ! preg_match( $regex_for_new_block, $content );

if ( ! $is_new ) {
// This fallback needs to match the default templates defined in our Blocks.
if ( $block_has_older_structure ) {
/**
* This fallback needs to match the defaultTemplate variables defined in the block's edit.tsx files,
* starting from the parent block and going down each inner block
*/
$inner_blocks_html = '$0
<div data-block-name="woocommerce/filled-cart-block" class="wp-block-woocommerce-filled-cart-block">
<div data-block-name="woocommerce/cart-items-block" class="wp-block-woocommerce-cart-items-block">
<div data-block-name="woocommerce/cart-line-items-block" class="wp-block-woocommerce-cart-line-items-block"></div>
</div>
<div data-block-name="woocommerce/cart-totals-block" class="wp-block-woocommerce-cart-totals-block">
<div data-block-name="woocommerce/cart-order-summary-block" class="wp-block-woocommerce-cart-order-summary-block"></div>
<div data-block-name="woocommerce/cart-order-summary-block" class="wp-block-woocommerce-cart-order-summary-block">
<div data-block-name="woocommerce/cart-order-summary-heading-block" class="wp-block-woocommerce-cart-order-summary-heading-block"></div>
<div data-block-name="woocommerce/cart-order-summary-subtotal-block" class="wp-block-woocommerce-cart-order-summary-subtotal-block"></div>
<div data-block-name="woocommerce/cart-order-summary-fee-block" class="wp-block-woocommerce-cart-order-summary-fee-block"></div>
<div data-block-name="woocommerce/cart-order-summary-discount-block" class="wp-block-woocommerce-cart-order-summary-discount-block"></div>
<div data-block-name="woocommerce/cart-order-summary-coupon-form-block" class="wp-block-woocommerce-cart-order-summary-coupon-form-block"></div>
<div data-block-name="woocommerce/cart-order-summary-shipping-form-block" class="wp-block-woocommerce-cart-order-summary-shipping-block"></div>
<div data-block-name="woocommerce/cart-order-summary-taxes-block" class="wp-block-woocommerce-cart-order-summary-taxes-block"></div>
</div>
<div data-block-name="woocommerce/cart-express-payment-block" class="wp-block-woocommerce-cart-express-payment-block"></div>
<div data-block-name="woocommerce/proceed-to-checkout-block" class="wp-block-woocommerce-proceed-to-checkout-block"></div>
<div data-block-name="woocommerce/cart-accepted-payment-methods-block" class="wp-block-woocommerce-cart-accepted-payment-methods-block"></div>
Expand Down
29 changes: 23 additions & 6 deletions src/BlockTypes/Checkout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,22 @@ protected function render( $attributes, $content ) {
wp_dequeue_script( 'selectWoo' );
wp_dequeue_style( 'select2' );

// If the content is empty, we may still be in the older checkout block. Insert the default list of blocks.
$regex_for_empty_block = '/<div class="[a-zA-Z0-9_\- ]*wp-block-woocommerce-checkout[a-zA-Z0-9_\- ]*"><\/div>/mi';
/**
* We need to check if the structure from $content has one of the newly added blocks from the last iteration
* The new block needs to be always in the structure, so only test for blocks with the locked:{remove:true} attribute.
* If it does, we are in the latest version of the block
* If not, we need to add a fallback to assure a successful migration of the block to the new structure
* woocommerce/checkout-order-summary-subtotal-block was added in C&C i3 and is a locked block, that should always appear
*/
$regex_for_new_block = '/<div[\n\r\s\ta-zA-Z0-9_\-=\'"]*data-block-name="woocommerce\/checkout-order-summary-subtotal-block"[\n\r\s\ta-zA-Z0-9_\-=\'"]*>/mi';

$is_empty = preg_match( $regex_for_empty_block, $content );
$block_has_older_structure = ! preg_match( $regex_for_new_block, $content );

if ( $is_empty ) {
// This fallback needs to match the default templates defined in our Blocks.
if ( $block_has_older_structure ) {
/**
* This fallback needs to match the defaultTemplate variables defined in the block's edit.tsx files,
* starting from the parent block and going down each inner block
*/
$inner_blocks_html = '
<div data-block-name="woocommerce/checkout-fields-block" class="wp-block-woocommerce-checkout-fields-block">
<div data-block-name="woocommerce/checkout-express-payment-block" class="wp-block-woocommerce-checkout-express-payment-block"></div>
Expand All @@ -102,7 +111,15 @@ protected function render( $attributes, $content ) {
'<div data-block-name="woocommerce/checkout-actions-block" class="wp-block-woocommerce-checkout-actions-block"></div>
</div>
<div data-block-name="woocommerce/checkout-totals-block" class="wp-block-woocommerce-checkout-totals-block">
<div data-block-name="woocommerce/checkout-order-summary-block" class="wp-block-woocommerce-checkout-order-summary-block"></div>
<div data-block-name="woocommerce/checkout-order-summary-block" class="wp-block-woocommerce-checkout-order-summary-block">
<div data-block-name="woocommerce/checkout-order-summary-cart-items-block" class="wp-block-woocommerce-checkout-order-summary-cart-items-block" />
<div data-block-name="woocommerce/checkout-order-summary-subtotal-block" class="wp-block-woocommerce-checkout-order-summary-subtotal-block" />
<div data-block-name="woocommerce/checkout-order-summary-fee-block" class="wp-block-woocommerce-checkout-order-summary-fee-block" />
<div data-block-name="woocommerce/checkout-order-summary-discount-block" class="wp-block-woocommerce-checkout-order-summary-discount-block" />
<div data-block-name="woocommerce/checkout-order-summary-coupon-form-block" class="wp-block-woocommerce-checkout-order-summary-coupon-form-block" />
<div data-block-name="woocommerce/checkout-order-summary-shipping-block" class="wp-block-woocommerce-checkout-order-summary-shipping-block" />
<div data-block-name="woocommerce/checkout-order-summary-taxes-block" class="wp-block-woocommerce-checkout-order-summary-taxes-block" />
</div>
</div>
';

Expand Down

0 comments on commit e4ab313

Please sign in to comment.