* Add titles to patterns and set the aligment to Wide
* Replace product query patterns with product collection ones
* Remove pagination and no results query from product query patterns
* Add aspect ratio to the product image attributes
* Add portrait aspect ratio to product X column and product gallery patterns
* Add condition to register blocks and variation in single product template
* Improve the fix by providing default ancestor value to block registered for single product
* add E2E test
* add insert block
---------
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
* Product Gallery: add support for On Sale Badge Block
* add align support
* Add E2E tests
* set margin via Block Styles
* disable experimental flag
* add next previous block
* restore support file
* fix TS error
* fix layout
* change product
* Update Interactivity API JS files
* Disable TS checks in the Interactivity API for now
* Add new SSR files
* Replace wp_ prefixes with wc_ ones
* Replace wp- prefix with wc-
* Replace guternberg_ prefix with woocommerce_
* Remove file comments from Gutenberg
* Rename files with `wp` prefix
* Fix code to load Interactivity API php files
* Remove TODO comments
* Replace @wordpress with @woocommerce
* Update Webpack configuration
* Fix directive prefix
* Remove interactivity folder from tsconfig exclude
* Add client-side navigation meta tag code
* Remove unneeded blocks.php file
* Fix store tag id
* Register Interactivity API runtime script
* Fix Interactivity API runtime registering
* Remove all files related to directive processing in PHP
* Move json_encode to Store's render method
* WIP
* WIP
* WIP
* WIP
* Preserve previous context
* Ignore Minicart block on client-side navigation
* Refresh page on store updatRefresh page on store updatee
* Refactor logic
* Add console error when a path is missing
* fix PHP lint error
* WIP store
* use store approach
* update jest configuration
* restore Mini Cart changes
* move cart store subscription to interactivity package
* move interactivity flag
* format HTML
* move addToCartText to the context
* Load product-query stylesheet when rendering the Products block
* update sideEffects array
* fix catch
* rename moreThanOneItem to isThereMoreThanOneItem
* improve how scripts are enqueued
* update default value for the filter woocommerce_blocks_enable_interactivity_api
* Update assets/js/atomic/blocks/product-elements/button/block.json
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Update assets/js/interactivity/cart/cart-store.ts
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* fix block.json
* remove updateStore function
* restore interactivity api changes
* import cart store
* show notice when there is an error
* add logic to dequeue script on classic themes and block themes
* imrpove logic about notice
* Interactivity API: add `afterLoad` callbacks to `store()` function (https://github.com/woocommerce/woocommerce-blocks/pull/10338)
* show notice when there is an error
* Add initial implementation for store callbacks
* Run `afterLoad` callbacks after `init`
* Move cart state subscription to Product button
* Remove cart-store from Interactivity API internals
* Change callbacks with options and save only afterLoad callbacks
* ProductButton: Add animation (https://github.com/woocommerce/woocommerce-blocks/pull/10351)
* implement animation
* improve logic
* refactor logic
* refactor code
* address feedback about code style
* add support for woocommerce_add_to_cart_quantity
* Fix animation flickering
* Introduce wp-effect, reduce the amount of numberOfItem variables to 2 and consolidate animation status
* add support for added class
* Remove unnecessary selector
* Don't fetch cart if it was already fetched
* remove added class
---------
Co-authored-by: Luis Herranz <luisherranz@gmail.com>
---------
Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Luis Herranz <luisherranz@gmail.com>
* update deepsignal
* remove added class
* update deepsignal
* Interactivity API and Product Button: Add E2E tests (https://github.com/woocommerce/woocommerce-blocks/pull/10036)
* Add FrontendUtils class
* fix conflicts
* use locator
* restore click usage
* Product Button: Add E2E test
* fix util
* fix E2E tests
* remove comment
* Add E2E test to ensure that woocommerce_product_add_to_cart_text works
* update sideEffects array
* add zip and unzip as package
* fix wp-env configuration
* fix E2E test
* add report
* try now
* try now
* try now
* fix E2E test
* E2E: Add documentation for testing actions and filters. Fixeswoocommerce/woocommerce-blocks#10135 (https://github.com/woocommerce/woocommerce-blocks/pull/10206)
* update description
* fix label
* rename files
* make requestUtils private
* remove page.goto
* use toHaveCount
* use productsToDisplay variable
* fix E2E tests
* rename class utils
---------
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
---------
Co-authored-by: David Arenas <david.arenas@automattic.com>
Co-authored-by: Luis Herranz <luisherranz@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
* Show alignment toolbar also when the block is in the single product block
* Start using `Single Product` for the `Product Details Product Listing` pattern
* Use counter and stars blocks in the pattern
* Undo button change
* Make the new rating blocks not experimental
* Add Beta to the average rating block
* Add blocks to block types controller
* Add new Product Average Rating block
* Add new blocks to the feature flag docs
* Translate 'No ratings'
* Fix condition
* Small improvements after review
* Avoid duplication of styles
* Update supports in php class
* Rating start block improvements
Fix classes, register in single product, remove unused code
* Allow to use block on product & product collection
* Fix star missalignment
* Restrict the block to be insertable only in single product
* Add height & width setting to the image sidebar settings
* Extract settings and add scale options
* Add width settings
* Apply settings on the frontend
* Style placeholder image
* Replace post featured image with product image
* Allow the width to be wider than container
* Fix image on top of other elements
* Fix Product Image Gallery block overflow when multiple images are used
* Increase css specificity for the Product Image Gallery images
* Fix whitespace
* Fix style issue when using smaller images in the product image gallery
* Add isDescendentOfSingleProductBlock attribute to Add to Cart Form block
* Prevent notice from appearing when Add to Cart button is clicked
When the Add to Cart Form is added inside the Single Product Block, we
have to prevent the notice from appearing when the Add to Cart button is
clicked.
* Fix PHP CS errors
* Fix PHP CS errors
* Fix PHP CS errors
* Fix PHP CS errors
* Fix PHP CS errors
* Fix PHP CS errors
* Add phpcs:ignore WordPress.Security.NonceVerification.Recommended
* Fix Processing form data without nonce verification.
* PHP Ignore
* Improve doc comments
* Improve name for add_to_cart_message_html_filter hook
* Replace equal operator with identity operator in the conditional statement
* Add Single Product template support to Product Rating block
* Remove example attribute from block.json
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
* Set isDescedentOfSingleProductTemplate attribute default to false
* Remove withProductSelector HOC
Since we are using the `ancestor` key then we don't need to use this HOC anymore
* Remove unused import on Product Rating Edit component
---------
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
* Add missing WooCommerce styles to Add to Cart with Options block
* Fix input style for Add to Cart with Options block
* Add comment about the input-text css class that was added to the Add To Cart Form
* Add Products Collection block scaffolding
This commit adds the initial scaffolding for the new Products Collection block. It includes the creation of new files (block.json, edit.tsx, index.tsx and ProductsCollection.php) and additions to existing files (webpack-entries.js and BlockTypesController.php). The block is marked as experimental and currently displays a static "Product collection" text in both the editor and the frontend.
* Add Product Template block and integrate with Products Collection block
This commit introduces the new Product Template block and integrates it with the existing Products Collection block. The changes include:
- Creation of the Product Template block, including its block.json, edit.tsx, icon.tsx, index.tsx, and save.tsx files.
- Modification of the Products Collection block, adding an icon.tsx file and updating its edit.tsx and index.tsx files.
- Updates to the webpack-entries.js file to include the new Product Template block.
- Addition of the ProductTemplate class in the src/BlockTypes directory.
- Inclusion of the ProductTemplate class in the src/BlockTypesController.php file.
* Enhance product-template block with context and styling
This commit adds various enhancements to the product-template block. It includes:
- Introduce `usesContext` and `supports` properties to the block.json file
- Update the edit.tsx file to use BlockContextProvider and add query logic
- Add an editor.scss file for styling the product-template block in the editor
- Extend the products-collection block.json file with new properties
- Modify the products-collection edit.tsx file to include instanceId and useEffect
These changes improve the product-template block by providing better context handling and styling options.
* Add 'woocommerce/product-template' to supported inner blocks and improve product-template editing
This commit adds 'woocommerce/product-template' as a supported inner block for various product elements, including button, image, rating, sale-badge, SKU, and stock-indicator. It also improves the editing experience for the product-template block by memoizing the block previews and rendering them more efficiently. This should lead to a smoother editing experience and better performance in the block editor.
* Add product title and summary variations for Products Collection block
- Add default spacing between product elements in `style.scss`
- Register product title and summary element variations in `products-collection` block
- Create utility for registering element variations
- Extend core elements with WooCommerce namespace
* Set inherit to false by default and other improvements
This commit introduces several changes to the ProductsCollection block:
1. Set the "inherit" property to false in block.json, disabling inheritance by default.
2. Remove the default styles for inner blocks in the edit.tsx file.
3. Add a save function in the index.tsx file, and create a save.tsx file to handle saving the block.
4. Update the ProductTemplate.php file to properly render the block content based on the changes.
5. Remove the render function from the ProductsCollection.php file, as it is no longer necessary.
These changes improve the functionality and flexibility of the ProductsCollection block, allowing for better customization and control over the block's appearance and behavior.
* Fix pagination issue
* Minor code quality improvments
* Register product blocks only in experimental builds
- Wrap registerBlockType calls in product-template and products-collection with isExperimentalBuild check to enable block registration only in experimental builds.
- Update the default value for the perPage property in products-collection/block.json from null to 9, setting a default display of 9 items per page.
* Add experimental flag to PHP file
* Update documentation for feature flags
- Add Products Collection and Product Template blocks to the list of experimental flags in the feature-flags-and-experimental-interfaces.md file.
- Include references to PHP and webpack flags for both blocks.
* Change default order and orderBy values in block.json
- Update the default 'order' value from 'desc' to 'asc'.
- Update the default 'orderBy' value from 'date' to 'title'.
* Refactor experimental block registration and remove unused file
- Replace `isExperimentalBuild()` with `registerExperimentalBlockType()` in product-template/index.tsx.
- Remove unused file types.ts in product-template directory.
- Add `get_block_type_script()` function to ProductTemplate.php and ProductsCollection.php to return null.
* Update variation names in product summary and product title elements
Updated variation names for product summary and product title elements to match the new products-collection namespace. The previous variation names used the product-query namespace which will be deprecated. This change ensures that the correct variation names are used for these elements in the products-collection block.
* Rename 'Products Collection' to 'Product Collection'
- Renamed all instances of "products-collection" to "product-collection" across multiple files.
- Adjusted related types and method calls to match the new naming convention.
- Updated documentation and feature flags to reflect the name change.
- Made necessary changes in `BlockTypesController.php` and `bin/webpack-entries.js`.
* Hide product-template block from inserter
- Added "woocommerce/product-collection" to the list of parent blocks in `product-template/block.json`.
- Added `"inserter": false` to the "supports" section to disable the option of inserting this block through the editor inserter component.
* Fix Eslint error
* Replace all style hooks with useStyleProps hook
* Remove border/color/spacing hooks
* Style Props Hook
* Make use of `change-case` package
* Tidy up block wrappers
* Attribute filter does not use frontend.ts nor styles within block
* Remove frontend from filter blocks and unused styleprops usage
* Tidy up variable names so its clearer attributes are not required specifically from blocks
* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-title-label-block/block.tsx
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Update assets/js/blocks/attribute-filter/block-wrapper.tsx
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Update assets/js/blocks/active-filters/block-wrapper.tsx
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/block.tsx
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Update assets/js/blocks/rating-filter/block-wrapper.tsx
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Update assets/js/blocks/stock-filter/block-wrapper.tsx
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Update assets/js/blocks/price-filter/block-wrapper.tsx
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Update assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/block.tsx
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* Simplify styleprop
* Styleprops simplify
* Fix withFeaturedItem styles
* Like the original hook, flatten props and combine with parsed styles
---------
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Tom Cafferkey <tjcafferkey@gmail.com>
* 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
* 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>
* 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
* 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.
* 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.
Albert Juhé Lluveras
Alba Rincón
Thomas Roberts
Mike Jolley
Luigi Teschio
Karol Manijak
Tom Cafferkey
Luis Herranz
Roy Ho
Alexandre Lara
Daniel Dudzic
Patricia Hillebrandt
Tung Du
Hritik Chaudhary
Manish Menaria
Tarun Vijwani
Darren Ethier
Karol Manijak
Lucio Giannotta