Commit Graph

2082 Commits

Author SHA1 Message Date
Karol Manijak fcdd0f243c Stop displaying decimals in Filter by Price (https://github.com/woocommerce/woocommerce-blocks/pull/8975)
* Remove the decimals from Filter by Price

* Simplify the props in Filter by Price by reusing the common ones
2023-04-06 14:58:07 +02:00
Thomas Roberts f4f842e716 Add "Collection from..." in Checkout sidebar when selecting local pickup (https://github.com/woocommerce/woocommerce-blocks/pull/8305)
* 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
2023-04-06 04:56:47 -07:00
Mike Jolley 62c62d3326 Checkout Block: Avoid using editor buttons in the post content to prevent inheriting global styles (https://github.com/woocommerce/woocommerce-blocks/pull/8957)
* 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
2023-04-06 12:16:42 +01:00
Mike Jolley e977882a74 Error to warning (https://github.com/woocommerce/woocommerce-blocks/pull/8969) 2023-04-06 10:42:04 +01:00
Manish Menaria c497190936 Product SKU: Adds support for color, typography, and spacing (https://github.com/woocommerce/woocommerce-blocks/pull/8913)
* 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.
2023-04-06 11:30:27 +05:30
Mike Jolley 7a89cecb6b Feature Branch: Updated Shopper Notices (https://github.com/woocommerce/woocommerce-blocks/pull/8659)
* 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>
2023-04-05 13:43:03 +01:00
Alexandre Lara 2f98513cd8 Add to Cart Form: Replace Notice with Skeleton component (https://github.com/woocommerce/woocommerce-blocks/pull/8842)
* Add Skeleton component

* Replace notice with skeleton on Add to Cart Form block

* Fix css lint error

* add tooltip

* fix css linter

* add css for change cursor

---------

Co-authored-by: Luigi <gigitux@gmail.com>
2023-04-05 09:38:58 -03:00
Manish Menaria e1183211e5 Product Price: support for background color, line height, font family, letter spacing, and padding (https://github.com/woocommerce/woocommerce-blocks/pull/8906)
* 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.
2023-04-04 10:08:45 +00:00
kmanijak c81e5d8da6 Move surrounding blocks from Products block when converting the Classic Template to Blockified one (https://github.com/woocommerce/woocommerce-blocks/pull/8887)
* 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
2023-04-03 16:29:08 +02:00
Alexandre Lara 7e9a4105f2 Prevent image placeholder from going outside its wrapper (https://github.com/woocommerce/woocommerce-blocks/pull/8901) 2023-03-31 14:36:17 -03:00
Mike Jolley af0520bb8d Show Cart and Checkout blocks in Style Book (https://github.com/woocommerce/woocommerce-blocks/pull/8888)
* Update forced layout

* Track isPreview in editor context

* Add preview to checkout

* Add preview to cart
2023-03-30 15:15:00 +01:00
kmanijak 0262bc2ab7 Make a Single Product conversion enabled in Core, but keep the Product Archive behind experimental flag (https://github.com/woocommerce/woocommerce-blocks/pull/8907) 2023-03-30 15:57:33 +02:00
Daniel W. Robert ae012817cc Remove `isExperimentalBuild` Checks in Classic Template Block (https://github.com/woocommerce/woocommerce-blocks/pull/8902)
* 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.
2023-03-30 08:47:02 -04:00
Manish Menaria 392f7e17fe Add padding support for `Product Image` block (https://github.com/woocommerce/woocommerce-blocks/pull/8895)
* 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.
2023-03-30 12:35:32 +05:30
Lucio Giannotta e1cccc5b8e Add Product Reviews block (https://github.com/woocommerce/woocommerce-blocks/pull/8857)
---------

Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
2023-03-28 19:14:13 +02:00
Thomas Roberts 182c58d7d0 Add `additionalCartCheckoutInnerBlockTypes` filter to enable additional blocks in the Cart/Checkout blocks. (https://github.com/woocommerce/woocommerce-blocks/pull/8650)
* 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
2023-03-28 05:33:28 -07:00
Alexandre Lara 0ad16b2686 Add $schema property to block.json files (https://github.com/woocommerce/woocommerce-blocks/pull/8877)
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.
2023-03-27 17:26:46 -03:00
Thomas Roberts be2ba748be Check for address on shippingData (https://github.com/woocommerce/woocommerce-blocks/pull/8878) 2023-03-27 09:33:18 -07:00
Luigi Teschio 746bbf7be3 Single Product Template: add the Store Notice block to the template (https://github.com/woocommerce/woocommerce-blocks/pull/8833)
* 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>
2023-03-26 21:19:28 +02:00
Alexandre Lara 22a9a479ae Related Products: Move Notice block to the Inspector Control section (https://github.com/woocommerce/woocommerce-blocks/pull/8843)
* 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>
2023-03-24 14:03:12 -03:00
Alba Rincón 91eb482e17 Mini-cart buttons: add explanation regarding why we need to check for children (https://github.com/woocommerce/woocommerce-blocks/pull/8847)
* Add comment explanation regarding the children buttons

* Update comment

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

---------

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2023-03-24 16:25:09 +01:00
Alba Rincón aa601fe102 Mini-cart: add the option to change the style between 'Outline' and 'Fill' in all the buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8835)
* 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>
2023-03-24 10:14:06 +01:00
Manish Menaria 1416642cd2 Add more Inspector controls for Product(Add to cart) button (https://github.com/woocommerce/woocommerce-blocks/pull/8781)
* 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
2023-03-24 12:38:43 +05:30
Tarun Vijwani 8b57aa35cb Fix _n usage to use plural and singular correctly (https://github.com/woocommerce/woocommerce-blocks/pull/8749)
* 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>
2023-03-24 10:52:38 +04:00
Luigi Teschio 4451dbb323 Product Image Gallery: remove attributes key (https://github.com/woocommerce/woocommerce-blocks/pull/8825) 2023-03-23 18:00:16 +01:00
Alba Rincón 2555beadf5 Provide a way to switch to the blockified Single Product Template (https://github.com/woocommerce/woocommerce-blocks/pull/8324)
* 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>
2023-03-23 17:59:59 +01:00
Alba Rincón 2d9519b3ba Add style to the `Mini Cart` buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8776)
* Create new car button inner block

* Create new checkout button inner block

* Render inner buttons on the frontend

* Fix buttons size

* Add outline to the cart button

* Add color props

* Add urls

* Fix button classes

* Add classes to edit

* Start using editable button

* Add buttons to mini cart tempalte

* Reorder buttons in template

* Add cart & checkout buttons scripts

* Remove unnecessary divs

* Change checkout button block name

* Change cart button block name

* Add deprecation to the buttons

* Fix lint and inline save

* Remove commented out code and fix condition

* Render buttons if no children

* Change migrate condition

* Simplify condition

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

* Make props optional

* Add missing import

---------

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2023-03-23 16:55:53 +01:00
Albert Juhé Lluveras c9a6391e20 Fix border styles not visible in the editor in Featured Product and Featured Category blocks in core (https://github.com/woocommerce/woocommerce-blocks/pull/8838) 2023-03-23 15:36:46 +01:00
Roy Ho 48fde013ea Add decoding to product names (https://github.com/woocommerce/woocommerce-blocks/pull/8824)
* Add decoding to product names

* Fix linting error
2023-03-23 06:27:02 -07:00
Mike Jolley 280040653c Avoid returning before hooks are run (https://github.com/woocommerce/woocommerce-blocks/pull/8820) 2023-03-23 10:24:04 +00:00
Luigi Teschio 9baad55f4f Stock Indicator Block: remove unused save function (https://github.com/woocommerce/woocommerce-blocks/pull/8832) 2023-03-23 08:43:42 +00:00
kmanijak a06f4fbd91 Normalise the search param for comparison to avoid endless redirections (https://github.com/woocommerce/woocommerce-blocks/pull/8784)
* 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
2023-03-23 08:42:23 +01:00
Alexandre Lara f39d8b7943 Add default Single Product HTML template (https://github.com/woocommerce/woocommerce-blocks/pull/8515)
* 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>
2023-03-22 15:00:48 +00:00
Saad Tarhi 547cc76f8e Fix save changes bug in Firefox browser (https://github.com/woocommerce/woocommerce-blocks/pull/8754) 2023-03-22 12:45:48 +00:00
kmanijak a5714a6519 Use shared save function for all the product elements blocks (https://github.com/woocommerce/woocommerce-blocks/pull/8813)
* 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>
2023-03-22 11:52:50 +00:00
kmanijak 752fd37a0b Make Product SKU editable (https://github.com/woocommerce/woocommerce-blocks/pull/8804) 2023-03-22 09:29:49 +01:00
Albert Juhé Lluveras 5235f6c392 Allow themes to remove the Mini Cart title on overridden template parts (https://github.com/woocommerce/woocommerce-blocks/pull/8779)
* Allow themes to remove the Mini Cart title on overridden template parts

* Remove unused file
2023-03-22 08:23:52 +01:00
Tarun Vijwani 82c59ffb29 Display the link to add the shipping address when shipping address is not available (https://github.com/woocommerce/woocommerce-blocks/pull/8141) 2023-03-22 11:15:13 +04:00
Luigi Teschio f9cdca7625 Remove Single Product Block (https://github.com/woocommerce/woocommerce-blocks/pull/8763)
* 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
2023-03-20 13:27:23 +00:00
Tarun Vijwani ef24a42211 Add validation error to prevent checkout when there is no shipping method available (https://github.com/woocommerce/woocommerce-blocks/pull/8384)
* 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.
2023-03-17 19:32:03 +04:00
Albert Juhé Lluveras ec19838355 Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8777)
* Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons

* Fix a couple of comments
2023-03-17 13:26:34 +01:00
Luigi Teschio 6dfee2664e fix isDescendentOfSingleProductTemplate check (https://github.com/woocommerce/woocommerce-blocks/pull/8767) 2023-03-17 10:22:51 +01:00
Alba Rincón dca03c3323 Add styles to the `Start shopping` button (https://github.com/woocommerce/woocommerce-blocks/pull/8766) 2023-03-16 14:57:54 +01:00
Luigi Teschio 235b37a626 Product Search Results template: fix the preview when the Inherit Query option is enabled (https://github.com/woocommerce/woocommerce-blocks/pull/7965)
* 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>
2023-03-16 11:04:52 +01:00
Tarun Vijwani ef63d807b9 Fix the local pickup price in the shipping type selector and pickup options (https://github.com/woocommerce/woocommerce-blocks/pull/8623)
* 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>
2023-03-15 13:26:06 +01:00
kmanijak afa8672e49 Change the property name of the attribute slug in Products By Attribute after the refactor (https://github.com/woocommerce/woocommerce-blocks/pull/8759) 2023-03-15 12:29:13 +01:00
Roy Ho 112a402261 Add a higher z-index than the title for mini cart close button (https://github.com/woocommerce/woocommerce-blocks/pull/8737) 2023-03-14 10:08:10 -07:00
Alba Rincón d4fe2a5b5d Mini-cart: add setting to not render the block on the cart & checkout pages (https://github.com/woocommerce/woocommerce-blocks/pull/8700)
* 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
2023-03-14 15:59:46 +01:00
Saad Tarhi abe3488861 Local Pickup: merge country and state into same field in location modal (https://github.com/woocommerce/woocommerce-blocks/pull/8408)
* 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
2023-03-14 14:49:31 +01:00
Luigi Teschio a2945306ac Fix the related products block result when used along a grouped product (https://github.com/woocommerce/woocommerce-blocks/pull/8656)
* fix: related products and grouped products result woocommerce/woocommerce-blocks#8589

* fix crash
2023-03-14 14:28:21 +01:00