dashicons Icons Not Displaying at Site Editor and Post Editor of v6.3 #53528

delhee · 2023-08-10T13:29:15Z

Description

Dear WordPress Team,

First of all, really appreciate your efforts and contributions to make site building easier and more favorable. I have made myself a plugin developer. This time I am facing a problem regarding dashicons with the latest version of WordPress.

Here is the symptom. After upgrading WordPress to v6.3 at 18:16 (Asia Pacific Time) Aug 9th 2023, the dashicons icons I used at the site editor and post editor stopped displaying. But it does display in the front end and in anything of the previous versions. Later on, I have simulated the situation and realized that the dashicons.min.css style sheet is not loaded at the of the editor-canvas iframe (as shown in screenshots). When I loaded the dashicons css with inspector tool, the icon displayed again.

Please let me know, at your own convenience, if this a carefully thought-through decision or you will resolve it in your next release.

Thank you again for your work.

Step-by-step reproduction instructions

Expected Result:
Need to add a dashicons icon with the following code:

<div style="width: 5rem;height: 5rem;background: cyan;">
    <span class="dashicons dashicons-admin-comments" style="font-size: 3rem;width: 3rem;color: #aaa;height: 3rem;"></span>
</div>

Actual Result:
The icon does not show up. Previous versions are normal. Front end is normal.

My Finding:
Once I loaded the dashicons.min.css into the <head> of editor-canvas <iframe>, things are back to normal.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

The text was updated successfully, but these errors were encountered:

jordesign · 2023-08-10T23:57:14Z

Hi @delhee - thanks for the report. It would be good to help try and narrow down a potential cause of this by:

Testing with a default theme like TwentyTwentyThree active.
Testing with all plugins disabled except Gutenberg

I also wanted to check - are you adding that code into an HTML block in the editor?

Mamaduka · 2023-08-11T05:01:08Z

@t-hamano, do I remember correctly that you fixed a similar issue recently?

delhee · 2023-08-11T06:24:27Z

Hi @jordesign, thanks for the feedback.

I was already using the unmodified twentytwentythree theme, when I took the abovementioned screenshots.

As requested, I have disabled all other plugins except for Gutenberg. The symptoms are the same: dashicons icon does not show up in the site editor of v6.3 and is normal in the v6.2. The HTML code mentioned above was inserted via browser’s inspector tool.

In case you need to know why I insert HTML through inspector tool, here is what is happening in my world. I’ve been developing a block type plugin that displays a search icon from dashicons collection. My work-in-progress plugin worked fine in the previous versions of site editors. But once the WordPress was upgraded to v6.3, the search icon disappeared from my site editor. I did some trouble shooting for a while and with the inspector tool, I put some random text in between the <span ...>test123</span>. The text shows up. Then I thought it was time to open a ticket under your github repo. I don’t think it’s a good idea to confuse your team with the messy complicated code of an unfinished plugin. So I figured out a piece of simple HTML code to describe the situation and inserted it with browser’s inspector tool. I tried out the same HTML in the same manner in the site editors of both v6.2 and v6.3. As a result, the former is normal and the latter is not.

Since that you have brought it up, I tried to insert the same piece of HTML code mentioned in this ticket via the Custom HTML Block. The dashicons icon cannot display either. If I put a text in between the <span ...>test567</span>, then the text shows up, as illustrated below. By the way, I also noticed that the <iframe> of the Custom HTML Block does not load the dashicons.min.css into the <head>.

WordPress v6.2 site editor, with the following code inserted via inspector tool and via Custom HTML block:

<div style="width: 5rem;height: 5rem;background: cyan;">
    <span class="dashicons dashicons-admin-comments" style="font-size: 3rem;width: 3rem;color: #aaa;height: 3rem;"></span>
</div>

WordPress v6.3 site editor, with the same code inserted via inspector tool and via Custom HTML block:

WordPress v6.3 site editor, with the following code inserted via Custom HTML block:

<div style="width: 5rem;height: 5rem;background: cyan;">
    <span class="dashicons dashicons-admin-comments" style="font-size: 3rem;width: 3rem;color: #aaa;height: 3rem;">test567</span>
</div>

Please let me know if you want any additional info.

t-hamano · 2023-08-11T08:21:33Z

Thanks for pinging me. I have not worked on this issue, but I know that similar problems have been reported in the past:

Dashicons not enqueued in tablet/mobile preview if SCRIPT_DEBUG is true #44205
I should be able to use dashicon in site-editor.php with SCRIPT_DEBUG enabled. #50897

