[gatsby-source-wordpress] Add support for Beaver Builder

[ferbj]

Summary

I would like gatsby to have support to connect the beaver builder and that it is automated, many sites are builded using this plugin, so the question is how can do that?.

Motivation

it's possible to customize the wordpress source library to connect it to beaver builder?, because some clients have websites that are builded on beaver builder plugin, so the idea is connect with api of beaver builder and publish the static files, i'm thinking using the bb-plugin (backend) service and the gatsby as a static sites generator.

[pieh]

If beaver builder exposes data via REST api this is doable, but potentially need extra handling in gatsby-source-wordpress (we already do that for couple of specific plugins - i.e. ACF).

[ferbj]

Hi Pieh i'm using this API rest https://github.com/aberkow/bb-rest so you think that its possible work with this api and gatsby? or how can i customize the api or the wordpress source that get the data of beaver builder, thanks so much in advance, i was try to make my own source plugin https://www.gatsbyjs.org/docs/creating-a-source-plugin/ but in fact the problem is to create the nodes, gatsby doesn't detect my nodes created in graphql when i'm in localhost:8000/___graphql

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[ferbj]

No stale

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[riaanlom]

I managed to get something working. I'm using gatsby-source-graphql instead of gatsby-source-wordpress.

In wordpress create a child theme based on Beaver builder. In the child theme functions.php add this at the end

add_action( 'graphql_register_types', function () { register_graphql_field( 'Page', 'bbContent', [ 'type' => 'String', 'description' => __( 'Page Content', 'wp-graphql' ), 'resolve' => function ( $post ) { return graphql_bbContent( $post ); } ] ); });

add_action( 'graphql_register_types', function () { register_graphql_field( 'Post', 'bbContent', [ 'type' => 'String', 'description' => __( 'Post Content', 'wp-graphql' ), 'resolve' => function ( $post ) { return graphql_bbContent( $post ); } ] ); });

function graphql_bbContent( $post ) { if ( ! (bool) FLBuilderModel::is_builder_enabled( $post->ID ) ) { return; } FLBuilderModel::set_post_id( $post->ID ); $css = FLBuilder::render_css(); $js = FLBuilder::render_js();

ob_start();
FLBuilder::render_content_by_id( $post->ID );
$content = ob_get_clean();
FLBuilderModel::reset_post_id();

$render =
    '<link rel="stylesheet" type="text/css" href="' . get_stylesheet_uri() . '">'
    . '<style>' . FLTheme::get_cached_css( true == FLCustomizer::is_customizer_preview() ? 'customizer' : 'skin' ) . '</style>'
    . '<style>' . $css . '</style>'
    . $content
    . '<style>' . $js . '</style>';

return $render;

}

It is quite hacky but essentially you're adding a field "bbContent" which contains the beaver builder rendered page/post (with classes) along with inline css and js.

Then in your gatsby app you can pull bbContent from graphql and render it.

[DenkiDenki]

I managed to get something working. I'm using gatsby-source-graphql instead of gatsby-source-wordpress.

In wordpress create a child theme based on Beaver builder. In the child theme functions.php add this at the end

add_action( 'graphql_register_types', function () { register_graphql_field( 'Page', 'bbContent', [ 'type' => 'String', 'description' => __( 'Page Content', 'wp-graphql' ), 'resolve' => function ( $post ) { return graphql_bbContent( $post ); } ] ); });

add_action( 'graphql_register_types', function () { register_graphql_field( 'Post', 'bbContent', [ 'type' => 'String', 'description' => __( 'Post Content', 'wp-graphql' ), 'resolve' => function ( $post ) { return graphql_bbContent( $post ); } ] ); });

function graphql_bbContent( $post ) { if ( ! (bool) FLBuilderModel::is_builder_enabled( $post->ID ) ) { return; } FLBuilderModel::set_post_id( $post->ID ); $css = FLBuilder::render_css(); $js = FLBuilder::render_js();

ob_start();
FLBuilder::render_content_by_id( $post->ID );
$content = ob_get_clean();
FLBuilderModel::reset_post_id();

$render =
  '<link rel="stylesheet" type="text/css" href="' . get_stylesheet_uri() . '">'
  . '<style>' . FLTheme::get_cached_css( true == FLCustomizer::is_customizer_preview() ? 'customizer' : 'skin' ) . '</style>'
  . '<style>' . $css . '</style>'
  . $content
  . '<style>' . $js . '</style>';

return $render;

}

It is quite hacky but essentially you're adding a field "bbContent" which contains the beaver builder rendered page/post (with classes) along with inline css and js.

Then in your gatsby app you can pull bbContent from graphql and render it.

Hello! how did you do with this? I am very interested in this way of working, could you share your results with me? Thank you in advance

[justlevine]

Newer versions of Beaver Builder dont have a FLTheme::get_cached_css function.... @riaanlom any chance you've since updated the snippet and can share?