FortAwesome / wordpress-fontawesome

Font Awesome Official WordPress Plugin
Other
56 stars 19 forks source link

Feature Request: Add "Insert Icon" button to TinyMCE editor (alongside Insert Media & others) for icon picker #101

Closed KZeni closed 3 years ago

KZeni commented 3 years ago

I switched over from Better Font Awesome (https://wordpress.org/plugins/better-font-awesome/) and things are great (official, more up-to-date, more regular updates, etc.) However, I have people wanting a button added to the editor that allows for an icon picker to be used to insert an icon rather than needing to remember the shortcode, look up the specific icon name and/or prefix, etc. (which is something BFA has & I mention just as a reference.)

It seems like one could implement https://github.com/itsjavi/fontawesome-iconpicker (or equivalent) without too much trouble to make things much more usable for everyone (just want to pick & insert an icon right then & there... especially for those less savvy.) Also, it could be done in a way where it's specifically from the same library used by the plugin, and maybe even making sure the specific icons available on the site are what's offered by the picker (per it allowing the icons to be listed when initializing the picker for fontawesome-iconpicker, at least.)

For reference (and not saying it could be a direct copy of BFA), but it seems like the fontawesome-iconpicker library could be included on the site admin where TinyMCE might be present, https://github.com/MickeyKay/better-font-awesome-library/blob/master/better-font-awesome-library.php shows how the button could be added, https://github.com/MickeyKay/better-font-awesome-library/blob/master/js/admin.js shows how the button could trigger the picker & insert into the editor when chosen, and https://github.com/MickeyKay/better-font-awesome-library/blob/master/css/admin-styles.css shows how the picker may be styled to work a bit better in the admin. Again, this is just one way this feature could be implemented.

It'd be great to see this added, because sites that used to have this provided with Better Font Awesome have people asking for it back and those that never had it have people asking how they add icons within their content (or just quietly not using Font Awesome's icons [instead, using lesser graphics, not using enough visuals overall, etc.])

I'd hate to have people request that we switch to BFA just for the icon picker when everything else is effectively a downgrade from what's being provided here.

Btw, I've also posted this at https://wordpress.org/support/topic/feature-request-add-insert-icon-button-to-tinymce-editor-for-icon-picker/, but I wanted to mention it here for visibility of different audiences looking in different places that might want to discuss/support this all the same.

mlwilkerson commented 3 years ago

Thanks for the feedback, @KZeni.

Icon search, selection, and usage has admittedly been one of the key gap areas of features since we inherited the plugin that previously lived at font-awesome in the WP plugins directory. The previous plugin did have a Tiny MCE picker. But it was out of date, would have needed some significant updating, and it wasn't clear to us that this usage paradigm was really what we wanted to commit to maintaining going forward.

That's in part because Gutenberg had recently become the default editor. So re-writing and maintaining a Tiny MCE picker in the classic editor seemed like probably not the most timely move in terms where WordPress editor usage seemed to be moving.

Another concern that I have about the usage paradigm is that, while "picking a static icon from among a set" fit the paradigm in Font Awesome 4 and prior, Font Awesome 5 began adding more to the range of usage. For example, Layering, Power Transforms, and a range of styles. Now Font Awesome 6 will be adding an additional layer of the taxonomy--families of styles. (Such as the new Sharp family.)

I've been trying to imagine how we'd provide a user experience that would bring users into an updated paradigm and make more available the range of features that have come along since Font Awesome 5, and even more in Font Awesome 6, rather than implementing for an old paradigm.

I also recognize that there are times to provide a more limited experience that may work for plenty of people plenty of the time. Perhaps this is one of those cases. But that's the level where I feel like this feature needs to be decided--the user experience level, in light of what Font Awesome is today and where it's headed, and what WordPress is today and where it's headed. The implementation of a Tiny MCE picker in the classic WordPress seems simple enough if it were the right solution.

Do you have any insight you could add about how your users use the various editors in WordPress? Do they use Gutenberg or only the classic editor? Do they use other premium plugins or themes with page builders where they are trying to use icons?

KZeni commented 3 years ago

I appreciate the thorough response, @mlwilkerson!

Is Gutenberg enough of a reason to not care about the TinyMCE editor in WordPress at all?

