* Add block minimal structure
* Add Single Product block icon
* Add usesContext to block.json
* Add Save function to Single Product Block registration settings
* Add InnerBlocks template to Editor for Single Product Block
* Add Product selector to Single Product block
* Add withProduct HOC to the block editor
* Add save function to the Single Product block
* Add renderOnServerSide attribute to Product image
This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.
* Add renderOnServerSide attribute to Product Category List block
* Add renderOnServerSide attribute to Product Price block
* Add renderOnServerSide attribute to Product Rating block
* Add renderOnServerSide attribute to Product Stock Indicator block
* Add renderOnServerSide attribute to Product Summary block
* Add renderOnServerSide attribute to Product Tag List block
* Add renderOnServerSide attribute to Product Title block
* Add renderOnServerSide attribute to Product Add to Cart, Sales Badge and Sku block
* Reuse editor code for Single Product block
* Add Props interface to Single Product Server Side Editor
* Add render_block_context hook to SingleProductServerSide block
* Fix Single Product Server Side block that was not appearing in the block inserter
* Fix bug where the correct product was not being displayed on the frontend
* Remove Single Product Block
* Add Product title and product summary variations
* Add Add To Cart Form and Product Meta blocks to the Single Product Block
* remove more files that belong the Single Product block
* fix php linter error
* wrap up Single Product Block
* Fix issue preventing the block from working on the Single Product Template
* Fix update context function for Single Product block
* Replace Single Product block title
* Replace global $post only for Single Product inner blocks
* Remove unnecessary var_dump statement
* Improve documentation for the Single Product block
* fix registration: add-to-cart-form and product-meta blocks
* Improve documentation for Single Product block
* Fix lint error related to imports
* Remove query monitor debug code
* Remove unnecessary `renderOnServerSide` attribute from product elements
* Fix return type for the Save function of the Product Elements blocks
* Fix return type for the Save function of the Product Title block
* Add scss file for Single Product block
* Fix PHP coding standards
* Fix php coding standards
* Remove internal dependencies section duplication
* Replace .wc-block with .wc-block-editor- styles
According to the naming convention for this project (https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/contributors/contributing/coding-guidelines.md#naming) we should be using the `.wc-block-editor-` prefix for styles that are only used in the editor.
* Solve style for the Edit card component in the Single Product block
* Fix error preventing Block Control from being displayed
* Make the Product title to be a link by default
* Fix PHP Coding Standards
* Fix PHP Code Standards
* Fix php cs issues
* Fix issue with php cs
* Remove unnecessary comment
* Remove unused Icon import
* Remove unnecessary dot from the className attributes in the Single Product Block
* Replace metadata.name with metadata.title in the Editor file
* Ignore phpcs rule
* Add new attributes to the Attributes interface of the Price block
* Fix typescript errors on the Product Meta block
* Fix ts errors on Single Product editor
* Fix ts errors on layout-editor.tsx
* Fix ts errors in Single Product index file
* Fix ts errors on add to cart form index file
* Fix unsupported block error when using inner blocks outside the Single Product template
* Fix unsupported block error for the Single Product block when editing Posts/Pages
* Remove unnecessary JSDoc types
* Remove unnecessary APIError component
* Replace global $post only when rendering a `core/post-excerpt` block
* Fix php cs errors
* Put the Single Product block behind an experimental flag
* Fix error occurring when trying to access ancestor of an undefined block settings
* Fix Product Image appearing with different size on the Frontend
* Fix PHP Code Standards errors
* Remove JS Doc from shared-product-control.tsx
* Fix single-product-frontend.js 404 error
* Fix error 'Block names must be string' when adding Single Product block
* Add todo comment to state the temporary solution used in the Single Product block
* Set imageSizing attribute on Product Query and Single Product blocks
* Rename values for image size options in the product image block
The previous allowed values were 'cropped' and 'full-size'. The new values are 'thumbnail' and 'single' which are similar to the values used in WooCoomerce.
WooCommerce uses 'woocommerce_thumbnail', 'woocommerce_gallery_thumbnail' and 'woocommerce_single' for images sizes. The 'woocommerce_single' size is used for the Single Product page and the 'woocommerce_thumbnail' size is used for the product grid.
* Fix Related Products image to show as a thumbnail instead of the full size
* Fix PHP CS error
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Add block minimal structure
* Add Single Product block icon
* Add usesContext to block.json
* Add Save function to Single Product Block registration settings
* Add InnerBlocks template to Editor for Single Product Block
* Add Product selector to Single Product block
* Add withProduct HOC to the block editor
* Add save function to the Single Product block
* Add renderOnServerSide attribute to Product image
This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.
* Add renderOnServerSide attribute to Product Category List block
* Add renderOnServerSide attribute to Product Price block
* Add renderOnServerSide attribute to Product Rating block
* Add renderOnServerSide attribute to Product Stock Indicator block
* Add renderOnServerSide attribute to Product Summary block
* Add renderOnServerSide attribute to Product Tag List block
* Add renderOnServerSide attribute to Product Title block
* Add renderOnServerSide attribute to Product Add to Cart, Sales Badge and Sku block
* Reuse editor code for Single Product block
* Add Props interface to Single Product Server Side Editor
* Add render_block_context hook to SingleProductServerSide block
* Fix Single Product Server Side block that was not appearing in the block inserter
* Fix bug where the correct product was not being displayed on the frontend
* Remove Single Product Block
* Add Product title and product summary variations
* Add Add To Cart Form and Product Meta blocks to the Single Product Block
* remove more files that belong the Single Product block
* fix php linter error
* wrap up Single Product Block
* Fix issue preventing the block from working on the Single Product Template
* Fix update context function for Single Product block
* Replace Single Product block title
* Replace global $post only for Single Product inner blocks
* Remove unnecessary var_dump statement
* Improve documentation for the Single Product block
* fix registration: add-to-cart-form and product-meta blocks
* Improve documentation for Single Product block
* Fix lint error related to imports
* Remove query monitor debug code
* Remove unnecessary `renderOnServerSide` attribute from product elements
* Fix return type for the Save function of the Product Elements blocks
* Fix return type for the Save function of the Product Title block
* Add scss file for Single Product block
* Fix PHP coding standards
* Fix php coding standards
* Remove internal dependencies section duplication
* Replace .wc-block with .wc-block-editor- styles
According to the naming convention for this project (https://github.com/woocommerce/woocommerce-blocks/blob/trunk/docs/contributors/contributing/coding-guidelines.md#naming) we should be using the `.wc-block-editor-` prefix for styles that are only used in the editor.
* Solve style for the Edit card component in the Single Product block
* Fix error preventing Block Control from being displayed
* Make the Product title to be a link by default
* Fix PHP Coding Standards
* Fix PHP Code Standards
* Fix php cs issues
* Fix issue with php cs
* Remove unnecessary comment
* Remove unused Icon import
* Remove unnecessary dot from the className attributes in the Single Product Block
* Replace metadata.name with metadata.title in the Editor file
* Ignore phpcs rule
* Add new attributes to the Attributes interface of the Price block
* Fix typescript errors on the Product Meta block
* Fix ts errors on Single Product editor
* Fix ts errors on layout-editor.tsx
* Fix ts errors in Single Product index file
* Fix ts errors on add to cart form index file
* Fix unsupported block error when using inner blocks outside the Single Product template
* Fix unsupported block error for the Single Product block when editing Posts/Pages
* Remove unnecessary JSDoc types
* Remove unnecessary APIError component
* Replace global $post only when rendering a `core/post-excerpt` block
* Fix php cs errors
* Put the Single Product block behind an experimental flag
* Fix error occurring when trying to access ancestor of an undefined block settings
* Remove JS Doc from shared-product-control.tsx
* Fix single-product-frontend.js 404 error
* Fix error 'Block names must be string' when adding Single Product block
* Add todo comment to state the temporary solution used in the Single Product block
* Move the wp_reset_postdata outside the block name check condition
* Add comments about why we need to unregister the block on Single Product template
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Add 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 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.
* Refactor import and add padding support in image block
In this commit, the import statement for __experimentalGetSpacingClassesAndStyles has been refactored to use an alias getSpacingClassesAndStyles for better readability. Additionally, padding support has been added to the image block's spacing configuration.
* Refactor ProductImage to use consolidated style classes and attributes
This commit refactors the ProductImage block by using the consolidated classes and styles provided by the StyleAttributesUtils::get_classes_and_styles_by_attributes() function. This change simplifies the code, improves readability, and ensures consistent handling of styles across different block elements.
* Add 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>
* 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
* Add default Single Product HTML template
* Fix style issues when adding blocks inside group/stack/columns blocks
* Add Related Products to the default single product template HTML file
* Remove !important statement from Product Image Gallery block css
* Change width of Product Image Gallery block to initial instead of unset
* Wrap up default single product html template (https://github.com/woocommerce/woocommerce-blocks/pull/8632)
* Add minimum structure for Single Product Details block
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* Add tests for Single Product Details block
* Add the initial basis for the Add to Cart button
* Trigger the single product add to cart action for each product type.
* wip: create block structure and add initial styles
* Add block details to the SingleProductDetails.php file
* Rename the block from add-to-cart-button to add-to-cart-form
* Update to use the cart icon.
* Implement the skeleton for the editor preview.
* Render tabs title with empty content
* Use woocommerce_output_product_data_tabs function to retrieve tabs data
* Update styles and add Notice for the display in the Editor.
* Update CSS.
* Add base tests for the new Add to Cart Form component.
* Add Product Image Gallery block
* remove support global styles
* remove support global styles
* Update the button CSS.
* Remove customizations for the Single Product Details block
* Update styles for the cart form.
* update td style.
* Update divs and CSS.
* Use conventional input instead of the experimental InputControl
* address CSS feedback
* add support for the custom classname
* remove save function
* Remove unnecessary console.log from the Edit.tsx file
* Remove block classname from block wrapper
* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController
* Remove attributes property from the block registration
* Remove isExperimental flag for the Single Product Details block
* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block
* Prevent Single Product Details block from apppearing in Pages or Posts
* add second parameter to the subscribe function
* Implement the new design and copy provided for the editor.
* Make the notice compatible with dark themes.
* Some additional CSS tweaks
* adjust the padding for the input
* wrap the Single Product Template in a div with the product class
* Fix PHP Coding Standards warnings
* improve logic and increase coverage of unit test
* improve logic and increase coverage of unit test
* fix test
* format HTML
* fix edge case
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* update block name
* fix SCSS linter error
* address feedback
* create SingleProductTemplateCompatibility class
* Add Hooks compatibility
* remove not used file
* remove not used files
* Add compatibility layer for the Single Product template
* fix check
* implement Product meta template header
* Product Price Block: Add support Single Product Template
* fix missing import
* add comment
* return a value
* improve comment
* fix import
* Add Product Meta block
* wrap up default single product html
* fix: related products and grouped products result woocommerce/woocommerce-blocks#8589
* remove classname
* fix crash
* update template
---------
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
* Fix images width in the Single Product page
* Remove the !important attribute from the Product Image Gallery block
* fix sku block
* improve layout
* fix header and footer template parts declaration
---------
Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
* Use attributes provided to save function in product-price block
* remove save function and use the shared one
* fix import
---------
Co-authored-by: Luigi <gigitux@gmail.com>
* Remove Single Product Block
* remove more files that belong the Single Product block
* fix php linter error
* remove Product Tag List and Product Category List blocks
* 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>
* 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
* 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.
* 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>
* 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>
* Add Product Image Gallery woocommerce/woocommerce-blocks#8233
Add Product Image Gallery
* Add Product Image Gallery block
* remove support global styles
* remove support global styles
* address CSS feedback
* add support for the custom classname
* remove save function
* add second parameter to the subscribe function
* update @types/wordpress__data package
* update placeholder, icon and description
* update tsconfig
* Product Rating: Transition from using CSS margin to Global Styles
* Product Rating: Re-add css margins for Product Rating inside of the All Products block.
* Product Rating: Change bottom margin to 1rem
* Product Rating: Re-add the Classic Template fix.
* Product Rating: Remove the Classic Template fix.
* Product Price: Transition from using CSS margin to Global Styles
* Product Price: Re-add css margins for Product Price inside of the All Products block.
* Product Price: Change bottom margin to 1rem
* Product Price: Fix the margin typescript declaration.
* Use local package rather than WP package in base components
* Missing type on imports
* Move hasSpecingStyleSupport inline to avoid polluting utils with the block-editor external
* Use local wordpress-block-editor import to avoid the external
* Add readme to base directory to warn against using editor/components externals
* Check functions exist
* Revert "Check functions exist"
This reverts commit ce95800b79ddb48369cd22d2b7854384db0d8891.
* Revert wordpress-block-editor import
* Add todos to the hooks that need refactoring
* Update assets/js/atomic/blocks/product-elements/button/supports.ts
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
* Update assets/js/atomic/blocks/product-elements/image/supports.ts
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
* Update assets/js/atomic/blocks/product-elements/rating/support.ts
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
* Update assets/js/atomic/blocks/product-elements/sale-badge/support.ts
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
* Update assets/js/atomic/blocks/product-elements/title/index.ts
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
* Reference issue
* Update assets/js/base/README.MD
Co-authored-by: kmanijak <karol.manijak@automattic.com>
* spacing
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
Co-authored-by: kmanijak <karol.manijak@automattic.com>
* Remove the Products block from WP < 6.0
Too many APIs which are required for the Products block experience
are just plainly unavailable in versions lower than 6.0.
(cherry picked from commit ccfb1210bcbdb14ab52f6f240916fb4fcaa3ff18)
(cherry picked from commit 8c7bcce8218a83a9498943b23c971de1199bcad7)
* Display Add Review link in the All Products if there's no product rating in All Products and Products
* Apply the font-size mixin to the Add Review link
* Make Add review link NOT clickable in editor
* Improve styles of Rating component so they support alignment in product grids