Merge branch 'trunk' into release/9.7.0

Author: dinhtungdu

assets/js/blocks/mini-cart/index.tsx

@@ -45,6 +45,7 @@ const settings: BlockConfiguration = {
 	example: {
 		attributes: {
 			isPreview: true,
+			className: 'wc-block-mini-cart--preview',
 		},
 	},
 	attributes: {

assets/js/blocks/mini-cart/style.scss

@@ -22,6 +22,12 @@
 	display: none;
 }
 
+.wc-block-mini-cart--preview {
+	.wc-block-mini-cart__amount {
+		display: initial;
+	}
+}
+
 .wc-block-mini-cart__tax-label {
 	margin-right: em($gap-smaller);
 }
@@ -71,7 +77,6 @@
 		top: $gap-largest;
 		right: $gap-smallest;
 
-
 		button {
 			margin: 0;
 			right: 0;
@@ -114,7 +119,8 @@
 	justify-content: space-between;
 }
 
-.wp-block-woocommerce-empty-mini-cart-contents-block .wc-block-mini-cart__empty-cart-wrapper {
+.wp-block-woocommerce-empty-mini-cart-contents-block
+.wc-block-mini-cart__empty-cart-wrapper {
 	overflow-y: auto;
 	padding: $gap-largest $gap $gap;
 }
@@ -218,6 +224,9 @@ h2.wc-block-mini-cart__title {
 	height: calc(100vh - 32px);
 }
 
-.admin-bar .wc-block-components-drawer .components-modal__header .components-button {
+.admin-bar
+.wc-block-components-drawer
+.components-modal__header
+.components-button {
 	top: 32px;
 }

assets/js/interactivity/constants.js

@@ -1,3 +1,3 @@
-export const cstMetaTagItemprop = 'woo-client-side-transitions';
+export const csnMetaTagItemprop = 'woo-client-side-navigation';
 export const componentPrefix = 'woo-';
 export const directivePrefix = 'data-woo-';

assets/js/interactivity/directives.js

@@ -2,15 +2,15 @@ import { useContext, useMemo, useEffect } from 'preact/hooks';
 import { useSignalEffect } from '@preact/signals';
 import { deepSignal, peek } from 'deepsignal';
 import { directive } from './hooks';
-import { prefetch, navigate, hasClientSideTransitions } from './router';
+import { prefetch, navigate, canDoClientSideNavigation } from './router';
 
 // Until useSignalEffects is fixed:
 // https://github.com/preactjs/signals/issues/228
 const raf = window.requestAnimationFrame;
 const tick = () => new Promise( ( r ) => raf( () => raf( r ) ) );
 
-// Check if current page has client-side transitions enabled.
-const clientSideTransitions = hasClientSideTransitions( document.head );
+// Check if current page can do client-side navigation.
+const clientSideNavigation = canDoClientSideNavigation( document.head );
 
 const isObject = ( item ) =>
 	item && typeof item === 'object' && ! Array.isArray( item );
@@ -91,19 +91,19 @@ export default () => {
 						className: name,
 						context: contextValue,
 					} );
+					const currentClass = element.props.class || '';
+					const classFinder = new RegExp(
+						`(^|\\s)${ name }(\\s|$)`,
+						'g'
+					);
 					if ( ! result )
-						element.props.class = element.props.class
-							.replace(
-								new RegExp( `(^|\\s)${ name }(\\s|$)`, 'g' ),
-								' '
-							)
+						element.props.class = currentClass
+							.replace( classFinder, ' ' )
 							.trim();
-					else if (
-						! new RegExp( `(^|\\s)${ name }(\\s|$)` ).test(
-							element.props.class
-						)
-					)
-						element.props.class += ` ${ name }`;
+					else if ( ! classFinder.test( currentClass ) )
+						element.props.class = currentClass
+							? `${ currentClass } ${ name }`
+							: name;
 
 					useEffect( () => {
 						// This seems necessary because Preact doesn't change the class names
@@ -146,13 +146,13 @@ export default () => {
 		} ) => {
 			useEffect( () => {
 				// Prefetch the page if it is in the directive options.
-				if ( clientSideTransitions && link?.prefetch ) {
+				if ( clientSideNavigation && link?.prefetch ) {
 					prefetch( href );
 				}
 			} );
 
 			// Don't do anything if it's falsy.
-			if ( clientSideTransitions && link !== false ) {
+			if ( clientSideNavigation && link !== false ) {
 				element.props.onclick = async ( event ) => {
 					event.preventDefault();
 

assets/js/interactivity/hooks.js

@@ -1,6 +1,6 @@
 import { h, options, createContext } from 'preact';
 import { useRef } from 'preact/hooks';
-import { store } from './wpx';
+import { rawStore as store } from './store';
 import { componentPrefix } from './constants';
 
 // Main context.
@@ -18,7 +18,7 @@ export const component = ( name, Comp ) => {
 	componentMap[ name ] = Comp;
 };
 
-// Resolve the path to some property of the wpx object.
+// Resolve the path to some property of the store object.
 const resolve = ( path, context ) => {
 	let current = { ...store, context };
 	path.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );

assets/js/interactivity/index.js

@@ -1,6 +1,7 @@
 import registerDirectives from './directives';
 import registerComponents from './components';
 import { init } from './router';
+export { store } from './store';
 
 /**
  * Initialize the initial vDOM.

assets/js/interactivity/router.js

@@ -1,7 +1,7 @@
 import { hydrate, render } from 'preact';
 import { toVdom, hydratedIslands } from './vdom';
 import { createRootFragment } from './utils';
-import { cstMetaTagItemprop, directivePrefix } from './constants';
+import { csnMetaTagItemprop, directivePrefix } from './constants';
 
 // The root to render the vdom (document.body).
 let rootFragment;
@@ -17,10 +17,10 @@ const cleanUrl = ( url ) => {
 	return u.pathname + u.search;
 };
 
-// Helper to check if a page has client-side transitions activated.
-export const hasClientSideTransitions = ( dom ) =>
+// Helper to check if a page can do client-side navigation.
+export const canDoClientSideNavigation = ( dom ) =>
 	dom
-		.querySelector( `meta[itemprop='${ cstMetaTagItemprop }']` )
+		.querySelector( `meta[itemprop='${ csnMetaTagItemprop }']` )
 		?.getAttribute( 'content' ) === 'active';
 
 // Fetch styles of a new page.
@@ -55,7 +55,7 @@ const fetchHead = async ( head ) => {
 const fetchPage = async ( url ) => {
 	const html = await window.fetch( url ).then( ( r ) => r.text() );
 	const dom = new window.DOMParser().parseFromString( html, 'text/html' );
-	if ( ! hasClientSideTransitions( dom.head ) ) return false;
+	if ( ! canDoClientSideNavigation( dom.head ) ) return false;
 	const head = await fetchHead( dom.head );
 	return { head, body: toVdom( dom.body ) };
 };
@@ -98,7 +98,7 @@ window.addEventListener( 'popstate', async () => {
 
 // Initialize the router with the initial DOM.
 export const init = async () => {
-	if ( hasClientSideTransitions( document.head ) ) {
+	if ( canDoClientSideNavigation( document.head ) ) {
 		// Create the root fragment to hydrate everything.
 		rootFragment = createRootFragment(
 			document.documentElement,

assets/js/interactivity/store.js

@@ -0,0 +1,42 @@
+import { deepSignal } from 'deepsignal';
+
+const isObject = ( item ) =>
+	item && typeof item === 'object' && ! Array.isArray( item );
+
+export const deepMerge = ( target, source ) => {
+	if ( isObject( target ) && isObject( source ) ) {
+		for ( const key in source ) {
+			if ( isObject( source[ key ] ) ) {
+				if ( ! target[ key ] ) Object.assign( target, { [ key ]: {} } );
+				deepMerge( target[ key ], source[ key ] );
+			} else {
+				Object.assign( target, { [ key ]: source[ key ] } );
+			}
+		}
+	}
+};
+
+const getSerializedState = () => {
+	const storeTag = document.querySelector(
+		`script[type="application/json"]#store`
+	);
+	if ( ! storeTag ) return {};
+	try {
+		const { state } = JSON.parse( storeTag.textContent );
+		if ( isObject( state ) ) return state;
+		throw Error( 'Parsed state is not an object' );
+	} catch ( e ) {
+		console.log( e );
+	}
+	return {};
+};
+
+const rawState = getSerializedState();
+export const rawStore = { state: deepSignal( rawState ) };
+
+if ( typeof window !== 'undefined' ) window.store = rawStore;
+
+export const store = ( { state, ...block } ) => {
+	deepMerge( rawStore, block );
+	deepMerge( rawState, state );
+};

assets/js/interactivity/wpx.js

@@ -1053,7 +1053,7 @@
         },
         {
             "name": "{$hook}",
-            "file": "Templates/BlockTemplatesCompatibility.php",
+            "file": "Templates/AbstractTemplateCompatibility.php",
             "type": "action",
             "doc": {
                 "description": "Action to render the content of a hook.",