diff --git a/packages/js/product-editor/changelog/add-37264 b/packages/js/product-editor/changelog/add-37264 new file mode 100644 index 00000000000..cd3fe0ca148 --- /dev/null +++ b/packages/js/product-editor/changelog/add-37264 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +The BlockIcon component diff --git a/packages/js/product-editor/src/components/block-icon/README.md b/packages/js/product-editor/src/components/block-icon/README.md new file mode 100644 index 00000000000..c224a38b0ba --- /dev/null +++ b/packages/js/product-editor/src/components/block-icon/README.md @@ -0,0 +1,72 @@ +# BlockIcon + +This component uses the icon defined as a block attribute or metadata and renders it. + +It looks first within the block's `attributes` and if there is no icon defined there, then looks at the block's `metadata`. + +## Usage + +### Icon configuration + +1. As a block attribute + + In the block configuration file `./block.json` + + ```json + "attributes": { + "icon": { + "type": "object" + } + } + ``` + + In the server during the template configuration + + ```php + array( + 'woocommerce/product-section', // Block name + array( + // Block attributes + 'icon' => array( + // It's possible to pass a valid html string + 'src' => '', + + // Or an absolute url + 'src' => 'https://...', + 'alt' => 'The alt name for the icon', + + // Or a Dashicon icon-key + 'src' => 'default-block', + ), + ), + array( + // Inner blocks + ), + ), + ``` + +2. As part of the block's metadata + + See [the official blocks icon documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#icon). + +### Rendering the Icon + +```javascript +import { __experimentalBlockIcon as BlockIcon } from '@woocommerce/product-editor'; + +export function BlockEdit( { clientId } ) { + const blockProps = useBlockProps(); + + return ( +
{ description } diff --git a/packages/js/product-editor/src/components/section/index.ts b/packages/js/product-editor/src/components/section/index.ts index 15144b2b28d..70224538e05 100644 --- a/packages/js/product-editor/src/components/section/index.ts +++ b/packages/js/product-editor/src/components/section/index.ts @@ -1,17 +1,28 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; +import { BlockConfiguration } from '@wordpress/blocks'; + /** * Internal dependencies */ -import initBlock from '../../utils/init-block'; -import metadata from './block.json'; +import { initBlock } from '../../utils/init-blocks'; +import blockConfiguration from './block.json'; import { Edit } from './edit'; +import { SectionBlockAttributes } from './types'; -const { name } = metadata; +const { name, ...metadata } = + blockConfiguration as BlockConfiguration< SectionBlockAttributes >; export { metadata, name }; -export const settings = { - example: {}, - edit: Edit, -}; +export const settings: Partial< BlockConfiguration< SectionBlockAttributes > > = + { + example: {}, + edit: Edit, + }; -export const init = () => initBlock( { name, metadata, settings } ); +export function init() { + return initBlock( { name, metadata, settings } ); +} diff --git a/packages/js/product-editor/src/components/section/style.scss b/packages/js/product-editor/src/components/section/style.scss index d3341c04f49..137bead30c2 100644 --- a/packages/js/product-editor/src/components/section/style.scss +++ b/packages/js/product-editor/src/components/section/style.scss @@ -7,6 +7,18 @@ font-size: 24px; font-weight: 500; color: $gray-900; + display: inline-flex; + align-items: center; + + .block-editor-block-icon { + margin-right: 14px; + + > div { + display: flex; + align-items: center; + justify-content: center; + } + } } &__description { diff --git a/packages/js/product-editor/src/components/section/types.ts b/packages/js/product-editor/src/components/section/types.ts new file mode 100644 index 00000000000..017ae754a7d --- /dev/null +++ b/packages/js/product-editor/src/components/section/types.ts @@ -0,0 +1,9 @@ +/** + * External dependencies + */ +import { BlockAttributes } from '@wordpress/blocks'; + +export interface SectionBlockAttributes extends BlockAttributes { + title: string; + description: string; +} diff --git a/plugins/woocommerce/changelog/add-37264 b/plugins/woocommerce/changelog/add-37264 new file mode 100644 index 00000000000..e340926e2e7 --- /dev/null +++ b/plugins/woocommerce/changelog/add-37264 @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add image configuration to the product block template diff --git a/plugins/woocommerce/includes/class-wc-post-types.php b/plugins/woocommerce/includes/class-wc-post-types.php index 5fcb68552a5..3d630729817 100644 --- a/plugins/woocommerce/includes/class-wc-post-types.php +++ b/plugins/woocommerce/includes/class-wc-post-types.php @@ -379,6 +379,9 @@ class WC_Post_Types { array( 'title' => __( 'Basic details', 'woocommerce' ), 'description' => __( 'This info will be displayed on the product page, category pages, social media, and search results.', 'woocommerce' ), + 'icon' => array( + 'src' => '', + ), ), array( array( @@ -456,6 +459,9 @@ class WC_Post_Types { 'woocommerce/product-section', array( 'title' => __( 'Shipping section', 'woocommerce' ), + 'icon' => array( + 'src' => '', + ), ), array( array(