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');
    • 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;
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.