Support » Theme: Twenty Twenty » How to set default background color for buttons in block editor?

  • Resolved klewis

    (@blackawxs)


    How do we set the default background color for buttons in block editor? By default in Twenty Twenty, when create a new page, and go into a block editor, and add a button, I get the following hot pink background on my button…

    https://photos.app.goo.gl/AkZj6bRtjQ7ZxvQE9

    I want to change that hot pink default color to a different default color, like dark gold.

    Thanks for any tips!

    • This topic was modified 1 year, 3 months ago by klewis.
    • This topic was modified 1 year, 3 months ago by klewis.
    • This topic was modified 1 year, 3 months ago by klewis.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You need to create a child theme ( https://developer.wordpress.org/themes/advanced-topics/child-themes/ ) then create a functions.php file for the child theme as well.

    In the functions.php file you’ll need the following code

    function custom_button_block_style() {
    	wp_enqueue_style( 'custom-button-block-style', get_theme_file_uri( 'my-custom-editor-styles.css' ) );
    }
    add_action( 'enqueue_block_editor_assets', 'custom_button_block_style', 2);

    custom_button_block_style, custom-button-block-style and my-custom-editor-styles.css can all be renamed to your liking. Just make sure you update the code where necessary if you do make name changes.

    Then in your my-custom-editor-styles.css file inside of your child theme directory you would add the following code

    .editor-styles-wrapper .wp-block-button__link,
    .editor-styles-wrapper .wp-block-file__button {
    	background: blue;
    }
    Thread Starter klewis

    (@blackawxs)

    Perfect, I got this working on the very first try 2 minutes ago. Your logical flow also inspired me to apply default colors on the front-end for .wp-block-button__link as well.

    Many thanks!

    • This reply was modified 1 year, 3 months ago by klewis.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to set default background color for buttons in block editor?’ is closed to new replies.