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

delhee commented 1 year ago

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.

dashicons css-is-not-loaded-at-editor-canvas-iframe

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

jordesign commented 1 year ago

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 commented 1 year ago

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

delhee commented 1 year ago

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>

wp6 2-dashicons-custom-html-issue

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

wp6 3-dashicons-custom-html-issue

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>

wp6 3-dashicons-custom-html-issue-with-text-between-span-tags

Please let me know if you want any additional info.

t-hamano commented 1 year ago

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

44205
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.

https://github.com/WordPress/gutenberg/blob/d5d8533cf2cc04bb005bda147114cf00782d6c38/lib/client-assets.php#L296

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 commented 1 year ago

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?

WordPress / gutenberg