Add Always show pre-publish checks checkbox

packages/js/product-editor/changelog/add-43707_show_prepublish_checks_section

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add Always show pre-publish checks checkbox #44595

packages/js/product-editor/src/components/header/header.tsx

@@ -27,6 +27,7 @@ import { PublishButton } from './publish-button';
 import { LoadingState } from './loading-state';
 import { Tabs } from '../tabs';
 import { HEADER_PINNED_ITEMS_SCOPE, TRACKS_SOURCE } from '../../constants';
+import { useShowPrepublishChecks } from '../../hooks/use-show-prepublish-checks';
 
 export type HeaderProps = {
 	onTabSelect: ( tabId: string | null ) => void;
@@ -64,6 +65,8 @@ export function Header( {
 		'name'
 	);
 
+	const { showPrepublishChecks } = useShowPrepublishChecks();
+
 	const sidebarWidth = useAdminSidebarWidth();
 
 	useEffect( () => {
@@ -158,7 +161,10 @@ export function Header( {
 						productStatus={ lastPersistedProduct?.status }
 					/>
 
-					<PublishButton productType={ productType } prePublish />
+					<PublishButton
+						productType={ productType }
+						prePublish={ showPrepublishChecks }
+					/>
 
 					<WooHeaderItem.Slot name="product" />
 					<PinnedItems.Slot scope={ HEADER_PINNED_ITEMS_SCOPE } />

packages/js/product-editor/src/components/prepublish-panel/prepublish-panel.tsx

@@ -17,6 +17,7 @@ import { store as productEditorUiStore } from '../../store/product-editor-ui';
 import { TRACKS_SOURCE } from '../../constants';
 import { VisibilitySection } from './visibility-section';
 import { ScheduleSection } from './schedule-section';
+import { ShowPrepublishChecksSection } from './show-prepublish-checks-section';
 
 export function PrepublishPanel( {
 	productType = 'product',
@@ -63,9 +64,13 @@ export function PrepublishPanel( {
 				<h4>{ title }</h4>
 				<span>{ description }</span>
 			</div>
-			<VisibilitySection productType={ productType } />
-
-			<ScheduleSection postType={ productType } />
+			<div className="woocommerce-product-publish-panel__content">
+				<VisibilitySection productType={ productType } />
+				<ScheduleSection postType={ productType } />
+			</div>
+			<div className="woocommerce-product-publish-panel__footer">
+				<ShowPrepublishChecksSection />
+			</div>
 		</div>
 	);
 }

packages/js/product-editor/src/components/prepublish-panel/show-prepublish-checks-section/index.ts

@@ -0,0 +1 @@
+export * from './show-prepublish-checks-section';

packages/js/product-editor/src/components/prepublish-panel/show-prepublish-checks-section/show-prepublish-checks-section.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
+import { CheckboxControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { TRACKS_SOURCE } from '../../../constants';
+import { useShowPrepublishChecks } from '../../../hooks/use-show-prepublish-checks';
+
+export function ShowPrepublishChecksSection() {
+	const { isResolving, showPrepublishChecks, togglePrepublishChecks } =
+		useShowPrepublishChecks();
+
+	if ( isResolving ) {
+		return null;
+	}
+
+	return (
+		<div className="woocommerce-publish-panel-show-checks">
+			<CheckboxControl
+				label={ __( 'Always show pre-publish checks.', 'woocommerce' ) }
+				checked={ showPrepublishChecks }
+				onChange={ ( selected: boolean ) => {
+					togglePrepublishChecks();
+					recordEvent( 'product_prepublish_panel', {
+						source: TRACKS_SOURCE,
+						action: 'toggle_prepublish_checks',
+						value: selected,
+					} );
+				} }
+			/>
+		</div>
+	);
+}

packages/js/product-editor/src/components/prepublish-panel/style.scss

@@ -1,11 +1,19 @@
 @import './visibility-section/style.scss';
 
 .woocommerce-product-publish-panel {
+	bottom: 0;
+    right: 0;
+    top: $admin-bar-height-big;
+	overflow: auto;
+    position: fixed;
 	background: $white;
 	transform: translateX(+100%);
 	animation: product-publish-panel__slide-in-animation 0.1s forwards;
+    width: 100%;
 
 	@include break-medium() {
+		top: $admin-bar-height;
+		width: $sidebar-width - $border-width;
 		@include reduce-motion("animation");
 
 		body.is-fullscreen-mode & {
@@ -43,6 +51,24 @@
 			margin: 8px 0;
 		}
 	}
+
+	&__content {
+		// Ensure the pre-publish panel accounts for the header and footer height.
+		min-height: calc( 100% - #{ $header-height + 200px } );
+	}
+
+	&__footer {
+		padding: 0 $grid-unit-20;
+		left: 0;
+		width: 100%;
+		min-height: $gap-largest + $gap-large;
+		display: flex;
+		align-items: center;
+
+		.components-base-control__field {
+			margin: 0;
+		}
+	}
 }
 
 @keyframes product-publish-panel__slide-in-animation {

packages/js/product-editor/src/constants.ts

@@ -5,6 +5,8 @@ export const NEW_PRODUCT_MANAGEMENT_ENABLED_OPTION_NAME =
 	'woocommerce_new_product_management_enabled';
 export const SINGLE_VARIATION_NOTICE_DISMISSED_OPTION =
 	'woocommerce_single_variation_notice_dismissed';
+export const SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME =
+	'woocommerce_show_prepublish_checks_enabled';
 
 export const NUMBERS_AND_ALLOWED_CHARS = '[^-0-9%s1%s2]';
 export const NUMBERS_AND_DECIMAL_SEPARATOR = '[^-\\d\\%s]+';

packages/js/product-editor/src/hooks/use-show-prepublish-checks.ts

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+
+/**
+ * Internal dependencies
+ */
+import { SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME } from '../constants';
+
+export function useShowPrepublishChecks() {
+	const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
+
+	const { isResolving, showPrepublishChecks } = useSelect( ( select ) => {
+		const { getOption, hasFinishedResolution } =
+			select( OPTIONS_STORE_NAME );
+
+		const showPrepublishChecksOption =
+			getOption( SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME ) || 'yes';
+
+		const resolving = ! hasFinishedResolution( 'getOption', [
+			SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME,
+		] );
+
+		return {
+			isResolving: resolving,
+			showPrepublishChecks: showPrepublishChecksOption === 'yes',
+		};
+	}, [] );
+
+	const togglePrepublishChecks = () => {
+		updateOptions( {
+			[ SHOW_PREPUBLISH_CHECKS_ENABLED_OPTION_NAME ]: showPrepublishChecks
+				? 'no'
+				: 'yes',
+		} );
+	};
+
+	return {
+		isResolving,
+		showPrepublishChecks,
+		togglePrepublishChecks,
+	};
+}

plugins/woocommerce-admin/client/customize-store/intro/index.tsx

@@ -238,6 +238,7 @@ export const Intro: CustomizeStoreComponent = ( { sendEvent, context } ) => {
 								total_palettes={ theme.total_palettes }
 								link_url={ theme?.link_url }
 								is_active={ theme.is_active }
+								price={ theme.price }
 								onClick={ () => {
 									if ( theme.is_active ) {
 										sendEvent( {

plugins/woocommerce-admin/client/customize-store/intro/intro.scss

@@ -278,28 +278,37 @@
 			}
 		}
 
+		.theme-card__free {
+			color: #1e1e1e;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 16px; /* 114.286% */
+		}
+
 		.theme-card__active {
-			border-radius: 100px;
 			background: rgba(56, 88, 233, 0.2);
+			color: #1d35b4;
+		}
+
+		.theme-card__paid {
+			background: #dcdcde;
+			color: #2c3338;
+		}
+
+		.theme-card__active,
+		.theme-card__paid {
+			border-radius: 100px;
 			padding: 5px 10px;
 			justify-content: flex-end;
 			align-items: center;
 			gap: 10px;
-			color: #1d35b4;
 			font-size: 12px;
 			font-style: normal;
 			font-weight: 500;
 			line-height: 20px; /* 166.667% */
 			margin-right: 10px;
 		}
-
-		.theme-card__free {
-			color: #1e1e1e;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 16px; /* 114.286% */
-		}
 	}
 }
 

plugins/woocommerce-admin/client/customize-store/intro/theme-card.tsx

@@ -19,6 +19,7 @@ export const ThemeCard = ( {
 	total_palettes = 0,
 	link_url = '',
 	is_active = false,
+	price = 'Free',
 	onClick,
 }: TypeThemeCard & {
 	onClick: () => void;
@@ -49,7 +50,12 @@ export const ThemeCard = ( {
 						{ __( 'Active theme', 'woocommerce' ) }
 					</span>
 				) }
-				<span className="theme-card__free">Free</span>
+				{ price !== 'Free' && (
+					<span className="theme-card__paid">
+						{ __( 'Paid', 'woocommerce' ) }
+					</span>
+				) }
+				<span className="theme-card__free">{ price }</span>
 			</div>
 		</div>
 	);

plugins/woocommerce-admin/client/customize-store/intro/types.ts

@@ -13,6 +13,7 @@ export type ThemeCard = {
 	thumbnail_url: string;
 	is_active: boolean;
 	link_url?: string;
+	price: string;
 	color_palettes: ColorPalette[];
 	total_palettes: number;
 };

plugins/woocommerce/changelog/44811-update-blocks-build-message

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+Comment: Update Blocks build message when asset files are not built.
+

plugins/woocommerce/changelog/44822-44609-cys-on-core-update-the-themes-list-on-the-intro-screen

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update the themes list on the Customize Your Store intro screen.

plugins/woocommerce/changelog/45096-fix-remove-wp-nightly-test

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+Comment: This PR affects tooling and a change entry is not required.
+

plugins/woocommerce/changelog/add-43707_show_prepublish_checks_section

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add Always show pre-publish checks checkbox #44595

plugins/woocommerce/changelog/e2e-add-merchant-transform-cart-test

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+E2E tests: add test for transforming classic cart to cart block

plugins/woocommerce/changelog/fix-43289-woocommerce-css-watch

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+WooCommerce build watching will now also detect CSS file changes.

plugins/woocommerce/package.json

@@ -124,25 +124,6 @@
 						}
 					}
 				},
-				{
-					"name": "PHP WP: nightly",
-					"command": "test:php:env",
-					"changes": [
-						"composer.lock",
-						"includes/**/*.php",
-						"patterns/**/*.php",
-						"src/**/*.php",
-						"templates/**/*.php",
-						"tests/php/**/*.php",
-						"tests/unit-tests/**/*.php"
-					],
-					"testEnv": {
-						"start": "env:test",
-						"config": {
-							"wpVersion": "nightly"
-						}
-					}
-				},
 				{
 					"name": "PHP WP: latest - 1",
 					"command": "test:php:env",
@@ -256,6 +237,7 @@
 			"node_modules/@woocommerce/classic-assets/build",
 			"node_modules/@woocommerce/admin-library/build"
 		],
+		"ext": "js,css,php,json",
 		"ignoreRoot": []
 	},
 	"wireit": {