Egna anpassade färgpaletter för Gutenberg

Färgpaletter är samlingar av färgrutor i redigerarens sidofält som låter dig välja bland fördefinierade färger och tillämpa dem på element på din sida. Begränsa vad användare kan välja själva och tillåt endast färger som är anpassade efter ditt WordPress Tema.

Definiera din egen färgpalett för Gutenberg Sidredigerare

Lägg till följande PHP kod manuellt i functions.php

function entex_child_gutenberg_palette(){
	
	add_theme_support('editor-color-palette', 
		array(
			array(
				'name'  => 'White',
				'slug'  => 'wellness-white',
				'color' => '#ffffff',
			),
			array(
				'name'  => 'Gray',
				'slug'  => 'wellness-gray',
				'color' => '#f5f5f5',
			),
			array(
				'name'  => 'Black',
				'slug'  => 'wellness-black',
				'color' => '#333223',
			),
			array(
				'name'  => 'Purple',
				'slug'  => 'wellness-purple',
				'color' => '#7e2447',
			),
			array(
				'name'  => 'Purple transparent',
				'slug'  => 'wellness-purple-transparent',
				'color' => '#7e2447ba',
			),
			array(
				'name'  => 'Green',
				'slug'  => 'wellness-green',
				'color' => '#358282',
			),
			array(
				'name'  => 'Green transparent',
				'slug'  => 'wellness-green-transparent',
				'color' => '#358282ba',
			)
		)
	);
	
	$add = '';
	
	$add .= '.has-wellness-purple-color { color: #7e2447 !important;} ';
	$add .= '.has-wellness-purple-background-color { background-color: #7e2447 !important;} ';
	
	$add .= '.has-wellness-purple-transparent-color { color: #7e2447ba !important;} ';
	$add .= '.has-wellness-purple-transparent-background-color { background-color: #7e2447ba !important; } ';
	
	$add .= '.has-wellness-green-color { color: #358282 !important;} ';
	$add .= '.has-wellness-green-background-color { background-color: #358282 !important;} ';
	
	$add .= '.has-wellness-green-transparent-color { color: #358282ba !important;} ';
	$add .= '.has-wellness-green-transparent-background-color { background-color: #358282ba !important;} ';
	
	/* defaults */
	
	/* note, added transparent on white background */
	$add .= '.has-wellness-white-color { color: #ffffff !important;} ';
	$add .= '.has-wellness-white-background-color { background-color: #fffffff5 !important;} ';
	
	$add .= '.has-wellness-gray-color { color: #f5f5f5 !important;} ';
	$add .= '.has-wellness-gray-background-color { background-color: #f5f5f5 !important;} ';
	
	$add .= '.has-wellness-black-color { color: #333223 !important;} ';
	$add .= '.has-wellness-black-background-color { background-color: #333223 !important;} ';
	
	entex_STL($add, __FILE__);
}
add_action('after_setup_theme', 'entex_child_gutenberg_palette');

Paragraph