Live block editor

[matthijs166]

It would be awesome to fill the site with content via a live preview. So you can see directly how it's going to look. Just like in WordPress with Gutenberg or with Divi.

It's going to be bock based and to edit the block I want to open a popup and render the corresponding payload fields (components from the payload admin panel in a popup)

It's going to be a plugin for payload and a package for the frontend.

I'm still researching the topic and think it would not be that difficult to implement if there is an easy way to render the input fields with the payload components from the admin panel.

I'm still going to the codebase of the admin panel but I can't find a solution. Any tips on where I should look?

[jmikrut]

This is absolutely 100% in our roadmap and something that I am super pumped about. We are working a suite of features that will allow you to swap in your own component for an entire block, and make the blocks actually fully editable via interacting directly with the form from within your custom block component. So, you'll be able to more than preview, you'll be able to inline edit real React components!

This is on our public roadmap and it will take us a bit to get there yet, but it's certainly planned. I think it should probably be bumped up in priority, huh. Would be a great feature.

[matthijs166]

Yeahh that souds really awesome!!! Is it also going to work in other frameworks? We also use Svelte a lot for our projects.

[jmikrut]

Good question. We can try and figure out how to make it framework-agnostic. There might be a good way. But because the admin UI is built in React, you probably might be best suited to render some basic React component rather than loading React and Svelte in one client-side app due to performance reasons, etc.

I wouldn't rule it out but it seems like especially MVP, within the admin panel itself, it might be best to render editable React components. That is.. maybe there's something else we can do to have a "preview mode" where you do actually render your exact frontend within the admin UI directly. Some options here!

[matthijs166]

Preview mode sounds to me the way to go.

Rendering the live frontend in a view and editing fields with a react popup or sidebar. Just like how Gutenberg works in Wordpress.

It's then also possible to pass the doc object to the view with a save method so it will give the developer the freedom to implement there own on click editing and tooling.

[matthijs166]

Some inspiration of upcoming/experimental block builders:

• https://tina.io/
• https://github.com/blocks/blocks
• https://github.com/dashpilot/vue-pagebuilder (demo: https://github.com/dashpilot/vue-pagebuilder)

[seaj1one]

Firstly I'm not a dev. I like low-code solutions.

I use https://builderius.io. It's very powerful and would allow me to use Payload cms natively in builderius. My feelings on the subject is that WordPress appeals to both non-devs and to some Devs.

The reason why WordPress is as big as it is that it allows people, with the aid of plugins, to create a wide range of websites. Other solutions like Headless CMS does not. I have already asked that they look at Payload cms.

I've not used Payload cms as yet, but I've watched some of the videos. I will try it out in the next 6-12 months.

I'm going to try and make it work with builderius.io. I have also asked that they create a front end for Payload cms but as WordPress is number 1 it's difficult.

Can you look at builderius.io. and see if it would as a frontend option. I know you hate WordPress but for me it's about looking at the bigger picture.

How can we make it easy for non-devs to build websites?

I would have to create the page in WordPress and

[seaj1one]

I was thinking that payload mange the content and use API's to populate the content to https://builderius.io.

All the styling is done by the builder.

Is this not possible?

[matthijs166]

If Builderius is able to consume REST of GraphQL API's it would, but I don't think it can.

I guess a way to do it is that you can build your components in Builderius, export it to your project and bind the data of payload in your app. Still need a bit of coding experience to set up the project and bind the data to your templates.

Why don't you want to manage your CMS data in builderius itself? It's build on WordPress right?

[seaj1one]

Would you believe in fact it's built that way, it's unlike any other WordPress page builder. Have a little browse, and see what you think.

https://docs.builderius.io/docs/modules/collection
https://docs.builderius.io/docs/modules/dynamic-ulist/

The things that I'm thinking to get it to work are as follows:

• Create an empty WordPress page. Builderius needs this to display the content.
• I use Ploi as my server panel, and it'll allow me to deploy Payload on my server well, in theory, at least.
• Create blocks and pages in Payload and query the page using builderius.io Graphql.

Builderius is a new WordPress plugin and because WordPress is so big, they're understandably not willing to explore anything else at this stage.

Why bother you may ask?

I hear developers complaining about how bad or their frustration with WordPress using outdated software. That maybe the case but it's easier to build a website for non-developers or those who don't know JS.

I'd like to see a hybrid between the old being WordPress and the new such as Payload CMS.

I maybe missing some steps but will give it a go.

[matthijs166]

I don't see any reason to use Payload in your case. It's adding a lot of overhead to your complex, and I think you overengineer the technology stack.

Payload is in my opinion not build to build websites. It's build as a pure headless CMS, and it is up to developers to integrate the CMS in the app.

The direction I think this tread needs to go is how can we live preview data changes inside the integrated app.

I really like the concept of https://github.com/dashpilot/vue-pagebuilder.

You got your CMS fields on one side and see live the changes of the CMS data in the app.

[seaj1one]

Yeah, sure, I did see that link.

I'll see how it develops in the future.

Many thanks for your time.

[jacobsfletch]

Vercel just launched their "visual editor" which enables you to modify any piece of content directly from where it's rendered on your front-end. They somehow wrap each element in a contenteditable or similar component to allow the user to edit, save, or link out to the cms without ever leaving the site. They describe it as not having to modify any of your front-end markup, instead you provide a "content source map" and it magically works. I imagine what they're doing here is intercepting the response and swapping matched content found in the content source map with this new contenteditable component. Despite how they've achieve this, the DX here should be emulated. At first glance content source maps seem bloaty but maybe there's a far simpler API that can be used to achieve a similar effect.

[jacobsfletch]

https://vercel.com/docs/workflow-collaboration/visual-editing

https://vercel.com/blog/visual-editing

It's an enterprise-only offering right now so I don't have access to the live demo unfortunately.

[seaj1one]

It's interesting for sure. Payload has repeating said they won't go down the UI route. That doesn't stop third-party developers from doing it. I don't get why Payload doesn't to do it as they can fund it via subscription payments.

[jacobsfletch]

It's sort of inevitable in my opinion, since you typically don't work with Payload without creating some sort of interface. Payload should provide as many tools as possible to make the core product as marketable as possible and especially if there's enough demand.

[seaj1one]

I couldn't agree with you more 😊

[jacobsfletch]

Update: Payload now fully supports Vercel Visual Editing, more on that here: https://payloadcms.com/docs/integrations/vercel-visual-editing

[jacobsfletch]

Related: #3061

[janus-reith]

In the meantime, did anyone try incorporating Gutenberg into Payload?
https://github.com/Automattic/isolated-block-editor