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

Jump to bottom

Background Tools #16479

Open
2 of 3 tasks
Tracked in #33447
mtias opened this issue Jul 9, 2019 · 6 comments
Open
2 of 3 tasks
Tracked in #33447

Background Tools #16479

mtias opened this issue Jul 9, 2019 · 6 comments
Assignees
@glendaviesnz @andrewserong
Labels
[Feature] Block API [Feature] Design Tools [Feature] UI Components
Projects
Blocks Tightening Up

Comments

@mtias
Copy link
Contributor

@mtias mtias commented Jul 9, 2019 •
edited by apeatling

As part of the effort to refine how we present and expose common block functionality (see #15450) we'll be both working on the technical infrastructure and the actual solutions. One of those is background tools. Right now it's possible to add video backgrounds, colored overlays, etc, to the Cover block alone. It'd make sense to extract this and extend to other container blocks (group and columns, for example) as well as expanding the features.

This ticket is meant to focus on the UI for background tools (toolbar and block inspector) and its feature set.

  • Background image.
  • Background video.
  • Color & Overlay.
  • Background gradient.
  • Focus point (if using image).
  • Parallax effect (if using image).

Tasks

  • Group background tools in a “Background” panel. Refine presentation if possible.
  • Add gradient color options. See #16662
  • Add tools to Column and Group. See #15450
@karmatosed karmatosed added this to Backlog in Phase 2 via automation Jul 9, 2019
@youknowriad youknowriad mentioned this issue Jul 9, 2019
Closed
22 tasks
@karmatosed karmatosed moved this from Backlog to UI iterations in Phase 2 Jul 9, 2019
@karmatosed karmatosed removed this from UI iterations in Phase 2 Jul 16, 2019
@karmatosed karmatosed added this to To do in Tightening Up Jul 16, 2019
@karmatosed karmatosed mentioned this issue Jul 18, 2019
Open
@karmatosed karmatosed added this to To Do in Blocks via automation Jul 19, 2019
@karmatosed karmatosed removed this from To Do in Tightening Up Jul 19, 2019
@karmatosed
Copy link
Member

@karmatosed karmatosed commented Jul 29, 2019

Just noting a few issues exploring this to feed into a global ticket:

Background tools for columns: #16660
Gradients in cover images: #16662

@SchneiderSam SchneiderSam mentioned this issue Aug 10, 2019
Open
@strarsis
Copy link

@strarsis strarsis commented Oct 25, 2019

When a background image is set as background, it would be nice if also the dominant image color is automatically set as background image. Then the element already got a good color while the image still loads and when images are disabled.

@noahtallen noahtallen mentioned this issue Nov 24, 2019
Closed
6 tasks
@mtias mtias mentioned this issue Dec 4, 2019
Closed
@karmatosed karmatosed added this to Inbox in Tightening Up via automation Dec 11, 2019
@karmatosed karmatosed moved this from Inbox to Needs design in Tightening Up Dec 11, 2019
@karmatosed
Copy link
Member

@karmatosed karmatosed commented Dec 20, 2019

I am going to remove needs design for now from this as both issues linked do have that and are in progress.

@karmatosed karmatosed moved this from Needs design to Ready to create in Tightening Up Dec 20, 2019
@mtias mtias mentioned this issue Feb 20, 2020
Closed
82 tasks
@ItsJonQ
Copy link
Contributor

@ItsJonQ ItsJonQ commented May 22, 2020

When a background image is set as background, it would be nice if also the dominant image color is automatically set as background image. Then the element already got a good color while the image still loads and when images are disabled.

@strarsis I think that's a wonderful idea!!! This suggestion inspired me to experiment and I think I have something pretty solid working <3

Video demo:
https://d.pr/v/f2flil

@ItsJonQ ItsJonQ mentioned this issue May 22, 2020
Open
6 tasks
@ocean90 ocean90 mentioned this issue Jun 6, 2020
Open
@mtias mtias mentioned this issue Nov 27, 2020
Closed
@mtias mtias mentioned this issue Jul 15, 2021
Open
38 tasks
@caseymilne
Copy link

@caseymilne caseymilne commented Aug 10, 2021 •
edited

Sorry if it's been already discussed but can the InspectorControls be grouped into a new component that could then be used consistently to provide backgrounds? And in situations where you might need to provide multiple backgrounds for 1 block (custom blocks might) then that component could be utilized again in multiple panels, like:

<BackgroundControlSet for="div" />
<BackgroundControlSet for="div.child" />

Any thoughts about using the same split as Elementor which is to define "Background Overlay" as separate from "Background"?

@scruffian scruffian mentioned this issue Nov 1, 2021
Closed
7 tasks
@glendaviesnz glendaviesnz self-assigned this Jan 20, 2022
@glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Jan 20, 2022

Have started a discussion here about options for implementing this.

@carolinan carolinan mentioned this issue Feb 2, 2022
Open
@annezazu annezazu mentioned this issue Feb 15, 2022
Open
@critterverse critterverse mentioned this issue Feb 15, 2022
Draft
8 tasks
@andrewserong andrewserong self-assigned this Mar 7, 2022
@javierarce javierarce mentioned this issue Mar 14, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@glendaviesnz glendaviesnz

@andrewserong andrewserong

Labels
[Feature] Block API [Feature] Design Tools [Feature] UI Components
Projects
Blocks
  
To Do
Design Tools Project
Status: ⏳ In Progress
Tightening Up
  
Ready to create
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
7 participants
@karmatosed @mtias @ItsJonQ @glendaviesnz @strarsis @andrewserong @caseymilne