[Product Block Editor] Add require password block field (#39464)

* Add post password to API

* Add changelog

* Fix phpcs issue

* Remove post_password from tests

* Add additional property to test

* Increment number of properties in product schema

* Update the post when post_password changes

* Start adding password block

* Add css and import it

* Refactor attributes and erase password when checkbox is unchecked

* Add changelogs

* Remove unused imports

* Rename 'fields' to 'field'

* Refactor CSS

* Remove example object

packages/js/product-editor/changelog/add-post_password_block2

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Create 'woocommerce/product-password-field' block

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

@@ -21,3 +21,4 @@ export { init as initInventoryQuantity } from './inventory-quantity';
 export { init as initToggle } from './toggle';
 export { init as attributesInit } from './attributes';
 export { init as initVariations } from './variations';
+export { init as initRequirePassword } from './password';

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

@@ -0,0 +1,26 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "woocommerce/product-password-field",
+	"description": "A checkbox and an input to type a password to view a product.",
+	"title": "Product password",
+	"category": "widgets",
+	"keywords": [ "products", "password" ],
+	"textdomain": "default",
+	"attributes": {
+		"label": {
+			"type": "string",
+			"__experimentalRole": "content"
+		}
+	},
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false,
+		"lock": false,
+		"__experimentalToolbar": false
+	},
+	"editorStyle": "file:./editor.css"
+}

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

@@ -0,0 +1,68 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { BlockEditProps } from '@wordpress/blocks';
+import { useInstanceId } from '@wordpress/compose';
+import { useEntityProp } from '@wordpress/core-data';
+import { createElement, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	BaseControl,
+	CheckboxControl,
+	// @ts-expect-error `__experimentalInputControl` does exist.
+	__experimentalInputControl as InputControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+import { RequirePasswordBlockAttributes } from './types';
+
+export function Edit( {
+	attributes,
+}: BlockEditProps< RequirePasswordBlockAttributes > ) {
+	const blockProps = useBlockProps();
+	const { label } = attributes;
+
+	const [ postPassword, setPostPassword ] = useEntityProp< string >(
+		'postType',
+		'product',
+		'post_password'
+	);
+
+	const [ checked, setChecked ] = useState( Boolean( postPassword ) );
+	const postPasswordId = useInstanceId(
+		BaseControl,
+		'post_password'
+	) as string;
+
+	return (
+		<div { ...blockProps }>
+			<CheckboxControl
+				label={ label }
+				checked={ checked }
+				className="wp-block-woocommerce-product-password-fields__field"
+				onChange={ ( selected ) => {
+					setChecked( selected );
+					if ( ! selected ) {
+						setPostPassword( '' );
+					}
+				} }
+			/>
+			{ checked && (
+				<BaseControl
+					id={ postPasswordId }
+					label={ __( 'Password', 'woocommerce' ) }
+				>
+					<InputControl
+						id={ postPasswordId }
+						value={ postPassword }
+						onChange={ setPostPassword }
+					/>
+				</BaseControl>
+			) }
+		</div>
+	);
+}

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

@@ -0,0 +1,5 @@
+.wp-block-woocommerce-product-password-fields {
+	&__field {
+		margin-bottom: $gap;
+	}
+}

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

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { BlockConfiguration } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { initBlock } from '../../utils/init-blocks';
+import blockConfiguration from './block.json';
+import { Edit } from './edit';
+import { RequirePasswordBlockAttributes } from './types';
+
+const { name, ...metadata } =
+	blockConfiguration as BlockConfiguration< RequirePasswordBlockAttributes >;
+
+export { metadata, name };
+
+export const settings: Partial<
+	BlockConfiguration< RequirePasswordBlockAttributes >
+> = {
+	edit: Edit,
+};
+
+export function init() {
+	return initBlock( { name, metadata, settings } );
+}

packages/js/product-editor/src/blocks/password/types.ts

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

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

@@ -14,3 +14,4 @@
 @import 'summary/editor.scss';
 @import 'tab/editor.scss';
 @import 'variations/editor.scss';
+@import 'password/editor.scss';

plugins/woocommerce/changelog/add-post_password_block2

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add woocommerce/product-password-field block to new product editor

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

@@ -42,6 +42,7 @@ class BlockRegistry {
 		'woocommerce/product-inventory-quantity-field',
 		'woocommerce/product-toggle-field',
 		'woocommerce/product-variations-fields',
+		'woocommerce/product-password-field',
 	];
 
 	/**

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

@@ -365,6 +365,12 @@ class Init {
 										'property' => 'reviews_allowed',
 									),
 								),
+								array(
+									'woocommerce/product-password-field',
+									array(
+										'label' => __( 'Require a password', 'woocommerce' ),
+									),
+								),
 							),
 						),
 						array(