* 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.
* Add 'on sale' filter and enhance settings management in product collection block
This commit introduces several changes to the product collection block.
- First, it adds a new 'on sale' filter that can be used to display only the products that are currently on sale.
- It also refactors the settings management in the product collection block to use the experimental ToolsPanel component from WordPress, which provides a more flexible and intuitive way to manage block settings.
- It moves the 'Columns' control into the ToolsPanel, along with the 'Order by' control.
- A new utility function `setQueryAttribute` is introduced to simplify setting nested query parameters.
- The structure of the `ProductCollectionAttributes` and `ProductCollectionQuery` types have been adjusted to accommodate the changes.
- Finally, it makes corresponding changes in the PHP part to handle the new 'on sale' query parameter.
This should enhance the flexibility and user-friendliness of the product collection block.
* Fix total shipping info when no shipping are available
* Fix a logical error for displaying shipping info
* Fix failing unit tests
* Run unit test for the Cart instead of the Checkout
The calculator is only available for the Cart Block, so it doesn't make
sense to run this test for the Checkout Block
* Fix no shipping methods and incomplete address conflict
When there are no shipping methods (except for local pickup), we would
like to inform the shopper that there are no shipping options available
even though the address is complete
The solution we found is to check the address on the Cart Block only
* Refactor code
* Check whether rate is collectible without using hardcoded id
* Correctly negate hasCollectibleRate result
* Add notice when shipping is selected but no methods are available yet (https://github.com/woocommerce/woocommerce-blocks/pull/9171)
* Create useShippingTotalWarning hook
* Show notices above checkout sidebar
* Call hook to show notice in Checkout block
* Remove unused imports
* Update hook name to useShowShippingTotalWarning
* Move hook to its own file
* Import shipping data internally (without alias)
* Remove unused imports
* Move import to correct place
* Return early to avoid if else
* Refactor useShowShippingTotalWarning
* Get shipping rates directly from the cart instead of the hook
* Show shipping cost when price information is available
* Check if the passed rates are considered selected
* Prevent errors when no rates are available
---------
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Tarun Vijwani <tarun.vijwani@automattic.com>
* Make Mini-Cart block work well with caching plugins
* Add tests
* Add back aria-label to Mini-Cart menu
* Fetch Mini-Cart data before page finishes loading
* Store and retrieve Mini-Cart values from localStorage for better performance
* Update styles as early as possible
* Reorder code
* Remove overrideTotals param from updateTotals() function
* Update tests
* Initialize local storage inside a function and add act to filter tests
* Replace void with undefined types in several funtions
* Fix 0 quantity badge appearing on page load
* Add unit test cases for Min and Max price for shipping methods
* Move Test for Min and Max rates to shipping-rates
- Move Test for Min and Max rates to shipping-rates.
- Use single shippingRates object throughout the test cases.
* Update assets/js/base/utils/test/shipping-rates.ts
Co-authored-by: Niels Lange <info@nielslange.de>
* Update assets/js/base/utils/test/shipping-rates.ts
Co-authored-by: Niels Lange <info@nielslange.de>
* Add helper function to generate shipping rates
* Add a test for empty shipping rates
* Remove redundant attribute values from generateRate function
---------
Co-authored-by: Niels Lange <info@nielslange.de>
* 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.
* 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
* 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.
* 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.
* 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
* 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.
* 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
* 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.
* 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>
* 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.
* 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
* 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
* 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
* Adapt the Add to Cart Button block to be registered via block.json
* Remove the legacy supports.ts file
* Ditch all registration methods from the ProductButton class as it is now registered via metadata (a block.json file)
* Update get_block_type_uses_context and register_block_type_assets
* Only validate postcode if its required
* Clear postcode validation error if postcode is not required
---------
Co-authored-by: Niels Lange <info@nielslange.de>
Implements the ProductSelector advanced filter within the “Products (Beta)” block.
The filter allows the merchant to narrow down the exact products to which all
subsequent filters will be applied, mirroring the functionality of the existing
“Hand-picked Products” plus all the other functionalities available
from the “Products (Beta)” block.
* Empty commit for release pull request
* Add 10.0.3 changelog
* Update versions to 10.0.3
* Fix image editor in Featured Product/Category blocks on WP 6.2 (https://github.com/woocommerce/woocommerce-blocks/pull/9142)
* Add 10.0.3 testing steps
* Empty commit for release pull request
* Check that the customized fallback template is archive-product before unsetting the source property (https://github.com/woocommerce/woocommerce-blocks/pull/9330)
* use 'enqueue_block_assets' is available (https://github.com/woocommerce/woocommerce-blocks/pull/9332)
* Remove esc_url() on self generated link to edit the Mini Cart template since it gets escaped in JS (https://github.com/woocommerce/woocommerce-blocks/pull/9348)
* Add changelog entries to readme.txt
* Update version number in several files
* Add testing notes for the release
* Add woocommerce/woocommerce-blocks#9332 to testing notes
* Add testing on frontend for woocommerce/woocommerce-blocks#9332
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
The plugin's readme.txt file had a URL to the official documentation but
there was no hyperlink - only text.
This improves the page by removing the text link and hyperlinking the
"official documentation" text itself.
* Add pattern for split hero product banner.
This adds a new pattern for a hero product banner with a 50/50 split,
heading and CTA on left and product image on right.
Uses the Media + Text block.
* Update image to use Unsplash placeholder.
* Remove WooCommerce prefix in pattern title.
* Remove unneeded wrapper group block.
* Serve placeholder image from plugin directory.
* Preserve email when rendering shipping address form for the first time
* Ensure billing email does not reset when changing form values
* Add test to ensure email does not get overwritten
* Ensure the product title is correct when used outside of the scope of the single product template.
* Update docblock with the details about the temporary workaround.
* Move notice to top and only show on cart page
* Missing setting on cart page prevents notice display
* Allow null in the select-shipping-rate endpoint to select all packages
* Only show the warning if different packages are selected
* Check if selected rates is an object before mapping it
---------
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
* Remove min-height and padding for WP Button elements
* Remove commented out code
* Add min-height style back in for .woocommerce-block-theme-has-button-styles themes
* Fixed store api documentation for min_price and max_price
* Update products.md
* Update products.md
* Update src/StoreApi/docs/products.md
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
---------
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
* Using nested selector to style Product elements in Products Block
This commit simplifies the INNER_BLOCKS_TEMPLATE array in the product-query constants.ts file by removing the style properties from the individual elements. Instead, the default styles are now managed in the style.scss file, providing a more consistent and centralized approach to styling.
In the style.scss file, a new section for default styling has been added to handle product elements inside the Products Block, adhering to the Gutenberg styling hierarchy. This ensures the lowest precedence in the hierarchy, allowing for easier overrides when needed.
* Decrease specificity of styles for product elements in Products Block
The commit changes the default styles for product elements inside the 'Products Block'. It changes the way the margin-bottom and margin-top properties are set by using the :where() selector instead of using the .products-block-post-template class selector. This is done to decrease the specificity of the CSS selector, ensuring that the styles have the lowest precedence in the hierarchy. It also removes the display: inline-block property from the a selector, and moves the styles to the .editor-styles-wrapper class selector.
* Decrease specificity of CSS selectors
In these changes, the product elements inside the Products Block have been restyled. The specificity of the CSS selector has been decreased using the :where() selector, to ensure that these styles have the lowest precedence in the hierarchy.
In constants.ts, a new class name, products-block-post-template, has been added to the inner block template for the post. This class is used to add default styles for inner blocks.
In style.scss, the CSS selector for the inner blocks has been updated to include the new class name. The :where() selector has also been used to ensure that these styles have the lowest precedence in the hierarchy.
* Update default margins and remove redundant entries
This commit updates the default margin values for the Product Title in the Products block, moving them from the style.scss file to the constants.ts file. It also removes unnecessary empty arrays in the INNER_BLOCKS_TEMPLATE and background-color property from the style.scss file.
* Add align support to single product block
* Fix block alignment that was not being set on the frontend
* Remove classname prop from the Single Product Edit component
* Add new `Header Centered Search` pattern
* Add margin support to the customer account block
* Add margin to the customer account to separate it from the search bar
* Update margin
* Add with, fix margins
* Remove unnecessary separator
* Updates after review
* Remove ref
* Remove separator
* Bring back separator and use product search
* Remove html block and fix search border
* Add new `Footer with 3 menus` menu
* Stack menus on mobile, remove refs
* Change the site title to a `p` tag
* Align menus to the top and add paddings
* Make the `powered by` string translatable and add padding
* Improve search
* Add late escaping to call in MiniCart.
* Add escaping to call in AssetsController.
* Add escaping to calls in StoreAPI pagination utils.
* Add ignore line to file require - OK.
* Minor update to grammar in code comment.
* Mini Cart Contents block: set minimum width
* Mini Cart Contents block: allow changing the width only in the feature plugin
* Allow resetting the Mini Cart Contents width to the default
* Update assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
---------
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
Luigi Teschio
Manish Menaria
Saad Tarhi
Roy Ho
Daniel W. Robert
Albert Juhé Lluveras
Mike Jolley
Hritik Chaudhary
Patricia Hillebrandt
Thomas Roberts
Seghir Nadir
Tarun Vijwani
Alexandre Lara
Alba Rincón
Danilo Parra Jr
Dennis Jonda
Niels Lange
Karol Manijak
Lucio Giannotta
dependabot[bot]
github-actions[bot]
Tom Cafferkey
Andres
Paulo Arromba