The Gallery shortcode relies on #gallery-instance to hook the CSS, but the id sometimes isn't specific enough

[matveb]

The Gallery CSS selector uses the id attribute, which is of the form #gallery-{instance}. On some scenarios (like infinite scroll) a follow up gallery on a another post can have the same #gallery-x selector, thus over-writing the previous gallery style.

Proposed solution: make the #id more unique by including the postid number. (Attached patch.)

(It could potentially impact some themes that used #gallery-1 to style galleries, but theme's shouldn't be using that in the first place, I believe.)

Furthermore, it may be good to change the whole style block to use classes instead of the id so that it's easier for themes to deal with CSS specificity—and helps them not fall back to the #id.

[lancewillett]

+1 to not styling with ID values, in the core CSS output.

[MikeHansenMe]

This patch moves the general styles to use the class and also takes advantage of the $instance var to only add it once. This will likely still be added on the first gallery of each infinite scroll load. This is still much better than being added to every gallery.

[DrewAPicture]

I like where you're going with 21082.2 but if we're going to remove $selector from the general styles, I think I'd much rather have them printed via wp_head than in with the galleries.

[MikeHansenMe]

Yea, I thought the same thing but I do not think you can add anything to wp_head from within a shortcode. I think it is to late. I can/will check into that.

[kovshenin]

Replying to MikeHansenMe: wp_head is indeed too late for shortcodes.

[antpb]

Refreshed the patch below...

[obenland]

21082.diff​ has been running on WP.com without issues for 3.5 years now.

The other patches still need a good amount of testing. I think we should search the theme repo to see if themes do use the id selector and try to bring this in early in the cycle to give it time to soak.

[obenland]

53 themes in the repo use a #gallery-1 selector in one way or another.

[desrosj]

I'm going to close this out as a wontfix.

A ​search of the theme directory today returns 271 occurrences of #gallery-1 in 112 themes. Unfortunately I think this is just something we'll need to live with to maintain backwards compatibility in themes.

Additionally, with the introduction of the block editor and full site editing, shortcodes (though still supported) are no longer the recommended way to display a gallery.

This has been solved in the gallery block. IDs are no longer used, and a .wp-block-gallery class is applied to the <figure> tag wrapping the gallery images.