{"id":156,"date":"2024-03-28T16:50:07","date_gmt":"2024-03-28T19:50:07","guid":{"rendered":"https:\/\/kylekelly.com\/?p=156"},"modified":"2024-03-29T15:57:15","modified_gmt":"2024-03-29T18:57:15","slug":"wordpress-custom-block-bindings-with-block-variations","status":"publish","type":"post","link":"https:\/\/kylekelly.com\/posts\/wordpress-custom-block-bindings-with-block-variations\/","title":{"rendered":"WordPress Custom Source Block Bindings with Block Variations"},"content":{"rendered":"\n

This is a follow up to my first block bindings post<\/a>, and Brian Coords great YouTube video<\/a>.<\/p>\n\n\n\n

Combining custom sources for block bindings with block variations can be a simple and powerful tool.<\/p>\n\n\n\n

Here’s a straightforward example on how they can be beneficial together. With a block theme in the past if you wanted the copyright year in your site footer to stay up to date that would require a custom block which while not too much work, feels excessive, or installing a 3rd party plugin to provide the block which just adds another dependency out of your control.<\/p>\n\n\n\n

Instead let’s register a custom block binding in our theme functions.php or a custom plugin to house the custom code for the website:<\/p>\n\n\n\n

add_action('init', function() {\n\tregister_block_bindings_source( 'namespace\/current-year', array(\n\t\t'label'              => __( 'Current Year', 'namespace' ),\n\t\t'get_value_callback' => function(array $source_args, WP_Block $block_instance, string $attribute_name) {\n\t\t\treturn date('Y');\n\t\t}\n\t) );\n});\t<\/code><\/pre>\n\n\n\n
You’d want to of course swap ‘namespace’ with your projects namespace<\/p>\n\n\n\n
Next let’s register a block variation. Brian in the video above covers how to do it in PHP, but I’ll stick with JavaScript.<\/p>\n\n\n\n
wp.blocks.registerBlockVariation(\n\t\"core\/paragraph\", \/\/ The block type to register the variation for\n\t{\n\t\tname: \"current-year\", \/\/ The name of the variation\n\t\ttitle: \"Current year\", \/\/ The title of the variation\n\t\ticon: \"clock\", \/\/ The icon to use for the variation\n\t\tdescription:\n\t\t\t\"Dynamic block that displays the current year on the frontend of the website\",\n\t\tattributes: {\n\t\t\t\/\/ The default attributes for the variation\n\t\t\tclassName: \"current-year\",\n\t\t\tcontent: \"YYYY\",\n\t\t\tmetadata: {\n\t\t\t\tbindings: {\n\t\t\t\t\tcontent: {\n\t\t\t\t\t\tsource: \"namespace\/current-year\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tisActive: ({ className }) => {\n\t\t\tif (className === undefined) return null;\n\t\t\treturn className.includes(\"current-year\") ? true : null;\n\t\t},\n\t},\n);<\/code><\/pre>\n\n\n\n
That does it. Now in the inserter you have what appears to be a custom block called ‘Current Year’ that inserts ‘YYYY’ into the editor, but on the frontend gets rendered as the current year by using date(‘Y’);<\/p>\n\n\n\n
I’m using this same technique for breadcrumbs, and I’m sure there’s plenty of other use cases as well.<\/p>\n","protected":false},"excerpt":{"rendered":"
This is a follow up to my first block bindings post, and Brian Coords great YouTube video. Combining custom sources for block bindings with block variations can be a simple and powerful tool. Here’s a straightforward example on how they can be beneficial together. With a block theme in the past if you wanted the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[4,9],"_links":{"self":[{"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/posts\/156"}],"collection":[{"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/comments?post=156"}],"version-history":[{"count":6,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/posts\/156\/revisions\/167"}],"wp:attachment":[{"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kylekelly.com\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}