Update product editor packages (#36815)

* Add product section components back to Components package

* Fix imports

* Add a deprecated message

* Add changelog.

packages/js/components/changelog/update-product_editor_packages

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Add deprecated message to packages moved to product-editor package.

packages/js/components/src/index.ts

@@ -95,3 +95,9 @@ export {
 	SlotContextType,
 	SlotContextHelpersType,
 } from './slot-context';
+
+// Exports below can be removed once the @woocommerce/product-editor package is released.
+export {
+	ProductSectionLayout as __experimentalProductSectionLayout,
+	ProductFieldSection as __experimentalProductFieldSection,
+} from './product-section-layout';

packages/js/components/src/product-section-layout/index.ts

@@ -0,0 +1,2 @@
+export * from './product-section-layout';
+export * from './product-field-section';

packages/js/components/src/product-section-layout/product-field-section.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+import { Card, CardBody } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { ProductSectionLayout } from './product-section-layout';
+import { WooProductFieldItem } from '../woo-product-field-item';
+
+type ProductFieldSectionProps = {
+	id: string;
+	title: string;
+	description: string | JSX.Element;
+	className?: string;
+};
+
+export const ProductFieldSection: React.FC< ProductFieldSectionProps > = ( {
+	id,
+	title,
+	description,
+	className,
+	children,
+} ) => {
+	deprecated( `__experimentalProductFieldSection`, {
+		version: '13.0.0',
+		plugin: '@woocommerce/components',
+		hint: 'Moved to @woocommerce/product-editor package: import { __experimentalProductFieldSection } from @woocommerce/product-editor',
+	} );
+	return (
+		<ProductSectionLayout
+			title={ title }
+			description={ description }
+			className={ className }
+		>
+			<Card>
+				<CardBody>
+					{ children }
+					<WooProductFieldItem.Slot section={ id } />
+				</CardBody>
+			</Card>
+		</ProductSectionLayout>
+	);
+};

packages/js/components/src/product-section-layout/product-section-layout.tsx

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { Children, isValidElement, createElement } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+/**
+ * Internal dependencies
+ */
+import { FormSection } from '../form-section';
+
+type ProductSectionLayoutProps = {
+	title: string;
+	description: string | JSX.Element;
+	className?: string;
+};
+
+export const ProductSectionLayout: React.FC< ProductSectionLayoutProps > = ( {
+	title,
+	description,
+	className,
+	children,
+} ) => {
+	deprecated( `__experimentalProductSectionLayout`, {
+		version: '13.0.0',
+		plugin: '@woocommerce/components',
+		hint: 'Moved to @woocommerce/product-editor package: import { __experimentalProductSectionLayout } from @woocommerce/product-editor',
+	} );
+	return (
+		<FormSection
+			title={ title }
+			description={ description }
+			className={ className }
+		>
+			{ Children.map( children, ( child ) => {
+				if ( isValidElement( child ) && child.props.onChange ) {
+					return (
+						<div className="product-field-layout">{ child }</div>
+					);
+				}
+				return child;
+			} ) }
+		</FormSection>
+	);
+};

packages/js/components/src/product-section-layout/style.scss

@@ -0,0 +1,52 @@
+.woocommerce-form-section {
+	a {
+		text-decoration: none;
+	}
+
+	&__content {
+		.components-card {
+			border: 1px solid $gray-400;
+			border-radius: 2px;
+			box-shadow: none;
+			&__body {
+				padding: $gap-large;
+
+				.components-base-control,
+				.components-dropdown,
+				.woocommerce-rich-text-editor {
+					&:not(:first-child):not(.components-radio-control) {
+						margin-top: $gap-large - $gap-smaller;
+						margin-bottom: 0;
+					}
+				}
+			}
+		}
+
+		.woocommerce-product-form__field:not(:first-child) {
+			margin-top: $gap-large;
+
+			> .components-base-control {
+				margin-bottom: 0;
+			}
+		}
+
+		.components-radio-control .components-v-stack {
+			gap: $gap-small;
+		}
+
+		.woocommerce-collapsible-content {
+			margin-top: $gap-large;
+		}
+	}
+
+	&__header {
+		p > span {
+			display: block;
+			margin-bottom: $gap-smaller;
+		}
+	}
+
+	&:not(:first-child) {
+		margin-top: $gap-largest;
+	}
+}

packages/js/components/src/style.scss

@@ -56,3 +56,4 @@
 @import 'collapsible-content/style.scss';
 @import 'form/style.scss';
 @import 'experimental-tree-control/tree.scss';
+@import 'product-section-layout/style.scss';