Skip to content

Instantly share code, notes, and snippets.

@richtabor richtabor/color-classes.php Secret
Last active Jul 9, 2018

Embed
What would you like to do?
<?php
/**
* Add custom colors to Gutenberg.
*/
function tabor_gutenberg_colors() {
// Retrieve the accent color fro the Customizer.
$accent = get_theme_mod( 'accent_color', '#fff000' );
// Build styles.
$css = '';
$css .= '.has-accent-color { color: ' . esc_attr( $accent ) . ' !important; }';
$css .= '.has-accent-background-color { background-color: ' . esc_attr( $accent ) . '; }';
return wp_strip_all_tags( $css );
}
<?php
/**
* Customizer.
*
* @param WP_Customize_Manager $wp_customize the Customizer object.
*/
function tabor_customize_register( $wp_customize ) {
$wp_customize->add_setting(
'accent_color', array(
'default' => '#fff000',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize, 'accent_color', array(
'label' => esc_html__( 'Accent Color', '@@textdomain' ),
'description' => esc_html__( 'Add a color to use within the Gutenberg editor color palette.', '@@textdomain' ),
'section' => 'colors',
)
)
);
}
add_action( 'customize_register', 'tabor_customize_register', 11 );
<?php
/**
* Enqueue theme styles within Gutenberg.
*/
function tabor_gutenberg_styles() {
// Load the theme styles within Gutenberg.
wp_enqueue_style( 'tabor-gutenberg', get_theme_file_uri( '/assets/css/gutenberg.css' ), false, '@@pkg.version', 'all' );
// Add custom colors to Gutenberg.
wp_add_inline_style( 'tabor-gutenberg', tabor_gutenberg_colors() );
}
add_action( 'enqueue_block_editor_assets', 'tabor_gutenberg_styles' );
<?php
/**
* Enqueue theme styles.
*/
function tabor_styles() {
// Load theme styles.
wp_enqueue_style( 'tabor-style', get_theme_file_uri( '/style.css' ), false, '@@pkg.version', 'all' );
// Add custom colors to the front end.
wp_add_inline_style( 'tabor-style', tabor_gutenberg_colors() );
}
add_action( 'wp_enqueue_scripts', 'tabor_styles' );
<?php
/**
* Advanced Gutenberg block features that require opt-in support in the theme.
*/
function tabor_gutenberg_color_palette() {
/**
* Custom colors for use in the editor.
*
* @link https://wordpress.org/gutenberg/handbook/reference/theme-support/
*/
add_theme_support(
'editor-color-palette',
array(
'name' => esc_html__( 'Gutenberg Accent', '@@textdomain' ),
'slug' => 'gutenberg-accent',
'color' => esc_html( get_theme_mod( 'accent_color', '#fff000' ) ),
)
);
}
add_action( 'after_setup_theme', 'tabor_gutenberg_color_palette' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.