Applying styles to Gutenberg block editor

  • Trying to load a custom style sheet to tweak the Gutenberg block editor. I have a child theme active and I’ve verified the child theme functions.php is loading successfully. I stripped it down to just the following to try to isolate the issue:

    <?php
function generate_child_setup() {
    add_theme_support('editor-styles');
    add_editor_style('block-editor.css');
}
add_action('after_setup_theme', 'generate_child_setup');

    Both the functions.php and block-editor.css file are in the root of my child theme folder.

    The only content of the block-editor.css file is a single CSS rule:

    .edit-post-layout__content {padding-left:25px !important;}

    However, it doesn’t seem like the block-editor.css is getting loaded when editing a post.

    My end goal is to add 25px of padding to the left of the content. It’s to address an issue where blocks to the far left within a full-width block have their move handle obscured.

    Thanks for any help you can pass along.

Viewing 4 replies - 1 through 4 (of 4 total)

  • When you use add_theme_support('editor-styles'), the block editor will add an element prefix to each selector in your CSS. This might not work for your particular CSS rule.
    Use your browser Developer Tools to inspect the CSS inside the editor.

    If this is a problem for everyone with full width blocks, consider opening an issue in GitHub: https://github.com/WordPress/gutenberg/issues/

    Thread Starter SJNBham

    (@sjnbham)

    I thought I read some reference to a prefix being tacked on. The developer of the current theme I’m using provided a different way to inject the required style sheet for the editor screen.

    BTW – I opened a bug for the root cause for concern:

    https://github.com/WordPress/gutenberg/issues/17411

    Thanks for the tip Joy!

    Thread Starter SJNBham

    (@sjnbham)

    In case it’s helpful for someone else, this is what the theme developer (Generate Press theme) provided as a workaround to load a style sheet for the block editor. Placed this in the child theme functions.php file along side a block-editor.css file with my style rules in it:

    add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'your-handle-here', get_stylesheet_directory_uri() . "/block-editor.css", false, '1.0', 'all' );
} );

    Hi @sjnbham, just wanted to chime in and say, this was helpful for me. Until I enqueued the editor style using enqueue_block_editor_assets, I was not seeing styles show up in the block editor, but as soon as I did, they were applied. My style requirements were entirely different, but that hook did the trick.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Applying styles to Gutenberg block editor’ is closed to new replies.