Add default Single Product HTML template #8515
Conversation
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
🎉 🎉 This PR does not introduce new TS errors. |
|
Size Change: +10 B (0%) Total Size: 1.06 MB
ℹ️ View Unchanged
|
| @@ -0,0 +1,3 @@ | |||
| .woocommerce .wp-block-woocommerce-product-image-gallery div.images { | |||
| width: unset !important; | |||
There was a problem hiding this comment.
Do we need to use !important here?
I typically try to avoid this, if at all possible. It seems like increasing the specificity just a little bit would do the trick:
.woocommerce .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.images {
width: unset;
}I'm also wondering about the choice to use unset as opposed to initial (which is how unset behaves here on a non-inherited property), auto, or even 100%. I'm not mentioning it because I think it's wrong, I'm really just curious. 🙂
There was a problem hiding this comment.
Thank you for reviewing this, you're right, we can avoid using !important if we increase the specificity of the css rule.
I'm also wondering about the choice to use unset as opposed to initial (which is how unset behaves here on a non-inherited property), auto, or even 100%. I'm not mentioning it because I think it's wrong, I'm really just curious. 🙂
Well, I think that I just put the first value that worked and solved the issue, but now that you mentioned initial would be much better. I just committed a new version with your suggestions 🙌
There was a problem hiding this comment.
Thanks @thealexandrelara!
And to clarify, I wasn't implying that unset was necessarily wrong. I was really more curious if there was a particular reason for going with that option.
IMO, there are tradeoffs – unset can be a little confusing because its behavior depends on if the element is an inherited or non-inherited property. On the other hand, it does show up as unset in the dev tools where initial seems to display the initial value. I typically go with initial because I don't have to think about the inheritance type.
Anyhow, thanks for updating. Everything LGTM and tests as described! 🚀
|
Hey @thealexandrelara ! Are we still planning to make additional changes here to include the product price and meta blocks ( p1677488996782979/1677266906.480569-slack-C04GYS4JGUB )? Based on that previous discussion with Luigi, I was postponing the review until we do. |
Yep! It is better to postpone the review of this PR. I created another PR that will be merged in this branch where I added the |
Cool, thanks for confirming 👍 ! |
…ocks into feat/add-default-single-product-html-template
…ocks into feat/add-default-single-product-html-template
* 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>
…://github.com/woocommerce/woocommerce-blocks into feat/add-default-single-product-html-template
|
Hey folks, |
gigitux
force-pushed
the
feat/add-default-single-product-html-template
branch
3 times, most recently
from
ba585ab to
bcc5642
Compare
gigitux
force-pushed
the
feat/add-default-single-product-html-template
branch
from
bcc5642 to
394ef49
Compare
There was a problem hiding this comment.
Nice work 🎉 !
I just left a question regarding the header and footer, but other than that, everything works as expected.
Test Results
Go to Appearance > Themes and activate a Blockfied theme, such as: Twenty-twenty Three;
After the theme is activated, go to Appearance > Editor (Beta);
Inside the Design section, click on Templates;
Select the Single Product template;
On the top left of the page, click on the Edit button;
On the top right of the page, click on the three dots icon and open the Code Editor (or just hit Shift + Option + Command + M on the Mac);
Replace the default wp-group section with the wp-group section inside the templates/templates/blockified/single-product.html file of this PR.
Click on the Save button;
Check if the information is correctly being displayed and well positioned on the page.
✅ Confirmed the information is displayed and well positioned on the page both on the editor side and on the FE:
Screen.Recording.2023-03-22.at.11.41.52.mov
| <!-- wp:paragraph --> | ||
| <p>Single product blockified</p> | ||
| <!-- /wp:paragraph --></div> | ||
| <!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /--> |
There was a problem hiding this comment.
Are we sure we wanna add the header and footer for twentytwentythree theme here? What happens if the user is using another theme?
There was a problem hiding this comment.
Great catch! I fixed via 1822c58
| @@ -6,8 +6,9 @@ | |||
| "description": "A block that allows your customers to see details and reviews about the product.", | |||
| "category": "woocommerce", | |||
| "keywords": [ "WooCommerce" ], | |||
| "supports": {}, | |||
| "attributes": {}, | |||
There was a problem hiding this comment.
How come we're removing the attributes property here and adding it in product-image-gallery/block.json below?
I couldn't find the specific commit that made this change. Everything still tests as described, I'm really just curious! 🙂
There was a problem hiding this comment.
I updated this PR multiple times these weeks, so I'm unsure who and when the attributes key was removed.
I agree with you, we should remove the empty attributes on the product image gallery block.json. I created a PR #8825
There was a problem hiding this comment.
Perfect, thank you. I'll put that on my list to review today!
tarunvijwani
added
the
type: enhancement
Fixes #8480
Accessibility
Screenshots
Testing
User Facing Testing
wp-groupsection with thewp-groupsection inside the templates/templates/blockified/single-product.html file.Changelog