diff --git a/packages/js/product-editor/changelog/add-41586-section-description b/packages/js/product-editor/changelog/add-41586-section-description new file mode 100644 index 00000000000..ab2ec087ef8 --- /dev/null +++ b/packages/js/product-editor/changelog/add-41586-section-description @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Create section description block diff --git a/packages/js/product-editor/src/blocks/generic/section-description/block.json b/packages/js/product-editor/src/blocks/generic/section-description/block.json new file mode 100644 index 00000000000..a31b7a0e3e6 --- /dev/null +++ b/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 + } +} diff --git a/packages/js/product-editor/src/blocks/generic/section-description/edit.tsx b/packages/js/product-editor/src/blocks/generic/section-description/edit.tsx new file mode 100644 index 00000000000..e5093db5344 --- /dev/null +++ b/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 ( + +
{ content }
+
+ ); +} diff --git a/packages/js/product-editor/src/blocks/generic/section-description/index.ts b/packages/js/product-editor/src/blocks/generic/section-description/index.ts new file mode 100644 index 00000000000..257a737a345 --- /dev/null +++ b/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, + } ); +} diff --git a/packages/js/product-editor/src/blocks/generic/section-description/types.ts b/packages/js/product-editor/src/blocks/generic/section-description/types.ts new file mode 100644 index 00000000000..fb5216c8b55 --- /dev/null +++ b/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; +} diff --git a/packages/js/product-editor/src/blocks/generic/section/edit.tsx b/packages/js/product-editor/src/blocks/generic/section/edit.tsx index a660d684757..e7809251660 100644 --- a/packages/js/product-editor/src/blocks/generic/section/edit.tsx +++ b/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( { /> ) } + + ) } diff --git a/packages/js/product-editor/src/blocks/index.ts b/packages/js/product-editor/src/blocks/index.ts index ff0fe402abf..fc2dbbf9375 100644 --- a/packages/js/product-editor/src/blocks/index.ts +++ b/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'; diff --git a/plugins/woocommerce/changelog/add-41586-section-description b/plugins/woocommerce/changelog/add-41586-section-description new file mode 100644 index 00000000000..ab2ec087ef8 --- /dev/null +++ b/plugins/woocommerce/changelog/add-41586-section-description @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Create section description block diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php index 1ed7290a4ea..5a436086d71 100644 --- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php +++ b/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',