Block Editor shows whitespace instead of inline icon

  • Resolved abitofmind

    (@abitofmind)


    1 year, 4 months ago

    Frontend:

    • Inline Icons get rendered just fine.
    • Inspecting in DevTools shows that the .fa class loads the necessary CSS and web font.

    Block Editor:

    • Icon button is present in rich text toolbar.
    • Chooser then shows the icons just fine.
    • But when inserting it shows a whitespace instead of the icon.
    • This disrupts the WYSIWYG experience in the Editor.
    • In the WordPress Code Editor its markup is there.

    Frontend vs. Block Editor — Screen Recording

    ?? Block Editor shows whitespace instead of inline icon (39 secs, 370 KB, Dropbox)

    Frontend vs Block Editor — DOM Inspection:

    Environment:

    • JVM rich text icons 1.2.3
    • WordPress 6.2.2
    • Plugin Gutenberg 15.9.1 (stopped updates on purpose, waiting for Re-Introduce Content Editing in the Site Editor)
    • Safari 16.5
    • macOS 11.7.7 Big Sur
    • Media Library lives on separate subdomain — Officially supported by WordPress, but it was once the root cause for a plugin issue
    • W3 Total Cache with cache busting for CSS/JS/fonts — But also a hard reload of the Block Editor does not solve the situation.
    • Staging domain (where I currently build the website) is behind the Login Wall of My Private Site — Has not caused any issues so far with any other plugin.

    Followup:

    • Checked similar support threads:
      2023-02-22 — Iconset is empty
      2023-03-11 — Buggy behavior in the site editor
    • But I also checked your changelog and noticed:
      1.2.2 — Bugfix WordPress 6.2 site editor rich text blocks not editable.
    • So maybe my bug is a regression, or a particular variant of it yet not known (see my ENV info)
    • Please tell me what I should look for.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Joris van Montfort

    (@jorisvanmontfort)

    The last time I looked into this the site editor was giving errors rendering the bloks with icons in them. That was resolved. However there seems to be no good way to load extra css into the site editor screen to load the css to show the icons. The Full Site Editor works with an iframe and loading css into the FSE iframe still seems to be an issue in the WordPress core: https://github.com/WordPress/gutenberg/issues/38673

    Thread Starter abitofmind

    (@abitofmind)

    Thanks for linking the Gutenberg issue being behind the various CSS/script loading issues in the Block Editor environment.

    Is there nothing you can recommend me to investigate/fix in my situation?

    For example I noticed a somehow strange discrepancy within the windows of the Block Editor:

    ? The chooser itself (which leaves in the main DOM of the opened Block Editor page) shows the icons. They have a .fa class which is defined in the CSS file loaded from /wp-content/plugins/jvm-rich-text-icons/dist/fa-4.7/font-awesome.min.css?ver=6.2.2

    ? Whereas on the canvas (which is the shadow DOM in the iframe) they don’t load.

    So side by side in the same window in the chooser it renders the icon-font but on the canvas only a few pixels aside from that it fails rendering. So bizarre…

    Thread Starter abitofmind

    (@abitofmind)

    Good news:

    From WP 6.3, you can use the enqueue_block_assets action to load any asset into the iframe that is also loaded on the front-end.

    Can you give it a try to use this action in your plugin?

    Plugin Author Joris van Montfort

    (@jorisvanmontfort)

    I tried it with WordPress 6.2 and it does not work. We wil have to wait for WordPress 6.3 and then try again and find a solution that works for 6.2 and 6.3.

    Thread Starter abitofmind

    (@abitofmind)

    Thanks for the intermediary update. Please update again should you have news. Thanks!

    Thread Starter abitofmind

    (@abitofmind)

    ? Since this Gutenberg fix the icons now show inline in the Block Editor.

    • WordPress 6.3
    • Gutenberg 16.4.0
    • JVM Gutenberg Rich Text Icons 1.2.3

    This issue is resolved from my side! ??

    Plugin Author Joris van Montfort

    (@jorisvanmontfort)

    Thanks for the update! Good news!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Block Editor shows whitespace instead of inline icon’ is closed to new replies.