Create section description block (#41929)

* Create section description block

* Add changelog files

* Change section description block to receive its content from the attributes instead of innerBlocks

packages/js/product-editor/changelog/add-41586-section-description

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Create section description block

packages/js/product-editor/src/blocks/generic/section-description/block.json

@@ -0,0 +1,25 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "woocommerce/product-section-description",
+	"title": "Product section description",
+	"category": "woocommerce",
+	"description": "The product section description.",
+	"keywords": [ "products", "section", "description" ],
+	"textdomain": "default",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"__experimentalRole": "content"
+		}
+	},
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": true,
+		"reusable": false,
+		"inserter": false,
+		"lock": false,
+		"__experimentalToolbar": false
+	}
+}

packages/js/product-editor/src/blocks/generic/section-description/edit.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import { Fill } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { createElement } from '@wordpress/element';
+import { useWooBlockProps } from '@woocommerce/block-templates';
+
+/**
+ * Internal dependencies
+ */
+import { ProductEditorBlockEditProps } from '../../../types';
+import { SectionDescriptionBlockAttributes } from './types';
+
+export function SectionDescriptionBlockEdit( {
+	attributes,
+	clientId,
+}: ProductEditorBlockEditProps< SectionDescriptionBlockAttributes > ) {
+	const { content } = attributes;
+	const blockProps = useWooBlockProps( attributes );
+
+	const rootClientId = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( 'core/block-editor' );
+			return getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+
+	if ( ! rootClientId ) return;
+
+	return (
+		<Fill { ...blockProps } name={ rootClientId }>
+			<div>{ content }</div>
+		</Fill>
+	);
+}

packages/js/product-editor/src/blocks/generic/section-description/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Internal dependencies
+ */
+import { registerProductEditorBlockType } from '../../../utils';
+
+/**
+ * Internal dependencies
+ */
+import blockConfiguration from './block.json';
+import { SectionDescriptionBlockEdit } from './edit';
+
+const { name, ...metadata } = blockConfiguration;
+
+export { metadata, name };
+
+export const settings = {
+	example: {},
+	edit: SectionDescriptionBlockEdit,
+};
+
+export function init() {
+	return registerProductEditorBlockType( {
+		name,
+		metadata: metadata as never,
+		settings: settings as never,
+	} );
+}

packages/js/product-editor/src/blocks/generic/section-description/types.ts

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import { BlockAttributes } from '@wordpress/blocks';
+
+export interface SectionDescriptionBlockAttributes extends BlockAttributes {
+	content: string;
+}

packages/js/product-editor/src/blocks/generic/section/edit.tsx

@@ -1,9 +1,10 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
+import { Slot } from '@wordpress/components';
 import { createElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import { __experimentalTooltip as Tooltip } from '@woocommerce/components';
 import {
@@ -63,6 +64,8 @@ export function SectionBlockEdit( {
 							/>
 						) }
 					</h2>
+
+					<Slot name={ clientId } />
 				</HeadingTagName>
 			) }
 

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

@@ -14,6 +14,7 @@ export { init as initRegularPrice } from './product-fields/regular-price';
 export { init as initSalePrice } from './product-fields/sale-price';
 export { init as initScheduleSale } from './product-fields/schedule-sale';
 export { init as initSection } from './generic/section';
+export { init as initSectionDescription } from './generic/section-description';
 export { init as initShippingClass } from './product-fields/shipping-class';
 export { init as initShippingDimensions } from './product-fields/shipping-dimensions';
 export { init as initSummary } from './product-fields/summary';

plugins/woocommerce/changelog/add-41586-section-description

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Create section description block

plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php

@@ -30,6 +30,7 @@ class BlockRegistry {
 		'woocommerce/product-radio-field',
 		'woocommerce/product-pricing-field',
 		'woocommerce/product-section',
+		'woocommerce/product-section-description',
 		'woocommerce/product-tab',
 		'woocommerce/product-toggle-field',
 		'woocommerce/product-taxonomy-field',