-
Notifications
You must be signed in to change notification settings - Fork 219
Fix: Replace DropdownSelector with FormTokenField from Gutenberg #6647
Conversation
Script Dependencies ReportThe
This comment was automatically generated by the |
Size Change: -3.24 kB (0%) Total Size: 874 kB
ℹ️ View Unchanged
|
I created WordPress/gutenberg#42150 to track this issue. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've added a comment. I recommend asking for another review from the Kirigami Team as well, as they are more familiar with the Block than I am.
className={ classNames( | ||
'wc-block-attribute-filter-dropdown', | ||
'wc-blocks-components-form-token-field-wrapper', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How do you feel about having a separate component what handles all the styling and default props needed for the FormTokenField before we can use it?
This was the customizations below would only have to be applied once, and it can be then included in other places in the repo.
With a new component we can also add a story so that we can showcase it in Storybook
I've tested the branch with Storefront and I've notices some styling issues. Other than that the keyboard functionality is great. Minor. This is how an empty suggestions list appears,notice the double border on the bottom. |
Script Dependencies ReportThe
This comment was automatically generated by the |
Script Dependencies ReportThe
This comment was automatically generated by the |
Script Dependencies ReportThe
This comment was automatically generated by the |
@ralucaStan Thank you so much for the review! I address your comments and suggestions. Can you please take another look?
The reason for the double border issue is that we use |
The release ZIP for this PR is accessible via:
|
Ahh, I missed this. Thanks for the catch! I fixed it in 609b60a. Can you take another look? Screen.Recording.2022-07-25.at.13.57.55.mov |
Script Dependencies ReportThe
This comment was automatically generated by the |
The release ZIP for this PR is accessible via:
|
Script Dependencies ReportThe
This comment was automatically generated by the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome job with this PR @dinhtungdu! Everything is looking good on my end. 🚢
When only a single option can be selected, the dropdown should close when one option is selected.
Just to confirm: is this under your radar? I think at least we would need an issue to be created.
Yes, I will create a PR to add it upstream. What do you think about a new option to enable that behavior: |
The release ZIP for this PR is accessible via:
|
Script Dependencies ReportThe
This comment was automatically generated by the |
The release ZIP for this PR is accessible via:
|
Script Dependencies ReportThe
This comment was automatically generated by the |
The release ZIP for this PR is accessible via:
|
Script Dependencies ReportThe
This comment was automatically generated by the |
@Aljullu can you do another review 😅? In d9baa88 and 57d0146 I address issues when attributes have
|
I'm also thinking about using the fuzzy search here, for example, fuse.js. But it looks like an overkill for this block. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I will create a PR to add it upstream. What do you think about a new option to enable that behavior:
__experimentalCollapseOnMaxReached
? Or should we auto collapse and close the dropdown when the max length is reached? 🤔
I don't have a strong opinion. Ideally we would get some feedback from GB devs. I see you mentioned it on the issue you created, so that's good. Thanks! 👍
I address issues when attributes have _ in their slug.
Oh, good catch. Changes look good to me and it's testing as described.
I'm also thinking about using the fuzzy search here, for example, fuse.js. But it looks like an overkill for this block.
Yeah, I think for now we can keep it as-is. If in the future we get some reports that would like to improve/change this, we can then consider it.
…in (woocommerce#69) * Use the archive-product template to render product attributes pages (woocommerce#6776) * Bump mockery/mockery from 1.4.4 to 1.5.0 (woocommerce#6703) Bumps [mockery/mockery](https://github.com/mockery/mockery) from 1.4.4 to 1.5.0. - [Release notes](https://github.com/mockery/mockery/releases) - [Changelog](https://github.com/mockery/mockery/blob/master/CHANGELOG.md) - [Commits](mockery/mockery@1.4.4...1.5.0) --- updated-dependencies: - dependency-name: mockery/mockery dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Alba Rincón <albarin@users.noreply.github.com> * Update dependency @types/jest to v27.5.2 (woocommerce#6759) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Ensure addresses sync when loading the checkout shipping address block (woocommerce#6773) * Update pull_request_template.md * Add comment to prevent linting error on commented out code (woocommerce#6789) * Update pull_request_template.md * Update dependency @types/wordpress__blocks to v11.0.5 (woocommerce#6758) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Update babel monorepo to v7.18.9 (woocommerce#6719) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Refactor external dispatch actions from being called inside useSelect (woocommerce#6718) * refactor coupon functions outside of useSelect * fix test * Add new icon for mini cart block (woocommerce#6784) * Add new icon for mini cart block (inserter). See woocommerce#6617. * Adjust size of SVG The new SVG was rendering a little bit smaller than the original icon. Potentially because of the mask and the artboard size. This commit adjusts the size to render at the same size as the original version of the icon in the inserter. * add new action for customer updates (woocommerce#6792) * Fix: Replace DropdownSelector with FormTokenField from Gutenberg (woocommerce#6647) * Fix missing translations in inspector (woocommerce#6737) * Try registering the "cart taxes" inner block Registering server side. This example isn't working, but I'm pushing to share it and see what's wrong with this implementation. * Fix registering the cart taxes inner block issue * Update translation script loading * Remove unnecessary JS translation The translation should work fine by getting the title & description from the `block.json` file * Put back the initial code in the 'Cart Taxes' inner block We didn't provide the correct `block.json` file path server side, that's why the `metadata` wasn't correctly registered * Generate `block.json`files for inner blocks This is the first step on fixing the missing translations of `metadata` in `block.json` files * Set the folder name exactly the same as the inner block name We are doing this first test for the `Cart taxes` inner block. The `Block` & its containing folder need to have the same name for: - Consistency - We use the `Block` name to get the file Path * Update imports after folder renaming * Get block name directly from the JSON metadata Getting the block name from the JSON metadata is less error prone than extracting it from the file path. And no need to rename all our `inner-blocks` to get the correct `block.json` path * Revert folder naming change of `Cart taxes` inner block Since we are getting the `block` name directly from the `block.json` metadata instead of extracting it from the file path, there is no need to keep their names in sync anymore * Fix missing translations for the `Cart Subtotal` Block * Register only the client-side settings on the client When the block is registered on the server, you only need to register the client-side settings on the client using the same block’s name. See [docs](https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#javascript-client-side). * Add schema validation to `block.json` Development is improved by using a defined schema definition file. Supported editors can provide help like tooltips, autocomplete, and schema validation. * Use the same `editor_script` as the parent block This prevents WordPress from generating script tags to inexistant inner blocks JS files * Add C&C inner blocks in Cart.php & Checkout.php This is a refactoring to keep the block types controller file less overloaded * Fix all Cart inner blocks missing translations * Create the "AbstractInnerBlock" class The "Inner Blocks" will use their parent's script, so no need to create new scripts for each one of them And, our "Inner Blocks" should always be registered using the metadata file * Update the "Inner Blocks" PHP classes * Fix PHP lint erros & update function description * Fix missing translations bug for all Checkout Inner Blocks * Update src/BlockTypes/Checkout.php Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> * skip lazy loaded scripts Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> * fix proceed to checkout button (woocommerce#6804) * Remove compatibility notice from Mini Cart block (woocommerce#6803) * Empty commit for release pull request * Update 8.2.0 changelog * Add 8.2.0 testing steps * Fix typo in 8.2.0 testing steps * Ensure package names display correctly if only one item is in package (woocommerce#6815) * Check package length >= 1 to show package name * Check shipping rates length in order shipping packages slot * Fix TS error where boolean value could be undefined * Show items if there is more than one shipping rate * Ensure package names display correctly if only one item is in package (woocommerce#6815) * Check package length >= 1 to show package name * Check shipping rates length in order shipping packages slot * Fix TS error where boolean value could be undefined * Show items if there is more than one shipping rate * Update 8.2.0 testing zip * Add option to hide/show price in Mini Cart block (woocommerce#6796) * Add toggle control to sidebar in editor. Adds a visibility toggle in the Mini Cart block's sidebar editor settings for the block price. * Update name of hasVisiblePrice attrubite. Adjusts the name of the hasVisiblePrice attribute to hasHiddenPrice. This seems a bit easier to reason about, where we can set the default state of the visibility toggle to 'off'. * Add conditional price rendering to server side. Since this is a dynamic block, need to add the condidional attribute state to the server-side render callback. * Add price visibility setting to block frontend. We need to prevent pricec from rendering when hidden setting is active after the JS kicks in on the frontend (i.e., when the Mini Cart is interacted with by the user). * Fix logic error in frontend rendering conditional. * Add unit tests for both show/hide price states. * Bumping version strings to new version. * Remove empty element from changelog * Release: 8.2.0 (woocommerce#6806) * Empty commit for release pull request * Update 8.2.0 changelog * Add 8.2.0 testing steps * Fix typo in 8.2.0 testing steps * Ensure package names display correctly if only one item is in package (woocommerce#6815) * Check package length >= 1 to show package name * Check shipping rates length in order shipping packages slot * Fix TS error where boolean value could be undefined * Show items if there is more than one shipping rate * Update 8.2.0 testing zip * Bumping version strings to new version. * Remove empty element from changelog Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update version to 8.3.0-dev * Bump @wordpress/is-shallow-equal from 4.12.0 to 4.13.0 (woocommerce#6710) Bumps [@wordpress/is-shallow-equal](https://github.com/WordPress/gutenberg/tree/HEAD/packages/is-shallow-equal) from 4.12.0 to 4.13.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/trunk/packages/is-shallow-equal/CHANGELOG.md) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/is-shallow-equal@4.13.0/packages/is-shallow-equal) --- updated-dependencies: - dependency-name: "@wordpress/is-shallow-equal" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> * Bump AbleLincoln/push-to-sftp from 1.0 to 1.2 (woocommerce#6808) Bumps [AbleLincoln/push-to-sftp](https://github.com/AbleLincoln/push-to-sftp) from 1.0 to 1.2. - [Release notes](https://github.com/AbleLincoln/push-to-sftp/releases) - [Commits](AbleLincoln/push-to-sftp@v1.0...v1.2) --- updated-dependencies: - dependency-name: AbleLincoln/push-to-sftp dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> * Bump @wordpress/i18n from 4.12.0 to 4.14.0 (woocommerce#6817) Bumps [@wordpress/i18n](https://github.com/WordPress/gutenberg/tree/HEAD/packages/i18n) from 4.12.0 to 4.14.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/trunk/packages/i18n/CHANGELOG.md) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/i18n@4.14.0/packages/i18n) --- updated-dependencies: - dependency-name: "@wordpress/i18n" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> * Bump yoast/phpunit-polyfills from 1.0.2 to 1.0.3 (woocommerce#6704) Bumps [yoast/phpunit-polyfills](https://github.com/Yoast/PHPUnit-Polyfills) from 1.0.2 to 1.0.3. - [Release notes](https://github.com/Yoast/PHPUnit-Polyfills/releases) - [Changelog](https://github.com/Yoast/PHPUnit-Polyfills/blob/develop/CHANGELOG.md) - [Commits](Yoast/PHPUnit-Polyfills@1.0.2...1.0.3) --- updated-dependencies: - dependency-name: yoast/phpunit-polyfills dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump github/codeql-action from 1 to 2 (woocommerce#6700) Bumps [github/codeql-action](https://github.com/github/codeql-action) from 1 to 2. - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](github/codeql-action@v1...v2) --- updated-dependencies: - dependency-name: github/codeql-action dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> * Bump johnbillion/wp-hooks-generator from 0.7.0 to 0.9.0 (woocommerce#6705) Bumps [johnbillion/wp-hooks-generator](https://github.com/johnbillion/wp-hooks-generator) from 0.7.0 to 0.9.0. - [Release notes](https://github.com/johnbillion/wp-hooks-generator/releases) - [Commits](wp-hooks/generator@0.7.0...0.9.0) --- updated-dependencies: - dependency-name: johnbillion/wp-hooks-generator dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> * Bump @wordpress/wordcount from 3.12.0 to 3.13.0 (woocommerce#6711) Bumps [@wordpress/wordcount](https://github.com/WordPress/gutenberg/tree/HEAD/packages/wordcount) from 3.12.0 to 3.13.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/trunk/packages/wordcount/CHANGELOG.md) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/wordcount@3.13.0/packages/wordcount) --- updated-dependencies: - dependency-name: "@wordpress/wordcount" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @typescript-eslint/parser from 5.30.5 to 5.31.0 (woocommerce#6809) Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 5.30.5 to 5.31.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v5.31.0/packages/parser) --- updated-dependencies: - dependency-name: "@typescript-eslint/parser" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> * Empty commit for release pull request * Ensure onChange is set for radio buttons in SavedPaymentMethodOptions (woocommerce#6825) Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> * delete renovate bot (woocommerce#6824) * Bump @wordpress/api-fetch from 6.9.0 to 6.11.0 (woocommerce#6833) Bumps [@wordpress/api-fetch](https://github.com/WordPress/gutenberg/tree/HEAD/packages/api-fetch) from 6.9.0 to 6.11.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/trunk/packages/api-fetch/CHANGELOG.md) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/api-fetch@6.11.0/packages/api-fetch) --- updated-dependencies: - dependency-name: "@wordpress/api-fetch" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * E2E: Try improving product list loading state detection and fix Site Editor URL (woocommerce#6811) * e2e:try: detect loading state for product list * fix: always use site-editor.php * wait for price filter to be applied before checking the result * Update renovate configuration (woocommerce#6836) * delete renovate bot * update renovate configuration * try now * Bump mini-css-extract-plugin from 1.3.6 to 1.6.2 (woocommerce#6714) Bumps [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) from 1.3.6 to 1.6.2. - [Release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases) - [Changelog](https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md) - [Commits](webpack-contrib/mini-css-extract-plugin@v1.3.6...v1.6.2) --- updated-dependencies: - dependency-name: mini-css-extract-plugin dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> * Release: 8.2.1 (woocommerce#6826) * Empty commit for release pull request * Update 8.2.1 changelog * Ensure onChange is set for radio buttons in SavedPaymentMethodOptions (woocommerce#6825) Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> * Add 8.2.1 testing steps * Bumping version strings to new version. Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> * fix markdownlint violation (woocommerce#6853) * Add missing label to dependabot configuration (woocommerce#6848) * Fix: Compare action should update its original comment instead of a new comment (woocommerce#6736) * Fix: flaky tests related to setMaxPrice (woocommerce#6856) * Add font-weight option to Mini Cart block text (woocommerce#6760) * Add font-weight option to Mini Cart button text. Need to repeat steps for icon SVG and cart item count. * Add font-weight controls to mini-cart item count. * Add better error handling to PHP style output. Ensure style value is set for style item in the get_font_weight_class_and_style attributes array before rendering it to the output. * Revert font-weight option for quantity badge. Per conversation with @vivialice, it looks better for now to keep the font weight adjustment capabilities to just the price and leave the cart icon and count as-is. * Move $typography_styles variable into markup fn. To resolve merge conflicts and get everything in it's proper place, this commit will move the $typography_styles variable into the get_cart_price_markup() function from woocommerce#6796. * Fix: Attribute filter flaky test (woocommerce#6862) * Fix: Override the description to prevent infinite loop (woocommerce#6849) * Update billing address when shipping address gets change in Cart block (woocommerce#6823) * Add Style Attributes Hooks to blocks/hooks Directory. (woocommerce#6870) * Copy style-attributes file to desired directory. Add a copy of the style-attributes file in blocks/hooks to the desired base/hooks directory with the other hooks. * Remove relative imports in favor of global aliases Utilizes the custom global project aliases in place of using relative imports. Note: seeing some linting issues with the aliases. This seems to be the case elsewhere so it is likely not a blocker for this effort, however, it may be worth looking into as a follow-up. * Adjust all imports to use @woocommerce/base-hooks. Replace all instances of relative file paths to hooks/style-attributes to use the custom global alias. * Remove the hooks dir in `assets/js/blocks/`. Now that everything is using the `@woocommerce/base-hooks` custom global alias and we have the `style-attributes` hooks file in the base/hooks directory, we no longer need the `style-attributes` hooks file in the aforementioned `assets/js/blocks` directory. * Split style-attributes.ts out into separate files. Moved the four hooks in style-attributes.ts out into their own, separate hook file to be consistent with the rest of our custom hooks. Additionally, moved the helper function (parseStyle) out into a separate export in base/utils. * All Products block: Try hydrating * Enqueue script that adds <gutenberg-interactive-block> custom element * Fix nomenclature * Use BHE hydration for All Products Block * Fix phpcs issues * Add block deprecation * Add StoreNoticesProvider wrapper back to frontend * Update blockRegistry implementation: - The registry is now the instance of a BlockRegistry class. - The BlockRegistry class has a `whenDefined()` method which is used to await the registration of a block with a given name. * Revert "Update blockRegistry implementation:" This reverts commit 8edc7b2. Co-authored-by: Alba Rincón <albarin@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Niels Lange <info@nielslange.de> Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com> Co-authored-by: Daniel W. Robert <danielwrobert@users.noreply.github.com> Co-authored-by: Tung Du <dinhtungdu@gmail.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Luigi Teschio <gigitux@gmail.com> Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> Co-authored-by: Tarun Vijwani <tarun.vijwani@automattic.com> Co-authored-by: Bernie Reiter <ockham@raz.or.at> Co-authored-by: Michal Czaplinski <mmczaplinski@gmail.com>
Fixes #3762
This PR replaces our
DropdownSelector
component with theFormTokenField
from Gutenberg. The migration has some limitations:FormTokenField
works (see the screenshot).FormTokenField
doesn't fully support using components for display list items, which leads to this issue when the component is printed as the string.Thanks so much @ralucaStan for the suggestion to style
FormTokenField
block.Accessibility
prefers-reduced-motion
Other Checks
Screenshots
Testing
Automated Tests
User Facing Testing
Dropdown
.WooCommerce Visibility
Performance Impact
N/a
Changelog
N/a