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

		@@ -67,8 +67,14 @@
67	67	/**
68	68	* Focus styles.
69	69	*/
70	70	/**
	71	+ * Standard focus rings for the WordPress Design System.
	72	+ *
	73	+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
	74	+ * e.g. `&:focus { @include outset-ring__focus(); }`.
	75	+ */
	76	+/**
71	77	* Applies editor left position to the selector passed as argument
72	78	*/
73	79	/**
74	80	* Styles that are reused verbatim in a few places
		@@ -169,10 +175,9 @@
169	175	.blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img {
170	176	width: 100%;
171	177	height: 100%;
172	178	flex: 1;
173		- -o-object-fit: cover;
174		- object-fit: cover;
	179	+ object-fit: cover;
175	180	}
176	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,
177	182	.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
178	183	.blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
		@@ -277,37 +282,104 @@
277	282	.wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
278	283	align-self: flex-start;
279	284	}
280	285
281		-figure.wp-block-gallery.has-nested-images {
	286	+figure.wp-block-gallery.has-nested-images:where(.is-layout-flex) {
282	287	align-items: normal;
283	288	}
284	289
285		-.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) {
286	291	width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
287	292	margin: 0;
288	293	}
289		-.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 {
290	295	display: flex;
291	296	flex-grow: 1;
292	297	justify-content: center;
293		- position: relative;
294	298	flex-direction: column;
295	299	max-width: 100%;
296	300	box-sizing: border-box;
297	301	}
298		-.wp-block-gallery.has-nested-images figure.wp-block-image > div,
299		-.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 {
300	304	margin: 0;
301	305	flex-direction: column;
302	306	flex-grow: 1;
303	307	}
304		-.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 {
305	309	display: block;
306	310	height: auto;
307	311	max-width: 100% !important;
308	312	width: auto;
309	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	+}
310	382	.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
311	383	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
312	384	position: absolute;
313	385	bottom: 0;
		@@ -320,10 +392,9 @@
320	392	height: 100%;
321	393	max-height: 3em;
322	394	pointer-events: none;
323	395	backdrop-filter: blur(3px);
324		- -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
325		- mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
	396	+ mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
326	397	}
327	398	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
328	399	color: #fff;
329	400	text-shadow: 0 0 1.5px #000;
		@@ -394,68 +465,9 @@
394	465	}
395	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 {
396	467	content: none;
397	468	}
398		-.wp-block-gallery.has-nested-images figcaption {
399		- flex-grow: 1;
400		- flex-basis: 100%;
	469	+
	470	+:where(.wp-block-gallery.has-nested-images.is-layout-grid) > .blocks-gallery-caption {
	471	+ grid-column: 1/-1;
401	472	text-align: center;
402		-}
403		-.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
404		- margin-top: 0;
405		- margin-bottom: auto;
406		-}
407		-.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
408		- align-self: inherit;
409		-}
410		-.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
411		-.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
412		- display: flex;
413		-}
414		-.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
415		-.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
416		- width: 100%;
417		- flex: 1 0 0%;
418		- height: 100%;
419		- -o-object-fit: cover;
420		- object-fit: cover;
421		-}
422		-.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
423		- width: 100%;
424		-}
425		-@media (min-width: 600px) {
426		- .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
427		- width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
428		- }
429		- .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
430		- width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
431		- }
432		- .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
433		- width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
434		- }
435		- .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
436		- width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
437		- }
438		- .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
439		- width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
440		- }
441		- .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
442		- width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
443		- }
444		- .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
445		- width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
446		- }
447		- .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
448		- .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) {
449		- width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
450		- }
451		- .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
452		- width: 100%;
453		- }
454		-}
455		-.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
456		- max-width: 420px;
457		- width: 100%;
458		-}
459		-.wp-block-gallery.has-nested-images.aligncenter {
460		- justify-content: center;
461	473	}