WP5.0 Table block in template/Innerblocks

  • Resolved Anne K.

    (@annekrarup)


    5 years, 11 months ago

    Wordpress 5.0 makes it possible to create templates prepopulated with a specific type and number of blocks.

    I’m trying to build a custom block (for recipes) via a template for Innerblocks, setting predefined attributes and placeholders for each block. E.g. one of the heading blocks in my Innerblocks, is set to be a h3 a specific block style and the placeholder ‘Enter recipe title’ like this:

    ['core/heading', { placeholder: 'Enter recipe title...', level: 3, className: 'is-style-line-heading'}],

    However, I cannot figure out how to modify the initial state of a table block in the template. I want the table block to automatically have 2 columns and 4 rows when the custom block is inserted. I tried looking at the table block’s source code, but it only made me more confused.

    • Does anyone know how to achieve this?
    • Alternatively, can anyone point me in the direction of documentation/tutorials that write more about predefined attributes for templates/Innerblocks
    • Or, is there are better place to ask this question?

    Thank you!

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

  • Hi @annekrarup,

    I found this to be tricky as well. The attributes definition for the table block isn’t easy read at a glance from the source code because the attribute definitions are generated dynamically. In addition, even if we can read the attribute definitions at a glance, they only describe how the attributes should be obtained from the block data, not how attributes will look once we have them.

    In case you’d still like to look at the table block’s attributes definition, you can do so by evaluating the following in the browser dev tools console. Documentation here.
    wp.blocks.getBlockType( 'core/table' ).attributes

    This is helpful but isn’t a direct answer to “What do a specific table block’s attributes look like?”

    The good news is that we can create your ideal table block in the editor and look up that block’s attributes via the dev tools console. In the console, wp.data.select( 'core/editor' ) returns an object with selector functions for querying editor state, and its getBlocks selector lets us ask for all the blocks in a post. Documentation here.

    Given the above, this code finds the first table block in a post and looks at its attributes:
    wp.data.select( 'core/editor' ).getBlocks().find( b => b.name === 'core/table' ).attributes

    And this gives us formatted JSON of the table block’s attributes:

    JSON.stringify(
    wp.data.select( 'core/editor' ).getBlocks().find( b => b.name === 'core/table' ).attributes,
    null,
    "\t"
)

    The result should be the table attributes you’re looking for (except for maybe the extra quotes added for the JSON format : ).

    Does that help?

    • This reply was modified 5 years, 11 months ago by Brandon Payton. Reason: correct typo
    Thread Starter Anne K.

    (@annekrarup)

    @bpayton that is immensely helpful, I was able to get the template to work perfectly. Thank you so much!

    That’s great to hear! Cheers!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘WP5.0 Table block in template/Innerblocks’ is closed to new replies.