Cover: Customizing Alignment of inner content #21091
Conversation
ItsJonQ
added
[Package] Components
|
Size Change: +2.51 kB (0%) Total Size: 831 kB
ℹ️ View Unchanged
|
| @@ -0,0 +1,18 @@ | |||
| # AlignmentControl | |||
There was a problem hiding this comment.
Should we call this AlignmentMatrix to better separate from BlockAlignment, etc?
There was a problem hiding this comment.
We could! Although I think having Control in the component name would be helpful, as it has the value/onChange interface.
AlignmentMatrixControl? or AlignmentGridControl?
There was a problem hiding this comment.
Makes sense, especially if we reserve the AlignmentMatrix for the toolbar component.
|
Still very WIP! I have this so far. In doing so... I'm realizing that it's quite tricky to adjust the size of the Dropdown Menu within this context 🤔 . |
ItsJonQ
force-pushed
the
try/cover-alignment-control
branch
from
bd2bf93 to
710c33a
Compare
|
Oh boy!!
|
|
An observation! In order for non-centered alignment to look okay, I had to add extra padding around the content. That way, the text doesn't touch the edges. |
|
Fair! It’d be good to test it with an image if reduced within the cover area. |
|
@ItsJonQ some default padding makes sense, indeed, but it should be just the natural padding of the "cover" block — which as part of this work we should make configurable as well. This is looking great! |
Ah gotcha! Thanks for that feedback @mtias ! I'll make those adjustments now :) |
ItsJonQ
force-pushed
the
try/cover-alignment-control
branch
from
093de87 to
6bf9103
Compare
|
Working on a11y support. After that, will add RTL support! |
ItsJonQ
added
the
[Focus] Accessibility (a11y)
a11y + RTL updates
The GIF above showcases Mac OS voiceover describing the alignment in when changes are made (keyboard navigation). The control is also rendering in The goal for this control is to be able to successfully navigate the 9x9 grid with keyboard (as well as clicks). I gave it my best shot, although admittedly, I'm lacking some experience when it comes to a11y support for custom controls such as this one. (cc'ing @diegohaz) I would love some insight and expertise here! I made an attempt at @gziolo Also pointed out the Composite component from Reakit to me. If possible, it would be great to leverage it here 😍 Thank you all so much! |
|
Great job! It's working really well with keyboard. It can be improved for screen readers though.
It's definitely a grid. Listbox is unidirectional. Even though sighted users would see that it's a grid and they could guess they could use arrow up and down to navigate vertically, there's no hint for screen reader users, unless you use I couldn't reproduce what you show on the GIF using VoiceOver + Chrome and Safari. I can only navigate between the grid items using VO (option+ctrl) + directional keys. And it only navigates horizontally. Using up and down arrow keys (without VO key) only moves to the previous and next elements of the type I selected in the VoiceOver Rotor (by pressing up and right keys fast). For example, if it's set to navigate between links, pressing arrow down would put me in the next link. Maybe it's the MacOS version (10.15.3) or some configuration on VoiceOver? If that's a
That's still experimental, but you can see many implementation examples here, including grid: https://codesandbox.io/s/composite-gcqs2 |
|
@diegohaz Wonderful 😍 ! Thank you so much for your feedback! This is tremendously helpful! |
ItsJonQ
force-pushed
the
try/cover-alignment-control
branch
from
4708549 to
98692da
Compare
|
@diegohaz Haii! I started looking into using The only thing I'm unsure of is if I'm able to tap into an const composite = useCompositeState({
...
onChange: handleOnChange
});Is it possible to do something like this? If not, is there a preferred way of handling this? Thank you! <3 |
|
@ItsJonQ Depending on what you want to do, you can simply attach an <Composite>
...
<CompositeItem onFocus={select} onClick={select} />
...
</Composite>If it's not enough, you can track the // sets initial currentId
const composite = useCompositeState({ currentId: "unique-id-center-center" });
// selects the currentId whenever it changes
React.useEffect(() => {
select(composite.currentId);
}, [composite.currentId]);
<Composite>
...
<CompositeItem id="unique-id-center-center" />
...
</Composite> |
|
@diegohaz Ooo! Gotcha. Thank you! I'll give that a shot! |
|
Update! I attempted to implement I've created a separate branch + Draft PR here: |
mtias
force-pushed
the
try/cover-alignment-control
branch
from
98692da to
b51794c
Compare
|
Just merged in the a11y work to integrate Reakit Composite to take care of the interactions and (Massive props to @diegohaz !) With that, I think this PR is ready for review |
ItsJonQ
force-pushed
the
try/cover-alignment-control
branch
from
fd051c4 to
96674de
Compare
|
@mtias Thank you for reviewing! I've rebased with latest |
Due to lack of polyfill support (at the moment).
|
Yay! Merging! 😊 |
|
Nice work, really like this one :) |
|
Hey I added a background image. A title and a button below it. But I am having a hard time aligning the title and the button to the middle of the Cover Block. Title and button have no alignment selected.
Aligning the title and the button to center looks like this:
I am guessing a new issue is needed to address the centering of the Button. |
|
Found a little bug when opening the control, focus is triggered (and so is onChange) - the fix is here #27945 |
Description
This update brings the ability to adjust the vertical and horizontal alignment of content with the Cover block. The control is provided by a new (experimental)
AlignmentMatrixControlcomponent from the@wordpress/componentspackage.Attempts to resolve: #20836
Control
The new
AlignmentMatrixControlprovides a "9 point" alignment interface. This UI can be controlled by clicking on any of the points. Alternatively, pressingUP,DOWN,LEFT, orRIGHTon the keyboard would change the alignment values.Icon
In addition to the control, the
AlignmentMatrixControlprovides a companionicon, which can be loaded into UI like the Toolbar. It accepts analignmentprop, which updates the UI to visually reflect the alignment.The icon implementation is designed to work like an icon from
@wordpress/iconsExample
Checklist: