Issue gutenberg styling within local dev enviroment

sage
1

I’m encountering an issue where my styles aren’t loading properly within Gutenberg in my local development environment. Interestingly, in production, the styling works as expected.

I’m using “add_editor_style” to load the styles.

Oddly enough, a colleague of mine who’s using Windows 10 with Local by Flywheel isn’t experiencing the same issue.

I’m on MacOS and typically run environments within MAMP Pro, but I also have a few projects using Docker, where we are having the same issue.

Has anyone else encountered a similar issue before? Any insights would be appreciated.

2

Yes - been suffering this for a while. You have to run the build script or the editor styles just don’t load - this is since the editor was wrapped in an iframe.

I asked about it previously here - I think this is same issue? Editor styles not loading in WP6.3 with bud dev

The workaround is to have an API v2 block enabled somewhere as this prevents the full iframe editor.

I can only hope there is a solution soon as it’s really annoying having to build the styles to see editor.css changes in the backend.

3

It isn’t exactly the same. For me I have it on sage 9 sites, even before bud existed aswell.

For me it also doesn’t work locally with a production build. It just doesn’t work at all on local domains.

But there probably is a connection between the two issues somewhere.

4

On a hunch, this could be a loopback issue:

1 Like
5

I feel like this could be the issue. Just haven’t found a fix or workaround for it just yet, but this helps me in the right direction. Thanks

6

I just fixed the issue. @strarsis got me in the right direction. The issue was the http request.

I used to setup my css like add_editor_style(asset('styles/main.css')->uri());. Which using laravel mix, just retrieves the url. Which works great, but not in every enviroment.

I now changed it to add_editor_style(str_replace(get_template_directory(), '', asset('styles/main.css')->path())); which basically is the stylesheet path relative from my theme directory.

This makes sure WP takes the file from the file system, which fixes the issue.

1 Like
7

You may find this interesting:

https://core.trac.wordpress.org/ticket/55728#ticket

8

That relativePath function doesn’t exist in the project I tested in. But definitely useful in the future.

9

This is because of an older version of acorn used by the Sage theme, the relativePath function became available with acorn 3.0.0 (see related issue Feature Request: Add `relativePath` or `themePath` to `Asset` · Issue #227 · roots/acorn · GitHub).
In that theme acorn may not be updated easily, so in doubt, use the workaround you discovered.

1 Like
10

I’m suffering this issue as well. Tailwind stylesheet not carrying over to editor, as well as any blocks targeted from app.css. Running lando npm run build applies the styles. They get undone as soon as I run lando npm run dev (I’m not sure lando has anything to do with it)

Using: “roots/acorn”: “^4.0.2”

Things I’ve tried:

// https://discourse.roots.io/t/editor-styles-not-loading-in-wp6-3-with-bud-dev/25783/13
// No effect
// theme/resources/scripts/editor.js
import { registerBlockType } from '@wordpress/blocks';
registerBlockType( 'prevent/iframez', { 
    apiVersion: 2,
    title: 'Prevent iFrames',
} );


// https://discourse.roots.io/t/editor-styles-not-loading-in-wp6-3-with-bud-dev/25783/7 
// No effect
// theme/app/setup.php
add_action('enqueue_block_assets', function () {
    if(is_admin()) {
        bundle('editor')->enqueue();
    }
}, 100);

// theme/app/setup.php
add_action('after_setup_theme', function () {
    add_theme_support('editor-styles');
    // From the [sage docs](https://roots.io/sage/docs/gutenberg/). 
   // No effect
    add_editor_style(asset('app.css')->relativePath(get_theme_file_path()));

    // From this thread. // No effect
    add_editor_style(str_replace(get_template_directory(), '', asset('styles/main.css')->path()));

    // From this thread. // No effect. Is bud using laravel mix?
    $relAppCssPath = asset('app.css')->relativePath(get_theme_file_path());
    add_editor_style($relAppCssPath);
});

<?php
// Per core bug: https://core.trac.wordpress.org/ticket/55728#ticket
// /wp-includes/block-editor.php#L538
// No effect
$styles[] = array(
    'css'            => wp_remote_retrieve_body( $response ),
    'baseURL'        => $style, // added
    '__unstableType' => 'theme',
);

Is there a different way I’m supposed to configure editor styles to inherit from app through bud?

1 Like
11

I believe this has to do with bud.
Looks like it is exactly the same issue as: Editor styles not loading in WP6.3 with bud dev

12

@jellevanamersfoort
Yes, seems to be unsolved. @kellymears is this a bug, or am I failing to understand something?

1 Like
13

I never set my publicPath:

// bud.config.js
app.setPublicPath('/app/themes/mycooltheme/public/');

It works now!

1 Like
14

@Jess1 awesome! Sometimes something as little as this can fix the entire issue.