Gutenberg as a design system (part 1)
One of the things I've found the most intriguing about Gutenberg is the ability to create variations of a given element and build the basic components of design systems. From there we can also build what Brad Frost calls molecules, compositions of one or more elements that are used together. This post will explore how to create variations of existing blocks and how to create composite blocks for our end users. The examples below will only work when Gutenberg is in visual mode and will not work in the classic editor or when Gutenberg is in HTML mode. ## Block Variations Variations are different styles or variations for a given component. The idea is that we don't need to create custom blocks and then style them, we can use CSS to change the appearance of default blocks to suit our needs. ### Client Side The quickest way to create block variations is to use client-side techniques and let the browser do all the work. This takes the following steps: 1. Define the block variations in the Javascript file we enqueued, `block-variations.js` - If necessary we remove existing custom styles from the elements we're working on 2. Enqueue the script in `index.php` 3. Create the variations in `block-variations.js` 4. Enqueue `block-variations.css` - Add styles for the variations in `block-variations.css` Enqueueing the script uses the `enqueue_block_editor_assets` action and a callback function as shown below. Note that the enqueue script also list dependencies that must be loaded before the script we're enqueueing. This makes sure we have no errors down the line. ```php 'lede-paragraph', 'label' => 'First Paragraph', 'style_handle' => 'variations-style', ) ), // Blockquote variations register_block_style( 'core/quote', array( 'name' => 'fancy-quote', 'label' => 'Fancy Quote', 'style_handle' => 'variations-style', ) ), register_block_style( 'core/quote', array( 'name' => 'top-bottom-quote', 'label' => 'Top and Bottom', 'style_handle' => 'variations-style', ) ), register_block_style( 'core/quote', array( 'name' => 'red-quote', 'label' => 'Red Quote', 'style_handle' => 'variations-style', ) ) ); ``` These types of customizations give us a full-powered design system on top of whatever custom blocks we create. In the next post, we'll discuss templating using blocks and what new custom post types may look like