Use GeneratePress Button Defaults

Some users wish to use the colors they define in GeneratePress for their buttons.

One way to do this is to add CSS to your site that applies those colors to the GenerateBlocks buttons.

We can do that like this:

// Build our CSS.
function tu_gp_gb_button_styling_css() {
	$color_settings = wp_parse_args(
		get_option( 'generate_settings', array() ),
		generate_get_color_defaults()
	);

    return sprintf(
		'.gb-button-wrapper .gb-button, .gb-button-wrapper .gb-button:visited {
			background-color: %1$s;
			color: %2$s;
			padding: 10px 20px;
			border: 0;
			border-radius: 0;
		}

		.gb-button-wrapper .gb-button:hover, .gb-button-wrapper .gb-button:active, .gb-button-wrapper .gb-button:focus {
			background-color: %3$s;
			color: %4$s;
		}',
		$color_settings['form_button_background_color'],
		$color_settings['form_button_text_color'],
		$color_settings['form_button_background_color_hover'],
		$color_settings['form_button_text_color_hover']
	);
}

// Add our CSS to the frontend.
add_action( 'wp_enqueue_scripts', function() {
	wp_add_inline_style( 'generate-style', tu_gp_gb_button_styling_css() );
}, 100 );

// Add our CSS to the editor.
add_filter( 'block_editor_settings_all', function( $settings ) {
	$settings['styles'][] = array( 'css' => tu_gp_gb_button_styling_css() );

	return $settings;
} );

// Remove Button styling from newly added Button blocks.
add_filter( 'generateblocks_default_block_styles', function( $styles ) {
	$styles['button']['backgroundColor'] = '';
	$styles['button']['textColor'] = '';
	$styles['button']['backgroundColorHover'] = '';
	$styles['button']['textColorHover'] = '';
	$styles['button']['paddingTop'] = '';
	$styles['button']['paddingRight'] = '';
	$styles['button']['paddingBottom'] = '';
	$styles['button']['paddingLeft'] = '';

	return $styles;
} );

This will create new CSS that targets GB Button blocks with the GP colors/padding. It will still allow you to design your GB Buttons using the settings if you want.