Custom layouts for gallery with registerBlockStyle()

[jupa8712]

Description

The gallery has only one layout option, which is using a grid and choosing the number of columns.

I was recently working on a project where the layout was a bit more complex, and I wanted to use gallery styles.

Everything worked perfectly on the front end, but in the backend, although the layout is visible correctly, the problem arises when I try to edit the gallery. When I select an image to change, the gallery becomes disorganized. This makes editing less intuitive.

This a video with the issue
https://www.youtube.com/watch?v=2U5drDwomxY

This is caused by a div that is always added after the selected image.

I don't quite understand why that div is added, but it would be nice if it didn't affect the custom designs we can create.

Step-by-step reproduction instructions

1. Create a gallery
2. Create a custom grid css for gallery
3. Try to update some image

Screenshots, screen recording, code snippet

https://www.youtube.com/watch?v=2U5drDwomxY

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[t-hamano]

Thanks for the report.

In my understanding, the empty div was added to ensure the resizing works properly. Ref:

• Fix resizing to max width in classic themes #64819
• Limit the max width of image to its container size #63341

However, since images inside a Gallery block aren't resizable, I think this observer can be removed in this context.

cc @stokesman: Perhaps this issue might be related to #69364

[stokesman]

This was surprising to me because I assumed the Gallery block used a grid or flex layout and therefore should already be excluded. Here’s the relevant condition:

gutenberg/packages/block-library/src/image/edit.js

Line 121 in 1c698f8

( parentLayout.type !== 'flex' && parentLayout.type !== 'grid' );

Gallery is 'flex' but it’s layout definition doesn’t have type so it’s missed. It has default.type instead so the condition needs to factor that in. That’s what I’ve done in #69601.

[stokesman]

@jupa8712, I think it could be a while before a fix for this can be included in a release so I was curious if you found a workaround. It seems like the following CSS should do it:

.wp-block-gallery > [aria-hidden] {
  display: none;
}

Of course that’s only needed for editor styles, not the front end.

[jupa8712]

Hi. I still haven't found a solution. I tried the code you sent me, but the issue persists. What I've noticed is that CSS Grid is unable to completely ignore it in more complex grids. For example, if I use a regular grid, it works perfectly, but the issue arises when I use this:

&.is-style-lookbook {
      grid-template-columns: repeat(2, minmax(0, 1fr));
	figure.wp-block-image {
		&:nth-child(6n + 1) {
			grid-row: span 2;
		}
		&:nth-child(6n + 4) {
			grid-column: span 2;
		}
	}
}

Thanks for help

[stokesman]

Okay, that makes sense. :nth-child selectors will be thrown off even when those elements are display:none. I do wonder if you might be able to get around it with :nth-of-type instead:

&.is-style-lookbook {
      grid-template-columns: repeat(2, minmax(0, 1fr));
	figure.wp-block-image {
		&:nth-of-type(6n + 1) {
			grid-row: span 2;
		}
		&:nth-of-type(6n + 4) {
			grid-column: span 2;
		}
	}
}

Let me know if that works. If it does, the display: none style may not be needed. If it doesn’t I have another idea.

[stokesman]

I do wonder if you might be able to get around it with :nth-of-type instead:

I thought more about that and suspect it won’t suffice to workaround this issue. So I made a plugin that prevents the element from being output. That can be downloaded as a zip and installed or you could integrate the code into your project. It should become unnecessary in a future release (probably WP 6.9) yet shouldn’t cause any issue there either.

[jupa8712]

Hi @stokesman :nth-of-type worked perfectly, sorry for responding late but I couldn't test it yesterday. Thanks for your help, I will use this solution always. Thanks again