Adding new colors to column block settings

  • Resolved grw1

    (@grw1)


    3 years, 10 months ago

    Hello!

    I’ve tried to follow this thread, but without any success. What I’ve done so far is make a js-file called block-filter.js with the following content:

    function myColumnBgColorOptions( bgColorOptions ) {
    return [
	{name:'primary', color:'#031251'},
	{name:'secondary', color:'#245011'},
	{name:'primary-light', color:'#7288d2'},
	{name:'secondary-light', color:'#8db351'},
	{name:'dark', color:'#1e1e1c'},
	{name:'light', color:'#ececec'},
    ];
}
wp.hooks.addFilter(
	'wpBootstrapBlocks.column.bgColorOptions',
	'myplugin/wp-bootstrap-blocks/column/bgColorOptions',
	myColumnBgColorOptions
);

    And I’ve enqueued it in my functions.php in my current child theme:
    wp_enqueue_script( 'block-filter', get_stylesheet_directory_uri() . '/inc/block-filter.js', array( 'wp-hooks' ), '1.0.0', true );

    I can see the file is getting loaded, but I can’t see any change in the editor with the new colors – where am I going wrong with this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor tschortsch

    (@tschortsch)

    Hi @grw1. The problem could be that your block-filter.js script gets loaded after the wp-bootstrap-blocks/build/index.js script. Please try to add the following code to your functions.php:

    function mytheme_enqueue_block_editor_assets() {
	wp_enqueue_script( 'block-filter', get_stylesheet_directory_uri() . '/inc/block-filter.js', array( 'wp-hooks' ), '1.0.0', true );
}
add_action( 'enqueue_block_editor_assets', 'mytheme_enqueue_block_editor_assets' );
    Thread Starter grw1

    (@grw1)

    Hello tschortsch,
    It looked like it was the problem – the colors are showing in my editor, but they aren’t used front-end. I can see they get the classes, but no colors are applied – only bg-secondary which is grey and not the color defined in block-filter.js.

    • This reply was modified 3 years, 10 months ago by grw1.
    Plugin Contributor tschortsch

    (@tschortsch)

    The colors you use in the editor should be defined in your Bootstrap CSS which you include in the frontend. If you build your own Bootstrap CSS eg. from SCSS this can be done by adding a new theme-color in the _variables.scss file (see: https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#L73)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding new colors to column block settings’ is closed to new replies.