-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Extract the color palette to its own global styles screen #35109
Conversation
Size Change: +525 B (0%) Total Size: 1.06 MB
ℹ️ View Unchanged
|
This is advancing so fast, incredible work Riad. At some point I'd like to offer to help you massage some of the details (paddings, margins, colors, metrics), but at this point I don't want to mess with the path you're on. The sliding mechanism and even the color stacks are looking great, but I do encounter a crash saving a particular color: This is the error I got: In case it's a bug in the theme I tested with, you can grab that here. |
On a separate note, the GIF above also shows how the sibling inserter sometimes lingers, and in doing so causes a horizontal scrollbar when for example a sidebar panel is toggled on. @ellatrix I think you worked on the sibling inserter, would this be a tricky fix? I'd be happy to open a separate ticket. |
@jasmussen I fixed the error good catch. For the spacing, I agree, I'd love for us to use UI components directly and not have to tweak spacing at all. I didn't explore this yet because we're in this intermediary step where we have some redesigned panels but not all. |
Yep, I only wanted to say: you know where to find me if/when you can use my help! |
Could use a ✅ if you consider this good enough as an iteration :) |
packages/edit-site/src/components/sidebar/global-styles/screen-header.js
Show resolved
Hide resolved
Could you give me some examples, so that I can better understand if/where is the current limitation with the components?
Absolutely! It's good to see how the time spent on introducing / refining components is starting to pay off — the |
In several occasions, I had to add margin/paddings around panels (preview, palette...), I'd have loved to use some components directly like Card/CardBody. The default styles for these didn't work very well in my quick trials. That said, I'd like to explore this further later. As a consumer of components, I shouldn't be thinking about design but more about composition. |
I don't really know (or haven't used) the Panel component. The
I definitely agree with this statement in principle. I guess the "disconnect" here is that our components library is still quite "low-level" — e.g. we have individual color indicators, text, form controls... and we also have "layout" components like Flex, Grid, and the H|V|ZStacks. We don't have many "higher-level" components that compose these lower-level components into patterns that can be reused across Gutenberg (I'm not even sure if and which higher-level patterns should live in the components package). |
Anything blocking this PR? What's missing here? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Before merging, could you just rebase this PR to include changes from #35152, and then remove the isAction
prop from the Item
component?
Otherwise, LGTM 🎉
f9b0f87
to
016d4d7
Compare
Related #34574
This PR extracts the color palette to its own screen in the nested hierarchy of the global styles sidebar to match the designs in #34574.
Testing instructions