• Skip to main content
  • Skip to header right navigation
  • Skip to site footer
Callia Web logo

Callia Web

Websites - Design with Purpose

  • Digital toolkits
    • Venture toolkit
    • Go-pro toolkit
    • Intrepid toolkit
  • Services
    • Digital toolkits
    • Design services
    • Simple websites
    • Support and care plans
    • Website consultation
  • Our Work
  • Processes
    • Accessibility matters
    • Branding Process
    • Toolkit and website process
  • About
  • Let’s Talk

Using a Table Block in a Block Template

25 Mar 2022 | WordPress

This post is for other web developers. Whilst we normally write with our clients and potential clients in mind, occasionally we come across something we think may be useful for other web developers and want to share.

Block templates allow a web developer to specify which blocks automatically appear in the editor when you create a new post or custom post type.

In our case, we’ve created a portfolio custom post type and I want to specify that there’s an embed block, a table block (with Director, Producer, Actors headings) and a gallery block.

There are some great resources to get you started on using block templates such as The WordPress Handbook and Bill Erickson’s Using Block Templates with Gutenberg.

In our case whilst registering the portfolio custom post type with register_post_type we can just add template to our $args such as:

'template' => array(
		array( 'core/embed', array() ),
		array( 'core/table', array() ),
		array( 'core/gallery', array() ),
),

But… how to automatically add three two-column rows to our table block with Director, Producer, Actors headings?

Turns out you can specify the attributes for a block and the example given in the WordPress Handbook covers some attributes for the image, heading and paragraph blocks.

'template' => array(
            array( 'core/image', array(
                'align' => 'left',
            ) ),
            array( 'core/heading', array(
                'placeholder' => 'Add Author...',
            ) ),
            array( 'core/paragraph', array(
                'placeholder' => 'Add Description...',
            ) ),
 ),

The WordPress handbook says: “To find a comprehensive list of all block attributes that you can define in a template, consult the block’s block.json file, and look at the attributes and supports values. You can find block.json files inside wp-includes/blocks/heading/block.json.”

So I had a look at the table block’s block.json file and as someone who hasn’t delved much into json I struggled to understand the structure I needed. I turned to Google once more but I could not find any example of a block template that uses the table block (hence this post).

Here is what we eventually found to work and I’ll explain after what tools we used to help us get there:

'template' => array(
   array( 'core/embed', array() ),
   array( 'core/table', array(
      'body' => array(
         array(								//row
            'cells' => array(					
               array(							//element
                  'content' => 'Director',
                  'tag' => 'th'
               ),
               array(							//element
                  'content'=>'',
                  'tag' =>'td'
               ),
            ),
         ),
         array(								//row
            'cells' => array(
               array(							//element
                  'content' => 'Producer',
                  'tag' => 'th'
               ),
               array(							//element
                  'content'=>'',
                  'tag' =>'td'
               ),
            ),
         ),
         array(								//row
            'cells' => array(
               array(							//element
                  'content' => 'Actors',
                  'tag' => 'th'
               ),
               array(							//element
                  'content'=>'',
                  'tag' =>'td'
               ),
            ),
         ),
      ),
   )),
   array( 'core/gallery', array() ),
),

The table block has attributes for hasFixedLayout, caption, head, body, and foot. The head, body and foot are expecting arrays of rows with arrays of cells defined as an array of their content and tag (td or th) defined. To be honest, it feels like I have one extra level of arrays but all I can say is the above works – if anyone can shed further light on this please let me know in the comments.

Charlie Waltham

So how did we get this figured out? I tried my usual approach of trial and error but could not figure it out. Then my 18yo son, Charlie, came home from school. He’s doing Computer Science A-Level and hopes to study Computer Science at University starting in September. So I threw it at him as a challenge.

First, he pointed me to using the browser console dev tool to run JSON.stringify(wp.data.select( 'core/block-editor' ).getSelectedBlock().attributes); and the output of this helped us identify the structure a bit better:

{"hasFixedLayout":false,"caption":"","head":[],"body":[{"cells":[{"content":"Director","tag":"td"},{"content":"","tag":"td"}]},{"cells":[{"content":"Producer","tag":"td"},{"content":"","tag":"td"}]},{"cells":[{"content":"Actors","tag":"td"},{"content":"","tag":"td"}]}],"foot":[]}

We then took a shortcut and used json_decode in our register_post_type function which worked too:

'template' => array(
            array( 'core/table', json_decode( '{"hasFixedLayout":false,"caption":"","head":[],"body":[{"cells":[{"content":"Director","tag":"td"},{"content":"","tag":"td"}]},{"cells":[{"content":"Producer","tag":"td"},{"content":"","tag":"td"}]},{"cells":[{"content":"Actors","tag":"td"},{"content":"","tag":"td"}]}],"foot":[]}' )),
),

After that, I worked through and converted the above into the PHP structure.

All I can say is thank goodness for teenagers and THANK YOU CHARLIE!

ps he’s available for intern work in the summer holidays 🙂

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on E-mailShare on WhatsApp

About Jo Waltham

Jo Waltham is the founder of Callia Web and is passionate about helping small business owners and bloggers with their websites and online marketing. Connect with Jo and the rest of the Callia Web team on Twitter or Facebook. Alternatively send us a message.

Liked this post? Subscribe to get our next post direct to your inbox.

  • Please enter your email address if you would like us to contact you by email with information about our services which we feel may be of interest to you. We will process your data in accordance with our privacy notice. You may withdraw this consent at any time by clicking the unsubscribe link in any message we send, or by emailing hello@calliaweb.co.uk.
Previous Post: « old tatty book What should you do about your outdated website content?

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Ready to take your project to the next step?

Give us a call, we’re here to discuss what your project needs.

Let’s get started

Contact us

Telephone: 01672 666001 / 666002

Email: hello@calliaweb.co.uk

  • Facebook
  • Twitter
  • Instagram

Quick links

Digital toolkits

Services

Our work

Testimonials

Blog

Popular posts

Using headings in WordPress

Accessibility basics

Image sizes and aspect ratios

Making images equal size

Beginner’s guide to Analytics

Legal

Privacy policy

Terms of service

Company number: 08316519

VAT number: GB204336250

Registered address: Bowman House, Royal Wootton Bassett, Wiltshire, SN4 7DB

Copyright © 2022 · Callia Web Ltd · All Rights Reserved