Resolve conflicts

.github/workflows/approved-with-labels.yml

@@ -22,4 +22,4 @@ jobs:
               with:
                   github_token: ${{ secrets.GITHUB_TOKEN }}
                   automations: assign-milestone
-                  milestone_bump_strategy: minor
+                  milestone_bump_strategy: none

assets/css/abstracts/_colors.scss

@@ -15,3 +15,6 @@ $select-dropdown-dark: #1e1e1e;
 $select-dropdown-light: #fff;
 $select-item-dark: rgba(0, 0, 0, 0.4);
 $image-placeholder-border-color: #f2f2f2;
+
+// Universal colors for use on the frontend, currently being applied to checkout blocks.
+$universal-border-light: rgba(17, 17, 17, 0.115); // e7e7e7 on white

assets/css/abstracts/_variables.scss

@@ -1,9 +1,10 @@
 @import "node_modules/@wordpress/base-styles/variables";
 
-$gap-largest: $grid-unit-50;
-$gap-larger: 4.5 * $grid-unit;
-$gap-large: $grid-unit-30;
-$gap: $grid-unit-20;
-$gap-small: $grid-unit-15;
-$gap-smaller: $grid-unit-10;
-$gap-smallest: $grid-unit-05;
+// grid-unit from base-styles is 8px.
+$gap-largest:  6 * $grid-unit;		// 48px
+$gap-larger:   4.5 * $grid-unit;	// 36px
+$gap-large:    3 * $grid-unit;		// 24px
+$gap:          2 * $grid-unit;		// 16px
+$gap-small:    1.5 * $grid-unit;	// 12px
+$gap-smaller:  1 * $grid-unit;		// 8px
+$gap-smallest: 0.5 * $grid-unit;	// 4px

assets/js/base/components/skeleton/index.tsx

