From 16a6280258398b3957c2e48062b8cb03d1cdc17f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Tue, 5 Mar 2024 13:09:58 -0300 Subject: [PATCH 01/16] Create woocommerce/product-custom-fields block --- .../js/product-editor/src/blocks/index.ts | 1 + .../product-fields/custom-fields/block.json | 27 +++++++++++++++++++ .../product-fields/custom-fields/edit.tsx | 19 +++++++++++++ .../product-fields/custom-fields/editor.scss | 2 ++ .../product-fields/custom-fields/index.ts | 23 ++++++++++++++++ .../product-fields/custom-fields/types.ts | 8 ++++++ .../js/product-editor/src/blocks/style.scss | 1 + 7 files changed, 81 insertions(+) create mode 100644 packages/js/product-editor/src/blocks/product-fields/custom-fields/block.json create mode 100644 packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx create mode 100644 packages/js/product-editor/src/blocks/product-fields/custom-fields/editor.scss create mode 100644 packages/js/product-editor/src/blocks/product-fields/custom-fields/index.ts create mode 100644 packages/js/product-editor/src/blocks/product-fields/custom-fields/types.ts diff --git a/packages/js/product-editor/src/blocks/index.ts b/packages/js/product-editor/src/blocks/index.ts index cdc0ce2a4115..db9f37cc0917 100644 --- a/packages/js/product-editor/src/blocks/index.ts +++ b/packages/js/product-editor/src/blocks/index.ts @@ -1,4 +1,5 @@ export { init as initCatalogVisibility } from './product-fields/catalog-visibility'; +export { init as initCustomFields } from './product-fields/custom-fields'; export { init as initCustomFieldsToogle } from './product-fields/custom-fields-toggle'; export { init as initCheckbox } from './generic/checkbox'; export { init as initCollapsible } from './generic/collapsible'; diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields/block.json b/packages/js/product-editor/src/blocks/product-fields/custom-fields/block.json new file mode 100644 index 000000000000..d5932e0004b1 --- /dev/null +++ b/packages/js/product-editor/src/blocks/product-fields/custom-fields/block.json @@ -0,0 +1,27 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "woocommerce/product-custom-fields", + "title": "Product custom fields control", + "category": "woocommerce", + "description": "The product custom fields.", + "keywords": [ "products", "custom", "fields" ], + "textdomain": "default", + "attributes": { + "name": { + "type": "string", + "__experimentalRole": "content" + } + }, + "supports": { + "align": false, + "html": false, + "multiple": true, + "reusable": true, + "inserter": false, + "lock": false, + "__experimentalToolbar": false + }, + "usesContext": [ "postType" ], + "editorStyle": "file:./editor.css" +} diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx new file mode 100644 index 000000000000..5a5d37032f65 --- /dev/null +++ b/packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; +import { useWooBlockProps } from '@woocommerce/block-templates'; + +/** + * Internal dependencies + */ +import { ProductEditorBlockEditProps } from '../../../types'; +import { CustomFieldsBlockAttributes } from './types'; + +export function Edit( { + attributes, +}: ProductEditorBlockEditProps< CustomFieldsBlockAttributes > ) { + const blockProps = useWooBlockProps( attributes ); + + return
; +} diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields/editor.scss b/packages/js/product-editor/src/blocks/product-fields/custom-fields/editor.scss new file mode 100644 index 000000000000..2ff3974413d5 --- /dev/null +++ b/packages/js/product-editor/src/blocks/product-fields/custom-fields/editor.scss @@ -0,0 +1,2 @@ +.wp-block-woocommerce-product-custom-fields-field { +} diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields/index.ts b/packages/js/product-editor/src/blocks/product-fields/custom-fields/index.ts new file mode 100644 index 000000000000..f5e901e82885 --- /dev/null +++ b/packages/js/product-editor/src/blocks/product-fields/custom-fields/index.ts @@ -0,0 +1,23 @@ +/** + * Internal dependencies + */ +import blockConfiguration from './block.json'; +import { Edit } from './edit'; +import { registerProductEditorBlockType } from '../../../utils'; + +const { name, ...metadata } = blockConfiguration; + +export { metadata, name }; + +export const settings = { + example: {}, + edit: Edit, +}; + +export function init() { + return registerProductEditorBlockType( { + name, + metadata: metadata as never, + settings: settings as never, + } ); +} diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields/types.ts b/packages/js/product-editor/src/blocks/product-fields/custom-fields/types.ts new file mode 100644 index 000000000000..c0c79b28a497 --- /dev/null +++ b/packages/js/product-editor/src/blocks/product-fields/custom-fields/types.ts @@ -0,0 +1,8 @@ +/** + * External dependencies + */ +import { BlockAttributes } from '@wordpress/blocks'; + +export interface CustomFieldsBlockAttributes extends BlockAttributes { + label: string; +} diff --git a/packages/js/product-editor/src/blocks/style.scss b/packages/js/product-editor/src/blocks/style.scss index 29502c134b0c..7099f75bd100 100644 --- a/packages/js/product-editor/src/blocks/style.scss +++ b/packages/js/product-editor/src/blocks/style.scss @@ -1,6 +1,7 @@ @import "product-fields/attributes/editor.scss"; @import "product-fields/description/editor.scss"; @import "product-fields/catalog-visibility/editor.scss"; +@import "product-fields/custom-fields/editor.scss"; @import "product-fields/custom-fields-toggle/editor.scss"; @import "product-fields/downloads/editor.scss"; @import "product-fields/images/editor.scss"; From b652a1c82396c500bd2323be9aa7c3e6ec0652ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Tue, 5 Mar 2024 13:14:28 -0300 Subject: [PATCH 02/16] Register woocommerce/product-custom-fields block --- .../src/Admin/Features/ProductBlockEditor/BlockRegistry.php | 1 + .../tests/php/src/Admin/ProductBlockEditor/BlockRegistryTest.php | 1 + 2 files changed, 2 insertions(+) diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php index 6683ac29a95a..6379a664e957 100644 --- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php +++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/BlockRegistry.php @@ -48,6 +48,7 @@ class BlockRegistry { */ const PRODUCT_FIELDS_BLOCKS = array( 'woocommerce/product-catalog-visibility-field', + 'woocommerce/product-custom-fields', 'woocommerce/product-custom-fields-toggle-field', 'woocommerce/product-description-field', 'woocommerce/product-downloads-field', diff --git a/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/BlockRegistryTest.php b/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/BlockRegistryTest.php index 88768f4d975a..f4a83d64ce78 100644 --- a/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/BlockRegistryTest.php +++ b/plugins/woocommerce/tests/php/src/Admin/ProductBlockEditor/BlockRegistryTest.php @@ -43,6 +43,7 @@ public function test_product_fields_blocks_registered() { $block_registry = BlockRegistry::get_instance(); $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-catalog-visibility-field' ), 'Catalog visibility field not registered.' ); + $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-custom-fields' ), 'Custom fields not registered.' ); $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-custom-fields-toggle-field' ), 'Custom fields toggle field not registered.' ); $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-description-field' ), 'Description field not registered.' ); $this->assertTrue( $block_registry->is_registered( 'woocommerce/product-downloads-field' ), 'Downloads field not registered.' ); From 41f6e2904f7a5d29102cdaecb1624aa8277211cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Tue, 5 Mar 2024 14:10:28 -0300 Subject: [PATCH 03/16] Add product-custom-fields block to the simple product template --- .../SimpleProductTemplate.php | 30 +++++++++++++++++-- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php index 77494430aba0..e1c8b6958dad 100644 --- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php +++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php @@ -551,17 +551,18 @@ private function add_organization_group_blocks() { ) ); // Attributes section. - $product_catalog_section = $organization_group->add_section( + $product_attributes_section = $organization_group->add_section( array( 'id' => 'product-attributes-section', 'order' => 20, 'attributes' => array( 'title' => __( 'Attributes', 'woocommerce' ), 'description' => __( 'Add descriptive pieces of information that customers can use to filter and search for this product. Learn more.', 'woocommerce' ), + 'blockGap' => 'unit-40', ), ) ); - $product_catalog_section->add_block( + $product_attributes_section->add_block( array( 'id' => 'product-attributes', 'blockName' => 'woocommerce/product-attributes-field', @@ -570,7 +571,7 @@ private function add_organization_group_blocks() { ); if ( Features::is_enabled( 'product-custom-fields' ) ) { - $product_catalog_section->add_block( + $product_attributes_section->add_block( array( 'id' => 'product-custom-fields-toggle', 'blockName' => 'woocommerce/product-custom-fields-toggle-field', @@ -580,6 +581,29 @@ private function add_organization_group_blocks() { ), ) ); + + $product_attributes_section->add_block( + array( + 'id' => 'product-custom-fields-section', + 'blockName' => 'woocommerce/product-section', + 'order' => 30, + 'attributes' => array( + 'title' => __( 'Custom fields', 'woocommerce' ), + 'description' => sprintf( + /* translators: %1$s: Custom fields guide link opening tag. %2$s: Custom fields guide link closing tag. */ + __( 'Custom fields can be used in a variety of ways, such as sharing more detailed product information, showing more input fields, or internal inventory organization. %1$sRead more about custom fields?%2$s', 'woocommerce' ), + '', + '' + ), + ), + ) + )->add_block( + array( + 'id' => 'product-custom-fields', + 'blockName' => 'woocommerce/product-custom-fields', + 'order' => 10, + ) + ); } } From f93be6677a031728d5c786f01049f25880a3cb62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Tue, 5 Mar 2024 15:02:22 -0300 Subject: [PATCH 04/16] Create useCustomFields hook --- packages/js/product-editor/src/hooks/index.ts | 1 + .../src/hooks/use-custom-fields/index.ts | 1 + .../src/hooks/use-custom-fields/types.ts | 9 ++++ .../use-custom-fields/use-custom-fields.ts | 43 +++++++++++++++++++ .../hooks/use-custom-fields/utils/index.ts | 21 +++++++++ 5 files changed, 75 insertions(+) create mode 100644 packages/js/product-editor/src/hooks/use-custom-fields/index.ts create mode 100644 packages/js/product-editor/src/hooks/use-custom-fields/types.ts create mode 100644 packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts create mode 100644 packages/js/product-editor/src/hooks/use-custom-fields/utils/index.ts diff --git a/packages/js/product-editor/src/hooks/index.ts b/packages/js/product-editor/src/hooks/index.ts index 8b0fc793cf8b..11ad28dc86c4 100644 --- a/packages/js/product-editor/src/hooks/index.ts +++ b/packages/js/product-editor/src/hooks/index.ts @@ -1,3 +1,4 @@ +export { useCustomFields as __experimentalUseCustomFields } from './use-custom-fields'; export { useProductHelper as __experimentalUseProductHelper } from './use-product-helper'; export { useFeedbackBar as __experimentalUseFeedbackBar } from './use-feedback-bar'; export { useVariationsOrder as __experimentalUseVariationsOrder } from './use-variations-order'; diff --git a/packages/js/product-editor/src/hooks/use-custom-fields/index.ts b/packages/js/product-editor/src/hooks/use-custom-fields/index.ts new file mode 100644 index 000000000000..ebd6721a9819 --- /dev/null +++ b/packages/js/product-editor/src/hooks/use-custom-fields/index.ts @@ -0,0 +1 @@ +export * from './use-custom-fields'; diff --git a/packages/js/product-editor/src/hooks/use-custom-fields/types.ts b/packages/js/product-editor/src/hooks/use-custom-fields/types.ts new file mode 100644 index 000000000000..0555406ea928 --- /dev/null +++ b/packages/js/product-editor/src/hooks/use-custom-fields/types.ts @@ -0,0 +1,9 @@ +/** + * Internal dependencies + */ +import { Metadata } from '../../types'; + +export type DisjoinMetas< T extends Metadata< string > > = { + customFields: T[]; + internalMetas: T[]; +}; diff --git a/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts b/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts new file mode 100644 index 000000000000..33269a667077 --- /dev/null +++ b/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts @@ -0,0 +1,43 @@ +/** + * External dependencies + */ +import type { Dispatch, SetStateAction } from 'react'; +import { useEntityProp } from '@wordpress/core-data'; +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import type { Metadata } from '../../types'; +import { disjoinMetas, isCustomField } from './utils'; + +export function useCustomFields< + T extends Metadata< string > = Metadata< string > +>(): [ T[], Dispatch< T[] > ] { + const [ metas, setMetas ] = useEntityProp< T[] >( + 'postType', + 'product', + 'meta_data' + ); + + const { customFields, internalMetas } = useMemo( + function extractCustomFieldsFromMetas() { + return metas.reduce( disjoinMetas< T >, { + customFields: [], + internalMetas: [], + } ); + }, + [ metas ] + ); + + function setCustomFields( value: SetStateAction< T[] > ) { + const newValue = + typeof value === 'function' ? value( customFields ) : value; + + const newValueWithoutPrefix = newValue.filter( isCustomField ); + + setMetas( [ ...internalMetas, ...newValueWithoutPrefix ] ); + } + + return [ customFields, setCustomFields ]; +} diff --git a/packages/js/product-editor/src/hooks/use-custom-fields/utils/index.ts b/packages/js/product-editor/src/hooks/use-custom-fields/utils/index.ts new file mode 100644 index 000000000000..c15b8be6ae8f --- /dev/null +++ b/packages/js/product-editor/src/hooks/use-custom-fields/utils/index.ts @@ -0,0 +1,21 @@ +/** + * Internal dependencies + */ +import type { Metadata } from '../../../types'; +import type { DisjoinMetas } from '../types'; + +export function isCustomField< T extends Metadata< string > >( value: T ) { + return ! value.key.startsWith( '_' ); +} + +export function disjoinMetas< T extends Metadata< string > >( + state: DisjoinMetas< T >, + meta: T +): DisjoinMetas< T > { + if ( isCustomField( meta ) ) { + state.customFields.push( meta ); + } else { + state.internalMetas.push( meta ); + } + return state; +} From 62e7f48650e853306039dfe369c45b2d849097b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Wed, 6 Mar 2024 12:02:59 -0300 Subject: [PATCH 05/16] Create empty state --- .../custom-fields/empty-state/empty-state.tsx | 54 +++++++++++++++++ .../custom-fields/empty-state/index.ts | 1 + .../custom-fields/empty-state/style.scss | 59 +++++++++++++++++++ 3 files changed, 114 insertions(+) create mode 100644 packages/js/product-editor/src/components/custom-fields/empty-state/empty-state.tsx create mode 100644 packages/js/product-editor/src/components/custom-fields/empty-state/index.ts create mode 100644 packages/js/product-editor/src/components/custom-fields/empty-state/style.scss diff --git a/packages/js/product-editor/src/components/custom-fields/empty-state/empty-state.tsx b/packages/js/product-editor/src/components/custom-fields/empty-state/empty-state.tsx new file mode 100644 index 000000000000..e9d851b86b04 --- /dev/null +++ b/packages/js/product-editor/src/components/custom-fields/empty-state/empty-state.tsx @@ -0,0 +1,54 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ + +export function EmptyState( + props: React.DetailedHTMLProps< + React.HTMLAttributes< HTMLDivElement >, + HTMLDivElement + > +) { + return ( +
+
+
{ __( 'Custom field 1', 'woocommerce' ) }
+
+
+
+
+
+
+
+ +
+
{ __( 'Custom field 2', 'woocommerce' ) }
+
+
+
+
+
+
+
+ +
+
{ __( 'Custom field 3', 'woocommerce' ) }
+
+
+
+
+
+
+
+
+ ); +} diff --git a/packages/js/product-editor/src/components/custom-fields/empty-state/index.ts b/packages/js/product-editor/src/components/custom-fields/empty-state/index.ts new file mode 100644 index 000000000000..ee513f137bc3 --- /dev/null +++ b/packages/js/product-editor/src/components/custom-fields/empty-state/index.ts @@ -0,0 +1 @@ +export * from './empty-state'; diff --git a/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss b/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss new file mode 100644 index 000000000000..205ac9dbd93d --- /dev/null +++ b/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss @@ -0,0 +1,59 @@ +.wp-block-woocommerce-product-custom-fields__empty-state { + @mixin skeleton { + @include placeholder(); + background-color: $gray-200; + border-radius: $grid-unit-05; + width: $grid-unit-30; + height: $grid-unit; + } + + border: 1px dashed $gray-400; + padding: 0 $grid-unit-30; + border-radius: 2px; + + &-row { + display: grid; + grid-template-columns: 1.5fr 1fr 0.5fr; + height: $grid-unit-80; + align-items: center; + border-top: 1px solid $gray-100; + + &:first-child { + border-top: none; + + .wp-block-woocommerce-product-custom-fields__empty-state-name { + width: 140px; + } + } + + &:nth-child(2) { + opacity: 0.7; + + .wp-block-woocommerce-product-custom-fields__empty-state-name { + width: 75px; + } + } + + &:nth-child(3) { + opacity: 0.5; + + .wp-block-woocommerce-product-custom-fields__empty-state-name { + width: 114px; + } + } + + :last-child { + display: flex; + justify-content: flex-end; + } + } + + &-name { + @include skeleton(); + } + + &-actions { + @include skeleton(); + width: $grid-unit-60; + } +} From bf0ed6f131b972da91a228620de0804410de0c01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Wed, 6 Mar 2024 12:03:49 -0300 Subject: [PATCH 06/16] Create CustomFields component --- .../custom-fields/custom-fields.tsx | 19 +++++++++++++++++++ .../src/components/custom-fields/index.ts | 2 ++ .../src/components/custom-fields/style.scss | 4 ++++ .../src/components/custom-fields/types.ts | 1 + .../js/product-editor/src/components/index.ts | 5 +++++ packages/js/product-editor/src/style.scss | 1 + 6 files changed, 32 insertions(+) create mode 100644 packages/js/product-editor/src/components/custom-fields/custom-fields.tsx create mode 100644 packages/js/product-editor/src/components/custom-fields/index.ts create mode 100644 packages/js/product-editor/src/components/custom-fields/style.scss create mode 100644 packages/js/product-editor/src/components/custom-fields/types.ts diff --git a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx new file mode 100644 index 000000000000..e6a78e1cf71d --- /dev/null +++ b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import { createElement } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { useCustomFields } from '../../hooks/use-custom-fields'; +import { EmptyState } from './empty-state'; +import type { CustomFieldsProps } from './types'; + +export function CustomFields( {}: CustomFieldsProps ) { + const [ customFields ] = useCustomFields(); + + console.log( customFields ); + + return ; +} diff --git a/packages/js/product-editor/src/components/custom-fields/index.ts b/packages/js/product-editor/src/components/custom-fields/index.ts new file mode 100644 index 000000000000..c87eb206553c --- /dev/null +++ b/packages/js/product-editor/src/components/custom-fields/index.ts @@ -0,0 +1,2 @@ +export * from './custom-fields'; +export * from './types'; diff --git a/packages/js/product-editor/src/components/custom-fields/style.scss b/packages/js/product-editor/src/components/custom-fields/style.scss new file mode 100644 index 000000000000..06c019360b11 --- /dev/null +++ b/packages/js/product-editor/src/components/custom-fields/style.scss @@ -0,0 +1,4 @@ +@import "./empty-state/style.scss"; + +.wp-block-woocommerce-product-custom-fields { +} diff --git a/packages/js/product-editor/src/components/custom-fields/types.ts b/packages/js/product-editor/src/components/custom-fields/types.ts new file mode 100644 index 000000000000..5b790eacdc6c --- /dev/null +++ b/packages/js/product-editor/src/components/custom-fields/types.ts @@ -0,0 +1 @@ +export type CustomFieldsProps = {}; diff --git a/packages/js/product-editor/src/components/index.ts b/packages/js/product-editor/src/components/index.ts index 7e1176156c48..bc35d3bb8c97 100644 --- a/packages/js/product-editor/src/components/index.ts +++ b/packages/js/product-editor/src/components/index.ts @@ -95,3 +95,8 @@ export { SchedulePublishModal as __experimentalSchedulePublishModal, SchedulePublishModalProps, } from './schedule-publish-modal'; + +export { + CustomFields as __experimentalCustomFields, + CustomFieldsProps, +} from './custom-fields'; diff --git a/packages/js/product-editor/src/style.scss b/packages/js/product-editor/src/style.scss index 216b8698cb3b..598ab494058d 100644 --- a/packages/js/product-editor/src/style.scss +++ b/packages/js/product-editor/src/style.scss @@ -48,6 +48,7 @@ @import "components/prepublish-panel/style.scss"; @import "components/require-password/styles.scss"; @import "components/schedule-publish-modal/style.scss"; +@import "components/custom-fields/style.scss"; /* Field Blocks */ From a638a52085227dd8eaab34bca18b1b684af7768f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Wed, 6 Mar 2024 12:52:20 -0300 Subject: [PATCH 07/16] Add custom fields table --- .../product-fields/custom-fields/edit.tsx | 7 ++- .../custom-fields/custom-fields.tsx | 43 ++++++++++++++++++- .../custom-fields/empty-state/empty-state.tsx | 20 ++++----- .../custom-fields/empty-state/style.scss | 2 +- .../src/components/custom-fields/style.scss | 33 +++++++++++++- 5 files changed, 90 insertions(+), 15 deletions(-) diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx index 5a5d37032f65..529b818d32d8 100644 --- a/packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/custom-fields/edit.tsx @@ -7,6 +7,7 @@ import { useWooBlockProps } from '@woocommerce/block-templates'; /** * Internal dependencies */ +import { CustomFields } from '../../../components/custom-fields'; import { ProductEditorBlockEditProps } from '../../../types'; import { CustomFieldsBlockAttributes } from './types'; @@ -15,5 +16,9 @@ export function Edit( { }: ProductEditorBlockEditProps< CustomFieldsBlockAttributes > ) { const blockProps = useWooBlockProps( attributes ); - return
; + return ( +
+ +
+ ); } diff --git a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx index e6a78e1cf71d..1e2ba2790c1a 100644 --- a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx +++ b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx @@ -1,7 +1,10 @@ /** * External dependencies */ +import { Button } from '@wordpress/components'; import { createElement } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { closeSmall } from '@wordpress/icons'; /** * Internal dependencies @@ -13,7 +16,43 @@ import type { CustomFieldsProps } from './types'; export function CustomFields( {}: CustomFieldsProps ) { const [ customFields ] = useCustomFields(); - console.log( customFields ); + if ( customFields.length === 0 ) { + return ; + } - return ; + return ( + + + + + + + + + + { customFields.map( ( customField ) => ( + + + + + + ) ) } + +
{ __( 'Name', 'woocommerce' ) }{ __( 'Value', 'woocommerce' ) }{ __( 'Actions', 'woocommerce' ) }
+ { customField.key } + + { customField.value } + +
+ ); } diff --git a/packages/js/product-editor/src/components/custom-fields/empty-state/empty-state.tsx b/packages/js/product-editor/src/components/custom-fields/empty-state/empty-state.tsx index e9d851b86b04..f9b94867b1df 100644 --- a/packages/js/product-editor/src/components/custom-fields/empty-state/empty-state.tsx +++ b/packages/js/product-editor/src/components/custom-fields/empty-state/empty-state.tsx @@ -18,35 +18,35 @@ export function EmptyState(
-
+
{ __( 'Custom field 1', 'woocommerce' ) }
-
+
-
+
-
+
{ __( 'Custom field 2', 'woocommerce' ) }
-
+
-
+
-
+
{ __( 'Custom field 3', 'woocommerce' ) }
-
+
-
+
diff --git a/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss b/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss index 205ac9dbd93d..55eaa78a67bb 100644 --- a/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss +++ b/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss @@ -1,4 +1,4 @@ -.wp-block-woocommerce-product-custom-fields__empty-state { +.woocommerce-product-custom-fields__empty-state { @mixin skeleton { @include placeholder(); background-color: $gray-200; diff --git a/packages/js/product-editor/src/components/custom-fields/style.scss b/packages/js/product-editor/src/components/custom-fields/style.scss index 06c019360b11..ffd20e40704a 100644 --- a/packages/js/product-editor/src/components/custom-fields/style.scss +++ b/packages/js/product-editor/src/components/custom-fields/style.scss @@ -1,4 +1,35 @@ @import "./empty-state/style.scss"; -.wp-block-woocommerce-product-custom-fields { +.woocommerce-product-custom-fields { + &__table { + width: 100%; + + thead { + @include screen-reader-only(); + } + + &-row { + display: grid; + grid-template-columns: 1fr 1fr 100px; + gap: $grid-unit-30; + border-bottom: 1px solid $gray-200; + + &:last-child { + border-bottom: none; + } + } + + &-datacell { + padding-top: $grid-unit-30; + padding-bottom: $grid-unit-30; + + &:last-child { + display: flex; + align-items: center; + justify-content: flex-end; + padding: 0; + gap: $grid-unit; + } + } + } } From 916cf39461ecc553692ab5d971e875ecbaedbbbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Wed, 6 Mar 2024 16:24:30 -0300 Subject: [PATCH 08/16] Add custom field remove button --- .../components/custom-fields/custom-fields.tsx | 11 ++++++++++- .../hooks/use-custom-fields/use-custom-fields.ts | 16 ++++++++++------ 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx index 1e2ba2790c1a..7f4baafa4b9b 100644 --- a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx +++ b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx @@ -14,12 +14,18 @@ import { EmptyState } from './empty-state'; import type { CustomFieldsProps } from './types'; export function CustomFields( {}: CustomFieldsProps ) { - const [ customFields ] = useCustomFields(); + const { customFields, removeCustomField } = useCustomFields(); if ( customFields.length === 0 ) { return ; } + function removeButtonClickHandler( key: string ) { + return function handleRemoveButtonClick() { + removeCustomField( key ); + }; + } + return ( @@ -48,6 +54,9 @@ export function CustomFields( {}: CustomFieldsProps ) { 'Remove custom field', 'woocommerce' ) } + onClick={ removeButtonClickHandler( + customField.key + ) } /> diff --git a/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts b/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts index 33269a667077..3495e2b1f9bb 100644 --- a/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts +++ b/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { Dispatch, SetStateAction } from 'react'; +import type { SetStateAction } from 'react'; import { useEntityProp } from '@wordpress/core-data'; import { useMemo } from '@wordpress/element'; @@ -9,11 +9,11 @@ import { useMemo } from '@wordpress/element'; * Internal dependencies */ import type { Metadata } from '../../types'; -import { disjoinMetas, isCustomField } from './utils'; +import { disjoinMetas } from './utils'; export function useCustomFields< T extends Metadata< string > = Metadata< string > ->(): [ T[], Dispatch< T[] > ] { +>() { const [ metas, setMetas ] = useEntityProp< T[] >( 'postType', 'product', @@ -34,10 +34,14 @@ export function useCustomFields< const newValue = typeof value === 'function' ? value( customFields ) : value; - const newValueWithoutPrefix = newValue.filter( isCustomField ); + setMetas( [ ...internalMetas, ...newValue ] ); + } - setMetas( [ ...internalMetas, ...newValueWithoutPrefix ] ); + function removeCustomField( key: T[ 'key' ] ) { + setCustomFields( ( current ) => + current.filter( ( customField ) => customField.key !== key ) + ); } - return [ customFields, setCustomFields ]; + return { customFields, removeCustomField }; } From d4e9bf613feb7933014844dce67585d7b145c295 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Wed, 6 Mar 2024 17:38:16 -0300 Subject: [PATCH 09/16] Hide the custom fields table base on the toggle value --- .../custom-fields-toggle/edit.tsx | 38 +++++++++++++------ .../custom-fields-toggle/editor.scss | 16 +++++--- .../SimpleProductTemplate.php | 16 +++++--- 3 files changed, 48 insertions(+), 22 deletions(-) diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx index 1f505b414784..af2d154113b9 100644 --- a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx @@ -1,10 +1,14 @@ /** * External dependencies */ -import { Spinner, ToggleControl } from '@wordpress/components'; -import { createElement } from '@wordpress/element'; import { useWooBlockProps } from '@woocommerce/block-templates'; import { recordEvent } from '@woocommerce/tracks'; +import { + // @ts-expect-error no exported member. + useInnerBlocksProps, +} from '@wordpress/block-editor'; +import { Spinner, ToggleControl } from '@wordpress/components'; +import { createElement, useMemo } from '@wordpress/element'; /** * Internal dependencies @@ -21,17 +25,25 @@ export function Edit( { }: ProductEditorBlockEditProps< CustomFieldsToggleBlockAttributes > ) { const { label, _templateBlockId } = attributes; const blockProps = useWooBlockProps( attributes ); + const innerBlockProps = useInnerBlocksProps( + { + className: + 'wp-block-woocommerce-product-custom-fields-toggle-field__inner-blocks', + }, + { templateLock: 'all' } + ); + const { isLoading, metaboxhiddenProduct, saveMetaboxhiddenProduct } = useMetaboxHiddenProduct(); - function isChecked() { + const isChecked = useMemo( () => { return ( metaboxhiddenProduct && ! metaboxhiddenProduct.some( ( value ) => value === METABOX_HIDDEN_VALUE ) ); - } + }, [ metaboxhiddenProduct ] ); async function handleChange( checked: boolean ) { const values = checked @@ -51,14 +63,18 @@ export function Edit( { return (
- +
+ + + { isLoading && } +
- { isLoading && } + { isChecked &&
}
); } diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/editor.scss b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/editor.scss index ffe2b9e7b25d..8ee7f0cfe3b3 100644 --- a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/editor.scss +++ b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/editor.scss @@ -1,9 +1,15 @@ .wp-block-woocommerce-product-custom-fields-toggle-field { - display: flex; - gap: $grid-unit; - align-items: center; + &__content { + display: flex; + gap: $grid-unit; + align-items: center; - .components-spinner { - margin: 0; + .components-spinner { + margin: 0; + } + } + + &__inner-blocks { + margin-top: $grid-unit-60; } } diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php index e1c8b6958dad..9aeee4277cce 100644 --- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php +++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php @@ -571,23 +571,27 @@ private function add_organization_group_blocks() { ); if ( Features::is_enabled( 'product-custom-fields' ) ) { - $product_attributes_section->add_block( + $organization_group->add_section( + array( + 'id' => 'product-custom-fields-wrapper-section', + 'order' => 30, + ) + )->add_block( array( 'id' => 'product-custom-fields-toggle', 'blockName' => 'woocommerce/product-custom-fields-toggle-field', - 'order' => 20, + 'order' => 10, 'attributes' => array( 'label' => __( 'Show custom fields', 'woocommerce' ), ), ) - ); - - $product_attributes_section->add_block( + )->add_block( array( 'id' => 'product-custom-fields-section', 'blockName' => 'woocommerce/product-section', - 'order' => 30, + 'order' => 10, 'attributes' => array( + 'blockGap' => 'unit-30', 'title' => __( 'Custom fields', 'woocommerce' ), 'description' => sprintf( /* translators: %1$s: Custom fields guide link opening tag. %2$s: Custom fields guide link closing tag. */ From c19520b0d98d84c838d4bfc4ed1a653a1989a6a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Thu, 7 Mar 2024 10:17:31 -0300 Subject: [PATCH 10/16] Remove non list features --- .../custom-fields/custom-fields.tsx | 23 ++----------------- .../use-custom-fields/use-custom-fields.ts | 8 +------ 2 files changed, 3 insertions(+), 28 deletions(-) diff --git a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx index 7f4baafa4b9b..047e99c51b64 100644 --- a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx +++ b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx @@ -1,10 +1,8 @@ /** * External dependencies */ -import { Button } from '@wordpress/components'; import { createElement } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { closeSmall } from '@wordpress/icons'; /** * Internal dependencies @@ -14,18 +12,12 @@ import { EmptyState } from './empty-state'; import type { CustomFieldsProps } from './types'; export function CustomFields( {}: CustomFieldsProps ) { - const { customFields, removeCustomField } = useCustomFields(); + const { customFields } = useCustomFields(); if ( customFields.length === 0 ) { return ; } - function removeButtonClickHandler( key: string ) { - return function handleRemoveButtonClick() { - removeCustomField( key ); - }; - } - return (
@@ -47,18 +39,7 @@ export function CustomFields( {}: CustomFieldsProps ) { - + ) ) } diff --git a/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts b/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts index 3495e2b1f9bb..9dfa50b27c27 100644 --- a/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts +++ b/packages/js/product-editor/src/hooks/use-custom-fields/use-custom-fields.ts @@ -37,11 +37,5 @@ export function useCustomFields< setMetas( [ ...internalMetas, ...newValue ] ); } - function removeCustomField( key: T[ 'key' ] ) { - setCustomFields( ( current ) => - current.filter( ( customField ) => customField.key !== key ) - ); - } - - return { customFields, removeCustomField }; + return { customFields, setCustomFields }; } From 215e217888d1c18eebd77124bb28d9d662f7ae8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Thu, 7 Mar 2024 10:24:08 -0300 Subject: [PATCH 11/16] Add changelog files --- packages/js/product-editor/changelog/add-44169-list | 4 ++++ plugins/woocommerce/changelog/add-44169-list | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 packages/js/product-editor/changelog/add-44169-list create mode 100644 plugins/woocommerce/changelog/add-44169-list diff --git a/packages/js/product-editor/changelog/add-44169-list b/packages/js/product-editor/changelog/add-44169-list new file mode 100644 index 000000000000..d61bc9318856 --- /dev/null +++ b/packages/js/product-editor/changelog/add-44169-list @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Create woocommerce/product-custom-fields block diff --git a/plugins/woocommerce/changelog/add-44169-list b/plugins/woocommerce/changelog/add-44169-list new file mode 100644 index 000000000000..83ed820946f9 --- /dev/null +++ b/plugins/woocommerce/changelog/add-44169-list @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Register woocommerce/product-custom-fields block From 90cd0513905b944bd5454cd4b4d68001d22d41fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Thu, 7 Mar 2024 10:41:10 -0300 Subject: [PATCH 12/16] Fix linter errors --- .../product-fields/custom-fields-toggle/edit.tsx | 4 ++-- .../src/components/custom-fields/custom-fields.tsx | 11 +++++++++-- .../src/components/custom-fields/types.ts | 5 ++++- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx index af2d154113b9..ff976e4b90b3 100644 --- a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx +++ b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/edit.tsx @@ -3,12 +3,12 @@ */ import { useWooBlockProps } from '@woocommerce/block-templates'; import { recordEvent } from '@woocommerce/tracks'; +import { Spinner, ToggleControl } from '@wordpress/components'; +import { createElement, useMemo } from '@wordpress/element'; import { // @ts-expect-error no exported member. useInnerBlocksProps, } from '@wordpress/block-editor'; -import { Spinner, ToggleControl } from '@wordpress/components'; -import { createElement, useMemo } from '@wordpress/element'; /** * Internal dependencies diff --git a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx index 047e99c51b64..ef30ecac777d 100644 --- a/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx +++ b/packages/js/product-editor/src/components/custom-fields/custom-fields.tsx @@ -3,6 +3,7 @@ */ import { createElement } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; +import classNames from 'classnames'; /** * Internal dependencies @@ -11,7 +12,7 @@ import { useCustomFields } from '../../hooks/use-custom-fields'; import { EmptyState } from './empty-state'; import type { CustomFieldsProps } from './types'; -export function CustomFields( {}: CustomFieldsProps ) { +export function CustomFields( { className, ...props }: CustomFieldsProps ) { const { customFields } = useCustomFields(); if ( customFields.length === 0 ) { @@ -19,7 +20,13 @@ export function CustomFields( {}: CustomFieldsProps ) { } return ( -
{ customField.value } -
+
diff --git a/packages/js/product-editor/src/components/custom-fields/types.ts b/packages/js/product-editor/src/components/custom-fields/types.ts index 5b790eacdc6c..83a52b275907 100644 --- a/packages/js/product-editor/src/components/custom-fields/types.ts +++ b/packages/js/product-editor/src/components/custom-fields/types.ts @@ -1 +1,4 @@ -export type CustomFieldsProps = {}; +export type CustomFieldsProps = React.DetailedHTMLProps< + React.TableHTMLAttributes< HTMLTableElement >, + HTMLTableElement +>; From a4cd9a0b60245ba0d463309336cabfb3b0fff13f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Thu, 7 Mar 2024 10:49:01 -0300 Subject: [PATCH 13/16] Fix empty state styles --- .../src/components/custom-fields/empty-state/style.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss b/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss index 55eaa78a67bb..c68f130a9c37 100644 --- a/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss +++ b/packages/js/product-editor/src/components/custom-fields/empty-state/style.scss @@ -1,6 +1,5 @@ .woocommerce-product-custom-fields__empty-state { @mixin skeleton { - @include placeholder(); background-color: $gray-200; border-radius: $grid-unit-05; width: $grid-unit-30; @@ -21,7 +20,7 @@ &:first-child { border-top: none; - .wp-block-woocommerce-product-custom-fields__empty-state-name { + .woocommerce-product-custom-fields__empty-state-name { width: 140px; } } @@ -29,7 +28,7 @@ &:nth-child(2) { opacity: 0.7; - .wp-block-woocommerce-product-custom-fields__empty-state-name { + .woocommerce-product-custom-fields__empty-state-name { width: 75px; } } @@ -37,7 +36,7 @@ &:nth-child(3) { opacity: 0.5; - .wp-block-woocommerce-product-custom-fields__empty-state-name { + .woocommerce-product-custom-fields__empty-state-name { width: 114px; } } From 08bf59d02e625572ec12721ac3ee635c1011696e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Thu, 7 Mar 2024 11:39:11 -0300 Subject: [PATCH 14/16] Fix php linter error --- .../ProductTemplates/SimpleProductTemplate.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php index 9aeee4277cce..7e67e8860c0d 100644 --- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php +++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php @@ -573,8 +573,8 @@ private function add_organization_group_blocks() { if ( Features::is_enabled( 'product-custom-fields' ) ) { $organization_group->add_section( array( - 'id' => 'product-custom-fields-wrapper-section', - 'order' => 30, + 'id' => 'product-custom-fields-wrapper-section', + 'order' => 30, ) )->add_block( array( From 869834b96df3a9c9baeb13142e345998185eef07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Mon, 11 Mar 2024 11:20:02 -0300 Subject: [PATCH 15/16] Remove context from the woocommerce/product-custom-fields-toggle-field block definition since it is not used --- .../src/blocks/product-fields/custom-fields-toggle/block.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/block.json b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/block.json index 6e2a5ed80b4d..ae2da4df2df7 100644 --- a/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/block.json +++ b/packages/js/product-editor/src/blocks/product-fields/custom-fields-toggle/block.json @@ -22,6 +22,5 @@ "lock": false, "__experimentalToolbar": false }, - "usesContext": [ "postType" ], "editorStyle": "file:./editor.css" } From f1969c43ff20e7e9c0ec2dcf0dc45ef8e9fa25fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maikel=20David=20P=C3=A9rez=20G=C3=B3mez?= Date: Mon, 11 Mar 2024 11:21:50 -0300 Subject: [PATCH 16/16] Change url for the Read more about custom fields --- .../ProductTemplates/SimpleProductTemplate.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php index 7e67e8860c0d..927e260427f5 100644 --- a/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php +++ b/plugins/woocommerce/src/Internal/Features/ProductBlockEditor/ProductTemplates/SimpleProductTemplate.php @@ -595,8 +595,8 @@ private function add_organization_group_blocks() { 'title' => __( 'Custom fields', 'woocommerce' ), 'description' => sprintf( /* translators: %1$s: Custom fields guide link opening tag. %2$s: Custom fields guide link closing tag. */ - __( 'Custom fields can be used in a variety of ways, such as sharing more detailed product information, showing more input fields, or internal inventory organization. %1$sRead more about custom fields?%2$s', 'woocommerce' ), - '', + __( 'Custom fields can be used in a variety of ways, such as sharing more detailed product information, showing more input fields, or internal inventory organization. %1$sRead more about custom fields%2$s', 'woocommerce' ), + '', '' ), ),
{ __( 'Name', 'woocommerce' ) }