Home Forums Gutenberg Reduce Gutenberg Content section height


Reduce Gutenberg Content section height

  • I’ve been trying to hide / reduce the height of the Gutenberg main content editor section so my clients can actually see the ACF fields I’ve set up for them.
    This is most definitely a hack, but works for me so far.
    I’m sure the ACF crew can sort out something more elegant 🙂

    Create a separate CSS file (saved mine in main directory named webecho-admin.css)

    /* WP-Admin - Content Block reduce height
    .edit-post-layout__content .edit-post-visual-editor {
         flex-basis: 10%!important; 
    .edit-post-layout__content .edit-post-visual-editor {

    Add a function

    // Update CSS within in Admin
    function admin_style() {
      wp_enqueue_style('admin-styles', get_template_directory_uri().'/webecho-admin.css');
    add_action('admin_enqueue_scripts', 'admin_style');
  • I’m facing the same problem. The layout of Gutenberg editor is not optimal when dealing with custom fields. Haven’t found a way to customize Gutenberg as I want.

    The solution I settled for in the meantime is to change the order of the metaboxes.

    Be aware though that this places the metaboxes BEFORE the title and also that your site may have more custom meta boxes than mine (Only using ACF and Yoast SEO). The metaboxes are collapsable which helps a bit…

    Here’s the css for this optional solution 🙂

    .edit-post-layout__content .edit-post-visual-editor {
        order: 2 !important;
    .edit-post-layout__content .edit-post-layout__metaboxes {
        order: 1 !important;
Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Reduce Gutenberg Content section height’ is closed to new replies.