Merge branch 'trunk' into remove-block-hooks-theme-include-list-guard

packages/js/product-editor/changelog/feature-add-loading-state-to-schedule-button

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Product Editor: Add loading state functionality to Schedule Product modal

packages/js/product-editor/changelog/fix-45589_publish_dropdown_not_visible

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix publish dropdown visibility in new product after hiding pre-publish modal #45682

packages/js/product-editor/changelog/fix-45590_prepublish_panel_section_title

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix section title styles in the pre-publish panel on WP 6.5 #45689

packages/js/product-editor/changelog/fix-45665

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Header tag Hidden now is aligned with the Visibility: Hidden from the pre publish modal

packages/js/product-editor/changelog/fix-45667

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Replace the Draft tag with a Scheduled tag in the product header

packages/js/product-editor/changelog/fix-45669_doulbe_scroll_bar_prepublish_panel

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix double scroll bar in pre-publish panel #45671

packages/js/product-editor/changelog/product-editor-prompt-exports

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Exports handlePrompt from @woocommerce/product-editor for use by extensions expanding the variation quick update menu. Also introduces handleConfirm and exposes it also

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

@@ -125,16 +125,24 @@ export function Header( {
 
 	function getVisibilityTags() {
 		const tags = [];
-		if ( productStatus === 'draft' || productStatus === 'future' ) {
+		if ( productStatus === 'draft' ) {
 			tags.push(
 				<Tag
 					key={ 'draft-tag' }
 					label={ __( 'Draft', 'woocommerce' ) }
 				/>
 			);
 		}
+		if ( productStatus === 'future' ) {
+			tags.push(
+				<Tag
+					key={ 'scheduled-tag' }
+					label={ __( 'Scheduled', 'woocommerce' ) }
+				/>
+			);
+		}
 		if (
-			( productStatus !== 'future' && catalogVisibility === 'hidden' ) ||
+			( productStatus !== 'future' && catalogVisibility !== 'visible' ) ||
 			( isVariation && productStatus === 'private' )
 		) {
 			tags.push(
@@ -249,7 +257,8 @@ export function Header( {
 
 					<PublishButton
 						productType={ productType }
-						prePublish={ showPrepublishChecks }
+						isPrePublishPanelVisible={ showPrepublishChecks }
+						isMenuButton
 					/>
 
 					<WooHeaderItem.Slot name="product" />

packages/js/product-editor/src/components/header/hooks/use-publish/use-publish.tsx

@@ -4,6 +4,7 @@
 import { MouseEvent } from 'react';
 import { Button } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
+import { isInTheFuture } from '@wordpress/date';
 import { __ } from '@wordpress/i18n';
 import type { Product } from '@woocommerce/data';
 
@@ -28,12 +29,18 @@ export function usePublish< T = Product >( {
 	const { isValidating, isDirty, isPublishing, publish } =
 		useProductManager( productType );
 
-	const [ status, , prevStatus ] = useEntityProp< Product[ 'status' ] >(
+	const [ , , prevStatus ] = useEntityProp< Product[ 'status' ] >(
 		'postType',
 		productType,
 		'status'
 	);
 
+	const [ editedDate ] = useEntityProp< string >(
+		'postType',
+		productType,
+		'date_created_gmt'
+	);
+
 	const isBusy = isPublishing || isValidating;
 	const isDisabled = disabled || isBusy || ! isDirty;
 
@@ -53,7 +60,7 @@ export function usePublish< T = Product >( {
 	function getButtonText() {
 		if (
 			window.wcAdminFeatures[ 'product-pre-publish-modal' ] &&
-			status === 'future'
+			isInTheFuture( editedDate )
 		) {
 			return __( 'Schedule', 'woocommerce' );
 		}

packages/js/product-editor/src/components/header/publish-button/publish-button-menu/publish-button-menu.tsx

@@ -26,7 +26,7 @@ export function PublishButtonMenu( {
 	postType,
 	...props
 }: PublishButtonMenuProps ) {
-	const { isScheduled, schedule, date, formattedDate } =
+	const { isScheduling, isScheduled, schedule, date, formattedDate } =
 		useProductScheduled( postType );
 	const [ showScheduleModal, setShowScheduleModal ] = useState<
 		'schedule' | 'edit' | undefined
@@ -62,6 +62,7 @@ export function PublishButtonMenu( {
 				<SchedulePublishModal
 					postType={ postType }
 					value={ showScheduleModal === 'edit' ? date : undefined }
+					isScheduling={ isScheduling }
 					onCancel={ () => setShowScheduleModal( undefined ) }
 					onSchedule={ scheduleProduct }
 				/>

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

@@ -25,7 +25,8 @@ import type { PublishButtonProps } from './types';
 
 export function PublishButton( {
 	productType = 'product',
-	prePublish,
+	isMenuButton,
+	isPrePublishPanelVisible = true,
 	...props
 }: PublishButtonProps ) {
 	const { createErrorNotice } = useDispatch( 'core/notices' );
@@ -68,7 +69,7 @@ export function PublishButton( {
 	if (
 		productType === 'product' &&
 		window.wcAdminFeatures[ 'product-pre-publish-modal' ] &&
-		prePublish
+		isMenuButton
 	) {
 		function renderPublishButtonMenu(
 			menuProps: Dropdown.RenderProps
@@ -78,7 +79,11 @@ export function PublishButton( {
 			);
 		}
 
-		if ( editedStatus !== 'publish' && editedStatus !== 'future' ) {
+		if (
+			editedStatus !== 'publish' &&
+			editedStatus !== 'future' &&
+			isPrePublishPanelVisible
+		) {
 			function handlePrePublishButtonClick(
 				event: MouseEvent< HTMLButtonElement >
 			) {

packages/js/product-editor/src/components/header/publish-button/types.ts

@@ -8,5 +8,6 @@ export type PublishButtonProps = Omit<
 	'aria-disabled' | 'variant' | 'children'
 > & {
 	productType?: string;
-	prePublish?: boolean;
+	isMenuButton?: boolean;
+	isPrePublishPanelVisible?: boolean;
 };

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

@@ -10,6 +10,7 @@ import { useEntityProp } from '@wordpress/core-data';
 import { closeSmall } from '@wordpress/icons';
 import classnames from 'classnames';
 import type { Product } from '@woocommerce/data';
+import { isInTheFuture } from '@wordpress/date';
 
 /**
  * Internal dependencies
@@ -30,10 +31,10 @@ export function PrepublishPanel( {
 		'woocommerce'
 	),
 }: PrepublishPanelProps ) {
-	const [ editedDate, , date ] = useEntityProp< string >(
+	const [ editedDate ] = useEntityProp< string >(
 		'postType',
 		productType,
-		'date_created'
+		'date_created_gmt'
 	);
 
 	const [ productStatus, , prevStatus ] = useEntityProp<
@@ -47,7 +48,7 @@ export function PrepublishPanel( {
 			? productStatus === 'publish'
 			: true;
 
-	if ( editedDate !== date ) {
+	if ( isInTheFuture( editedDate ) ) {
 		title = __( 'Are you ready to schedule this product?', 'woocommerce' );
 		description = __(
 			'Your product will be published at the specified date and time.',

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

@@ -52,7 +52,12 @@
 	}
 
 	&__content {
-		min-height: calc( 100% - #{ $header-height + 220px } );
+		// Ensure the pre-publish panel content accounts for the header and footer height.
+		min-height: calc( 100% - #{ $header-height + 222px } );
+		.editor-post-publish-panel__link {
+			font-weight: 400;
+   			 padding-left: $gap-smallest;
+		}
 	}
 
 	&__footer {

packages/js/product-editor/src/components/schedule-publish-modal/schedule-publish-modal.tsx

@@ -26,6 +26,7 @@ export function SchedulePublishModal( {
 	className,
 	onCancel,
 	onSchedule,
+	isScheduling,
 	...props
 }: SchedulePublishModalProps ) {
 	const [ date, setDate ] = useState< string | undefined >(
@@ -77,6 +78,8 @@ export function SchedulePublishModal( {
 				</Button>
 				<Button
 					variant="primary"
+					isBusy={ isScheduling }
+					disabled={ isScheduling }
 					onClick={ () => onSchedule?.( date ) }
 				>
 					{ __( 'Schedule', 'woocommerce' ) }

packages/js/product-editor/src/components/schedule-publish-modal/types.ts

@@ -13,4 +13,5 @@ export type SchedulePublishModalProps = Omit<
 	value?: string;
 	onCancel?(): void;
 	onSchedule?( value?: string ): void;
+	isScheduling?: boolean;
 };

packages/js/product-editor/src/utils/handle-confirm.ts

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export type HandleConfirmProps = {
+	message?: string;
+	onOk(): void;
+	onCancel?(): void;
+};
+
+export async function handleConfirm( {
+	message = __( 'Are you sure?', 'woocommerce' ),
+	onOk,
+	onCancel,
+}: HandleConfirmProps ) {
+	// eslint-disable-next-line no-alert
+	if ( window.confirm( message ) ) {
+		onOk?.();
+		return;
+	}
+
+	onCancel?.();
+}

packages/js/product-editor/src/utils/handle-prompt.ts

@@ -20,9 +20,7 @@ export async function handlePrompt( {
 	const value = window.prompt( message, defaultValue );
 
 	if ( value === null ) {
-		if ( onCancel ) {
-			onCancel();
-		}
+		onCancel?.();
 		return;
 	}
 

packages/js/product-editor/src/utils/index.ts

@@ -21,6 +21,8 @@ import {
 import { preventLeavingProductForm } from './prevent-leaving-product-form';
 import { hasAttributesUsedForVariations } from './has-attributes-used-for-variations';
 import { isValidEmail } from './validate-email';
+import { handlePrompt } from './handle-prompt';
+import { handleConfirm } from './handle-confirm';
 
 export * from './create-ordered-children';
 export * from './date';
@@ -45,6 +47,8 @@ export {
 	getProductTitle,
 	getProductVariationTitle,
 	getTruncatedProductVariationTitle,
+	handleConfirm,
+	handlePrompt,
 	hasAttributesUsedForVariations,
 	isValidEmail,
 	preventLeavingProductForm,

plugins/woocommerce-admin/client/customize-store/assembler-hub/block-editor-container.tsx

@@ -7,15 +7,20 @@
 import { store as blockEditorStore } from '@wordpress/block-editor';
 // @ts-expect-error No types for this exist yet.
 import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 // @ts-expect-error No types for this exist yet.
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 // @ts-expect-error No types for this exist yet.
 import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
 import { useQuery } from '@woocommerce/navigation';
 // @ts-expect-error No types for this exist yet.
 import useSiteEditorSettings from '@wordpress/edit-site/build-module/components/block-editor/use-site-editor-settings';
-import { useCallback, useContext, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+} from '@wordpress/element';
 // @ts-expect-error No types for this exist yet.
 import { store as editSiteStore } from '@wordpress/edit-site/build-module/store';
 
@@ -159,36 +164,51 @@ export const BlockEditorContainer = () => {
 
 	const opacityClass = 'preview-opacity';
 
-	const renderedBlocks = useMemo(
-		() =>
-			blocks.map( ( block ) => {
+	const clientIds = blocks.map( ( block ) => block.clientId );
+
+	// @ts-expect-error No types for this exist yet.
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		const { blockIdToHighlight, restOfBlockIds } = clientIds.reduce(
+			( acc, clientId ) => {
 				if (
 					! isHighlighting ||
-					block.clientId === highlightedBlockClientId
+					clientId === highlightedBlockClientId
 				) {
 					return {
-						...block,
-						attributes: {
-							...block.attributes,
-							className: block.attributes.className?.replace(
-								opacityClass,
-								''
-							),
-						},
+						blockIdToHighlight: clientId,
+						restOfBlockIds: acc.restOfBlockIds,
 					};
 				}
 
 				return {
-					...block,
-					attributes: {
-						...block.attributes,
-						className:
-							block.attributes.className + ` ${ opacityClass }`,
-					},
+					blockIdToHighlight: acc.blockIdToHighlight,
+					restOfBlockIds: [ ...acc.restOfBlockIds, clientId ],
 				};
-			} ),
-		[ blocks, highlightedBlockClientId, isHighlighting ]
-	);
+			},
+			{
+				blockIdToHighlight: null,
+				restOfBlockIds: [],
+			} as {
+				blockIdToHighlight: string | null;
+				restOfBlockIds: string[];
+			}
+		);
+
+		updateBlockAttributes( blockIdToHighlight, {
+			className: '',
+		} );
+
+		updateBlockAttributes( restOfBlockIds, {
+			className: ` ${ opacityClass }`,
+		} );
+	}, [
+		clientIds,
+		highlightedBlockClientId,
+		isHighlighting,
+		updateBlockAttributes,
+	] );
 
 	const isScrollable = useMemo(
 		() =>
@@ -202,7 +222,7 @@ export const BlockEditorContainer = () => {
 
 	return (
 		<BlockEditor
-			renderedBlocks={ renderedBlocks }
+			renderedBlocks={ blocks }
 			isScrollable={ isScrollable }
 			onChange={ onChange }
 			settings={ settings }