Merge branch 'trunk' into fix/10546

.github/workflows/check-doc-links-config.json

@@ -19,5 +19,6 @@
 		{
 		"pattern": "https://www.php.net/manual/en/install.php"
 		}
-	]
+	],
+	"retryOn429": true
 }

.github/workflows/check-doc-links.yml

@@ -25,7 +25,7 @@ jobs:
           cache: 'npm'
 
       - name: Install markdown-link-check
-        run: npm install -g markdown-link-check
+        run: npm install -g markdown-link-check@3.11.2
 
       - name: Run markdown-link-check
         run: |

assets/js/atomic/blocks/product-elements/button/frontend.tsx

@@ -229,6 +229,23 @@ interactivityStore(
 				},
 			},
 		},
+		init: {
+			woocommerce: {
+				syncTemporaryNumberOfItemsOnLoad: ( store: Store ) => {
+					const { selectors, context } = store;
+					// If the cart has loaded when we instantiate this element, we sync
+					// the temporary number of items with the number of items in the cart
+					// to avoid triggering the animation. We do this only once, but we
+					// use useLayoutEffect to avoid the useEffect flickering.
+					if ( selectors.woocommerce.hasCartLoaded( store ) ) {
+						context.woocommerce.temporaryNumberOfItems =
+							selectors.woocommerce.numberOfItemsInTheCart(
+								store
+							);
+					}
+				},
+			},
+		},
 		effects: {
 			woocommerce: {
 				startAnimation: ( store: Store ) => {

assets/js/atomic/blocks/product-elements/image/block.tsx

@@ -120,6 +120,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 					},
 					styleProps.className
 				) }
+				style={ styleProps.style }
 			>
 				<ImagePlaceholder />
 			</div>
@@ -153,6 +154,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 				},
 				styleProps.className
 			) }
+			style={ styleProps.style }
 		>
 			<ParentComponent { ...( showProductLink && anchorProps ) }>
 				{ !! showSaleBadge && (

assets/js/base/components/read-more/trim-html.js

@@ -0,0 +1,157 @@
+// Copy-pasted from https://github.com/brankosekulic/trimHtml/blob/master/index.js
+// the published npm version of this code contains a bug that causes it throw exceptions.
+export function trimHtml( html, options ) {
+	options = options || {};
+
+	const limit = options.limit || 100,
+		preserveTags =
+			typeof options.preserveTags !== 'undefined'
+				? options.preserveTags
+				: true,
+		wordBreak =
+			typeof options.wordBreak !== 'undefined'
+				? options.wordBreak
+				: false,
+		suffix = options.suffix || '...',
+		moreLink = options.moreLink || '',
+		moreText = options.moreText || '»',
+		preserveWhiteSpace = options.preserveWhiteSpace || false;
+
+	const arr = html
+		.replace( /</g, '\n<' )
+		.replace( />/g, '>\n' )
+		.replace( /\n\n/g, '\n' )
+		.replace( /^\n/g, '' )
+		.replace( /\n$/g, '' )
+		.split( '\n' );
+
+	let sum = 0,
+		row,
+		cut,
+		add,
+		rowCut,
+		tagMatch,
+		tagName,
+		// eslint-disable-next-line prefer-const
+		tagStack = [],
+		more = false;
+
+	for ( let i = 0; i < arr.length; i++ ) {
+		row = arr[ i ];
+
+		// count multiple spaces as one character
+		if ( ! preserveWhiteSpace ) {
+			rowCut = row.replace( /[ ]+/g, ' ' );
+		} else {
+			rowCut = row;
+		}
+
+		if ( ! row.length ) {
+			continue;
+		}
+
+		const charArr = getCharArr( rowCut );
+
+		if ( row[ 0 ] !== '<' ) {
+			if ( sum >= limit ) {
+				row = '';
+			} else if ( sum + charArr.length >= limit ) {
+				cut = limit - sum;
+
+				if ( charArr[ cut - 1 ] === ' ' ) {
+					while ( cut ) {
+						cut -= 1;
+						if ( charArr[ cut - 1 ] !== ' ' ) {
+							break;
+						}
+					}
+				} else {
+					add = charArr.slice( cut ).indexOf( ' ' );
+
+					// break on halh of word
+					if ( ! wordBreak ) {
+						if ( add !== -1 ) {
+							cut += add;
+						} else {
+							cut = row.length;
+						}
+					}
+				}
+
+				row = charArr.slice( 0, cut ).join( '' ) + suffix;
+
+				if ( moreLink ) {
+					row +=
+						'<a href="' +
+						moreLink +
+						'" style="display:inline">' +
+						moreText +
+						'</a>';
+				}
+
+				sum = limit;
+				more = true;
+			} else {
+				sum += charArr.length;
+			}
+		} else if ( ! preserveTags ) {
+			row = '';
+		} else if ( sum >= limit ) {
+			tagMatch = row.match( /[a-zA-Z]+/ );
+			tagName = tagMatch ? tagMatch[ 0 ] : '';
+
+			if ( tagName ) {
+				if ( row.substring( 0, 2 ) !== '</' ) {
+					tagStack.push( tagName );
+					row = '';
+				} else {
+					while (
+						tagStack[ tagStack.length - 1 ] !== tagName &&
+						tagStack.length
+					) {
+						tagStack.pop();
+					}
+
+					if ( tagStack.length ) {
+						row = '';
+					}
+
+					tagStack.pop();
+				}
+			} else {
+				row = '';
+			}
+		}
+
+		arr[ i ] = row;
+	}
+
+	return {
+		html: arr.join( '\n' ).replace( /\n/g, '' ),
+		more,
+	};
+}
+
+// count symbols like one char
+function getCharArr( rowCut ) {
+	// eslint-disable-next-line prefer-const
+	let charArr = [],
+		subRow,
+		match,
+		char;
+
+	for ( let i = 0; i < rowCut.length; i++ ) {
+		subRow = rowCut.substring( i );
+		match = subRow.match( /^&[a-z0-9#]+;/ );
+
+		if ( match ) {
+			char = match[ 0 ];
+			charArr.push( char );
+			i += char.length - 1;
+		} else {
+			charArr.push( rowCut[ i ] );
+		}
+	}
+
+	return charArr;
+}

assets/js/base/components/read-more/utils.ts

@@ -1,8 +1,11 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import trimHtml from 'trim-html';
+import { trimHtml } from './trim-html';
 
+/**
+ * External dependencies
+ */
 type Markers = {
 	end: number;
 	middle: number;

assets/js/base/context/hooks/cart/test/use-store-cart.js

@@ -147,9 +147,9 @@ describe( 'useStoreCart', () => {
 			useStoreCart( options );
 		return (
 			<div
-				results={ results }
-				receiveCart={ receiveCart }
-				receiveCartContents={ receiveCartContents }
+				data-results={ results }
+				data-receiveCart={ receiveCart }
+				data-receiveCartContents={ receiveCartContents }
 			/>
 		);
 	};
@@ -200,8 +200,11 @@ describe( 'useStoreCart', () => {
 				);
 			} );
 
-			const { results, receiveCart, receiveCartContents } =
-				renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+			const props = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+			const results = props[ 'data-results' ];
+			const receiveCart = props[ 'data-receiveCart' ];
+			const receiveCartContents = props[ 'data-receiveCartContents' ];
+
 			const {
 				receiveCart: defaultReceiveCart,
 				receiveCartContents: defaultReceiveCartContents,
@@ -223,8 +226,10 @@ describe( 'useStoreCart', () => {
 				);
 			} );
 
-			const { results, receiveCart, receiveCartContents } =
-				renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+			const props = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+			const results = props[ 'data-results' ];
+			const receiveCart = props[ 'data-receiveCart' ];
+			const receiveCartContents = props[ 'data-receiveCartContents' ];
 
 			expect( results ).toEqual( mockStoreCartData );
 			expect( receiveCart ).toBeUndefined();
@@ -255,8 +260,10 @@ describe( 'useStoreCart', () => {
 				);
 			} );
 
-			const { results, receiveCart, receiveCartContents } =
-				renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+			const props = renderer.root.findByType( 'div' ).props; //eslint-disable-line testing-library/await-async-query
+			const results = props[ 'data-results' ];
+			const receiveCart = props[ 'data-receiveCart' ];
+			const receiveCartContents = props[ 'data-receiveCartContents' ];
 
 			expect( results ).toEqual( previewCartData );
 			expect( receiveCart ).toEqual( receiveCartMock );

assets/js/base/context/hooks/collections/test/use-collection.js

@@ -28,7 +28,7 @@ class TestErrorBoundary extends ReactComponent {
 
 	render() {
 		if ( this.state.hasError ) {
-			return <div error={ this.state.error } />;
+			return <div data-error={ this.state.error } />;
 		}
 
 		return this.props.children;
@@ -100,7 +100,7 @@ describe( 'useCollection', () => {
 			} );
 			//eslint-disable-next-line testing-library/await-async-query
 			const props = renderer.root.findByType( 'div' ).props;
-			expect( props.error.message ).toMatch( /options object/ );
+			expect( props[ 'data-error' ].message ).toMatch( /options object/ );
 			expect( console ).toHaveErrored( /your React components:/ );
 			renderer.unmount();
 		}
@@ -122,7 +122,7 @@ describe( 'useCollection', () => {
 			} );
 			//eslint-disable-next-line testing-library/await-async-query
 			const props = renderer.root.findByType( 'div' ).props;
-			expect( props.error.message ).toMatch( /options object/ );
+			expect( props[ 'data-error' ].message ).toMatch( /options object/ );
 			expect( console ).toHaveErrored( /your React components:/ );
 			renderer.unmount();
 		}

assets/js/base/context/hooks/test/use-query-state.js

@@ -38,7 +38,7 @@ describe( 'Testing Query State Hooks', () => {
 	const getProps = ( testRenderer ) => {
 		//eslint-disable-next-line testing-library/await-async-query
 		const props = testRenderer.root.findByType( 'div' ).props;
-		return [ props.queryState, props.setQueryState ];
+		return [ props[ 'data-queryState' ], props[ 'data-setQueryState' ] ];
 	};
 
 	/**
@@ -75,7 +75,10 @@ describe( 'Testing Query State Hooks', () => {
 		const args = propKeysForArgs.map( ( key ) => props[ key ] );
 		const [ queryValue, setQueryValue ] = hookTested( ...args );
 		return (
-			<div queryState={ queryValue } setQueryState={ setQueryValue } />
+			<div
+				data-queryState={ queryValue }
+				data-setQueryState={ setQueryValue }
+			/>
 		);
 	};
 

assets/js/base/hocs/test/with-reviews.js

@@ -40,13 +40,13 @@ const defaultArgs = {
 const TestComponent = withReviews( ( props ) => {
 	return (
 		<div
-			error={ props.error }
-			getReviews={ props.getReviews }
-			appendReviews={ props.appendReviews }
-			onChangeArgs={ props.onChangeArgs }
-			isLoading={ props.isLoading }
-			reviews={ props.reviews }
-			totalReviews={ props.totalReviews }
+			data-error={ props.error }
+			data-getReviews={ props.getReviews }
+			data-appendReviews={ props.appendReviews }
+			data-onChangeArgs={ props.onChangeArgs }
+			data-isLoading={ props.isLoading }
+			data-reviews={ props.reviews }
+			data-totalReviews={ props.totalReviews }
 		/>
 	);
 } );
@@ -127,10 +127,14 @@ describe( 'withReviews Component', () => {
 		it( 'sets reviews based on API response', () => {
 			const props = renderer.root.findByType( 'div' ).props;
 
-			expect( props.error ).toBeNull();
-			expect( props.isLoading ).toBe( false );
-			expect( props.reviews ).toEqual( mockReviews.slice( 0, 2 ) );
-			expect( props.totalReviews ).toEqual( mockReviews.length );
+			expect( props[ 'data-error' ] ).toBeNull();
+			expect( props[ 'data-isLoading' ] ).toBe( false );
+			expect( props[ 'data-reviews' ] ).toEqual(
+				mockReviews.slice( 0, 2 )
+			);
+			expect( props[ 'data-totalReviews' ] ).toEqual(
+				mockReviews.length
+			);
 		} );
 	} );
 
@@ -155,9 +159,9 @@ describe( 'withReviews Component', () => {
 
 			expect( formatError ).toHaveBeenCalledWith( error );
 			expect( formatError ).toHaveBeenCalledTimes( 1 );
-			expect( props.error ).toEqual( formattedError );
-			expect( props.isLoading ).toBe( false );
-			expect( props.reviews ).toEqual( [] );
+			expect( props[ 'data-error' ] ).toEqual( formattedError );
+			expect( props[ 'data-isLoading' ] ).toBe( false );
+			expect( props[ 'data-reviews' ] ).toEqual( [] );
 		} );
 	} );
 } );