# Issue gutenberg styling within local dev enviroment **URL:** https://discourse.roots.io/t/issue-gutenberg-styling-within-local-dev-enviroment/26738 **Category:** sage **Tags:** sage9 **Created:** 2024-02-19T19:47:28Z **Posts:** 14 ## Post 1 by @jellevanamersfoort — 2024-02-19T19:47:28Z 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](https://developer.wordpress.org/reference/functions/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. --- ## Post 2 by @raffjones — 2024-02-19T20:55:14Z 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](https://discourse.roots.io/t/editor-styles-not-loading-in-wp6-3-with-bud-dev/25783) 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. --- ## Post 3 by @jellevanamersfoort — 2024-02-20T08:59:47Z 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. --- ## Post 4 by @strarsis — 2024-02-20T12:28:37Z On a hunch, this could be a loopback issue: > > > ### Description > > I've updated to 5.9 in a WordPress theme that editor and conten…t where 1:1 thanks to the editor-styles. > > Now, I have the following issues: > > 1. editor-styles support not working anymore > > I had this added to the theme: > ```add_theme_support('editor-styles');``` > and editor-style.css was used automatically to add styles to the editor. Now it doesn't work (the file is not enqueued). I've tried doing this: > ``` > add_theme_support('editor-styles'); > add_editor_style( 'editor-style.css' ); > ``` > but it didn't worked. > > 2. The revert issue > Maybe is related to the first one, but I've notice that now the gutenberg editor has reverts in a lot of properties. This makes blocks look terrible, because font-sizes are reverted, font-families too (to a "sans-serif"), font-weights... etc. Making the editor looks awful. Some example of this code could be: > > ``` > html :where(.editor-styles-wrapper) h1, > html :where(.editor-styles-wrapper) h2, > html :where(.editor-styles-wrapper) h3, > html :where(.editor-styles-wrapper) h4, > html :where(.editor-styles-wrapper) h5, > html :where(.editor-styles-wrapper) h6, > html :where(.editor-styles-wrapper) select { > font-size: revert; > margin: revert; > color: revert; > line-height: revert; > font-weight: revert > } > ``` > > Could you tell me if this is fixeable by the user (developer) or it has to be fixed in an update? > > Thank you! > > > > > > ### Step-by-step reproduction instructions > > 1. Create a WP theme (child or parent) to add the functions mentioned below (in environment info) > 2. Create the css/js files mentioned above (in environment info). > 3. Add theme support for editor-styles > 4. Try if it has been called using the element inspector of your favourite browser > 5. To see the revert values, just inspect any heading (h2, h3...) in the content of the editor > > ### Screenshots, screen recording, code snippet > > ![image](https://user-images.githubusercontent.com/29259269/151332130-7fb085cf-9cd8-496b-8a59-4667efc04ca1.png) > > > ### Environment info > > - WordPress 5.9. I'm using that version of Gutenberg. > - Theme used: Custom theme with no more than this 2 functions: > > ``` > function mwm_style_wp_admin() { > wp_enqueue_style('blocks', get_template_directory_uri().'/blocks.css', array(), '1.0.0'); > } > add_action( 'enqueue_block_editor_assets', 'mwm_style_wp_admin' ); > > function mwm_scripts_wp_admin() { > > wp_register_script( 'mowomo_scripts', get_template_directory_uri() . "/blocks.js", array(), "1.0.0", true ); > wp_enqueue_script( 'mowomo_scripts' ); > > } > > add_action('admin_enqueue_scripts', 'mwm_scripts_wp_admin'); > ``` > and of course the editor-styles theme support > > - Browsers: All (Chrome, Firefox, Safari...) > - Devices: Desktop with windows 10, macbook air M1 13' with OS Monterey > > ### Please confirm that you have searched existing issues in the repo. > > Yes > > ### Please confirm that you have tested with all plugins deactivated except Gutenberg. > > Yes --- ## Post 5 by @jellevanamersfoort — 2024-02-20T17:46:19Z 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 --- ## Post 6 by @jellevanamersfoort — 2024-02-20T18:15:49Z 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. --- ## Post 7 by @strarsis — 2024-02-20T18:29:07Z You may find this interesting: > [https://core.trac.wordpress.org/ticket/55728#ticket](https://core.trac.wordpress.org/ticket/55728#ticket) --- ## Post 8 by @jellevanamersfoort — 2024-02-21T08:41:08Z That relativePath function doesn’t exist in the project I tested in. But definitely useful in the future. --- ## Post 9 by @strarsis — 2024-02-21T12:31:31Z > [@jellevanamersfoort](#): > > doesn’t exist in the project This is because of an older version of `acorn` used by the Sage theme, the `relativePath` function became available with [`acorn` `3.0.0`](https://github.com/roots/acorn/releases?page=2#:~:text=Compare-,v3.0.0,-Upgrade%20Guide) (see related issue [Feature Request: Add `relativePath` or `themePath` to `Asset` · Issue #227 · roots/acorn · GitHub](https://github.com/roots/acorn/issues/227)). In that theme `acorn` may not be updated easily, so in doubt, use the workaround you discovered. --- ## Post 10 by @Jess1 — 2024-02-23T23:31:45Z 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); }); ``` ``` 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? --- ## Post 11 by @jellevanamersfoort — 2024-02-24T13:55:41Z 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](https://discourse.roots.io/t/editor-styles-not-loading-in-wp6-3-with-bud-dev/25783) --- ## Post 12 by @Jess1 — 2024-02-28T05:48:00Z @jellevanamersfoort Yes, seems to be unsolved. @kellymears is this a bug, or am I failing to understand something? --- ## Post 13 by @Jess1 — 2024-03-20T21:48:08Z I never set my publicPath: ``` // bud.config.js app.setPublicPath('/app/themes/mycooltheme/public/'); ``` It works now! --- ## Post 14 by @jellevanamersfoort — 2024-03-21T20:01:16Z @Jess1 awesome! Sometimes something as little as this can fix the entire issue.