Creating smaller buttons for Gutenberg

This week I ran into a practical problem with WordPress’ default button blocks being simply too large for certain situations. Fortunately, extending Gutenberg blocks isn’t too difficult. Following the Gutenberg Handbook I’ll be adding to my existing files. These files have been enqueued previously to my theme.

  • myguten.js
  • blocks.css

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: 'rounded-small',
    label: 'Rounded Small'
} );

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

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'squared-small',
    label: 'Squared Small'
} );
Button Style Choices
The new buttons should show up in the block editor Styles accordion.

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 margins.

/* *
 * Button Blocks
 * */

.is-style-outline-small,
.is-style-outline-small .wp-block-button__link {
	background-color: transparent;
}

.is-style-squared-small,
.is-style-squared-small .wp-block-button__link {
	border-radius: 0;
}

.is-style-rounded-small,
.is-style-rounded-small .wp-block-button__link,
.is-style-outline-small,
.is-style-outline-small .wp-block-button__link,
.is-style-squared-small,
.is-style-squared-small .wp-block-button__link {
	font-size: 0.8rem;
	margin-bottom: 0.5rem;
	padding: 0.5rem;
}

Results

Three button styles
Block Editor: Three new smaller versions of Gutenberg’s default button design in the WordPress post editor.
buttons on the front end of th website
Live Website: The buttons have a similar appearance on the front end of the website.