Reduce Size of a Block Within Block Editor

Hi there,

I can't recall a solution off the top of my head.

This isn't something GP (any themes) can control though so I'd recommend checking with WP's support team.

Thanks for your understanding :)

I looked around and didn't find a suitable option. Thanks though.

WP's support team would be able to point you in the right direction if there is indeed a way.

I may have found a workaround by introducing an editor-style.css to manage the appearance of the block editor.

Added the following to functions.php

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/editor-style.css", false,'1.0', 'all' );
} );

Then added the following to the editor-style.css

.editor-styles-wrapper .block-editor-block-list__layout pre {
	max-height: 100px;
}

It's a bandaid fix but seems to do the job for now.

Is there any way to target the style to a specific page? I tried including the page id, but it didn't work.

Hi Math,

You can add a conditional rule in your current PHP code to target a specific page:

add_action( 'enqueue_block_editor_assets', function() {
    if(is_page(123)){
        wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/editor-style.css", false,'1.0', 'all' );
    }
} );

Kindly replace 123 with the ID of the specific page.

Hope this helps! :)

Hi Fernando,

That's great. Just out of curiosity, is there a way to use Elements to target specific pages? If I have 20 pages, I'm assuming I would have to adjust the code accordingly.

Thank you.

Fernando's code should be added as a function using one of these methods:
Adding PHP: https://docs.generatepress.com/article/adding-php/

You can take a look at the conditional tags here:
https://codex.wordpress.org/Conditional_Tags#A_PAGE_Page

Hi Leo,

I added the code above targetting the specific page and it doesn't appear to be working on the page (I changed the page ID). The code without targeting the page seems to be working, but it's on all pages.

add_action( 'enqueue_block_editor_assets', function() {
    if(is_page(13508)){
        wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/editor-style.css", false,'1.0', 'all' );
    }
} );

Any idea why?

Thank you.

That should work for pages. Is the page you’re modifying a post? Kindly change it to is_single(13508) if so. Please check for any syntax error. Kindly check if the ID is indeed 13508 as well. :)

Alternatively, if that doesn’t work, you may use a plugin to implement custom CSS for specific pages. See: https://wordpress.org/plugins/simple-css/

Hope this helps. :)

Hi Fernando,

It is in fact a page and ID is correct (13508). Unfortunately, changing it to is_single(13508) also didn't work.

I have a temporary solution where it applies to everything and I'll work with it for the time being.

Thanks for your help.

I see. If you still wish to try, you may replace enqueue_block_editor_assets with wp_enqueue_scripts instead. I tested this on my test website and it works. I believe the likely reason why enqueue_block_editor_asset isn't working is because it's a hook being called much earlier wherein the page ID hasn't been initiated yet.

add_action( 'wp_enqueue_scripts', function() {
    if(is_page(123)){
        wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/editor-style.css", false,'1.0', 'all' );
    }
} );

Hope this helps! Kindly let us know how it goes. :)

Hi Fernando,

I appreciate you going out of the way to look into this issue, but still not working. I must be doing something wrong on my end. I'll create another ticket if I need to target a specific page in the future.

Thank you.

You're welcome! If you like, you can also try hooking the action hook to the header to make sure the page has initiated first. Here is a sample code:

add_action( 'get_header', function() {
if(is_page(13508)){
	   add_action( 'wp_enqueue_scripts', function() {
     wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/editor-style.css", false,'1.0', 'all' ); 
} );
   }
    
} );

Tested this as well and it's working on my test website.

Hope this helps and hope you figure out why it isn’t working. Feel free to reach out anytime if you’ll need assistance with anything else! :)

Hi Fernando,

Once again, thanks for the extra effort but this code didn't work either. I looked around and tried a number of options and the following seems to have worked.

Would you happen to know if I need to include multiple pages, how I would go about it?

add_action( 'enqueue_block_editor_assets', function() {
    if(get_the_ID() == 13508){
        wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/editor-style.css", false,'1.0', 'all' );
    }
} );

Thank you.