Add category field block (#37295)

* Add initial category block

* Add changelogs

* Add label to font family for block editor and fix template

* Fix rebase conflict and add content role

* Some styling changes for the category field

* Move category block to blocks folder and fix merge conflict.

* Address some styling issues, and update keywords

* Fix css lint error

packages/js/components/changelog/add-37263_category_field_block

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix issue where width of select control dropdown was not correctly calculated when rendering was delayed.

packages/js/components/src/experimental-select-tree-control/select-tree.scss

@@ -13,3 +13,7 @@
 .woocommerce-experimental-select-tree-control__dropdown-content .components-popover__content {
 	padding: 0;
 }
+
+.woocommerce-experimental-select-tree-control__popover-menu {
+	min-height: 100px;
+}

packages/js/product-editor/changelog/add-37263_category_field_block

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add product category block.

packages/js/product-editor/src/blocks/category/block.json

@@ -0,0 +1,32 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "woocommerce/product-category",
+	"title": "Product Category",
+	"category": "widgets",
+	"description": "A field to select product categories.",
+	"keywords": [ "products", "category" ],
+	"textdomain": "default",
+	"attributes": {
+		"name": {
+			"type": "string",
+			"__experimentalRole": "content"
+		},
+		"label": {
+			"type": "string"
+		},
+		"placeholder": {
+			"type": "string"
+		}
+	},
+	"usesContext": [ "postType" ],
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false,
+		"lock": false
+	},
+	"editorStyle": "file:./editor.css"
+}

packages/js/product-editor/src/blocks/category/edit.tsx

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createElement } from '@wordpress/element';
+import { BlockAttributes } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+import { ProductCategory } from '@woocommerce/data';
+// 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 { useEntityProp } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { CategoryField } from '../../components/details-categories-field';
+
+export function Edit( {
+	attributes,
+	context,
+}: {
+	attributes: BlockAttributes;
+	context?: { postType?: string };
+} ) {
+	const blockProps = useBlockProps();
+	const { name, label, placeholder } = attributes;
+	const [ categories, setCategories ] = useEntityProp<
+		Pick< ProductCategory, 'name' | 'id' | 'parent' >[]
+	>( 'postType', context?.postType || 'product', name || 'categories' );
+
+	return (
+		<div { ...blockProps }>
+			<CategoryField
+				label={ label || __( 'Categories', 'woocommerce' ) }
+				placeholder={
+					placeholder ||
+					__( 'Search or create category…', 'woocommerce' )
+				}
+				onChange={ setCategories }
+				value={ categories || [] }
+			/>
+		</div>
+	);
+}

packages/js/product-editor/src/blocks/category/editor.scss

@@ -0,0 +1,11 @@
+.wp-block-woocommerce-product-category {
+	.woocommerce-experimental-select-tree-control__menu {
+		.experimental-woocommerce-tree-item {
+			font-size: 13px;
+			.components-checkbox-control__input-container, input[type='checkbox'], .components-checkbox-control__checked {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { initBlock } from '../../utils';
+import metadata from './block.json';
+import { Edit } from './edit';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	example: {},
+	edit: Edit,
+};
+
+export const init = () =>
+	initBlock( { name, metadata: metadata as never, settings } );

packages/js/product-editor/src/components/block-editor/style.scss

@@ -8,8 +8,9 @@
 	p,
 	button,
 	span,
+	label,
 	input {
-		font-family: var(--wp--preset--font-family--system-font);
+		font-family: var( --wp--preset--font-family--system-font );
 	}
 
 	label {
@@ -38,6 +39,7 @@
 		max-width: 650px;
 		margin-left: auto;
 		margin-right: auto;
+		padding-bottom: 128px;
 	}
 
 	.components-input-control {
@@ -80,14 +82,21 @@
 				margin-top: 32px;
 			}
 
-			> .wp-block:not(:first-child) {
+			> .wp-block:not( :first-child ) {
 				margin-top: $gap-large;
 			}
 		}
 	}
+
+	.woocommerce-experimental-select-control__label {
+		text-transform: uppercase;
+		font-size: 11px;
+		color: $gray-900;
+		font-weight: 500;
+	}
 }
 
-.woocommerce-layout:has(.woocommerce-product-block-editor) {
+.woocommerce-layout:has( .woocommerce-product-block-editor ) {
 	.woocommerce-layout__header {
 		display: none;
 	}

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

@@ -66,7 +66,11 @@ export function Editor( { product, settings }: EditorProps ) {
 									<BlockEditor
 										settings={ settings }
 										product={ product }
-										context={ { selectedTab } }
+										context={ {
+											selectedTab,
+											postType: 'product',
+											postId: product.id,
+										} }
 									/>
 									{ /* @ts-expect-error 'scope' does exist. @types/wordpress__plugins is outdated. */ }
 									<PluginArea scope="woocommerce-product-block-editor" />

packages/js/product-editor/src/components/editor/init-blocks.ts

@@ -16,6 +16,7 @@ import { init as initImages } from '../images';
 import { init as initName } from '../details-name-block';
 import { init as initRadio } from '../../blocks/radio';
 import { init as initSummary } from '../details-summary-block';
+import { init as initCategory } from '../../blocks/category';
 import { init as initSection } from '../section';
 import { init as initTab } from '../tab';
 import { init as initPricing } from '../pricing-block';
@@ -39,6 +40,7 @@ export const initBlocks = () => {
 	registerCoreBlocks( blocks );
 
 	initImages();
+	initCategory();
 	initName();
 	initRadio();
 	initSummary();

packages/js/product-editor/src/style.scss

@@ -22,6 +22,7 @@
 @import 'blocks/schedule-sale/editor.scss';
 @import 'blocks/track-inventory/editor.scss';
 @import 'blocks/shipping-dimensions/editor.scss';
+@import 'blocks/category/editor.scss';
 @import 'components/images/editor.scss';
 @import 'components/details-summary-block/style.scss';
 @import 'components/details-name-block/style.scss';

plugins/woocommerce/changelog/add-37263_category_field_block

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update product template to include category section and block.

plugins/woocommerce/includes/class-wc-post-types.php

@@ -451,6 +451,21 @@ class WC_Post_Types {
 										),
 									),
 								),
+								array(
+									'woocommerce/product-section',
+									array(
+										'title'       => __( 'Organization & visibility', 'woocommerce' ),
+										'description' => __( 'Help customers find this product by assigning it to categories or featuring it across your sales channels.', 'woocommerce' ),
+									),
+									array(
+										array(
+											'woocommerce/product-category',
+											array(
+												'name' => 'categories',
+											),
+										),
+									),
+								),
 							),
 						),
 						array(