Support » Developing with WordPress » Get InnerBlocks HTML for dynamic rendering of wrapper

  • Hello, I’m new to WordPress and I’m making my own plugins to add functionality to it. I’m wondering what would be the recommended way of doing the following:

    I have a custom block MYPANEL. This custom block works just like a div with a default class and I can put whatever I want inside of it. The point of the custom block MYPANEL is that if later I want to change the HTML of MYPANEL I can do it from the PHP side.

    For example, say today MYPANEL is a div with a CSS class that gives it a black border. But in 3 months I decide to redesign MYPANEL and my new design needs a wrapper div to work for some reason, or 3 divs, or I want to use <figure> instead of div, etc. I want to be able to just change the PHP template instead of having to update every post.

    <!-- fallback static HTML generated by javascript -->
    <div class="my-panel">
      <!-- innerblocks... -->
    <!-- future HTML generated by PHP one day maybe -->
    <aside class="my-panel">>
      <div class="my-panel_icon" />
      <div class="my-panel__inner">
        <!-- innerblocks... -->

    Right now, on save in javascript, I return a div with the attributes I take from and InnerBlocks.Content as child. This saves in the post’s content an unchanging div. So now I need the PHP template to replace that div with whatever HTML I want, while keeping the inner blocks.

    I couldn’t find documentation on what the arguments passed to render_callback are, but from my debugging I get the block attributes as first argument, some HTML as second argument ($content), and the block instance as the third. I don’t know if the $content is the HTML that was saved from Javascript or HTML generated in PHP that includes dynamic rendering of inner blocks. Either way, there doesn’t seem to be an $innerBlocksHTML argument anywhere. So what’s the appropriate way of getting it?

    Should I write a simple regex to remove the outer div from $content? This feels like it could get messy if I ever change the save function in javascript.

    Should I iterate the inner blocks and call render_block on every inner block to get their HTML and just concatenate that? Although this probably should work, if $content contains the rendered blocks already, I’m calling all the rendering callbacks of the inner blocks a second time. I think there was an argument called skip_inner_blocks that looked like it made WP skip rendering the $content, but I couldn’t find any documentation on it. Is that what it is for? Is there something like a skip_outer_block setting so I can take just the inner blocks’ content?

    What’s the recommended way of doing this?

  • You must be logged in to reply to this topic.