This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Rating Product block: Add support for global style #5521
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…mmerce-gutenberg-products-block into add/4965-rating-product
Rating Product block: add support for global style
gigitux
added
type: enhancement
rubikuserbot
requested review from
a team and
Aljullu
and removed request for
a team
18 tasks
|
Size Change: +454 B (0%) Total Size: 816 kB
ℹ️ View Unchanged
|
gigitux
added
the
status: blocked
…products-block into add/4965-rating-product
gigitux
force-pushed
the
add/4965-rating-product
branch
from
b901166 to
23f9587
Compare
gigitux
removed
the
status: blocked
Aljullu
reviewed
Jan 14, 2022
There was a problem hiding this comment.
This is working great, and I really like the style hooks you created and how clean the code looks. 👏
The only issue I found is that when using the Product Rating block inside the All Products block, the color doesn't seem to be applied. What's weird is that Product title styles do work, so the issue is only in the Product Rating block:
Any idea what might be going on?
…products-block into add/4965-rating-product
It is fixed now! |
gigitux
force-pushed
the
add/4965-rating-product
branch
from
f82aa78 to
33b6b61
Compare
Aljullu
reviewed
Feb 8, 2022
| @@ -143,7 +143,6 @@ | |||
| left: 0; | |||
| right: 0; | |||
| position: absolute; | |||
| color: #000; | |||
There was a problem hiding this comment.
Removing this line changes the color of the stars in product grid blocks.
All Products block without styles applied:
| Before | After |
|---|---|
 |
 |
Top Rated Products block:
| Before | After |
|---|---|
 |
 |
Do you think there is any way to keep this declaration while getting global styles to work?
There was a problem hiding this comment.
Thanks for catching this!
I restored the previous CSS with 84f00de commit.
I forgot that we have some components that display product ratings on the PHP side (as ´Top Rated Products` block). Now the global style will be applied on PHP side blocks too (but as default the color will be black)
I'm not sure about the screenshot that you shared.
I checked the trunk and I see always black stars. Can you check again?
There was a problem hiding this comment.
Ah, not sure what I did to get that color. 😅 It was in Storefront but I checked it again and it's dark-gray as the other blocks.
gigitux
force-pushed
the
add/4965-rating-product
branch
from
84f00de to
98416dc
Compare
Aljullu
reviewed
Feb 10, 2022
| @@ -562,7 +562,7 @@ protected function get_rating_html( $product ) { | |||
|
|
|||
| if ( $rating_count > 0 ) { | |||
| return sprintf( | |||
| '<div class="wc-block-grid__product-rating">%s</div>', | |||
| '<div class="wc-block-grid__product-rating wc-block-components-product-rating">%s</div>', | |||
There was a problem hiding this comment.
I noticed this change makes it so the color is also changed in ratings displayed inside the PHP product grid blocks. IMO Product rating global styles should only change the styles of the Product rating block, but they shouldn't impact any other rating component.
There was a problem hiding this comment.
Ok! I will revert this change
| @@ -143,7 +143,6 @@ | |||
| left: 0; | |||
| right: 0; | |||
| position: absolute; | |||
| color: #000; | |||
There was a problem hiding this comment.
Ah, not sure what I did to get that color. 😅 It was in Storefront but I checked it again and it's dark-gray as the other blocks.
Aljullu
reviewed
Feb 10, 2022
There was a problem hiding this comment.
Confirming the issue is fixed now, I still left one additional comment about the selector we use for the styles. I think we should intentionally apply the global styles only to the Product Rating block, instead of applying to any product rating component displayed in any block.
…products-block into add/4965-rating-product
|
Size Change: +688 B (0%) Total Size: 816 kB
ℹ️ View Unchanged
|
Ok! I just reverted the change on |
Aljullu
approved these changes
Feb 15, 2022
src/BlockTypesController.php
Outdated
| @@ -234,7 +235,7 @@ protected function get_atomic_blocks() { | |||
| 'product-button', | |||
| 'product-image', | |||
| 'product-price', | |||
| 'product-rating', | |||
| 'product-sale-badge', | |||
There was a problem hiding this comment.
I had to remove this line, otherwise I was getting an error telling me product-sale-badge was registered twice:
( ! ) Notice: WP_Block_Type_Registry::register was called <strong>incorrectly</strong>. Block type "woocommerce/product-sale-badge" is already registered. Please see <a href="https://wordpress.org/support/article/debugging-in-wordpress/">Debugging in WordPress</a> for more information. (This message was added in version 5.0.0.) in .../Local Sites/latest/app/public/wp-includes/functions.php on line 5768
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is blocked by #5515This PR adds support for global style for the
Rating Productblock.Now, the user can edit the style for:
Fixes #4965
Screenshots
without global style
with global style
Testing
Manual Testing
Check out this branch:
WordPress 5.9, install and enable theGutenbergplugin.Twenty Twenty-Twotheme.Single Product block(this block containsRating Product block) to a post.Rating Product block.Resetbutton from the different sections.Stylesicon on the right-top corner.Rating Product blockis shown under theBlockssection. Personalize again the block.Changelog