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

Background Tools for Columns #16660

Open
karmatosed opened this issue Jul 18, 2019 · 14 comments
Open

Background Tools for Columns #16660

karmatosed opened this issue Jul 18, 2019 · 14 comments

Comments

@karmatosed
Copy link
Member

@karmatosed karmatosed commented Jul 18, 2019

This issue relates to #16479 and is specifically for columns.

How can the following be explored for columns:

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

This comment has been minimized.

Copy link
Contributor

@richtabor richtabor commented Jul 26, 2019

To kick off exploration, let’s look at how third party blocks and other applications are handling background image support with these initial thoughts to explore:

  • How would background image support work within the block content area or toolbar (instead of solely relying on the sidebar)?
  • What display options should be supported? etc: patterns, attachment, repeating, dimming
  • Should background color and background image controls be presented together in the UI?
  • Should background images have DropZone support where users can drop in a background image?
  • Should background videos be supported?
  • Should blocks be able to opt-into background support via ‘supports’?
@richtabor

This comment has been minimized.

Copy link
Contributor

@richtabor richtabor commented Jul 26, 2019

Below is UI from CoBlocks. Once a background image is added, a Background Settings PanelBody displays within a block’s Settings Sidebar.

ScreenFlow

@karmatosed

This comment has been minimized.

Copy link
Member Author

@karmatosed karmatosed commented Jul 29, 2019

@richtabor out of the options in CoBlocks, which do you think are essential to include? For me the following feel like good starting points:

The types seem to be:

  • Background image.
  • Background video.
  • Color & Overlay.
  • Background gradient.

With the following as settings:

  • If image focal point and parallax.
  • Opacity.
  • Repeating and display (cover for example).

Would you be up for creating a mockup based on that as a starting design?

@karmatosed karmatosed mentioned this issue Jul 29, 2019
0 of 3 tasks complete
@onuro

This comment has been minimized.

Copy link

@onuro onuro commented Jul 29, 2019

If I may raise a personal thought on the matter: I've noticed a serious downside on the browser painting performance when I ever use the Video element(tag) in my blocks or content especially if the video content is more than 4mb in size.

Now I've developed a block that puts the video within an iframe and works like charm (and allow youtube and vimeo as well). What if the video background content was rendered within an iframe?

What do you think about the idea?

@razwan

This comment has been minimized.

Copy link

@razwan razwan commented Jul 30, 2019

For Nova Blocks we've created a HOC to handle the parallax effect for two of our blocks. For core blocks the controls could be reduced to a single range slider from static to fixed background but I guess this would come handy as a proof-of-concept. The GIF doesn't really do a great job for previewing the UI so I'll link a video also.

Screen Recording 2019-07-30 at 10 39 AM

Regarding your concerns @onuro. I can't see a noticeable performance downgrade when using the core video block. However, if that's the case, you should probably open another issue and maybe propose the changes for the core video blocks.

@richtabor

This comment has been minimized.

Copy link
Contributor

@richtabor richtabor commented Aug 30, 2019

Here are a couple mockups of what this could look like:

1. A unified toolbar control (that third-party blocks can also leverage) where background colors and images may be applied. We can perhaps explore using Sidebar Settings as well, but toolbar would be interesting to work towards.

columns-w-bg

2. From the toolbar, if a background image is added.
columns-bg-w-bg

3. If a background image is applied, you'll see a new "Background Settings" panel to manipulate the applied background image.

columns-bg-sidebar

@richtabor

This comment has been minimized.

Copy link
Contributor

@richtabor richtabor commented Aug 30, 2019

We'd use "Image" labels if we choose to only support background images, but if we support videos, we'd use "Media" (to follow the patterns set by the Media & Text and Cover blocks.

columns-bg-media

@mtias

This comment has been minimized.

Copy link
Contributor

@mtias mtias commented Aug 31, 2019

This is good, thanks @richtabor. I was exploring a similar pattern for exposing the color in the toolbar in the Cover block.

image

And with no color set:
image

It does make sense to bring more of these settings into the toolbar. I like combining media and color options for blocks where this is less prominent, while for "Cover" media is the main purpose.

@karmatosed

This comment has been minimized.

Copy link
Member Author

@karmatosed karmatosed commented Aug 31, 2019

Oh this is so good! I really like the idea of bringing color to the toolbar, so much I wonder if we could just do that full stop across all blocks?

Maybe....

colors

@bph

This comment has been minimized.

Copy link
Contributor

@bph bph commented Sep 1, 2019

Bringing the color picker to the block toolbar would be awesome!

@richtabor

This comment has been minimized.

Copy link
Contributor

@richtabor richtabor commented Sep 1, 2019

I wonder if having background and text colors in separate toolbar controls would make sense? Just thinking ahead for if blocks that support both background colors and images.

I'm not sure we'd want background image controls separate from background color (especially when overlay/background opacity/gradients land. That's why I left out intentionally left out the Text Color control from the mock.

@karmatosed

This comment has been minimized.

Copy link
Member Author

@karmatosed karmatosed commented Oct 3, 2019

The minimum for me seems to be background color/text to the toolbar. I wonder if we need a separate issue for that?

@melchoyce

This comment has been minimized.

Copy link
Contributor

@melchoyce melchoyce commented Oct 3, 2019

What if we aimed for an MVP where we just add background color to columns?

Edit: lol GitHub didn't refresh so I didn't see Tammie's comment until after posting mine

@karmatosed

This comment has been minimized.

Copy link
Member Author

@karmatosed karmatosed commented Oct 7, 2019

What if we aimed for an MVP where we just add background color to columns?

Yes please (lol) :)

@karmatosed karmatosed added this to Inbox in Tightening Up via automation Dec 11, 2019
@karmatosed karmatosed moved this from Inbox to Design feedback in Tightening Up Dec 11, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Blocks
  
To Do
Tightening Up
  
Design feedback
7 participants
You can’t perform that action at this time.