When a gallery field is included within a Gutenberg block it does not consistently recalculate the number of columns that should be displayed when the block is swapped to the “edit” view.
Steps to reproduce:
It appears the Gallery block recalculates the number of columns that should be used whenever a resize event is fired (acf-pro-input.js lines 724-735). However when a user toggles the block into edit mode after the fields have already loaded in the sidebar, the fields move from the sidebar into the main content area (which is wider) and no resize event is fired, so column width is never recalculated. This means the gallery displays the same number of columns that were calculated when the field was displayed in a much narrower space, resulting in huge image containers and cumbersome user experience.
Column width should be recalculated when a block switches between the render preview and edit mode.
I don’t have a great workaround for this at the moment because there doesn’t seem to be an action triggered when a block switches from sidebar edit mode to block edit mode. My best solution at the moment is to trigger resize events manually on an interval whenever a gallery is first loaded, but it’s an ugly solution.
First, we have a block in Gutenberg that contains a Gallery field. I’ve selected the block with the sidebar open. The Gallery field is loaded and columns are calculated.
After that we click the edit (pencil) icon to swap the block into edit mode in the main column. The Gallery moves and becomes much larger, but images are still displayed in 2 columns instead of 3-8 columns resulting in a poor user experience. Resizing the window at this point forces the column count to update, but the column count will not update without a resize.
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!