I'm not sure Gutenberg has taken a strong enough of a foothold at this time to ignore everything else. There's definitely a ton of other editors out there (many of which are included with themes people are using [WPBakery, Elementor, SiteOrigin, Divi, and more] so they really don't have much of a choice at that point). At that point, the one unifying element between these is generally that the TinyMCE visual editor is available as a block/widget within these. So adding this button to the general TinyMCE editor is actually adding support for all of these editors at once, in a way.

There are also other areas of the site admin that may also use the TinyMCE editor instead of Gutenberg even if you have that as your main page editor (widgets, taxonomy descriptions, elements within a plugin where content is set, etc.) where this could still be useful (again, even if/when the whole website landscape switches over to using Gutenberg for its editor.)

Additionally, there are existing sites still using the Classic editor (among all of the modern editor alternatives [which many theme developers seem to still love to use for whatever reason]) where they might want this without needing to overhaul the rest of their site to use Gutenberg to get it.

I'm thinking the TinyMCE editor having an Insert Icon button included via this plugin still has its place in the future (even with Gutenberg as the main editor for more & more sites over time) and definitely with the landscape of the sites (with the assorted themes & plugins they're using) out there now.

Font Sets & Styles

Yes, Font Awesome 5 and 6 are amazing in what they offer with layering, transforms, etc. However, this doesn't negate the fact that the majority of people with websites just want to be able to insert an icon from a library of icons that looks nice & that's it (at which point, they might as well be using Font Awesome via its primary icon set & FA should support that basic, most common, usage case.) People that want more than that can still go outside of the icon picker, but the icon picker is still there for all of the people with a website that don't have the most knowledge and/or time to finesse the icon(s) being used on their site (it is nice to just say "insert icon", click the icon you want, and then you're done; regardless of the editor being used as discussed above.) I mean, is Font Awesome going to become so complex in the future that a common user won't know how to simply add an icon to their site (to the point where an icon picker is an unrealistic thing to even be reasonable)? Surely not, right?

My Experience with Icons on Sites

I have a bunch of sites with many clients. They use a range of editors (classic editor, WP Bakery, SiteOrigin, Gutenberg, Divi, etc. with some simply using the editor that the theme they have was built for) with Gutenberg actually being the minority out of the bunch.

As I mentioned, I also see the value in the Gutenberg sites having this implemented as TinyMCE exists in WordPress outside of the page editor where Gutenberg doesn't exist / make sense (widgets, content areas within plugins, taxonomy descriptions, etc.) while icons can definitely be added there & it might as well be made easy to use for people. Also, adding this to the TinyMCE editor would inherently add support for all of these other editors as they pretty much all include TinyMCE editor as a block that can be used within them (without needing to add support for them individually & therefore being the more efficient approach).

Many of the sites I work with have clients that don't have the time/knowledge to add an icon beyond clicking a button to insert one and then choosing the icon they want (having to cross-reference a site to get the icon name to then fill out a shortcode is too much for them, after all.) The icon picker found in Better Font Awesome (and in the past version of this plugin, from what I understand) seems like it's still valuable to a large number of users of this plugin (even if the users aren't the ones installing plugins on their site or even know this plugin was put on their site for them... they just want it easy to use & "just work"... an icon picker on TinyMCE addresses all of this.)

Hopefully, all of that makes sense & seems reasonable. Thanks again for your interest & response πŸ™‚

mlwilkerson commented 3 years ago

Well, this is fantastic. Thank you, @KZeni. I'm definitely warming up to this idea.

Especially compelling to me: the idea that a TinyMCE implementation may actually be useful in other contexts--beyond the classic editor--possibly even within blocks or widgets in other page builders.

I mean, is Font Awesome going to become so complex in the future that a common user won't know how to simply add an icon to their site (to the point where an icon picker is an unrealistic thing to even be reasonable)? Surely not, right?

Agreed, surely not πŸ˜„

Lots of value? Lots of options? Many ways to use? Yes, yes, yes. But we're also trying to keep it easy to use at the most basic level for the most basic uses. I think you're making a good case for how this particular TinyMCE implementation could bring those values together--better than I'd seen it before.

KZeni commented 3 years ago

Glad to hear it's coming across well.

I appreciate your time and thought put into this. I look forward to hearing more, but I understand it may need additional discussion, time to implement, and whatnot. It'd just be good to have at some point so this plugin becomes the clear choice for using Font Awesome on any WordPress site. πŸ™‚

mlwilkerson commented 3 years ago

Some progress has been made on this, @KZeni, in that, some decisions have been made, as noted over on PR #35.

KZeni commented 3 years ago

I appreciate the update & heads up on https://github.com/FortAwesome/wordpress-fontawesome/pull/35. Thanks, @mlwilkerson!

mlwilkerson commented 3 years ago

@KZeni at last, this has been released in 4.0.0 just now.

KZeni commented 3 years ago

Looks great! Nicely done! Definitely makes this the clear choice for Font Awesome on WordPress. πŸ‘