Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Create Product Image Gallery block #8233

Closed
Tracked by #8054
gigitux opened this issue Jan 18, 2023 · 1 comment · Fixed by #8235
Closed
Tracked by #8054

Create Product Image Gallery block #8233

gigitux opened this issue Jan 18, 2023 · 1 comment · Fixed by #8235
Assignees
Labels
focus: FSE Work related to prepare WooCommerce for FSE. type: new block Applied to work that introduces a new block (typically used on an epic issue).

Comments

@gigitux
Copy link
Contributor

gigitux commented Jan 18, 2023

We want to create a block for the product images on the single product page that wraps the current behavior rendered by PHP.

Property Value
Block title Product Image Gallery
Block description TBD
Block slug TBD
Block file location TBD
Block class location src/BlockTypes/ProductImageGallery.php
Scope Site Editor
Equivalent template file plugins/woocommerce/templates/single-product/product-image.php
Equivalent template function woocommerce_show_product_images
Style TBD
Visibility Woocommerce Core

Screenshots

image

@gigitux gigitux added type: new block Applied to work that introduces a new block (typically used on an epic issue). focus: FSE Work related to prepare WooCommerce for FSE. labels Jan 18, 2023
@gigitux gigitux self-assigned this Jan 18, 2023
gigitux added a commit that referenced this issue Jan 18, 2023
Add Product Image Gallery
@gigitux gigitux mentioned this issue Jan 18, 2023
4 tasks
@gigitux
Copy link
Contributor Author

gigitux commented Jan 20, 2023

Hey @vivialice,
Do you have any idea about the description and the look of this block on the editor side?
What about the icon?

gigitux added a commit that referenced this issue Feb 14, 2023
* Add Product Image Gallery #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
gigitux added a commit that referenced this issue Feb 28, 2023
* Add minimum structure for Single Product Details block

* Add Product Image Gallery #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

* address feedback

* remove unused import

* double empty line

* remove logic in the constructor

* remove hook

* generate the docs

* add missing hooks

* fix docs

* address feedback

* fix linter

* fix import

