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',