Gallery fields does not properly recalculate column count in blocks

• colorcrate

• October 31, 2023 at 1:11 pm

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:

1. Create a block (following roughly the steps in the ACF documentation) that includes a Gallery field
2. Add the block to a post, and add a few images to the field as examples. Leave the block in render preview mode, and update the page.
3. Reload the page and ensure the Settings sidebar is toggled on within the Gutenberg editor.
4. With the block in render preview mode, click on the block to select it and display the block settings in the sidebar. Note the number of columns shown in the gallery (for me this is consistently 2 columns in the sidebar).
5. Click the pencil icon in the block toolbar to toggle it to edit view.
6. Note the number of columns in the gallery now that it is displayed in the main content column – it will be 2 very large columns instead of whatever number it should be given your browser size (3–8)

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.

Suggested fix:
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.

Example screenshots:

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.