{"id":6010,"date":"2020-08-06T08:06:00","date_gmt":"2020-08-06T06:06:00","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=6010"},"modified":"2020-08-05T16:07:31","modified_gmt":"2020-08-05T14:07:31","slug":"block-variations-gutenberg","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/block-variations-gutenberg-6010\/","title":{"rendered":"Create block variations in Gutenberg"},"content":{"rendered":"\n

WordPress 5.4 introduced the Block Variations API<\/a><\/em>. The API can be used to create variations of blocks, which get listed as own blocks in the block inserter. An example from core are the social media buttons, that are all variations of the social link block<\/a>.<\/p>\n\n\n\n

A variation can predefine attributes of the block, in case of the social link block, for example, each variation defines the service<\/code> attribute with the identifier of the specific social network.<\/p>\n\n\n\n

Like shown in the dev post on WordPress.org, variations are created like that:<\/p>\n\n\n

variations: [\n    {\n        name<\/span>: 'wordpress'<\/span>,\n        isDefault<\/span>: true<\/span>,\n        title<\/span>: __( 'WordPress'<\/span> ),\n        description<\/span>: __( 'Code is poetry!'<\/span> ),\n        icon<\/span>: WordPressIcon,\n        attributes<\/span>: { service<\/span>: 'wordpress'<\/span> },\n    },\n    {\n        name<\/span>: 'google'<\/span>,\n        title<\/span>: __( 'Google'<\/span> ),\n        icon<\/span>: GoogleIcon,\n        attributes<\/span>: { service<\/span>: 'google'<\/span> },\n    },\n    {\n        name<\/span>: 'twitter'<\/span>,\n        title<\/span>: __( 'Twitter'<\/span> ),\n        icon<\/span>: TwitterIcon,\n        attributes<\/span>: { service<\/span>: 'twitter'<\/span> },\n    },\n],<\/code><\/div>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
variations<\/code> is a key in the object that is passed to registerBlockType()<\/code>, like title<\/code>, edit<\/code>, attributes<\/code>, et cetera. Each variation gets a name<\/code> and a title<\/code>, which is displayed to the user.<\/p>\n\n\n\n
With scope<\/code>, we can define in which area the variation should be available, but I did not quite understand what the options block<\/code> and inserter<\/code> do. Maybe block<\/code> means that the variation can only be used as part of another block. When leaving that option, both areas are set.<\/p>\n\n\n\n
Currently, the variations do not appear as suggestions when using the \/<\/code> command to add a new block. The pull request<\/a> for that is merged, but part of Gutenberg 8.5, so will not be part of WordPress 5.5, which contains new Gutenberg releases up to 8.4.<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress 5.4 introduced the Block Variations API. The API can be used to create variations of blocks, which get listed as own blocks in the block inserter. An example from core are the social media buttons, that are all variations of the social link block. A variation can predefine attributes of the block, in case […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","lazy_load_responsive_images_disabled":false},"categories":[115],"tags":[],"wp-worthy-pixel":{"ignored":false,"public":"ba72e67a17eb4c6b86ab3aad17176f65","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/ba72e67a17eb4c6b86ab3aad17176f65"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/6010"}],"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=6010"}],"version-history":[{"count":1,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/6010\/revisions"}],"predecessor-version":[{"id":6011,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/6010\/revisions\/6011"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=6010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=6010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=6010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Additionally, an icon can be set, and via attributes<\/code> we can set values for one or more block attributes. isDefault<\/code> specifies with variation should be the default. Moreover, the innerBlocks<\/code> key can be used to fill an InnerBlocks<\/code> component of the block with a set of blocks. That is used, for example, in the columns block<\/a>, to create the different predefined column layouts.<\/p>\n\n\n\n