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 Editor for Cover block #20193

Open
Tracked by #33447 ...
mtias opened this issue Feb 12, 2020 · 8 comments
Open
Tracked by #33447 ...

Background Editor for Cover block #20193

mtias opened this issue Feb 12, 2020 · 8 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 [Type] Enhancement A suggestion for improvement.

Comments

@mtias
Copy link
Member

mtias commented Feb 12, 2020

This is a proposal to expand the capabilities of the Cover block (and other blocks using background images) to empower users to achieve more varied visual effects easily.

Right now it's difficult to achieve effects such as text overflowing images. A user could do it by composing an image beforehand using an image editing tool and upload it as a full background, but that is a very poor experience for both the creator and the viewer.

One way in which we can allow this to be done with ease is by having background editing options directly in the Cover block itself. Imagine an "Edit Background" tool that would focus just on the background of the block (fading all the layered blocks and their controls away) letting users reposition and resize the background image at will and include setting a color.

That would allow going from the regular effect:

image

To a composition like this:

image

The flow could be engaged using a toolbar button which folds the Cover block toolbar into background editing mode, including color selection:

image

@mtias mtias added [Type] Enhancement A suggestion for improvement. [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Feb 12, 2020
@karmatosed
Copy link
Member

I really like that this removes the need to have media + text or a group, alternatively some other complicated confusion of blocks - to get this result.

@johnstonphilip
Copy link
Contributor

Very cool! Just a note on this regarding the concept of responsivity, I have a page building plugin that does something similar and I have had quite a few users complain about background image placement, specifically on mobile.

White-text over a dark-part of an image is readable, but on mobile, everything can be different, and often white text ends up over a white-area of the image. I think this type of thing also requires responsive controls, similar to what is proposed here:
#20244

@mtias mtias added the [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi label Mar 7, 2020
@mtias mtias mentioned this issue Mar 9, 2020
82 tasks
@enriquesanchez
Copy link
Contributor

We could even add support for multiple background images to allow for stacked layouts.

@mapk
Copy link
Contributor

mapk commented May 15, 2020

Allowing the background to be resized by dragging is great! I'd also like to see this eventually integrate with any of the grids we've been exploring – dragging and snapping to a grid.

In a comment from @paaljoachim #14483 (comment) he mentions...

I do believe we need to think of a new way to in general create a new resize component. Which can be used in multiple Blocks where resizing would help the layout of multiple elements.
We might even need to look into creating a new resize component issue to be used for multiple blocks. I believe this is a discussion we should have in design.

I think that's a good idea!

@critterverse
Copy link
Contributor

Hi all, I’m sharing a design proposal by @javierarce and myself that would enable background editing functionality for the Cover block. This would add image editing functionalities to the Cover block so that users don’t need to resort to outside tools, and improve the editing tools available for the Image block. This concept was originally shared on the Make Wordpress blog, where you can read the proposal in more detail (including the issues that we identified with current image management tools).

Overview

We’ve broken down this proposal into three walkthroughs that help explain our proposal. These prototypes are self-guided, just open each of them and advance to the next slide clicking each screen. A series of notes will explain each concept.

One idea that spans across this proposal is the introduction of a secondary toolbar that looks distinctively different from the default toolbar in order to make it clear when the user has entered and exited the editing state. These new toolbars would present a title indicating that the user is now inside a different mode, the set of options for the functionality, and links to apply and discard the changes.

secondary-toolbar


Editing/cropping tools for the Cover block

The introduction of a secondary toolbar could be a clean way of introducing inline editing tools to the Cover block.
With this proposal, we tried to reimagine how resize handles and inline editing tools could work together to create the background editing functionality we'd like to achieve.

View walkthrough


Fill modes

The ability to switch between different display modes such as Fill, Fit, Tiled, or Crop would be a great addition to the Cover block secondary toolbar.

View walkthrough


Editing/cropping tools for the Image block

Here’s a walkthough of how these same changes could be applied to the Image block's existing editing context.

View walkthrough

@pablohoneyhoney
Copy link

pablohoneyhoney commented Dec 2, 2021

Nice! It's inspiring we are considering better focus and awareness signals of where you are and what you are doing.
There's however a bit of an unbalance in this approach where fill modes seem squeezed, and the focus is on the location sign, not on the actions?

Screen Shot 2021-12-02 at 11 38 01 AM

Also consider that the snackbars used in the prototype can clash with the inspector, or even with the current notification snackbar.

@critterverse
Copy link
Contributor

Thanks @pablohoneyhoney!

There's however a bit of an unbalance in this approach where fill modes seem squeezed, and the focus is on the location sign, not on the actions?

Another possibility we explored is the idea of splitting the toolbar into two different sections. This could be a clear way to differieniate the editing context without adding visual weight with the dark color. We did have some questions about feasibility so decided that color was probably a more simple differentiator. Does this split approach seem worth looking into further?

toolbar

Also consider that the snackbars used in the prototype can clash with the inspector, or even with the current notification snackbar.

I should have clarified that we just added these snackbar notes to help guide people through the prototype but those wouldn't actually be visible in the editor :)

@strarsis
Copy link
Contributor

+1! A general, stackable, layered block would be great! One can add layers as child blocks and any block to it. Easy reordering, etc.
E.g. I want to put some text over a gallery block. Currently I need to use a tailored cover block that contains a paragraph for the text and the gallery block, absolutely positioned by a block style.

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 [Type] Enhancement A suggestion for improvement.
Projects
Status: Not Started
Development

No branches or pull requests

8 participants