Wp-calypso: Gutenberg: Publicize connections lack social icons in Calypso

[tyxla]

Currently, when running the Publicize extension in Calypso, any connections lack the social icons, compared to when running in wp-admin:

wp-admin:

Calypso

[ockham]

Noting here that the reason is that we enqueue those icons as assets in Jetpack on the server side, so there's no way they make it to Calypso.

Previous attempt to solve, with valuable discussion: #28112. IMO that's the right way to go, we just need to make sure we're not adding >100K to our bundle.

[simison]

A temporary solution could be to import embed icons from Gutenberg:

https://github.com/WordPress/gutenberg/blob/5d3c7a139381e3a34469c88cf0aa0d66dd708fef/packages/block-library/src/embed/icons.js

...tho they probably don't include all the icons for networks like Google+ (as it's going to shutdown in 2019).

[simison]

Just showing text label could be a very valid design choice, too:

Twitter: Lorem ipsum

or

Twitter
Lorem ipsum

[tyxla]

Good call @simison, thanks!

I've suggested a temporary solution here: #29176 - it will make it less broken for the time being.

Anyway, let's keep this issue open even after merging the above solution, as it can be resolved when the icons are there for Calypso too.

[alisterscott]

I found this issue today.

Perhaps if we aren't going to do icons we could use text groupings like the classic Calypso editor:

[tyxla]

This is an interesting suggestion.

@mapk @MichaelArestad what do you think? Not having to figure different ways to solve problems with icon dependencies would make it a lot easier for the Publicize extension to be supported cross-platform.

My $0.02 are that ideally, we should be able to support the icons everywhere - basically, what Bernie said above - https://github.com/Automattic/wp-calypso/issues/28953#issuecomment-444013550. But I'm happy to reconsider if design folks have a different opinion.

[simison]

Text labels would be a great temporary solution that would already make it feel not-broken in Calypso. :thumbsup:

Does Calypso also group multiple connections under one label? I.e.:

Twitter
MyTweetAccountOne
MyTweetAccountTwo

[ockham]

TIL that (most of) these icons are available in Gutenberg https://github.com/Automattic/wp-calypso/issues/28953#issuecomment-444019714

That would sound like an easy enough option that would work across the board (tho it's indeed a shame that there's no Google+ icon there -- I'd suggest just filing a PR agains Gutenberg to add one, but now that WP 5.0 has been shipped, we'd need to add a version check :slightly_frowning_face: )

[tyxla]

Does Calypso also group multiple connections under one label? I.e.:

Yes, it does. I think consistency is good reason to change to having groups instead of icons everywhere.

[MichaelArestad]

@tyxla could we have both? Could we have the Gberg Twitter icon next to the Twitter heading and the FB icon next to the FB heading, etc?

[tyxla]

@MichaelArestad yes we can, but the reason we don't have them right now is because our social icons repo that we use for wp-admin can't be embedded in Calypso, unless we add 100K to our bundles, which we don't want. A way around this is to update the social icons to be separately importable, but this would require some (likely non-trivial) changes to the social icons library and any code that uses it. That's why we prefer an icon-less approach, and if in Calypso we're currently grouping by a text-only name of the service, I'd prefer staying consistent and going without icons anywhere. What do you think?

[ockham]

I'll just point out that in the case of only one connection per social network (e.g. one Facebook, one Twitter) -- which to me seems like it would more widespread than multiple ones (te.g. wo Facebook, three Twitter), grouping connections under headings seems less intuitive than a social logo next to each connection.
In the latter case, IMO we would still need to group them (so all connections to one social medium are next to each other), but not necessarily with headings in between.

[MichaelArestad]

@MichaelArestad yes we can, but the reason we don't have them right now is because our social icons repo that we use for wp-admin can't be embedded in Calypso, unless we add 100K to our bundles, which we don't want. A way around this is to update the social icons to be separately importable, but this would require some (likely non-trivial) changes to the social icons library and any code that uses it. That's why we prefer an icon-less approach, and if in Calypso we're currently grouping by a text-only name of the service, I'd prefer staying consistent and going without icons anywhere. What do you think?

What about using the ones included in Gutenberg and manually adding the G+ one for now?

[MichaelArestad]

I'll just point out that in the case of only one connection per social network (e.g. one Facebook, one Twitter) -- which to me seems like it would more widespread than multiple ones (te.g. wo Facebook, three Twitter), grouping connections under headings seems less intuitive than a social logo next to each connection.

@ockham That's an excellent point. Perhaps we we should create a separate issue and design primarily for single accounts with a design enhancement for grouped accounts when used.

[simison]

What about using the ones included in Gutenberg and manually adding the G+ one for now?

Even just adding _all_ those social SVGs directly in the block might not be that bad for now, just to get this look functional. 🙃

[tyxla]

Here's a PR that adds those icons directly - https://github.com/Automattic/wp-calypso/pull/29317

Thanks for the suggestion!