Home Forums ACF PRO ACF Blocks with block.json generates wrong CSS file URL in editor


ACF Blocks with block.json generates wrong CSS file URL in editor

  • Am I doing something wrong here, or is this a bug?

    I’m creating ACF Blocks using block.json and in my block.json file I have this line:

    "style": "file:./tile.css",

    This CSS is loading (inline, in the head) correctly on the front end, but on the back end it’s not loading, and I also noticed there’s a 404 error in the console… the CSS file is being requested, but the URL is wrong.

    For example, if the URL should be this:

    …the URL it’s actually requesting is this:

    Note /plugins/ in there. That’s part of what it’s generating as well, which seems relevant too, as if what it’s doing is PLUGINDIR . get_template_directory() …

    As I asked at the beginning… am I doing something wrong, or is this a bug in ACF?

  • Answer: Yes, I am doing something wrong, although I haven’t figured out a fix yet. I realized this issue is happening because I have ACF embedded in my custom theme rather than running it as a standalone plugin. (I do this to have more control over updates for a couple of mission-critical plugins I use in conjunction with my theme… but I’m starting to second-guess the benefits of the approach.)

  • Upon further investigation, this was not the answer after all. I made the decision to remove the embedded ACF from my theme and install it standalone, and the problem is still happening… on the front end, the CSS is loading properly, but on the back end, the URL it’s requesting is this (parts in all-caps edited for privacy):


    It may be worth mentioning that this is a Multisite installation, although I don’t think that has anything to do with it.

  • Is no one else having this problem? It is still a major issue for me. My ACF blocks look fine on the front end but totally broken in the Block Editor. It seems like somewhere ACF is using a [something]_path() function instead of a [something]_uri() function when enqueuing the style.

  • OK… well, no one here seems to have anything else to say about this, but just in case a future ACF PRO user encounters this same issue, I’ve found a workaround.

    Using the "file:./whatever.css" value still never works for me in the editor (though it’s fine on the front end), but I’ve discovered that registering the script/style first, then registering the block and using the handle in block.json works.

    So for example, wherever you’re registering the whatever block, you’d have these lines:

    wp_register_style('whatever-css', get_theme_file_uri('blocks/whatever/whatever.css'));

    And then in your whatever block’s block.json file, you’d have this:

    "style": "whatever-css",

    It works!

  • @room34 – this very annoying and very perplexing issue showed up for me as well, also on a multisite installation. I just wanted to say that, while you got no response here to your question, thanks to you returning to the forum with your solution, you likely saved me hours and hours of troubleshooting (and several gray hairs).

    Thanks for sharing your knowledge!

    (It also appears that there’s some semi-significant bug somewhere that may need further investigation)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.