Commit Graph

250 Commits

Author SHA1 Message Date
Patricia Hillebrandt b12cfd2d6a Add to Cart Button > Update block registration to rely on metadata and enable usage for the Single Product Block (https://github.com/woocommerce/woocommerce-blocks/pull/9404)
* Adapt the Add to Cart Button block to be registered via block.json

* Remove the legacy supports.ts file

* Ditch all registration methods from the ProductButton class as it is now registered via metadata (a block.json file)

* Update get_block_type_uses_context and register_block_type_assets
2023-05-10 10:20:40 +00:00
Albert Juhé Lluveras 19332e960d Fix Product Price styles leaking into the Mini Cart, Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/9276)
* Fix Product Price styles leaking into the Mini Cart

* Add support for All Products block
2023-05-04 09:32:45 +02:00
Luigi Teschio fed679cbeb Rename Add to Cart (https://github.com/woocommerce/woocommerce-blocks/pull/9315)
* rename Add to Cart

* fix E2E test
2023-05-03 10:31:59 +00:00
Luigi Teschio 0ea4dab3c9 Product Image Gallery: fix resize width when the window resize (https://github.com/woocommerce/woocommerce-blocks/pull/9299) 2023-05-03 08:44:22 +00:00
Luigi Teschio 114ba02135 Product Image Gallery: fix inline (https://github.com/woocommerce/woocommerce-blocks/pull/9297) 2023-05-02 09:11:58 +00:00
Alexandre Lara 448f8102d9 Product Rating block: Fix review count not displaying on frontend (https://github.com/woocommerce/woocommerce-blocks/pull/9129)
* Fix review count not displaying on Product Rating

* Fix PHP CS errors

* Add Customer Reviews count to the Product Rating block on the Editor

* Remove unnecessary var_dump
2023-04-28 14:26:43 -03:00
Mike Jolley 2d506f9f57 Fix/you do not need lodash (https://github.com/woocommerce/woocommerce-blocks/pull/9161)
* Remove lodash `without` usage

* isNumber

* Remove lodash `difference`

* Replace lodash isEmpty with type guard

* Replace isObject with type guard

* remove lodash noop

* Replace lodash clamp

* replace lodash uniqueId

* Remove uniqueId import

* Add eslint rule to restrict lodash import

* Replace lodash range

* Replace lodash has() function

Replace lodash has

* replace omitby

* Replace lodash isEqual with fastDeepEqual

* Replace kebabCase with change-case package

* Replace lodash camelCase

Replace lodash mapKeys with function

Move mapkeys to utility

Create camelCaseKeys which replaces usage of mapKeys

* Replace lodash debounce with custom utiity

* replace lodash keyby

* Replace lodash pick with native function

* Replace lodash cloneDeep with klona

* Replace snake case keys package with change case

* Replace sortBy with fast sort package

* replace isEmpty with type guard

* Replace pickBy usage in validation reducer

* Replace groupBy usage in search list control

* Replace flatten, uniqBy usage in getProducts()

* Remove setWith and clone from updateState

* Replace custom useThrottle with useThrottledCallback from use-debounce package

* onSelectRate can use-debounce

* Fix missing flatten

* Update assets/js/data/cart/test/push-changes.ts

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>

---------

Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
2023-04-28 11:29:45 +01:00
Luigi Teschio 1d0ff02f8f Rename Add To Cart Form to Add To Cart Options (https://github.com/woocommerce/woocommerce-blocks/pull/9238) 2023-04-27 17:05:50 +00:00
Luigi Teschio 8e0709eb9a Update the icon and description for the Product Details block (https://github.com/woocommerce/woocommerce-blocks/pull/9241)
* Update icon and description for the Product Details block

* fix alt
2023-04-26 16:19:01 +02:00
Luigi Teschio 2ca2287cb8 Update icon and description for the Product Meta block (https://github.com/woocommerce/woocommerce-blocks/pull/9243)
* Update icon and description for the Product Meta block

* fix alt
2023-04-26 12:16:54 +00:00
Tarun Vijwani e39a27bd74 Add theme-level global styles to Cart and Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/8809)
* Dummy commit to open a PR

* Revert the last change

* Ensure Checkout block supports the theme-level global styles for `Colors » Buttons` (https://github.com/woocommerce/woocommerce-blocks/pull/8844)

* Add GS support for button colors in Checkout block

* Sync button hover effect with GB

* Fix link margin/padding (https://github.com/woocommerce/woocommerce-blocks/pull/8908)

* Replace <AddToCartButton /> with <ProductButton /> (https://github.com/woocommerce/woocommerce-blocks/pull/8914)

* Add GS support for button typography in Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/8918)

* Ensure Checkout block supports the theme-level global styles for Typography » Buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8892)

* Remove classname from cart image to avoid conflicts (https://github.com/woocommerce/woocommerce-blocks/pull/8898)

Co-authored-by: Niels Lange <info@nielslange.de>

* Use consistent and semantically correct HTML elements in the Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/9065)

* Allow button height to adjust

* Ensure to display full width heading background

* Inherit font style and font weight for headings

* Inherit font style and font weight for textarea

* Inherit font family and font weight for buttons

---------

Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
2023-04-22 00:11:10 +04:00
Luigi Teschio 4fbf32cef6 Product SKU: fix product SKU when added in the product meta block (https://github.com/woocommerce/woocommerce-blocks/pull/8966) 2023-04-19 07:47:03 +00:00
Darren Ethier 732827e60b Fix broken post/page editor screens in WordPress versions earlier than 6.2 (https://github.com/woocommerce/woocommerce-blocks/pull/9090)
* Fix infinite loop (range error) on subscribe callback.

* Replace getEditedPostContext with getEditedPostId to retrieve the templateId from the Site Editor for 6.1.1 compatibility

---------

Co-authored-by: tjcafferkey <tjcafferkey@gmail.com>
2023-04-19 09:08:40 +02:00
Karol Manijak f3c28b9d78 Pass proper data to On Sale badge when used in the scope of Product Image (https://github.com/woocommerce/woocommerce-blocks/pull/9021)
* Don't use withProductDataContext in Sale Badge block

There was no information about product passed to the block, so it fetched information about all products which then wasn't even used

* Pass necessary props to the Sale Badge so it doesn't overfetch unnecessary data

* Move the import to the previous place
2023-04-18 14:53:50 +02:00
Manish Menaria be5356d30a Product Stock indicator: Add support for background color, margin, padding & various typography controls (https://github.com/woocommerce/woocommerce-blocks/pull/8954)
* Add color, typography, and spacing support to Product SKU block

This commit introduces a new file `supports.ts` for the Product SKU block in the WooCommerce Blocks plugin, which adds color, typography, and spacing support. The following configuration has been added:

1. In `assets/js/atomic/blocks/product-elements/sku/supports.ts`, a new `supports` object is created, which extends the shared configuration and adds support for the following properties:
  - `text` and `background` color
  - `fontSize`, `lineHeight`, `__experimentalFontWeight`, `__experimentalFontFamily`, `__experimentalFontStyle`, `__experimentalTextTransform`, `__experimentalTextDecoration`, and `__experimentalLetterSpacing` for typography
  - `margin` and `padding` for spacing

* Add color, typography, and spacing support for Product SKU block in All Products block

This commit extends the support for color, typography, and spacing to the Product SKU block when used within the All Products block. The following changes have been made:

1. In `assets/js/atomic/blocks/product-elements/sku/block.tsx`, the `useColorProps`, `useSpacingProps`, and `useTypographyProps` hooks are imported and used to add the appropriate className and style properties to the rendered SKU element.
2. In `assets/js/atomic/blocks/product-elements/sku/edit.tsx`, the `style` property is separated from `useBlockProps()` and used directly on the `div` element for the SKU block.

* Add server-side rendering class for Product SKU Gutenberg block

This commit adds the ".wp-block-woocommerce-product-sku" class to the Product SKU Gutenberg block for server-side rendering purposes. The inclusion of this class ensures consistent styling between the editor and the front-end view of the block, providing a seamless experience for users.

The class name is generated based on the Gutenberg block prefix "wp-block", the namespace "woocommerce", and the block name "product-sku", creating a unique and identifiable class for the block. This class enables developers to target the block specifically in both the editor and front-end styles, maintaining the integrity of the block's appearance and functionality across different environments.

By adding this class to the server-side rendered version of the block, we ensure a unified and coherent styling experience throughout the block's usage.

* Fix minor issues

* Gate only experimental features behind isFeaturePluginBuild flag

This commit refactors the Product SKU block supports to enable color, typography, and spacing features for all builds, while keeping experimental features specific to the feature plugin build. It also adds necessary lint and TypeScript error handling for the experimental spacing API.

* Add overflow-wrap to Product SKU block and update comment

This commit adds the overflow-wrap property to the Product SKU block styles to handle long SKU values gracefully.
It also updates the comment for the experimental spacing API to better reflect the usage check.

* Refactor Product SKU block classname and style handling

This commit refactors the Product SKU block classname and style handling. It combines classnames for better readability and removes the hardcoded textTransform style in favor of default styles.
This also fix the issue where textTransform style was not working as expected.

* Add support for color, typography and spacing to stock indicator block

This commit updates the stock-indicator block support in the woocommerce-blocks repository. It includes the following changes:

- Added support for background color, line height, and various experimental typography features.
- Conditionally included support for margin and padding based on the availability of the __experimentalGetSpacingClassesAndStyles function from the @wordpress/block-editor package.

These updates provide more customization options for the stock-indicator block, allowing users to better match the appearance of this element to their site's design.

* Refactor stock text generation and apply minor style adjustments

This commit introduces a new function, `getTextBasedOnStock`, which handles the generation of stock text based on the stock information provided. It replaces the previous `lowStockText` and `stockText` functions, making the code more readable and maintainable.

In addition, minor adjustments to the class name handling have been made to simplify the code and ensure consistent styling when used inside the All Products block.

In the `edit.tsx` file, the `useBlockProps` function call has been updated to include the default `wc-block-components-product-stock-indicator` class name, ensuring it is always applied.

* Remove redundant block type supports in ProductStockIndicator

This commit removes the redundant get_block_type_supports() method from the ProductStockIndicator.php file, as it is no longer needed. The block type supports are now handled in the frontend.
2023-04-18 09:50:11 +00:00
Alexandre Lara 0ad067d8a9 Add save method to Product Meta block (https://github.com/woocommerce/woocommerce-blocks/pull/9032) 2023-04-14 08:52:19 -03:00
Luigi Teschio c3f585ef55 Product SKU: fix preview on the Single Product Block (https://github.com/woocommerce/woocommerce-blocks/pull/8805) 2023-04-13 19:10:41 +02:00
Luigi Teschio 4d1604bdd0 Product Price Block: remove ProductSelector (https://github.com/woocommerce/woocommerce-blocks/pull/8980) 2023-04-12 18:27:02 +02:00
Alexandre Lara 719fabdc57 Product Image: Displays with different size on the frontend (https://github.com/woocommerce/woocommerce-blocks/pull/8926)
* Add block minimal structure

* Add Single Product block icon

* Add usesContext to block.json

* Add Save function to Single Product Block registration settings

* Add InnerBlocks template to Editor for Single Product Block

* Add Product selector to Single Product block

* Add withProduct HOC to the block editor

* Add save function to the Single Product block

* Add renderOnServerSide attribute to Product image

This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.

* Add renderOnServerSide attribute to Product Category List block

* Add renderOnServerSide attribute to Product Price block

* Add renderOnServerSide attribute to Product Rating block

* Add renderOnServerSide attribute to Product Stock Indicator block

* Add renderOnServerSide attribute to Product Summary block

* Add renderOnServerSide attribute to Product Tag List block

* Add renderOnServerSide attribute to Product Title block

* Add renderOnServerSide attribute to Product Add to Cart, Sales Badge and Sku block

* Reuse editor code for Single Product block

* Add Props interface to Single Product Server Side Editor

* Add render_block_context hook to SingleProductServerSide block

* Fix Single Product Server Side block that was not appearing in the block inserter

* Fix bug where the correct product was not being displayed on the frontend

* Remove Single Product Block

* Add Product title and product summary variations

* Add Add To Cart Form and Product Meta blocks to the Single Product Block

* remove more files that belong the Single Product block

* fix php linter error

* wrap up Single Product Block

* Fix issue preventing the block from working on the Single Product Template

* Fix update context function for Single Product block

* Replace Single Product block title

* Replace global $post only for Single Product inner blocks

* Remove unnecessary var_dump statement

* Improve documentation for the Single Product block

* fix registration: add-to-cart-form and product-meta blocks

* Improve documentation for Single Product block

* Fix lint error related to imports

* Remove query monitor debug code

* Remove unnecessary `renderOnServerSide` attribute from product elements

* Fix return type for the Save function of the Product Elements blocks

* Fix return type for the Save function of the Product Title block

* Add scss file for Single Product block

* Fix PHP coding standards

* Fix php coding standards

* Remove internal dependencies section duplication

* Replace .wc-block with .wc-block-editor- styles

According to the naming convention for this project (https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/contributors/contributing/coding-guidelines.md#naming) we should be using the `.wc-block-editor-` prefix for styles that are only used in the editor.

* Solve style for the Edit card component in the Single Product block

* Fix error preventing Block Control from being displayed

* Make the Product title to be a link by default

* Fix PHP Coding Standards

* Fix PHP Code Standards

* Fix php cs issues

* Fix issue with php cs

* Remove unnecessary comment

* Remove unused Icon import

* Remove unnecessary dot from the className attributes in the Single Product Block

* Replace metadata.name with metadata.title in the Editor file

* Ignore phpcs rule

* Add new attributes to the Attributes interface of the Price block

* Fix typescript errors on the Product Meta block

* Fix ts errors on Single Product editor

* Fix ts errors on layout-editor.tsx

* Fix ts errors in Single Product index file

* Fix ts errors on add to cart form index file

* Fix unsupported block error when using inner blocks outside the Single Product template

* Fix unsupported block error for the Single Product block when editing Posts/Pages

* Remove unnecessary JSDoc types

* Remove unnecessary APIError component

* Replace global $post only when rendering a `core/post-excerpt` block

* Fix php cs errors

* Put the Single Product block behind an experimental flag

* Fix error occurring when trying to access ancestor of an undefined block settings

* Fix Product Image appearing with different size on the Frontend

* Fix PHP Code Standards errors

* Remove JS Doc from shared-product-control.tsx

* Fix single-product-frontend.js 404 error

* Fix error 'Block names must be string' when adding Single Product block

* Add todo comment to state the temporary solution used in the Single Product block

* Set imageSizing attribute on Product Query and Single Product blocks

* Rename values for image size options in the product image block

The previous allowed values were 'cropped' and 'full-size'. The new values are 'thumbnail' and 'single' which are similar to the values used in WooCoomerce.

WooCommerce uses 'woocommerce_thumbnail', 'woocommerce_gallery_thumbnail' and 'woocommerce_single' for images sizes. The 'woocommerce_single' size is used for the Single Product page and the 'woocommerce_thumbnail' size is used for the product grid.

* Fix Related Products image to show as a thumbnail instead of the full size

* Fix PHP CS error

---------

Co-authored-by: Luigi <gigitux@gmail.com>
2023-04-11 11:41:34 -03:00
Daniel Dudzic b95812da5f Product Rating: Normalize the height of rating icons and the Add review link (https://github.com/woocommerce/woocommerce-blocks/pull/8399) 2023-04-06 15:35:48 -04:00
Alexandre Lara 7965a07870 Add single product block (https://github.com/woocommerce/woocommerce-blocks/pull/8610)
* Add block minimal structure

* Add Single Product block icon

* Add usesContext to block.json

* Add Save function to Single Product Block registration settings

* Add InnerBlocks template to Editor for Single Product Block

* Add Product selector to Single Product block

* Add withProduct HOC to the block editor

* Add save function to the Single Product block

* Add renderOnServerSide attribute to Product image

This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.

* Add renderOnServerSide attribute to Product Category List block

* Add renderOnServerSide attribute to Product Price block

* Add renderOnServerSide attribute to Product Rating block

* Add renderOnServerSide attribute to Product Stock Indicator block

* Add renderOnServerSide attribute to Product Summary block

* Add renderOnServerSide attribute to Product Tag List block

* Add renderOnServerSide attribute to Product Title block

* Add renderOnServerSide attribute to Product Add to Cart, Sales Badge and Sku block

* Reuse editor code for Single Product block

* Add Props interface to Single Product Server Side Editor

* Add render_block_context hook to SingleProductServerSide block

* Fix Single Product Server Side block that was not appearing in the block inserter

* Fix bug where the correct product was not being displayed on the frontend

* Remove Single Product Block

* Add Product title and product summary variations

* Add Add To Cart Form and Product Meta blocks to the Single Product Block

* remove more files that belong the Single Product block

* fix php linter error

* wrap up Single Product Block

* Fix issue preventing the block from working on the Single Product Template

* Fix update context function for Single Product block

* Replace Single Product block title

* Replace global $post only for Single Product inner blocks

* Remove unnecessary var_dump statement

* Improve documentation for the Single Product block

* fix registration: add-to-cart-form and product-meta blocks

* Improve documentation for Single Product block

* Fix lint error related to imports

* Remove query monitor debug code

* Remove unnecessary `renderOnServerSide` attribute from product elements

* Fix return type for the Save function of the Product Elements blocks

* Fix return type for the Save function of the Product Title block

* Add scss file for Single Product block

* Fix PHP coding standards

* Fix php coding standards

* Remove internal dependencies section duplication

* Replace .wc-block with .wc-block-editor- styles

According to the naming convention for this project (https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/contributors/contributing/coding-guidelines.md#naming) we should be using the `.wc-block-editor-` prefix for styles that are only used in the editor.

* Solve style for the Edit card component in the Single Product block

* Fix error preventing Block Control from being displayed

* Make the Product title to be a link by default

* Fix PHP Coding Standards

* Fix PHP Code Standards

* Fix php cs issues

* Fix issue with php cs

* Remove unnecessary comment

* Remove unused Icon import

* Remove unnecessary dot from the className attributes in the Single Product Block

* Replace metadata.name with metadata.title in the Editor file

* Ignore phpcs rule

* Add new attributes to the Attributes interface of the Price block

* Fix typescript errors on the Product Meta block

* Fix ts errors on Single Product editor

* Fix ts errors on layout-editor.tsx

* Fix ts errors in Single Product index file

* Fix ts errors on add to cart form index file

* Fix unsupported block error when using inner blocks outside the Single Product template

* Fix unsupported block error for the Single Product block when editing Posts/Pages

* Remove unnecessary JSDoc types

* Remove unnecessary APIError component

* Replace global $post only when rendering a `core/post-excerpt` block

* Fix php cs errors

* Put the Single Product block behind an experimental flag

* Fix error occurring when trying to access ancestor of an undefined block settings

* Remove JS Doc from shared-product-control.tsx

* Fix single-product-frontend.js 404 error

* Fix error 'Block names must be string' when adding Single Product block

* Add todo comment to state the temporary solution used in the Single Product block

* Move the wp_reset_postdata outside the block name check condition

* Add comments about why we need to unregister the block on Single Product template

---------

Co-authored-by: Luigi <gigitux@gmail.com>
2023-04-06 15:40:43 -03: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
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
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
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
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
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
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
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
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
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
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
Luigi Teschio 6dfee2664e fix isDescendentOfSingleProductTemplate check (https://github.com/woocommerce/woocommerce-blocks/pull/8767) 2023-03-17 10:22:51 +01:00
Luigi Teschio 10516c3392 fix: Show sale bage on Product Image Gallery block (https://github.com/woocommerce/woocommerce-blocks/pull/8652)
* fix: show sale bage on Product Image Gallery block woocommerce/woocommerce-blocks#8528

* set multiple flag to false
2023-03-09 09:42:59 +01:00
Luigi Teschio 391105a71e Add Product Meta Block (https://github.com/woocommerce/woocommerce-blocks/pull/8484)
* Add minimum structure for Single Product Details block

* Add Product Image Gallery woocommerce/woocommerce-blocks#8233

Add Product Image Gallery

* Add tests for Single Product Details block

* Add the initial basis for the Add to Cart button

* Trigger the single product add to cart action for each product type.

* wip: create block structure and add initial styles

* Add block details to the SingleProductDetails.php file

* Rename the block from add-to-cart-button to add-to-cart-form

* Update to use the cart icon.

* Implement the skeleton for the editor preview.

* Render tabs title with empty content

* Use woocommerce_output_product_data_tabs function to retrieve tabs data

* Update styles and add Notice for the display in the Editor.

* Update CSS.

* Add base tests for the new Add to Cart Form component.

* Add Product Image Gallery block

* remove support global styles

* remove support global styles

* Update the button CSS.

* Remove customizations for the Single Product Details block

* Update styles for the cart form.

* update td style.

* Update divs and CSS.

* Use conventional input instead of the experimental InputControl

* address CSS feedback

* add support for the custom classname

* remove save function

* Remove unnecessary console.log from the Edit.tsx file

* Remove block classname from block wrapper

* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController

* Remove attributes property from the block registration

* Remove isExperimental flag for the Single Product Details block

* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block

* Prevent Single Product Details block from apppearing in Pages or Posts

* add second parameter to the subscribe function

* Implement the new design and copy provided for the editor.

* Make the notice compatible with dark themes.

* Some additional CSS tweaks

* adjust the padding for the input

* wrap the Single Product Template in a div with the product class

* Fix PHP Coding Standards warnings

* improve logic and increase coverage of unit test

* improve logic and increase coverage of unit test

* fix test

* format HTML

* fix edge case

* update @types/wordpress__data package

* update placeholder, icon and description

* update tsconfig

* update block name

* fix SCSS linter error

* address feedback

* create SingleProductTemplateCompatibility class

* Add Hooks compatibility

* remove not used file

* remove not used files

* Add compatibility layer for the Single Product template

* fix check

* implement Product meta template header

* Product Price Block: Add support Single Product Template

* fix missing import

* add comment

* return a value

* improve comment

* fix import

* Add Product Meta block

* remove unnecessary change

* fix compatibility layer when the Single Product template has the classic block

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
2023-03-09 09:42:40 +01:00
Luigi Teschio d08696de34 Product Price block: add support to the Single Product Template (https://github.com/woocommerce/woocommerce-blocks/pull/8609)
* Product Price Block: Add support Single Product Template

* fix missing import

* add comment

* return a value

* improve comment

* fix import
2023-03-06 15:14:08 +01:00
Luigi Teschio 89cd344374 upgrade @types/wordpress__blocks package (https://github.com/woocommerce/woocommerce-blocks/pull/8624) 2023-03-03 12:42:50 +01:00
Albert Juhé Lluveras 1d0adeed28 Replace react imports with wordpress/element (https://github.com/woocommerce/woocommerce-blocks/pull/8520)
* Replace react imports with wordpress/element

* Fix TS errors

* Update a couple of React type imports
2023-03-02 15:26:00 +01:00
Patricia Hillebrandt a7f471d9ff Add to Cart Form Block > Ensure the editor preview is properly displayed with the Gutenberg plugin disabled (https://github.com/woocommerce/woocommerce-blocks/pull/8582)
* Update the editor styles for the add to cart form button so it is properly displayed with the Gutenberg plugin disabled.

* update for the input height.

* update the min-height
2023-03-01 10:39:54 +01:00
Mike Jolley a454e1ee0a Avoid rendering renamed props for inner blocks (https://github.com/woocommerce/woocommerce-blocks/pull/8471) 2023-02-27 11:35:12 +00:00
Patricia Hillebrandt 25b434036d Fine-tune the Add to cart form block (https://github.com/woocommerce/woocommerce-blocks/pull/8482)
* Restrict usage to the single product template.

* Update class prefix from wc to wp

* Move the add-to-cart-form block to atomic blocks so it is aligned with the updated structure adopted for single product related blocks.

* Address CR

* ditch woocommerce class.

* remove attributes key

* Add new styles to account for the removal of the .summary and .entry-summary selectors

* Narrow down the styles to the add-to-cart-form class.
2023-02-24 23:12:53 +01:00
Luigi Teschio abd8cdbcc2 Add Related Products block (https://github.com/woocommerce/woocommerce-blocks/pull/8522) 2023-02-24 16:35:43 +01:00
Albert Juhé Lluveras c915123afc Fix Product Price and Product Rating alignment (https://github.com/woocommerce/woocommerce-blocks/pull/8526)
* Fix Product Price and Product Rating default alignment

* Refactor get_text_align_class_and_style() to simplify the logic
2023-02-24 09:17:22 +01:00
Albert Juhé Lluveras e580c1a6af Update Product Details block so it inherits more styles from the theme (https://github.com/woocommerce/woocommerce-blocks/pull/8494)
* Use wc-tabs selectors instead of tabs as WC core does

* Remove hardcoded colors from Product Details tabs
2023-02-22 09:31:20 +01:00
Daniel Dudzic 34fc847d9f All Products: Re-add alignment controls for Product Rating and Price (https://github.com/woocommerce/woocommerce-blocks/pull/8264)
* Product Rating and Price: Re-add alignment controls in the All Products context.

* Add default values to align attributes for price and rating product elements

---------

Co-authored-by: tjcafferkey <tjcafferkey@gmail.com>
2023-02-21 09:40:14 +00:00
kmanijak 766b3a20d0 Simplify unused Add to Cart button form placeholder for grouped product (https://github.com/woocommerce/woocommerce-blocks/pull/8438)
* Simplify Add to Cart grouped version as it's never displayed
2023-02-17 15:08:57 +01:00
Alexandre Lara bd9295eb32 Add Single Product Details block (https://github.com/woocommerce/woocommerce-blocks/pull/8225)
* Add minimum structure for Single Product Details block

* Add tests for Single Product Details block

* wip: create block structure and add initial styles

* Add block details to the SingleProductDetails.php file

* Render tabs title with empty content

* Use woocommerce_output_product_data_tabs function to retrieve tabs data

* Remove customizations for the Single Product Details block

* 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

* Fix PHP Coding Standards warnings

* update block name

* fix SCSS linter error

* move blocks into product-elements folder and rename to product-details

* avoid 404 error

* disable js asset enqueue

---------

Co-authored-by: Luigi Teschio <gigitux@gmail.com>
2023-02-16 11:18:16 +01:00