Commit Graph

1610 Commits

Author SHA1 Message Date
Hsing-yu Flowers c2c639dee1 Sanitize store notices html (https://github.com/woocommerce/woocommerce-blocks/pull/7145)
Sanitizing the merchant store link in the error message added in WooPay when in some
cases the customer could run into an issue where we need to tell them an error occurred
and they have to go back to the merchant store and re-initialize WooPay to fix it.

Because previously we were only expecting strings, the text was not sanitized.
2022-09-23 20:48:28 +02:00
Lucio Giannotta d174051787 Refactor Product Query to use the latest Gutenberg APIs (https://github.com/woocommerce/woocommerce-blocks/pull/7169)
* Refactor Product Query to use the latest Gutenberg APIs

As we worked with Gutenberg folks in WordPress/gutenbergwoocommerce/woocommerce-blocks#43590,
WordPress/gutenbergwoocommerce/woocommerce-blocks#43632 and WordPress/gutenbergwoocommerce/woocommerce-blocks#44093 we have
created a standard API that could be used for our use-case. This
PR refactors our WIP experimental work to use that standardized API.
2022-09-23 15:07:44 +02:00
Niels Lange 690ccb5191 Remove experimental flag from Cross-Sells block (https://github.com/woocommerce/woocommerce-blocks/pull/7188)
* Remove experimental flag from Cross-Sells block

* Remove experimental flag from Cross-Sells block

* Remove experimental flag from woocommerce/cart-cross-sells-products-block
2022-09-22 12:28:55 +07:00
Alex Florisca 79b1d4a38a Revert "Add static class name for product-details (https://github.com/woocommerce/woocommerce-blocks/pull/6914)" (https://github.com/woocommerce/woocommerce-blocks/pull/7191)
This reverts commit d6d94ae622.
2022-09-21 15:20:00 +01:00
Niels Lange 3d55668983 Create Cross-Sells product list (https://github.com/woocommerce/woocommerce-blocks/pull/6645)
* Create Cross-Sells product list

* Show “Read more” button for out-of-stock cross-sells products

* Update assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/block.tsx

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Update assets/js/blocks/cart/cart-cross-sells-product-list/index.tsx

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Remove obsolete isLoading and placeholderRows

* Fix TS errors

* Rename crossSellsProduct to product

* Fix critical error

* Lock “Cart Cross-Sells products” inner block

* Update assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/block.json

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>

* Prevent moving of the Cross-Sells block

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
2022-09-21 13:04:15 +07:00
Paulo Arromba 8a5dd65bc1 fix: Markup is visible in checkout error notices (https://github.com/woocommerce/woocommerce-blocks/pull/6800)
* Enabled __unstableHTML hidden option for HTML rendering within notices.

* Fixed margin-bottom for HTML notice content

* Fixed margin-top for HTML notice content

* Attempt to fix a broken e2e test
2022-09-20 16:54:25 +01:00
Niels Lange 7bd48074fb Prevent Express Checkout block from being cut off (https://github.com/woocommerce/woocommerce-blocks/pull/7152)
* Prevent Express Checkout block from being cut off

* Prevent step numbers from being cut off in editor
2022-09-20 17:45:20 +07:00
Tarun Vijwani 4d8cc8d751 Fix: Inner blocks control position for Cart Block (https://github.com/woocommerce/woocommerce-blocks/pull/6973) 2022-09-16 11:32:46 +05:30
Albert Juhé Lluveras 87e1748811 Make chevron clickable in Filter by Product block input (https://github.com/woocommerce/woocommerce-blocks/pull/7139)
* Make chevron clickable in Filter by Product block

* Make sure the chevron is vertically centered
2022-09-15 12:39:34 +02:00
Albert Juhé Lluveras 8d03ad4f4f Remove unused CSS selectors from Filter blocks (https://github.com/woocommerce/woocommerce-blocks/pull/7150) 2022-09-14 09:47:50 +02:00
Albert Juhé Lluveras 16feccdd74 Fix invisible Reset filter button in some themes (https://github.com/woocommerce/woocommerce-blocks/pull/7111) 2022-09-13 09:32:11 +02:00
Albert Juhé Lluveras 798fdc2107 Fix pills in the Filter by Attribute block dropdown overlapping with the chevron (second attempt) (https://github.com/woocommerce/woocommerce-blocks/pull/7112) 2022-09-13 09:31:51 +02:00
Lucio Giannotta 5dd05d7ab2 Improve public-facing texts and labels (https://github.com/woocommerce/woocommerce-blocks/pull/7045)
We noticed that oftentimes our labels and text tend to be overly
technical or unclear. We decided to do a bulk pass to improve
the readability to non-technical users.
2022-09-12 10:39:26 +02:00
Niels Lange 2f52565c75 Correct broken *.md links (https://github.com/woocommerce/woocommerce-blocks/pull/7108) 2022-09-12 11:29:24 +07:00
Daniel W. Robert 252caccb82 Featured Items: Remove inline style defaults for color options (https://github.com/woocommerce/woocommerce-blocks/pull/7036)
* Remove inline style defaults for color options.

This replaces the inline style with an added editor-specific styling
with slightly more specificity - but not too much to where it overrides
the Site Editor.

* Remove additional styles from editor stylesheet.

These styles are meant to apply to both the frontend and the editor. The
ruleset was originally added to the editor stylesheet to add an
additional layer of specificity but it was decided that this is
unnecessary.
2022-09-09 13:15:19 -04:00
Daniel W. Robert 32bebd381e Update Active Filters "remove filter" icon to use Icon component (https://github.com/woocommerce/woocommerce-blocks/pull/7035)
* Update "remove filter" icon to use Icon component.

To be consistent with the button icon used on the Chips view, this
replaces the native svg element used in the List view with the same
Icon component from core.

* Add proper margin to active filters by price list.

There is currently no top margin when the active filters contain a price
filter in the list view. This is because the filters only contain a
range and do not render a child list.

This update will target that price filter item and add a top margin that
is consistent with the other active filters.
2022-09-09 11:06:42 -04:00
Alba Rincón cc0f9906d2 Add Apply button placeholders to filters and adjust title margins (https://github.com/woocommerce/woocommerce-blocks/pull/7077)
* Adjust filter titles margins

* Show the Apply button placeholder and adjust title margins

* Add placeholder for the Apply button on filter by price

* Add placeholder for the Apply button on filter by attr

* Update stock filter snapshot

* Move the apply button placeholder to inside the FilterSubmitButton component

* Fix the placeholder button height

* Fix apply button on editor

* Change loading class to be is-loading
2022-09-09 13:28:04 +02:00
Tom Cafferkey dd11b23bef Active Filters Loading Placeholders (https://github.com/woocommerce/woocommerce-blocks/pull/7083)
* Active Filters Loading Placeholders

* Use flexbox for active filters loading placeholders

* Clear all placeholder loading styles

* Ensure active filters which arent attribute filters render null when in a loading state

* Refactor loading placeholders and state setting

* Add useIsMounted to shared hooks and check productAttributes only when mounted

* Add componentHasMounted to useMemo deps

* Check URL for attribute filter hint

* Check URL for attribute filter hint

* Remove border-radius from placeholder for clear all button

* Fix filter loading when no filters are active on shop page
2022-09-09 11:59:29 +01:00
Albert Juhé Lluveras 380f270975 Make Active filters texts bigger (https://github.com/woocommerce/woocommerce-blocks/pull/7087) 2022-09-09 09:53:27 +02:00
Albert Juhé Lluveras 4b6a5bf997 Fix remove button alignment in Filter by Attribute block (https://github.com/woocommerce/woocommerce-blocks/pull/7088) 2022-09-08 15:38:20 +02:00
Alba Rincón 9f0d1cd86e Compare count with null to avoid rendering a 0 when count is 0 (https://github.com/woocommerce/woocommerce-blocks/pull/7073) 2022-09-08 10:41:11 +02:00
Alba Rincón a15ffff043 Update `filter by attribute` skeleton design (https://github.com/woocommerce/woocommerce-blocks/pull/6990)
* Update filter by attribute skeleton design

* Update filter by attribute skeleton design

* Start using the FilterTitlePlaceholder

* Fix title animation

* Show two placeholder lines on checkboxes

* Fix dropdown border

* Fix gap

* Fix border radius for dropdown

* Don't show placeholder when changing other filters

* Improve filter title margins
2022-09-06 15:17:11 +02:00
Tom Cafferkey cf9325fc07 Fix corrupt Classic Template placeholders for specific products. (https://github.com/woocommerce/woocommerce-blocks/pull/7033)
* If user has created a template for a specific product, find the closest matching template details

* Move Classic Template functions into Utils file and refactor function for specific template names

* Classic Template utils refactor and unit tests
2022-09-06 10:52:33 +01:00
Alba Rincón f141a75acc Update `filter by price` skeleton design (https://github.com/woocommerce/woocommerce-blocks/pull/6997)
* Update filter by price skeleton design

* Improve skeleton colors

* Update skeleton when no apply button

* Update skeleton with apply button

* Avoid showing a very wide placeholder when the filter title is very long

* Start using the FilterTitlePlaceholder component for the placeholder

* Add comment to isUpdating

* Remove unneeded styles

* Fix title animation
2022-09-02 15:52:52 +02:00
Alba Rincón 70cbc31332 Fix pills in the `Filter by Attribute` block dropdown overlapping with the chevron (https://github.com/woocommerce/woocommerce-blocks/pull/7039)
* Avoid chevron overlap

* Improve input width calculation
2022-09-02 12:57:58 +02:00
Luigi Teschio 3ea46e426a Add to the Product Image block the support for the Product Query block (https://github.com/woocommerce/woocommerce-blocks/pull/6911)
* Adds to the Product Image Block the support for the Product Query Block

Adds to the Product Image Block the support for the Product Query Block woocommerce/woocommerce-blocks#6911

* Add to the Product Image Block the support for the Product Query Block

* address feedback

* set grid view and font-size L as default
2022-09-01 15:13:19 +02:00
Daniel W. Robert 6b251cc222 Remove __experimentalDuotone from block.json. (https://github.com/woocommerce/woocommerce-blocks/pull/7000)
The __experimentalDuotone Supports property in the block.json files were
preventing the Global Styles from being applied in the Editor.

Removing them remedies the issue.

This also adds a Schema property to improve development in supported
editors. See
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file.
2022-08-31 13:03:21 -04:00
Tom Cafferkey 89cdf7897a Set default orderby to popularity (https://github.com/woocommerce/woocommerce-blocks/pull/7025) 2022-08-31 12:38:48 +01:00
Alba Rincón 3421857599 Fix stock filter placeholder (https://github.com/woocommerce/woocommerce-blocks/pull/7009)
* Set max-height to avoid showing a big placeholder on longer titles

* Avoid showing placeholder when no there are no products

* Extract the placeholder to a separate component

* Adjust width

* Adjust border radius

* Pass the title to adjust the placeholder width/height

* Rename component
2022-08-31 10:43:26 +02:00
Alba Rincón 1e488287ed Update `filter by stock` skeleton design (https://github.com/woocommerce/woocommerce-blocks/pull/6996)
* Update filter by stock skeleton design

* Show skeleton only when is loading, otherwise it will show the loading state also after clicking on an option
2022-08-30 09:32:30 +02:00
Alex Florisca d6d94ae622 Add static class name for product-details (https://github.com/woocommerce/woocommerce-blocks/pull/6914)
* Add a static class name for the product details item instead of the translatable string

* Update Jest snapshot

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
2022-08-29 11:46:33 +01:00
Alba Rincón aa214f4d28 Remove the price filter setting label style (https://github.com/woocommerce/woocommerce-blocks/pull/6994) 2022-08-29 10:41:25 +02:00
Seghir Nadir 42f3ffefc9 Turn current page into the default Cart/Checkout page (https://github.com/woocommerce/woocommerce-blocks/pull/6867)
* Add default page notice

* show notice all inner blocks

* support flow when page isnt saved

* switch from where we get the current post id

* update lock

* fix types

* update logic to support cart as well

* fix package.json

* update design and move away from wc.data

* restore notice

* handle older versions of WooCommerce

* fix package lock

* fix typo
2022-08-29 09:35:05 +01:00
Daniel W. Robert b2f98c2f51 Layout Updates to Active Filters Block (https://github.com/woocommerce/woocommerce-blocks/pull/6905)
* Reverse ordter of filter item name and close btn.

* Update layout & typography styles for block items

* Update chip ui view styles.

Additionally, add editor styles to have the editor match the rendered
frontend.

* Update additional remove button styles.

- Add hover state to remove button on chip layout.
- Update disabled styles to remove button in both layouts (mainly relevant
to the editor view).

* Adjust remove button colors.

Set hover states to shades of grey. Also set chip color and text to
match selected text color of the block.

* Update e2e test to account for new element order.

Since we're moving the remove button in the list view from the last
child node to the first child node, we need to adjust the expected order
of the active filter item text.

* Design and copy updates on the block settings

Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
2022-08-26 09:11:23 -04:00
Albert Juhé Lluveras 2c1dacdd93 Fix z-index issue in Filter by Attribute dropdowns (https://github.com/woocommerce/woocommerce-blocks/pull/6981)
* Fix z-index issue in Filter by Attribute dropdowns

* Remove unnecessary z-index property
2022-08-25 13:55:33 +02:00
Alba Rincón 2060f11474 `Filter by Attribute` block design updates (https://github.com/woocommerce/woocommerce-blocks/pull/6920)
* Add and style Reset and Apply buttons

* Style the dropdown option

* Fix class and label

* Fix checkbox margin in editor

* Fix alignment

* Fix the reset button

* Disable Apply button when no changes have been made to the filter to improve UX

* Reduce vertical spacing between list items

* Style chips

* Don't reload on reset if filters have not been applied

* Fix heading styles on the front end

* Add chevron down to filter by attribute dropdown ui component

* Force FormTokenField to remount on reset

* Fix dropdown z-index

* Reduce apply button margin

* Fix styles for single token selection

Co-authored-by: tjcafferkey <tjcafferkey@gmail.com>
2022-08-25 12:01:41 +02:00
Tung Du 6327094a49 Style the Filter by Price block based on the wrapper width (https://github.com/woocommerce/woocommerce-blocks/pull/6943) 2022-08-24 16:10:21 +07:00
Tomasz Tunik b295689571 Product search block as core/search variation (https://github.com/woocommerce/woocommerce-blocks/pull/6191)
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
2022-08-23 23:06:17 +07:00
Alba Rincón aae8c5d357 Update filter button styles (https://github.com/woocommerce/woocommerce-blocks/pull/6958)
* Update filter button styles

* Address feedback: use mixings

* Improve the editor selector for stock apply button

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Reduce vertical margin and input width

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2022-08-23 12:38:39 +02:00
Alba Rincón d8a1dfc456 Make the inlineInput default to false to avoid changing existing block behaviour (https://github.com/woocommerce/woocommerce-blocks/pull/6957) 2022-08-23 12:10:46 +02:00
Albert Juhé Lluveras a362a89524 When converting the Filter Products by Price widget into the Filter by Price block, don't use inline input (https://github.com/woocommerce/woocommerce-blocks/pull/6953) 2022-08-22 14:29:29 +02:00
Tom Cafferkey a07cc3c978 Update Filter by Stock block (https://github.com/woocommerce/woocommerce-blocks/pull/6883)
* Update Filter by Stock controls and UI to include custom checkbox and settings.

* Include and style Filter by Stock reset button

* Make checkbox accessible via keyboard

* Update snapshot tests for Filter Products by Stock component

* Update E2E tests with new label value

* Update label test for Apply Filters in E2E tests

* Specify checkbox type so styles are not overridden in the editor

* Update E2E test label for filter button

* Update label selector to search for containing text rather than exact match

* Escape quotation marks for label query in E2E shopper tests for Filter by Stock

* Correct typo on Filter by Stock controls

* Replace custom checkbox with CheckboxControl component from the checkout package.

* Remove opacity on product count for checkbox label so its the same color as the label.

* Update snapshot tests with new component usage for filter by stock

* Update block title from Filter Products by Stock to Filter by Stock

* Update reset button behaviour to clear selections immediately regardless of whether the Apply Filters button is active or not.

* Pass option value as ID to satisfy E2E tests

* Update snapshot tests for stock filter

* Reset checked state on reset for when they have filters checked but not applied.
2022-08-19 09:04:04 +01:00
Alba Rincón 8167f0afb4 `Filter by Attribute` block settings design update (https://github.com/woocommerce/woocommerce-blocks/pull/6912)
* Updata block title and description

* Update block settings to match designs

* Update block title in tests

* Update copy in test
2022-08-19 08:55:34 +02:00
Luigi Teschio ffbf5823d3 Product Query Block POC (Phase 1) (https://github.com/woocommerce/woocommerce-blocks/pull/6812)
* Move `EditorBlock` to general `type-defs`

`EditorBlock` was scoped under the `featured-items` directory at the time of its creation. It is, however, a useful type that should be shared repo-wide. For this reason, I am moving it into the `blocks` type-defs and updating all the references.

* Define types for the Product Query block

Also defines a more generic `WooCommerceBlockVariation` type which should be also useful in the future to implement a similar pattern.

* Add Product Query utils

Add two utility functions:

 1. `isWooQueryBlockVariation`: is used to check whether a given block is a variation of the core Query Loop block, and also one of the allowed variations within our repo. See: `QueryVariation` enum type.
2. `setCustomQueryAttribute`: is a shorthand to set an attribute within the variation query attribute.

* Refactor and cleanup the JS demo code

Specifically:

1. Creates a `constant.ts` file to store all shared constants. Currently, the default variation attributes.
2. Move the variations to their own directory. One file per variation.
3. Move the inspector controls into own file and create a conditional logic to allow showing only certain settings.

* Update webpack config

* Add ProductQuery class

* Fix `QueryVariation` enum

We had changed the Products on Sale variation slug to something else,
but we had forgotten to update the proper enum.

* Remove unused params from `update_query`

The filter we added to Gutenberg will pass the block and the page,
as we might need them in the future and we want to minimize the
amount of changes we'll have to do upstream.

However, we currently do not use those, so I removed
them from our own inner function.

Co-authored-by: Lucio Giannotta <lucio.giannotta@a8c.com>
2022-08-18 10:02:21 +02:00
Tung Du 401e7b5a70 Price Filter Block Design update (https://github.com/woocommerce/woocommerce-blocks/pull/6877)
* make toggle control full width

* add inlineInput attribute

* add inlineInput sidebar setting

* add inlineInput help text

* style the filter button

* style price input

* wip: reset button

* clicking on reset button will reset the price query

* support inline input fields

* price text styling update

* fix reset button font size

* add loading placeholder to all elements

* fix filter button style

* update range slider thumb and track style

* fix loading placeholder for non empty query

* move reset button into FilterSubmitButton component

* try: render placeholder serverside

* update filter button label

* Revert "try: render placeholder serverside"

This reverts commit 98f08efdb8048b8f78c7476b774d1128c1d31295.

* remove LoadingPlaceholder component

* remove Price: prefix from the current displayed price range

* update labels

* extract reset button as a dedicated component

* update price text section

* update reset button behavior

* avoid breaking filter submit button style for other filter blocks

* rename block to Filter by Price

* fix e2e test

* remove border support

* adjust padding for elments

* rename panel title

* Make the inline option enabled by default and fix frontend rendering

* Make the `Price Range Selector` uppercase

* Show `Reset` button only when a selection has been made

* Revert the `save` change to avoid the 'Block Recovery Prompt'

Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
2022-08-16 19:58:55 +02:00
Thomas Roberts de9b044eba Only show items if there are multiple packages in the cart (https://github.com/woocommerce/woocommerce-blocks/pull/6899) 2022-08-16 17:19:40 +01:00
Seghir Nadir c338a799b3 Add _blank to terms link (https://github.com/woocommerce/woocommerce-blocks/pull/6908) 2022-08-16 15:59:21 +01:00
Seghir Nadir 4bfb255f6b add side effect to package (https://github.com/woocommerce/woocommerce-blocks/pull/6904) 2022-08-16 16:21:26 +05:30
Albert Juhé Lluveras 03c5d9ccd1 Add global styles to Product Categories List block in WC core (https://github.com/woocommerce/woocommerce-blocks/pull/6906) 2022-08-16 09:42:38 +02:00
Thomas Roberts 2285d1d4e2 Include Cart and Checkout Blocks when included in WC Core (https://github.com/woocommerce/woocommerce-blocks/pull/6805)
* Remove all inbox notifications about cart and checkout blocks

* Remove feature flag check from CreateAccount class

* Remove feature plugin check to register PaymentsApi class

* Comment out is_feature_plugin_build function

We might need this later, so keeping it around seems useful.

* Remove feature plugin check when adding resource hints

* Import registerBlockType and use it over registerFeaturePLuginBlockType

* Ensure Cart and Checkout inner blocks register even if not feature plugin

* Comment out registerFeaturePluginBlockType

* Remove duplicate import

* Revert "Comment out registerFeaturePluginBlockType"

This reverts commit bec6ed899b68e26e836bde1c573d6066fb2bcc47.

* Align PHPDoc correctly

* Update feature flag doc to remove Cart and Checkout blocks + PaymentApi
2022-08-15 11:15:15 +05:30