In these issues, the results were dependent on the value of SCRIPT_DEBUG. Therefore I tested under different scenarios in WordPress 6.3. Here is the code I used for testing:

wp.blocks.registerBlockType( 'example/dashicon', {
	apiVersion: 3,
	title: 'dashicon',
	edit: () => wp.element.createElement( wp.components.Dashicon, { icon: 'admin-site' } ),
	save: () => null,
} )

The results were as follows:

Disable the latest Gutenberg plugin
- SCRIPT_DEBUG is true
  - The editor is iframed: ❌ Reproduced
  - The editor is not iframed: ✅ Not reproduced
- SCRIPT_DEBUG is false
  - The editor is iframed: ❌ Reproduced
  - The editor is not iframed: ✅ Not reproduced
Enable the latest Gutenberg plugin
- SCRIPT_DEBUG is true
  - The editor is iframed: ✅ Not reproduced
  - The editor is not iframed: ✅ Not reproduced
- SCRIPT_DEBUG is false
  - The editor is iframed: ✅ Not reproduced
  - The editor is not iframed: ✅ Not reproduced

The point is that regardless of the value of SCRIPT_DEBUG, if the editor is iframed, this problem is reproduced in the core.
The Gutenberg plugin cannot reproduce this.

My guess is that it is because the Gutenberg plugin explicitly has dashicons as a dependency.

gutenberg/lib/client-assets.php

Line 296 in d5d8533

array( 'dashicons' ),

I can reproduce the problem by changing this argument to array() as a test.

So, Is the fundamental solution to add dashicon to the dependencies of any of the handles on the core side as well?

BTW, there is a #43725 that suggests deprecating the dashicon string in the Icon component. Therefore, regardless of when or if this issue is resolved, I recommend using the svg icons from the @wordpress/icons package instead.

rleecrewmp · 2023-08-25T03:52:52Z

Ran into this issue while taking my theme more into the FSE direction and using API Version 3 on all of my custom blocks. I don't know what the underlying issue is but I was able to fix by enqueuing the dashicons CSS file.

add_action('enqueue_block_assets', function (): void {
    wp_enqueue_style('dashicons');
});

Edit: Possibly the Dashicons CSS file is not being enqueued into the block iframe wrapper?

bobbingwide · 2024-10-12T12:34:11Z

Seeing as this issue is still open, here are my comments.

I had the same problem with my oik-bbw/dashicons block.
My analysis indicates that the fix applied to Gutenberg has not been applied to WordPress core.
The question I'm left with is "Should the dependency of wp-components on dashicons be implemented in core or does anyone using dashicons in their custom code have to implement the identified workaround?"

jordesign added [Type] Bug An existing feature does not function as intended [Status] Needs More Info Follow-up required in order to be actionable. labels Aug 10, 2023

t-hamano removed the [Status] Needs More Info Follow-up required in order to be actionable. label Aug 11, 2023

Mamaduka added this to WordPress 6.3.x Editor Tasks Aug 14, 2023

skorasaurus added the Needs Testing Needs further testing to be confirmed. label Apr 15, 2024

Mamaduka mentioned this issue Apr 16, 2024

The “@wordpress/components” dashicon doesn’t appear on block’s preview #60777

Closed

bobbingwide mentioned this issue Oct 12, 2024

Enable dynamic display of latest plugins count, total downloads and related charts from post meta data bobbingwide/wp-top12#27

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dashicons Icons Not Displaying at Site Editor and Post Editor of v6.3 #53528

dashicons Icons Not Displaying at Site Editor and Post Editor of v6.3 #53528

delhee commented Aug 10, 2023

jordesign commented Aug 10, 2023

Mamaduka commented Aug 11, 2023

delhee commented Aug 11, 2023

t-hamano commented Aug 11, 2023

rleecrewmp commented Aug 25, 2023 •

edited

Loading

bobbingwide commented Oct 12, 2024

dashicons Icons Not Displaying at Site Editor and Post Editor of v6.3 #53528

dashicons Icons Not Displaying at Site Editor and Post Editor of v6.3 #53528

Comments

delhee commented Aug 10, 2023

Description

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

jordesign commented Aug 10, 2023

Mamaduka commented Aug 11, 2023

delhee commented Aug 11, 2023

t-hamano commented Aug 11, 2023

rleecrewmp commented Aug 25, 2023 • edited Loading

bobbingwide commented Oct 12, 2024

rleecrewmp commented Aug 25, 2023 •

edited

Loading