Adding custom attribute to freeform (classic) block

  • Resolved elkex

    (@elkex)


    4 years, 4 months ago

    I created a custom attribute that will append a margin class to every Gutenberg custom & core block through a SelectControl field with several options in the sidebar. This works perfectly for most blocks, but not for the freeform block.

    The property appears in the sidebar when the freeform block was chosen, but it is not possible to save the value of this attribute when I save the page & reload the editor in the browser.

    The values does appear on the frontend once the block is being rendered, but if we then choose to change the size of the margin, it sort of puts a second wrapper around this block and appends both margin classes.

    The value is being appended through a filter and the “createHigherOrderComponent”.

    Does anyone know a solution to this problem on how we can save this custom attribute?

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hey @elkex,

    It’s not really a hard thing to do. We did something similar and you can see the source code here: https://github.com/Codeinwp/gutenberg-animation/blob/master/src/

    index.js has the primary setup code and editor.js has the code for adding the class. You can use setAttributes to save the attributes. Always make sure to not override them.

    On a different node, this own’t work with Classic Block as that doesn’t support custom CSS class.

    Hope it helps.

    @elkex did you ever find a solution for this? I am at the point where I don’t think the Freeform block can even support custom attributes. The way WordPress renders this “block” on the frontend makes it impossible.

    I did find an very inelegant workaround though. If the user “groups” a freeform block, and you don’t even need to group it with another block, you can then add attributes to the group block as normal. This may not work for what you need, but solved my issue. Ideally, most users will not be using the freeform block as development of the Block Editor continues.

    Hardeep Asrani

    (@hardeepasrani)

    Hey @ndiego,

    What exactly do you want to do with Freeform block?

    Hi @hardeepasrani,

    I have a plugin (Block Visibility) that adds custom attributes to blocks. These attributes are then used to control how a block is rendered on the frontend.

    The Freeform block does not appear to be a “block” in the traditional sense in that it does not accept attributes of any kind, not even the normal classes attribute. Makes perfect sense due to the way the content in the Freeform block is rendered on the frontend, but it’s interesting because I think this is the only block in the entire ecosystem that operates this way.

    Perhaps some of the new full-site editor blocks will behave similarly, but I hope not. Being able to add custom attributes is a really neat way for developers to extend the functionality of the new block editor!

    Thread Starter elkex

    (@elkex)

    Thanks for the info!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding custom attribute to freeform (classic) block’ is closed to new replies.