Custom markup wrapping your block

  • ondrejvala

    (@ondrejvala)


    5 years ago

    Dear friends,
    I really like your plugin. My question is: is there any chance to insert my custom code before and after your <div class=”wp-block-wdp-section-block”></div>? I’ve tried to look to your source code, but no chance for me with React etc.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Bartosz Gadomski

    (@bartoszgadomski)

    Hi @ondrejvala!

    I’m glad you like this plugin! ?? since it is built on React there’s no “hook” you can use to put your custom code.

    You can use JavaScript to place it there after page load event instead, this is quite easy to implement on front-end, while a little bit hard to have the same result on Block editor (Gutenberg).

    Do you want to put there just a simple HTML code?

    Thread Starter ondrejvala

    (@ondrejvala)

    Hi Bartosz,
    thanks for your answer. Yeah, I know it’s build on React, I explored your source code. Because I need to insert closing tags like </div> before block (and some other opening again after), javascript method .before() is useless for me…
    I simply need on frontend just before your block to close div with Bootstrap container and afterwards after your block to open it again.
    I don’t know if there is any way to do it ??

    Plugin Support Bartosz Gadomski

    (@bartoszgadomski)

    Hi @ondrejvala,

    it’s not easy to insert not valid elements into DOM through JS (closing tag only is not a valid DOM node). You can try to play with innerHTML though:

    https://www.w3schools.com/jsref/prop_html_innerhtml.asp

    So basically you might need to get the content of your DOM as a string, find the Section Block inside, append your HTML closing tag before the Section Block, and append updated HTML to your DOM with .innerHTML

    Not easy & fast, but should work ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom markup wrapping your block’ is closed to new replies.