[Resolved] Reduce Size of a Block Within Block Editor

Home Forums Support [Resolved] Reduce Size of a Block Within Block Editor

Home Forums Support Reduce Size of a Block Within Block Editor

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #2140070
    Math

    Hi,

    Is there a way to limit the height of a block within the block editor?

    For example, I have a “pre” block with code in it and it’s taking up a significant amount of space (see link).

    Is there a way to set a limit so the max-height is 100px, then you would have to scroll to see the rest?

    Thank you.

    #2140078
    Leo
    Staff
    Customer Support

    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 🙂

    #2140080
    Math

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

    #2140083
    Leo
    Staff
    Customer Support

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

    #2140179
    Math

    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.

    #2140185
    Fernando
    Customer Support

    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! 🙂

    #2140186
    Math

    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.

    #2140190
    Leo
    Staff
    Customer Support

    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

    #2140199
    Math

    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.

    #2140245
    Fernando
    Customer Support

    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. 🙂

    #2140702
    Math

    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.

    #2141558
    Fernando
    Customer Support

    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. 🙂

    #2144660
    Math

    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.

    #2144757
    Fernando
    Customer Support

    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! 🙂

    #2144781
    Math

    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.

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.