Rendering Gutenberg Blocks In The Front-End with React

[abder]

I have a WordPress Project where I'll be building a website with a decoupled infrastructure (ReactJS frontend and WordPress backend with Gutenberg as the editor).

The Blocks on the Editor Will look almost the same on the front-end, so I want to re-use the blocks code in the react front-end as well.

what will be the best approach for that?

One thing I am thinking about is to bring the block list for a page to the front-end ( as JSON ) then "somehow" load Gutenberg in the front-end and make it render that nested list of blocks.

[talldan]

@DOUARA It's hard to answer without further information. Just to be clear, are you planning on using the REST API with headless WordPress? I know it's becoming fairly common to use something like Gatsby for this purpose: https://www.gatsbyjs.org/packages/gatsby-source-wordpress/

Generally there won't be any difficulty using blocks, they output HTML into post content, so all you'd need to do is render the HTML from the post.

If you need to do something different with the block data, you'll probably be looking to parse that HTML from a post to convert it into block data: https://github.com/WordPress/gutenberg/tree/master/packages/blocks#parse

Most of the useful functions you'll need for handling block data are in the blocks package, which you can install from NPM: https://www.npmjs.com/package/@wordpress/blocks

[abder]

@talldan Yes, I am gonna use REST API with headless WordPress, the Front-End is React, so what I want exactly is to take all the blocks data and consume it with react in the front-end, I want to re-use Gutenberg capability to render these data on the front-end

[talldan]

That's definitely possible, as mentioned you'd need to use the parse function to convert the post HTML back into block data.

Static blocks are already built around React components, so in some cases you might be better off building a custom block.

[ivanjeremic]

@DOUARA did you manage to get a working example of this? I try to do the same thing without success, can you provide me with an example maybe? Thanks

[abder]

@ivanjeremic I didn't find any proper solution to that, but the only thing you can do now is to expose all blocks attributes data through WordPress API then consume it on your react app that you should build from scratch on the front-end. you could benefit from your code on Gutenberg just by duplicating it, no proper way to render the same code on the front-end

here's the code you can use to expose blocks for each post on its API endpoint:

add_action(
    'rest_api_init',
    function () {

        if ( ! function_exists( 'use_block_editor_for_post_type' ) ) {
            require ABSPATH . 'wp-admin/includes/post.php';
        }

        // Surface all Gutenberg blocks in the WordPress REST API
        $post_types = get_post_types_by_support( [ 'editor' ] );
        foreach ( $post_types as $post_type ) {
            if ( use_block_editor_for_post_type( $post_type ) ) {
                register_rest_field(
                    $post_type,
                    'blocks',
                    [
                        'get_callback' => function ( array $post ) {
                            return parse_blocks( $post['content']['raw'] );
                        },
                    ]
                );
            }
        }
    }
);

There's another approach that i didn't have time to look into it: https://frontity.org/. perhaps they have a better solution

Good Luck!

[ivanjeremic]

@ivanjeremic I didn't find any proper solution to that, but the only thing you can do now is to expose all blocks attributes data through WordPress API then consume it on your react app that you should build from scratch on the front-end. you could benefit from your code on Gutenberg just by duplicating it, no proper way to render the same code on the front-end

here's the code you can use to expose blocks for each post on its API endpoint:

add_action(
  'rest_api_init',
  function () {

      if ( ! function_exists( 'use_block_editor_for_post_type' ) ) {
          require ABSPATH . 'wp-admin/includes/post.php';
      }

      // Surface all Gutenberg blocks in the WordPress REST API
      $post_types = get_post_types_by_support( [ 'editor' ] );
      foreach ( $post_types as $post_type ) {
          if ( use_block_editor_for_post_type( $post_type ) ) {
              register_rest_field(
                  $post_type,
                  'blocks',
                  [
                      'get_callback' => function ( array $post ) {
                          return parse_blocks( $post['content']['raw'] );
                      },
                  ]
              );
          }
      }
  }
);

There's another approach that i didn't have time to look into it: https://frontity.org/. perhaps they have a better solution

Good Luck!

Thanks, I already found a solution it renders the same component to the front-end and not only does my front-end (save function) use react now and is interactive it is also using attributes as initialState for the front-end.

[abder]

@ivanjeremic sounds great! Would really appreciate it if you can share the solution with us

[ivanjeremic]

@ivanjeremic sounds great! Would really appreciate it if you can share the solution with us

Sure I will prepare a repo and post it here.

[ivanjeremic]

@ivanjeremic sounds great! Would really appreciate it if you can share the solution with us

Here it is, please contribute if you or anyone else sees where it can be improved to build a solid boilerplate for the future. https://github.com/ivanjeremic/gutenberg-front-to-back-react

[jtsternberg]

Here it is, please contribute if you or anyone else sees where it can be improved to build a solid boilerplate for the future. https://github.com/ivanjeremic/gutenberg-front-to-back-react

I could be wrong, but wouldn’t it be better do do what’s being done on this line using the parse api mentioned above? @talldan any insights here? Is there an example somewhere using the parse api?