This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Attribute Filter block: Enable global style #5557
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
…products-block into add/4965-product-title
Featured Category block: Add support for global style
…products-block into add/4965-featured-category
Attribute Filter block: enable global style #4965
gigitux
added
type: enhancement
rubikuserbot
requested review from
a team and
sunyatasattva
and removed request for
a team
gigitux
added
the
status: blocked
|
Do you think it makes sense to add some comments about this hacky approach in the CSS? (maybe where I use |
|
Size Change: +1.45 kB (0%) Total Size: 812 kB
ℹ️ View Unchanged
|
18 tasks
…products-block into add/4965-attribute-filter
sunyatasattva
suggested changes
Jan 17, 2022
| @@ -23,6 +23,7 @@ import './style.scss'; | |||
| * @param {Object} props Incoming props for the component. | |||
| * @param {string} props.attributeLabel Label for the attributes. | |||
| * @param {string} props.className CSS class used. | |||
| * @param {Object} props.style CSS style object used. | |||
There was a problem hiding this comment.
What about using CSSProperties?
| onChange: setOverlayColor, | ||
| label: __( | ||
| 'Overlay Color', | ||
| { !! url && ( |
There was a problem hiding this comment.
I understand you want to cast this as a boolean, but I have to say I've always found the !! confusing and I'm not sure there is any clearer advantage to just having url &&. What are your thoughts?
There was a problem hiding this comment.
I just moved this code, I didn't edit it. I agree with you that it is not very clear this cast! I will change it!
| */ | ||
| import Block from './block'; | ||
|
|
||
| export const Edit = ( props: unknown ): JSX.Element => { |
There was a problem hiding this comment.
I haven't worked with blocks much, so forgive me for asking: isn't there a way to know this type at all?
There was a problem hiding this comment.
I haven't worked with blocks much, so forgive me for asking: isn't there a way to know this type at all?
Yes, we can try to type it, but without the right typeguards, there is the risk that the code will be less safe than now.
|
|
||
| /** | ||
| * Block content is rendered in PHP, not via save function. | ||
| */ | ||
| save() { | ||
| save: () => { |
There was a problem hiding this comment.
Why was this changed? Was this automatically done by Prettier? I find 13 instances of save() { but only this one of save: () =>, so perhaps the former is more in line with the repo conventions?
…products-block into add/4965-attribute-filter
…products-block into add/4965-attribute-filter
gigitux
removed
the
status: blocked
sunyatasattva
approved these changes
Feb 2, 2022
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 #5542
This PR adds support for global style for the
Attribute Filter block.Now, the user can edit the style for:
Note
Unfortunately at the current stage, global style API doesn't support the customization of the inner element instead of block wrapper, so this PR contains a hacky CSS for accomplishing the goal
WordPress/gutenberg#33255
WordPress/gutenberg#32417
#4965
Screenshots
Mode: Display List
without global style
with global style
Mode: Dropdown List
without global style
with global style
Testing
Manual Testing
Check out this branch:
WordPress 5.9.Twenty Twenty-Twotheme.Attribute Filter blockto a post.Resetbutton from the different sections.Stylesicon on the right-top corner.Attribute Filter blockis shown under theBlockssection. Personalize again the block.Changelog