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.
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.
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.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
#CodeTidbits30 Day 28 🎄— Samantha Ming (@samantha_ming) December 28, 2019
One thing that doesn't get talk often is Flexbox with Auto Margins. Although not a Flexbox property, it can be used to align child elements. Which is great for creating layouts 💯#Codenewbie #100DaysOfCode #301DaysOfCode pic.twitter.com/PmRYyBSTjr
© 2020 Advanced Custom Fields. Subscribe