Use Bricks Elements classes inside Gutenberg

How To
,
1

Hi, is there a way where I can use custom styled buttons or cta sections that I’ve used in bricks builder inside a regular post editor of Gutenberg?

I wanted to make for example a CPT that added a product for review and be able to style it up with bricks builder and then reuse it inside Gutenberg’s editor.

How would one go about in doing that?

2

There’s not a great way to do this.

To add the color palette to block editor from bricks, the following code would work

<?php

add_action( 'plugins_loaded', function() {

    /**
     * Editor
     */
    function bricks_colors_gutenberg_editor() {
    
    	$gutenberg_colors = [];
    	$bricks_palettes = get_option(BRICKS_DB_COLOR_PALETTE, []);

        foreach( $bricks_palettes as $bricks_palette) {
        	foreach( $bricks_palette['colors'] as $bricks_color ) {
        		$gutenberg_colors[] = [ 'name' => $bricks_color['name'], 'slug' => 'color-' . $bricks_color['id'], 'color' => ( $bricks_color['rgb'] ?? $bricks_color['hex'] ) ];
        	}
        }

    	add_theme_support( 'editor-color-palette', $gutenberg_colors );
    	add_theme_support( 'disable-custom-colors' );
    
    }
    add_action( 'after_setup_theme', 'bricks_colors_gutenberg_editor' );
    
    /**
     * Frontend
     */
    function bricks_colors_gutenberg_frontend() {
    	
    	$gutenberg_colors_frontend_css = "";
    	$bricks_palettes = get_option(BRICKS_DB_COLOR_PALETTE, []);

        foreach( $bricks_palettes as $bricks_palette) {
        	foreach( $bricks_palette['colors'] as $bricks_color ) {
        		$gutenberg_colors_frontend_css .= ".has-color-" . $bricks_color['id'] ."-color { color: " . ( $bricks_color['rgb'] ?? $bricks_color['hex'] ) . "} ";
        		$gutenberg_colors_frontend_css .= ".has-color-" . $bricks_color['id'] ."-background-color { background-color: " . ( $bricks_color['rgb'] ?? $bricks_color['hex'] ) . "}";
        	}
        }
    	
    	wp_register_style( 'gutenberg-bricks-colors', false );
    	wp_enqueue_style( 'gutenberg-bricks-colors' );
    	wp_add_inline_style( 'gutenberg-bricks-colors', $gutenberg_colors_frontend_css );
    
    }
    add_action( 'enqueue_block_assets', 'bricks_colors_gutenberg_frontend' );
    
} );

But I think the best thing to do is to create your elements in Bricks first. And then in the Block Editor create reusable blocks and place the Bricks Element Shortcode within the reusable block to render it. You won’t be able to see it rendered in the Block editor though.

1 Like