Reduce Gutenberg Content section height

• webecho

• May 31, 2019 at 4:39 pm

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 {
     flex:0!important; 
}

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');

• slackday

• September 21, 2019 at 1:24 am

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;
}