Block Styles: Show style preview when hovered or focused #34522
Conversation
|
Size Change: +600 B (0%) Total Size: 1.09 MB
ℹ️ View Unchanged
|
|
I think we should skip showing the preview on mobile for a first pass. We can think further about how best to represent it there in a follow up. |
mtias
added
the
[Feature] Style Variations
|
This is what I see
Which surfaces a few questions and notes:
Also default styles dropdown is a legacy flow we should likely update to an ellipsis, as @mtias noted here. Connected to #34574 |
|
Thanks for testing, folks!
The animation is baked into the PopOver component. You're right, it's not ideal. I wasn't sure about it either, but I used it for the first pass. I suppose we could extend PopOver to make the animation optional, or we could try adding a dedicated slot fill in the layout for sidebar previews and other flyouts. I did notice that there were similar jumpy effects in the block inserter at times, but not at all so dramatic. I'll keep playing.
Great! Thanks for the confirmation. |
We need to redo the animations there in general as part of the adoption of framer motion. It's fine to leave that separately. |
ramonjd
force-pushed
the
update/block-styles-preview-panel
branch
from
33503ea
to
43897bd
Compare
|
I'll need to spend some time investigating positioning too :)
Great to know, thank you. There's also the experimental Flyover component. It's experimental however. To compare performance, I might play around with adding a custom slot for these previews in the layout. |
|
I think we could probably just ditch the animation in this first pass. I'll see if I can workup a prototype to get a feel for how we could (or should?) use animation for this preview. Its worth noting that the design I worked up (https://shaunandrews.com/2021/08/thinking-through-switching-block-styles/) is largely based on the existing previews of blocks when hovered from the inserter sidebar; There's no animation there, and I appreciate the simplicity and speed.
I think the buttons should be taller. In my designs I made them 42px tall. I think the hover state for unselected styles should use a 1px, blue border with blue text. For the current style (which should be indicated with a 2px, black border) shouldn't change when hovered. I expect that the buttons would use the standard "blue ring" when keyboard-focused — right now there doesn't seem to be any keyboard focus. Similarly, I expect the preview to appear when the button is focused. Its not clear to me when testing the PR, but I think its important that the preview is in a fixed position regardless of which style is currently being hovered or focused. Otherwise, I feel like its too much eye movement to try and "find" the preview when it appears. We should replace the "Default Style" label and dropdown with a simple button-link at the top of the section.
This "Make Default" would only appear if you change the style to something other than the current default. There's likely some more nuance and detail I'm missing here, so I might workup a more comprehensive Figma prototype if there's confusion. For the Block dropdown, I think we'll need to make sure the buttons align with the rest of the menu. I'd also be interested in moving the styles to the top of the menu.
|
|
Do you think in the dropdown they might make sense as regular menu item? It might be better for keyboard nav as well. |
|
Maybe something like this for the dropdown menu?
|
|
Yep, that's what I had in mind, I think it works better, though maybe with the ticks on the right like in other places?
|
|
Thanks for the feedback again everyone! I had some time to play around with this today. @shaunandrews What do you think about the following (yes it's rough), but my goal was to communicate:
For some reason the Button isn't aligning the icon to the right, not that it matters much for the demo 😄 Or perhaps, less offensively
Just to note that we're okay with overriding the default select dropdown for the I'll carry on with the transform drop down suggestions too. 🍺 |
👍 This is what I have got so far:
|
ramonjd
force-pushed
the
update/block-styles-preview-panel
branch
from
43897bd
to
976257f
Compare
packages/block-editor/src/components/default-style-picker/index.js
Outdated
Show resolved
Hide resolved
|
I definitely tried with the check on the right, but thought it felt unbalanced; It breaks up the alignment of the text labels from the block list above it.
That said, I don't have a strong opinion; Its probably better to keep with the consistency of having the check on the right, like in other menus. -- I'm not sure we really need an icon to indicate the default style. I did explore some ideas, but it never really went anywhere:
Instead, I think it might make sense to always show the default style first. Then, if you change the default the button would move to the top of the list:
-- I have a slight preference for having the "Make default" button at the top of the section, as it avoids changing the height of the accordion. If that's difficult (or impossible) than I could see it living at the bottom, under the list of styles:
--
I'm not sure, but I'd expect the dropdown to be deprecated in favor of the new button outlined above. |
|
Thanks again for the feedback and the thought you put into the icons, even if we're not showing any.
Well, it is easier to show it at the bottom, only because the Panel component's title element is there, and we might have the float it. :)
You got it! Here's what we have in the latest commit 8429cdd
Working on the previews next... more to come. |
ramonjd
requested review from
ajitbohra,
chrisvanpatten and
ellatrix
as code owners
|
We should place the "make default" inside the ellipsis menu (which replace the collapse arrow) and include a reset within. |
Right, I think the second version is alright. We have some older mockups that had the entire styles panel in a flyout menu, which would reduce any visual conflicts with the transforms area. We could follow up with that. |
|
Hi There! I was working on some unrelated site editor refactoring and noticed this new Slot used to show block style previews. So I was wondering why it was needed in the first place, my guess is that it's needed because we want to position the previous at the top left of the sidebar, am I right? I was wondering if a treatment like we do for color popovers would work better and make the code simpler. This is to show the preview as a popover on the left of the "Styles" component. This would avoid the need for a new Slot which creates more boilerplate for block editors. |
|
Thanks for swinging back to this one.
I have deleted the memory of this PR from my brain 😄 but that sounds about right. Something I do remember before resorting to slots was adding the component next to Slots were the most convenient and UX-friendly goto at the time.
I think the new color popover came a bit after this PR (?), but if you think there's an improvement to be made by removing |
Yeah, I do think there's something we can do here but only if we're ok with the popover showing up at the left of the "styles" component but not at the top left, it would be aligned with the "styles" component. |
I'd say if it works similar to the color popover then it would be totally acceptable. You can quote me. 😄 Thank you!! |
|
@youknowriad I'd be fine with aligning by the style component if it simplifies the code. |
Resolves #33933
Description
Hark! This PR attempts the following based on the explorations in #33933:
Testing
Before switching to this branch, head to the Block Editor and insert a block that has block style variations. The Image Block under the TT1 theme is a satisfactory choice.
But, if you get time, also check other blocks, e.g., Image, Buttons, Social Links, Table and Quote blocks, in several base themes too. Thank you!
Select anything other than "Default" as the default style in the dropdown. For example, select "Rounded".
Save the post and checkout this branch.
Refresh the post page and select the Image Block you have just inserted.
In the Styles Panel in the block inspector, the block previews should appear when you hover or focus over the block style variation buttons in the inspector.
Nov-05-2021.09-50-44.mp4
The preview should hide itself when the mouse (or focus) leaves the corresponding button. It should be positioned in the top right corner. Try with a mouse and tabbing keys for extra points! 💯
Clicking or hitting
SPACEorENTERkeys should activate the style for the selected block, and make the preview... disappear! 🪄Ensure that the previews do not show in narrow viewports.
Switch styles using the "Change block type or style" menu in the block toolbar.
The styles should change as you'd expect. The selected style should be marked with a check icon.
Inserting subsequent Image Blocks should display your chosen default style.
Using the default style picker dropdown, selecting either the "Default" or "Not set" values should set the default style and cause the dropdown picker to hide itself.
Now when Inserting subsequent Image Blocks, you won't see the default style picker.
Using your console skillz add some extra text to one of the style buttons. If the text overflows, you should see an ellipsis:
Be sure to check in a right-to-left language, such as Arabic:
Run the unit tests and wait for 🟢
npm run test-unit packages/block-editor/src/components/block-styles/test/utils.jsTypes of changes
UI and UX changes to the style switcher in both the block inspector and toolbar.
Checklist:
*.native.jsfiles for terms that need renaming or removal).