@@ -5,10 +5,14 @@ import './style.scss';
 
 export interface SkeletonProps {
 	numberOfLines?: number;
+	tag?: keyof JSX.IntrinsicElements;
+	maxWidth?: string;
 }
 
 export const Skeleton = ( {
 	numberOfLines = 1,
+	tag: Tag = 'div',
+	maxWidth = '100%',
 }: SkeletonProps ): JSX.Element => {
 	const skeletonLines = Array.from(
 		{ length: numberOfLines },
@@ -21,6 +25,13 @@ export const Skeleton = ( {
 		)
 	);
 	return (
-		<div className="wc-block-components-skeleton">{ skeletonLines }</div>
+		<Tag
+			className="wc-block-components-skeleton"
+			style={ {
+				maxWidth,
+			} }
+		>
+			{ skeletonLines }
+		</Tag>
 	);
 };

assets/js/base/components/skeleton/style.scss

@@ -7,11 +7,11 @@
 }
 
 .wc-block-components-skeleton-text-line {
-	height: 0.8em;
+	height: 0.85em;
 	width: 100%;
 	position: relative;
-	background: $gray-200;
-	border-radius: 2em;
+	background: $universal-border-light;
+	border-radius: 2px;
 
 	&:last-child {
 		width: 80%;

assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx

@@ -12,12 +12,10 @@ import { CartCheckoutSidebarCompatibilityNotice } from '@woocommerce/editor-comp
 import { NoPaymentMethodsNotice } from '@woocommerce/editor-components/no-payment-methods-notice';
 import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
 import { DefaultNotice } from '@woocommerce/editor-components/default-notice';
-import { TemplateNotice } from '@woocommerce/editor-components/template-notice';
 import { IncompatiblePaymentGatewaysNotice } from '@woocommerce/editor-components/incompatible-payment-gateways-notice';
 import { useSelect } from '@wordpress/data';
 import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
 import { useState } from '@wordpress/element';
-import { getSetting } from '@woocommerce/settings';
 
 declare module '@wordpress/editor' {
 	let store: StoreDescriptor;
@@ -39,8 +37,6 @@ const withSidebarNotices = createHigherOrderComponent(
 			isSelected: isBlockSelected,
 		} = props;
 
-		const isBlockTheme = getSetting( 'isBlockTheme' );
-
 		const [
 			isIncompatiblePaymentGatewaysNoticeDismissed,
 			setIsIncompatiblePaymentGatewaysNoticeDismissed,
@@ -106,15 +102,7 @@ const withSidebarNotices = createHigherOrderComponent(
 						}
 					/>
 
-					{ isBlockTheme ? (
-						<TemplateNotice
-							block={ isCheckout ? 'checkout' : 'cart' }
-						/>
-					) : (
-						<DefaultNotice
-							block={ isCheckout ? 'checkout' : 'cart' }
-						/>
-					) }
+					<DefaultNotice block={ isCheckout ? 'checkout' : 'cart' } />
 
 					{ isIncompatiblePaymentGatewaysNoticeDismissed ? (
 						<CartCheckoutSidebarCompatibilityNotice

assets/js/blocks/classic-shortcode/cart.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { createBlock, type BlockInstance } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { OnClickCallbackParameter, InheritedAttributes } from './types';
+
+const isConversionPossible = () => {
+	return true;
+};
+
+const getButtonLabel = () =>
+	__( 'Transform into blocks', 'woo-gutenberg-products-block' );
+
+const getBlockifiedTemplate = ( inheritedAttributes: InheritedAttributes ) =>
+	[
+		createBlock( 'woocommerce/cart', {
+			...inheritedAttributes,
+			className: 'wc-block-cart',
+		} ),
+	].filter( Boolean ) as BlockInstance[];
+
+const onClickCallback = ( {
+	clientId,
+	attributes,
+	getBlocks,
+	replaceBlock,
+	selectBlock,
+}: OnClickCallbackParameter ) => {
+	replaceBlock( clientId, getBlockifiedTemplate( attributes ) );
+
+	const blocks = getBlocks();
+
+	const groupBlock = blocks.find(
+		( block ) =>
+			block.name === 'core/group' &&
+			block.innerBlocks.some(
+				( innerBlock ) =>
+					innerBlock.name === 'woocommerce/store-notices'
+			)
+	);
+
+	if ( groupBlock ) {
+		selectBlock( groupBlock.clientId );
+	}
+};
+
+/**
+ * Title shown within the block itself.
+ */
+const getTitle = () => {
+	return __( 'Cart Shortcode', 'woo-gutenberg-products-block' );
+};
+
+/**
+ * Description shown within the block itself.
+ */
+const getDescription = () => {
+	return __(
+		'This block will render the classic cart shortcode. You can optionally transform it into blocks for more control over the cart experience.',
+		'woo-gutenberg-products-block'
+	);
+};
+
+const blockifyConfig = {
+	getButtonLabel,
+	onClickCallback,
+	getBlockifiedTemplate,
+};
+
+export { blockifyConfig, isConversionPossible, getDescription, getTitle };

assets/js/blocks/classic-shortcode/checkout.tsx

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import { createBlock, type BlockInstance } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { OnClickCallbackParameter, InheritedAttributes } from './types';
+
+const isConversionPossible = () => {
+	return true;
+};
+
+const getButtonLabel = () =>
+	__( 'Transform into blocks', 'woo-gutenberg-products-block' );
+
+const getBlockifiedTemplate = ( inheritedAttributes: InheritedAttributes ) =>
+	[
+		createBlock( 'woocommerce/checkout', {
+			...inheritedAttributes,
+			className: 'wc-block-checkout',
+		} ),
+	].filter( Boolean ) as BlockInstance[];
+
+const onClickCallback = ( {
+	clientId,
+	attributes,
+	getBlocks,
+	replaceBlock,
+	selectBlock,
+}: OnClickCallbackParameter ) => {
+	replaceBlock( clientId, getBlockifiedTemplate( attributes ) );
+
+	const blocks = getBlocks();
+
+	const groupBlock = blocks.find(
+		( block ) =>
+			block.name === 'core/group' &&
+			block.innerBlocks.some(
+				( innerBlock ) =>
+					innerBlock.name === 'woocommerce/store-notices'
+			)
+	);
+
+	if ( groupBlock ) {
+		selectBlock( groupBlock.clientId );
+	}
+};
+
+const getTitle = () => {
+	return __( 'Checkout Shortcode', 'woo-gutenberg-products-block' );
+};
+
+const getDescription = () => {
+	return __(
+		'This block will render the classic checkout shortcode. You can optionally transform it into blocks for more control over the checkout experience.',
+		'woo-gutenberg-products-block'
+	);
+};
+
+const blockifyConfig = {
+	getButtonLabel,
+	onClickCallback,
+	getBlockifiedTemplate,
+};
+
+export { blockifyConfig, isConversionPossible, getDescription, getTitle };

assets/js/blocks/classic-shortcode/constants.ts

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { TemplateDetails } from './types';
+
+export const TYPES = {
+	cart: 'cart',
+	checkout: 'checkout',
+};
+export const PLACEHOLDERS = {
+	cart: 'cart',
+	checkout: 'checkout',
+};
+
+export const TEMPLATES: TemplateDetails = {
+	cart: {
+		type: TYPES.cart,
+		// Title shows up in the list view in the site editor.
+		title: __( 'Cart Shortcode', 'woo-gutenberg-products-block' ),
+		// Description in the site editor.
+		description: __(
+			'Renders the classic cart shortcode.',
+			'woo-gutenberg-products-block'
+		),
+		placeholder: PLACEHOLDERS.cart,
+	},
+	checkout: {
+		type: TYPES.checkout,
+		title: __( 'Checkout Shortcode', 'woo-gutenberg-products-block' ),
+		description: __(
+			'Renders the classic checkout shortcode.',
+			'woo-gutenberg-products-block'
+		),
+		placeholder: PLACEHOLDERS.checkout,
+	},
+};

assets/js/blocks/classic-shortcode/editor.scss

@@ -0,0 +1,92 @@
+:where(.wp-block-woocommerce-classic-shortcode) {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wp-block-woocommerce-classic-shortcode__placeholder-warning {
+	border-left: 5px solid #2181d2;
+	padding-left: em(40px);
+}
+.wp-block-woocommerce-classic-shortcode__placeholder .components-placeholder__fieldset {
+	display: grid;
+	grid-template-columns: 1fr;
+}
+.wp-block-woocommerce-classic-shortcode__placeholder-wireframe,
+.wp-block-woocommerce-classic-shortcode__placeholder-copy {
+	grid-row-start: 1;
+	grid-column-start: 1;
+	transition: 0.3s all ease;
+}
+.wp-block-woocommerce-classic-shortcode__placeholder-copy {
+	border: 1px solid $gray-900;
+	background-color: #fff;
+	padding: $gap-large $gap-larger;
+	border-radius: 3px;
+	display: flex;
+	flex-direction: column;
+	max-width: 900px;
+	width: 400px;
+	margin: auto;
+	opacity: 0;
+	z-index: 10;
+
+	.wp-block-woocommerce-classic-shortcode__placeholder-copy__icon-container {
+		margin: 0 0 $gap;
+
+		span {
+			@include font-size(larger);
+			display: block;
+		}
+		.woo-icon {
+			color: #{$studio-woocommerce-purple};
+			@include font-size(large);
+
+			svg {
+				vertical-align: middle;
+			}
+		}
+	}
+	p {
+		margin: 0 0 $gap;
+	}
+	.wp-block-woocommerce-classic-shortcode__placeholder-migration-button-container {
+		justify-content: center;
+		margin: $gap 0;
+	}
+}
+.wp-block-woocommerce-classic-shortcode__placeholder-wireframe {
+	pointer-events: none;
+
+	// Image based placeholders should fill horizontal width.
+	> img {
+		width: 100%;
+	}
+}
+
+.wp-block-woocommerce-classic-shortcode {
+	.components-placeholder {
+		box-shadow: none;
+		padding: 0;
+	}
+}
+
+.is-selected .wp-block-woocommerce-classic-shortcode,
+.is-hovered .wp-block-woocommerce-classic-shortcode,
+.wp-block-woocommerce-classic-shortcode.is-selected,
+.wp-block-woocommerce-classic-shortcode.is-hovered {
+	.wp-block-woocommerce-classic-shortcode__placeholder-wireframe {
+		filter: blur(3px);
+		opacity: 0.5;
+
+		* {
+			color: $gray-200 !important;
+			border-color: $gray-200 !important;
+		}
+	}
+	.wp-block-woocommerce-classic-shortcode__placeholder-copy {
+		opacity: 1;
+	}
+	.components-placeholder {
+		box-shadow: inherit;
+	}
+}