Carbon-fields: Not working with bedrock

Created on 17 Dec 2019  路  7Comments  路  Source: htmlburger/carbon-fields

Version

  • Carbon Fields: 3.1.9 (composer)
  • WordPress: 5.3.0
  • PHP: 7.2

Expected Behavior

show fields with "quick start" exemple

Actual Behavior

create "theme option" page but not showing any field in this page...

Steps to Reproduce the Problem

  1. install bedrock
  2. install carbon fields with composer
  3. try to make simple field like in the quickstart guide

Comments

in JS console, there is some 404 error while carbon-field try to load some css and js fields.
I've see this post (https://carbonfields.net/docs/guides-bedrock-support-2/?crb_version=2-2-0) but it don't solve the problem...
The plugin try to load files located in a "dist" folder but this "dist" folder doesn't exist in carbon-field directory !

Most helpful comment

Hi!
The right solution here would be to move the library to web directory by changing the "installer-paths" in your composer.json.
But the problem is that "htmlburger/carbon-fields" library doesn't support it (it lacks "composer/installers" dependency).
So, my workaround was to copy some folders from the library to the plugin:

 "require": {
    "htmlburger/carbon-fields-plugin": "*"
  },
"scripts": {
    "post-install-cmd": [
      "cp -r vendor/htmlburger/carbon-fields/build web/app/plugins/carbon-fields-plugin",
      "cp -r vendor/htmlburger/carbon-fields/core/Libraries web/app/plugins/carbon-fields-plugin/core"
    ],
  }

And for composer update, use "post-update-cmd" hook.

Then somewhere in your code define the root url for the plugin:
define('Carbon_Fields\URL', WP_CONTENT_URL . '/plugins/carbon-fields-plugin');

That's it.

All 7 comments

I'm happy to follow up on this as I use bedrock a lot.

That are old docs. I'm not sure if that still applies for 3.0. I don't see a reason why bedrock would break the carbon fields plugin.

2 questions that come to mind:

  • Is there a reason for you to use the plugin version of this? If you're using bedrock, you should also be familiar with writing your own plugin using composer.

  • Are you sure you've installed the plugin version of carbon fields? Did you use composer require htmlburger/carbon-fields-plugin and not composer require htmlburger/carbon-fields?

Hello, I use carbon-fields as a dependency of my theme (using composer) and I use the bedrock structure. Everything works well.

I do have 404 when fetching CBF assets in the back-office using Bedrock.
It works for @matepaiva because he uses CBF as a dependency of his theme (not of the Bedrock installation itself)

See #786 for details.
See somehow related #457

Same isue.
I made a WP plugin requiring CarbonFields, but with Composer install, the assets are not found.
I tried with htmlburger/carbon-fields-plugin and htmlburger/carbon-fields, for the the ame results.

Any news?

Hi!
The right solution here would be to move the library to web directory by changing the "installer-paths" in your composer.json.
But the problem is that "htmlburger/carbon-fields" library doesn't support it (it lacks "composer/installers" dependency).
So, my workaround was to copy some folders from the library to the plugin:

 "require": {
    "htmlburger/carbon-fields-plugin": "*"
  },
"scripts": {
    "post-install-cmd": [
      "cp -r vendor/htmlburger/carbon-fields/build web/app/plugins/carbon-fields-plugin",
      "cp -r vendor/htmlburger/carbon-fields/core/Libraries web/app/plugins/carbon-fields-plugin/core"
    ],
  }

And for composer update, use "post-update-cmd" hook.

Then somewhere in your code define the root url for the plugin:
define('Carbon_Fields\URL', WP_CONTENT_URL . '/plugins/carbon-fields-plugin');

That's it.

Another solution is to let your webserver handle the job.
FYI, this is how I do it using nginx:

define('Carbon_Fields\\URL', WP_HOME . '/assets/carbon-fields');
server {
  root /app/web;
  location ~ ^/assets/carbon-fields/(?<path>.*\.(js|css))$ {
    alias /app/vendor/htmlburger/carbon-fields/$path;
  }
}

For Apache, it should look like this (untested, but you get the idea):

AliasMatch "^/assets/carbon-fields/(.*\.(js|css))$" "/app/vendor/htmlburger/carbon-fields/$1"

@zahardev your solution solved my case, thank you! I think there is only a small mistake. You copied core/Libraries to core/. But to me what worked was copying core/Libraries to core/Libraries.

Was this page helpful?
0 / 5 - 0 ratings