Support

Account

Home Forums Gutenberg ACF blocks cramped in right sidebar of editor

Solving

ACF blocks cramped in right sidebar of editor

  • I’m using ACF to create Gutenberg blocks. Everything works fine, but on blocks that use repeater fields and other more complex ACF fields, the content is often too wide for the narrow Gutenberg editor that appears in the right sidebar.

    Has anyone figured out a way around this UI/UX issue or is the only way to switch away from the “preview mode”?

  • You can switch to Edit mode, it’ll be available when you have selected the Block you wish to Preview/Edit. Look for the Edit (Pencil icon) in the main toolbar and click on that. You can click on the Preview (Eye icon) to flip back.

    • Kimbab

    • July 3, 2019 at 1:16 am

    I use the preview style for anything not too complex or filled with too much content, e.g.: large textarea filled with content. For anything else I manually switch between the preview/edit modes when making changes to the affected block, so that the input fields can use up the full available content area width.

  • Thanks guys,

    Part of the issue is that, for my clients, the toggling between the preview and editing modes is not intuitive and throws them off.
    For someone like me who’s familiar with the ins and outs of WP and ACF it’s fine, but for regular users this is proving to be a hurdle.

  • I’m having similar issues. If you put a repeater with a wysiwyg into a block, there’s barely any room in the sidebar for people to type. And I agree that many clients will find the need to switch between editing and preview modes irritating. I guess tweaking the css for the editor pages could help, maybe allocating more of the screen width to the sidebar and reducing some of the margins/paddings of the custom fields themselves, but it would be great if an ‘official’ approach was available from ACF. The more people start doing this kind of thing the more it will become a problem that needs resolving properly.

  • I have the same issue. You can increase the width of the sidebar by editing some CSS, but it’s not very intuitive.

    To me, the sidebar should be at least draggable so a user can set the preferred width of it.

    • trogd0r

    • April 3, 2020 at 12:11 pm

    You can make your block default to edit mode by adding this:
    'mode' => 'edit'

    I also widen the entire editor blocks by throwing this in my functions.php

    
    //------------------------------------------------
    // Admin CSS
    //------------------------------------------------
    
    add_action('admin_head', 'my_custom_fonts');
    
    function my_custom_fonts() {
      echo 
      '<style>
        .wp-block {max-width: 1200px;}
      </style>';
    }
    
    • sb-nldx

    • April 28, 2020 at 5:37 pm

    I mostly have problems with a repeater field.
    You can disable it very easily with some styling:

    SCSS:.

    .edit-post-sidebar {
         .acf-field {
             &.acf-field-repeater {
                 &[data-name="field-name"] {
                     display: none !important;
                 }
             }
         }  
     }

    Or CSSl:

    .edit-post-sidebar .acf-field.acf-field-repeater[data-name=field-name] {
      display: none !important;
    }
Viewing 8 posts - 1 through 8 (of 8 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.