From 01bfa56551fffb937f493ed07b58e3c4eb6d31f8 Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Mon, 2 Sep 2024 22:32:14 +0800 Subject: [PATCH] WIP experiment with accessing parent context from inside the Drawer component. --- .../component-frontend.tsx | 78 +++++++++---------- .../mini-cart-interactivity/frontend.ts | 12 +-- .../woocommerce-blocks/bin/webpack-entries.js | 8 +- .../interactivity-components/drawer/index.ts | 34 ++++++-- .../src/Blocks/AssetsController.php | 1 + .../BlockTypes/MiniCartInteractivity.php | 31 +++----- .../MiniCartInteractivityDrawer.php | 31 -------- .../Blocks/InteractivityComponents/Drawer.php | 24 +++--- 8 files changed, 108 insertions(+), 111 deletions(-) delete mode 100644 plugins/woocommerce/src/Blocks/BlockTypes/MiniCartInteractivityDrawer.php diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/component-frontend.tsx b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/component-frontend.tsx index 1d3fd925312..b972f11fc81 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/component-frontend.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/component-frontend.tsx @@ -31,47 +31,47 @@ const renderMiniCartFrontend = () => { } /* eslint-enable @wordpress/no-global-active-element */ - renderFrontend( { - selector: '.wc-block-components-drawer__screen-overlay', - Block: MiniCartDrawer, - getProps: ( el ) => { - const button = document.querySelector( - '.wc-block-mini-cart__button' - ); - const dataset = - button instanceof HTMLButtonElement - ? button.dataset - : { isInitiallyOpen: 'false' }; - const colorClassNames = - button instanceof HTMLButtonElement - ? button.classList - .toString() - .replace( 'wc-block-mini-cart__button', '' ) - : ''; + // renderFrontend( { + // selector: '.wc-block-components-drawer__screen-overlay', + // Block: MiniCartDrawer, + // getProps: ( el ) => { + // const button = document.querySelector( + // '.wc-block-mini-cart__button' + // ); + // const dataset = + // button instanceof HTMLButtonElement + // ? button.dataset + // : { isInitiallyOpen: 'false' }; + // const colorClassNames = + // button instanceof HTMLButtonElement + // ? button.classList + // .toString() + // .replace( 'wc-block-mini-cart__button', '' ) + // : ''; - const isInitiallyOpen = dataset.isInitiallyOpen === 'true'; + // const isInitiallyOpen = dataset.isInitiallyOpen === 'true'; - return { - initialCartTotals: el.dataset.cartTotals - ? JSON.parse( el.dataset.cartTotals ) - : null, - initialCartItemsCount: el.dataset.cartItemsCount - ? parseInt( el.dataset.cartItemsCount, 10 ) - : 0, - isInitiallyOpen, - colorClassNames, - onClose, - style: el.dataset.style ? JSON.parse( el.dataset.style ) : {}, - addToCartBehaviour: el.dataset.addToCartBehaviour || 'none', - hasHiddenPrice: el.dataset.hasHiddenPrice !== 'false', - contents: - document.querySelector( - '.wc-block-mini-cart-interactivity__template-part' - )?.innerHTML ?? '', - productCountVisibility: el.dataset.productCountVisibility, - }; - }, - } ); + // return { + // initialCartTotals: el.dataset.cartTotals + // ? JSON.parse( el.dataset.cartTotals ) + // : null, + // initialCartItemsCount: el.dataset.cartItemsCount + // ? parseInt( el.dataset.cartItemsCount, 10 ) + // : 0, + // isInitiallyOpen, + // colorClassNames, + // onClose, + // style: el.dataset.style ? JSON.parse( el.dataset.style ) : {}, + // addToCartBehaviour: el.dataset.addToCartBehaviour || 'none', + // hasHiddenPrice: el.dataset.hasHiddenPrice !== 'false', + // contents: + // document.querySelector( + // '.wc-block-mini-cart-interactivity__template-part' + // )?.innerHTML ?? '', + // productCountVisibility: el.dataset.productCountVisibility, + // }; + // }, + // } ); // Refocus previously focused button if drawer is not open. if ( diff --git a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/frontend.ts b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/frontend.ts index bb34bfdcd30..f42599604e0 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/frontend.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/mini-cart-interactivity/frontend.ts @@ -23,6 +23,7 @@ import { getMiniCartTotalsFromServer, } from './utils/data'; import setStyles from '../mini-cart/utils/set-styles'; +import { DrawerContext } from '../../../../packages/interactivity-components/drawer'; interface dependencyData { src: string; @@ -179,14 +180,15 @@ store< Store >( 'woocommerce/mini-cart-interactivity', { }, toggleDrawerOpen: () => { + console.log('toggleDrawerOpen'); const context = getContext< Context >(); context.drawerOpen = ! context.drawerOpen; - if ( context.drawerOpen ) { - document.body.dispatchEvent( - new Event( 'wc-mini-cart-interactivity-open-drawer' ) - ); - } + // if ( context.drawerOpen ) { + // document.body.dispatchEvent( + // new Event( 'wc-mini-cart-interactivity-open-drawer' ) + // ); + // } }, loadScripts: async () => { diff --git a/plugins/woocommerce-blocks/bin/webpack-entries.js b/plugins/woocommerce-blocks/bin/webpack-entries.js index f878e9f431d..f1c6cc374df 100644 --- a/plugins/woocommerce-blocks/bin/webpack-entries.js +++ b/plugins/woocommerce-blocks/bin/webpack-entries.js @@ -223,8 +223,10 @@ const entries = { './packages/interactivity-components/checkbox-list/index.ts', 'wc-interactivity-dropdown': './packages/interactivity-components/dropdown/index.ts', - - // Templates + 'wc-interactivity-drawer': + './packages/interactivity-components/drawer/index.ts', + + // Templates 'wc-blocks-classic-template-revert-button-style': './assets/js/templates/revert-button/index.tsx', }, @@ -243,6 +245,8 @@ const entries = { './packages/interactivity-components/dropdown/index.ts', 'wc-interactivity-checkbox-list': './packages/interactivity-components/checkbox-list/index.ts', + 'wc-interactivity-drawer': + './packages/interactivity-components/drawer/index.ts', }, main: { // Shared blocks code diff --git a/plugins/woocommerce-blocks/packages/interactivity-components/drawer/index.ts b/plugins/woocommerce-blocks/packages/interactivity-components/drawer/index.ts index 3b8d7d82ee1..78bec17a807 100644 --- a/plugins/woocommerce-blocks/packages/interactivity-components/drawer/index.ts +++ b/plugins/woocommerce-blocks/packages/interactivity-components/drawer/index.ts @@ -3,21 +3,43 @@ */ import { getContext, store } from '@woocommerce/interactivity'; -/** - * Internal dependencies - */ -import './style.scss'; - export type DrawerContext = { isInitiallyOpen: boolean; isOpen: boolean; + isOpenContextProperty: string; }; +console.log('store woocommerce/interactivity-drawer'); + store( 'woocommerce/interactivity-drawer', { state: { + get gday() { + return 'hi frontend'; + + }, + get slideClasses() { + console.log('slideClasses'); const context = getContext< DrawerContext >(); - return context.isOpen ? 'wc-block-components-drawer__screen-overlay--is-hidden' : 'wc-block-components-drawer__screen-overlay--is-visible'; + + const isOpenContextProperty = context.isOpenContextProperty; + + console.log(isOpenContextProperty); + + if (isOpenContextProperty.split('::').length === 2) { + const [ namespace, property ] = isOpenContextProperty.split('::'); + const parentContext = getContext( namespace ); + const isOpen = parentContext[ property.split('.')[1] ]; + + console.log(parentContext); + + const baseClass = 'wc-block-components-drawer__screen-overlay'; + const slide = isOpen ? '--with-slide-out' : '--with-slide-in'; + + return `${baseClass}${slide}`; + } + + return ''; }, }, actions: { diff --git a/plugins/woocommerce/src/Blocks/AssetsController.php b/plugins/woocommerce/src/Blocks/AssetsController.php index 13236dc8145..69e3a0ee1a9 100644 --- a/plugins/woocommerce/src/Blocks/AssetsController.php +++ b/plugins/woocommerce/src/Blocks/AssetsController.php @@ -75,6 +75,7 @@ final class AssetsController { // Register the interactivity components here for now. $this->api->register_script( 'wc-interactivity-dropdown', 'assets/client/blocks/wc-interactivity-dropdown.js', array() ); $this->api->register_script( 'wc-interactivity-checkbox-list', 'assets/client/blocks/wc-interactivity-checkbox-list.js', array() ); + $this->api->register_script( 'wc-interactivity-drawer', 'assets/client/blocks/wc-interactivity-drawer.js', array() ); $this->register_style( 'wc-interactivity-checkbox-list', plugins_url( $this->api->get_block_asset_build_path( 'wc-interactivity-checkbox-list', 'css' ), dirname( __DIR__ ) ), array(), 'all', true ); $this->register_style( 'wc-interactivity-dropdown', plugins_url( $this->api->get_block_asset_build_path( 'wc-interactivity-dropdown', 'css' ), dirname( __DIR__ ) ), array(), 'all', true ); diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartInteractivity.php b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartInteractivity.php index e2392377ff8..5edca16a418 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartInteractivity.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartInteractivity.php @@ -511,32 +511,25 @@ class MiniCartInteractivity extends AbstractBlock { ob_start(); ?> -
> +
render_mini_cart_button( $attributes, $cart_item_count, false ); ?> + false, + 'children' => $this->get_template_part_contents_container( $template_part_contents ), + // TODO - clean up this concept. + 'is_open_context_property' => 'woocommerce/mini-cart-interactivity::context.drawerOpen', + ) + ); + ?>
- false, - 'children' => $this->get_template_part_contents_container( $template_part_contents ), - ) - ); - ?> - - +
-
- -
-
- 'woocommerce/interactivity-drawer' ), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ); $context = array( - 'isInitiallyOpen' => $props['is_initially_open'] ?? false, - 'isOpen' => $props['is_initially_open'] ?? false, + 'isInitiallyOpen' => $props['is_initially_open'] ?? false, + 'isOpen' => $props['is_initially_open'] ?? false, + 'isOpenContextProperty' => $props['is_open_context_property'] ?? 'woocommerce/interactivity-drawer', + 'gday' => 'hi mate', + // 'slideClasses' => 'hi mate', ); ob_start(); ?> -
-