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

Add an Icons block #16484

Open
mtias opened this issue Jul 9, 2019 · 16 comments

Comments

@mtias
Copy link
Contributor

commented Jul 9, 2019

A common tool that many block libraries are adding is a block to insert icons (usually svgs) with some color and sizing tools. This is appearing repeatedly in libraries to the point that it makes sense to consider a more general solution in core, which ideally handles markup and accessibility consistently. We could make this block easy to extend (register new svg libraries or remove them) and it can be the basis for other more specific / niche tools (like social logos, etc).

@mtias mtias added the New Block label Jul 9, 2019

@richtabor

This comment has been minimized.

Copy link

commented Jul 9, 2019

For reference, here's an overview of the Icon block in CoBlocks:
icon-block-coblocks

@karmatosed karmatosed added this to Backlog in Phase 2 via automation Jul 9, 2019

@karmatosed karmatosed moved this from Backlog to Tighten Up in Phase 2 Jul 9, 2019

@karmatosed karmatosed moved this from Tighten Up to UI iterations in Phase 2 Jul 9, 2019

@karmatosed karmatosed removed this from UI iterations in Phase 2 Jul 16, 2019

@karmatosed karmatosed added this to To do in Tightening Up Jul 16, 2019

@karmatosed karmatosed added this to To Do in Blocks via automation Jul 19, 2019

@karmatosed karmatosed removed this from To Do in Tightening Up Jul 19, 2019

@senadir

This comment has been minimized.

Copy link
Contributor

commented Jul 25, 2019

I'm looking at implementing this currently & have some questions of how much features for it is required to consider it ready?

I can see that resizing & Icon search are an essential start
this raises other questions like

  • what will be searched for, what Icon library are we going to use?
  • what is the limitation in regarding to customizing

I can start with a simple implementation of getting both the resizing and a simple search using dashicons

@enriquesanchez

This comment has been minimized.

Copy link

commented Aug 2, 2019

hey @senadir! 👋

I took an initial stab at exploring how the placeholder state of this block could look like:

icon-block-placeholder

A few things to note:

  • I haven't yet thought about what options would be available on this block's toolbar, this is why those are empty in the mockup.
  • I feel we should allow the user to filter by or select icons from different libraries. I'm still not sure how this could work (I assume we can start by including open source icon libraries) and if this is something we should leave for the block settings sidebar.

Before we move on, I think we should figure out what settings and customization we'll offer. Would love to hear what you think.

@mapk

This comment has been minimized.

Copy link
Contributor

commented Aug 2, 2019

Looking really good, @enriquesanchez. I like the concept of searching for an icon first before stepping into the actual block, and I think your exploration helps communicate this. I have a bit of feedback.

  1. Often times when adding an icon, it's probably going to be in context to additional text on the page. Maybe a feature content section of 3 columns, or some other area that may not provide a lot of room for a larger placeholder like this. It might be good to explore this placeholder in a more narrow setting too.

Screen Shot 2019-08-02 at 1 00 19 PM

  1. Selecting an icon seems to be a primary function of this block, so I'm hesitant to suggest just pushing it to the block settings sidebar. Maybe the list of icons after search shows them a lot smaller? This might help with space.
@enriquesanchez

This comment has been minimized.

Copy link

commented Aug 2, 2019

It might be good to explore this placeholder in a more narrow setting too.

That's a great point @mapk!

I think we can definitively go small without sacrificing functionality:

block-icon-placeholder-small

It will all depend on how many results we want to display. Depending on how many libraries we support, I assume that often times we'll have just a couple, but it doesn't hurt to plan for all scenarios.

Thoughts?

@mrwweb

This comment has been minimized.

Copy link

commented Aug 2, 2019

A few random thoughts to throw out early in the process from my experience using a lot of SVG icons in a few recent projects:

  • @mapk beat me to highlighting usage in columns (Icon Block + Heading Block + Paragraph Block). That should definitely be expected. In that pattern, I would think people would also want to link icons. That would require both a field for link URL as well as potential styles for :hover, :focus, and :active.
  • This might need to be a different icon block, but I just want to flag the likely desire for people to use icons inline and not just in block contexts.. In particular they can look good in Headings or Buttons. Sizing them as 1em by 1em can be really helpful in that context.
  • If there are going to be built-in color controls, it will be really important to define the expectations for SVG files. Does it only support expanded paths? What if I made something like the flickr logo with two circle elements? (And multicolor icons 😱?)
  • I would also be in favor or requiring icons to be on a square canvas for simplicity. Thinking about what an "icon" is, that may be a useful distinction in fact.
