{"id":5678,"date":"2019-05-31T13:21:30","date_gmt":"2019-05-31T11:21:30","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=5678"},"modified":"2020-02-09T11:09:37","modified_gmt":"2020-02-09T10:09:37","slug":"define-block-templates","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/define-block-templates-5678\/","title":{"rendered":"Define block templates for new pages, posts, and custom post types"},"content":{"rendered":"\n

WordPress\u2019 block editor comes with the feature of block templates. This allows us to defined a set of blocks that will be present in the content of new pages, posts and\/or custom post types. This post shows you how to use that functionality and how to use reusable blocks in templates.<\/p>\n\n\n\n\n\n\n\n

What are block templates good for?<\/h2>\n\n\n\n

Let us assume, editors of a website need to insert the same blocks on almost all pages they create, for example, a group block containing a heading block.<\/p>\n\n\n\n

For those cases, it is helpful to directly have these blocks in the content when creating the page, instead of the default paragraph block.<\/p>\n\n\n\n

And for this, we have block templates.<\/p>\n\n\n\n

Create a block template<\/h2>\n\n\n\n

Post type objects have an attribute template<\/code>, that accepts an array of blocks.<\/p>\n\n\n\n

To add a template to an existing post type, we hook into the init<\/code> action and modify the wanted object. The code for an easy block template for pages can look like this:<\/p>\n\n\n

\/**\n * Add group block to new pages.\n * \n * @link<\/span> https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-templates\/\n *\/<\/span>\nfunction<\/span> slug_post_type_template<\/span>()<\/span> <\/span>{\n\t$page_type_object = get_post_type_object( 'page'<\/span> );\n\t$page_type_object->template = [\n\t\t[ 'core\/group'<\/span>, [], [\n\t\t\t[ 'core\/paragraph'<\/span> ],\n\t\t] ],\n\t];\n}\nadd_action( 'init'<\/span>, 'slug_post_type_template'<\/span> );<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Like said, we use the init<\/code> action for our function. Inside the function, we get the post type object of pages and add a block array as the template.<\/p>\n\n\n\n
This array contains one or more arrays for the first-level-blocks (in our case, a group block that is going to come with WordPress 5.3). With the second value of a block array, we could set attributes of the block, that could be the background and text color for the group block. We leave that empty for now.<\/p>\n\n\n\n
The third value is an optional array of additional block arrays, which are added inside the parent block. Our example adds a paragraph block inside the group block. That works \u2013 of course \u2013 only for blocks that allow inner blocks.<\/p>\n\n\n\n
Set block attributes<\/h3>\n\n\n\n
I already mentioned it: it is possible to set attributes of blocks with the second value of a block array. To set a background color for the group block, we pass the slug of a color that was added via an add_theme_support()<\/code> call like described in the theme support reference on developer.wordpress.org<\/a>:<\/p>\n\n\n
\/**\n * Add group block to new pages.\n * \n * @link<\/span> https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-templates\/\n *\/<\/span>\nfunction<\/span> slug_post_type_template<\/span>()<\/span> <\/span>{\n\t$page_type_object = get_post_type_object( 'page'<\/span> );\n\t$page_type_object->template = [\n\t\t[ 'core\/group'<\/span>, [ 'backgroundColor'<\/span> => 'light'<\/span> ], [\n\t\t\t[ 'core\/paragraph'<\/span> ],\n\t\t] ],\n\t];\n}\nadd_action( 'init'<\/span>, 'slug_post_type_template'<\/span> );<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Use reusable blocks in block templates<\/h3>\n\n\n\n
If you want to use a reusable block in block templates: that is possible, too. A reusable block has the type core\/block<\/code> and gets the ID of the block post for the ref<\/code> attribute (reusable blocks are stored via a custom post type).<\/p>\n\n\n\n
So we need the ID of the post and use it in the block template. That could look like this:<\/p>\n\n\n
$unsere_leistungen_block = new<\/span> WP_Query(\n\t[\n\t\t'post_type'<\/span> => 'wp_block'<\/span>,\n\t\t'title'<\/span> => 'Services'<\/span>,\n\t]\n);\n\nif<\/span> ( ! empty<\/span>( $unsere_leistungen_block->posts ) ) {\n\t$page_type_object->template = [\n\t\t[ 'core\/block'<\/span>, [ 'ref'<\/span> => $unsere_leistungen_block->posts[0<\/span>]->ID] ],\n\t];\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
First, we search for the blocks with the title \u00bbServices\u00ab via a WP_Query<\/code>, check if we got blocks and use the ID of the first block for the ref<\/code> attribute of the core\/block<\/code> block we use in the template.<\/p>\n\n\n\n
If the title of the block changes, you need to adjust the code.<\/p>\n\n\n\n
Use block template for posts and custom post types<\/h3>\n\n\n\n
With the same procedure, we can define templates for posts and custom post types. For that, we adjust the parameter of the get_post_type_object()<\/code> call, for example, to post<\/code> instead of page<\/code>, if we want to create a template for posts.<\/p>\n\n\n\n
If you want to set a template for your own custom post type, you can do that directly when calling register_post_type()<\/code> \u2013 the function accepts a template<\/code> key in the parameter array, that gets the block arrays as a value.<\/p>\n\n\n\n
An example of that and more can be found on the templates page in the block editor reference<\/a>. There you can also see how to lock a template so that the user cannot remove or add blocks, or move them around.<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress\u2019 block editor comes with the feature of block templates. This allows us to defined a set of blocks that will be present in the content of new pages, posts and\/or custom post types. This post shows you how to use that functionality and how to use reusable blocks in templates.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[115],"tags":[],"class_list":["post-5678","post","type-post","status-publish","format-standard","hentry","category-wordpress-snippets"],"wp-worthy-pixel":{"ignored":false,"public":"c8e08dae88794195a1977f80d37bd9bb","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/c8e08dae88794195a1977f80d37bd9bb"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=5678"}],"version-history":[{"count":5,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5678\/revisions"}],"predecessor-version":[{"id":5951,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5678\/revisions\/5951"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=5678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=5678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=5678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}