{"id":253833,"date":"2024-07-30T09:54:40","date_gmt":"2024-07-30T09:54:40","guid":{"rendered":"https:\/\/learn.wordpress.org\/?post_type=lesson&#038;p=253833"},"modified":"2024-08-01T14:09:05","modified_gmt":"2024-08-01T14:09:05","slug":"block-variations","status":"publish","type":"lesson","link":"https:\/\/learn.wordpress.org\/lesson\/block-variations\/","title":{"rendered":"Block variations"},"content":{"rendered":"\n<p class=\"sensei-content-description wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Block Variations\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Su5EIT-c_S4?feature=oembed&#038;enablejsapi=1&#038;origin=https:\/\/learn.wordpress.org\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Welcome to this lesson where we dive into extending registered blocks and create alternate versions of a block\u2019s settings.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-0e47273b wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p class=\"wp-block-paragraph\">With this lesson, you will:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<ul class=\"wp-block-list\">\n<li>describe block variations, <\/li>\n\n\n\n<li>differentiate between block variations and block styles, <\/li>\n\n\n\n<li>add the JavaScript file to your theme, and<\/li>\n\n\n\n<li>register a block variation.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is a block variation?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A block variation is an alternative block you can add to your theme using the block variations API. You would use the attributes already assigned to the block you are creating a variation from.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You wouldn&#8217;t require a build process as you can choose to enqueue your custom JavaScript file from functions.php, along with passing through a few dependencies.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can choose to place your block variation within a plugin or within your theme files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you haven&#8217;t already had a chance to take a look at the <em>Beginner WordPress developer learning pathway<\/em>, do check out the module on <em>developing WordPress plugins<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Block variations vs Block styles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">What is the difference between block variations and block styles?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The main difference between a block variation and a block style is that a block style applies a CSS class to the block so it can be styled in an alternative way.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s take a look at an example using the Twenty Twenty-Four theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They have this block style with asterisks. And you see the CSS class is style asterisks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This can be applied to headings, however, it&#8217;s not a block style available to the paragraph block, just the heading block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you click on the insertor and scroll down, you&#8217;ll see an example of block variations. This ships with WordPress core and each one of these embeds is a block variation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To review the entire code, you can take a look on <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/embed\/variations.js\">GitHub<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;d like to learn more about the difference between block variations and block styles, there&#8217;s a great <a href=\"https:\/\/youtu.be\/ICI0GW9vibk?feature=shared\">online workshop<\/a> that you can refer to.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now let&#8217;s add the JavaScript file to your theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can name your JavaScript file block hyphen variations and place it within the JS subfolder under assets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Register block variations<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now let&#8217;s register the block variation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You could use the functions.php file, open up your PHP, use the enqueue block editor assets action hook and use the WP enqueue script function.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You see here that the block variations.js file is being called along with an array of some dependencies.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">add_action( 'enqueue_block_editor_assets', 'themeslug_enqueue_block_variations' );\n\nfunction themeslug_enqueue_block_variations() {\n\twp_enqueue_script(\n\t\t'themeslug-block-variations',\n\t\tget_theme_file_uri( 'assets\/js\/block-variations.js' ),\n\t\tarray( \n\t\t\t'wp-blocks', \n\t\t\t'wp-dom-ready',\n\t\t\t'wp-i18n'\n\t\t),\n\t\twp_get_theme()-&gt;get( 'Version' ),\n\t\ttrue\n\t);\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Next steps<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can learn more about variations by referring to the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/\">block editor handbook<\/a>, or you can take a look at the <a href=\"https:\/\/developer.wordpress.org\/themes\/\">theme handbook<\/a>. And finally, there&#8217;s a great <a href=\"https:\/\/developer.wordpress.org\/news\/2024\/03\/14\/how-to-register-block-variations-with-php\/\">blog post<\/a> available on WordPress.org on their WordPress developer blog.<\/p>\n\n\n<div class=\"sensei-block-wrapper\">\n<div class=\"wp-block-sensei-lms-lesson-actions\"><div class=\"sensei-buttons-container\">\n\n\n\n\n\n<\/div><\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dive into extending registered blocks and create alternate versions of a block\u2019s settings.<\/p>\n","protected":false},"featured_media":260646,"template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_initial_content":"","_new_post":false,"_ef_editorial_meta_checkbox_code-shippet":"","_ef_editorial_meta_checkbox_gh-issue":"","_ef_editorial_meta_checkbox_tut-pass":"","_ef_editorial_meta_checkbox_callout-styling":"","_ef_editorial_meta_checkbox_brand":"","_ef_editorial_meta_checkbox_has-slides-in-browser":"","_ef_editorial_meta_checkbox_has-downloadable-slides":"","_ef_editorial_meta_checkbox_no-slides":"","_ef_editorial_meta_checkbox_included":"","_ef_editorial_meta_checkbox_image-alt-tags":"","expiration_date":"","language":"en_US","_duration":0,"presenter_wporg_username":[],"other_contributor_wporg_username":[],"video_url":"","_lesson_featured":"","_quiz_has_questions":false,"_lesson_complexity":"easy","_lesson_length":10,"_lesson_course":253794,"_lesson_preview":"preview"},"lesson-tag":[],"audience":[35],"level":[36],"show":[],"wporg_wp_version":[],"wporg_included_content":[],"topic":[],"class_list":["post-253833","lesson","type-lesson","status-publish","has-post-thumbnail","hentry","module-block-theme-features","audience-developers","level-intermediate","post"],"is_coteacher":false,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/lessons\/253833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/lessons"}],"about":[{"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/types\/lesson"}],"version-history":[{"count":4,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/lessons\/253833\/revisions"}],"predecessor-version":[{"id":260652,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/lessons\/253833\/revisions\/260652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/media\/260646"}],"wp:attachment":[{"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/media?parent=253833"}],"wp:term":[{"taxonomy":"lesson-tag","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/lesson-tag?post=253833"},{"taxonomy":"audience","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/audience?post=253833"},{"taxonomy":"level","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/level?post=253833"},{"taxonomy":"show","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/show?post=253833"},{"taxonomy":"wporg_wp_version","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/wporg_wp_version?post=253833"},{"taxonomy":"wporg_included_content","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/wporg_included_content?post=253833"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/topic?post=253833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}