* Disable compatibility layer when the WooCommerce Product Grid Block block and WooCommerce Single Product Block are used (#8538)

* disable compatibility layer via hook

* update docs

* generate the docs

* fix version

* fix import

* fix code after merge

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
gigitux added a commit that referenced this issue Mar 9, 2023
* Add minimum structure for Single Product Details block

* Add Product Image Gallery #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>
gigitux added a commit that referenced this issue Mar 21, 2023
* Add minimum structure for Single Product Details block

* Add Product Image Gallery #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 #8589

* remove classname

* fix crash

* update template

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
gigitux added a commit that referenced this issue Mar 22, 2023
* 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 (#8632)

* Add minimum structure for Single Product Details block

* Add Product Image Gallery #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 #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>
gigitux added a commit that referenced this issue Mar 23, 2023
)

* Add minimum structure for Single Product Details block

* Add Product Image Gallery #8233

Add Product Image Gallery

* First try to render Product Arhcive template as blocks

* First iteration of the whole blockified product archive template

* Add tests for Single Product Details block

* Extract a blockified Product Archive Template to the templates

* Add templates to tsconfig.json so the files are resolved as part of the core code

* Add a encouragement note to use blockified version IF migration is available

* Add a Row block wrapping Product Results Count and Catalog Sorting blocks

* Move blockified product-archive from templates/ to assets/ directory

* Remove unnecessary margin from Product Results Count block

When used in a Row block in a blockified Archive Product template, Product Results Count had additional unnecessary margin which caused misalignment with the Catalog Sorting block

* Fix TypeScript error

* Update the description of the Classic Template Editor placeholder

* Remove unnecessary entry in tsconfig.json to include templates directory

It was added couple of commits earlier, since the template was kept there, but it was decided to move it to assets directory, so entry is no longer necessary

* Move the  to

* Differentiate the Classic Template placeholder description depending on the availability to convert to Products block

* Add the initial basis for the Add to Cart button

* Add E2E test that the Classic Template can be replaced with the blockified version

* Abandon writing E2E tests for now, as there's a problem to run them locally

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

* Syntax improvement

* Set margin for Catalog Sorting to 0, so it aligns properly when used in blockified Archive Product template

* Make the blockification config, so it covers the Product Archive as well as Single Product templates

* Move the product-archive specific functions from classic-template/index.tsx to the product-archive.ts

* wip: create block structure and add initial styles

* Add alignment option to the Store Notices block and make the blockified template blocks aligned wide

That is required, so the Classic Template layout is preserved

* Create single-product.ts file which is a placeholder for the blockified Single Product template

* Add block details to the SingleProductDetails.php file

* Make Blockified Product Archive template inherit the align attibute

* Simplify the interface of blockified templates

Expose  function instead of two functions for allowing and disallowing conversion

* Add a BlockifiedTemplate type

* Rename and simplify the function checking if conversion of classic template to block version is possible

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

* Update to use the cart icon.

* Align the variable naming to use  instead of

* Implement the skeleton for the editor preview.

* Render tabs title with empty content

* Use woocommerce_output_product_data_tabs function to retrieve tabs data

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

* Update CSS.

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

* Add Product Image Gallery block

* Pass the Classic Template attributes to the blockified template instead of getting it from data store

* Include Breadcrumbs block in the Blockified Product Archive Template

* Consume alignment attributes of Catalog Sorting in the PHP render function

* Consume alignment attributes of Breadcrumbs in the PHP render function

* Show conversion button with label and description

* Add conversion placeholder (until we have all the blocks implemented)

* Remove align support from Catalog Sorting and add to Store Notices block

* remove support global styles

* remove support global styles

* Update the button CSS.

* Remove customizations for the Single Product Details block

* Update styles for the cart form.

* update td style.

* Update divs and CSS.

* Use conventional input instead of the experimental InputControl

* Extend the get_classes_and_styles_by_attributes method with align and text_align attributes

* address CSS feedback

* Add Archive Title block to the Blockified Classic Template

* Minor getRowBlock function refactor

* add support for the custom classname

* remove save function

* Add  property to the classic templates and base the config on it instead of placeholder

* Add separate blockified template for a Product Search Results

* Pass  attribute from classic template to No Results block in Product Search Results

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

* Remove block classname from block wrapper

* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController

* Remove attributes property from the block registration

* Remove isExperimental flag for the Single Product Details block

* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block

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

* Extract the common functions between blockified archive-template and product-search-results to utils

* Enable 'Inherit query from template' in Products block by default when converting the Classic Template to blockified one

* add second parameter to the subscribe function

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

* Make the notice compatible with dark themes.

* Some additional CSS tweaks

* adjust the padding for the input

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

* Fix PHP Coding Standards warnings

* Improve the naming of BlockifiedTemplateConfig type

* Differentiate Product Catalog and Products By * templates. The latter include Term Description block

* improve logic and increase coverage of unit test

* Change unclear ProductsBy to ProductTaxonomy in regards to classic template conversion

* improve logic and increase coverage of unit test

* fix test

* format HTML

* fix edge case

* update @types/wordpress__data package

* update placeholder, icon and description

* update tsconfig

* update block name

* fix SCSS linter error

* address feedback

* create SingleProductTemplateCompatibility class

* Revert the margin fix which was added already on trunk

* Add Hooks compatibility

* remove not used file

* remove not used files

* Add compatibility layer for the Single Product template

* fix check

* implement Product meta template header

* Add default Single Product HTML template

* Fix style issues when adding blocks inside group/stack/columns blocks

* Add Related Products to the default single product template HTML file

* Product Price Block: Add support Single Product Template

* fix missing import

* add comment

* return a value

* improve comment

* fix import

* Add Product Meta block

* wrap up default single product html

* remove classname

* add blocks

* improve code

* Remove !important statement from Product Image Gallery block css

* Change width of Product Image Gallery block to initial instead of unset

* Wrap up default single product html template (#8632)

* Add minimum structure for Single Product Details block

* Add Product Image Gallery #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 #8589

* remove classname

* fix crash

* update template

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>

* Fix images width in the Single Product page

* Remove the !important attribute from the Product Image Gallery block

* fix sku block

* improve layout

* improve layout

* improve layout

* improve layout

* improve layout

* update label

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Luigi <gigitux@gmail.com>
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
gigitux added a commit that referenced this issue Mar 26, 2023
…8833)

* Add minimum structure for Single Product Details block

* Add Product Image Gallery #8233

Add Product Image Gallery

* First try to render Product Arhcive template as blocks

* First iteration of the whole blockified product archive template

* Add tests for Single Product Details block

* Extract a blockified Product Archive Template to the templates

* Add templates to tsconfig.json so the files are resolved as part of the core code

* Add a encouragement note to use blockified version IF migration is available

* Add a Row block wrapping Product Results Count and Catalog Sorting blocks

* Move blockified product-archive from templates/ to assets/ directory

* Remove unnecessary margin from Product Results Count block

When used in a Row block in a blockified Archive Product template, Product Results Count had additional unnecessary margin which caused misalignment with the Catalog Sorting block

* Fix TypeScript error

* Update the description of the Classic Template Editor placeholder

* Remove unnecessary entry in tsconfig.json to include templates directory

It was added couple of commits earlier, since the template was kept there, but it was decided to move it to assets directory, so entry is no longer necessary

* Move the  to

* Differentiate the Classic Template placeholder description depending on the availability to convert to Products block

* Add the initial basis for the Add to Cart button

* Add E2E test that the Classic Template can be replaced with the blockified version

* Abandon writing E2E tests for now, as there's a problem to run them locally

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

* Syntax improvement

* Set margin for Catalog Sorting to 0, so it aligns properly when used in blockified Archive Product template

* Make the blockification config, so it covers the Product Archive as well as Single Product templates

* Move the product-archive specific functions from classic-template/index.tsx to the product-archive.ts

* wip: create block structure and add initial styles

* Add alignment option to the Store Notices block and make the blockified template blocks aligned wide

That is required, so the Classic Template layout is preserved

* Create single-product.ts file which is a placeholder for the blockified Single Product template

* Add block details to the SingleProductDetails.php file

* Make Blockified Product Archive template inherit the align attibute

* Simplify the interface of blockified templates

Expose  function instead of two functions for allowing and disallowing conversion

* Add a BlockifiedTemplate type

* Rename and simplify the function checking if conversion of classic template to block version is possible

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

* Update to use the cart icon.

* Align the variable naming to use  instead of

* Implement the skeleton for the editor preview.

* Render tabs title with empty content

* Use woocommerce_output_product_data_tabs function to retrieve tabs data

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

* Update CSS.

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

* Add Product Image Gallery block

* Pass the Classic Template attributes to the blockified template instead of getting it from data store

* Include Breadcrumbs block in the Blockified Product Archive Template

* Consume alignment attributes of Catalog Sorting in the PHP render function

* Consume alignment attributes of Breadcrumbs in the PHP render function

* Show conversion button with label and description

* Add conversion placeholder (until we have all the blocks implemented)

* Remove align support from Catalog Sorting and add to Store Notices block

* remove support global styles

* remove support global styles

* Update the button CSS.

* Remove customizations for the Single Product Details block

* Update styles for the cart form.

* update td style.

* Update divs and CSS.

* Use conventional input instead of the experimental InputControl

* Extend the get_classes_and_styles_by_attributes method with align and text_align attributes

* address CSS feedback

* Add Archive Title block to the Blockified Classic Template

* Minor getRowBlock function refactor

* add support for the custom classname

* remove save function

* Add  property to the classic templates and base the config on it instead of placeholder

* Add separate blockified template for a Product Search Results

* Pass  attribute from classic template to No Results block in Product Search Results

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

* Remove block classname from block wrapper

* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController

* Remove attributes property from the block registration

* Remove isExperimental flag for the Single Product Details block

* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block

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

* Extract the common functions between blockified archive-template and product-search-results to utils

* Enable 'Inherit query from template' in Products block by default when converting the Classic Template to blockified one

* add second parameter to the subscribe function

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

* Make the notice compatible with dark themes.

* Some additional CSS tweaks

* adjust the padding for the input

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

* Fix PHP Coding Standards warnings

* Improve the naming of BlockifiedTemplateConfig type

* Differentiate Product Catalog and Products By * templates. The latter include Term Description block

* improve logic and increase coverage of unit test

* Change unclear ProductsBy to ProductTaxonomy in regards to classic template conversion

* improve logic and increase coverage of unit test

* fix test

* format HTML

* fix edge case

* update @types/wordpress__data package

* update placeholder, icon and description

* update tsconfig

* update block name

* fix SCSS linter error

* address feedback

* create SingleProductTemplateCompatibility class

* Revert the margin fix which was added already on trunk

* Add Hooks compatibility

* remove not used file

* remove not used files

* Add compatibility layer for the Single Product template

* fix check

* implement Product meta template header

* Add default Single Product HTML template

* Fix style issues when adding blocks inside group/stack/columns blocks

* Add Related Products to the default single product template HTML file

* Product Price Block: Add support Single Product Template

* fix missing import

* add comment

* return a value

* improve comment

* fix import

* Add Product Meta block

* wrap up default single product html

* remove classname

* add blocks

* improve code

* Remove !important statement from Product Image Gallery block css

* Change width of Product Image Gallery block to initial instead of unset

* Wrap up default single product html template (#8632)

* Add minimum structure for Single Product Details block

* Add Product Image Gallery #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 #8589

* remove classname

* fix crash

* update template

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>

* Fix images width in the Single Product page

* Remove the !important attribute from the Product Image Gallery block

* fix sku block

* improve layout

* improve layout

* improve layout

* improve layout

* improve layout

* update label

* Single Product Template: add store notice block

---------

Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
Co-authored-by: Alba Rincón <alba.rincon@automattic.com>
Co-authored-by: Alba Rincón <albarin@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: FSE Work related to prepare WooCommerce for FSE. type: new block Applied to work that introduces a new block (typically used on an epic issue).
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant