Editor styles don’t work

@app1e5auce Those paths look correct to me. I understand that the editor styles aren’t showing. Could you check in your inspector to see if the stylesheet is loaded at all?

Is it possible that there’s some CSS overrides happening, that don’t allow your editor styles to apply?

Hey Luke,

Thanks for the reply. What CSS file would I be looking for in my inspector? Would my file be loaded all by itself, or is it packaged somehow with other block css files?

If it is meant to load all by itself, it is not showing in any of my above tries. I also tried all my files with something crazy like * { color:red !important; } so I could easily tell if they loaded. No luck.

I don’t think any CSS overrides are happening. I use very few plugins. I don’t know what could cause that.

@app1e5auce You should look for the editor styles CSS file that you’ve created. It should be loaded via the path you choose, e.g. blocks/block-image-callout/preview.css.

I just double checked with the latest version of Genesis Custom Blocks, and the preview stylesheet loaded perfectly.

Can you double check that you got the block’s slug correct?

Hey Luke,

I went down the rabbit hole today and figured out what is causing this issue: a non-typical WordPress folder structure.

I use Bedrock. Bedrock rearranges the WordPress file system. The WP_CONTENT_DIR is the /app folder, and WordPress core files go in a /wp folder.

I went into the core wp_enqueue_style function and printed out the WP_Styles Object. An example:

[genesis-custom-blocks-editor-css] => _WP_Dependency Object
(
    [handle] => genesis-custom-blocks-editor-css
    [src] => https://genesis.local/app/plugins/genesis-custom-blocks-pro/vendor/studiopress/genesis-custom-blocks/css/blocks.editor.css
    [deps] => Array
        (
        )

    [ver] => 78af8c18648205f9991d20eb79a727f9
    [args] => all
    [extra] => Array
        (
        )

    [textdomain] => 
    [translations_path] => 
)

[genesis-custom-blocks__block-fancy-text] => _WP_Dependency Object
(
    [handle] => genesis-custom-blocks__block-fancy-text
    [src] => /app/themes/twentytwentyone/blocks/fancy-text/preview.css
    [deps] => Array
        (
        )

    [ver] => 1.2
    [args] => all
    [extra] => Array
        (
        )

    [textdomain] => 
    [translations_path] => 
)

The [src] of the genesis-custom-blocks-editor-css is a full URL. That works. The [src] to my custom block preview.css is not a full URL. Now, the URL isn’t incorrect per se, but WordPress in Bedrock is looking for it in the wrong place. wp_enqueue_styles is looking for /app in the same place that /wp-admin, /wp-content, and /wp-includes live. But that is the /wp folder in Bedrock. That is not where the /app folder is.

When I manually go into the core enqueue function and add https://genesis.local to the beginning of the [src] for that one block preview.css file, it loads perfectly.

I’m not sure if there is a way for you to get get_template_directory_uri() somehow built into how these editor style paths are created, but I think that may be a solution for everyone. Right now I’m going to try to just build my own editor styles enqueue function that will add the styles with my paths.

Hopefully this helps you, or someone else in the future!

• This reply was modified 3 years, 11 months ago by app1e5auce.
• This reply was modified 3 years, 11 months ago by app1e5auce.
• This reply was modified 3 years, 11 months ago by app1e5auce.