Opened 5 years ago
Last modified 4 years ago
#50249 new defect (bug)
color-picker dashicon not showing
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | 5.4.1 |
Component: | Editor | Keywords: | |
Focuses: | ui | Cc: |
Description
When creating a PanelBody in the InspectorControls for Gutenberg block, and using 'color-picker' from Dashicons, no icon is rendered. Other dashicons are working, but 'color-picker' is not.
Sample code:
createElement(PanelBody, { title: __('Border color','textdomain'), initialOpen: false, icon: 'color-picker' }, createElement(ColorPicker, { color: attributes.PARAGRAPHSTYLES_BORDERCOLOR, disableAlpha: false, onChangeComplete: changeParagraphStyleBorderColor }) )
Change History (5)
#2
@
5 years ago
Using the 'color-picker' icon in an html element using css classes works fine:
<h2 class="dashicons-before dashicons-color-picker">A Colorful Headline</h2> <h2><span class="dashicons dashicons-color-picker"></span> A Colorful Headline</h2>
It is only when using the string 'color-picker' to indicate the icon when creating a Gutenberg PanelBody that the icon is not shown:
createElement(PanelBody, { title: __('Background color','textdomain'), initialOpen: false, icon: 'color-picker' }
Icon not shown. Other icons work fine:
createElement(PanelBody, { title: __('Layout options','textdomain'), initialOpen: false, icon: 'admin-appearance' }
This ticket was mentioned in Slack in #core by peterwilsoncc. View the logs.
4 years ago
#5
@
4 years ago
Hello @Lwangaman,
Thank you for putting together this information. This ticket was discussed in a Core Triage session and it seems as if the issue is related to the Block Editor. Since this issue is best reported using the [Gutenberg repository]https://github.com/WordPress/gutenberg, we suggest you refer to this issue: https://github.com/WordPress/gutenberg/issues/20284#issuecomment-664722165 that talks about color picker icon. Hope this helps. Thank you!
Here is the link to the corresponding dashicon: https://developer.wordpress.org/resource/dashicons/#color-picker .