@onuro

This comment has been minimized.

Copy link

commented Aug 4, 2019

Right now Kioken Blocks does it like the following:

Screen Recording 2019-08-04 at 11 06 PM

Would have always preferred a simpler approach though but I used React FontIconPicker component since plugin hosts around 7500 svg icons.

I also love how CoBlocks and Ghostkit handles it. Like how Ghostkit allow you inline select an icon within a block:

Screen Shot 2019-08-04 at 23 11 14

I use toolbar component for in-context icon changing for a block:

Screen Shot 2019-08-04 at 23 15 06

@gziolo gziolo referenced this issue Aug 13, 2019
0 of 5 tasks complete
@enriquesanchez

This comment has been minimized.

Copy link

commented Aug 13, 2019

Hey @senadir! Are you still interested in working on this block?

I'm looking at implementing this currently & have some questions of how much features for it is required to consider it ready?

I think we should start with the most basic features and go from there. Based on everyone's feedback:

The block's placeholder should take up small space (because of nesting), so we should ask for the minimum:

  • a search field
  • list of results from where the user can select one

One thing we need to figure out is where to source the icons from. From the examples shared above, it looks like Ghostkit is using FontAwesome and Kioken Blocks is using React FontIconPicker. @mapk do you have any suggestions?

As for settings/features, I think we can start with:

  • Size
  • Color
  • Style (will depend on the icon library we use, but I assume this will be "outlined vs. filled". Alternatively, we can go with no background and colored background)
    Link (URL and label for a11y)
  • Replace icon

Anything else I may be missing?

@karmatosed

This comment has been minimized.

Copy link
Member

commented Aug 14, 2019

One point I wanted to raise from the editor chat would be that I am not convinced supporting yet another icon set is a good idea. My vote would be stick to what Gutenberg already has for now.

@mapk

This comment has been minimized.

Copy link
Contributor

commented Aug 14, 2019

@mapk do you have any suggestions?

Yeah, I wonder if would just be easiest to roll out with Dashicons? If we want to include an of the Material icons Gutenberg uses as well, as Tammie mentioned, that's cool too.

@enriquesanchez

This comment has been minimized.

Copy link

commented Aug 14, 2019

Thanks @karmatosed and @mapk!

@onuro

This comment has been minimized.

Copy link

commented Aug 14, 2019

@mapk do you have any suggestions?

Yeah, I wonder if would just be easiest to roll out with Dashicons? If we want to include an of the Material icons Gutenberg uses as well, as Tammie mentioned, that's cool too.

Thing is the Material Icons (as components) within GB is relative to the GB plugin version, meaning anything other than Dashicons may not be accessible fully by user based on if they use a WP core GB or the GB plugin (unless a kind of a full set is provided by GB universally just like Dashicons).

A case example is the vertical alignment Material toolbar icons. They're not accessible to WP - 5.2 GB but available with GB plugin active (as icon components).

@senadir senadir referenced this issue Aug 15, 2019
5 of 5 tasks complete
@mrwweb

This comment has been minimized.

Copy link

commented Aug 16, 2019

+1 for providing a limited set of icons so long as the block is easily extensible for other sets. Again, it will be super important that the way to register new icons AND file requirements for icon SVGs be clearly documented (and therefore defined and worked out before implementation).

One other note: I can't find a reference, but long ago I recall it being stated somewhere that Dashicons were intended explicitly for the admin and not front-end usage on websites. It seems worth confirming whether that is still the case or not.

@melchoyce

This comment has been minimized.

Copy link
Contributor

commented Aug 16, 2019

Yeah, I think something like Font Awesome might be better — open source, actively maintained, and designed for a variety of contexts.

@senadir

This comment has been minimized.

Copy link
Contributor

commented Aug 16, 2019

@mrwweb creating an extending standard will not be a priority right now as the same with all other blocks, not until the current implementation is stable enough to allow third party integration to it

@hacknug

This comment has been minimized.

Copy link

commented Aug 20, 2019

Not sure if this has been discussed elsewhere or not but imho icons could be considered design tokens. As such, theme/plugin developers should be able to add icons using equivalent APIs to the ones used for colors and font-sizes.

Another token that could be introduced is sizing. This would allow developers to define common sizes for things like icons, images…

By default core should only (at least for now) include all Dashicons like @senadir mentioned.

Also, maybe someone from @Automattic should join the convo here? design-tokens/community-group#1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
10 participants
You can’t perform that action at this time.