| @@ -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 |
| @@ -276,37 +282,104 @@ | ||
| 276 | 282 | .wp-block-gallery:not(.is-cropped) .blocks-gallery-item { |
| 277 | 283 | align-self: flex-start; |
| 278 | 284 | } |
| 279 | 285 | |
| 280 | -figure.wp-block-gallery.has-nested-images { | |
| 286 | +figure.wp-block-gallery.has-nested-images:where(.is-layout-flex) { | |
| 281 | 287 | align-items: normal; |
| 282 | 288 | } |
| 283 | 289 | |
| 284 | -.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) { | |
| 285 | 291 | width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2); |
| 286 | 292 | margin: 0; |
| 287 | 293 | } |
| 288 | -.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 { | |
| 289 | 295 | display: flex; |
| 290 | 296 | flex-grow: 1; |
| 291 | 297 | justify-content: center; |
| 292 | - position: relative; | |
| 293 | 298 | flex-direction: column; |
| 294 | 299 | max-width: 100%; |
| 295 | 300 | box-sizing: border-box; |
| 296 | 301 | } |
| 297 | -.wp-block-gallery.has-nested-images figure.wp-block-image > div, | |
| 298 | -.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 { | |
| 299 | 304 | margin: 0; |
| 300 | 305 | flex-direction: column; |
| 301 | 306 | flex-grow: 1; |
| 302 | 307 | } |
| 303 | -.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 { | |
| 304 | 309 | display: block; |
| 305 | 310 | height: auto; |
| 306 | 311 | max-width: 100% !important; |
| 307 | 312 | width: auto; |
| 308 | 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 | +} | |
| 309 | 382 | .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before, |
| 310 | 383 | .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { |
| 311 | 384 | position: absolute; |
| 312 | 385 | bottom: 0; |
| @@ -319,10 +392,9 @@ | ||
| 319 | 392 | height: 100%; |
| 320 | 393 | max-height: 3em; |
| 321 | 394 | pointer-events: none; |
| 322 | 395 | backdrop-filter: blur(3px); |
| 323 | - -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%); | |
| 324 | - mask-image: linear-gradient(0deg, #000 20%, transparent 100%); | |
| 396 | + mask-image: linear-gradient(0deg, #000 20%, transparent 100%); | |
| 325 | 397 | } |
| 326 | 398 | .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { |
| 327 | 399 | color: #fff; |
| 328 | 400 | text-shadow: 0 0 1.5px #000; |
| @@ -393,67 +465,9 @@ | ||
| 393 | 465 | } |
| 394 | 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 { |
| 395 | 467 | content: none; |
| 396 | 468 | } |
| 397 | -.wp-block-gallery.has-nested-images figcaption { | |
| 398 | - flex-grow: 1; | |
| 399 | - flex-basis: 100%; | |
| 469 | + | |
| 470 | +:where(.wp-block-gallery.has-nested-images.is-layout-grid) > .blocks-gallery-caption { | |
| 471 | + grid-column: 1/-1; | |
| 400 | 472 | text-align: center; |
| 401 | -} | |
| 402 | -.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) { | |
| 403 | - margin-top: 0; | |
| 404 | - margin-bottom: auto; | |
| 405 | -} | |
| 406 | -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) { | |
| 407 | - align-self: inherit; | |
| 408 | -} | |
| 409 | -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone), | |
| 410 | -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a { | |
| 411 | - display: flex; | |
| 412 | -} | |
| 413 | -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a, | |
| 414 | -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { | |
| 415 | - width: 100%; | |
| 416 | - flex: 1 0 0%; | |
| 417 | - height: 100%; | |
| 418 | - object-fit: cover; | |
| 419 | -} | |
| 420 | -.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) { | |
| 421 | - width: 100%; | |
| 422 | -} | |
| 423 | -@media (min-width: 600px) { | |
| 424 | - .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) { | |
| 425 | - width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667); | |
| 426 | - } | |
| 427 | - .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) { | |
| 428 | - width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75); | |
| 429 | - } | |
| 430 | - .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) { | |
| 431 | - width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8); | |
| 432 | - } | |
| 433 | - .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) { | |
| 434 | - width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333); | |
| 435 | - } | |
| 436 | - .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) { | |
| 437 | - width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571); | |
| 438 | - } | |
| 439 | - .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) { | |
| 440 | - width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875); | |
| 441 | - } | |
| 442 | - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) { | |
| 443 | - width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667); | |
| 444 | - } | |
| 445 | - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), | |
| 446 | - .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) { | |
| 447 | - width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5); | |
| 448 | - } | |
| 449 | - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) { | |
| 450 | - width: 100%; | |
| 451 | - } | |
| 452 | -} | |
| 453 | -.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright { | |
| 454 | - max-width: 420px; | |
| 455 | - width: 100%; | |
| 456 | -} | |
| 457 | -.wp-block-gallery.has-nested-images.aligncenter { | |
| 458 | - justify-content: center; | |
| 459 | 473 | } |
