How to Create Smaller Buttons for the Block Editor (Gutenberg)

One of the shortcomings of the WordPress default button blocks is the size variation. There is none. Sometimes the buttons are too large for some situations and sometimes they lack padding and typography controls. While the typography controls are coming pretty soon, buttons can be extended easily.

Following the Gutenberg Handbook, I have created a small plugin – and accompanying code samples – to create addtional button sizes/options without relying on another block plugin.

Custom Block Editor Button Styles
Custom Block Editor Button Styles

buttons.js

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

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



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



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



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



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

buttons.css

The buttons.css file is enqueued to load for both areas, the back-end (the editor) and the front-end. See sample styles for the buttons below, including the regular and the outline version of the buttons. I mostly play with the font size and the padding, however more visual effects can be added, such as borders, clipped corners, hover effects, transitions and more.

.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: 12px;
    padding: 4px 8px;
}



.is-style-tiny-button .wp-block-button__link,
.wp-block-button.is-style-tiny-button .wp-block-button__link, 
.is-style-tiny-outline-button .wp-block-button__link,
.wp-block-button.is-style-tiny-outline-button .wp-block-button__link {
    font-size: 10px;
    padding: 4px 8px;
}



.is-style-pressable-button .wp-block-button__link,
.wp-block-button.is-style-pressable-button .wp-block-button__link, 
.is-style-tiny-pressable-button .wp-block-button__link,
.wp-block-button.is-style-tiny-pressable-button .wp-block-button__link {
    padding: 16px 24px;
    font-size: 22px;
    text-decoration: none;
    color: #fff;
    position: relative;
    display: inline-block;
}



.is-style-pressable-button .wp-block-button__link:active,
.wp-block-button.is-style-pressable-button .wp-block-button__link:active, 
.is-style-tiny-pressable-button .wp-block-button__link:active,
.wp-block-button.is-style-tiny-pressable-button .wp-block-button__link:active {
    transform: translate(0px, 5px);
    box-shadow: 0px 1px 0px 0px;
}



.is-style-plastic-button .wp-block-button__link,
.wp-block-button.is-style-plastic-button .wp-block-button__link, 
.is-style-tiny-plastic-button .wp-block-button__link,
.wp-block-button.is-style-tiny-plastic-button .wp-block-button__link {
    text-decoration: none;
    padding: 10px 30px;
    display: inline-block;
    position: relative;
    border: 1px solid rgba(0,0,0,0.21);
    border-bottom: 4px solid rgba(0,0,0,0.21);
    border-radius: 4px;
    text-shadow: 0 1px 0 rgb(0 0 0 / 15%);
}



.is-style-minimal-button .wp-block-button__link,
.wp-block-button.is-style-minimal-button .wp-block-button__link, 
.is-style-tiny-minimal-button .wp-block-button__link,
.wp-block-button.is-style-tiny-minimal-button .wp-block-button__link {
    padding: 1.2rem 2.4rem;
    line-height: 1;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 26%);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    font-size: 15px;
}

functions.php
(or your custom functionality plugin)

Custom Block Editor Button Styles
Custom Block Editor Button Styles
/**
 * Extend Gutenberg Buttons
 */

// Enqueue JS/CSS for the buttons block (front-end)
function mdlui_enqueue() {
    wp_enqueue_script('mdlui-buttons', plugins_url('/blocks/buttons.js', __FILE__), ['wp-blocks'], MDLUI_VERSION, true);
    wp_enqueue_style('mdlui-buttons', plugins_url('/assets/css/style.css', __FILE__), [], MDLUI_VERSION);
}

add_action('enqueue_block_assets', 'mdlui_enqueue');
	
// Enqueue block styles for editor (back-end)
function mdlui_editor_enqueue() {
    wp_enqueue_style('mdlui-buttons', plugins_url('/assets/css/style.css', __FILE__));
}

add_action('enqueue_block_editor_assets', 'mdlui_editor_enqueue');

See how easy it is to add more button styles? Even with typography controls, I still want more control over borders, shadows and most importantly hover effects.

Before having this option, I was using my own button library – Thin UI – which I’ll convert to button styles in one of my upcoming WordPress plugins, Modern Design Library UI, and also for my client theme, Saturn.

πŸ‘‹ Added by Ciprian on Monday, April 26, 2021 in Blog. Last modified on Saturday, April 24, 2021.

4 comments on “How to Create Smaller Buttons for the Block Editor (Gutenberg)

  1. Good to see you’re using the gutenberg editor! :D

    FYI: You could also register block styles through PHP instead of JS, as you’re already setting up a functions.php, you may as well put it in there.

    https://developer.wordpress.org/reference/functions/register_block_style/

    1. That is actually what I’m doing, registering them in PHP. The last code snippet is a PHP snippet. It’s not functions.php, though, it’s a theme helper file, but the idea is the same.

    1. You are right, but these buttons are already a native part of the block editor. I am only extending them.

      I haven’t gotten around to building them in React, and I probably never will, so this is fine for me.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy