Restrict Button Block Colors to Brand Colors
Gives the Button block its own small palette of brand colors and removes the custom color picker for it, so every button on the site stays on-brand.
Opens WPIDE on
Code
// Colors allowed for buttons: slug => [name, hex].
$wpide_button_colors = array(
'wpide-btn-primary' => array( 'Primary', '#1d4ed8' ),
'wpide-btn-secondary' => array( 'Secondary', '#111827' ),
'wpide-btn-light' => array( 'Light', '#ffffff' ),
);
add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) use ( $wpide_button_colors ) {
$palette = array();
foreach ( $wpide_button_colors as $slug => $color ) {
$palette[] = array( 'slug' => $slug, 'name' => $color[0], 'color' => $color[1] );
}
return $theme_json->update_with( array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'settings' => array(
'blocks' => array(
'core/button' => array(
'color' => array(
'palette' => $palette,
'custom' => false,
'customGradient' => false,
'defaultPalette' => false,
),
),
),
),
) );
} );Notes
Other blocks keep the full theme palette.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.