Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release 2.6.0 #2282

Merged
merged 115 commits into from
Feb 27, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
115 commits
Select commit Hold shift + click to select a range
63df208
Extract the `get_applicable_product_types` method from `AttributesTab…
eason9487 Nov 10, 2023
e74060a
Extract the processing of getting the visible and hidden product type…
eason9487 Nov 10, 2023
518c145
Convert the `init_input` method in `AttributesForm` to a static method.
eason9487 Nov 10, 2023
f3dc932
Add methods to `Admin\Input\Input` for getting block config.
eason9487 Nov 10, 2023
6f12692
Add a new class `AttributesBlock` to register blocks to Product Block…
eason9487 Nov 10, 2023
a89b40d
Map `Text` and `Integer` inputs to currently available generic blocks.
eason9487 Nov 10, 2023
0b71d99
Add the block attribute 'min' to the multipack input.
eason9487 Nov 10, 2023
2b33f82
Use another way to add the visible attributes for the variation produ…
eason9487 Nov 13, 2023
02b978d
Remove an unused method from `SelectWithTextInput`.
eason9487 Nov 22, 2023
97d2af3
Remove unused PHP classes `Admin\Input\Checkbox` and `Admin\Input\Dec…
eason9487 Nov 22, 2023
2f96cfd
Add basic PHP unit tests for the `Admin\Input\Input` class and its in…
eason9487 Nov 17, 2023
1b959cb
Add PHP unit tests for the attribute input classes under `Admin\Produ…
eason9487 Nov 17, 2023
838f469
Add PHP unit tests for the `AttributesForm` class.
eason9487 Nov 20, 2023
0408038
Add PHP unit tests for the `AttributesBlock` class.
eason9487 Nov 21, 2023
1ea9f4b
Update the `@woocommerce/dependency-extraction-webpack-plugin` packag…
eason9487 Nov 28, 2023
8331bb3
Add the structure of custom blocks and implement the block of product…
eason9487 Nov 28, 2023
ade7092
Adjust the frontend config to build the custom blocks.
eason9487 Nov 28, 2023
9783aca
Adjust the `can_enqueue` of `BaseAsset` as it should allow `$enqueue_…
eason9487 Nov 28, 2023
69cdf1f
Adjust the `AttributesBlock` to register the custom blocks and the re…
eason9487 Nov 28, 2023
9570524
Map `Select` and `BooleanSelect` inputs to the custom block of the se…
eason9487 Nov 28, 2023
a308eb7
Add a README about the development of custom blocks.
eason9487 Nov 29, 2023
f3dee6e
Set the minimum required Woo version of `AttributesBlock` to 8.4.
eason9487 Dec 7, 2023
57e1128
Add the "Accessing product data" section to the README.md of custom p…
eason9487 Dec 6, 2023
1fe2fe5
Implement the custom block for the product select-with-text field.
eason9487 Dec 6, 2023
e05bbb3
Map `SelectWithTextInput` input to the custom block of the product se…
eason9487 Dec 6, 2023
1015760
Implement the custom block for the product date-time field.
eason9487 Dec 7, 2023
abd3492
Map `DateTime` input to the custom block of the product date-time field.
eason9487 Dec 7, 2023
e8fa01a
Move and rename `Admin\Product\Attributes\AttributesBlock` class to `…
eason9487 Dec 11, 2023
5cf49b1
Change to create a dedicated group in the Product Block Editor for th…
eason9487 Dec 12, 2023
7b3d74c
Add a new section to this extension's group in the Product Block Edit…
eason9487 Dec 12, 2023
937c84b
Clean up the temporary codes that prevent unmapped inputs from being …
eason9487 Dec 12, 2023
46830dc
Avoid calling the ProductTemplates API `add_hide_condition` with an e…
eason9487 Dec 15, 2023
ac4abe9
Add type references for variables related to the product block/template.
eason9487 Dec 15, 2023
e4a743e
Add a PHP unit test for testing the `can_enqueue` method of `BaseAsse…
eason9487 Dec 15, 2023
b7c9eaa
Merge branch 'add/product-block-editor-generic-blocks' into add/produ…
eason9487 Dec 15, 2023
2eaee14
Adjust AttributesBlockTest.php accordingly for the newly added test c…
eason9487 Dec 15, 2023
466d83e
Should hide a block field when its all applicable product types are n…
eason9487 Dec 18, 2023
9ff6a97
Update the PHP docs for the `$attribute_type` and `$input_type` param…
eason9487 Dec 25, 2023
8d09cd3
Revert "Adjust AttributesBlockTest.php accordingly for the newly adde…
eason9487 Dec 25, 2023
5e1f98d
Merge branch 'add/product-block-editor-generic-blocks' into add/produ…
eason9487 Dec 25, 2023
e1798ea
Merge pull request #2151 from woocommerce/add/product-block-editor-ge…
eason9487 Dec 25, 2023
cb432d9
Merge pull request #2164 from woocommerce/add/product-block-editor-cu…
eason9487 Dec 25, 2023
0965ef9
Add an explanation to blocks README for the term "derived value".
eason9487 Dec 28, 2023
b94f33a
Correct the inconsistent variable names in js/src/blocks/index.js.
eason9487 Dec 28, 2023
776ffb8
Correct the inconsistent titles in each block JSON config.
eason9487 Dec 28, 2023
d8252b8
Add JSDoc for the custom blocks.
eason9487 Dec 28, 2023
b916bd3
Make the date-time custom field block allow the time to be an empty s…
eason9487 Dec 28, 2023
0fb9cf0
Merge branch 'feature/support-product-block-editor' into add/product-…
eason9487 Dec 28, 2023
182b317
Merge branch 'add/product-block-editor-custom-select-with-text-and-da…
eason9487 Dec 28, 2023
666cc9d
Document the `@var` tag in the `ProductBlocksService` class with the …
eason9487 Dec 28, 2023
d50c151
Merge pull request #2178 from woocommerce/add/product-block-editor-cu…
eason9487 Jan 3, 2024
34ca9e8
Refer to the `SectionInterface` class via `use` and adjust a related …
eason9487 Jan 3, 2024
55fbc8c
Merge pull request #2179 from woocommerce/tweak/product-block-editor-…
eason9487 Jan 3, 2024
d64fbac
Merge branch 'develop' into feature/support-product-block-editor
eason9487 Jan 3, 2024
71925ec
Use Woo's product block template API to register custom blocks.
eason9487 Jan 3, 2024
2d84378
Replace the copied `Label` component with the one imported from `@woo…
eason9487 Jan 3, 2024
b2eee28
Merge pull request #2193 from woocommerce/tweak/product-block-editor-…
eason9487 Jan 10, 2024
3a4a128
Merge branch 'develop' into feature/support-product-block-editor
eason9487 Jan 19, 2024
ab4ecc7
Add a temporary step to the build workflow of the GitHub Actions to u…
eason9487 Jan 23, 2024
9a327e5
Add the specific custom block for editing the channel visibility.
eason9487 Jan 23, 2024
8a86347
Add the static `ChannelVisibility::get_value_options` method to get o…
eason9487 Jan 23, 2024
11a2993
Add the `ProductHelper::update_channel_visibility` method.
eason9487 Jan 23, 2024
b2b485f
Add a new class `ChannelVisibilityBlock` to hook REST APIs and to get…
eason9487 Jan 23, 2024
62e5517
Change the `ProductBlocksService::get_hide_condition` method to accep…
eason9487 Jan 23, 2024
20169c4
Adjust the `ProductBlocksService` class to register the hooks and blo…
eason9487 Jan 23, 2024
aa28eda
Fix the incorrect hook call in the `ChannelVisibilityBlock` class.
eason9487 Jan 24, 2024
177e5ab
Change the `ProductHelper` dependency injection of `ProductBlocksServ…
eason9487 Jan 24, 2024
34abdb2
Change the `WC_Product` type of the $product argument of `ChannelVisi…
eason9487 Jan 25, 2024
921bbd5
Merge pull request #2214 from woocommerce/add/product-block-editor-cu…
eason9487 Jan 25, 2024
4f0bf7a
Merge branch 'develop' into feature/support-product-block-editor
eason9487 Jan 25, 2024
f56c9d0
Use a workaround to validate whether the input value of multipack is …
eason9487 Jan 26, 2024
5ba3c5d
Merge pull request #2219 from woocommerce/tweak/product-block-editor-…
eason9487 Jan 29, 2024
cf5fbaf
Revert "Add a temporary step to the build workflow of the GitHub Acti…
eason9487 Feb 7, 2024
4f2e536
Merge branch 'develop' into feature/support-product-block-editor
eason9487 Feb 7, 2024
d90c853
Change to let the `ChannelVisibilityBlock` handle its own registratio…
eason9487 Jan 30, 2024
5e53b3c
Change `ProductBlocksService` to still add a group for this extension…
eason9487 Jan 30, 2024
59ec219
Add a new custom block for prompting the user to complete the onboard…
eason9487 Feb 5, 2024
bcf2033
Show the onboarding prompt in the Product Block Editor when it's not …
eason9487 Feb 5, 2024
20d8e0c
Fix the deprecations of using `${var}` in a string for the `ProductBl…
eason9487 Feb 5, 2024
c08f614
Merge pull request #2237 from woocommerce/add/product-block-editor-pr…
eason9487 Feb 7, 2024
355f61d
In `ProductBlocksService`, change to use a dedicated method as the 'i…
eason9487 Feb 8, 2024
175d53c
In `ProductBlocksService`, change to use a dedicated method as the "w…
eason9487 Feb 8, 2024
f054494
Remove the is_admin_page check from the conditional registration of `…
eason9487 Feb 8, 2024
8bbf671
Hide this extension's group from Product Block Editor for the unsuppo…
eason9487 Feb 8, 2024
955a9a6
Temporarily use the RC version to run PHPUnit as version 8.6.0 has no…
eason9487 Feb 8, 2024
ef5bdb7
Revert "Temporarily use the RC version to run PHPUnit as version 8.6.…
eason9487 Feb 19, 2024
fc2ee13
Merge pull request #2249 from woocommerce/tweak/product-block-editor-…
eason9487 Feb 19, 2024
dba7829
Merge branch 'develop' into feature/support-product-block-editor
eason9487 Feb 20, 2024
4de4d9d
Merge pull request #2265 from woocommerce/trunk
puntope Feb 20, 2024
c08b618
Skip handling Google disconnected when listing customers
mikkamp Feb 20, 2024
0e01663
Test for returning Google Disconnected error
mikkamp Feb 20, 2024
5ddcf3b
Declare feature compatibility for the product block editor.
eason9487 Feb 21, 2024
daf46ae
Make handler function protected to match other handlers
mikkamp Feb 21, 2024
e7cebca
Name each handler for better testing of handler stack
mikkamp Feb 21, 2024
595edcd
Allow testing of protected handler through ReflectionMethod
mikkamp Feb 21, 2024
73eb15f
Test error handling with a regular response
mikkamp Feb 21, 2024
2f22c63
Test all handlers in the stack
mikkamp Feb 21, 2024
7515eaa
Test reconnect handling
mikkamp Feb 21, 2024
7d0dd76
Test that other error codes return a generic exception
mikkamp Feb 21, 2024
9871f9d
Test listing accessible customers does not return a redirect error
mikkamp Feb 21, 2024
d8750f9
Test with a mocked service provider
mikkamp Feb 21, 2024
9c6510c
Expect ReconnectWordPress note to be triggered when Jetpack disconnects
mikkamp Feb 21, 2024
a23998a
Test auth_header handling
mikkamp Feb 21, 2024
229d38e
Confirm that the register function works
mikkamp Feb 21, 2024
0fbc3ff
Merge pull request #2269 from woocommerce/tweak/product-block-editor-…
eason9487 Feb 22, 2024
448ea68
Merge pull request #2213 from woocommerce/feature/support-product-blo…
eason9487 Feb 22, 2024
9934d4e
Fix the compatibility issue in starting E2E test environment due to t…
eason9487 Feb 22, 2024
75009e1
Pass handler function
mikkamp Feb 22, 2024
1f98b3c
Merge pull request #2266 from woocommerce/fix/401-handling-connected-…
mikkamp Feb 22, 2024
28211b8
Merge pull request #2272 from woocommerce/dev/fix-e2e-env-mariadb
eason9487 Feb 22, 2024
d52e400
Start `release/2.6.0`.
github-actions[bot] Feb 27, 2024
b6b1985
Remove older changelog entries from readme.txt
eason9487 Feb 27, 2024
fb05871
woorelease: Product version bump update
eason9487 Feb 27, 2024
161a91c
woorelease: Changelog update
eason9487 Feb 27, 2024
3c76fcf
Update hooks documentation from branch.
github-actions[bot] Feb 27, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ module.exports = {
'import/core-modules': [
'webpack',
'stylelint',
'@woocommerce/product-editor',
'@woocommerce/block-templates',
'@wordpress/stylelint-config',
'@pmmmwh/react-refresh-webpack-plugin',
'react-transition-group',
Expand Down
2 changes: 1 addition & 1 deletion .externalized.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
["@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","jquery","lodash","react","react-dom"]
["@woocommerce/block-templates","@woocommerce/components","@woocommerce/currency","@woocommerce/customer-effort-score","@woocommerce/data","@woocommerce/date","@woocommerce/navigation","@woocommerce/number","@woocommerce/product-editor","@woocommerce/settings","@woocommerce/tracks","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/data-controls","@wordpress/date","@wordpress/dom","@wordpress/element","@wordpress/hooks","@wordpress/html-entities","@wordpress/i18n","@wordpress/primitives","@wordpress/url","jquery","lodash","react","react-dom"]
5 changes: 5 additions & 0 deletions changelog.txt
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
*** WooCommerce Google Listings and Ads Changelog ***

= 2.6.0 - 2024-02-27 =
* Add - Support the new product editor (Product Block Editor).
* Dev - Fix the compatibility issue in starting E2E test environment due to the default charset change in MariaDB v11.3.1.
* Fix - 401 handling for connected Ads accounts.

= 2.5.18 - 2024-02-20 =
* Fix - Prevent product queries by IDs if no arguments are supplied.

Expand Down
5 changes: 3 additions & 2 deletions google-listings-and-ads.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Plugin Name: Google Listings and Ads
* Plugin URL: https://wordpress.org/plugins/google-listings-and-ads/
* Description: Native integration with Google that allows merchants to easily display their products across Google’s network.
* Version: 2.5.18
* Version: 2.6.0
* Author: WooCommerce
* Author URI: https://woo.com/
* Text Domain: google-listings-and-ads
Expand All @@ -30,7 +30,7 @@

defined( 'ABSPATH' ) || exit;

define( 'WC_GLA_VERSION', '2.5.18' ); // WRCS: DEFINED_VERSION.
define( 'WC_GLA_VERSION', '2.6.0' ); // WRCS: DEFINED_VERSION.
define( 'WC_GLA_MIN_PHP_VER', '7.4' );
define( 'WC_GLA_MIN_WC_VER', '6.9' );

Expand Down Expand Up @@ -60,6 +60,7 @@ function () {
if ( class_exists( FeaturesUtil::class ) ) {
FeaturesUtil::declare_compatibility( 'custom_order_tables', __FILE__ );
FeaturesUtil::declare_compatibility( 'cart_checkout_blocks', __FILE__ );
FeaturesUtil::declare_compatibility( 'product_block_editor', __FILE__ );
}
}
);
Expand Down
96 changes: 96 additions & 0 deletions js/src/blocks/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
# Custom product blocks

To make this extension compatible with the Product Block Editor, it needs to implement a few custom blocks to map all classical fields to product editor blocks.

## Development

Implementing custom blocks by the default development way, each block will be built as a separate script and will need to be loaded into the browser separately at runtime.

Since this extension requires a few custom blocks, and considering these custom blocks will not be used individually, and in order to reduce the number of scripts loaded, here are some adjustments that differ from the default way.

### Directory structure of source code

```
/js/src/blocks/ # The root directory of custom blocks
├── product-select-field/ # A custom block
│ ├── block.json # The metadata file of this block and also the canonical way to register this block with both PHP and JavaScript side
│ └── edit.js # The component to work with the `edit` function when registering this block, and it's the interface for how this block is going to be rendered within the Product Block Editor
├── another-field/ # Another custom block
│ ├── block.json
│ └── edit.js
├── components/ # The shared components within custom blocks (if any)
│ ├── index.js # The main file to export components
│ └── label.js # A shared component
└── index.js # The main file to import and register all custom blocks via JavaScript
```

### Directory structure of built code

```
/js/build/ # The root directory of built code
├── product-select-field/ # A custom block
│ └── block.json # The copied metadata file to be used to register this block via PHP
├── another-field/ # Another custom block
│ └── block.json
├── blocks.js # The built script to register all custom blocks via JavaScript and to be registered and enqueued via PHP
└── blocks.asset.php # The dependencies of blocks.js to be used when registering blocks.js via PHP
```

### Compatible with block templates and product data access

The Product Block Editor requires template attributes and `usesContext` to support its specific features, e.g. conditionally hide/disable block or contextually access product data. To make the custom blocks fully compatible with these features, the uses of the following APIs are required:

- JavaScript side:
- Use `useWooBlockProps` hook imported from `@woocommerce/block-templates` to get React props for the custom block's `<div>` wrapper.
- Use `useProductEntityProp` hook imported from `@woocommerce/product-editor` to get and set product data or metadata.
- Forwarding the `context.postType` to `useProductEntityProp` hook to contextually access simple or variation product.
- PHP side:
- Register all custom blocks via `\Automattic\WooCommerce\Admin\Features\ProductBlockEditor\BlockRegistry::get_instance()->register_block_type_from_metadata()`.

#### Derived value for initialization

The "derived value" refers to the computation of a value based on another state or props in a component. At the time of starting rendering a block, the product data has already been loaded to a data store of `@wordpress/data` in Woo's Product Block Editor, so the value returned from `useProductEntityProp` can be considered as an already fetched data for directly initializing derived values, because they all eventually use the same selector `getEntityRecord` from `@wordpress/core-data` to get product data.

References:

- At [ProductPage](https://github.com/woocommerce/woocommerce/blob/8.6.0/plugins/woocommerce-admin/client/products/product-page.tsx#L77-L79) and [ProductVariationPage](https://github.com/woocommerce/woocommerce/blob/8.6.0/plugins/woocommerce-admin/client/products/product-variation-page.tsx#L83-L85) layers, they won't render the actual blocks before the product data is fetched
- The above product data is obtained from [useProductEntityRecord](https://github.com/woocommerce/woocommerce/blob/8.6.0/plugins/woocommerce-admin/client/products/hooks/use-product-entity-record.ts#L19-L23) or [useProductVariationEntityRecord](https://github.com/woocommerce/woocommerce/blob/8.6.0/plugins/woocommerce-admin/client/products/hooks/use-product-variation-entity-record.ts#L16-L22) hook, and both hooks use the `getEntityRecord` selector.
- This extension obtains product data from [useProductEntityProp](https://github.com/woocommerce/woocommerce/blob/8.6.0/packages/js/product-editor/src/hooks/use-product-entity-prop.ts#L24-L34), which uses the `useEntityProp` hook internally.
- The [useEntityProp](https://github.com/WordPress/gutenberg/blob/wp/6.0/packages/core-data/src/entity-provider.js#L102-L133) hook also uses the `getEntityRecord` selector.

### Infrastructure adjustments

#### block.json and edit.js

By default, it should specify the `editorScript` with the relative path of edit.js, so that the `wp-scripts build` and `wp-scripts start` provided by `@wordpress/scripts` will also parse and build each block separately, and the edit.js needs to register itself along with its block.json.

With the adjusted setup:

- Every block.json should **not** specify the `editorScript` to avoid building blocks separately.
- Every edit.js should **not** do the registration.
- All block.json and edit.js files should be imported and registered via JavaScript by the index.js file at the root directory of custom blocks.

#### webpack.config.js

By default, when building, the [webpack config](https://github.com/WordPress/gutenberg/tree/%40wordpress/scripts%4024.6.0/packages/scripts#default-webpack-config) imported from `@wordpress/scripts` will find all block.json files within the given source code directory [specified by `--webpack-src-dir`](https://github.com/WordPress/gutenberg/tree/%40wordpress/scripts%4024.6.0/packages/scripts#automatic-blockjson-detection-and-the-source-code-directory), and then parse and build each block as per block.json.

With the adjusted setup:

- Build the index.js file in the root directory of custom blocks as the blocks.js at the root directory of built code.
- The blocks.asset.php file will be generated along with the build of the blocks.js. The `dependencies` value in the file is related to the mechanism of DEWP. See [Working with DEWP.md](../../../Working%20with%20DEWP.md) for more details.

#### Registration on the PHP side

By default, when each block is registered via PHP in the [ProductBlocksService](../../../src/Admin/ProductBlocksService.php) class, the `register_block_type` function will also register and enqueue the related scripts and styles such as the built edit.js.

The same part is the separate registration for each block, therefore all blocks should be listed in the `CUSTOM_BLOCKS` array of the `ProductBlocksService` class.

With the adjusted setup:

- The scripts and styles of blocks are not specified in block.json files, so they won't be registered or enqueued via the `register_block_type` function.
- Instead, the blocks.js script is registered and enqueued by `ProductBlocksService`.

## Related documentation

- [Woo - Product Editor Development](https://github.com/woocommerce/woocommerce/tree/trunk/docs/product-editor-development)
- [WordPress - Block Editor Handbook](https://developer.wordpress.org/block-editor/)
35 changes: 35 additions & 0 deletions js/src/blocks/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/**
* External dependencies
*/
import { registerProductEditorBlockType } from '@woocommerce/product-editor';

/**
* Internal dependencies
*/
import OnboardingPromptEdit from './product-onboarding-prompt/edit';
import onboardingPromptMetadata from './product-onboarding-prompt/block.json';
import ChannelVisibilityEdit from './product-channel-visibility/edit';
import channelVisibilityMetadata from './product-channel-visibility/block.json';
import DateTimeFieldEdit from './product-date-time-field/edit';
import dateTimeFieldMetadata from './product-date-time-field/block.json';
import SelectFieldEdit from './product-select-field/edit';
import selectFieldMetadata from './product-select-field/block.json';
import SelectWithTextFieldEdit from './product-select-with-text-field/edit';
import selectWithTextFieldMetadata from './product-select-with-text-field/block.json';

function registerProductEditorBlock( { name, ...metadata }, Edit ) {
registerProductEditorBlockType( {
name,
metadata,
settings: { edit: Edit },
} );
}

registerProductEditorBlock( onboardingPromptMetadata, OnboardingPromptEdit );
registerProductEditorBlock( channelVisibilityMetadata, ChannelVisibilityEdit );
registerProductEditorBlock( dateTimeFieldMetadata, DateTimeFieldEdit );
registerProductEditorBlock( selectFieldMetadata, SelectFieldEdit );
registerProductEditorBlock(
selectWithTextFieldMetadata,
SelectWithTextFieldEdit
);
37 changes: 37 additions & 0 deletions js/src/blocks/product-channel-visibility/block.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "google-listings-and-ads/product-channel-visibility",
"title": "Product channel visibility",
"textdomain": "google-listings-and-ads",
"attributes": {
"property": {
"type": "string",
"__experimentalRole": "content"
},
"options": {
"type": "array",
"items": {
"type": "object"
},
"default": []
},
"valueOfSync": {
"type": "string"
},
"valueOfDontSync": {
"type": "string"
},
"statusOfSynced": {
"type": "string"
},
"statusOfHasErrors": {
"type": "string"
}
},
"supports": {
"html": false,
"inserter": false,
"lock": false
}
}
122 changes: 122 additions & 0 deletions js/src/blocks/product-channel-visibility/edit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { SelectControl, Notice } from '@wordpress/components';
import { __experimentalUseProductEntityProp as useProductEntityProp } from '@woocommerce/product-editor';

/**
* Internal dependencies
*/
import styles from './editor.module.scss';

/**
* @typedef {import('../types.js').ProductEditorBlockContext} ProductEditorBlockContext
*/

/**
* @typedef {Object} ProductChannelVisibilityAttributes
* @property {string} property Property or metadata name in which the value is stored in the product data.
* @property {import('@wordpress/components').SelectControl.Option} [options=[]] The options to be shown in the select field.
* @property {string} valueOfSync The value of the "Sync and show" option to be used to determine the UI presentation.
* @property {string} valueOfDontSync The value of the "Don't Sync and show" option to be used to determine the UI presentation.
* @property {string} statusOfSynced The value of the "Synced" status to be used to determine the UI presentation.
* @property {string} statusOfHasErrors The value of the "HasErrors" status to be used to determine the UI presentation.
*/

/**
* Specific custom block for editing the channel visibility of the given product data.
*
* @param {Object} props React props.
* @param {ProductChannelVisibilityAttributes} props.attributes
* @param {ProductEditorBlockContext} props.context
*/
export default function Edit( { attributes, context } ) {
const {
valueOfSync: VALUE_SYNC,
valueOfDontSync: VALUE_DONT_SYNC,
statusOfSynced: STATUS_SYNCED,
statusOfHasErrors: STATUS_HAS_ERRORS,
} = attributes;

const blockProps = useWooBlockProps( attributes );
const [ value, setValue ] = useProductEntityProp( attributes.property, {
postType: context.postType,
} );

const setVisibility = ( nextVisibility ) => {
setValue( { ...value, channel_visibility: nextVisibility } );
};

const { is_visible: isVisible, sync_status: syncStatus, issues } = value;

// Force to select the "Don't Sync and show" option if the product is invisible.
const visibility = isVisible ? value.channel_visibility : VALUE_DONT_SYNC;

let syncStatusText = null;

if ( syncStatus === STATUS_HAS_ERRORS ) {
syncStatusText = __( 'Issues detected', 'google-listings-and-ads' );
} else if ( syncStatus ) {
syncStatusText = syncStatus.replace( '-', ' ' );
}

const help = isVisible
? ''
: __(
'This product cannot be shown on any channel because it is hidden from your store catalog. To enable this option, please change this product to be shown in the product catalog, and save the changes.',
'google-listings-and-ads'
);

const shouldDisplayNotice =
isVisible &&
syncStatusText !== null &&
visibility === VALUE_SYNC &&
syncStatus !== STATUS_SYNCED;

const hasErrors = issues.length > 0;

return (
<div { ...blockProps }>
<SelectControl
disabled={ ! isVisible }
options={ attributes.options }
value={ visibility }
onChange={ setVisibility }
help={ help }
/>
{ shouldDisplayNotice && (
<Notice
className={ styles.notice }
status={ hasErrors ? 'warning' : 'info' }
isDismissible={ false }
>
<section>
<h2>
{ __(
'Google sync status',
'google-listings-and-ads'
) }
</h2>
<p className={ styles.uppercaseFirstLetter }>
{ syncStatusText }
</p>
</section>
{ hasErrors && (
<section>
<h2>
{ __( 'Issues', 'google-listings-and-ads' ) }
</h2>
<ul>
{ issues.map( ( issue, idx ) => (
<li key={ idx }>{ issue }</li>
) ) }
</ul>
</section>
) }
</Notice>
) }
</div>
);
}
13 changes: 13 additions & 0 deletions js/src/blocks/product-channel-visibility/editor.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.notice {
margin: 1em 0 0;
padding-top: 0;
padding-bottom: 0;

h2 {
font-size: 1em;
}
}

.uppercaseFirstLetter::first-letter {
text-transform: uppercase;
}
24 changes: 24 additions & 0 deletions js/src/blocks/product-date-time-field/block.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "google-listings-and-ads/product-date-time-field",
"title": "Product date and time fields",
"textdomain": "google-listings-and-ads",
"attributes": {
"label": {
"type": "string"
},
"tooltip": {
"type": "string"
},
"property": {
"type": "string",
"__experimentalRole": "content"
}
},
"supports": {
"html": false,
"inserter": false,
"lock": false
}
}
Loading
Loading