Adding styles from plugins to the editor

  • When adding style files to the editor using add_editor_styles(), you can only specify relative paths for files in the theme folder.
    Accordingly, when adding styles from the plugin (for example, fontello icons located in the plugin folder), you need to specify the URL instead of a local file path.
    As a result:
    – when generating the page, the file is loaded using wp_remote_get(), which is slower than using file_get_contents(). This slows down the loading of the editor with a large number of files.
    – ‘baseURL’ attribute is not created for such files and CSS-styles with url() are processed incorrectly:
    https://prnt.sc/yPljBoJ36raD
    https://prnt.sc/vXEKdbcQHvOp

    Is it possible in the future to add support for styles from plugins using local paths and ensure correct handling of url() from styles, not in the theme folder?

    • This topic was modified 2 years, 9 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 6 replies - 1 through 6 (of 6 total)

  • Are you refering to a plugin? WordPress plugins can add paths for style sheets in the block.json file. Not really clear if this is directed at a plugin or wordpress. If it is a theme you can add some styling in the theme.json file for blocks. Not sure if any of this is helpful. Just not clear as to what you are referring to.

    sorry, you are talking about adding styles in functions.php. I don’t think there is much of a chance enqueue_styles will change. It is used in too many themes and plugins. Changing it would cause everything to have problems. It would be nice to have one command that would enqueue the script in both the editor and front-end.

    Thread Starter themerex

    (@themerex)

    My question concerns situations when in the plugin you need to connect style files to the editor that do not belong to specific blocks. These can be, for example, fonts with icons or regular fonts located in the plugin folder.
    Specifying them as dependencies in a couple of dozen blocks does not seem like a good solution to me. And so I include them in one place through the call to add_editor_styles(). However, for the reasons described above, this method does not work. No matter how I specify the path to the file – neither in the form of a url nor in the form of a relative path to the file.

    add_editor_styles only add the styles to the editor, not to the front end. Calling just editor styles only changes the editor, not the end result. All the styles that appear on the site are still using the queue styles.

    if you want the styles to appear in both the editor and the final version you have to add them to the editor styles and to the enqueued styles. Just adding it to editor styles will not affect the look of the pages. You might want to look at theme.json which can add styles to the blocks. Plugins are now able to include a block.json file. The block.json file allows you to specify the stylesheets to use for a block.

    I think the end goal is to have JSON files to configure the location and styling of the site. It getting there slowly. Try looking into the documentation for theme.json and block.json. Also, remember that editor styles have no effect on the final appearance of your site. editor styles are only seen in the editor. Enqueued styles can’t be seen by the editor but determine the look of your site.

    Thread Starter themerex

    (@themerex)

    Perhaps my bad English is to blame, but Google and I tried))
    I have not written anywhere about connecting styles to the frontend.
    The issue described in my first post is about connecting styles from a plugin to the Gutenberg editor using the add_editor_styles() function. If these styles contain paths to local files connected using the CSS-function url() (for example, a font with icons), then the paths to these files are not processed correctly. As confirmed by the screenshots in the first message.
    When connecting similar files from the theme folder, there are no such problems.

    • This reply was modified 2 years, 9 months ago by themerex.

    I’d like to add some additional thoughts

    • Websites protected with http-password-requests are not loading “remote” styles requested by http requests by php.
    • dynamically generated styles should not be saved in theme-directory but e.g. in uploads-directory to prevent CSS file loss on theme updates.

    Currently as author of a plugin (without a block) or theme (with dynamically generated CSS), there’s only the action “enqueue_block_editor_assets” left which seems not to work with site editor (for building templates).

    I’ve created a ticket on https://github.com/WordPress/gutenberg/issues/41821

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding styles from plugins to the editor’ is closed to new replies.