Add Always show pre-publish checks checkbox (#44595)

* Add show-prepublish-checks-section # Conflicts: # packages/js/product-editor/src/components/prepublish-panel/prepublish-panel.tsx # Conflicts: # packages/js/product-editor/src/components/prepublish-panel/style.scss * Add show-prepublish-checks hook * Refactor prepublish panel button visiblity # Conflicts: # packages/js/product-editor/src/components/header/header.tsx # Conflicts: # packages/js/product-editor/src/components/header/header.tsx * Fix footer styles * Add changelogs * Add content div * Fix styles # Conflicts: # packages/js/product-editor/src/components/prepublish-panel/style.scss * Rename recorded action * Fix styles * Hide panel after unchecking option * Improve resolving * Add new E2E test for merchant transforming classic cart to cart block (#44926) * Update the monorepo-utils gitignore to only include index.js and its license file. (#44932) * Fixed `@woocommerce/plugin-woocommerce` Watch (#44930) By default `nodemon` only watches for JS file changes. This expands the config so that it watch the file extensions that are actually produced by builds. * Update core package.json to remove nightly ci config (#45096) * Update core package.json to remove nightly ci config * Add changefile(s) from automation for the following project(s): woocommerce --------- Co-authored-by: github-actions <github-actions@github.com> * Update blocks build message (#44811) * Update blocks build message * Add changefile(s) from automation for the following project(s): woocommerce * Update plugins/woocommerce/src/Blocks/Domain/Bootstrap.php Co-authored-by: Christopher Allford <6451942+ObliviousHarmony@users.noreply.github.com> * Update plugins/woocommerce/src/Blocks/Domain/Bootstrap.php Co-authored-by: Christopher Allford <6451942+ObliviousHarmony@users.noreply.github.com> --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Christopher Allford <6451942+ObliviousHarmony@users.noreply.github.com> * [CYS on Core] Update the themes list on the intro screen (#44822) * Update themes list on core. Update the themes data and remove hardcoded reference to free themes. * Update styles for the Free, Paid and active cards. * Add the color palletes to TT4 theme. * Update the references for default and core themes. * Add changefile(s) from automation for the following project(s): woocommerce * Update the link to TT4 theme * Update default value for price. --------- Co-authored-by: github-actions <github-actions@github.com> --------- Co-authored-by: Veljko V <veljano@yahoo.com> Co-authored-by: jonathansadowski <jonathansadowski@users.noreply.github.com> Co-authored-by: Christopher Allford <6451942+ObliviousHarmony@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Roy Ho <roykho77@gmail.com> Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
woocommerce · Feb 26, 2024 · 3d3f6d6 · 3d3f6d6
1 parent 3d045a1
commit 3d3f6d6
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 4 deletions.
diff --git a/packages/js/product-editor/changelog/add-43707_show_prepublish_checks_section b/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
diff --git a/packages/js/product-editor/src/components/header/header.tsx b/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 } />

diff --git a/packages/js/product-editor/src/components/prepublish-panel/prepublish-panel.tsx b/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>
 	);
 }
diff --git a/...js/product-editor/src/components/prepublish-panel/show-prepublish-checks-section/index.ts b/...js/product-editor/src/components/prepublish-panel/show-prepublish-checks-section/index.ts
@@ -0,0 +1 @@
+export * from './show-prepublish-checks-section';
diff --git a/...onents/prepublish-panel/show-prepublish-checks-section/show-prepublish-checks-section.tsx b/...onents/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>
+	);
+}
diff --git a/packages/js/product-editor/src/components/prepublish-panel/style.scss b/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 {

diff --git a/packages/js/product-editor/src/constants.ts b/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]+';

diff --git a/packages/js/product-editor/src/hooks/use-show-prepublish-checks.ts b/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,
+	};
+}
diff --git a/plugins/woocommerce/changelog/add-43707_show_prepublish_checks_section b/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
diff --git a/plugins/woocommerce/src/Admin/API/Options.php b/plugins/woocommerce/src/Admin/API/Options.php
@@ -205,6 +205,7 @@ public static function get_default_option_permissions() {
 			'woocommerce_product_tour_modal_hidden',
 			'woocommerce_block_product_tour_shown',
 			'woocommerce_revenue_report_date_tour_shown',
+			'woocommerce_show_prepublish_checks_enabled',
 			'woocommerce_date_type',
 			'date_format',
 			'time_format',