← All changes | build/styles/block-library/gallery/style.css +79 -73 23.7.2 → trunk View file →

		@@ -175,10 +175,9 @@
175	175	.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img {
176	176	width: 100%;
177	177	height: 100%;
178	178	flex: 1;
179		- -o-object-fit: cover;
180		- object-fit: cover;
	179	+ object-fit: cover;
181	180	}
182	181	.wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
183	182	.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
184	183	.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
		@@ -283,37 +282,104 @@
283	282	.wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
284	283	align-self: flex-start;
285	284	}
286	285
287		-figure.wp-block-gallery.has-nested-images {
	286	+figure.wp-block-gallery.has-nested-images:where(.is-layout-flex) {
288	287	align-items: normal;
289	288	}
290	289
291		-.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	290	+.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image:not(#individual-image) {
292	291	width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
293	292	margin: 0;
294	293	}
295		-.wp-block-gallery.has-nested-images figure.wp-block-image {
	294	+.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image {
296	295	display: flex;
297	296	flex-grow: 1;
298	297	justify-content: center;
299		- position: relative;
300	298	flex-direction: column;
301	299	max-width: 100%;
302	300	box-sizing: border-box;
303	301	}
304		-.wp-block-gallery.has-nested-images figure.wp-block-image > div,
305		-.wp-block-gallery.has-nested-images figure.wp-block-image > a {
	302	+.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > div,
	303	+.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > a {
306	304	margin: 0;
307	305	flex-direction: column;
308	306	flex-grow: 1;
309	307	}
310		-.wp-block-gallery.has-nested-images figure.wp-block-image img {
	308	+.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image img {
311	309	display: block;
312	310	height: auto;
313	311	max-width: 100% !important;
314	312	width: auto;
315	313	}
	314	+.wp-block-gallery.has-nested-images:where(.is-layout-flex) figcaption {
	315	+ flex-grow: 1;
	316	+ flex-basis: 100%;
	317	+ text-align: center;
	318	+}
	319	+.wp-block-gallery.has-nested-images:where(.is-layout-flex):not(.is-cropped) figure.wp-block-image:not(#individual-image) {
	320	+ margin-top: 0;
	321	+ margin-bottom: auto;
	322	+}
	323	+.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) {
	324	+ align-self: inherit;
	325	+}
	326	+.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
	327	+.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > a {
	328	+ display: flex;
	329	+}
	330	+.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) a,
	331	+.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) img {
	332	+ width: 100%;
	333	+ flex: 1 0 0%;
	334	+ height: 100%;
	335	+ object-fit: cover;
	336	+}
	337	+.wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-1 figure.wp-block-image:not(#individual-image) {
	338	+ width: 100%;
	339	+}
	340	+@media (min-width: 600px) {
	341	+ .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-3 figure.wp-block-image:not(#individual-image) {
	342	+ width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
	343	+ }
	344	+ .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-4 figure.wp-block-image:not(#individual-image) {
	345	+ width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
	346	+ }
	347	+ .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-5 figure.wp-block-image:not(#individual-image) {
	348	+ width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
	349	+ }
	350	+ .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-6 figure.wp-block-image:not(#individual-image) {
	351	+ width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
	352	+ }
	353	+ .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-7 figure.wp-block-image:not(#individual-image) {
	354	+ width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
	355	+ }
	356	+ .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-8 figure.wp-block-image:not(#individual-image) {
	357	+ width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
	358	+ }
	359	+ .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image) {
	360	+ width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
	361	+ }
	362	+ .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
	363	+ .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
	364	+ width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
	365	+ }
	366	+ .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
	367	+ width: 100%;
	368	+ }
	369	+}
	370	+.wp-block-gallery.has-nested-images:where(.is-layout-flex).alignleft, .wp-block-gallery.has-nested-images:where(.is-layout-flex).alignright {
	371	+ max-width: 420px;
	372	+ width: 100%;
	373	+}
	374	+.wp-block-gallery.has-nested-images:where(.is-layout-flex).aligncenter {
	375	+ justify-content: center;
	376	+}
	377	+
	378	+.wp-block-gallery.has-nested-images figure.wp-block-image {
	379	+ position: relative;
	380	+ margin: 0;
	381	+}
316	382	.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
317	383	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
318	384	position: absolute;
319	385	bottom: 0;
		@@ -326,10 +392,9 @@
326	392	height: 100%;
327	393	max-height: 3em;
328	394	pointer-events: none;
329	395	backdrop-filter: blur(3px);
330		- -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
331		- mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
	396	+ mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
332	397	}
333	398	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
334	399	color: #fff;
335	400	text-shadow: 0 0 1.5px #000;
		@@ -400,68 +465,9 @@
400	465	}
401	466	.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded::before, .wp-block-gallery.has-nested-images figure.wp-block-image.has-custom-border::before {
402	467	content: none;
403	468	}
404		-.wp-block-gallery.has-nested-images figcaption {
405		- flex-grow: 1;
406		- flex-basis: 100%;
	469	+
	470	+:where(.wp-block-gallery.has-nested-images.is-layout-grid) > .blocks-gallery-caption {
	471	+ grid-column: 1/-1;
407	472	text-align: center;
408		-}
409		-.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
410		- margin-top: 0;
411		- margin-bottom: auto;
412		-}
413		-.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
414		- align-self: inherit;
415		-}
416		-.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
417		-.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
418		- display: flex;
419		-}
420		-.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
421		-.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
422		- width: 100%;
423		- flex: 1 0 0%;
424		- height: 100%;
425		- -o-object-fit: cover;
426		- object-fit: cover;
427		-}
428		-.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
429		- width: 100%;
430		-}
431		-@media (min-width: 600px) {
432		- .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
433		- width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
434		- }
435		- .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
436		- width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
437		- }
438		- .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
439		- width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
440		- }
441		- .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
442		- width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
443		- }
444		- .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
445		- width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
446		- }
447		- .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
448		- width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
449		- }
450		- .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
451		- width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
452		- }
453		- .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
454		- .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
455		- width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
456		- }
457		- .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
458		- width: 100%;
459		- }
460		-}
461		-.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
462		- max-width: 420px;
463		- width: 100%;
464		-}
465		-.wp-block-gallery.has-nested-images.aligncenter {
466		- justify-content: center;
467	473	}