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)
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):
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:
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.
theme.jsonand 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 blocksurl( ./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 orstyleattribute?