Custom React Component using Gutenberg page builder

Hello Community folks

I want to use

in frontity, which i can insert and manage from Gutenberg page builder

so that i can insert it in any page in any location

any guidance here?

Hi @jignesh.nextbits

Welcome to the community. How are you planning to store the images for this component? Normally images in WordPress would be stored in the Media Library. I’m not sure how you intend to use Gutenberg in this scenario. Could you provide some more detail about what you’re intending to implement, thanks.

Thanks for replying quickly

image can be stored anywhere but we need those image or component json in API to render

right now any component added in Gutenberg delivers straight html which i dont think is best use of frontity.

Idea is to integrate different React components using Gutenberg so we can place it in page anywhere

and then render it in frontity frontend

Some example components

  • Image Slider
  • Popup Model
  • Horizontal Tabs
  • Vertical Tabs

Hi @jignesh.nextbits

Media can be fetched from the WP Media Library via the REST API using this endpoint: https://yoursite.com/wp-json/wp/v2/media.

You can use libraries.source.api.get() to get the media, and then libraries.source.populate() to add the content to the state.

See the docs here and here.

Hope this helps.

TBH I’m still not sure how you’re intending to use Gutenberg but see the first part of our recently published video here which might be closer to the solution that you’re looking for.

Hey @mburridge

its not just about media, its about overall architectural question

i tried to explain it here

do you have time to chat or hop on short call so i can explain architectural challenge more in detials?

Hi @jignesh.nextbits

The Frontity website uses Frontity on the front end and Gutenberg on the back end, so looking at the way that that’s been implemented could help you with your own use cases.

The code for the Frontity website can be found in this repo. In particular take a look at the processors folder.

For more guidance on this take a look at our documentation on html2react, and in particular the section on processors.

Our recently published video also covers html2react and processors, so take a look at that as well.

A member of the team gave a talk recently at the JavaScript for WordPress Conference about how the Frontity website was built. The video is not available yet, but will be shortly, so keep a look out for it on the JS4WP site. It will also be announced by us in our newsletter and on Twitter when it becomes available.

I hope all the above helps you to integrate Frontity with Gutenberg. We’d love to know what you’re building with Frontity. We have a showcases section on our website where we feature interesting projects that have been built with Frontity.

1 Like