Rename prepublish panel

packages/js/product-editor/changelog/add-43704_prepublish_sidebar_modal

@@ -1,4 +1,4 @@
 Significance: minor
 Type: add
 
-Add prepublish sidebar #44331
+Add prepublish panel #44331

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

@@ -34,7 +34,7 @@ import { BlockEditor } from '../block-editor';
 import { ValidationProvider } from '../../contexts/validation-context';
 import { EditorProps } from './types';
 import { store as productEditorUiStore } from '../../store/product-editor-ui';
-import { PrepublishSidebar } from '../prepublish-sidebar/prepublish-sidebar';
+import { PrepublishPanel } from '../prepublish-panel/prepublish-panel';
 
 export function Editor( {
 	product,
@@ -46,8 +46,8 @@ export function Editor( {
 	const updatedLayoutContext = useExtendLayout( 'product-block-editor' );
 
 	// Check if the prepublish sidebar is open from the store.
-	const isPrepublishSidebarOpen = useSelect( ( select ) => {
-		return select( productEditorUiStore ).isPrepublishSidebarOpen();
+	const isPrepublishPanelOpen = useSelect( ( select ) => {
+		return select( productEditorUiStore ).isPrepublishPanelOpen();
 	}, [] );
 
 	return (
@@ -82,8 +82,8 @@ export function Editor( {
 									</>
 								}
 								sidebar={
-									isPrepublishSidebarOpen && (
-										<PrepublishSidebar
+									isPrepublishPanelOpen && (
+										<PrepublishPanel
 											productType={ productType }
 											productId={ product.id }
 										/>

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

@@ -23,7 +23,7 @@ import { MoreMenu } from './more-menu';
 import { PreviewButton } from './preview-button';
 import { SaveDraftButton } from './save-draft-button';
 import { PublishButton } from './publish-button';
-import { PrepublishButton } from '../prepublish-sidebar';
+import { PrepublishButton } from '../prepublish-panel';
 import { Tabs } from '../tabs';
 import { HEADER_PINNED_ITEMS_SCOPE, TRACKS_SOURCE } from '../../constants';
 

packages/js/product-editor/src/components/prepublish-sidebar/index.ts → packages/js/product-editor/src/components/prepublish-panel/index.ts

@@ -1,3 +1,3 @@
 export * from './prepublish-button';
-export * from './prepublish-sidebar';
+export * from './prepublish-panel';
 export * from './types';

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

@@ -20,7 +20,7 @@ export function PrepublishButton( {
 	productId,
 	productType = 'product',
 }: PrepublishButtonProps ) {
-	const { openPrepublishSidebar } = useDispatch( productEditorUiStore );
+	const { openPrepublishPanel } = useDispatch( productEditorUiStore );
 	const { isValidating } = useValidations< Product >();
 	const { isSaving, isDirty } = useSelect(
 		( select ) => {
@@ -54,7 +54,7 @@ export function PrepublishButton( {
 		<Button
 			onClick={ () => {
 				recordEvent( 'product_prepublish', { source: TRACKS_SOURCE } );
-				openPrepublishSidebar();
+				openPrepublishPanel();
 			} }
 			isBusy={ isBusy }
 			aria-disabled={ isDisabled }

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

@@ -11,19 +11,19 @@ import { recordEvent } from '@woocommerce/tracks';
  * Internal dependencies
  */
 import { PublishButton } from '../header/publish-button';
-import { PrepublishSidebarProps } from './types';
+import { PrepublishPanelProps } from './types';
 import { store as productEditorUiStore } from '../../store/product-editor-ui';
 import { TRACKS_SOURCE } from '../../constants';
 
-export function PrepublishSidebar( {
+export function PrepublishPanel( {
 	productId,
 	productType = 'product',
 	title = __( 'Are you ready to add this product?', 'woocommerce' ),
 	description = __(
 		'Double-check your settings before sharing this product with customers.',
 		'woocommerce'
 	),
-}: PrepublishSidebarProps ) {
+}: PrepublishPanelProps ) {
 	const lastPersistedProduct = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( 'core' );
@@ -32,23 +32,23 @@ export function PrepublishSidebar( {
 		[ productType, productId ]
 	);
 
-	const { closePrepublishSidebar } = useDispatch( productEditorUiStore );
+	const { closePrepublishPanel } = useDispatch( productEditorUiStore );
 
 	return (
 		<div className="woocommerce-product-publish-panel">
 			<div className="woocommerce-product-publish-panel__actions">
 				<PublishButton
 					productType={ productType }
 					productStatus={ lastPersistedProduct?.status }
-					onSuccess={ closePrepublishSidebar }
+					onSuccess={ closePrepublishPanel }
 				/>
 				<Button
 					variant={ 'secondary' }
 					onClick={ () => {
 						recordEvent( 'product_prepublish_cancel', {
 							source: TRACKS_SOURCE,
 						} );
-						closePrepublishSidebar();
+						closePrepublishPanel();
 					} }
 				>
 					{ __( 'Cancel', 'woocommerce' ) }

packages/js/product-editor/src/components/prepublish-sidebar/types.ts → packages/js/product-editor/src/components/prepublish-panel/types.ts

@@ -1,4 +1,4 @@
-export type PrepublishSidebarProps = {
+export type PrepublishPanelProps = {
 	productId: number;
 	productType: string;
 	title?: string;

packages/js/product-editor/src/store/product-editor-ui/Readme.md

@@ -8,22 +8,22 @@ Defines action types for the UI state:
 
 -   `ACTION_MODAL_EDITOR_OPEN`
 -   `ACTION_MODAL_EDITOR_CLOSE`
--   `ACTION_PREPUBLISH_SIDEBAR_OPEN`
--   `ACTION_PREPUBLISH_SIDEBAR_CLOSE`
+-   `ACTION_PANEL_PREPUBLISH_OPEN`
+-   `ACTION_PANEL_PREPUBLISH_CLOSE`
 
 ### Actions
 
 -   `openModalEditor`
 -   `closeModalEditor`
--   `openPrepublishSidebar`
--   `closePrepublishSidebar`
+-   `openPrepublishPanel`
+-   `closePrepublishPanel`
 
 ### Selectors
 
 Selector function:
 
 -   `isModalEditorOpen`
--   `isPrepublishSidebarOpen`
+-   `isPrepublishPanelOpen`
 
 ### Store
 

packages/js/product-editor/src/store/product-editor-ui/actions.ts

@@ -11,8 +11,8 @@ import {
 	ACTION_MODAL_EDITOR_OPEN,
 	ACTION_MODAL_EDITOR_SET_BLOCKS,
 	ACTION_MODAL_EDITOR_CONTENT_HAS_CHANGED,
-	ACTION_SIDEBAR_PREPUBLISH_OPEN,
-	ACTION_SIDEBAR_PREPUBLISH_CLOSE,
+	ACTION_PANEL_PREPUBLISH_OPEN,
+	ACTION_PANEL_PREPUBLISH_CLOSE,
 } from './constants';
 
 const modalEditorActions = {
@@ -35,17 +35,17 @@ const modalEditorActions = {
 	} ),
 };
 
-const prepublishSidebarActions = {
-	openPrepublishSidebar: () => ( {
-		type: ACTION_SIDEBAR_PREPUBLISH_OPEN,
+const prepublishPanelActions = {
+	openPrepublishPanel: () => ( {
+		type: ACTION_PANEL_PREPUBLISH_OPEN,
 	} ),
 
-	closePrepublishSidebar: () => ( {
-		type: ACTION_SIDEBAR_PREPUBLISH_CLOSE,
+	closePrepublishPanel: () => ( {
+		type: ACTION_PANEL_PREPUBLISH_CLOSE,
 	} ),
 };
 
 export default {
 	...modalEditorActions,
-	...prepublishSidebarActions,
+	...prepublishPanelActions,
 };

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

@@ -6,5 +6,5 @@ export const ACTION_MODAL_EDITOR_CLOSE = 'MODAL_EDITOR_CLOSE';
 export const ACTION_MODAL_EDITOR_SET_BLOCKS = 'MODAL_EDITOR_SET_BLOCKS';
 export const ACTION_MODAL_EDITOR_CONTENT_HAS_CHANGED =
 	'MODAL_EDITOR_CONTENT_HAS_CHANGED';
-export const ACTION_SIDEBAR_PREPUBLISH_OPEN = 'SIDEBAR_PREPUBLISH_OPEN';
-export const ACTION_SIDEBAR_PREPUBLISH_CLOSE = 'SIDEBAR_PREPUBLISH_CLOSE';
+export const ACTION_PANEL_PREPUBLISH_OPEN = 'PANEL_PREPUBLISH_OPEN';
+export const ACTION_PANEL_PREPUBLISH_CLOSE = 'PANEL_PREPUBLISH_CLOSE';

packages/js/product-editor/src/store/product-editor-ui/reducer.ts

@@ -6,12 +6,12 @@ import {
 	ACTION_MODAL_EDITOR_CLOSE,
 	ACTION_MODAL_EDITOR_OPEN,
 	ACTION_MODAL_EDITOR_SET_BLOCKS,
-	ACTION_SIDEBAR_PREPUBLISH_CLOSE,
-	ACTION_SIDEBAR_PREPUBLISH_OPEN,
+	ACTION_PANEL_PREPUBLISH_CLOSE,
+	ACTION_PANEL_PREPUBLISH_OPEN,
 } from './constants';
 import type {
 	ProductEditorModalEditorAction,
-	ProductEditorPrepublishSidebarAction,
+	ProductEditorPrepublishPanelAction,
 	ProductEditorUIStateProps,
 } from './types';
 
@@ -24,16 +24,14 @@ const INITIAL_STATE: ProductEditorUIStateProps = {
 		blocks: [],
 		hasChanged: false,
 	},
-	prepublishSidebar: {
+	prepublishPanel: {
 		isOpen: false,
 	},
 };
 
 export default function reducer(
 	state = INITIAL_STATE,
-	action:
-		| ProductEditorModalEditorAction
-		| ProductEditorPrepublishSidebarAction
+	action: ProductEditorModalEditorAction | ProductEditorPrepublishPanelAction
 ) {
 	switch ( action.type ) {
 		case ACTION_MODAL_EDITOR_OPEN:
@@ -72,18 +70,18 @@ export default function reducer(
 				},
 			};
 
-		case ACTION_SIDEBAR_PREPUBLISH_OPEN:
+		case ACTION_PANEL_PREPUBLISH_OPEN:
 			return {
 				...state,
-				prepublishSidebar: {
+				prepublishPanel: {
 					isOpen: true,
 				},
 			};
 
-		case ACTION_SIDEBAR_PREPUBLISH_CLOSE:
+		case ACTION_PANEL_PREPUBLISH_CLOSE:
 			return {
 				...state,
-				prepublishSidebar: {
+				prepublishPanel: {
 					isOpen: false,
 				},
 			};

packages/js/product-editor/src/store/product-editor-ui/selectors.ts

@@ -26,9 +26,9 @@ export default {
 	): boolean {
 		return !! state.modalEditor?.hasChanged;
 	},
-	isPrepublishSidebarOpen: function isPrepublishSidebarOpen(
+	isPrepublishPanelOpen: function isPrepublishPanelOpen(
 		state: ProductEditorUIStateProps
 	) {
-		return state.prepublishSidebar?.isOpen;
+		return state.prepublishPanel?.isOpen;
 	},
 };

packages/js/product-editor/src/store/product-editor-ui/types.ts

@@ -11,8 +11,8 @@ import {
 	ACTION_MODAL_EDITOR_CLOSE,
 	ACTION_MODAL_EDITOR_OPEN,
 	ACTION_MODAL_EDITOR_SET_BLOCKS,
-	ACTION_SIDEBAR_PREPUBLISH_CLOSE,
-	ACTION_SIDEBAR_PREPUBLISH_OPEN,
+	ACTION_PANEL_PREPUBLISH_CLOSE,
+	ACTION_PANEL_PREPUBLISH_OPEN,
 } from './constants';
 
 export type ProductEditorUIStateProps = {
@@ -21,7 +21,7 @@ export type ProductEditorUIStateProps = {
 		blocks?: BlockInstance[];
 		hasChanged?: boolean;
 	};
-	prepublishSidebar?: {
+	prepublishPanel?: {
 		isOpen: boolean;
 	};
 };
@@ -38,8 +38,8 @@ export type ProductEditorModalEditorAction = {
 	hasChanged?: boolean;
 };
 
-export type ProductEditorPrepublishSidebarAction = {
+export type ProductEditorPrepublishPanelAction = {
 	type:
-		| typeof ACTION_SIDEBAR_PREPUBLISH_CLOSE
-		| typeof ACTION_SIDEBAR_PREPUBLISH_OPEN;
+		| typeof ACTION_PANEL_PREPUBLISH_CLOSE
+		| typeof ACTION_PANEL_PREPUBLISH_OPEN;
 };

packages/js/product-editor/src/style.scss

@@ -45,7 +45,7 @@
 @import "components/product-list/styles.scss";
 @import "components/product-select/styles.scss";
 @import "components/product-image/styles.scss";
-@import "components/prepublish-sidebar/style.scss";
+@import "components/prepublish-panel/style.scss";
 
 /* Field Blocks */