[wp-trac] [WordPress Trac] #51245: Businesswoman Dashicon not rendering in Block Library

[WordPress Trac]

#51245: Businesswoman Dashicon not rendering in Block Library
--------------------------+-----------------------------
 Reporter:  paulpooka     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:  5.5.1
 Severity:  normal        |   Keywords:  needs-testing
  Focuses:                |
--------------------------+-----------------------------
 The businesswoman Dashicon doesn't currently render as a custom icon in
 the block library. I believe that all other WordPress dashicons do.

 The problem appears to stem from the businesswoman icon SVG having two
 <path>s, not one like all other WordPress Dashicons.

 The Block Library doesn't directly reference wp-
 includes/fonts/dashicons.svg instead it uses wp-
 includes/js/dist/components.min.js which is the minified version of wp-
 includes/js/dist/components.js

 It appears that whatever code is turning the svg dashicons in wp-
 includes/fonts/dashicons.svg into wp-includes/js/dist/components.js isn't
 working on SVGs with more than one path inside them.

 You can test this by adding the following to the switch statement in wp-
 includes/js/dist/components.min.js at a suitable point, such as before the
 'businessman' case:


 {{{
 case "businesswoman":e="M16 11c-.9-.8-2.2-.9-3.4-1l1 2.1-3.6 3.7-3.6-3.6
 1-2.2c-1.2 0-2.5.2-3.4 1-.8.7-1 1.9-1 3.1v2.8s3.4 1.2 7 1.1c3.6.1 7-1.1
 7-1.1v-2.8c0-1.1-.2-2.3-1-3.1zM6.6 9.3c.8 0 2-.4 2.2-.7-.8-1-1.5-2-.8-3.9
 0 0 1.1 1.2 4.3 1.5 0 1-.5 1.7-1.1 2.4.2.3 1.4.7 2.2.7s1.4-.2
 1.4-.5-1.3-1.3-1.6-2.2c-.3-.9-.1-1.9-.5-3.1-.6-1.4-2-1.5-2.7-1.5-.7
 0-2.1.1-2.7 1.5-.4 1.2-.2 2.2-.5 3.1-.3.9-1.6 1.9-1.6 2.2 0 .3.6.5
 1.4.5z";break;
 }}}


 This will allow most of the businesswoman Dashicon to render in the Block
 Library, however her necktie will still be missing from the icon:


 {{{
 e="M10 11l-2.3-1 2.3 5.8 2.3-5.8";
 }}}


 Adding this into the businesswoman case will cause only the necktie to
 appear in the Block Library:


 {{{
 case "businesswoman":e="M16 11c-.9-.8-2.2-.9-3.4-1l1 2.1-3.6 3.7-3.6-3.6
 1-2.2c-1.2 0-2.5.2-3.4 1-.8.7-1 1.9-1 3.1v2.8s3.4 1.2 7 1.1c3.6.1 7-1.1
 7-1.1v-2.8c0-1.1-.2-2.3-1-3.1zM6.6 9.3c.8 0 2-.4 2.2-.7-.8-1-1.5-2-.8-3.9
 0 0 1.1 1.2 4.3 1.5 0 1-.5 1.7-1.1 2.4.2.3 1.4.7 2.2.7s1.4-.2
 1.4-.5-1.3-1.3-1.6-2.2c-.3-.9-.1-1.9-.5-3.1-.6-1.4-2-1.5-2.7-1.5-.7
 0-2.1.1-2.7 1.5-.4 1.2-.2 2.2-.5 3.1-.3.9-1.6 1.9-1.6 2.2 0 .3.6.5
 1.4.5z";e="M10 11l-2.3-1 2.3 5.8 2.3-5.8";break;
 }}}



 What is needed in wp-includes/js/dist/components.min.js is the following,
 which renders the whole of the icon:



 {{{
 case "businesswoman":e="M16 11c-.9-.8-2.2-.9-3.4-1l1 2.1-3.6 3.7-3.6-3.6
 1-2.2c-1.2 0-2.5.2-3.4 1-.8.7-1 1.9-1 3.1v2.8s3.4 1.2 7 1.1c3.6.1 7-1.1
 7-1.1v-2.8c0-1.1-.2-2.3-1-3.1zM6.6 9.3c.8 0 2-.4 2.2-.7-.8-1-1.5-2-.8-3.9
 0 0 1.1 1.2 4.3 1.5 0 1-.5 1.7-1.1 2.4.2.3 1.4.7 2.2.7s1.4-.2
 1.4-.5-1.3-1.3-1.6-2.2c-.3-.9-.1-1.9-.5-3.1-.6-1.4-2-1.5-2.7-1.5-.7
 0-2.1.1-2.7 1.5-.4 1.2-.2 2.2-.5 3.1-.3.9-1.6 1.9-1.6 2.2 0 .3.6.5
 1.4.5zM10 11l-2.3-1 2.3 5.8 2.3-5.8";break;
 }}}



 So there appear to be two solutions:

 1. (Harder but more futureproof): Modify the code that generates wp-
 includes/js/dist/components.js and components.js.min to accept dashicons
 with two paths.



 2. (Simpler and should solve this single problem): Modify the code of the
 Dashicon businesswoman SVG within wp-includes/fonts/dashicons.svg to the
 following single path code:


 {{{
 <symbol viewBox="0 0 20 20"
 id="businesswoman"><title>businesswoman</title><g><path d="M16
 11c-.9-.8-2.2-.9-3.4-1l1 2.1-3.6 3.7-3.6-3.6 1-2.2c-1.2 0-2.5.2-3.4
 1-.8.7-1 1.9-1 3.1v2.8s3.4 1.2 7 1.1c3.6.1 7-1.1
 7-1.1v-2.8c0-1.1-.2-2.3-1-3.1zM6.6 9.3c.8 0 2-.4 2.2-.7-.8-1-1.5-2-.8-3.9
 0 0 1.1 1.2 4.3 1.5 0 1-.5 1.7-1.1 2.4.2.3 1.4.7 2.2.7s1.4-.2
 1.4-.5-1.3-1.3-1.6-2.2c-.3-.9-.1-1.9-.5-3.1-.6-1.4-2-1.5-2.7-1.5-.7
 0-2.1.1-2.7 1.5-.4 1.2-.2 2.2-.5 3.1-.3.9-1.6 1.9-1.6 2.2 0 .3.6.5
 1.4.5zM10 11l-2.3-1 2.3 5.8 2.3-5.8"/></g></symbol>
 }}}


 Then re-run the buildscripts that generate wp-
 includes/js/dist/components.js and components.js.min, which should render
 the businesswoman icon properly:


 {{{
 case "businesswoman":e="M16 11c-.9-.8-2.2-.9-3.4-1l1 2.1-3.6 3.7-3.6-3.6
 1-2.2c-1.2 0-2.5.2-3.4 1-.8.7-1 1.9-1 3.1v2.8s3.4 1.2 7 1.1c3.6.1 7-1.1
 7-1.1v-2.8c0-1.1-.2-2.3-1-3.1zM6.6 9.3c.8 0 2-.4 2.2-.7-.8-1-1.5-2-.8-3.9
 0 0 1.1 1.2 4.3 1.5 0 1-.5 1.7-1.1 2.4.2.3 1.4.7 2.2.7s1.4-.2
 1.4-.5-1.3-1.3-1.6-2.2c-.3-.9-.1-1.9-.5-3.1-.6-1.4-2-1.5-2.7-1.5-.7
 0-2.1.1-2.7 1.5-.4 1.2-.2 2.2-.5 3.1-.3.9-1.6 1.9-1.6 2.2 0 .3.6.5
 1.4.5zM10 11l-2.3-1 2.3 5.8 2.3-5.8";break;
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51245>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform