Add [bw_x] shortcode with X logo to replace [bw_twitter]. Also support X in [bw_follow_me]

[bobbingwide]

Twitter was renamed to X a while ago. The Twitter logo - a tweeting bird - has been replaced by an X

See https://about.x.com/en/who-we-are/brand-toolkit

Requirement

• Support display of the X-logo instead of the Twitter logo
• Support changes to links as required. eg
• https://twitter.com/herb_miller can be changed to https://x.com/herb_miller

Notes

The x-logo.zip file from the brand toolkit link contains 3 files

• logo-black.png
• logo-white.png
• logo.svg

Imaginatively named! I'll try to use the SVG version.

[bobbingwide]

I'll try to use the SVG version.

I copied the SVG I'm going to use from the Gutenberg plugin. It's the x-link icon in libs\oik-dash-svg-list.php. The source file is social-link\icons\x.js. This is much smaller than the logo in logo.svg

[bobbingwide]

Q. How to support users that still want to use...

• the Twitter shortcode [bw_twitter]?
• the twitter network in [bw_follow_me]?

A.

• Add a [bw_x] shortcode that's very similar to [bw_twitter]
• It will use a different option to that for Twitter
• And show [bw_x] as a shortcode in the oik admin

By default [bw_follow_me] will display follow me links for both Twitter and X, Twitter first. To just get the X icon blank out the Twitter value.

For theme=dashicons and theme=genericons, since these fonts don't contain the X icon the Twitter icon will be used. It's recommended to use theme=svg or theme=none.

[bobbingwide]

There was a problem that the genericons CSS wasn't being loaded in the block and site editor. The icons were not visible. This can be fixed by changing the editorStyle attribute in block.json to

 "editorStyle": ["file:../../build/follow-me.css","genericons"],

See https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#wpdefinedasset

We also need to ensure that the genericons script is registered in response to enqueue_block_assets and enqueue_block_editor_assets.