fix: add gallery is-cropped styling to facilitate logo's better

[YvetteNikolov]

Galerij styling juist gezet

Als je deze optie uit zet:

Krijg je de class is-cropped op de gallerij en verdwijnt object-fit: cover;. Deze optie is perfect om voor bijv. logo's te gebruiken (wat je vaak op home pagina's ziet), alleen is de styling niet perfect.

Deze PR verandert dit:

Naar dit:

Zo kun je vrij gemakkelijk een sectie met partners tonen.

Mobiel:

[YvetteNikolov]

Ik haat deze diepe nesting maar het moet om de Gutenberg styles te overschrijven zonder !important

[laravdiemen]

Goeie! Ik gebruikte vaak een extra style voor dit soort dingen maar dit is beter.

[laravdiemen]

Misschien nog wel de border-radius voor de zekerheid weghalen? In blocks/wp/shared krijgen alle image een border-radius maar dat wil je bij logo's niet

[YvetteNikolov]

Toegevoegd!

[WybeBosch]

Je kunt 1 nested niveau hier weg halen toch? Door dit achter elkaar te zetten maar wel met spatie er tussen houd jezelfde niveau aan importance hmm..

maar 1 minder tab :)

Suggested change

	.wp-block-gallery {
	/* Not cropped usually means images like logo's */
	&:not( .is-cropped ) {
	figure.wp-block-image {
	@apply mt-auto! items-center;
	/* Overwrite Gutenberg default styles */
	@variant max-sm {
	width: calc(
	25% - var( --wp--style--unstable-gallery-gap, 16px ) / 2
	) !important;
	}
	img {
	@apply max-w-4/5!;
	}
	/* Editor styling */
	> a,
	> div {
	@apply flex items-center justify-center;
	}
	}
	}
	}
	.wp-block-gallery {
	/* Not cropped usually means images like logo's */
	&:not( .is-cropped ) figure.wp-block-image {
	@apply mt-auto! items-center;
	/* Overwrite Gutenberg default styles */
	@variant max-sm {
	width: calc(
	25% - var( --wp--style--unstable-gallery-gap, 16px ) / 2
	) !important;
	}
	img {
	@apply max-w-4/5!;
	}
	/* Editor styling */
	> a,
	> div {
	@apply flex items-center justify-center;
	}
	}
	}

[YvetteNikolov]

Goeie, done ✅