So I am starting to learn Wordpress development and today I uploaded my first custom theme from my local environment to the remote hosting server. My theme installed with no issues and I was ready to start using my theme remotely. However I have noticed something in the block editor. I want the block editor to look similar to the output and on my local environment the editor (or backend as some call it) keeps or displays my theme styles, for example here is a custom block in the editor on my localhost (mamp on my Mac)

custom block in the editor on my localhost

On the remote server after installing my theme and adding the custom block in the editor I see the following (sorry for the bad screen grab):

Sorry about missing off some of the screen

Okay, so something is wrong, I then did some reasearch and read that I need to add editor support, so I added the following to my functions.php file in my theme.

add_theme_support( 'editor-styles' );
add_editor_style(get_template_directory_uri() . '/assets/css/style.css');

After reinstalling I noticed the following:

screen shot with

So the CSS is now being applied but the photo and font urls in the stylesheet don't seem to be correct or working in the editor view, in the published view all styles are applied and look good. So, how do I make sure that the url paths in my theme CSS file are relative to the CSS file and respected. Basically, how can I get them to work in the editor/backend as well as the frontend? For example I define my urls in my css file like so,

.intro::before {
    content: '';
    background: url('css-images/backgrounds/einzewidinge-ordnungscoach-berlin.jpg') no-repeat center center fixed;

thinking I may need to change the url property to use "./" at the start of the path I changed all paths to respect this. So the background peoperty now looks like this:

background: url('./css-images/backgrounds/einzewidinge-ordnungscoach-berlin.jpg') no-repeat center center fixed;

This makes no difference. I have also noticed that on my localhost, since adding the add_theme_support and add_editor_style now css images are blocked but fonts load? What am I doing wrong? I could reproduce the CSS in the block css styles but I do feel that this will duplicate my css code. Any guidence or help would be appreciated.

  • what does your browsers dev console say? The error message it gives you will be far more valuable than anything a person could tell you here, right now there isn't enough information in your question to pinpoint the problem. Note that it's possible to register a font entirely from theme.json and it gets loaded and applied on both the editor and the frontend automatically without writing any PHP JS or CSS. As an aside, your custom block looks like it could have been a cover block with child blocks
    – Tom J Nowell
    Mar 26 at 13:29
  • For images and the fonts I just get 404 messages, the request for these files is being sent to (for example) einzweidinge.de/wp-admin/css-images/icons/quote-right.svg however the files and fonts actually live in einzweidinge.de//wp-content/themes/einzweidinge/assets/css/… My styles sheet is located at /wp-content/themes/einzweidinge/assets/css/styles.css and the fonts and images are in child folders
    – Mike Sav
    Mar 26 at 15:01
  • hmm this is likely because editor styles are not served as is, they're read in and reprocessed to ensure all rules have the appropriate editor styles wrapper class before them. Note that core itself doesn't take the approach you took for the default themes either because of theme assets, and uses pattern blocks instead so that PHP can be used to make an absolute path to the files, the second default theme also used that approach as no better solution has been found. It may be that inserting images via an editor stylesheet isn't possible right now
    – Tom J Nowell
    Mar 26 at 15:42
  • 1
    As for fonts, no don't do it that way, Core has a fonts API that auto-magically works, then you just specify the font family via a CSS variable, and core takes care of loading the font for you
    – Tom J Nowell
    Mar 26 at 15:43
  • 1
    as I mentioned, using relative paths like this in an editor style is impossible and unfixable. No amount of CSS filtering will allow you to do url( ./ in your CSS and include it in an editor style. You should find alternative methods of including references to theme assets ( and should the background of that block not be set via block attributes? If it's being rendered in PHP would it not make more sense to use PHP to display the URL either via a CSS variable or style attribute?
    – Tom J Nowell
    Apr 2 at 11:23


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.