How to expand the PageBuilder with custom Elements and Styles

Hi Guys,

can someone help me with this problem? I need to expand the PageBuilder with more selections of Elements. Something like a Toggle - Button or a red Header Title. The actual Version of the selections is very limited.

Is there any way to solve this problem? Do I have to write a PlugIn for that? How can I do that for Webiny? I would be very thankful if you guys can help me.

Best regards,

Cihan

1 Like

Hi @CCihan,

Thank you for your question :slightly_smiling_face:

We are working super hard for our release that will come up this week. :tada:
On Friday we will publish new docs, that will help you build new page element plugins. I will post the link here as soon as we have it live. :relaxed: In the meantime join our slack community here.

1 Like

Hi @Albiona_Hoti,

thanks a lot for your help.

It would be very helpful to get more informations and some examples for that issue.

Have a great day.

Cihan

1 Like

Hey @Albiona_Hoti,

how is it going on with the Documentation? We would be very thankful if we can get some more helpful Informations soon.

Greets,

Cihan

1 Like

Hi @CCihan :relaxed:

We just launched :tada:

In this article you find what you are looking for :slightly_smiling_face:
Creating Custom Page Elements

If you are interested to support us, we are on Product Hunt too :upside_down_face:

Hey @Albiona_Hoti,

sry, but is there any possibility to expand the documentation. First, I think all of the Webiny Documentations are very short handled. You don´t give enouph informations for developers. It´s hard to reproduce the work of you all. More informations please :frowning:

@Albiona_Hoti
The PageBuilder Doc didn´t helped me that much

Hi there,

My team and I are trying to create a custom plugin for the PageBuilder.
We used as reference the code snippets you provided us in the tutorial.

Within the tutorial we should create a editor plugin, the settings dialog and also the render plugin.
Our current folder structure is:
src
admin
editor.tsx
iframeembed.tsx
settings.tsx

Right now currently run into the issue:

We are missing some cirtical informations in the Article. Like:

  • what would be the default file structure of the package?
  • how does editor reference settings? We also studyed the se7ensky-webiny-plugins. Within this package the editor and settings code are combined
  • does the package need any critical webiny or babel/webpack libraries to “work” as intended
  • create a “Hello World” example

Nevertheless, thank you very much for starting this project. It fits perfectly into our environment and we hope to use Webiny extensively after clarifying the starting problems.

Best regards,
Nicolas

1 Like

@nkumnberlin you don’t need to do anything with webpack for the app to build. Everything is configured to work for most of the cases.

We’ll upload the code for the plugin, and how to add it to your existing app on our github, so you can see the whole picture.

Docs are of course a work in progress, we’ll now be able to dedicate more time to that, now that we’ve launched the Headless CMS. It was our only focus for the past several months.

Btw. are you trying to develop your plugin as a separate package, or in the admin app directly? The easiest way to start is if you create your plugin in the admin app directly. We’ll add a separate article for writing new packages.

2 Likes

Hi Pavel,

thank you kindly for your reply.
We started developing the plugin within admin, switched then to a external npm package, because of your documentation.

Please let me know when you upload the code, so we can correct our mistakes.
Thank you and have a good week

Hi Pavel,

we created a new project with the new full-cms-template.
So, you restructered the whole project and somehow obsoleted your doc.
Due to the restructuring, the index.tsx within./admin renders directly, while App uses the new Admin-full template and disguises the old structure.
Right now there’s no obvious way to register plugins.

Hope you can give us some insights, because we WANT to use your pagebuilder and looking forward to expand it.

Hey @nkumnberlin, docs for that part are in the works, it’s not really a 5 minute issue, so bear with us.
Plugins can be registered using the template factory, since we’re using Typescript you can easily inspect parameters of each template.

But please, just be patient for a little longer, we’re working on docs and some very important fixes that are coming this week :slight_smile:

I’ll keep in touch, cheers!