Merge branch 'woocommerce:trunk' into trunk

.github/actions/tests/slack-summary-daily/scripts/create-blocks-plugin-tests.js

@@ -1,9 +1,8 @@
 module.exports = ( { core } ) => {
-	const { UPLOAD_RESULT, E2E_RESULT, PLUGIN_NAME, PLUGIN_SLUG } = process.env;
+	const { E2E_RESULT, PLUGIN_NAME, PLUGIN_SLUG } = process.env;
 	const { selectEmoji } = require( './utils' );
 	const fs = require( 'fs' );
 
-	const emoji_UPLOAD = selectEmoji( UPLOAD_RESULT );
 	const emoji_E2E = selectEmoji( E2E_RESULT );
 	const reportURL = `https://woocommerce.github.io/woocommerce-test-reports/daily/${ PLUGIN_SLUG }/e2e`;
 
@@ -12,18 +11,9 @@ module.exports = ( { core } ) => {
 			type: 'section',
 			text: {
 				type: 'mrkdwn',
-				text: `<${ reportURL }|*${ PLUGIN_NAME }*>`,
+				text: `<${ reportURL }|*${ PLUGIN_NAME }*>: E2E tests ${ emoji_E2E }`,
 			},
 		},
-		{
-			type: 'context',
-			elements: [
-				{
-					type: 'mrkdwn',
-					text: `"Upload plugin" test ${ emoji_UPLOAD }\tOther E2E tests ${ emoji_E2E }`,
-				},
-			],
-		},
 		{
 			type: 'divider',
 		},

packages/js/internal-style-build/abstracts/_variables.scss

@@ -9,8 +9,6 @@
 @import '@wordpress/base-styles/z-index.scss';
 @import '@wordpress/base-styles/default-custom-properties.scss';
 
-@include wordpress-admin-schemes;
-
 $fallback-gutter: 24px;
 $fallback-gutter-large: 40px;
 $gutter: var(--main-gap);

packages/js/internal-style-build/changelog/enhancement-46501

@@ -0,0 +1,4 @@
+Significance: minor
+Type: performance
+
+Remove duplicate css code from any woo scss file

packages/js/product-editor/changelog/update-product-editor-description-editor-skeleton

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added support for extension sidebars in modal block editor (description field).

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

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import {
+	store as interfaceStore,
+	// @ts-expect-error No types for this exist yet.
+} from '@wordpress/interface';
+
+export const RegisterStores = () => {
+	const registry = useRegistry();
+
+	useEffect( () => {
+		// @ts-expect-error No types for this exist yet.
+		registry.register( interfaceStore );
+	}, [ registry ] );
+
+	return null;
+};

packages/js/product-editor/src/components/iframe-editor/constants.ts

@@ -0,0 +1,2 @@
+export const SIDEBAR_COMPLEMENTARY_AREA_SCOPE =
+	'woocommerce/product-editor/modal-block-editor/sidebar';

packages/js/product-editor/src/components/iframe-editor/context.ts

@@ -8,11 +8,9 @@ type EditorContextType = {
 	hasUndo: boolean;
 	isDocumentOverviewOpened: boolean;
 	isInserterOpened: boolean;
-	isSidebarOpened: boolean;
 	redo: () => void;
 	setIsDocumentOverviewOpened: ( value: boolean ) => void;
 	setIsInserterOpened: ( value: boolean ) => void;
-	setIsSidebarOpened: ( value: boolean ) => void;
 	undo: () => void;
 };
 
@@ -21,10 +19,8 @@ export const EditorContext = createContext< EditorContextType >( {
 	hasUndo: false,
 	isDocumentOverviewOpened: false,
 	isInserterOpened: false,
-	isSidebarOpened: true,
 	redo: () => {},
 	setIsDocumentOverviewOpened: () => {},
 	setIsInserterOpened: () => {},
-	setIsSidebarOpened: () => {},
 	undo: () => {},
 } );

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

@@ -36,6 +36,10 @@ import {
 	ToolSelector,
 	BlockToolbar,
 } from '@wordpress/block-editor';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore No types for this exist yet.
+// eslint-disable-next-line @woocommerce/dependency-group
+import { PinnedItems } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -44,9 +48,9 @@ import { EditorContext } from '../context';
 import EditorHistoryRedo from './editor-history-redo';
 import EditorHistoryUndo from './editor-history-undo';
 import { DocumentOverview } from './document-overview';
-import { ShowBlockInspectorPanel } from './show-block-inspector-panel';
 import { MoreMenu } from './more-menu';
 import { getGutenbergVersion } from '../../../utils/get-gutenberg-version';
+import { SIDEBAR_COMPLEMENTARY_AREA_SCOPE } from '../constants';
 
 type HeaderToolbarProps = {
 	onSave?: () => void;
@@ -217,10 +221,7 @@ export function HeaderToolbar( {
 					onClick={ onSave }
 					text={ __( 'Done', 'woocommerce' ) }
 				/>
-				<ToolbarItem
-					as={ ShowBlockInspectorPanel }
-					className="woocommerce-show-block-inspector-panel"
-				/>
+				<PinnedItems.Slot scope={ SIDEBAR_COMPLEMENTARY_AREA_SCOPE } />
 				<ToolbarItem as={ MoreMenu } />
 			</div>
 		</NavigableToolbar>

packages/js/product-editor/src/components/iframe-editor/header-toolbar/more-menu/more-menu.tsx

@@ -1,28 +1,42 @@
 /**
  * External dependencies
  */
+import { MenuGroup } from '@wordpress/components';
 import { createElement, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { isWpVersion } from '@woocommerce/settings';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore No types for this exist yet.
 // eslint-disable-next-line @woocommerce/dependency-group
-import { MoreMenuDropdown } from '@wordpress/interface';
+import {
+	ActionItem,
+	MoreMenuDropdown,
+	// @ts-expect-error No types for this exist yet.
+} from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
 import { ToolsMenuGroup } from './tools-menu-group';
 import { WritingMenu } from '../writing-menu';
 import { getGutenbergVersion } from '../../../../utils/get-gutenberg-version';
+import { SIDEBAR_COMPLEMENTARY_AREA_SCOPE } from '../../constants';
 
 export const MoreMenu = () => {
 	const renderBlockToolbar =
 		isWpVersion( '6.5', '>=' ) || getGutenbergVersion() > 17.3;
+
 	return (
 		<MoreMenuDropdown>
-			{ () => (
+			{ ( { onClose }: { onClose: () => void } ) => (
 				<>
 					{ renderBlockToolbar && <WritingMenu /> }
+
+					<ActionItem.Slot
+						name={ `${ SIDEBAR_COMPLEMENTARY_AREA_SCOPE }/plugin-more-menu` }
+						label={ __( 'Plugins', 'woocommerce' ) }
+						as={ MenuGroup }
+						fillProps={ { onClick: onClose } }
+					/>
+
 					<ToolsMenuGroup />
 				</>
 			) }

packages/js/product-editor/src/components/iframe-editor/iframe-editor.scss

@@ -48,7 +48,6 @@
 	&__sidebar {
 		flex-shrink: 0;
 		height: 100%;
-		width: 280px;
 		overflow: scroll;
 	}
 

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

@@ -6,6 +6,7 @@ import { Popover } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createElement, useEffect, useState } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
+import { PluginArea } from '@wordpress/plugins';
 import classNames from 'classnames';
 import { isWpVersion } from '@woocommerce/settings';
 import {
@@ -15,7 +16,6 @@ import {
 // eslint-disable-next-line @woocommerce/dependency-group
 import {
 	BlockEditorProvider,
-	BlockInspector,
 	BlockList,
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore
@@ -27,6 +27,12 @@ import {
 	// @ts-ignore
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+// eslint-disable-next-line @woocommerce/dependency-group
+import {
+	ComplementaryArea,
+	store as interfaceStore,
+	// @ts-expect-error No types for this exist yet.
+} from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -35,11 +41,14 @@ import { BackButton } from './back-button';
 import { EditorCanvas } from './editor-canvas';
 import { EditorContext } from './context';
 import { HeaderToolbar } from './header-toolbar/header-toolbar';
+import { RegisterStores } from './RegisterStores';
 import { ResizableEditor } from './resizable-editor';
 import { SecondarySidebar } from './secondary-sidebar/secondary-sidebar';
+import { SettingsSidebar } from './sidebar/settings-sidebar';
 import { useEditorHistory } from './hooks/use-editor-history';
 import { store as productEditorUiStore } from '../../store/product-editor-ui';
 import { getGutenbergVersion } from '../../utils/get-gutenberg-version';
+import { SIDEBAR_COMPLEMENTARY_AREA_SCOPE } from './constants';
 
 type IframeEditorProps = {
 	initialBlocks?: BlockInstance[];
@@ -91,7 +100,6 @@ export function IframeEditor( {
 
 	const [ isInserterOpened, setIsInserterOpened ] = useState( false );
 	const [ isListViewOpened, setIsListViewOpened ] = useState( false );
-	const [ isSidebarOpened, setIsSidebarOpened ] = useState( true );
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore This action exists in the block editor store.
 	const { clearSelectedBlock, updateSettings } =
@@ -103,11 +111,18 @@ export function IframeEditor( {
 		return select( blockEditorStore ).getSettings();
 	}, [] );
 
-	const { hasFixedToolbar } = useSelect( ( select ) => {
+	const { hasFixedToolbar, isRightSidebarOpen } = useSelect( ( select ) => {
 		// @ts-expect-error These selectors are available in the block data store.
 		const { get: getPreference } = select( preferencesStore );
+
+		// @ts-expect-error These selectors are available in the interface data store.
+		const { getActiveComplementaryArea } = select( interfaceStore );
+
 		return {
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			isRightSidebarOpen: getActiveComplementaryArea(
+				SIDEBAR_COMPLEMENTARY_AREA_SCOPE
+			),
 		};
 	}, [] );
 
@@ -135,8 +150,6 @@ export function IframeEditor( {
 					setIsInserterOpened,
 					setIsDocumentOverviewOpened: setIsListViewOpened,
 					undo,
-					isSidebarOpened,
-					setIsSidebarOpened,
 				} }
 			>
 				<BlockEditorProvider
@@ -159,6 +172,7 @@ export function IframeEditor( {
 					} }
 					useSubRegistry={ true }
 				>
+					<RegisterStores />
 					<HeaderToolbar
 						onSave={ () => {
 							setBlocks( temporalBlocks );
@@ -227,12 +241,15 @@ export function IframeEditor( {
 								 bounds. */ }
 							<div className="woocommerce-iframe-editor__content-inserter-clipper" />
 						</BlockTools>
-						{ isSidebarOpened && (
-							<div className="woocommerce-iframe-editor__sidebar">
-								<BlockInspector />
-							</div>
+						{ isRightSidebarOpen && (
+							<ComplementaryArea.Slot
+								scope={ SIDEBAR_COMPLEMENTARY_AREA_SCOPE }
+							/>
 						) }
 					</div>
+					{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
+					<PluginArea scope="woocommerce-product-editor-modal-block-editor" />
+					<SettingsSidebar />
 				</BlockEditorProvider>
 			</EditorContext.Provider>
 		</div>

packages/js/product-editor/src/components/iframe-editor/index.ts

@@ -1 +1,2 @@
 export * from './iframe-editor';
+export * from './sidebar/plugin-sidebar';

packages/js/product-editor/src/components/iframe-editor/sidebar/plugin-sidebar/index.js

@@ -0,0 +1 @@
+export * from './plugin-sidebar';

packages/js/product-editor/src/components/iframe-editor/sidebar/plugin-sidebar/plugin-sidebar.tsx

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore No types for this exist yet.
+// eslint-disable-next-line @woocommerce/dependency-group
+import { ComplementaryArea } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import { SIDEBAR_COMPLEMENTARY_AREA_SCOPE } from '../../constants';
+
+type PluginSidebarProps = {
+	children: React.ReactNode;
+	className?: string;
+	closeLabel?: string;
+	header?: React.ReactNode;
+	icon?: string | React.ReactNode;
+	identifier?: string;
+	isActiveByDefault?: boolean;
+	name?: string;
+	title?: string;
+};
+
+export function PluginSidebar( { className, ...props }: PluginSidebarProps ) {
+	return (
+		<ComplementaryArea
+			panelClassName={ className }
+			className="woocommerce-iframe-editor__sidebar"
+			scope={ SIDEBAR_COMPLEMENTARY_AREA_SCOPE }
+			{ ...props }
+		/>
+	);
+}