Function — Gutenberg block customization - martindubenet/Wordpress GitHub Wiki

The following blocks of code will allow customisation of Gutenberg's Block Options from the aside menu.

The exemple below is suited for a parent theme but if in a child theme, where function gutenberg_block_settings()

Read more about Theme Support for developpers

Child theme

Just paste this in your child theme's « /functions.php » page:

/**
 * Customizing Gutenberg's Block Options
 * @link https://developer.wordpress.org/block-editor/developers/themes/theme-support/
 */
function gutenberg_block_settings() {
	
	// Text
	add_theme_support( 'editor-font-sizes',
		array(

			array(
				'name' => __('Default text', 'thisTheme'),
				'slug' => 'base',
				'size' => 16
			),
			array(
				'name' => __('Heading 2 ↑↑↑', 'thisTheme'),
				'slug' => 'heading-level-2',
				'size' => 32
			),
			array(
				'name' => __('Heading 3 ↑↑', 'thisTheme'),
				'slug' => 'heading-level-3',
				'size' => 22
			),
			array(
				'name' => __('Heading 4 ↑', 'thisTheme'),
				'slug' => 'heading-level-4',
				'size' => 20
			),
			array(
				'name' => __('Small ↓', 'thisTheme'),
				'slug' => 'small',
				'size' => 14
			),
			array(
				'name' => __('X-small ↓↓', 'thisTheme'),
				'slug' => 'smallest',
				'size' => 12
			)
		)
	);

	// Colors
	add_theme_support( 'editor-color-palette',
		array(

			array(
				'name' => 'Primary',
				'slug' => 'primary',
				'color' => '#a4403d'
			),
			array(
				'name' => 'Secondary',
				'slug' => 'secondary',
				'color' => '#9b8c6e'
			),
			array(
				'name' => 'Dark (text)',
				'slug' => 'dark',
				'color' => '#313131'
			),
			array(
				'name' => 'Gray Darker',
				'slug' => 'gray-darker',
				'color' => '#707070'
			),
			array(
				'name' => 'Gray Dark',
				'slug' => 'gray-dark',
				'color' => '#707070'
			),
			array(
				'name' => 'Gray',
				'slug' => 'gray',
				'color' => '#D1CDCD'
			),
			array(
				'name' => 'Gray Light',
				'slug' => 'gray-light',
				'color' => '#EFEFEF'
			),
			array(
				'name' => 'Gray Lighter',
				'slug' => 'gray-lighter',
				'color' => '#FAFAFA'
			),
			array(
				'name' => 'White',
				'slug' => 'white',
				'color' => '#FFFFFF'
			),
			array(
				'name' => 'Info alert',
				'slug' => 'alert-info',
				'color' => '#32ACF3'
			),
			array(
				'name' => 'Success alert',
				'slug' => 'alert-success',
				'color' => '#28A745'
			),
			array(
				'name' => 'Danger alert',
				'slug' => 'alert-danger',
				'color' => '#DC3545'
			),
			array(
				'name' => 'Warning alert',
				'slug' => 'alert-warning',
				'color' => '#FFC107'
			)
		)
	);
	
}

add_action( 'after_setup_theme', 'gutenberg_block_settings' );
?>

Parent theme

If in a parent theme, you should use Wordpress « /inc » repository to store your function. Then import it using the require get_the_template_directory() method as shown below.

/functions.php

/**
 * Customizing Gutenberg's Block Options
 * @link https://developer.wordpress.org/block-editor/developers/themes/theme-support/
 */
require get_template_directory() . '/inc/gutenberg-block-settings.php';

/inc/gutenberg-block-settings.php

<?php
/**
 * Customizing Gutenberg's Block Options
 * @link https://developer.wordpress.org/block-editor/developers/themes/theme-support/
 */
function gutenberg_block_settings() {
  ...(copy/paste the function here)...
}
add_action( 'init', 'gutenberg_block_settings' );
?>

CSS class

/** ------------------
* PIGMENTS
*/

// colors
$pigment_primary: 	#2a7fff;
$pigment_secondary: 	#9061D4; // alternative accent color
// shades
$pigment_light: 	#fff;
$pigment_dark: 		#313131;
$pigment_grayDarker: 	#707070;
$pigment_grayDark: 	#a8a8a8;
$pigment_gray: 		#ccc;
$pigment_grayLight: 	#efefef;
$pigment_grayLighter: 	#fafafa;
// alerts
$pigment_info: 		#32acf3;
$pigment_succes: 	#28a745;
$pigment_warning: 	#ffc107;
$pigment_danger: 	#dc3545;


/** ------------------
 * GUTENBERG EDITOR
 * refers to function `gutenberg_block_settings()`
 */

.has-background {
	.has-primary-background-color 		{ background-color: $pigment_primary; }
	.has-dark-background-color 		{ background-color: $pigment_dark; }
	.has-gray-darker-background-color 	{ background-color: $pigment_grayDarker; }
	.has-gray-dark-background-color 	{ background-color: $pigment_grayDark; }
	.has-gray-background-color 		{ background-color: $pigment_gray; }
	.has-gray-light-background-color 	{ background-color: $pigment_grayLight; }
	.has-gray-lighter-background-color 	{ background-color: $pigment_grayLighter; }
	.has-white-background-color 		{ background-color: $white; }
}
.has-text-color {
	.has-primary-color 			{ color: $pigment_primary; }
	.has-dark-color 			{ color: $pigment_dark; }
	.has-gray-darker-color 			{ color: $pigment_grayDarker; }
	.has-gray-dark-color 			{ color: $pigment_grayDark; }
	.has-gray-color 			{ color: $pigment_gray; }
	.has-gray-light-color 			{ color: $pigment_grayLight; }
	.has-gray-lighter-color 		{ color: $pigment_grayLighter; }
	.has-white-color 			{ color: $white; }
}