Skip to content
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

Cover: Move color controls to the toolbar #20837

Open
Tracked by #33447
mtias opened this issue Mar 12, 2020 · 10 comments
Open
Tracked by #33447

Cover: Move color controls to the toolbar #20837

mtias opened this issue Mar 12, 2020 · 10 comments
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Dev Ready for, and needs developer efforts [Type] Task Issues or PRs that have been broken down into an individual action to take

Comments

@mtias
Copy link
Member

mtias commented Mar 12, 2020

Color controls, like background media, are primary features of this block and should be moved to the toolbar:

image

@mtias mtias added [Type] Task Issues or PRs that have been broken down into an individual action to take [Block] Cover Affects the Cover Block - used to display content laid over a background image [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Dev Ready for, and needs developer efforts labels Mar 12, 2020
@ZebulanStanphill
Copy link
Member

Related issue for Group and Columns blocks: #20070.

@ItsJonQ
Copy link

ItsJonQ commented May 19, 2020

👋 Halloo! I started looking into this today.

Ma goodness! What a journey. It's definitely a challenge, especially if we want to do it cleanly.

I'm up for taking this one! Just want to leave a note for my future self (and to others)

Don't under estimate this one 🙃

@ZebulanStanphill
Copy link
Member

ZebulanStanphill commented May 19, 2020

@ItsJonQ Yeah, as I discovered in #20246, the way controls, toolbars, and popovers relate to each other and how you're supposed to use them is rather complicated. Good luck!

@ItsJonQ
Copy link

ItsJonQ commented May 19, 2020

Screen Shot 2020-05-19 at 4 26 58 PM

Got a quick + dirty version working. (Ignore the W placeholder Icon for now)

One thing I noticed is that there may be cases where the dropdown menu will cover the content (like above). It's a little unsettling (at least for me). I prefer the controls being on the sidebar (as disconnected as they are). At least it allows me to see the Cover in full view as I adjust it.

If anyone is curious, I pushed up my explorations here:
https://github.com/WordPress/gutenberg/tree/try/cover-color-toolbar-experiment

Branch: try/cover-color-toolbar-experiment

@mtias
Copy link
Member Author

mtias commented May 20, 2020

@ItsJonQ I think this one should be present in both places. There some work left to do to clean the contents but this is a good first step to exposing the most important tools.

@ItsJonQ
Copy link

ItsJonQ commented May 20, 2020

@mtias Great! Thanks for your thoughts :). In that case, I'll proceed with this effort!

@ZebulanStanphill
Copy link
Member

@mtias I thought we wanted to avoid duplicate controls in the toolbar/inspector?

@glendaviesnz
Copy link
Contributor

Currently the color/gradient controls seem to be very tied to the inspector panels, and they are also in the middle of an update, so it may make sense to defer this until that work is finalised. I have added a comment over on the color component issue about this as it would be good to have the use of these components in inspector panels and dropdowns considered as part of that work.

@glendaviesnz glendaviesnz removed their assignment Sep 28, 2021
@glendaviesnz
Copy link
Contributor

There is a very rudimentary PoC branch that adds the existing color panel to a dropdown just to see how it looks at https://github.com/WordPress/gutenberg/tree/move/cover-color-to-tool-menu

@mtias
Copy link
Member Author

mtias commented Sep 28, 2021

Also slightly related: #34680

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Dev Ready for, and needs developer efforts [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Development

No branches or pull requests

5 participants