* Add price range filter to Product Collection block
This update introduces a price range filter feature to Product Collection. Changes include:
1. Constants Update:
- Added `priceRange` as undefined in `DEFAULT_QUERY` and `DEFAULT_FILTERS` in `constants.ts`.
2. Style Adjustments:
- Added CSS for `.wc-block-product-price-range-control` in `editor.scss` to align the input text to the end.
3. Component Integration:
- In `inspector-controls/index.tsx`, the `PriceRangeControl` component is now imported and integrated.
4. New Components:
- `PriceTextField.tsx` and `PriceRangeControl/index.tsx` have been created to handle price range inputs in the Product Collection block.
5. Backend Integration:
- `PriceRange` interface added in `types.ts` for type support.
- In `ProductCollection.php`, a filter (`add_price_range_filter`) is added to modify the main query based on the price range, including adjustments for tax considerations.
Overall, this enhancement allows users to filter products within a specific price range. The backend adjustments ensure that the filtering respects tax settings and displays accurate prices.
* Fix formatting
* Fix: Price range filter not working on Editor
* Improve: Share logic between Frontend & Editor
* Add changelog
* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce
* Remove duplicate changelog file
* Enhanced Input Control for Price Fields
Key changes include:
1. **Switch to Input Control**: Replaced the NumberControl component with the more versatile InputControl. This offers better handling of currency formatting and user input.
2. **Currency Formatting Logic**: Added robust logic for formatting numbers according to the currency settings. This includes handling thousand separators, decimal places, and currency symbols.
3. **String-to-Number Conversion**: Implemented a function to convert user-entered strings back to numbers, accounting for currency symbols and separators. This ensures accurate parsing of user input for processing.
4. **Input Handling Improvements**: Modified the onChange handlers for minimum and maximum price inputs. Now, they correctly handle edge cases like undefined or zero values, maintaining consistency in the user interface and data processing.
* Refactor price range query handling
1. Introduction of a new method `get_price_range_query_args()` to encapsulate the logic for handling price range queries, especially for the two edge cases:
- Prices excluding tax displayed including tax.
- Prices including tax displayed excluding tax.
2. Removal of direct conditionals in the `get_query_results()` method, replacing them with a call to the new `get_price_range_query_args()` method. This makes the code more modular and easier to understand.
This refactor enhances readability and maintainability of the code, ensuring that special cases in price range filtering are handled more effectively.
* Remove unnecessary suffix prop
* Refactor PriceTextField formatting logic for currency
1. Conditional application of thousand separators: The code now checks for the existence of `currency.thousandSeparator` before applying it. This prevents potential errors when the separator is undefined.
2. Simplified decimal separator handling: Introduced a fallback for the decimal separator, defaulting to a period ('.') if not specified by the currency settings.
3. Enhanced readability and documentation: Added comments to clarify the purpose of code blocks, especially where currency symbols are added or removed, and where value normalization occurs.
4. Function renaming for clarity: Renamed `formatValueWithCurrencySymbol` to `formatCurrency`, which better reflects its purpose.
* Fix onBlur issue with PriceTextField component
Refactored the PriceTextField component to utilize useState for better state management. This change introduces a local state variable, 'newValue', to store the current value. The state updates occur in the handleOnChange function, ensuring that the component's state is managed efficiently. Additionally, a new function, handleOnBlur, is implemented to handle the onBlur event, updating the component's state when focus is lost. The handleEnterKeyPress function captures the 'Enter' key press, providing a more user-friendly experience by allowing users to confirm their input with the Enter key.
* Fix linting error
---------
Co-authored-by: github-actions <github-actions@github.com>
* Reviews by Product block: fix encoded in input aria-label
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
* add: active filters block
* update text domain
* chore: linting
* use template string instead of concat
* add experimental flag to register block type calls
* chore: update comments
* feat: register active rating filter data
* fix: unique navigation id when collection filters are added outside product collection
* fix: active filter rating id
* fix: return the href
* chore: phpcs
* Introduce Additional Fields API for Checkout Block https://github.com/woocommerce/woocommerce-blocks/pull/12073
* revert test to what it was
* Default to text, if the type supplied is not supported throw an error
* Add type for options
* Return null if somehow the select made it through without options
* Make select fields type enum and add options to schema
* Lint fixes
* Update plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/address-form/address-form.tsx
Co-authored-by: Niels Lange <info@nielslange.de>
* Update plugins/woocommerce/src/Blocks/Domain/Services/CheckoutFields.php
Co-authored-by: Niels Lange <info@nielslange.de>
* Update checks to log errors and fail gracefully
* Add field id to class names
* Fix lint error
* Fix short array use
* Introduce Additional Fields API for Checkout Block https://github.com/woocommerce/woocommerce-blocks/pull/12073
* Default to text, if the type supplied is not supported throw an error
* Lint fixes
* Introduce Additional Fields API for Checkout Block https://github.com/woocommerce/woocommerce-blocks/pull/12073
* add support for registering checkboxes
* remove extra error log
* add styling
* fix rebase conflit
* fix rebase conflit 2
* fix linter errors
* address review comments
* add warning for checkbox
* fix changes
---------
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
* Remove padding for the products query with background
* Add changefile(s) from automation for the following project(s): woocommerce-blocks
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
* Introduce Additional Fields API for Checkout Block https://github.com/woocommerce/woocommerce-blocks/pull/12073
* add changelog
* Auto load the Blocks/Domain/Services/functions.php file
* add changelog
* revert test to what it was
* Update text domain for translations
* Ensure address data is added on the cart block too
* fix lint problem
---------
Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
* Product Image Gallery: Add transform to Product Gallery block
* Single Product Template: Transform to blocks with new Product Gallery block
* Ensure we first check for block existance
* Add changelog
* Add/delete changelog file
* Change border color to Gutenberg 100 for Cart and Checkout blocks
* Change form input color to Gutenberg 900 for Cart and Checkout blocks
* Fix additional border colors of Checkout block
* Update borders and form field colors in Cart Block
* Change border color to $universal-border-light
* Change border color for cart line items to $universal-border-light
* Change form input fields border color to $universal-border-dark
- Add $universal-border-dark color variable for woocommerce/woocommerce-blocks#1e1e1e on white.
* Fix colors of text area border and form steps
* Change form input fields border color to $universal-border-dark
- Add $universal-border-dark color variable for woocommerce/woocommerce-blocks#1e1e1e on white.
* Fix form steps
* Update universal dark border rgba value
- Update universal dark border rgba value from rgba(0, 0, 0, 0.882) to rgba(17, 17, 17, .80) to keep it consistent with universal-border colors
* Update $universal-border-light color
* Update the opacity of the borders
* Update the border color to rgba (17, 17, 17, 0.12)
* Roll back $universal-border-light value to the original value: 0.115
* Remove Opacity and pass it as argument in with-translucent-border
- We have with-translucent-border option that accepts border and opacity for pseudo elements.
* Remove additional spaces
* Replace with-translucent-border with normal border
- Since we're are not mixing the opacity to the border color so we don't need to use mixin with-translucent-border.
* Fix applied css and add low contrast Color usage details
- Fix minor CSS as per the standards.
- Add comments for universal border colors that they're low contrast colors and should be used for decorative elements only
* Fix border gap and double border for multiple shipping packages
* Fix payment method borders and Cart line items borders
- Change border bottom to border-top for cart line items.
- Fix payment method radio control borders.
* Fix local pickup border
- Local pickup was using with-translucent-borders so it has some opacity, changed it to border-bottom.
* Add border-bottom to cart items
* Remove additional border from Cart items
* Fix radio and checkbox borders as per the design
* Fix shipping method borders and background color as per the design.
* Force align left on the description for the local pickup options.
* Update border color in quantity selector component
* Fix Shipping options radio selection alignment
- Add left padding to wc-block-components-shipping-rates-control__package element.
* Update colors and variables
* Change checkbox and radio button colors
- Change checkbox and radio button colors from rgba(25, 23, 17, 0.3) to rgba(25, 23, 17, 0.48).
* Remove bottom property from express payment style
* Center align view all link
* Add thumbnail count specific styling
* Product Gallery Thumbnails: Improve the responsiveness of the View All overlay text
---------
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
* Change the default for Mini Cart block
The Block Hooks API currently doesn’t allow for setting the default state of the block injected into content so this ensures the mini-cart block has a better default state for injection. The current default (displaying total value in cart) takes up more width increasing the risk of poor layout.
* Utilize Block Hooks to automatically inject mini-cart block.
* include experimental prefix on filters
* Fix filter name.
* remove experimental prefix.
On thinking about this, I don’t think these need to be experimental. They are intentionally provided as escape hatches for hosts/themes that want to opt-in/out so we’ll have to support them when this is shipped (at least until its no longer needed!)
* fix variable name!
* fix unit tests because of new default
* remove another incorrect text expectation
Defaults for the block affect this expectation.
* fix E2E tests
* Mini Cart Block: improve E2E test
* fix: improve check for the Product Collection block
---------
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
* Reorganise Columns controls and fix undefined problem in Product Collection settings
* Remove type condition in hasValue of Columns control
* Adjust the E2E tests locator to new changes
* Try env:restart instead of env:start
* Change env:restart to env:start again
* Try env:restart instead of env:start
* Change env:restart to env:start again
* Adjust heading level of cart and checkout template
* Replace button selector with label selector
* Try env:restart instead of env:start
* Change env:restart to env:start again
* Ensure to close welcome guide modal
* Adjust heading level of default template content
* Try env:restart instead of env:start
* Change env:restart to env:start again
* Try env:restart instead of env:start
* Change env:restart to env:start again
* Address existing TS issues
* View template in edit mode
* Keep certain tests skipped
* Fix broken tests after addressing TS issues
* Convert to tsx and replace proptypes by ts definitions
* Fix imports
* Fix noReviewsPlaceholder type
* Fix ts errors
* Use createHigherOrderComponent in withReviews
* Revert hoc change
---------
Co-authored-by: Niels Lange <info@nielslange.de>
* Add HTML entity decoding for product names in Hand-Picked Products control
In the Hand-Picked Products control within the product-collection inspector controls, a function for decoding HTML entities in product names has been added.
- A new utility function `decodeHTMLEntities` has been implemented. This function decodes HTML entities in a string, ensuring that special characters are correctly displayed in their human-readable form.
- The `transformTokenIntoProductName` function has been updated to utilize `decodeHTMLEntities`. Now, when a product name is fetched (either directly as a token or via a product ID), the HTML entities within the name are decoded.
- This enhancement ensures that product names containing characters like ampersands or other HTML entities are accurately displayed in the UI.
This change improves the readability and accuracy of product names within the Hand-Picked Products control, enhancing the user experience for store managers using WooCommerce Blocks.
* Update label and hide description
This commit updates the `HandPickedProductsControl` component. Specifically, the user-facing label for product selection has been changed from 'Pick some products' to 'Hand-picked Products'. Additionally, the `__experimentalShowHowTo` property has been added with a `false` value, to hide description. Corresponding changes have been made in the E2E test file `product-collection.block_theme.spec.ts`, where the filter name is updated to match the new label.
* Refactor: Replace custom HTML entity decoder with `@wordpress/html-entities`
Rationale:
- The shift to `@wordpress/html-entities` aligns with standard WordPress practices, ensuring consistency across the platform.
- Enhances maintainability by relying on a well-supported library rather than custom code.
- Simplifies the codebase by removing a redundant utility function.
This change enhances the robustness of our code and aligns with best practices in WordPress development.
* Product Gallery Thumbnails: Refactor sizing in the editor and the front end
* Product Gallery Thumbnails: Change default vertical alignment to top and better control the width of the thumbnails
* Product Gallery Thumbnails: Fix thumbnails cropping based on the 'Crop images to fit' setting
* Product Gallery Thumbnails: Revert thumbnails styling from woocommerce/woocommerce-blocks#11665
* Product Gallery Thumbnails: Update the default value of the cropImages setting to false
* Product Gallery Thumbnails: Refactor sizing in the editor and the front end
* Product Gallery Thumbnails: Change default vertical alignment to top and better control the width of the thumbnails
* Product Gallery Thumbnails: Restrict the bottom position thumbnails width based on the total number of thumbnails set
* Product Gallery: Remove hardcoded width for Thumbnails and the Large Image and update the width inside of the Dialog
* Product Gallery Thumbnails: Introduce thumbnails scaling based on the number of thumbnails
* Product Gallery Thumbnails: Fix editor thumbnails scaling
* Product Gallery Thumbnails: Remove unused column gap variable
* Product Gallery Thumbnails: Fix styling for vertical images
* Product Gallery: Remove the unused editor.scss file
* Product Gallery: Fix the placement of the Thumbnails block in the block template
* Product Gallery Dialog: Reset changes to the dialog
* update @wordpress/e2e-test-utils-playwright package
* don't update node version
* remove waitForSiteEditorFinishLoading function
* use visitSiteEditor util
* Product Gallery Thumbnails: Add code comments
* Product Gallery Thumbnails E2E: Fix the test checking the default position of the thumbnails
* Product Gallery E2E: Fix the test checking if the cropping setting works correctly
* Product Gallery Thumbnails: Hide the Thumbnails block if there aren't at least 2 thumbnails to display
---------
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
* Enable shrink columns option in Product Collection by default
* Improve tests about responsiveness
* Make regex allowing for floating pixels
* Related products should not use sticky and author attribute or have hardcoded queryId
* Bring back properties for Related Products as it's based on Propducts block, not Product Collection
* Enable shrink columns to fit by default in patterns
* Sync Interactivity API code with Gutenberg
* New store() API
* Store raw actions
* Update wc-interactivity-store implementation
* Replace `wc_store` with `wc_initial_state`
* Parse and populate initial state
* Allow store parts in `store()`
* Accept namespaces in directive paths
* Add $$namespace to directives' object values
* Make namespace parsing more robust
* Use DeepPartial type for store parts
* Do not pass `rawStore` to `afterLoad` callbacks
* Simplify `store()` a bit
* Implement `privateStore()`
* Sync context directive with Gutenberg
* Refactor scope and extract getters per scope
* Add namespace to getters and actions
* Remove current privateStore implementation
* Remove `afterLoad` option from `store`
* Use same proxy handlers for ns, getters and actions
* Set scope inside `evaluate`
* Refactor proxy handlers
* Improve types a bit
* Catch errors in async actions
* Implement stacks for scopes and namespaces
* Implement `getElement`
* Change directives object structure
* Remove unnecessary import
* Implement private stores
* Return value from sync actions
* Minor optimizations and improved comments
* Don't use async inside `data-wp-watch`
* Use a single Provider in context directive
* Remove DeepPartial type
* Do not check if element exists
* Add the `current` prop of state inside the scope
* Move getters outside scope
* Fix wc-key assignment
* Fix missing `navigate` in directives
* Fix namespace not being picked in the same element
* Deep merge raw stores instead of proxied ones
* Fix namespace assignment
* Allow forward slashes in namespaces
* Migration of Product Collection and Product Button blocks to the new `store()` API (https://github.com/woocommerce/woocommerce-blocks/pull/11558)
* Refactor Product Button with new store() API
* Use `wc_initial_state` in Product Button
* Fix namespace
* Remove unnecessary state
* Test namespaces in directive paths
* Add test context with namespace
* Simplify woo-test context
* Move addToCart and animations to a file
* Do not pass `rawStore` to `afterLoad` callbacks
* Move callbacks and actions back to the main file
Because the animation was broken.
* Remove selectors in favor of state
* Use default ns in `getContext` for state and actions
* Remove `afterLoad` callback
* Remove unnecessary ns
* Fix getContext in add-to-cart
* Replace namespace and delete unnecessary store
* Pass context types only once
* Use an alternative for requestIdleCallback
* Add previous react code for notices
* Add namespace to Product Collection block
* Replace getTextButton with getButtonText
* Add block name to the ProductCollection namespace
* fix style HTML code
* Remove circular deps error on the Interactivity API
* Product Gallery block: Migrate to new Interactivity API store (https://github.com/woocommerce/woocommerce-blocks/pull/11721)
* Migrate Product Gallery block to new Interactivity API store
* Fix some references
* Add missing data-wc-interactive
* Fix an additional namespace
* Remove unnecessary click handler
* Dialog working
* Refactor action names
* Reindex PHP array
There was some missing indexes, which turned the array into an object in JS.
* Remove unused event handlers
* Move next/previous logic to external function
* Move StorePart util to the types folder
* Rename namespace to `woocommerce/product-gallery`
* Undo product collection namespace renaming
* Remove unnecessary namespace
* Don't hide the large image on page load
* Minor refactorings
* Fix eslint error
* Fix php cs errors with spacing and double arrows alignment
* Disable no-use-before-define rule for eslint
* Disable @typescript-eslint/ban-types rule for eslint
* Fix parsed context error in e2e tests
* Fix context parser for Thumbnail image
* Move store to the top of the frontend file
* Add interactivity api utils to the @woocommerce/utils alias
* Replace deprecated event attribute
---------
Co-authored-by: Luis Herranz <luisherranz@gmail.com>
Co-authored-by: David Arenas <david.arenas@automattic.com>
Co-authored-by: roykho <roykho77@gmail.com>
---------
Co-authored-by: David Arenas <david.arenas@automattic.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: roykho <roykho77@gmail.com>
* Fix error when closing product gallery dialog with keyboard escape key
* use wc_initial_state instead of wc_store
---------
Co-authored-by: Luis Herranz <luisherranz@gmail.com>
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: roykho <roykho77@gmail.com>
* Update Interactivity API JS files
* Disable TS checks in the Interactivity API for now
* Add new SSR files
* Replace wp_ prefixes with wc_ ones
* Replace wp- prefix with wc-
* Replace guternberg_ prefix with woocommerce_
* Remove file comments from Gutenberg
* Rename files with `wp` prefix
* Fix code to load Interactivity API php files
* Remove TODO comments
* Replace @wordpress with @woocommerce
* Update Webpack configuration
* Fix directive prefix
* Remove interactivity folder from tsconfig exclude
* Add client-side navigation meta tag code
* Remove unneeded blocks.php file
* Fix store tag id
* Register Interactivity API runtime script
* Fix Interactivity API runtime registering
* Add Simple Price Filter block
* Remove all files related to directive processing in PHP
* Use values directly for SimplePriceFilter SSR
* Reset pages to 0 when changing filter
Note: we also need to do this with `/page/x`
* wip
* phpcs
* register price filter as inner block
* try: render block using save
* add types
* use min range var instead of 0
* inject dynamic data
* query price data in editor
* better injecting interactivity data
* remove rounding
* Product Collection Data endpoint doesn't care about current query so we remove the context for now
* extract data injecting as a method, possbily a trait in the future
* add sidebar setting
* duplicating the markup in php render callback for safety
* remove directive from edit component
* show prices without decimal
* use final class
* use sample collection data response
* prepare for multiple styles support
* use collection data from context
* cleanup props and props passing
* pass only necessary states
* retire heredoc in favor of late escaping
* reorganize style
* inherit style from current price filter react component, pre extract the component for multiple display style support
* keep minPrice smaller than max
* remove unnecessary active handler logic
* update folder structure
* avoid whitespace change
* clean up
* title
* move inspector to component folder, ready to be extracted to inner block
* block icon
* block name
* name
* use inner block for view
* inner block view switcher
* try: process data in Collection Filtes block only
* wip: query collection data from collection filters block only
* provide all context from collection filters block
* simplify context passing
* feat: use default attribute to define filter type of view block
* rename
* remove price block
* rename price slider to price, default price filter should be a slider
* type cleanup
* fix ancestor block name
* only passing the collection data down
* wip
* recusive
* editor preview
* refactor: data fetching, context passing, and code organization
* initial attribute filter block
* feat: attribute selector
* inspector control
* wip
* break the edit into smaller components
* wip: editor component
* extract checkbox list
* wip editor preview
* show count checkbox list
* fix param aggregation for attribute filter blocks
* post merge fix
* fix param aggregation for attribute filters
* fix: set correct selected attribute
* WIP checkbox list
* WIP checkbox list
* avoid action name conflicts
* Checkbox list front end
* phpcs
* update context on input, navigate on change
* fix: attribute selection
* dropdown
* remove isDeepEqual
* add: warning when attribute has no products or no attribute is selected
* update type
* update type
---------
Co-authored-by: David Arenas <david.arenas@automattic.com>
Co-authored-by: Luis Herranz <luisherranz@gmail.com>
Manish Menaria
Niels Lange
Daniel Dudzic
Albert Juhé Lluveras
Tung Du
Seghir Nadir
Alba Rincón
Sam Seay
Roy Ho
Thomas Roberts
Christopher Allford
Ron Rennick
Arsany Benyamine
Tarun Vijwani
Mike Jolley
Karol Manijak
Luigi Teschio
Darren Ethier
David Arenas