Update the dashicons list to include new icons and remove deleted ones

[bobbingwide]

While investigating #68 I noticed there were some icons that are no longer being exported by @wordpress/icons.
I also know that I need to add the SVG icon for X.
It's time to reconcile the icon list in the shared library file oik-dash-svg-list.php
and do whatever's necessary to make it work in the block/site editor.

See #46, which isn't yet closed but probably shoud have been.
The first thing to do seems to be run svg2php.php against updated versions of the source repositories

[bobbingwide]

In the block editor the SVG for X is

<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" aria-hidden="true" focusable="false"><path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z"></path></svg>

why didn't svg2php.php find it?

[bobbingwide]

why didn't svg2php.php find it?

That's easily explained. I hadn't pulled the latest version of Gutenberg source from GitHub.

It's now the $icons['x-link'] entry in libs/oik-dash-svg-list.php

[bobbingwide]

While the shared library was updated automatically the dashiconlist.js needs to be updated from the output echoed from svg2php.php.
Then several of them either have to be commented out OR some other mechanism found to indicate
that some icons are no longer available.
See also https://www.oik-plugins.com/oik_shortcodes/bw_dash/ which lists the different available icons.

[bobbingwide]

and do whatever's necessary to make it work in the block/site editor.

This involved

• updating wp-scripts to v30.1.0
• adding a dependency on clsx
• and changing classname to clsx in the src

[bobbingwide]

the dashiconlist.js needs to be updated from the output echoed from svg2php.php.

The build produces Warnings since the social links icons are not exported from @wordpress/icons.
In Nick Diego's icon-block plugin I see that all of the social icons appear to be direct copies of the icons in the Gutenberg source.
It seems I'll

• either have to implement a similar solution
• or can I just refer to the social-link variation for all these icons?

Implement a similar solution

1. xcopy all the social-links icons from GB to oik-bob-bing-wide
2. Change the dashiconlist.js

[bobbingwide]

There were some problems with the dashicons examples in a number of posts in s.b/oikcom.

In https://s.b/oikcom/shortcode_example/bw_dash-converts-to-dashicon-block/ the dashicon appears
as both the dashicon and the SVG, but the dashicon character is not displayed as the correct character either in the editor or on. the front end.

The block's code is:

<!-- wp:oik-bbw/dashicon {"className":"dashicon dashicons-heart wp-block-oik-bbw-dashicon","size":28} /-->

inserting the default dashicon ( which is a heart ) the block is

<!-- wp:oik-bbw/dashicon /-->

It can also be manually edited to

<!-- wp:oik-bbw/dashicon {"dashicon":"heart","size":28} /-->

In this example I also increased the default size.

As you can see, it's the className attribute that's causing the problem.

In an earlier version of the post the block was displayed in the Visual editor as "This block contains unexpected or invalid content". In the code editor it appeared as

<!-- wp:oik-bbw/dashicon -->
<p>&nbsp;</p>
<!-- /wp:oik-bbw/dashicon -->

with an unexpected empty paragraph inside it.

Using Attempt block recovery I ended up with

<!-- wp:oik-bbw/dashicon --> 
<svg aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" class="dashicon dashicons-heart wp-block-oik-bbw-dashicon"><path d="M10 17.12c3.33-1.4 5.74-3.79 7.04-6.21 1.28-2.41 1.46-4.81.32-6.25-1.03-1.29-2.37-1.78-3.73-1.74s-2.68.63-3.63 1.46c-.95-.83-2.27-1.42-3.63-1.46s-2.7.45-3.73 1.74c-1.14 1.44-.96 3.84.34 6.25 1.28 2.42 3.69 4.81 7.02 6.21z"></path></svg>
<!-- /wp:oik-bbw/dashicon -->

but the second time, having reverted to an earlier revision the block recovery worked.
Weird.

[bobbingwide]

There were some problems with the dashicons examples in a number of posts in s.b/oikcom.

In https://s.b/oikcom/oik_shortcodes/bw_dash/ we show all the possible dashicons that can be produced by the [bw_dash] shortcode. For some of the SVG icons there is no icon visible next to the label.

• amazon
• car
• google
• pdf
• twitch

eg. for amazon

For each of these icons the HTML has been messed up!

