Social Links: Add ability to change social icon sizes #25921
Conversation
mkaz
added
the
[Block] Social
mkaz
requested review from
nicolad and
jasmussen
and removed request for
nicolad
|
Size Change: +206 B (0%) Total Size: 1.21 MB
ℹ️ View Unchanged
|
mkaz
force-pushed
the
add/17276-social-sizing
branch
from
e22d128 to
94043af
Compare
|
This is what I see:
Nice work! This will be a nice feature. As you can see from my inspecting, it needs a little visual love that I can help with — more adaptive centering, to be specific, so as to work with arbitrary sizes. One larger question, though, and I'll defer to folks like @nosolosw @kjellr @iamtakashi @alaczek and others: should this be a global CSS variable for all social links icons? Or should it be a per-block size setting? I've no real strong opinion but would love insights. |
|
👋 Took a quick look at this and it seems that you may be able to go with preset sizes (like small/medium/large) for the icons at the moment, is that correct? If so, I'd suggest making this work with classes instead, as the font size control does for presets. If you also wanted custom values provided by the user, that's a bit more entangled and there's no clear solution yet for this kind of setup (where we want to set a property with a custom value in the container that affects all children). The issue is kind of similar to this other PR #25372 The closest we've gone to address that use case is with the link control. The way it works there is by adding to the container a CSS variable with the custom value as an inline style. However, this approach is problematic with |
I think a global size for all social links icons is adequate. As @nosolosw mentioned, I think a small/medium/large dropdown sort of setup (along with perhaps a custom value field) would be great. |
|
A set of presets is a good idea as it allows us to pick presets that render the SVG icons well. Here are some thoughts: Huge (48px/2x):
Probably too huge, probably won't be used that often. But doesn't hurt to have it. Maybe you want to make a statement. Large (36px/1.5x):
Big (32px/1.33_x) — best if we can do without this one as it's not a good scaling integer:
Default (24px/1x):
Small (18px/.75x):
Tiny (12px/.5x):
Perhaps too small, but it's a decent scaling integer What do you think? |
|
Those sizes look good! I agree we can probably lose the "Big" one. The "Tiny" one is likely too small to recommend to users, so I think it's fine to remove it from the presets. |
mkaz
force-pushed
the
add/17276-social-sizing
branch
from
94043af to
bc4fec6
Compare
|
@kjellr @jasmussen take a look, I implemented the drop down and sizes for Small, Normal, Large, and Huge. Personally I think we could make everything a bit bigger, though it depends on if you are using filled or logo-only, play around with them and please feel free to adjust and edit the sizes if you want. We can also leave as is, they are implemented using CSS variables, so a theme could also overwrite them easily enough. I need some help, the filled logos do not look proper in the editor, but do look fine when published.
|
mkaz
force-pushed
the
add/17276-social-sizing
branch
from
bc4fec6 to
f046167
Compare
|
This looks good! I think the sizes feel comfortable.
I pushed a small change to fix that. In the editor, the button should be modified to fit the size of the icon. Before:
After:
|
mkaz
changed the title
|
This is what I see:
Nice work, this will make a bunch of people happy. However a couple of things — this control doesn't really fit in the sidebar, in part because it's a primary action for the block. It should just be a popover that opens from the block toolbar, it can just be a text button like this:
And the font size indication isn't really helping here, it seems fine to just do a menu like this:
|
|
Thanks so much for this PR, I know my feedback means a little extra work. But I think it will be worth it, and that doing it the right way will leave it without additional work necessary. |
|
I've moved the controls to the toolbar, test it out and let me know what you think. 👍 |
|
Thank you, this is what I see:
This is definitely the right interaction, but the button doesn't look quite as fitting as I had hoped. I think we should still try it for now, but I may go back and change it to an icon separately, if I can find a good size icon. There needs to be a checkmark on the right side of the selected size (normal being selected by default). There should be code for that in the more options dropdown:
Also, because the popover menu extends from the toolbar, it needs to be of the dark toolbar material (black border, no shadow). I think there is an
|
|
This is unlikely to make it to 5.6, correct? Asking because looking at the code, I'd like to refactor it a bit, both to address Andrés feedback about not using CSS variables, but also to make the padding scale more naturally to the size. Ideally there's only one uniform padding that automatically pads more for larger icon sizes and less for smaller ones (like a percentage or something that scales with a value). But in order for that to work smoothly with both circles and pill shapes, I'll need to be able to focus on it for a bit, and I won't have time to do that until Monday. |
mkaz
force-pushed
the
add/17276-social-sizing
branch
from
7833e2f to
6ba420e
Compare
|
@jasmussen I updated with the check icon and setting the I also rebased against the placeholder social links, but in the rebase I broke things and now have chubby icons. I figured you wanted to rework some of the CSS, and you'll end up doing it much better than me, I'll let you work your magic to get them right. Needed for both in editor and published view. Thanks!
|
|
My test shows this:
Btw |
|
I'm going to take a stab at bringing this home today! Thanks for taking a look, Paal.
I'd suggest no: redundancy is okay in places, but it's hard to get right. It always begs the question: if there are two ways to accomplish the same, which one is the right way? And in absence of the redundancy, the principle to evaluate against is whether the action is primary (should be in toolbar) or secondary (should be in sidebar), and I'd suggest this is definitely primary. |
jasmussen
force-pushed
the
add/17276-social-sizing
branch
from
779cd75 to
159d3c9
Compare
|
As I worked on this, and looking for a clear and scalable (for themes also) heuristic for what the padding is, I ended up with a basic system. 6x6 units. An icon is 4x4 units with 1unit of padding all around. So if an icon is 24px, then it has a 6px padding (24/6). That works nicely with ems — 18/4 = 4.5. And half-pixels don't render well, which means if we went with 18px for the "small" icon size, icons wouldn't be centered. They'd have 5px top and left padding, and 4px bottom and right padding. So I changed the small size from 18 to 16. It looks alright:
|
|
@mkaz we need for the checkmark to be present on the "normal" size, even if you haven't explicitly set the property. I.e. insert a social links block, do nothing, check the size, and you see this:
That is — if you have no property explicitly set, the checkmark should also show on "normal". |
This adds CSS custom properties to alter the circle/logo sizes. I'm not quite sure how to integrate this in to make it adjustable, maybe as a theme.json optoin? First, we may want to create as fixed sizes (sm, med, large) to make sure things look right. There are two values to adjust, the outer circle and the inner logo. So it is possible to make the icons all out of sorts if the sizes don't match properly.
Uses small, normal, large, and huge sizes matching the same presets as the font sizes. Uses the CustomSelectControl to pick which size Introduces class names `has-SIZE-icon-size` that applies to social link
The default size is normal, even if the iconsize is not set, so this sets the checkmark in the dropdown to reflect.
A test to see what we think of modifying the DropdownMenu/Button to accept a text property which when specified and icon=null than it will show instead of the icon.
Switches the button to display the name as the label for example "Large"
instead of just showing "Size"
Fix issue with { onClose } not being destructured
Pass toggleProps forward.
mkaz
force-pushed
the
add/17276-social-sizing
branch
from
289d339 to
c550580
Compare
There was a problem hiding this comment.
One issue remains. Transforms are on two rows in this PR:
However a rebase fixes that, and the issue is not present in the master branch:
I suspect that an issue was created and fixed in the master branch, while this branch was ongoing.
But since rebasing will likely cause those beautiful green checks to fail a random amount of times, I'd say it's okay to merge this one if you first test whether you see the same issue as me, and that a rebase (even if not pushed) fixes it.
Description
This adds a size button control to the block toolbar, that lets you pick between 4 different sizes of icons (Small, Normal, Large, Huge). Those sizes affect the default style, the pill shape style, the logos only style, and even those variations of the new setup state as well.
Fixes #17276
How has this been tested?
Screenshots
Types of changes