css – Image and font support missing in editor when deploying theme remotely


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.

Mike Sav 2 months 2023-03-26T07:57:23-05:00 0 Answers 0 views 0

Leave an answer