<div class="inline"><svg class="svg_amazon svg " width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"></rect><g></g></svg><p></p>
<style>.st0{fill-rule:evenodd;clip-rule:evenodd;}</style>
<path d="M16.2 14.9c-1.9.8-4 1.2-6.1 1.2-2.8 0-5.5-.7-7.9-2.1-.2-.1-.3.1-.2.2 2.2 2 5 3 7.9 3 2.3 0 4.6-.7 6.5-2 .4-.1.1-.5-.2-.3zm1.8-1c-.9-.4-2-.3-2.8.3-.2.1-.1.3 0 .2.6-.1 1.8-.2 2 .1.2.3-.2 1.5-.5 2-.1.2.1.2.2.1.8-.7 1.2-1.7 1.1-2.7zm-9-1.3c1.1.1 2.2-.4 2.9-1.3.3.4.6.8 1 1.2.1.1.3.1.4 0 .3-.3 1-.9 1.3-1.2.1-.1.1-.3 0-.5-.4-.4-.6-1-.7-1.6V6.5c0-1.1.1-2.2-.8-3-.7-.6-1.7-.9-2.6-.9-1.6.1-3.5.7-3.8 2.7 0 .2.1.3.3.3l1.7.2c.2 0 .3-.2.3-.3.1-.7.7-1.1 1.4-1 .4 0 .7.2 1 .5.2.4.3.8.2 1.3v.2c-1.1 0-2.2.2-3.3.6-1.2.4-2 1.5-1.9 2.8v.4c0 1.3 1.2 2.4 2.6 2.3zm2.5-4.8v.4c.1.6 0 1.3-.3 1.8-.2.5-.7.8-1.2.8-.7 0-1.1-.5-1.1-1.3 0-1.4 1.3-1.7 2.6-1.7z"> amazon</path></div>

The SVG tag ends too early and there's an unwanted empty paragraph.

It would appear that the source code in oik-dash-svg-list.php is OK

$icons['amazon'] = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"/><g><style>.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><path d="M16.2 14.9c-1.9.8-4 1.2-6.1 1.2-2.8 0-5.5-.7-7.9-2.1-.2-.1-.3.1-.2.2 2.2 2 5 3 7.9 3 2.3 0 4.6-.7 6.5-2 .4-.1.1-.5-.2-.3zm1.8-1c-.9-.4-2-.3-2.8.3-.2.1-.1.3 0 .2.6-.1 1.8-.2 2 .1.2.3-.2 1.5-.5 2-.1.2.1.2.2.1.8-.7 1.2-1.7 1.1-2.7zm-9-1.3c1.1.1 2.2-.4 2.9-1.3.3.4.6.8 1 1.2.1.1.3.1.4 0 .3-.3 1-.9 1.3-1.2.1-.1.1-.3 0-.5-.4-.4-.6-1-.7-1.6V6.5c0-1.1.1-2.2-.8-3-.7-.6-1.7-.9-2.6-.9-1.6.1-3.5.7-3.8 2.7 0 .2.1.3.3.3l1.7.2c.2 0 .3-.2.3-.3.1-.7.7-1.1 1.4-1 .4 0 .7.2 1 .5.2.4.3.8.2 1.3v.2c-1.1 0-2.2.2-3.3.6-1.2.4-2 1.5-1.9 2.8v.4c0 1.3 1.2 2.4 2.6 2.3zm2.5-4.8v.4c.1.6 0 1.3-.3 1.8-.2.5-.7.8-1.2.8-.7 0-1.1-.5-1.1-1.3 0-1.4 1.3-1.7 2.6-1.7z"/></g></svg>';

which suggests a problem with wpautop() again!

The workaround is to use [bw_autop off]

[bobbingwide]

After a comparison of the icons produced by my code and Nick Diego's I finally discovered the cause of the problem where my icons were incorrectly displayed on the front end.
In JavaScript the attributes for the <Path> tag are clipRule and fillRule
but in HTML they should be clip-rule and fill-rule.

In oik-dash-svg-list.php there are 57 instances of clipRule and 61 of fillRule.
The pragmatic solution is to change the code that renders the SVG icon on the front end with a simple str_replace() applied to the $dpath.

[bobbingwide]

Delivered in v2.3.0