As much as we can, we should use core blocks when the functionality is mostly overlapping. In the case of the Post Title block, we don't need to add and maintain our own block most likely, so we should just brand the Post Title block instead.
This PR does the following:
* Creates a new block variation based on the core “Post Title” called “Product Title”.
* Brands it as our old “Product Title” atomic element.
* Use this variation as the default within the Product Query template.
* Also removes some old code used for variations before the namespace attribute was available on the core Query Loop and repurposes it to create this variation.
* Product Query: add Feedback Prompt in inspector
The prompt doesn't appear at the very bottom as there isn't
currently any straightforward way to do this in the block variation.
More investigation is required.
* Product Query: Change icon, description and name
* Product Query: switch to Feature plugin flag
* Add all currently available atomic blocks to the default Product Query template
* Update feature flags doc
* Change SKU and Stock Indicator feature flags
* Change feature flags docs
* Add title prop to the `FeedbackPrompt` and add a title to the Product Query one
* Hacky solution to display the feedback block at the bottom
The order of the inspector controls is set in Gutenberg.
We can hack our way down by hooking to the “color” group and
display our feedback there.
Other panels would be displayed below that if added, such as borders
and margin.
* Reduce Product Query default template
* Fix e2e tests after Product Query block name change (https://github.com/woocommerce/woocommerce-blocks/pull/7840)
* Product Query: Add a better default pattern (https://github.com/woocommerce/woocommerce-blocks/pull/7833)
* Product Query: Add a better default pattern
* Product Price: Add bottom margin
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
* Align the font-size of checkbox-control component to the price slider amount
* Align the font-size of Price Slider Button to the price slider amount
* Align the font-size of Filter Reset Button to the price slider amount
* Align the font-size of Clear All Button to the price slider amount
* Align the font-size of Apply button in Editor to the price slider amount
* Align the font-size of Apply button in Frontend to the price slider amount
* Align the font-size of Price Slider Amount to the standard size
* Align the font-size of Active Filter chips to the price slider amount
* Align the font-size of Filter by Price (text) to the price slider amount
* Align the font-size of Filter by Attribute (dropdown) to the price slider amount
* Align the font-size of placeholder of Filter by Attribute (dropdown) to the price slider amount
* Change font-size for text in filters from font-size(smaller) to font-size(smaller)
As a result of discussion in PR it was agreed to check the styles with bigger font size hence the change
* Align the font-size of input text of Filter by Attribute (dropdown) to the price slider amount
* Change margin-right of checkbox-control to relative value so it better adapts to the fonts
* Product Query: Fix pagination issue
* Product Query - Add support for the Filter By Price Block woocommerce/woocommerce-blocks#6790
Product Query - Add support for the Filter By Price Block
* fix query relation
* fix on sale query
* Product Query - Add support for the Filter By Attributes block woocommerce/woocommerce-blocks#6790
Product Query - Add support for the Filter By Attributes block
* fix bugged pagination and on-sale filter after refactor
* address feedback
* Product Query - Add support for the Filter By Stock Block woocommerce/woocommerce-blocks#6790
Product Query - Add support for the Filter By Stock Block
* Fix filter blocks: the data (e.g: max price or stock-status) match the variation woocommerce/woocommerce-blocks#7245
fix filter blocks: the data (e.g: max price or stock-status) match the variation
* rename allowControls to allowedControls
* add support to the global query
* fix eslint error
* bot: update checkstyle.xml
* Update src/BlockTypes/ProductQuery.php
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
* fix global query generation
* bot: update checkstyle.xml
* try: refactor merge_queries
* remove debug code
* fix: unpack assoc array php 7.4
* try: refactor merge_queries to take any form of input without unpacking
and preparing the input arrays
* add missing query vars
* add feature flag
* updates comment
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
* Rename Active Product Filters block to Active Filters
* Rename wc-block-active-product-filters__placeholder to wc-block-active-filters__placeholder
* Rename active filters fixture
* Add support for “Popular Presets” for PQ block
This commits achieves the following:
* Adds a section in the inspector control called “Popular Presets”,
which contains a dropdown with popular presets.
* Adds support for the first preset: “Best selling products”.
By selecting this, users can sort products by total sales.
* Switches the order of the custom inspector controls and the default
Query Loop inspector controls: our controls will be now on top
as per the latest design spec (see pdnLyh-2By-p2).
* Restricts the allowed Query parameters to the sort orders we want to
allow according to the latest design spec (disabling title and date).
* Removes the core “Order By” dropdown.
* Refactor `setCustomQueryAttribute` to `setQueryAttribute` because
since a few iterations, our custom query attributes are not deeply nested
anymore, and this function can be used for the normal query too.
* Add back-end support for sorting by Best Selling via the Product Query block
* Adds the `popularity` value as an allowed value for `orderby` on
`product` REST API calls.
* Handles the query differently if the `orderby` value is one among the
custom ones.
* Add actions and selectors for new paymemt status
* Remove set_complete from reducer
* Replace all usages of getCurrentStatus with specific sepectors
* Replace all `setCurrentStatus` with individual actions
* Update docs
* Removed currentStatus
* bot: update checkstyle.xml
* Update docs/third-party-developers/extensibility/data-store/payment.md
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Address Thomas feedback
* Add link to deprecated message
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
* Remove isExpressPaymentMethodActive and paymentStatus.isDoingExpressPayment from the payment store
* Remove uneccessary paymentStatuses key from the payments store
* Move ValidatedTextInput and ValidationInputError to checkout package
* Include checkout package in tsconfig file
* Remove unnecessary index file
We export these components from packages/checkout/index.js instead
* Import ValidatedTextInput & ValidationInput error from checkout package
* Only add validationError.message when validationError is an object
* Explicitly add undefined to optional props
* Import isObject to test validationError
* Extend the HTML Input element attributes
* Use more performant useDispatch instead of dispatch
* Export component without withInstanceId hoc for testing
* Add tests for ValidatedTextInput
* bot: update checkstyle.xml
* Rename export of unwrapped component to have __
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Import Currency type from correct location
* Add type for productPriceValidation argument
* Default tabIndex to undefined
null is not an acceptable value for the tabIndex prop, but undefined is, so we should use that.
* Explicitly set type of CartLineItemRow to ForwardRefExoticComponent
* bot: update checkstyle.xml
* Change CartLineItemRow to extend React.RefAttributes
* bot: update checkstyle.xml
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Prevent padding from placeholder instructions to be overriden
Inside the AttributeFilter component we are using a component Placeholder from the @wordpress/components library. This component has its own styles applied to itself including the part related to the instructions that are displayed.
Currently there is no way to override the styles specifically for the instructions part so the only possible way is to force the style to be applied over the inner styles set by the Placeholder component.
* Add a wrapper to the instructions content and apply the styles to it
The initial idea was to force the style to be applied by using `!important` on the padding-bottom property. However, after discussing more about it, it was decided that a better alternative is to add the instructions content to the body of the Placeholder content instead of relying on the `instructions` prop of the component.
This way, instead of forcing the style to be applied which could cause some side effects in the future, we are wrapping the instructions content in an HTML element that we control and, thus, can modify the styles independently of the external library it's being used (@wordpress/components).
* Active Filters: Fix active filter grouping for Ratings and Stock Status
* bot: update checkstyle.xml
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Add type to imports that need it
* Add type to imports that need it
* Fix the sanitize lint error
* Include missing dep
* Remove check from deps
* bot: update checkstyle.xml
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
* Product Query: Fix pagination issue
* Product Query - Add support for the Filter By Price Block woocommerce/woocommerce-blocks#6790
Product Query - Add support for the Filter By Price Block
* fix query relation
* fix on sale query
* Product Query - Add support for the Filter By Attributes block woocommerce/woocommerce-blocks#6790
Product Query - Add support for the Filter By Attributes block
* fix bugged pagination and on-sale filter after refactor
* address feedback
* Product Query - Add support for the Filter By Stock Block woocommerce/woocommerce-blocks#6790
Product Query - Add support for the Filter By Stock Block
* Fix filter blocks: the data (e.g: max price or stock-status) match the variation woocommerce/woocommerce-blocks#7245
fix filter blocks: the data (e.g: max price or stock-status) match the variation
* disable phcs rules on top of the file
* replace parameter name
* fix eslint error
* Add PQ support for client-side.
Set up the block for PQ support and add necessary adjustments for the
editor. Will address dynamic save functionality in a following commit.
* Add dynamic render function for PQ support.
* Add dynamic render callback for SSR.
* Remove client-side Save function.
* Add PQ Context interface to shared type defs.
* Convert all block JS files to TS.
* Remove commented import from block file.
* Add typecasting to block function params.
As a workaround, added a general Record type but left a TODO to revisit
the proper object, as there is a mismatch in the shape of the default
object property types and the actual types.
* Update inserter behavior.
Allows for the ability to add the rating block from in the inserter
(as long as it's an inner block of the listed parents in the config).
Also disables the placeholder product selector from being rendered
unnecessarily (i.e., when the context ID is present).
* Update parent inner blocks config.
Reassign parent array to ancestor array which allows for blocks to be
included with more flexibility - i.e., added within groups that are
children of the ancestor block.
* Add productID to rating Attributes interface.
* TS type casting and import adustments.
Some adjustments to utilize types that we already have available, along
with some syntax adjustments and more sensible import tweaks.
* Update type-casting to use ProductResponseItem
Instead of using the generic Record, we can utilize the
ProductResponseItem interface and set an omission for the average_rating
property until that is corrected to properly reflect the API response.
* Add alias to blocks dir for imports.
Allows us to use exports from the blocks dir as "external" imports. This
way we do not need to write long, relative import paths (which can be
fragile in the long run).
* Disable apply button when there is no change to selected options
More info: https://github.com/woocommerce/woocommerce-blocks/issues/7116
* Add tests to the Filter Attribute block
Since we are making changes to the Filter Attributes block to fix issue woocommerce/woocommerce-blocks#7373, we are also adding tests to make sure the changes are providing the expected behavior
The setup-globals file was changed to add 'attributes' and 'has_filterable_products' properties to it, so it can be used in the tests.
* Merge test utils methods with attribute filter block
Removing test utils file and merging the methods with the Attribute Filter block to prevent tests from failing due to Jest configuration that only allow test files to exists inside a 'test' folder
* Remove checked.length === 0 condition
**Why was this condition needed before?**
Because when the user initially load the page, no filter is selected therefore we needed this condition to keep the Apply disabled in this case.
**Why we don't need it anymore?**
Because now in this PR we add following code:
```jsx
const activeFilters = getActiveFilters( attributeObject );
if ( activeFilters.length === checked.length ) {
return checked.every( ( value ) =>
activeFilters.includes( value )
);
}
```
This will return `true` when the user initially loads the page & Apply button will become disabled. Therefore, I believe it's safe to remove `checked.length === 0` condition.
More info: https://github.com/woocommerce/woocommerce-blocks/pull/7373#discussion_r994737313
* Add filterSize param to test setup
With this configuration, it is now possible to modify the current filter size in order to improve tests
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
* Add Stock Status to Product Query block filters
Creates a new Tools Panel called “Product filters” where we can neatly
organize our product specific settings. Eventually, this panel could be
merged with the core “Filters” panel; however, at the time of this
commit, this is impossible (see WordPress/gutenbergwoocommerce/woocommerce-blocks#43684 for a PoC).
Also moved the “On Sale” setting under this newly created panel.
* Add `resetAll` callback for the new Tools Panel
Tools Panels come with a “Reset All” functionality, that's supposed to
return all the settings to their original state.
In our case, things are a bit more complicated, as the original state
is dependant on the current variation, so it can't be hard-coded like it
is on the core block.
We where running the "withSidebarNotices" HOC each time the
"editor.BlockEdit" hook is fired. The problem is that this hook is
fired on page editor scroll, when hovering over the blocks, when a
block preview is loading, etc.
So, we only want the "withSidebarNotices" HOC to be executed when a Woo
Block in selected!
* Construct args for canMakePayment with correct keys
* When the CheckoutEventsContext mounts, initialize payment store
* Destructure useSelect correctly
* Dispatch __internalInitializePaymentStore in selector tests
* Update selector name to __internalUpdateAvailablePaymentMethods
* Remove check for editor when registering checkout store
* Add check for when express payment methods have updated too
* Ensure billingAddress key exists in canMakePayment arg
* Use editor context to know if we're in editor
* Products by Rating: Move the Filter by Ratings block to the feature plugin build
* Products by Rating: Update the internal doc
* Products by Rating: Include a Feature Plugin check before loading the Rating filter variation
* Products by Rating: Add InnerBlock support for Ratings
* Product by Ratings: Register Ratings filter as an InnerBlock
* Product by Rating: Fix active rating filters bug
* Products by Rating: Remove all heading references
* Products by Rating: Minor code fixes
* Products by Rating: Fix ESlint errors
* Products by Rating: Fix dependency placement
* Products by Rating: Add display options
* Products by Rating: Add support for the Apply button display option
* Products by Rating: Reset button display fix
* Products by Rating: Reset button dependency fix
* Products by Rating: Fix Active filters rating removal and Rating Reset button
* Products by Rating: Tweak preview checklist options
* Products by Rating: Remove stock status mentions
* Products by Rating: Remove redundant color option and fix loading check logic
* Products by Rating: Fix Reset button styling
* Products by Rating: Code cleanup and standardization
* Correct block name and description
* remove duplicated description for controls blocks
* remove duplicated title and desc
* Revert "remove duplicated description for controls blocks"
This reverts commit ed5417eb0e5191ed2f1def2a04c9e724fe70856a.
* Set default style to link-button mixin
It was identified that we currently have 3 different behaviors for links used in the application. In issue woocommerce/woocommerce-blocks#1778, it was discussed a set of good practices that we should follow in order to obtain consistency between links.
Currently, the link-button mixin is already used by the 'Clear all' button in the Active Filters block, so the idea was to increment it with a common pattern (font size small, font-weight normal, underlined by default and not underlined when on hover) that can be reused by other components (for example FilterResetButton).
* Change link-button mixin to make it attend the expected default style for links
* Replace text-button with link-button mixin in FilterResetButton component
* Add new mixin for links in filter blocks
* Revert change to link-button mixin to prevent it to affect link buttons on Checkout page
* Add filter-link-button mixin that can be used in filter blocks
* Remove link-button styles that were moved to filter-link-button mixin
By default, link-button mixin styles should have only styles from the text-button mixin and also be underlined.
The styles for link button in filter blocks should reside in filter-link-button mixin.
It was identified that we currently have 3 different behaviors for links used in the application. In issue woocommerce/woocommerce-blocks#1778, it was discussed a set of good practices that we should follow in order to obtain consistency between links.
Currently, the link-button mixin is already used by the 'Clear all' button in the Active Filters block, so the idea was to increment it with a common pattern (font size small, font-weight normal, underlined by default and not underlined when on hover) that can be reused by other components (for example FilterResetButton).
* Change link-button mixin to make it attend the expected default style for links
* Replace text-button with link-button mixin in FilterResetButton component
* fix infinite rerendering issue for active filter block when use with PHP template or site editor
* group useQueryStateByKey calls
* update deps array
Lucio Giannotta
Tarun Vijwani
kmanijak
Luigi Teschio
Albert Juhé Lluveras
Alex Florisca
Niels Lange
Saad Tarhi
Thomas Roberts
Alba Rincón
Alexandre Lara
Daniel Dudzic
Daniel W. Robert
Tung Du
Manish Menaria
Mike Jolley
Seghir Nadir