WP5.0 Table block in template/Innerblocks
-
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!
-
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' ).attributesThis 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 itsgetBlocksselector 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' ).attributesAnd 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?
- The topic ‘WP5.0 Table block in template/Innerblocks’ is closed to new replies.