Section Styles: Dark and Soft Accent Sections
Adds "Dark section" and "Soft accent section" styles to Group, Columns and Cover blocks, which recolor the background, text, links, headings and buttons inside in one click (WordPress 6.6+).
Opens WPIDE on
Code
add_action( 'init', function () {
if ( version_compare( get_bloginfo( 'version' ), '6.6', '<' ) ) {
return;
}
$blocks = array( 'core/group', 'core/columns', 'core/cover' );
register_block_style( $blocks, array(
'name' => 'wpide-dark-section',
'label' => 'Dark section',
'style_data' => array(
'color' => array( 'background' => '#111827', 'text' => '#f3f4f6' ),
'spacing' => array( 'padding' => array( 'top' => '3rem', 'bottom' => '3rem', 'left' => '1.5rem', 'right' => '1.5rem' ) ),
'elements' => array(
'heading' => array( 'color' => array( 'text' => '#ffffff' ) ),
'link' => array( 'color' => array( 'text' => '#93c5fd' ) ),
'button' => array( 'color' => array( 'background' => '#f9fafb', 'text' => '#111827' ) ),
),
),
) );
register_block_style( $blocks, array(
'name' => 'wpide-accent-section',
'label' => 'Soft accent section',
'style_data' => array(
'color' => array( 'background' => '#eef2ff', 'text' => '#1e1b4b' ),
'spacing' => array( 'padding' => array( 'top' => '3rem', 'bottom' => '3rem', 'left' => '1.5rem', 'right' => '1.5rem' ) ),
'elements' => array(
'link' => array( 'color' => array( 'text' => '#4338ca' ) ),
'button' => array( 'color' => array( 'background' => '#4338ca', 'text' => '#ffffff' ) ),
),
),
) );
} );Notes
Edit the colors in the style_data arrays to match your brand. Older WordPress versions are skipped.
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.