FortAwesome / wordpress-fontawesome

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

Icon chooser #35

Closed mlwilkerson closed 3 years ago

mlwilkerson commented 5 years ago

Originally, the work on this PR was primarily about adding some kind of icon chooser experience to Gutenberg.

There have been a number challenges, such as:

  1. This plugin empowers the WordPress site owner to configure the plugin to use either Webfont or SVG, and to do so either via traditional CDN loading or a Kit.
  2. Icons load differently via Pro SVG Kit (individual icons fetched upon actual usage) than in other modes.
  3. Ideally, the user would be able to see the icon rendered in the editor the way it would be rendered in the page (WYSIWYG).
  4. The user would be able to insert an icon into any Gutenberg block, not just a special Icon Block, and not just blocks that have been otherwise filtered or adapted to contain an icon.
  5. The Format API seems the be the only current/viable way to provide icon insertion anywhere, similar to the way it works to insert an inline image. The Format API is primarily oriented around the notion of doing something to a range of content. It's been adapted to support inline images WP Core. But even that seems like a bit of a special-case compromise in order to make inline images work. It works well enough to borrow some usage patterns from inline image insert via Format API, but it isn't a slam dunk either.

Finding a single solution that wins on every front has been difficult.

And even if we get something working that satisfies the wishlist for Gutenberg, that's only one editor context. But users may be using any number page builders in other plugins or themes instead of Gutenberg, or the Classic Editor.

More recently, there's been some new advocacy for an icon chooser feature that could work from the Classic Editor to insert a shortcode. Closes #101 .

After additional experimentation with simply inserting shortcodes into Gutenberg blocks, what now seems like the best way forward is to compromise on the WYSIWYG (What You See Is What You Get) part of the Gutenberg wishlist (at least, for now), and standardize on shortcode usage everywhere, including in Gutenberg.

There could be a single, re-usable component (presumably React) to provide the basic icon search and choosing UI. It could be snapped in to Gutenberg, or the Classic Editor, or any other editor. In any of these contexts, it would emit a shortcode that works with this plugin.

Updates

Upon completing and merging this PR into the main branch, here's where we've arrived:

  1. building upon shortcodes, as noted above
  2. NOT (yet) addressing WYSIWYG concerns in either the block or classic editors (though there seem to be ways forward for future iterations)
  3. the icon chooser has been built as a separate standalone, open-source, web component, available for a wider range of integrations: see the fa-icon-chooser GitHub repo. That web component has been integrated into this WordPress plugin and made available from both the block editor and classic editor contexts.

The underlying fa-icon-chooser web component emits an event with an abstract IconChooserResult. This plugin handles that event by transforming that result object into an [icon] shortcode and inserting it into the editor's content, but other themes or plugins could transform that result directly into HTML, SVG, some other shortcode, or whatever suits their integration purposes.