Creating smaller buttons for Gutenberg

Often I find WordPress’ default button blocks are too large for some situations. Fortunately, extending Gutenberg blocks isn’t too difficult. Following the Gutenberg Handbook I’ve created short video and code samples to create addtional smaller button options without relying on a plugin.

For this Child Theme based on the upcoming Twenty Twenty-One theme

myguten.js

The following will register three new blocks allowing them to be selected under the Button Block’s Styles accordion.

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'small-button',
    label: 'Small'
} );

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'small-outline-button',
    label: 'Small Outline'
} );

blocks.css

First, I create some overrides for the editor and front end of the website, my blocks.css file is enqueued to load for both areas. Next, I add button specific CSS styles for font size, padding and appearance.

/**
 * Button Blocks
 */

.is-style-small-button .wp-block-button__link,
.wp-block-button.is-style-small-button .wp-block-button__link, 
.is-style-small-outline-button .wp-block-button__link,
.wp-block-button.is-style-small-outline-button .wp-block-button__link {
	font-size: 0.7em;
	padding: 0.25em !important;
}

.is-dark-theme .wp-block-button.is-style-small-outline-button .wp-block-button__link {
	color: var(--global--color-dark-gray);
}

.wp-block-button.is-style-small-outline-button .wp-block-button__link:not(.has-background):not(.has-text-color) {
	background: transparent;
	color: var(--button--color-background);
	border-color: var(--button--color-background);
}

.wp-block-button.is-style-small-outline-button .wp-block-button__link.has-text-color,
.wp-block-button.is-style-small-outline-button .wp-block-button__link.has-background.has-text-color {
	border-color: currentColor;
}

.wp-block-button.is-style-small-outline-button .wp-block-button__link:not(.has-background) {
	background: transparent;
}

.wp-block-button.is-style-small-outline-button .wp-block-button__link:active,
.wp-block-button.is-style-small-outline-button .wp-block-button__link:hover {
	color: var(--button--color-text) !important;
	background: var(--button--color-background) !important;
	border: var(--button--border-width) solid var(--button--color-background) !important;
}

functions.php

<?php
/**
 * Enqueue Parent Theme Styles
 */

// Check if function already exists before enqueue
if ( ! function_exists( 'jd_twenty_twenty_one_child' ) ) {

	// Enqueue Child Theme CSS
	function jd_twenty_twenty_one_child() {
		wp_enqueue_style( 'twenty-twenty-one-child', get_stylesheet_uri(), 
			array( 'twenty-twenty-one-style' ), // handle of parent theme styles to enqueue after
			wp_get_theme()->get('Version')
		);
	}
add_action( 'wp_enqueue_scripts', 'jd_twenty_twenty_one_child' );
}

/**
 *	Extend Gutenberg Blocks
 */
// Check if function already exists before enqueue
if ( ! function_exists( 'jd_myguten_enqueue') ) {

	// Enqueue scripts and css for blocks
	function jd_myguten_enqueue() {
		wp_enqueue_script( 'myguten-script',
		get_stylesheet_directory_uri() . '/blocks/myguten.js',
		array( 'wp-blocks' ), // handle of parent theme block styles to enqueue after
		wp_get_theme()->get('Version')
		);

		wp_enqueue_style( 'additional-blocks',  
		get_stylesheet_directory_uri() . '/css/blocks.css',
		array( 'twenty-twenty-one-style' ), // handle of parent theme styles to enqueue after
		wp_get_theme()->get('Version')
		);	

	}
	add_action( 'enqueue_block_assets', 'jd_myguten_enqueue' );
	
	// Enqueue block styles for editor
	function jd_myguten_editor_enqueue() {
		wp_enqueue_style( 'additional-editor-blocks',  
		get_stylesheet_directory_uri() . '/css/blocks.css',
		);	
	}
	add_action( 'enqueue_block_editor_assets', 'jd_myguten_editor_enqueue' );
}