Commit Graph

5189 Commits

Author SHA1 Message Date
Alexandre Lara 0847c20f79 Remove the fill color of the Product Details icon and move it to the icons library (https://github.com/woocommerce/woocommerce-blocks/pull/9503) 2023-05-19 12:09:13 -03:00
Albert Juhé Lluveras b0af5ac12e Update Mini-Cart block logic to use isSiteEditorPage util (https://github.com/woocommerce/woocommerce-blocks/pull/9501)
* Revert "Mini-Cart: prevent 'Mini-Cart in cart and checkout pages' toggle from showing up in the post/page editor (https://github.com/woocommerce/woocommerce-blocks/pull/9442)"

This reverts commit 0bfc1b341e.

* Update Mini-Cart block logic to use isSiteEditorPage util
2023-05-18 15:53:01 +02:00
Patricia Hillebrandt 61fbf572cb Single Product Block > Only reset the post data if `setup_postdata` was invoked. (https://github.com/woocommerce/woocommerce-blocks/pull/9474)
* Only call wp_reset_postdata() if the global post variable was changed.

* Make global_post_variable_changed static.

* rely on the output of setup_postdata for verifying if the global variable was successfully changed.

* ditch the static var and defaulting to false instead.

* Rely on static as the post reset only happens when the loop of inner blocks ends and not right away.

* Update the  variable when the postdata is reset.
2023-05-18 15:35:46 +02:00
Luigi Teschio 0bf8048bd1 Fix compatibility layer when no products are displayed (https://github.com/woocommerce/woocommerce-blocks/pull/9464)
* POC

* add compatibility with the product recommendations extension

* improve readibility key

* improve readibility code

* improve readibility

* fix compatibility layer when no products are displayed

* remove duplicate code
2023-05-18 14:19:46 +02:00
Alexandre Lara bad4c30e36 Add to Cart with Options: Fix styles that are not being applied correctly (https://github.com/woocommerce/woocommerce-blocks/pull/9472)
* Add missing WooCommerce styles to Add to Cart with Options block

* Fix input style for Add to Cart with Options block

* Add comment about the input-text css class that was added to the Add To Cart Form
2023-05-18 08:02:51 -03:00
Manish Menaria 57d4ac529e Product Collection: Add 'Order By' Control to Product Collection Inspector (https://github.com/woocommerce/woocommerce-blocks/pull/9480)
* Add columns control to product collection block editor settings

- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.

* Refactor: Simplify Fallback Return in ColumnsControl Component

This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.

* Feature: Add 'Order By' Control to Product Collection Inspector

This commit adds a new 'Order By' control to the product collection inspector. The control allows users to specify the order of products in a collection by various attributes such as title and date. To support this, a new component 'OrderByControl' has been created and included in the product collection inspector. Additionally, the types for 'order' and 'orderBy' attributes have been updated and exported for reuse.

* Add more options to OrderBy type

* Add orderby handling on frontend & editor

The main changes include:
1. Added a new property 'isProductCollectionBlock' in the block.json to denote if a block is a product collection block.
2. In the ProductCollection PHP class, a new initialization function has been defined to hook into the WordPress lifecycle, register the block, and update the query based on this block.
3. Added methods to manage query parameters for both frontend rendering and the Editor.
4. Expanded allowed 'collection_params' for the REST API to include custom 'orderby' values.
5. Defined a function to build the query based on block attributes, filters, and global WP_Query.
6. Created utility functions to handle complex query operations such as merging queries, handling custom sort values, and merging arrays recursively.

These improvements allow for more flexible and robust handling of product collections in both the front-end display and the WordPress editor. It also extends support for custom 'orderby' values in the REST API, which allows for more advanced sorting options in product collections.

* fix: handle undefined index for isProductCollectionBlock

This commit addresses a potential issue where the 'isProductCollectionBlock' index might not be defined in certain situations within the 'build_query' method of the ProductCollection class.

Previously, we directly accessed 'isProductCollectionBlock' from the 'query' context of the block. Now, we use the null coalescing operator (??) to ensure that we assign a default value of false if 'isProductCollectionBlock' is not set.

This change provides a safer way to handle the scenario when the 'isProductCollectionBlock' is not defined in the block context and helps prevent undefined index warnings.
2023-05-18 10:54:08 +00:00
Mike Jolley 715e63fbfd Revert changes in woocommerce/woocommerce-blocks#9332 and instead enqueue assets in correct place depending on admin vs frontend (https://github.com/woocommerce/woocommerce-blocks/pull/9495) 2023-05-18 10:46:17 +01:00
Luigi Teschio 86bb06a9a8 Product Archive Template: Fix compatibility Layer with Product Recommendations extension (https://github.com/woocommerce/woocommerce-blocks/pull/9452)
* POC

* add compatibility with the product recommendations extension

* improve readibility key

* improve readibility code

* improve readibility

* remove duplicate logic

* improve code readability
2023-05-18 11:41:44 +02:00
Albert Juhé Lluveras 5d6397b7b5 Prevent QuantitySelector stealing focus on page load (https://github.com/woocommerce/woocommerce-blocks/pull/9487) 2023-05-18 09:17:29 +02:00
Tarun Vijwani 21a356c58c Allow Shipping method prices to inherit global styles text color (https://github.com/woocommerce/woocommerce-blocks/pull/9456)
- Remove the hardcoded color for Shipping method prices
2023-05-17 21:52:20 +04:00
Alexandre Lara 2ef37db063 Add useIsDescendentOfSingleProductBlock hook to product rating block (https://github.com/woocommerce/woocommerce-blocks/pull/9489) 2023-05-17 10:58:12 -03:00
Luigi Teschio 689b5dd22a Fix undo button (https://github.com/woocommerce/woocommerce-blocks/pull/9478)
* fix undo button

* fix label
2023-05-17 13:25:02 +00:00
Mike Jolley bb1f578002 Store API: Fix payment method validation (fixes COD) (https://github.com/woocommerce/woocommerce-blocks/pull/9375)
* Widen enum for validation before cart is loaded

* Improve error message on checkout
2023-05-17 11:17:24 +01:00
Luigi Teschio 1b71b06b33 Product Search Results Template: fix compatibility layer when the Product Catalog is not blockified (https://github.com/woocommerce/woocommerce-blocks/pull/9492) 2023-05-17 10:10:58 +00:00
Alexandre Lara f22036af89 Fix Product Rating Block not showing when manually inserted to Single Product block (https://github.com/woocommerce/woocommerce-blocks/pull/9413) 2023-05-16 15:28:11 -03:00
Alexandre Lara 90573156fe Fix Product SKU not being displayed on frontend when outside Single Product template (https://github.com/woocommerce/woocommerce-blocks/pull/9446) 2023-05-16 15:25:34 -03:00
Luigi Teschio f8d46570ae Add isSiteEditorPage util (https://github.com/woocommerce/woocommerce-blocks/pull/9468)
* Add isSiteEditorPage util

* fix logic
2023-05-16 13:59:49 +02:00
Albert Juhé Lluveras 4c8baca475 Fix Filter by Price block making a 404 request in the frontend (https://github.com/woocommerce/woocommerce-blocks/pull/9481) 2023-05-16 12:05:24 +02:00
Luigi Teschio 150cde7d56 render Product Details block when it used along the Post Content block (https://github.com/woocommerce/woocommerce-blocks/pull/9479) 2023-05-16 11:31:13 +02:00
Manish Menaria 14f87be044 Product Collection: Add columns control to product collection block editor settings (https://github.com/woocommerce/woocommerce-blocks/pull/9466)
* Add columns control to product collection block editor settings

- `InspectorControls` from './inspector-controls' is now imported in `edit.tsx` and used in the returned JSX of `Edit` function.
- A new file `columns-control.tsx` is added under 'product-collection' block's 'inspector-controls' directory which exports a `ColumnsControl` component. This component uses `RangeControl` from '@wordpress/components' to control the number of columns in the product collection display layout when the layout type is 'flex'.
- The types file (`types.ts`) for 'product-collection' block is updated. The `Attributes` interface is renamed to `ProductCollectionAttributes` and the `ProductCollectionContext` interface is removed. The `ProductCollectionAttributes` now includes 'queryContext', 'templateSlug', and 'displayLayout' properties.

* Refactor: Simplify Fallback Return in ColumnsControl Component

This commit simplifies the fallback return value of the ColumnsControl component. Instead of returning an empty fragment (<> </>), it now returns null when the condition isn't met. This change improves readability and aligns with best practices for conditional rendering in React.
2023-05-16 09:23:22 +00:00
Alba Rincón a24bf73c83 [Patterns] Improvements on `Product Collections: Featured Collection` (https://github.com/woocommerce/woocommerce-blocks/pull/9450)
* Hardcore text color

* Fix image margins
2023-05-16 11:06:04 +02:00
Albert Juhé Lluveras 3b28b74777 Mini Cart: stop using Modal component (https://github.com/woocommerce/woocommerce-blocks/pull/9345)
* Remove unused styles

* Replace usage of Modal component with custom Drawer

* Update MiniCart.php class structure

* Update tests

* Prevent focus styles to appear unnecessarily when opening the Mini Cart drawer

* Work-around issue with disabled buttons causing lose of focus inside the Mini-Cart drawer

* Revert "Work-around issue with disabled buttons causing lose of focus inside the Mini-Cart drawer"

This reverts commit 4360f77384ad1f1d90a3ba8a0385ad79da2449f2.

* QuantitySelector: focus text input field after decrease or increase button become disabled

* Move focus to the input field also when the body has focus, that fixes the issue in Chrome

* Add explanatory comment
2023-05-16 10:41:26 +02:00
Patricia Hillebrandt 0bad9c81c9 Product Gallery Block > Remove global variable overwrite and keep support for the Single Product Block. (https://github.com/woocommerce/woocommerce-blocks/pull/9475)
* Remove call to the  global variable and add support for the gallery block to continue to work within the Single Product template without any problems.

* Make essential/required changes to guarantee the Product Gallery block works as expected without the relying on the global product.
2023-05-16 10:36:33 +02:00
Patricia Hillebrandt d26936bad7 Add to Cart with Options Block > Remove global variable overwrite. (https://github.com/woocommerce/woocommerce-blocks/pull/9457)
* Remove global variable overwrite from Add to Cart Form block.

* Rename single_product to product.
2023-05-16 10:18:36 +02:00
Mike Jolley 6e3b1ac7fb Styling fixes for form step headings (https://github.com/woocommerce/woocommerce-blocks/pull/9437)
Co-authored-by: Niels Lange <info@nielslange.de>
2023-05-15 12:28:24 +01:00
Tarun Vijwani afa5406746 Fix radio control overlap when font-size is small (https://github.com/woocommerce/woocommerce-blocks/pull/9436)
Co-authored-by: Niels Lange <info@nielslange.de>
2023-05-15 14:46:42 +04:00
Manish Menaria 0e6141f5ed Foundation of New Product Collection Block (https://github.com/woocommerce/woocommerce-blocks/pull/9352)
* Add Products Collection block scaffolding

This commit adds the initial scaffolding for the new Products Collection block. It includes the creation of new files (block.json, edit.tsx, index.tsx and ProductsCollection.php) and additions to existing files (webpack-entries.js and BlockTypesController.php). The block is marked as experimental and currently displays a static "Product collection" text in both the editor and the frontend.

* Add Product Template block and integrate with Products Collection block

This commit introduces the new Product Template block and integrates it with the existing Products Collection block. The changes include:
- Creation of the Product Template block, including its block.json, edit.tsx, icon.tsx, index.tsx, and save.tsx files.
- Modification of the Products Collection block, adding an icon.tsx file and updating its edit.tsx and index.tsx files.
- Updates to the webpack-entries.js file to include the new Product Template block.
- Addition of the ProductTemplate class in the src/BlockTypes directory.
- Inclusion of the ProductTemplate class in the src/BlockTypesController.php file.

* Enhance product-template block with context and styling

This commit adds various enhancements to the product-template block. It includes:

- Introduce `usesContext` and `supports` properties to the block.json file
- Update the edit.tsx file to use BlockContextProvider and add query logic
- Add an editor.scss file for styling the product-template block in the editor
- Extend the products-collection block.json file with new properties
- Modify the products-collection edit.tsx file to include instanceId and useEffect

These changes improve the product-template block by providing better context handling and styling options.

* Add 'woocommerce/product-template' to supported inner blocks and improve product-template editing

This commit adds 'woocommerce/product-template' as a supported inner block for various product elements, including button, image, rating, sale-badge, SKU, and stock-indicator. It also improves the editing experience for the product-template block by memoizing the block previews and rendering them more efficiently. This should lead to a smoother editing experience and better performance in the block editor.

* Add product title and summary variations for Products Collection block

- Add default spacing between product elements in `style.scss`
- Register product title and summary element variations in `products-collection` block
- Create utility for registering element variations
- Extend core elements with WooCommerce namespace

* Set inherit to false by default and other improvements

This commit introduces several changes to the ProductsCollection block:
1. Set the "inherit" property to false in block.json, disabling inheritance by default.
2. Remove the default styles for inner blocks in the edit.tsx file.
3. Add a save function in the index.tsx file, and create a save.tsx file to handle saving the block.
4. Update the ProductTemplate.php file to properly render the block content based on the changes.
5. Remove the render function from the ProductsCollection.php file, as it is no longer necessary.

These changes improve the functionality and flexibility of the ProductsCollection block, allowing for better customization and control over the block's appearance and behavior.

* Fix pagination issue

* Minor code quality improvments

* Register product blocks only in experimental builds

- Wrap registerBlockType calls in product-template and products-collection with isExperimentalBuild check to enable block registration only in experimental builds.
- Update the default value for the perPage property in products-collection/block.json from null to 9, setting a default display of 9 items per page.

* Add experimental flag to PHP file

* Update documentation for feature flags

- Add Products Collection and Product Template blocks to the list of experimental flags in the feature-flags-and-experimental-interfaces.md file.
- Include references to PHP and webpack flags for both blocks.

* Change default order and orderBy values in block.json

- Update the default 'order' value from 'desc' to 'asc'.
- Update the default 'orderBy' value from 'date' to 'title'.

* Refactor experimental block registration and remove unused file

- Replace `isExperimentalBuild()` with `registerExperimentalBlockType()` in product-template/index.tsx.
- Remove unused file types.ts in product-template directory.
- Add `get_block_type_script()` function to ProductTemplate.php and ProductsCollection.php to return null.

* Update variation names in product summary and product title elements

Updated variation names for product summary and product title elements to match the new products-collection namespace. The previous variation names used the product-query namespace which will be deprecated. This change ensures that the correct variation names are used for these elements in the products-collection block.

* Rename 'Products Collection' to 'Product Collection'

- Renamed all instances of "products-collection" to "product-collection" across multiple files.
- Adjusted related types and method calls to match the new naming convention.
- Updated documentation and feature flags to reflect the name change.
- Made necessary changes in `BlockTypesController.php` and `bin/webpack-entries.js`.

* Hide product-template block from inserter

- Added "woocommerce/product-collection" to the list of parent blocks in `product-template/block.json`.
- Added `"inserter": false` to the "supports" section to disable the option of inserting this block through the editor inserter component.

* Fix Eslint error
2023-05-15 08:51:49 +00:00
Danilo Parra Jr 2a4b78c150 Update the logic of disabling some blocks in the widget areas and post editor (https://github.com/woocommerce/woocommerce-blocks/pull/9462)
* refactor: disable some blocks in widget areas and post editor

* refactor: add more checks on the disabling blocks logic
2023-05-15 08:36:06 +02:00
Daniel W. Robert 8621755f69 Update `Hero Product – Split` Pattern Color Settings (https://github.com/woocommerce/woocommerce-blocks/pull/9433)
* Update color settings to abide by designs.

* Update pattern heading to use inline style.

This ensures the heading color will be white by default and not take on
the heading color from the active theme.

* Translate and escape rendered text in pattern.
2023-05-12 11:00:16 -04:00
Roy Ho cd5490be6b Update/cleanup patterns (https://github.com/woocommerce/woocommerce-blocks/pull/9447)
* Update category cover image pattern

* Update featured category focus pattern

* Update featured category triple pattern

* Update product details pattern

* Update product hero pattern

* Update shop by price pattern

* Update testimonials single pattern
2023-05-12 06:05:36 -07:00
Mike Jolley 43eaed7620 Experiment: Replace style hooks coming from `@wordpress/block-editor` (https://github.com/woocommerce/woocommerce-blocks/pull/9251)
* Replace all style hooks with useStyleProps hook

* Remove border/color/spacing hooks

* Style Props Hook

* Make use of `change-case` package

* Tidy up block wrappers

* Attribute filter does not use frontend.ts nor styles within block

* Remove frontend from filter blocks and unused styleprops usage

* Tidy up variable names so its clearer attributes are not required specifically from blocks

* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx

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

* Update assets/js/blocks/attribute-filter/block-wrapper.tsx

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

* Update assets/js/blocks/active-filters/block-wrapper.tsx

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

* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/rating-filter/block-wrapper.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/stock-filter/block-wrapper.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/price-filter/block-wrapper.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx

Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>

* Simplify styleprop

* Styleprops simplify

* Fix withFeaturedItem styles

* Like the original hook, flatten props and combine with parsed styles

---------

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
2023-05-12 13:42:16 +01:00
Alba Rincón 30dc6ca5a5 Add new `Product collections: featured collections` pattern (https://github.com/woocommerce/woocommerce-blocks/pull/9388)
* Add new `Product collections: featured collections` pattern

* Update image paths

* Add buttons

* Add colors to buttons

* Change branded image
2023-05-12 12:26:06 +02:00
Patricia Hillebrandt 2a7ac1c92b Add Product Details: product listing pattern (https://github.com/woocommerce/woocommerce-blocks/pull/9383)
* Add the skeleton for the Product Details: product listing pattern

* Update the wp-block-woocommerce-single-product class.

* Update the product details pattern for usage with core blocks.

* Update margins for the product reviews.

* Update the styles and spacing for ratings.

* Additional changes to the editor preview for product ratings.

* update spacing between ratings and text.

* Update content padding.

* Adjust the pricing

* Make adjustments to the button

* Update styles.

* Update styles for the star ratings.

* Extra fine-tunning for reviews and font size

* Add the product details image.
2023-05-12 09:17:45 +00:00
Mike Jolley 7e06584c14 Update settings text and styling (https://github.com/woocommerce/woocommerce-blocks/pull/9440) 2023-05-12 10:11:08 +01:00
Alba Rincón 6550c830db Patterns small improvements (https://github.com/woocommerce/woocommerce-blocks/pull/9403)
* Center the menu

* Use product image block

* Change search button background to white
2023-05-12 10:41:58 +02:00
Albert Juhé Lluveras 0bfc1b341e Mini-Cart: prevent 'Mini-Cart in cart and checkout pages' toggle from showing up in the post/page editor (https://github.com/woocommerce/woocommerce-blocks/pull/9442) 2023-05-12 10:26:03 +02:00
Dennis Jonda 1add6a146e Fix alignment issue with 'Add Coupon Code' button in WooCommerce Blocks checkout page (https://github.com/woocommerce/woocommerce-blocks/pull/9392)
Co-authored-by: Niels Lange <info@nielslange.de>
2023-05-12 12:28:08 +07:00
Niels Lange 301c6891b5 Replace ‘actions-ecosystem/action-remove-labels’ with ‘mondeja/remove-labels-gh-action’ (https://github.com/woocommerce/woocommerce-blocks/pull/9173)
* Replace ‘actions-ecosystem/action-remove-labels’ with ‘mondeja/remove-labels-gh-action’

* Adjust workflow

* Add test file for woocommerce/woocommerce-blocks#9173 (https://github.com/woocommerce/woocommerce-blocks/pull/9174)

* Remove the file created for testing purpose (https://github.com/woocommerce/woocommerce-blocks/pull/9177)

---------

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
2023-05-12 11:54:04 +07:00
Albert Juhé Lluveras d236af2a8c Only show the Mini Cart count badge when there are items in the cart (https://github.com/woocommerce/woocommerce-blocks/pull/9259)
* Only show the Mini Cart count badge when there are items in the cart

* Update badge to new design

* Add tests

* Make sure colors don't break existing themes

* Update Mini Cart e2e test
2023-05-11 17:23:36 +02:00
Alba Rincón 545cc43123 Add new `Product listing with gallery` pattern (https://github.com/woocommerce/woocommerce-blocks/pull/9347)
* Add new `Product listing with gallery` pattern

* Replace single product block pattern

* Remove ids

* Fix title and images

* Rebuild the image gallery to make it work on diff widths

* Fix image src

* Fix gallery image and align description
2023-05-11 16:45:49 +02:00
Roy Ho 47f9777f4b Add banner pattern (https://github.com/woocommerce/woocommerce-blocks/pull/9434)
* Add banner pattern

* Hardcode the button styling
2023-05-11 07:39:36 -07:00
Albert Juhé Lluveras 2b6eef516b Update Mini-Cart block editor sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/9420)
* Update Mini-Cart block editor sidebar

* Rename Mini Cart block to Mini-Cart

* Update Mini-Cart block editor sidebar (II)

* Update two instances of mini-cart to uppercase
2023-05-11 14:52:03 +02:00
Karol Manijak a9d840ec69 Bump version in several files to 10.3.0-dev 2023-05-11 14:12:41 +02:00
Karol Manijak 202799007c Add testing steps of 10.2.0 2023-05-11 14:10:51 +02:00
Karol Manijak af725d558e Update minimal WordPress version in phpcs.xml to the 6.1 2023-05-11 14:09:08 +02:00
Karol Manijak c3e4321cb6 Update minimal WordPress version to the latest 6.2 2023-05-11 14:08:30 +02:00
Karol Manijak 379bb41e9b Add changelog for 10.2.0 2023-05-11 14:08:01 +02:00
Karol Manijak ecfd94ce2b Change the button text in the pattern to make it matching the content (https://github.com/woocommerce/woocommerce-blocks/pull/9435)
* Change the button text in the pattern to make it matching the content

* Fix the image size so it's original ratio is preserved
2023-05-11 11:02:45 +02:00
Roy Ho a84cfd93d6 Update text (https://github.com/woocommerce/woocommerce-blocks/pull/9423)
* Update text

* Make shop now button black with white text to match design

* Update pattern image and text
2023-05-11 08:17:42 +02:00
Roy Ho 06cd02b88a Update pattern with images and alignment (https://github.com/woocommerce/woocommerce-blocks/pull/9414) 2023-05-10 05:44:58 -07:00