Cover: internal alignment / position

[mtias]

The Cover block is a pretty nice tool. However, its internal positioning is quite inflexible. You can align individual blocks to left / right / center, but not a group, and not vertically.

It'd be neat to explore some more cardinal positions:

Combining them in a single tool should help with clarity:

Since there is no internal width or padding (at least until the work on dimensions in "Group" is finalized), you should still be able to flush individual blocks to the left or right even with a default set:

[pablohoneyhoney]

Added a new icon-position in the icon Figma library.

[pablohoneyhoney]

Also with the small detail of highlighting the current position. It does depend on the contrast of the accent color.

Or scale slightly the dot to 4px

[mtias]

Yes, that's why in the original I was using gray for the non active ones. It's a nice detail, I think.

[pablohoneyhoney]

Here another iteration.

And wonder if that function could afford direct manipulation.

Or even fade out the styles of the cover to focus on the specific interaction.

Note that these screenshots are not 100%. Click to view.

[ItsJonQ]

👋 Haiii! I started experimenting with creating the AlignmentControl component.

I have a working prototype here:

👩‍💻 Code
https://codesandbox.io/s/align-control-u9uwe

✨ Demo
https://u9uwe.csb.app/

The Demo showcases an AlignmentControl and an InteractiveGridOverlay (an interactive counter-part to the control).

Some notable features:

• The AlignmentControl handles focus like a select or any other HTML control element would
• When focused, use up, down, left, right keyboard commands would move the alignment within the 9x9 grid
• The components have onChange callbacks to communicate
• Components can be controlled (accepting new incoming alignments)
• Alignment definitions are flexible, like CSS. Meaning, top center or center top are both acceptable

[ItsJonQ]

@pablohoneyhoney I've made adjustments to my prototype to better match your designs!
I've also created a smaller icon for Align control:

Due to the dynamic nature of the icon, from a technical perspective, I think it may be better to create it using HTML/CSS rather than SVG. But, we'll match the Icon dimension/sizes as best as possible to ensure that it looks consistent with the other icons.

[ItsJonQ]

Started coding it! Working branch:
https://github.com/WordPress/gutenberg/tree/try/cover-alignment-control

So far, I've focused exclusively on the new Control component.
Will create a PR once it gets integrated into the Cover block.

[pablohoneyhoney]

Nice! Have we considered a direct manipulation in the block canvas instead of a panel control (dropdown)? This was a premature mock up:

[ItsJonQ]

@pablohoneyhoney Yes! I've experimented with direct controls in my prototype:

https://u9uwe.csb.app/

Although, the aesthetics I have make them look like 9 cells/boxes, rather than points (like yours). But the idea is the same :).

One tricky thing re: the Direct manipulation overlay.
The "edit" mode for this needs to be enabled/disabled somehow.

For example (not saying this is how it should be):

• Click "Align" from toolbar
• Edit mode engages
• Makes changes (or not)
• Click "Cancel" to revert changes. Or. Click "Apply" to apply changes
• Edit mode disengages

Hope this makes sense 🙏
If it does, it would be cool to see some rough flows or designs for this 😍

[mtias]

I think we should get it into the toolbar first — I can see multiple issues with the in-canvas presentation based on background / image / video presence in the cover block.

We could revisit this in conjunction with #20193