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
new file mode 100644
index 000000000000..6493aa26e357
--- /dev/null
+++ 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
index 22e57b2532ab..ec8f2d3b550b 100644
--- 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 }
/>
-
+
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
index e2d0ab88dc67..254950b9a64f 100644
--- 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( {
{ title }
{ description }
-
-
-
+
+
+
+
+
+
+
);
}
diff --git a/packages/js/product-editor/src/components/prepublish-panel/show-prepublish-checks-section/index.ts b/packages/js/product-editor/src/components/prepublish-panel/show-prepublish-checks-section/index.ts
new file mode 100644
index 000000000000..22473663964f
--- /dev/null
+++ b/packages/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/packages/js/product-editor/src/components/prepublish-panel/show-prepublish-checks-section/show-prepublish-checks-section.tsx b/packages/js/product-editor/src/components/prepublish-panel/show-prepublish-checks-section/show-prepublish-checks-section.tsx
new file mode 100644
index 000000000000..6606e420da4b
--- /dev/null
+++ b/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 (
+
+ {
+ togglePrepublishChecks();
+ recordEvent( 'product_prepublish_panel', {
+ source: TRACKS_SOURCE,
+ action: 'toggle_prepublish_checks',
+ value: selected,
+ } );
+ } }
+ />
+
+ );
+}
diff --git a/packages/js/product-editor/src/components/prepublish-panel/style.scss b/packages/js/product-editor/src/components/prepublish-panel/style.scss
index ee01a544c766..8229395b0f52 100644
--- 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
index b4ebb8791801..5ef835e3c201 100644
--- 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
new file mode 100644
index 000000000000..913b134e8303
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..6493aa26e357
--- /dev/null
+++ 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
index 7f08274cfc1a..1cd59c9bfc04 100644
--- 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',