* 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.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* Add product attributes filter control to ProductCollection block
- This commit introduces the ability to filter products by attributes in ProductCollection block.
- A new `woocommerceAttributes` key was added to the `block.json` file and the `ProductCollectionQuery` type. Also, a new file `attributes-control.tsx` was created, providing the UI component for the attribute filter control in the editor.
- In addition, updates were made to the `ProductCollection.php` file in the backend to support filtering products by attributes, and the tax query was updated to include attribute queries.
- Lastly, the `ProductCollectionInspectorControls` was updated to include the `AttributesControl` component, thus enabling users to filter products by attributes in the block editor."`
* remove unused import of getDefaultStockStatuses
* Delete a duplicate file
* Remove console log
* Add taxonomies control to Product collection block
The primary changes include:
1. `taxQuery` field in the `ProductCollectionAttributes` was changed from a string to an object in `assets/js/blocks/product-collection/types.ts` and `assets/js/blocks/product-collection/constants.ts`, accommodating the ability to query products by taxonomy terms.
2. `assets/js/blocks/product-collection/inspector-controls/utils.tsx` was moved to `assets/js/blocks/product-collection/utils.tsx` to make it available for broader use.
3. New component `TaxonomyControls` was created in `assets/js/blocks/product-collection/inspector-controls/taxonomy-controls.tsx`, which is included in `assets/js/blocks/product-collection/inspector-controls/index.tsx`. This new control allows users to filter products in the block by their taxonomy terms.
4. Updated the block's inspector controls in `assets/js/blocks/product-collection/inspector-controls/index.tsx` to use the new `TaxonomyControls` component.
Please note that the TaxonomyControls component uses experimental features of WordPress's FormTokenField. As a result, a comment has been added to disable eslint warnings regarding the use of experimental APIs.
* Address PR feedback & other improvements
1. Added `woocommerceAttributes` to `DEFAULT_FILTERS` in the `product-collection/constants.ts` file to fix `reset all` button issue.
2. Refactored `attributes-control.tsx` to make it more maintainable:
- The constant `EDIT_ATTRIBUTES_URL` now uses `ADMIN_URL` from `@woocommerce/settings` for a more dynamic URL generation.
- The interface `Props` has been renamed to `AttributesControlProps` for more explicit naming.
- Removed the usage of `useState` and `useEffect` for selected attributes. Instead, `selectedAttributes` is now directly derived from `woocommerceAttributes`.
- The CSS class `woocommerce-product-query-panel__external-link` was renamed to `wc-product-collection-panel__external-link`
3. Deleted the `product-collection/inspector-controls/constants.ts` file which was no longer necessary due to changes in product collection implementation.
These changes contribute to codebase quality, improving readability and maintainability.
* Address PR review comments
This commit involves a significant refactoring of the default product query inside the 'product-collection/constants.ts' file. A new constant `DEFAULT_QUERY` has been defined and used to replace the previously hard-coded default query settings. This refactoring aids in code readability and future modifications.
Changes also include adjustments in 'product-collection/inspector-controls' to enhance UI/UX. A new SCSS file 'editor.scss' has been created for custom styles related to the editor.
Additions include:
- Adding a class name `product-collection-inspector-toolspanel__filters` to ToolsPanel for additional styling.
- The experimental property `__experimentalShowHowTo` is set to false for `FormTokenField` and `StockStatusControl`, to hide some additional information.
In 'product-collection/inspector-controls/taxonomy-controls.tsx', the classname `product-collection-inspector__taxonomy-control` is added for improved CSS targeting.
* Add wc-block-editor prefix to className
* Add wc-block-editor- prefix with classNames
* Handle duplicate taxonomy names in Taxonomy controls
the taxonomy controls have been enhanced in the following ways:
1. Modified the BASE_QUERY object to include 'slug' in the '_fields' property. This will ensure that the 'slug' of the taxonomy term is fetched along with its 'id' and 'name'.
2. Added a 'slug' property to the Term type to store the 'slug' of each term.
3. Updated the useEffect hook inside the TaxonomyItem function to generate suggestions based on search results. The suggestions now include the 'slug' of a term if the term's name is not unique. This change will help users distinguish between terms with the same name but different slugs.
* Remove isset() in if condition as it's unnecessary
* Refactor TaxonomyItem component for better readability
Following changes were made:
1. The useSelect hooks which were being used to fetch existing terms and search results have been moved into their own custom hooks named 'useExistingTerms' and 'useSearchResults' respectively. This simplifies the TaxonomyItem function's body and makes the hooks' purposes clearer.
2. The comments and props destructuring for the TaxonomyItem function have been moved up to make it easier to understand the function's purpose and the props it receives.
3. This refactor does not introduce any changes in functionality. It only changes how the code is organized and presented, which will make future development easier.
* Handling for duplicate term names & other improvements
This commit enhances the `TaxonomyControls` component within `product-collection` block by adding memoization and improving term uniqueness handling.
Changes:
1. Imported `useMemo` from `@wordpress/element` for memoizing certain results.
2. `getTermIdByTermValue` function has been modified to use a `termIdToNameMap` (term ids as keys and term names as values). This provides a more efficient and direct mapping for term search.
3. Introduced `useTermIdToNameMap` function, which returns a `Map` where term ids are keys and term names are values. It handles duplicate term names by appending the term slug to the name, ensuring unique term names.
4. Updated the `useExistingTerms` and `useSearchResults` to include `taxonomy` in their dependency arrays for `useSelect` hook. This will force re-computation when `taxonomy` changes.
5. Changed `TaxonomyItem` from a function declaration to a const arrow function, consistent with the rest of the codebase.
6. Updated `onTermsChange` function in `TaxonomyItem` to accommodate the changes in `getTermIdByTermValue` and the introduction of `termIdToNameMap`.
7. Replaced `Set` with a standard array for storing new term IDs in `onTermsChange`. The `Set` was unnecessary as term IDs are unique by default.
8. Updated `TaxonomyItem`'s effects and rendering to work with `termIdToNameMap`, ensuring the displayed term names are unique.
This update will result in more efficient term search and handling, and it will solve issues related to duplicate term names.
* Restructure taxonomy controls in product collection block
This commit restructures the taxonomy controls in the product collection block for improved clarity and maintainability.
- The file `taxonomy-controls.tsx` has been deleted, and its functionality has been divided into two new files: `index.tsx` and `taxonomy-item.tsx`.
- The `index.tsx` file contains the main TaxonomyControls component, which is responsible for displaying taxonomy-related options in the block's inspector controls. It includes a custom hook `useTaxonomies` that fetches and returns taxonomies associated with product post type.
- The `taxonomy-item.tsx` file, on the other hand, contains a TaxonomyItem component that handles the rendering of individual taxonomy items. It also contains some utility functions for mapping term names and ids and fetching terms based on the search query.
This refactor aims to improve code readability and separation of concerns, thus making future changes and maintenance easier.
* Fix case insensitive search support for FormTokenField
This change enhances the search functionality of the FormTokenField by introducing support for case insensitive search. This has been achieved by adding a lower-case version of the term name to the 'termNameToIdMap'.
This is an important enhancement as it will make the search process more user-friendly and resilient to different casing inputs. Users will now be able to find the desired taxonomy term regardless of their input's case.
* Refactor getTermIdByTermValue function and update newSuggestions mapping
This commit does a couple of important things:
1. Reorders the definition of constants in `TaxonomyItemProps` for clarity.
2. Refactors the `getTermIdByTermValue` function. Instead of checking for an exact term name match in a convoluted manner, it now directly tries to fetch the `id` from the `searchTerm` if it is an object. If the `searchTerm` is not an object, the function tries to match it against the `termNameToIdMap` in both normal and lowercase forms. This simplification makes the function more readable and concise.
3. Updates the `newSuggestions` mapping in the `TaxonomyItem` component. It now has a fallback to `searchResult.name` if a term's name is not found in `termIdToNameMap`. This change ensures that even if the term's name is not in the map for some reason, we can still display a suggestion using the original name of the term.
* Optimize term fetching and initial search state in TaxonomyItem
This commit introduces a couple of improvements to the TaxonomyItem component.
1. The initial state of the 'search' state variable has been updated to 'undefined'. This change helps prevent unnecessary initial fetching of terms when the search input is empty.
2. Term fetching logic has been optimized to only enable term fetching when necessary:
a) Fetching based on the search query is only enabled when 'search' is not 'undefined'.
b) Fetching existing terms is only enabled when there are term IDs.
3. The block of code responsible for fetching existing terms and setting the current value has been moved upwards. This reordering of code does not change the functionality, but it groups together similar pieces of code, enhancing readability and maintainability.
These optimizations make the component more efficient by reducing unnecessary requests and computations, and they improve the code organization.
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Add show child categories only toggle to Product Categories block
* Check if current page is a template editor before adding the toggle
* Show current category if show_children is enabled and its the last category in the hierarchy
* Update comment
* Fix typo
* Remove forward slash
* Add is-widget-editor utility and enable feature for block usage in widget editor
* Don't render anything if the child only option is enabled and there are no children
* Combine countryData using shared util
* Update tests for shared util
* Update client to use countryData
* Avoid duplication of country names
* Use cart version of deep_sort_with_accents
* Update assets/js/settings/blocks/constants.ts
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Update LocaleSpecificAddressField type
* Support nested arrays
---------
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Add Single Product template support to Product Rating block
* Add the Product Rating block to the Single Product Template by default
* Fix Product Rating block position on Single Product HTML template
* 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.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* Add product attributes filter control to ProductCollection block
- This commit introduces the ability to filter products by attributes in ProductCollection block.
- A new `woocommerceAttributes` key was added to the `block.json` file and the `ProductCollectionQuery` type. Also, a new file `attributes-control.tsx` was created, providing the UI component for the attribute filter control in the editor.
- In addition, updates were made to the `ProductCollection.php` file in the backend to support filtering products by attributes, and the tax query was updated to include attribute queries.
- Lastly, the `ProductCollectionInspectorControls` was updated to include the `AttributesControl` component, thus enabling users to filter products by attributes in the block editor."`
* remove unused import of getDefaultStockStatuses
* Delete a duplicate file
* Remove console log
* Address PR feedback & other improvements
1. Added `woocommerceAttributes` to `DEFAULT_FILTERS` in the `product-collection/constants.ts` file to fix `reset all` button issue.
2. Refactored `attributes-control.tsx` to make it more maintainable:
- The constant `EDIT_ATTRIBUTES_URL` now uses `ADMIN_URL` from `@woocommerce/settings` for a more dynamic URL generation.
- The interface `Props` has been renamed to `AttributesControlProps` for more explicit naming.
- Removed the usage of `useState` and `useEffect` for selected attributes. Instead, `selectedAttributes` is now directly derived from `woocommerceAttributes`.
- The CSS class `woocommerce-product-query-panel__external-link` was renamed to `wc-product-collection-panel__external-link`
3. Deleted the `product-collection/inspector-controls/constants.ts` file which was no longer necessary due to changes in product collection implementation.
These changes contribute to codebase quality, improving readability and maintainability.
* Add wc-block-editor prefix to className
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Add Single Product template support to Product Rating block
* Remove example attribute from block.json
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
* Set isDescedentOfSingleProductTemplate attribute default to false
* Remove withProductSelector HOC
Since we are using the `ancestor` key then we don't need to use this HOC anymore
* Remove unused import on Product Rating Edit component
---------
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
* 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.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Add keyword search control to Product Collection block
This commit introduces a keyword search functionality to the Product Collection block. The update is aimed to provide users with more flexibility and precision in product collection queries.
Key changes:
1. Introduced a new file `keyword-control.tsx` that creates a Keyword Control component. This component includes a TextControl field that allows inputting a search keyword. The keyword search is debounced to prevent unnecessary queries during input and updates the block's attributes accordingly.
2. Modified `inspector-controls/index.tsx` to include the KeywordControl in the ToolsPanel for the block's filters.
3. Adjusted `ProductCollection.php` to include the keyword search in the product query array.
With these changes, users can now search for products by keyword in the Product Collection block.
* remove unused import of getDefaultStockStatuses
* 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.
* Add stock status filter to WooCommerce product collection block
This commit introduces a stock status filter to the WooCommerce product collection block.
The changes include:
1. Added the ability to filter products based on their stock status within the 'product-collection' block. A new stock status control is created within the inspector-controls of the block.
2. A new 'get_stock_status_query' function is introduced in 'ProductCollection.php' which returns a query for products depending on their stock status.
Please note that the stock status filter will only appear in the experimental build for now.
* Refactor Stock Status control of Product Collection block
This commit refactors the Stock Status control. The changes aim to improve the code organization and make the behavior of the component more explicit.
The key modifications are:
1. Moved stock status related constants and functions from `inspector-controls/utils.tsx` to `inspector-controls/constants.ts`. This is done to ensure that all constants and similar utility functions are organized in one place.
2. Updated `product-collection/index.tsx` to import `getDefaultStockStatuses` from `inspector-controls/constants` instead of `inspector-controls/utils`.
3. Updated `stock-status-control.tsx` to determine whether the stock status has value or not by comparing with the default stock statuses using `fastDeepEqual`. If the stock status control is deselected, it resets the stock status to the default statuses.
These changes do not introduce any new functionalities, but improve the readability and maintainability of the code.
* Fix: Default values of attributes not saving as serialized block comment
This was happening because of this issue: https://github.com/WordPress/gutenberg/issues/7342
Therefore, I had to use `useEffect` to set the default values of the attributes.
Here is the list of changes I made:
1. Removed default values from `block.json` for `query`, `tagName`, and `displayLayout`.
2. Moved the default values to `constants.ts` and created a new object `DEFAULT_ATTRIBUTES` to store them.
3. Relocated `constants.ts` from `inspector-controls` to the parent directory.
4. Refactored `edit.tsx` to use `DEFAULT_ATTRIBUTES` from `constants.ts` to set default attributes using `useEffect`.
5. Removed the attributes assignment from `registerBlockType` in `index.tsx`.
6. Updated `columns-control.tsx`, `index.tsx`, `order-by-control.tsx`, and `stock-status-control.tsx` to import from the relocated `constants.ts`.
7. Updated `ProductCollectionAttributes` and `ProductCollectionQuery` in `types.ts` to include `tagName` and `isProductCollectionBlock` respectively.
8. Modified `ProductCollection.php` to match the updated `orderBy` key in the query parameter.
This refactor enhances the readability of the code and reduces duplication by keeping all constants and default values in one place.
* Replace usage of 'statii' with 'statuses' in stock status handling
This commit replaces all instances of 'statii' with the correct term 'statuses' in the context of handling stock status. This change affects three files:
1. `assets/js/blocks/product-collection/inspector-controls/stock-status-control.tsx` - The term is corrected in a comment block.
2. `assets/js/blocks/product-collection/types.ts` - Updated the name of a variable in the `ProductCollectionQuery` interface.
3. `src/BlockTypes/ProductCollection.php` - Here, the term is replaced in several locations including variable names, comments and the method `get_stock_status_query`.
This commit helps improve code readability and consistency across the repository.
* 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>
* 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
* 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
* 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>
* 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
* 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.
* 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
* 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
* 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
* 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>
* Add class property to track local pickup enabled
* Force shipping enabled only when local pickup is also enabled
Otherwise, skip filtering and leave it to the current value
* Disabled and add text to WC Core hide shipping option
* Skip forcing shipping to be enabled in all cases
* Remove WC Core setting changes for hidden shipping rates option
* Add warning to local pickup UI about hidden rates setting in core
* Add local_pickup_enabled util function
* Revert "Skip forcing shipping to be enabled in all cases"
This reverts commit 0bf1886e73d791f7828ac86988f681cdce808b12.
* Check if local pickup is enabled before force enabling shipping
* Show correct shipping placeholder if rates hidden until address entered
* Remove tests for removed functionality
* Remove shippingCostRequiresAddress prop
* Update tests for shipping settings
* Remove irrelevant tests and fix existing ones
* Fix typo in comment
* Disable local pickup after each test
* Get shipping data from useCustomerData hook
* Change div in help prop to span
This prevents a DOM Nesting error, div cannot appear as a descendant of p
* Prevent hide shipping notice showing if the setting was originally off
* Use body background color as the Cart block sticky footer background color
* Reduce the opacity of box-shadow.
* Fix the Proceed to Checkout button cut off.
* Fix infinite loop (range error) on subscribe callback.
* Replace getEditedPostContext with getEditedPostId to retrieve the templateId from the Site Editor for 6.1.1 compatibility
---------
Co-authored-by: tjcafferkey <tjcafferkey@gmail.com>
* Don't use withProductDataContext in Sale Badge block
There was no information about product passed to the block, so it fetched information about all products which then wasn't even used
* Pass necessary props to the Sale Badge so it doesn't overfetch unnecessary data
* Move the import to the previous place
* Add color, typography, and spacing support to Product SKU block
This commit introduces a new file `supports.ts` for the Product SKU block in the WooCommerce Blocks plugin, which adds color, typography, and spacing support. The following configuration has been added:
1. In `assets/js/atomic/blocks/product-elements/sku/supports.ts`, a new `supports` object is created, which extends the shared configuration and adds support for the following properties:
- `text` and `background` color
- `fontSize`, `lineHeight`, `__experimentalFontWeight`, `__experimentalFontFamily`, `__experimentalFontStyle`, `__experimentalTextTransform`, `__experimentalTextDecoration`, and `__experimentalLetterSpacing` for typography
- `margin` and `padding` for spacing
* Add color, typography, and spacing support for Product SKU block in All Products block
This commit extends the support for color, typography, and spacing to the Product SKU block when used within the All Products block. The following changes have been made:
1. In `assets/js/atomic/blocks/product-elements/sku/block.tsx`, the `useColorProps`, `useSpacingProps`, and `useTypographyProps` hooks are imported and used to add the appropriate className and style properties to the rendered SKU element.
2. In `assets/js/atomic/blocks/product-elements/sku/edit.tsx`, the `style` property is separated from `useBlockProps()` and used directly on the `div` element for the SKU block.
* Add server-side rendering class for Product SKU Gutenberg block
This commit adds the ".wp-block-woocommerce-product-sku" class to the Product SKU Gutenberg block for server-side rendering purposes. The inclusion of this class ensures consistent styling between the editor and the front-end view of the block, providing a seamless experience for users.
The class name is generated based on the Gutenberg block prefix "wp-block", the namespace "woocommerce", and the block name "product-sku", creating a unique and identifiable class for the block. This class enables developers to target the block specifically in both the editor and front-end styles, maintaining the integrity of the block's appearance and functionality across different environments.
By adding this class to the server-side rendered version of the block, we ensure a unified and coherent styling experience throughout the block's usage.
* Fix minor issues
* Gate only experimental features behind isFeaturePluginBuild flag
This commit refactors the Product SKU block supports to enable color, typography, and spacing features for all builds, while keeping experimental features specific to the feature plugin build. It also adds necessary lint and TypeScript error handling for the experimental spacing API.
* Add overflow-wrap to Product SKU block and update comment
This commit adds the overflow-wrap property to the Product SKU block styles to handle long SKU values gracefully.
It also updates the comment for the experimental spacing API to better reflect the usage check.
* Refactor Product SKU block classname and style handling
This commit refactors the Product SKU block classname and style handling. It combines classnames for better readability and removes the hardcoded textTransform style in favor of default styles.
This also fix the issue where textTransform style was not working as expected.
* Add support for color, typography and spacing to stock indicator block
This commit updates the stock-indicator block support in the woocommerce-blocks repository. It includes the following changes:
- Added support for background color, line height, and various experimental typography features.
- Conditionally included support for margin and padding based on the availability of the __experimentalGetSpacingClassesAndStyles function from the @wordpress/block-editor package.
These updates provide more customization options for the stock-indicator block, allowing users to better match the appearance of this element to their site's design.
* Refactor stock text generation and apply minor style adjustments
This commit introduces a new function, `getTextBasedOnStock`, which handles the generation of stock text based on the stock information provided. It replaces the previous `lowStockText` and `stockText` functions, making the code more readable and maintainable.
In addition, minor adjustments to the class name handling have been made to simplify the code and ensure consistent styling when used inside the All Products block.
In the `edit.tsx` file, the `useBlockProps` function call has been updated to include the default `wc-block-components-product-stock-indicator` class name, ensuring it is always applied.
* Remove redundant block type supports in ProductStockIndicator
This commit removes the redundant get_block_type_supports() method from the ProductStockIndicator.php file, as it is no longer needed. The block type supports are now handled in the frontend.
* Create the counter block and the header pattern
* Change the pattern to an inner block
* Allow customizing item counter block
* Rename block
* Allow removing the items counter block
* Add padding controls
* Preload new blocks
* Add title block back from the inserter
* Move h2 tag to the parent title
* Align items at the bottom
* Unify styles
* Add title class in the editor
* Prevent removing title blocks
* Disallow unlocking and inserter
* Disallowing moving blocks
* Introduce the new get_attribute_and_meta_counts method.
* Ensure that if no term_slug or term_id is found for counting, the default list with all terms (with count equal zero) is returned instead.
* update conditional for the slug, the empty state for requests without filter attributes and the condition query for 'and'
* Introduce the get_terms_list method.
* Remove the legacy get_attribute_counts method and update its calls to rely on the new get_attribute_and_meta_counts method instead.
* Update the query to ensure that if a parent product has multiple identical attributes, they are counted once.
* Update to start relying on the get_product_by_metas method for counting product metas
* Add a new where_clause to only include product metas and attributes in the macro query if they are not empty.
* Add wpdb->prepare to the macro query and the get_terms_list method.
* Replace the raw atomic query for fetching the filtered terms with the new get_product_by_filtered_terms method.
* Update the request params for the get_attribute_and_meta_counts method.
* Update the request params for the product metas (min and max price).
* Update the query and returned value on get_terms_list.
* Update the validation for returning the default counts when no values are filtered.
* Update the query on get_terms_list to use ->prefix
* Update the variable for the query to rely on the filtered one. Update the min_price and max_price format on get_product_by_metas.
* Ensure the get_product_by_filtered_terms method is triggered for each one of the filtered terms and update the macro query to include those term ids on the WHERE clause.
* Make adjustments for the 'and' condition to work as expected.
* Ensure the queryState.attributes is properly added as a param to the API request to correctly fetch the attribute count data.
* Ensure the get_product_by_metas method is only triggered when at least one of the metas in the request is not empty.
* Join type update: for the 'and' (all) filter condition, items with the count zero are not displayed.
* wpdb prepare the where clauses
* Update the get_product_by_filtered_terms query wpdb prepare params
* update the get_product_by_metas method's where clause preparation.
* Update the where clause preparation for get_attribute_and_meta_counts so we don't rely on interpolated variables anymore.
* Adjust the get_attribute_and_meta_counts method for usage alongside the rating filter.
* Adjust the query for fetching the attribute counts for filtered ratings.
* Add support for the filter by stock.
* Ensure the product attribute counts are correct if the parent product receives a rating.
* Ensure product_or_parent_id is used only when the filter by rating is used, not affecting price or stock filters.
* Add the missing else condition.
* Enable caching.
* Address CR
* Update query for average rating.
* remove file accidentally commited.
* When multiple ratings are selected, make sure the where clause is updated accordingly for each one of them.
* Start updating the stock_status logic to account for when multiple options are selected by the user.
* Ensure the counts are properly updated when more than one stock status is selected.
* Ditch the is_array condition for the average_rating counts as is always an array.
* Deprecate the second param attributes for the get_attribute_counts method.
* Add the filtered_attribute to the transient_key
* Bypass cache if WP_DEBUG is enabled.
* Update formatting for macro query.
* Fix mixed tabs spaces on query
* Update spacing/formatting for SQL queries.
* Minor: update indentation for the main SQL query
---------
Co-authored-by: roykho <roykho77@gmail.com>
* Add block minimal structure
* Add Single Product block icon
* Add usesContext to block.json
* Add Save function to Single Product Block registration settings
* Add InnerBlocks template to Editor for Single Product Block
* Add Product selector to Single Product block
* Add withProduct HOC to the block editor
* Add save function to the Single Product block
* Add renderOnServerSide attribute to Product image
This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.
* Add renderOnServerSide attribute to Product Category List block
* Add renderOnServerSide attribute to Product Price block
* Add renderOnServerSide attribute to Product Rating block
* Add renderOnServerSide attribute to Product Stock Indicator block
* Add renderOnServerSide attribute to Product Summary block
* Add renderOnServerSide attribute to Product Tag List block
* Add renderOnServerSide attribute to Product Title block
* Add renderOnServerSide attribute to Product Add to Cart, Sales Badge and Sku block
* Reuse editor code for Single Product block
* Add Props interface to Single Product Server Side Editor
* Add render_block_context hook to SingleProductServerSide block
* Fix Single Product Server Side block that was not appearing in the block inserter
* Fix bug where the correct product was not being displayed on the frontend
* Remove Single Product Block
* Add Product title and product summary variations
* Add Add To Cart Form and Product Meta blocks to the Single Product Block
* remove more files that belong the Single Product block
* fix php linter error
* wrap up Single Product Block
* Fix issue preventing the block from working on the Single Product Template
* Fix update context function for Single Product block
* Replace Single Product block title
* Replace global $post only for Single Product inner blocks
* Remove unnecessary var_dump statement
* Improve documentation for the Single Product block
* fix registration: add-to-cart-form and product-meta blocks
* Improve documentation for Single Product block
* Fix lint error related to imports
* Remove query monitor debug code
* Remove unnecessary `renderOnServerSide` attribute from product elements
* Fix return type for the Save function of the Product Elements blocks
* Fix return type for the Save function of the Product Title block
* Add scss file for Single Product block
* Fix PHP coding standards
* Fix php coding standards
* Remove internal dependencies section duplication
* Replace .wc-block with .wc-block-editor- styles
According to the naming convention for this project (https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/contributors/contributing/coding-guidelines.md#naming) we should be using the `.wc-block-editor-` prefix for styles that are only used in the editor.
* Solve style for the Edit card component in the Single Product block
* Fix error preventing Block Control from being displayed
* Make the Product title to be a link by default
* Fix PHP Coding Standards
* Fix PHP Code Standards
* Fix php cs issues
* Fix issue with php cs
* Remove unnecessary comment
* Remove unused Icon import
* Remove unnecessary dot from the className attributes in the Single Product Block
* Replace metadata.name with metadata.title in the Editor file
* Ignore phpcs rule
* Add new attributes to the Attributes interface of the Price block
* Fix typescript errors on the Product Meta block
* Fix ts errors on Single Product editor
* Fix ts errors on layout-editor.tsx
* Fix ts errors in Single Product index file
* Fix ts errors on add to cart form index file
* Fix unsupported block error when using inner blocks outside the Single Product template
* Fix unsupported block error for the Single Product block when editing Posts/Pages
* Remove unnecessary JSDoc types
* Remove unnecessary APIError component
* Replace global $post only when rendering a `core/post-excerpt` block
* Fix php cs errors
* Put the Single Product block behind an experimental flag
* Enable Single Product block preview
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Add block minimal structure
* Add Single Product block icon
* Add usesContext to block.json
* Add Save function to Single Product Block registration settings
* Add InnerBlocks template to Editor for Single Product Block
* Add Product selector to Single Product block
* Add withProduct HOC to the block editor
* Add save function to the Single Product block
* Add renderOnServerSide attribute to Product image
This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.
* Add renderOnServerSide attribute to Product Category List block
* Add renderOnServerSide attribute to Product Price block
* Add renderOnServerSide attribute to Product Rating block
* Add renderOnServerSide attribute to Product Stock Indicator block
* Add renderOnServerSide attribute to Product Summary block
* Add renderOnServerSide attribute to Product Tag List block
* Add renderOnServerSide attribute to Product Title block
* Add renderOnServerSide attribute to Product Add to Cart, Sales Badge and Sku block
* Reuse editor code for Single Product block
* Add Props interface to Single Product Server Side Editor
* Add render_block_context hook to SingleProductServerSide block
* Fix Single Product Server Side block that was not appearing in the block inserter
* Fix bug where the correct product was not being displayed on the frontend
* Remove Single Product Block
* Add Product title and product summary variations
* Add Add To Cart Form and Product Meta blocks to the Single Product Block
* remove more files that belong the Single Product block
* fix php linter error
* wrap up Single Product Block
* Fix issue preventing the block from working on the Single Product Template
* Fix update context function for Single Product block
* Replace Single Product block title
* Replace global $post only for Single Product inner blocks
* Remove unnecessary var_dump statement
* Improve documentation for the Single Product block
* fix registration: add-to-cart-form and product-meta blocks
* Improve documentation for Single Product block
* Fix lint error related to imports
* Remove query monitor debug code
* Remove unnecessary `renderOnServerSide` attribute from product elements
* Fix return type for the Save function of the Product Elements blocks
* Fix return type for the Save function of the Product Title block
* Add scss file for Single Product block
* Fix PHP coding standards
* Fix php coding standards
* Remove internal dependencies section duplication
* Replace .wc-block with .wc-block-editor- styles
According to the naming convention for this project (https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/contributors/contributing/coding-guidelines.md#naming) we should be using the `.wc-block-editor-` prefix for styles that are only used in the editor.
* Solve style for the Edit card component in the Single Product block
* Fix error preventing Block Control from being displayed
* Make the Product title to be a link by default
* Fix PHP Coding Standards
* Fix PHP Code Standards
* Fix php cs issues
* Fix issue with php cs
* Remove unnecessary comment
* Remove unused Icon import
* Remove unnecessary dot from the className attributes in the Single Product Block
* Replace metadata.name with metadata.title in the Editor file
* Ignore phpcs rule
* Add new attributes to the Attributes interface of the Price block
* Fix typescript errors on the Product Meta block
* Fix ts errors on Single Product editor
* Fix ts errors on layout-editor.tsx
* Fix ts errors in Single Product index file
* Fix ts errors on add to cart form index file
* Fix unsupported block error when using inner blocks outside the Single Product template
* Fix unsupported block error for the Single Product block when editing Posts/Pages
* Remove unnecessary JSDoc types
* Remove unnecessary APIError component
* Replace global $post only when rendering a `core/post-excerpt` block
* Fix php cs errors
* Put the Single Product block behind an experimental flag
* Fix error occurring when trying to access ancestor of an undefined block settings
* Fix Product Image appearing with different size on the Frontend
* Fix PHP Code Standards errors
* Remove JS Doc from shared-product-control.tsx
* Fix single-product-frontend.js 404 error
* Fix error 'Block names must be string' when adding Single Product block
* Add todo comment to state the temporary solution used in the Single Product block
* Set imageSizing attribute on Product Query and Single Product blocks
* Rename values for image size options in the product image block
The previous allowed values were 'cropped' and 'full-size'. The new values are 'thumbnail' and 'single' which are similar to the values used in WooCoomerce.
WooCommerce uses 'woocommerce_thumbnail', 'woocommerce_gallery_thumbnail' and 'woocommerce_single' for images sizes. The 'woocommerce_single' size is used for the Single Product page and the 'woocommerce_thumbnail' size is used for the product grid.
* Fix Related Products image to show as a thumbnail instead of the full size
* Fix PHP CS error
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Add validateOnFirstFocus prop
* Only run validation on first focus if validateOnFirstFocus is true
* Rename validateOnFirstFocus to validateOnMount
* Set TotalsCoupon to not validate when the input is mounted
* Add tests for validation error handling
* Fix test that was not making a good assertion
* Add tests for validateOnMount functionality
* Clean up validateOnMount logic, make the code more readable & efficient
* Add block minimal structure
* Add Single Product block icon
* Add usesContext to block.json
* Add Save function to Single Product Block registration settings
* Add InnerBlocks template to Editor for Single Product Block
* Add Product selector to Single Product block
* Add withProduct HOC to the block editor
* Add save function to the Single Product block
* Add renderOnServerSide attribute to Product image
This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.
* Add renderOnServerSide attribute to Product Category List block
* Add renderOnServerSide attribute to Product Price block
* Add renderOnServerSide attribute to Product Rating block
* Add renderOnServerSide attribute to Product Stock Indicator block
* Add renderOnServerSide attribute to Product Summary block
* Add renderOnServerSide attribute to Product Tag List block
* Add renderOnServerSide attribute to Product Title block
* Add renderOnServerSide attribute to Product Add to Cart, Sales Badge and Sku block
* Reuse editor code for Single Product block
* Add Props interface to Single Product Server Side Editor
* Add render_block_context hook to SingleProductServerSide block
* Fix Single Product Server Side block that was not appearing in the block inserter
* Fix bug where the correct product was not being displayed on the frontend
* Remove Single Product Block
* Add Product title and product summary variations
* Add Add To Cart Form and Product Meta blocks to the Single Product Block
* remove more files that belong the Single Product block
* fix php linter error
* wrap up Single Product Block
* Fix issue preventing the block from working on the Single Product Template
* Fix update context function for Single Product block
* Replace Single Product block title
* Replace global $post only for Single Product inner blocks
* Remove unnecessary var_dump statement
* Improve documentation for the Single Product block
* fix registration: add-to-cart-form and product-meta blocks
* Improve documentation for Single Product block
* Fix lint error related to imports
* Remove query monitor debug code
* Remove unnecessary `renderOnServerSide` attribute from product elements
* Fix return type for the Save function of the Product Elements blocks
* Fix return type for the Save function of the Product Title block
* Add scss file for Single Product block
* Fix PHP coding standards
* Fix php coding standards
* Remove internal dependencies section duplication
* Replace .wc-block with .wc-block-editor- styles
According to the naming convention for this project (https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/contributors/contributing/coding-guidelines.md#naming) we should be using the `.wc-block-editor-` prefix for styles that are only used in the editor.
* Solve style for the Edit card component in the Single Product block
* Fix error preventing Block Control from being displayed
* Make the Product title to be a link by default
* Fix PHP Coding Standards
* Fix PHP Code Standards
* Fix php cs issues
* Fix issue with php cs
* Remove unnecessary comment
* Remove unused Icon import
* Remove unnecessary dot from the className attributes in the Single Product Block
* Replace metadata.name with metadata.title in the Editor file
* Ignore phpcs rule
* Add new attributes to the Attributes interface of the Price block
* Fix typescript errors on the Product Meta block
* Fix ts errors on Single Product editor
* Fix ts errors on layout-editor.tsx
* Fix ts errors in Single Product index file
* Fix ts errors on add to cart form index file
* Fix unsupported block error when using inner blocks outside the Single Product template
* Fix unsupported block error for the Single Product block when editing Posts/Pages
* Remove unnecessary JSDoc types
* Remove unnecessary APIError component
* Replace global $post only when rendering a `core/post-excerpt` block
* Fix php cs errors
* Put the Single Product block behind an experimental flag
* Fix error occurring when trying to access ancestor of an undefined block settings
* Remove JS Doc from shared-product-control.tsx
* Fix single-product-frontend.js 404 error
* Fix error 'Block names must be string' when adding Single Product block
* Add todo comment to state the temporary solution used in the Single Product block
* Move the wp_reset_postdata outside the block name check condition
* Add comments about why we need to unregister the block on Single Product template
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Add default align attribute value for Cart block
* Add default align attribute value for Checkout block
* Update cart tests
* Check for not disabled insert button
* Add get_collectible_method_ids function
* Add collectibleMethodIds to asset data registry
* Remove unnecessary pluck and add pickup_location to returned array
* Add hasSelectedLocalPickup to shipping types
* show shipping address even if collecting
* Make checkout store set prefersCollection based on IDs from settings
* Move areRatesCollectible outside of hook
* Add pickup location component
* Show pickup location if user prefers collection
* Move prefersCollection check into ShippingAddress component
* Remove spread for collectibleMethodIds
Not needed now since pickup_location is included in the setting by default
* Check address metadata has a value before displaying it
* Add tests for ShippingAddress component
* Move PickupLocation specific tests to new file
* Ensure TotalsShipping shows only one package rate if local pickup chosen
* Update prefersCollection selector to use typeof check
* Use isPackageRateCollectible rather than checking against settings
* Do not show calculator button if local pickup rate is selected
* Update test to mock correct setting
* Remove unused method from ShippingController
* Check isPackageRateCollectable rather than checking settings array
* Update test to mock correct setting
* Change spelling of collectible to collectable
* Improve mocked useSelect function
Old one returned incorrect data shape for prefersCollection
* Remove duplicate import
* Remove express payment placeholders when there are no express payment methods
* Only use one instance of CartCheckoutFeedbackPrompt
* Show NoPaymentMethods notice in the inspector instead of the block
* Move privacy notices to inspector
* Unused hook
* Update tests to use mocks
* Add color, typography, and spacing support to Product SKU block
This commit introduces a new file `supports.ts` for the Product SKU block in the WooCommerce Blocks plugin, which adds color, typography, and spacing support. The following configuration has been added:
1. In `assets/js/atomic/blocks/product-elements/sku/supports.ts`, a new `supports` object is created, which extends the shared configuration and adds support for the following properties:
- `text` and `background` color
- `fontSize`, `lineHeight`, `__experimentalFontWeight`, `__experimentalFontFamily`, `__experimentalFontStyle`, `__experimentalTextTransform`, `__experimentalTextDecoration`, and `__experimentalLetterSpacing` for typography
- `margin` and `padding` for spacing
* Add color, typography, and spacing support for Product SKU block in All Products block
This commit extends the support for color, typography, and spacing to the Product SKU block when used within the All Products block. The following changes have been made:
1. In `assets/js/atomic/blocks/product-elements/sku/block.tsx`, the `useColorProps`, `useSpacingProps`, and `useTypographyProps` hooks are imported and used to add the appropriate className and style properties to the rendered SKU element.
2. In `assets/js/atomic/blocks/product-elements/sku/edit.tsx`, the `style` property is separated from `useBlockProps()` and used directly on the `div` element for the SKU block.
* Add server-side rendering class for Product SKU Gutenberg block
This commit adds the ".wp-block-woocommerce-product-sku" class to the Product SKU Gutenberg block for server-side rendering purposes. The inclusion of this class ensures consistent styling between the editor and the front-end view of the block, providing a seamless experience for users.
The class name is generated based on the Gutenberg block prefix "wp-block", the namespace "woocommerce", and the block name "product-sku", creating a unique and identifiable class for the block. This class enables developers to target the block specifically in both the editor and front-end styles, maintaining the integrity of the block's appearance and functionality across different environments.
By adding this class to the server-side rendered version of the block, we ensure a unified and coherent styling experience throughout the block's usage.
* Fix minor issues
* Gate only experimental features behind isFeaturePluginBuild flag
This commit refactors the Product SKU block supports to enable color, typography, and spacing features for all builds, while keeping experimental features specific to the feature plugin build. It also adds necessary lint and TypeScript error handling for the experimental spacing API.
* Add overflow-wrap to Product SKU block and update comment
This commit adds the overflow-wrap property to the Product SKU block styles to handle long SKU values gracefully.
It also updates the comment for the experimental spacing API to better reflect the usage check.
* Refactor Product SKU block classname and style handling
This commit refactors the Product SKU block classname and style handling. It combines classnames for better readability and removes the hardcoded textTransform style in favor of default styles.
This also fix the issue where textTransform style was not working as expected.
* Notice banner component
* Snackbar support
* Switch to new components
* Finish snackbar implementation
* Summary notice
* Styling issues
* Fix text wrap in shipping calculator
* Storybook entries
* Docs and tests for NoticeBanner
* Framer motion to avoid components dependency
* Snackbar list stories
* Docs for snackbar list
* Update assets/js/base/components/notice-banner/README.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Update assets/js/base/components/notice-banner/README.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Update assets/js/base/components/notice-banner/README.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Update assets/js/base/components/notice-banner/README.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Update assets/js/base/components/notice-banner/README.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Types/docblocks
* Docs
* Update notice type
* Use NoticeBannerProps for type of noticeProps
* Raw html to fix notice encoding
* getClassNameFromStatus is unused
* Update position text
* Clarify notice text
* Fix hover style in whisper TT3 theme
* remove div styles
* Add new templates for legacy buyer notices in WooCommerce core (https://github.com/woocommerce/woocommerce-blocks/pull/8732)
* Add templates for legacy core notices
* Update src/Domain/Services/Notices.php
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Remove debugging code
* DRY get_notices_template
* Simplify error template
* Fix padding
* Only include new notices if using block cart/checkout
---------
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Fix view box tag
* Hover and focus styles
* Styling when notices added via ajax
* Remove margin change
* Implement react-transition-group instead of framer (https://github.com/woocommerce/woocommerce-blocks/pull/8920)
* Add screenshots to docs
---------
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
* Add typography and spacing support to Product Price block
This commit adds additional typography and spacing support to the Product Price block. The following changes have been made:
1. In `assets/js/atomic/blocks/product-elements/price/block.tsx`, the `typographyProps.className` has been added to the `classNames` function to apply the typography styles.
2. In `assets/js/atomic/blocks/product-elements/price/supports.ts`, the following support attributes have been added to the `typography` object:
- `lineHeight`
- `__experimentalFontFamily`
- `__experimentalLetterSpacing`
Additionally, the `padding` attribute has been added to the `spacing` object.
3. In `src/BlockTypes/ProductPrice.php`, the `StyleAttributesUtils::get_classes_and_styles_by_attributes` function has been updated to receive all attributes instead of a predefined list.
* Enable background color support for Product Price block
This commit enables the background color support for the Product Price block in the WooCommerce Blocks plugin. The following change has been made:
1. In `assets/js/atomic/blocks/product-elements/price/supports.ts`, the `background` property within the `color` object has been changed from `false` to `true`, allowing users to set the background color for the Product Price block.
* Move blocks outside of Products block when convering Propduct Archive to the blockified version
* Move blocks outside of Products block when convering Product Search Result to the blockified version
* Move blocks outside of Products block in blockified templates
* Make sure Term description is still removed from Product Catalog template
* Remove isExperimentalBuild checks.
By removing the `isExperimentalBuild` conditional checks in the Classic
Template block, we can ensure the features added in woocommerce/woocommerce-blocks#8324 will land in
WooCommerce Core and are not limited to the feature plugin.
See p1680000654295729-slack-C02UBB1EPEF for additional context.
* Revert isExperimentalBuild removal on registration
The conditional `isExperimentalBuild` conditional check that was
wrapping some conditional registration of the classic template
block seems to be unrelated to the template conversion/migration.
This is something we can revisit and test separately but should not be
included in this changeset.
* Refactor import and add padding support in image block
In this commit, the import statement for __experimentalGetSpacingClassesAndStyles has been refactored to use an alias getSpacingClassesAndStyles for better readability. Additionally, padding support has been added to the image block's spacing configuration.
* Refactor ProductImage to use consolidated style classes and attributes
This commit refactors the ProductImage block by using the consolidated classes and styles provided by the StyleAttributesUtils::get_classes_and_styles_by_attributes() function. This change simplifies the code, improves readability, and ensures consistent handling of styles across different block elements.
* Add filter to change allowed blocks in Cart and Checkout blocks
* Add documentation for allowedBlockTypes
* Add test to check the filters work for the Checkout block
* Rename filter to additionalCartCheckoutInnerBlockTypes
* Update docs to reflect new name
* Add tests for additionalCartCheckoutInnerBlockTypes in Cart block
* Update Checkout test to reflect new filter name
* Update docs TOC to add example link
This adds the $schema property to all block.json files. This is required for the block.json files to be valid according to the JSON schema. I noticed that this property was not set for some of the block.json files.
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* First try to render Product Arhcive template as blocks
* First iteration of the whole blockified product archive template
* Add tests for Single Product Details block
* Extract a blockified Product Archive Template to the templates
* Add templates to tsconfig.json so the files are resolved as part of the core code
* Add a encouragement note to use blockified version IF migration is available
* Add a Row block wrapping Product Results Count and Catalog Sorting blocks
* Move blockified product-archive from templates/ to assets/ directory
* Remove unnecessary margin from Product Results Count block
When used in a Row block in a blockified Archive Product template, Product Results Count had additional unnecessary margin which caused misalignment with the Catalog Sorting block
* Fix TypeScript error
* Update the description of the Classic Template Editor placeholder
* Remove unnecessary entry in tsconfig.json to include templates directory
It was added couple of commits earlier, since the template was kept there, but it was decided to move it to assets directory, so entry is no longer necessary
* Move the to
* Differentiate the Classic Template placeholder description depending on the availability to convert to Products block
* Add the initial basis for the Add to Cart button
* Add E2E test that the Classic Template can be replaced with the blockified version
* Abandon writing E2E tests for now, as there's a problem to run them locally
* Trigger the single product add to cart action for each product type.
* Syntax improvement
* Set margin for Catalog Sorting to 0, so it aligns properly when used in blockified Archive Product template
* Make the blockification config, so it covers the Product Archive as well as Single Product templates
* Move the product-archive specific functions from classic-template/index.tsx to the product-archive.ts
* wip: create block structure and add initial styles
* Add alignment option to the Store Notices block and make the blockified template blocks aligned wide
That is required, so the Classic Template layout is preserved
* Create single-product.ts file which is a placeholder for the blockified Single Product template
* Add block details to the SingleProductDetails.php file
* Make Blockified Product Archive template inherit the align attibute
* Simplify the interface of blockified templates
Expose function instead of two functions for allowing and disallowing conversion
* Add a BlockifiedTemplate type
* Rename and simplify the function checking if conversion of classic template to block version is possible
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Align the variable naming to use instead of
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* Pass the Classic Template attributes to the blockified template instead of getting it from data store
* Include Breadcrumbs block in the Blockified Product Archive Template
* Consume alignment attributes of Catalog Sorting in the PHP render function
* Consume alignment attributes of Breadcrumbs in the PHP render function
* Show conversion button with label and description
* Add conversion placeholder (until we have all the blocks implemented)
* Remove align support from Catalog Sorting and add to Store Notices block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* Extend the get_classes_and_styles_by_attributes method with align and text_align attributes
* address CSS feedback
* Add Archive Title block to the Blockified Classic Template
* Minor getRowBlock function refactor
* add support for the custom classname
* remove save function
* Add property to the classic templates and base the config on it instead of placeholder
* Add separate blockified template for a Product Search Results
* Pass attribute from classic template to No Results block in Product Search Results
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* Extract the common functions between blockified archive-template and product-search-results to utils
* Enable 'Inherit query from template' in Products block by default when converting the Classic Template to blockified one
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* Improve the naming of BlockifiedTemplateConfig type
* Differentiate Product Catalog and Products By * templates. The latter include Term Description block
* improve logic and increase coverage of unit test
* Change unclear ProductsBy to ProductTaxonomy in regards to classic template conversion
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Revert the margin fix which was added already on trunk
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Add default Single Product HTML template
* Fix style issues when adding blocks inside group/stack/columns blocks
* Add Related Products to the default single product template HTML file
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* wrap up default single product html
* remove classname
* add blocks
* improve code
* Remove !important statement from Product Image Gallery block css
* Change width of Product Image Gallery block to initial instead of unset
* Wrap up default single product html template (https://github.com/woocommerce/woocommerce-blocks/pull/8632)
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* Add tests for Single Product Details block
* Add the initial basis for the Add to Cart button
* Trigger the single product add to cart action for each product type.
* wip: create block structure and add initial styles
* Add block details to the SingleProductDetails.php file
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* address CSS feedback
* add support for the custom classname
* remove save function
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* improve logic and increase coverage of unit test
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* wrap up default single product html
* fix: related products and grouped products result woocommerce/woocommerce-blocks#8589
* remove classname
* fix crash
* update template
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
* Fix images width in the Single Product page
* Remove the !important attribute from the Product Image Gallery block
* fix sku block
* improve layout
* improve layout
* improve layout
* improve layout
* improve layout
* update label
* Single Product Template: add store notice block
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
* Add Notice component to the Inspector Controls section of the Related Products block
* Change margin css attribute to use the short syntax
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
---------
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Render inner buttons on the frontend
* Add deprecation to the buttons
* Fix lint and inline save
* Remove commented out code and fix condition
* Change migrate condition
* Add styles outline and fill styles to cart and checkout buttons
* Add fill and outline styles to the start shopping button
* Refactor variants
* Remove imports
* Add classname default value
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Add Fill & Outline styles to Product button
This commit adds the Fill & Outline styles to the Product button block.
You can see new Styles section in Inspector Controls where you will be able to change between Fill & Outline styles.
* Add width setting to product button
The button block now has a width selector, which allows the user to
set the button to 25%, 50%, 75%, or 100% of the parent container.
By default, a button's width is determined by the size of its content.
You can find this setting in the button block's sidebar.
* Enable all typography controls
Now following typography controls are also available:
- Font Family
- Appearance
- Line height
- Letter spacing
- Decoration
- Letter case
* Fix width settings not working
* Fix align doesn't work with Width settings
* Fix width setting not working in Single product block
* Fix - Default button is shorter on the frontend
In Editor default and outlined button has the same height. Outlined button in the frontend as well. But default button on the frontend is shorter (smaller padding)
More info: https://github.com/woocommerce/woocommerce-blocks/pull/8781#issuecomment-1477527049
* Fix - background color not matching when GB is enabled
* Fix - 100% width button exceeds the container
Fix following issues:
- "Select Options" or "View products" for variable and grouped products don't respect the container max width
- Also, for small width (25%) they are wider
More info: https://github.com/woocommerce/woocommerce-blocks/pull/8781#issuecomment-1477527049
* Fix: Width setting not working in All Products block
This commit fixes the width setting not working in the All Products block.
* Keep other classes along with Width setting classes
`block.attributes.className` should be kept along with the width setting classes.
```
className: classnames( block.attributes.className, {
[ `has-custom-width wp-block-button__width-${ block.attributes?.width }` ]:
block.attributes?.width,
} )
```
* Translate styles label in block configuration
* Fix _n usage to use plural and singular correctly
* Replace switch condition with if else
- Replace switch condition with if else for better readability.
* Add packageCount in LocalPickupSelect component
- packageCount prop was missing from LocalPickupSelect component. Add packageCount in LocalPickupSelect component.
---------
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Niels Lange <info@nielslange.de>
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* First try to render Product Arhcive template as blocks
* First iteration of the whole blockified product archive template
* Add tests for Single Product Details block
* Extract a blockified Product Archive Template to the templates
* Add templates to tsconfig.json so the files are resolved as part of the core code
* Add a encouragement note to use blockified version IF migration is available
* Add a Row block wrapping Product Results Count and Catalog Sorting blocks
* Move blockified product-archive from templates/ to assets/ directory
* Remove unnecessary margin from Product Results Count block
When used in a Row block in a blockified Archive Product template, Product Results Count had additional unnecessary margin which caused misalignment with the Catalog Sorting block
* Fix TypeScript error
* Update the description of the Classic Template Editor placeholder
* Remove unnecessary entry in tsconfig.json to include templates directory
It was added couple of commits earlier, since the template was kept there, but it was decided to move it to assets directory, so entry is no longer necessary
* Move the to
* Differentiate the Classic Template placeholder description depending on the availability to convert to Products block
* Add the initial basis for the Add to Cart button
* Add E2E test that the Classic Template can be replaced with the blockified version
* Abandon writing E2E tests for now, as there's a problem to run them locally
* Trigger the single product add to cart action for each product type.
* Syntax improvement
* Set margin for Catalog Sorting to 0, so it aligns properly when used in blockified Archive Product template
* Make the blockification config, so it covers the Product Archive as well as Single Product templates
* Move the product-archive specific functions from classic-template/index.tsx to the product-archive.ts
* wip: create block structure and add initial styles
* Add alignment option to the Store Notices block and make the blockified template blocks aligned wide
That is required, so the Classic Template layout is preserved
* Create single-product.ts file which is a placeholder for the blockified Single Product template
* Add block details to the SingleProductDetails.php file
* Make Blockified Product Archive template inherit the align attibute
* Simplify the interface of blockified templates
Expose function instead of two functions for allowing and disallowing conversion
* Add a BlockifiedTemplate type
* Rename and simplify the function checking if conversion of classic template to block version is possible
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Align the variable naming to use instead of
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* Pass the Classic Template attributes to the blockified template instead of getting it from data store
* Include Breadcrumbs block in the Blockified Product Archive Template
* Consume alignment attributes of Catalog Sorting in the PHP render function
* Consume alignment attributes of Breadcrumbs in the PHP render function
* Show conversion button with label and description
* Add conversion placeholder (until we have all the blocks implemented)
* Remove align support from Catalog Sorting and add to Store Notices block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* Extend the get_classes_and_styles_by_attributes method with align and text_align attributes
* address CSS feedback
* Add Archive Title block to the Blockified Classic Template
* Minor getRowBlock function refactor
* add support for the custom classname
* remove save function
* Add property to the classic templates and base the config on it instead of placeholder
* Add separate blockified template for a Product Search Results
* Pass attribute from classic template to No Results block in Product Search Results
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* Extract the common functions between blockified archive-template and product-search-results to utils
* Enable 'Inherit query from template' in Products block by default when converting the Classic Template to blockified one
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* Improve the naming of BlockifiedTemplateConfig type
* Differentiate Product Catalog and Products By * templates. The latter include Term Description block
* improve logic and increase coverage of unit test
* Change unclear ProductsBy to ProductTaxonomy in regards to classic template conversion
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Revert the margin fix which was added already on trunk
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Add default Single Product HTML template
* Fix style issues when adding blocks inside group/stack/columns blocks
* Add Related Products to the default single product template HTML file
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* wrap up default single product html
* remove classname
* add blocks
* improve code
* Remove !important statement from Product Image Gallery block css
* Change width of Product Image Gallery block to initial instead of unset
* Wrap up default single product html template (https://github.com/woocommerce/woocommerce-blocks/pull/8632)
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* Add tests for Single Product Details block
* Add the initial basis for the Add to Cart button
* Trigger the single product add to cart action for each product type.
* wip: create block structure and add initial styles
* Add block details to the SingleProductDetails.php file
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* address CSS feedback
* add support for the custom classname
* remove save function
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* improve logic and increase coverage of unit test
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* wrap up default single product html
* fix: related products and grouped products result woocommerce/woocommerce-blocks#8589
* remove classname
* fix crash
* update template
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
* Fix images width in the Single Product page
* Remove the !important attribute from the Product Image Gallery block
* fix sku block
* improve layout
* improve layout
* improve layout
* improve layout
* improve layout
* update label
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
* Replace single quote with the encoded version %27 for URL comparison
This is required as as removeQueryArgs() function uses decodeURIcomponent method which doesn't encode single quotes (') while it was still encoded in the original URL (%27). So when the single quote was in a query param, for example as a search term, it caused endless redirection loop.
* Replace single quote with the encoded version %27 for URL comparison in Filter by Rating
* refactor the solution so it encodes the href rather than decode the newly created URL
* Refactor the normalisation
* Add tests to normalisation function
* Add default Single Product HTML template
* Fix style issues when adding blocks inside group/stack/columns blocks
* Add Related Products to the default single product template HTML file
* Remove !important statement from Product Image Gallery block css
* Change width of Product Image Gallery block to initial instead of unset
* Wrap up default single product html template (https://github.com/woocommerce/woocommerce-blocks/pull/8632)
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* Add tests for Single Product Details block
* Add the initial basis for the Add to Cart button
* Trigger the single product add to cart action for each product type.
* wip: create block structure and add initial styles
* Add block details to the SingleProductDetails.php file
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* address CSS feedback
* add support for the custom classname
* remove save function
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* improve logic and increase coverage of unit test
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* wrap up default single product html
* fix: related products and grouped products result woocommerce/woocommerce-blocks#8589
* remove classname
* fix crash
* update template
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
* Fix images width in the Single Product page
* Remove the !important attribute from the Product Image Gallery block
* fix sku block
* improve layout
* fix header and footer template parts declaration
---------
Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
* Use attributes provided to save function in product-price block
* remove save function and use the shared one
* fix import
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Remove Single Product Block
* remove more files that belong the Single Product block
* fix php linter error
* remove Product Tag List and Product Category List blocks
* Prevent checkout when no shipping rates available
- Add the validation error in ShippingSelector to prevent checkout when no shipping rates available.
- Add notice to Checkout processor so that notice appears after clicking on place order button.
* Fix TypeScript error in checkout shipping method block
- Make multiple prop as optional in RatePrice component to fix TypeScript error.
* Product Search Results: fix the preview when the Inherit Query option is enabled
* create a component to make the code more readable
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Fix local pickup price in the shipping type selector
- While calculating min and max value for local pickup, if the rate is not for local pickup, it will take already calculated lowest value instead of comparing it with the value of other shipping rate.
* Add the typecasting for price and tax to fix tax calculation
- We were concatenating the two strings instead of adding the integers. Add the typecasting for price and tax to fix it in local pickup.
---------
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
* Add `renderInCartAndCheckout` attribute and toggle
* Show setting only when inserted in a template
* Don't render the mini-cart if the setting is disabled
* Stop rendering the mini-cart if the setting is false
* method to snakecase
* Make the attribute a string
In the future we may want to add more rendering styles, so a boolean wasn't the
best option, a string will allowed us more than two options
* Change toggle copy
* Get the default store state
We are merging the Country & State fields. So, we should get both
default values
* Merge the Country & State fields
We merged both fields in the Pickup Location form modal
We can see a similar example in `WooCommerce -> Settings -> General`
* Clean up the code
* Show the state text field above the country select
* Create some util functions
* Refactor the Form component
* Display a user friendly country and state in admin
* Fix country defaulting to "Afghan" bug
* Add client side postcode validation
* Prevent server-side validation
* Adjust translation
* Only validate postcode if country is available
* Specify return type of isPostcode()
* Convert function to static variable set
* Refactor <ValidatedTextInput> for postcode validation
* Refactor customValidationHandler
* Use customValidationHandler as intermediate function
* Hyphenate file names
* Update packages/checkout/utils/validation/is-postcode.ts
Co-authored-by: Mike Jolley <mike.jolley@me.com>
* Normalise postcode on input
* Fix usage of out of date value from input field
---------
Co-authored-by: Mike Jolley <mike.jolley@me.com>
* Add ExperimentalOrderLocalPickupPackages slot fill
* Render ExperimentalOrderLocalPickupPackages in local pickup block
* Update docs to include ExperimentalOrderLocalPickupPackages
* Use LocalPickupSelect component when rendering local pickup options
* Add CartCheckoutUtils class
This class will store reusable methods relating to Cart/Checkout Blocks, i.e. whether they are used on the Cart/Checkout page.
* Update ShippingController to use the new CartCheckoutUtils function
This will reduce code duplication when checking if the Cart/Checkout blocks are in use on the Cart/Checkout page.
* Add filter to remove shipping settings when Cart/Checkout are default
* Ensure setting displays correctly if cart is default but not checkout
* Add tests to ensure core shipping settings update correctly
* Add setCartCheckoutPages function to update set the cart/checkout page
* Force shipping to be enabled if the Checkout block is in use.
* Add filter to override cost requires address option
* Add shippingCostRequiresAddress option
* Check if the address is required before showing rates
* Show shipping rates in editor
* Add shippingCostRequiresAddress attribute to shipping methods block
* Update frontend type to show shippingCostRequiresAddress is a prop
* Add control to toggle shippingCostRequiresAddress option
* Show address notice in the correct scenario
* Send shippingCostRequiresAddress to Block in front end context
* Add e2e test for editor control
* Add e2e tests for shipping options on the front end
* Add updateAttributeInSiblingBlock function
* Add shippingCostRequiresAddress to shipping method block
* Ensure attribute is updated in both blocks when editing
* In Shipping Methods Block, show correct component based on block setting
* Show correct block in editor
* Remove broken test from PR
* Clean up updateAttributeInSiblingBlock
* Add setCartCheckoutPages function to update set the cart/checkout page
* Add tests to ensure core shipping settings update correctly
* Add isAddressComplete function
Borrowed from woocommerce/woocommerce-blocks#8141
* Check if the address is required before showing rates
* Show shipping rates in editor
* Show address notice in the correct scenario
* Add e2e tests for shipping options on the front end
* Ensure errorId is passed to StateInput
* Add fullShippingAddressPushed action to wc/store/cart
* Add fullShippingAddressPushed case to reducer
* Ensure fullShippingAddressPushed is set when initialising cart store
* Add fullShippingAddressPushed selector and default state entry
* Add shippingAddressHasValidationErrors util function
* Do not overwrite addresses when selecting a rate
* Set whether full address has been pushed when saving address changes
* In Shipping Methods Block, show correct component based on block setting
* Don't show from price if rates should be hidden until address entered
* Check city validation errors to assert if shipping address is valid
* Rename merchant.js to merchant.ts
* Move local pickup functions to common merchant util
* Update local pickup tests to use common merchant utils
* Add test to ensure setting toggles in both blocks
* Add navigating to settings and saving in merchant util
* Create addPickupLocation merchant util
* Add test for local pickup and require full address
* Make sure correct conditions are met to show shipping options
* Ensure checkbox is checked during local pickup tests
* Unset the checkbox when tests are finished running
* Update checkout block fixture
* Prevent error in unit tests
* Import validation store key from constants
Required because importing from the index causes the validation data store to register twice
* Update checkout terms test to wait for button not to be disabled
* Revert "Add isAddressComplete function"
This reverts commit 9967dc0d4f10cf638859ae085e6f4cc2901dd299.
* Fix up typescript of checkout filters
* Clear cached values when adding new filters
* Allow href on WPButton type
* Specify generic type of getSetting for checkout page link
* Apply filters to Proceed to Checkout button
* Add unit tests for proceed to checkout button and link filters
* Make cart extend a plain object
* Pass cart in args for proceed to checkout filters
* Add documentation for proceed to checkout filters
* Add unit test for multiple filter registration
* Change word to bump stuck GitHub actions
* Apply consistent casing to test names
* Add third party local pickup method to woo-test-helper plugin
* Add test to check for checkout with local pickup
* Ensure local pickup is disabled when done with tests
* Add a more reliable selector for the "use same address for billing" box
* Prevent local pickup rates showing if local pickup is not enabled
* Check billing details after placing local pickup order
* Change local pickup unit test so rates dont show if localPickup disabled
* Use existing const instead of getSetting
* Update tests to mock constant from @woocommerce/block-settings
---------
Co-authored-by: Niels Lange <info@nielslange.de>
* Add LocalPickupSelect component
This will be used to render the local pickup options and also display a title if there are more than one package (e.g. if WC subs adds them)
* Add tests for LocalPickupSelect component
* Make title optional
* Add packageCount as an option to LocalPickupSelect
* Revert "Add packageCount as an option to LocalPickupSelect"
This reverts commit 10b1dc9497aa6c4329aee7e74e1404cb9645c3b9.
* Add ackage count to LocalPickupSelect
* Add package count and remove unused variable from renderPickupLocation
* Add border support to mini cart contents
* Fix buttons in firefox when logged out
* Fix mini cart in all browsers
* Fix border not visible on mobile because of the admin bar
* Add feature flag to the experimental border
---------
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Product Rating: Normalize the height of rating icons and the Add review link
* Products: Update inner blocks margins.
* Product Rating: Remove css changes from this PR.
* Products patterns: Remove px values and update the default pattern template.
---------
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* Add tests for Single Product Details block
* Add the initial basis for the Add to Cart button
* Trigger the single product add to cart action for each product type.
* wip: create block structure and add initial styles
* Add block details to the SingleProductDetails.php file
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* address CSS feedback
* add support for the custom classname
* remove save function
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* improve logic and increase coverage of unit test
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* remove unnecessary change
* fix compatibility layer when the Single Product template has the classic block
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
* Make Mini Cart drawer close button inherit the color
* Fix Mini Cart drawer close button alignment
* Increase opacity when Mini Cart drawer close icon is hover, focused or active
This PR is meant to improve the UI and UX behind the Attributes filter
within the Inspector Controls of the “Products (Beta)“ block.
Also included:
* Refactor `useProductAttributes` hook
* Move it into the shared hooks.
* Fetch both terms AND attributes via the API (previously,
we got the attributes from the settings, but we'd get
partial objects compared to the API? Maybe a follow-up
to this could be to check why the attributes stored in
the settings are incomplete?)
* Make sure the return values match the ones expected
from search items.
* Remove attribute-related types from PQ directory
* Improve functionality of `SearchListControl`
* Allow the search input to be a Token based input.
* Allow for search input to search even collapsed properties.
* Use core `CheckboxControl` instead of radio buttons for
items having children (includes undeterminated state).
* Enable removal of tokens from the input
* Improve styles:
* Refactor classnames for `SearchItem`.
* Add more semantic classes.
* Align count label and caret to the right.
* Make caret switch direction on expanded.
* `cursor: pointer` on collapsible items.
* Indent children of collapsible items.
* Correctly pass through class names to search item
* Enable keyboard navigation for collapsible items
* Add link to manage attributes
* Change label inside the inspector controls
* Make search list attached when token type
* Implement more sophisticated behavior of parent checkbox
* If indeterminate or unchecked, it will check all children.
* If checked, it will uncheck all children.
* Remove hardcoded `isSingle` from `expandableSearchListItem`
* Remove old view switcher component (not used)
* Switch in list view
* useSelect
* Optional selection of parent block on changing view
---------
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
* Add tests for pushChanges and dirty props
* Update assets/js/data/cart/test/push-changes.ts
Co-authored-by: Mike Jolley <mike.jolley@me.com>
---------
Co-authored-by: Mike Jolley <mike.jolley@me.com>
* Make the customer account icon bigger to match the mini-cart one
* Add variation to increase the icon size for new blocks
* Improve class name
* Add variation explanation
* Add default attributes
Manish Menaria
Hritik Chaudhary
Roy Ho
Albert Juhé Lluveras
Tom Cafferkey
Mike Jolley
Thomas Roberts
Alexandre Lara
Niels Lange
Luigi Teschio
Hritik Chaudhary
Daniel Dudzic
Saad Tarhi
Seghir Nadir
Tarun Vijwani
Dennis Jonda
Patricia Hillebrandt
Lucio Giannotta
Danilo Parra Jr
Alba Rincón
Kirtan Gajjar
Siddharth Thevaril
Dharmesh Patel
Karol Manijak
Darren Ethier
leonardo lopes de albuquerque
Daniel W. Robert