Display different gutenberg template from selected post attributes

Question

According to https://developer.wordpress.org/block-editor/developers/block-api/block-templates/, I have managed to add a template to the custom post type with the following code -

/**
 * Portfolio post template.
 */
function portfolio_post_template() {

  $template = [
    ['template_path/block'],
  ];

  $post_type_object = get_post_type_object( 'portfolio' );
  $post_type_object->template = $template;
}
add_action( 'init', 'portfolio_post_template' );

Here comes the issue, I am trying to display different layout according to what user has selected in the layout dropdown under post attributes section, but the action hook is with init, there isn't any information about what post template has been selected at that point of time which allow me to set a condition to use different gutenberg template.

Is there other better hook to use instead of init? Or is there a different way to set gutenberg template while having the information of selected post template?

Answer 1

There is an experimental Innerblocks feature (__experimentalTemplateOptions) that Im not sure if also affects the post template.

In any case I think this won't solve your issue which is that you want the layout to change even after an initial selection of template. What happens in this scenario is that the editor might have the blocks with user entered content or even extra blocks. So changing the template might replace these. Considering that, a way to update the current blocks with a new template could be:

Update the editor settings with the new template value

wp.data.dispatch("core/block-editor").updateSettings({ template:new_template })

then synchronize the template

wp.data.dispatch("core/block-editor").synchronizeTemplate()

If you check the reducer case for SYNCHRONIZE_TEMPLATE the above is actually the same as doing:

const blocks = wp.data.select("core/block-editor").getBlocks();
const updatedBlockList = wp.blocks.synchronizeBlocksWithTemplate( blocks, new_template );

wp.dispatch("core/block-editor").resetBlocks( updatedBlockList );

I haven't tested the code but I think the parameters passed are correct. Hope this points you to solve the problem.