Documentation out of Date: How to Customise an Existing Page Builder Element

[cdilga]

Hi team,

The code structure seems to have changed substantially since https://github.com/webiny/docs.webiny.com/blob/027bb88105059c28f4a00362c5cea1447331b947/docs/tutorials/page-builder/customize-an-existing-page-builder-element.mdx was last updated.

It looks like fundamental structural change introduced in webiny/webiny-js#1931 of Page Builder Elements and is not trivial to a new user attempting to follow the tutorial.

Elements missing include:

1. How to rebuild the plugins in your Webiny folder
2. How the new settings work
3. How to modify the rendering of a new Page Builder setting

Additional documentation that would be useful now, would be how to create a new plugin like: pb-editor-page-element-style-settings-padding for something like an element's id, like pb-editor-page-element-settings-id as one user asked here: https://webiny-community.slack.com/archives/C014Y0HGJ0Y/p1635132084018100

Sean Oct 25th, 2021 at 2:21 PM
hi! Can anyone help me how can I add id to the heading element?

13 replies

Swapnil M Mane 3 months ago
Hi @sean, are you looking for adding id to only heading element or to other elements as well in Page Builder. Could you please share some more details on the requirements around it. (edited)

Sean 3 months ago
@Swapnil M Mane I want to add id to only heading element for now.

Swapnil M Mane 3 months ago
Cool, is it for adding custom styles to heading element? (edited)

Sean 3 months ago
nope.

Sean 3 months ago
so I'm making scroll down function when clicking a title.
❤️
1

Sean 3 months ago
so title is looking like test

Sean 3 months ago
and I need to add id="1" to the heading.

Sean 3 months ago
does this make sense?

Swapnil M Mane 3 months ago
Thanks for sharing the details Sean, let me have a look into this.

Sean 3 months ago
Thank you!

Swapnil M Mane 3 months ago
Hi Sean, here is a guide on customizing an existing Page Builder element, similarly, you can update the heading element as per your requirement. (edited)

Sean 3 months ago
I already read this but not sure how to add id.

Ashutosh 3 months ago
Hi @sean,
Sorry we don’t have a tutorial for creating a new settings for the Page Builder editor.
On a separate note, every page element already has a unique id attribute attached to it.