PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/block-library/style-rtl.css +414 -221 23.5.2 → 24.1.0 View file →
@@ -57,11 +57,13 @@
57 57 align-items: center;
58 58 justify-content: center;
59 59 }
60 60
61 -.wp-block-accordion-panel[inert], .wp-block-accordion-panel[aria-hidden=true] {
62 - display: none;
61 +.wp-block-accordion-panel[hidden] {
62 + border: none !important;
63 + box-shadow: none !important;
63 64 margin-block-start: 0;
65 + padding: 0 !important;
64 66 }
65 67
66 68 .wp-block-archives {
67 69 box-sizing: border-box;
@@ -151,8 +153,14 @@
151 153 /**
152 154 * Focus styles.
153 155 */
154 156 /**
157 + * Standard focus rings for the WordPress Design System.
158 + *
159 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
160 + * e.g. `&:focus { @include outset-ring__focus(); }`.
161 + */
162 +/**
155 163 * Applies editor left position to the selector passed as argument
156 164 */
157 165 /**
158 166 * Styles that are reused verbatim in a few places
@@ -212,9 +220,10 @@
212 220 .wp-block-button__link {
213 221 cursor: pointer;
214 222 display: inline-block;
215 223 text-align: center;
216 - word-break: break-word;
224 + word-break: normal;
225 + overflow-wrap: anywhere;
217 226 box-sizing: border-box;
218 227 height: 100%;
219 228 align-content: center;
220 229 }
@@ -414,9 +423,10 @@
414 423 }
415 424 .wp-block-categories.wp-block-categories-dropdown.aligncenter {
416 425 text-align: center;
417 426 }
418 -.wp-block-categories .wp-block-categories__label:not(.screen-reader-text) {
427 +
428 +:where(.wp-block-categories__label:not(.screen-reader-text)) {
419 429 width: 100%;
420 430 display: block;
421 431 }
422 432
@@ -486,15 +496,15 @@
486 496 margin-bottom: 1.75em;
487 497 }
488 498
489 499 :where(.wp-block-columns.has-background) {
490 - padding: 1.25em 2.375em;
500 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
491 501 }
492 502
493 503 .wp-block-column {
494 504 flex-grow: 1;
495 505 min-width: 0;
496 - word-break: break-word;
506 + word-break: normal;
497 507 overflow-wrap: break-word;
498 508 /**
499 509 * Individual Column Alignment
500 510 */
@@ -573,9 +583,9 @@
573 583 font-size: 0.875em;
574 584 line-height: 1.5;
575 585 }
576 586 .wp-block-post-comments .comment-meta b {
577 - font-weight: normal;
587 + font-weight: 400;
578 588 }
579 589 .wp-block-post-comments .comment-meta .comment-awaiting-moderation {
580 590 margin-top: 1em;
581 591 margin-bottom: 1em;
@@ -583,15 +593,8 @@
583 593 }
584 594 .wp-block-post-comments .comment-body .commentmetadata {
585 595 font-size: 0.875em;
586 596 }
587 -.wp-block-post-comments .comment-form-comment label,
588 -.wp-block-post-comments .comment-form-author label,
589 -.wp-block-post-comments .comment-form-email label,
590 -.wp-block-post-comments .comment-form-url label {
591 - display: block;
592 - margin-bottom: 0.25em;
593 -}
594 597 .wp-block-post-comments .comment-form textarea,
595 598 .wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
596 599 display: block;
597 600 box-sizing: border-box;
@@ -625,8 +628,16 @@
625 628 .wp-block-post-comments input:not([type=submit]):not([type=checkbox]) {
626 629 padding: calc(0.667em + 2px);
627 630 }
628 631
632 +:where(.wp-block-post-comments .comment-form-comment label),
633 +:where(.wp-block-post-comments .comment-form-author label),
634 +:where(.wp-block-post-comments .comment-form-email label),
635 +:where(.wp-block-post-comments .comment-form-url label) {
636 + display: block;
637 + margin-bottom: 0.25em;
638 +}
639 +
629 640 :where(.wp-block-post-comments input[type=submit]) {
630 641 border: none;
631 642 }
632 643
@@ -678,9 +689,8 @@
678 689 }
679 690 .wp-block-comment-template.aligncenter {
680 691 margin-right: auto;
681 692 margin-left: auto;
682 - width: -moz-fit-content;
683 693 width: fit-content;
684 694 }
685 695 .wp-block-comment-template.alignright {
686 696 float: left;
@@ -1000,14 +1010,19 @@
1000 1010 width: 100%;
1001 1011 height: 100%;
1002 1012 max-width: none;
1003 1013 max-height: none;
1004 - -o-object-fit: cover;
1005 - object-fit: cover;
1014 + object-fit: cover;
1006 1015 outline: none;
1007 1016 border: none;
1008 1017 box-shadow: none;
1009 1018 }
1019 +@supports (-webkit-hyphens: none) {
1020 + .wp-block-cover-image.has-aspect-ratio,
1021 + .wp-block-cover.has-aspect-ratio {
1022 + min-height: fit-content !important;
1023 + }
1024 +}
1010 1025 .wp-block-cover-image .wp-block-cover__embed-background,
1011 1026 .wp-block-cover .wp-block-cover__embed-background {
1012 1027 position: absolute;
1013 1028 top: 0;
@@ -1297,57 +1312,8 @@
1297 1312 opacity: 0.85;
1298 1313 text-decoration: none;
1299 1314 }
1300 1315
1301 -.wp-block-form-input__label {
1302 - width: 100%;
1303 - display: flex;
1304 - flex-direction: column;
1305 - gap: 0.25em;
1306 - margin-bottom: 0.5em;
1307 -}
1308 -.wp-block-form-input__label.is-label-inline {
1309 - flex-direction: row;
1310 - gap: 0.5em;
1311 - align-items: center;
1312 -}
1313 -.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
1314 - margin-bottom: 0.5em;
1315 -}
1316 -.wp-block-form-input__label:has(input[type=checkbox]) {
1317 - flex-direction: row;
1318 - width: -moz-fit-content;
1319 - width: fit-content;
1320 -}
1321 -.wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content {
1322 - margin: 0;
1323 -}
1324 -.wp-block-form-input__label:has(.wp-block-form-input__label-content + input[type=checkbox]) {
1325 - /* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
1326 - flex-direction: row-reverse;
1327 -}
1328 -
1329 -.wp-block-form-input__label-content {
1330 - width: -moz-fit-content;
1331 - width: fit-content;
1332 -}
1333 -
1334 -:where(.wp-block-form-input__input) {
1335 - padding: 0 0.5em;
1336 - font-size: 1em;
1337 - margin-bottom: 0.5em;
1338 -}
1339 -:where(.wp-block-form-input__input)[type=text], :where(.wp-block-form-input__input)[type=password], :where(.wp-block-form-input__input)[type=date], :where(.wp-block-form-input__input)[type=datetime], :where(.wp-block-form-input__input)[type=datetime-local], :where(.wp-block-form-input__input)[type=email], :where(.wp-block-form-input__input)[type=month], :where(.wp-block-form-input__input)[type=number], :where(.wp-block-form-input__input)[type=search], :where(.wp-block-form-input__input)[type=tel], :where(.wp-block-form-input__input)[type=time], :where(.wp-block-form-input__input)[type=url], :where(.wp-block-form-input__input)[type=week] {
1340 - min-height: 2em;
1341 - line-height: 2;
1342 - border-width: 1px;
1343 - border-style: solid;
1344 -}
1345 -
1346 -textarea.wp-block-form-input__input {
1347 - min-height: 10em;
1348 -}
1349 -
1350 1316 .wp-block-gallery:not(.has-nested-images),
1351 1317 .blocks-gallery-grid:not(.has-nested-images) {
1352 1318 display: flex;
1353 1319 flex-wrap: wrap;
@@ -1429,10 +1395,9 @@
1429 1395 .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img {
1430 1396 width: 100%;
1431 1397 height: 100%;
1432 1398 flex: 1;
1433 - -o-object-fit: cover;
1434 - object-fit: cover;
1399 + object-fit: cover;
1435 1400 }
1436 1401 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
1437 1402 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
1438 1403 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
@@ -1537,37 +1502,104 @@
1537 1502 .wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
1538 1503 align-self: flex-start;
1539 1504 }
1540 1505
1541 -figure.wp-block-gallery.has-nested-images {
1506 +figure.wp-block-gallery.has-nested-images:where(.is-layout-flex) {
1542 1507 align-items: normal;
1543 1508 }
1544 1509
1545 -.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
1510 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image:not(#individual-image) {
1546 1511 width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
1547 1512 margin: 0;
1548 1513 }
1549 -.wp-block-gallery.has-nested-images figure.wp-block-image {
1514 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image {
1550 1515 display: flex;
1551 1516 flex-grow: 1;
1552 1517 justify-content: center;
1553 - position: relative;
1554 1518 flex-direction: column;
1555 1519 max-width: 100%;
1556 1520 box-sizing: border-box;
1557 1521 }
1558 -.wp-block-gallery.has-nested-images figure.wp-block-image > div,
1559 -.wp-block-gallery.has-nested-images figure.wp-block-image > a {
1522 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > div,
1523 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > a {
1560 1524 margin: 0;
1561 1525 flex-direction: column;
1562 1526 flex-grow: 1;
1563 1527 }
1564 -.wp-block-gallery.has-nested-images figure.wp-block-image img {
1528 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image img {
1565 1529 display: block;
1566 1530 height: auto;
1567 1531 max-width: 100% !important;
1568 1532 width: auto;
1569 1533 }
1534 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figcaption {
1535 + flex-grow: 1;
1536 + flex-basis: 100%;
1537 + text-align: center;
1538 +}
1539 +.wp-block-gallery.has-nested-images:where(.is-layout-flex):not(.is-cropped) figure.wp-block-image:not(#individual-image) {
1540 + margin-top: 0;
1541 + margin-bottom: auto;
1542 +}
1543 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) {
1544 + align-self: inherit;
1545 +}
1546 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
1547 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > a {
1548 + display: flex;
1549 +}
1550 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) a,
1551 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) img {
1552 + width: 100%;
1553 + flex: 1 0 0%;
1554 + height: 100%;
1555 + object-fit: cover;
1556 +}
1557 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-1 figure.wp-block-image:not(#individual-image) {
1558 + width: 100%;
1559 +}
1560 +@media (min-width: 600px) {
1561 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-3 figure.wp-block-image:not(#individual-image) {
1562 + width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1563 + }
1564 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-4 figure.wp-block-image:not(#individual-image) {
1565 + width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
1566 + }
1567 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-5 figure.wp-block-image:not(#individual-image) {
1568 + width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
1569 + }
1570 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-6 figure.wp-block-image:not(#individual-image) {
1571 + width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
1572 + }
1573 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-7 figure.wp-block-image:not(#individual-image) {
1574 + width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
1575 + }
1576 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-8 figure.wp-block-image:not(#individual-image) {
1577 + width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
1578 + }
1579 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image) {
1580 + width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1581 + }
1582 + .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),
1583 + .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) {
1584 + width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
1585 + }
1586 + .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) {
1587 + width: 100%;
1588 + }
1589 +}
1590 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).alignleft, .wp-block-gallery.has-nested-images:where(.is-layout-flex).alignright {
1591 + max-width: 420px;
1592 + width: 100%;
1593 +}
1594 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).aligncenter {
1595 + justify-content: center;
1596 +}
1597 +
1598 +.wp-block-gallery.has-nested-images figure.wp-block-image {
1599 + position: relative;
1600 + margin: 0;
1601 +}
1570 1602 .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
1571 1603 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
1572 1604 position: absolute;
1573 1605 bottom: 0;
@@ -1580,10 +1612,9 @@
1580 1612 height: 100%;
1581 1613 max-height: 3em;
1582 1614 pointer-events: none;
1583 1615 backdrop-filter: blur(3px);
1584 - -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1585 - mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1616 + mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1586 1617 }
1587 1618 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
1588 1619 color: #fff;
1589 1620 text-shadow: 0 0 1.5px #000;
@@ -1654,72 +1685,13 @@
1654 1685 }
1655 1686 .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 {
1656 1687 content: none;
1657 1688 }
1658 -.wp-block-gallery.has-nested-images figcaption {
1659 - flex-grow: 1;
1660 - flex-basis: 100%;
1689 +
1690 +:where(.wp-block-gallery.has-nested-images.is-layout-grid) > .blocks-gallery-caption {
1691 + grid-column: 1/-1;
1661 1692 text-align: center;
1662 1693 }
1663 -.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
1664 - margin-top: 0;
1665 - margin-bottom: auto;
1666 -}
1667 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
1668 - align-self: inherit;
1669 -}
1670 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
1671 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
1672 - display: flex;
1673 -}
1674 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
1675 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
1676 - width: 100%;
1677 - flex: 1 0 0%;
1678 - height: 100%;
1679 - -o-object-fit: cover;
1680 - object-fit: cover;
1681 -}
1682 -.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
1683 - width: 100%;
1684 -}
1685 -@media (min-width: 600px) {
1686 - .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
1687 - width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1688 - }
1689 - .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
1690 - width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
1691 - }
1692 - .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
1693 - width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
1694 - }
1695 - .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
1696 - width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
1697 - }
1698 - .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
1699 - width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
1700 - }
1701 - .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
1702 - width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
1703 - }
1704 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
1705 - width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1706 - }
1707 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
1708 - .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) {
1709 - width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
1710 - }
1711 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
1712 - width: 100%;
1713 - }
1714 -}
1715 -.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
1716 - max-width: 420px;
1717 - width: 100%;
1718 -}
1719 -.wp-block-gallery.has-nested-images.aligncenter {
1720 - justify-content: center;
1721 -}
1722 1694
1723 1695 .wp-block-group {
1724 1696 box-sizing: border-box;
1725 1697 }
@@ -1733,9 +1705,9 @@
1733 1705 h3:where(.wp-block-heading).has-background,
1734 1706 h4:where(.wp-block-heading).has-background,
1735 1707 h5:where(.wp-block-heading).has-background,
1736 1708 h6:where(.wp-block-heading).has-background {
1737 - padding: 1.25em 2.375em;
1709 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
1738 1710 }
1739 1711 h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]), h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),
1740 1712 h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),
1741 1713 h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),
@@ -1778,12 +1750,16 @@
1778 1750 :where(.wp-block-icon) svg {
1779 1751 width: 100%;
1780 1752 height: 100%;
1781 1753 }
1754 +:where(.wp-block-icon) svg :where(path, rect, circle, ellipse, line, polygon, polyline) {
1755 + vector-effect: none;
1756 +}
1782 1757
1783 1758 .wp-block-image > a,
1784 1759 .wp-block-image > figure > a {
1785 1760 display: inline-block;
1761 + color: inherit;
1786 1762 }
1787 1763 .wp-block-image img {
1788 1764 height: auto;
1789 1765 max-width: 100%;
@@ -1852,20 +1828,15 @@
1852 1828 }
1853 1829 .wp-block-image.is-style-circle-mask img {
1854 1830 border-radius: 9999px;
1855 1831 }
1856 -@supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
1832 +@supports (mask-image: none) or (-webkit-mask-image: none) {
1857 1833 .wp-block-image.is-style-circle-mask img {
1858 - /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1859 - -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
1860 - mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
1834 + mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
1861 1835 mask-mode: alpha;
1862 - -webkit-mask-repeat: no-repeat;
1863 - mask-repeat: no-repeat;
1864 - -webkit-mask-size: contain;
1865 - mask-size: contain;
1866 - -webkit-mask-position: center;
1867 - mask-position: center;
1836 + mask-repeat: no-repeat;
1837 + mask-size: contain;
1838 + mask-position: center;
1868 1839 border-radius: 0;
1869 1840 }
1870 1841 }
1871 1842
@@ -2243,49 +2214,54 @@
2243 2214 .wp-block-latest-posts.wp-block-latest-posts__list li {
2244 2215 clear: both;
2245 2216 overflow-wrap: break-word;
2246 2217 }
2247 -.wp-block-latest-posts.is-grid {
2218 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
2248 2219 display: flex;
2249 2220 flex-wrap: wrap;
2250 2221 }
2251 -.wp-block-latest-posts.is-grid li {
2222 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
2252 2223 margin: 0 0 1.25em 1.25em;
2253 2224 width: 100%;
2254 2225 }
2255 2226 @media (min-width: 600px) {
2256 - .wp-block-latest-posts.columns-2 li {
2227 + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li {
2257 2228 width: calc(100% / 2 - 1.25em + 1.25em / 2);
2258 2229 }
2259 - .wp-block-latest-posts.columns-2 li:nth-child(2n) {
2230 + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li:nth-child(2n) {
2260 2231 margin-left: 0;
2261 2232 }
2262 - .wp-block-latest-posts.columns-3 li {
2233 + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li {
2263 2234 width: calc(100% / 3 - 1.25em + 1.25em / 3);
2264 2235 }
2265 - .wp-block-latest-posts.columns-3 li:nth-child(3n) {
2236 + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li:nth-child(3n) {
2266 2237 margin-left: 0;
2267 2238 }
2268 - .wp-block-latest-posts.columns-4 li {
2239 + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li {
2269 2240 width: calc(100% / 4 - 1.25em + 1.25em / 4);
2270 2241 }
2271 - .wp-block-latest-posts.columns-4 li:nth-child(4n) {
2242 + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li:nth-child(4n) {
2272 2243 margin-left: 0;
2273 2244 }
2274 - .wp-block-latest-posts.columns-5 li {
2245 + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li {
2275 2246 width: calc(100% / 5 - 1.25em + 1.25em / 5);
2276 2247 }
2277 - .wp-block-latest-posts.columns-5 li:nth-child(5n) {
2248 + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li:nth-child(5n) {
2278 2249 margin-left: 0;
2279 2250 }
2280 - .wp-block-latest-posts.columns-6 li {
2251 + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li {
2281 2252 width: calc(100% / 6 - 1.25em + 1.25em / 6);
2282 2253 }
2283 - .wp-block-latest-posts.columns-6 li:nth-child(6n) {
2254 + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li:nth-child(6n) {
2284 2255 margin-left: 0;
2285 2256 }
2286 2257 }
2287 2258
2259 +@media (max-width: 600px) {
2260 + .wp-block-latest-posts-is-layout-grid[class*=columns-]:not(.has-native-responsive-grid) {
2261 + grid-template-columns: 1fr;
2262 + }
2263 +}
2288 2264 :root :where(.wp-block-latest-posts.is-grid) {
2289 2265 padding: 0;
2290 2266 }
2291 2267 :root :where(.wp-block-latest-posts.wp-block-latest-posts__list) {
@@ -2330,9 +2306,9 @@
2330 2306 box-sizing: border-box;
2331 2307 }
2332 2308
2333 2309 :root :where(.wp-block-list.has-background) {
2334 - padding: 1.25em 2.375em;
2310 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
2335 2311 }
2336 2312
2337 2313 .wp-block-loginout {
2338 2314 box-sizing: border-box;
@@ -2425,9 +2401,9 @@
2425 2401 height: 1px;
2426 2402 padding: 0;
2427 2403 margin: -1px;
2428 2404 overflow: hidden;
2429 - clip: rect(0, 0, 0, 0);
2405 + clip-path: inset(50%);
2430 2406 border: 0;
2431 2407 }
2432 2408
2433 2409 /* Image fill for versions 8 and onwards */
@@ -2445,10 +2421,9 @@
2445 2421 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
2446 2422 position: absolute;
2447 2423 width: 100%;
2448 2424 height: 100%;
2449 - -o-object-fit: cover;
2450 - object-fit: cover;
2425 + object-fit: cover;
2451 2426 }
2452 2427
2453 2428 /*
2454 2429 * Here we here not able to use a mobile first CSS approach.
@@ -2544,9 +2519,16 @@
2544 2519 .wp-block-navigation.is-vertical {
2545 2520 --navigation-layout-direction: column;
2546 2521 --navigation-layout-justify: initial;
2547 2522 --navigation-layout-align: flex-start;
2523 + text-align: var(--navigation-layout-text-align, inherit);
2548 2524 }
2525 +.wp-block-navigation.is-vertical .wp-block-navigation-item__content {
2526 + text-align: inherit;
2527 +}
2528 +.wp-block-navigation.is-vertical .wp-block-navigation-item:not(.open-always) > .wp-block-navigation__submenu-container {
2529 + text-align: initial;
2530 +}
2549 2531 .wp-block-navigation.no-wrap {
2550 2532 --navigation-layout-wrap: nowrap;
2551 2533 }
2552 2534 .wp-block-navigation.items-justified-center {
@@ -2551,8 +2533,9 @@
2551 2533 }
2552 2534 .wp-block-navigation.items-justified-center {
2553 2535 --navigation-layout-justification-setting: center;
2554 2536 --navigation-layout-justify: center;
2537 + --navigation-layout-text-align: center;
2555 2538 }
2556 2539 .wp-block-navigation.items-justified-center.is-vertical {
2557 2540 --navigation-layout-align: center;
2558 2541 }
@@ -2558,8 +2541,9 @@
2558 2541 }
2559 2542 .wp-block-navigation.items-justified-right {
2560 2543 --navigation-layout-justification-setting: flex-end;
2561 2544 --navigation-layout-justify: flex-end;
2545 + --navigation-layout-text-align: end;
2562 2546 }
2563 2547 .wp-block-navigation.items-justified-right.is-vertical {
2564 2548 --navigation-layout-align: flex-end;
2565 2549 }
@@ -2630,9 +2614,9 @@
2630 2614 transform: rotate(90deg);
2631 2615 }
2632 2616 }
2633 2617 @media (hover: hover) {
2634 - .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
2618 + .wp-block-navigation .has-child:not(.open-on-click):not(.open-always):hover > .wp-block-navigation__submenu-container {
2635 2619 visibility: visible;
2636 2620 overflow: visible;
2637 2621 opacity: 1;
2638 2622 width: auto;
@@ -2639,10 +2623,9 @@
2639 2623 height: auto;
2640 2624 min-width: 200px;
2641 2625 }
2642 2626 }
2643 -.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
2644 -.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
2627 +.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):not(.open-always):focus-within > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-always) .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
2645 2628 visibility: visible;
2646 2629 overflow: visible;
2647 2630 opacity: 1;
2648 2631 width: auto;
@@ -2690,8 +2673,9 @@
2690 2673 position: static;
2691 2674 border: none;
2692 2675 background-color: transparent;
2693 2676 color: inherit;
2677 + box-shadow: none !important;
2694 2678 }
2695 2679
2696 2680 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
2697 2681 right: 0;
@@ -2897,8 +2881,9 @@
2897 2881 display: flex;
2898 2882 flex-direction: column;
2899 2883 flex-wrap: nowrap;
2900 2884 align-items: var(--navigation-layout-justification-setting, inherit);
2885 + text-align: var(--navigation-layout-text-align, inherit);
2901 2886 }
2902 2887 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content,
2903 2888 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list,
2904 2889 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
@@ -2924,11 +2909,13 @@
2924 2909 gap: inherit;
2925 2910 }
2926 2911 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
2927 2912 padding-top: var(--wp--style--block-gap, 2em);
2913 + text-align: inherit;
2928 2914 }
2929 2915 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
2930 2916 padding: 0;
2917 + text-align: inherit;
2931 2918 }
2932 2919 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
2933 2920 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
2934 2921 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list {
@@ -2942,8 +2929,11 @@
2942 2929 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-page-list {
2943 2930 color: inherit !important;
2944 2931 background: transparent !important;
2945 2932 }
2933 +.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation-item .wp-block-navigation__submenu-container {
2934 + box-shadow: none !important;
2935 +}
2946 2936 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
2947 2937 left: auto;
2948 2938 right: auto;
2949 2939 }
@@ -2989,9 +2979,9 @@
2989 2979 }
2990 2980
2991 2981 .wp-block-navigation__toggle_button_label {
2992 2982 font-size: 1rem;
2993 - font-weight: bold;
2983 + font-weight: 700;
2994 2984 }
2995 2985
2996 2986 .wp-block-navigation__responsive-container-open,
2997 2987 .wp-block-navigation__responsive-container-close {
@@ -3099,8 +3089,20 @@
3099 3089 margin-right: 8px;
3100 3090 text-transform: uppercase;
3101 3091 }
3102 3092
3093 +:where(.wp-block-navigation-overlay-close) {
3094 + color: inherit;
3095 + font-family: inherit;
3096 + font-size: inherit;
3097 + font-style: inherit;
3098 + font-weight: inherit;
3099 + letter-spacing: inherit;
3100 + line-height: inherit;
3101 + text-transform: inherit;
3102 + border: none;
3103 +}
3104 +
3103 3105 .wp-block-navigation-overlay-close {
3104 3106 display: inline-flex;
3105 3107 align-items: center;
3106 3108 justify-content: center;
@@ -3105,9 +3107,8 @@
3105 3107 align-items: center;
3106 3108 justify-content: center;
3107 3109 gap: 0.5em;
3108 3110 padding: 0;
3109 - border: none;
3110 3111 background: transparent;
3111 3112 cursor: pointer;
3112 3113 text-decoration: none;
3113 3114 }
@@ -3177,9 +3178,9 @@
3177 3178 overflow: hidden;
3178 3179 }
3179 3180
3180 3181 :root :where(p.has-background) {
3181 - padding: 1.25em 2.375em;
3182 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3182 3183 }
3183 3184
3184 3185 :where(p.has-text-color:not(.has-link-color)) a {
3185 3186 color: inherit;
@@ -3192,11 +3193,23 @@
3192 3193
3193 3194 .waveform-player {
3194 3195 font-family: inherit;
3195 3196 color: inherit;
3196 - line-height: 1.4;
3197 + line-height: var(--waveform-line-height, 1.4);
3198 + --wfp-accent: #71717a;
3199 + --wfp-button-color: rgba(255, 255, 255, .9);
3200 + --wfp-text-color: #ffffff;
3201 + --wfp-text-secondary-color: rgba(255, 255, 255, .6);
3202 + --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
3203 + --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
3197 3204 }
3198 3205
3206 +.waveform-player.waveform-theme-light {
3207 + --wfp-button-color: rgba(0, 0, 0, .8);
3208 + --wfp-text-color: #333333;
3209 + --wfp-text-secondary-color: rgba(0, 0, 0, .6);
3210 +}
3211 +
3199 3212 .waveform-player * {
3200 3213 box-sizing: border-box;
3201 3214 }
3202 3215
@@ -3202,26 +3215,26 @@
3202 3215
3203 3216 .waveform-body {
3204 3217 display: flex;
3205 3218 flex-direction: column;
3206 - gap: 8px;
3219 + gap: var(--waveform-body-gap, 8px);
3207 3220 }
3208 3221
3209 3222 .waveform-track {
3210 3223 display: flex;
3211 3224 align-items: center;
3212 - gap: 12px;
3225 + gap: var(--waveform-track-gap, 12px);
3213 3226 position: relative;
3214 3227 }
3215 3228
3216 3229 .waveform-btn {
3217 - width: 36px;
3218 - height: 36px;
3219 - min-width: 36px;
3220 - border-radius: 50%;
3230 + width: var(--wfp-btn-size, 36px);
3231 + height: var(--wfp-btn-size, 36px);
3232 + min-width: var(--wfp-btn-size, 36px);
3233 + border-radius: var(--wfp-btn-radius, 50%);
3221 3234 border: 2px solid currentColor;
3222 3235 background: transparent;
3223 - color: inherit;
3236 + color: var(--wfp-button-color, inherit);
3224 3237 cursor: pointer;
3225 3238 display: flex;
3226 3239 align-items: center;
3227 3240 justify-content: center;
@@ -3235,8 +3248,27 @@
3235 3248 opacity: 1;
3236 3249 transform: scale(1.05);
3237 3250 }
3238 3251
3252 +.waveform-btn-minimal {
3253 + width: calc(var(--wfp-btn-size, 36px) * 1.1);
3254 + height: calc(var(--wfp-btn-size, 36px) * 1.1);
3255 + min-width: calc(var(--wfp-btn-size, 36px) * 1.1);
3256 + border: none;
3257 + border-radius: 0;
3258 + opacity: 0.7;
3259 +}
3260 +
3261 +.waveform-btn-minimal:hover:not(:disabled) {
3262 + opacity: 1;
3263 + transform: none;
3264 +}
3265 +
3266 +.waveform-btn.waveform-btn-minimal svg {
3267 + width: calc(var(--wfp-btn-size, 36px) * 0.94);
3268 + height: calc(var(--wfp-btn-size, 36px) * 0.94);
3269 +}
3270 +
3239 3271 .waveform-btn:disabled {
3240 3272 cursor: not-allowed;
3241 3273 opacity: 0.3;
3242 3274 }
@@ -3249,14 +3281,48 @@
3249 3281 height: 100%;
3250 3282 }
3251 3283
3252 3284 .waveform-btn svg {
3253 - width: 16px;
3254 - height: 16px;
3285 + width: calc(var(--wfp-btn-size, 36px) * 0.45);
3286 + height: calc(var(--wfp-btn-size, 36px) * 0.45);
3255 3287 fill: currentColor;
3256 3288 display: block;
3257 3289 }
3258 3290
3291 +.waveform-btn-has-artwork {
3292 + --wfp-btn-size: 64px;
3293 + --wfp-btn-radius: 8px;
3294 + position: relative;
3295 + overflow: hidden;
3296 + border: none;
3297 + color: var(--wfp-btn-artwork-color);
3298 +}
3299 +
3300 +.waveform-btn > .waveform-btn-artwork {
3301 + display: block;
3302 + position: absolute;
3303 + inset: 0;
3304 + width: 100%;
3305 + height: 100%;
3306 + object-fit: cover;
3307 + pointer-events: none;
3308 + z-index: 0;
3309 +}
3310 +
3311 +.waveform-btn-has-artwork:after {
3312 + content: "";
3313 + position: absolute;
3314 + inset: 0;
3315 + background: var(--wfp-btn-artwork-scrim);
3316 + pointer-events: none;
3317 + z-index: 1;
3318 +}
3319 +
3320 +.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
3321 + position: relative;
3322 + z-index: 2;
3323 +}
3324 +
3259 3325 .waveform-icon-play svg {
3260 3326 margin-right: 1px;
3261 3327 }
3262 3328
@@ -3268,8 +3334,12 @@
3268 3334 min-width: 0;
3269 3335 width: 100%;
3270 3336 }
3271 3337
3338 +.waveform-container:focus-visible {
3339 + outline: 2px solid currentColor;
3340 +}
3341 +
3272 3342 .waveform-container canvas {
3273 3343 display: block;
3274 3344 width: 100%;
3275 3345 height: 100%;
@@ -3295,8 +3365,9 @@
3295 3365 min-width: 0;
3296 3366 }
3297 3367
3298 3368 .waveform-title {
3369 + color: var(--wfp-text-color);
3299 3370 white-space: nowrap;
3300 3371 overflow: hidden;
3301 3372 text-overflow: ellipsis;
3302 3373 font-weight: 500;
@@ -3301,9 +3372,10 @@
3301 3372 text-overflow: ellipsis;
3302 3373 font-weight: 500;
3303 3374 }
3304 3375
3305 -.waveform-subtitle {
3376 +.waveform-artist {
3377 + color: var(--wfp-text-secondary-color);
3306 3378 font-size: 11px;
3307 3379 white-space: nowrap;
3308 3380 overflow: hidden;
3309 3381 text-overflow: ellipsis;
@@ -3309,8 +3381,9 @@
3309 3381 text-overflow: ellipsis;
3310 3382 }
3311 3383
3312 3384 .waveform-time {
3385 + color: var(--wfp-text-secondary-color);
3313 3386 font-size: 11px;
3314 3387 white-space: nowrap;
3315 3388 flex-shrink: 0;
3316 3389 }
@@ -3315,8 +3388,9 @@
3315 3388 flex-shrink: 0;
3316 3389 }
3317 3390
3318 3391 .waveform-bpm {
3392 + color: var(--wfp-text-secondary-color);
3319 3393 font-size: 11px;
3320 3394 white-space: nowrap;
3321 3395 flex-shrink: 0;
3322 3396 display: inline-flex;
@@ -3372,8 +3446,14 @@
3372 3446 width: 4px;
3373 3447 z-index: 20;
3374 3448 }
3375 3449
3450 +.waveform-marker.active {
3451 + width: 4px;
3452 + background: currentColor;
3453 + z-index: 10;
3454 +}
3455 +
3376 3456 .waveform-marker-tooltip {
3377 3457 position: absolute;
3378 3458 bottom: calc(100% + 4px);
3379 3459 right: 50%;
@@ -3389,12 +3469,54 @@
3389 3469 transition: opacity 0.2s;
3390 3470 z-index: 1000;
3391 3471 }
3392 3472
3393 -.waveform-marker:hover .waveform-marker-tooltip {
3473 +.waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip {
3394 3474 opacity: 1;
3395 3475 }
3396 3476
3477 +.waveform-hover-time {
3478 + position: absolute;
3479 + bottom: calc(100% + 4px);
3480 + transform: translate(50%);
3481 + background: rgba(0, 0, 0, 0.9019607843);
3482 + color: #fff;
3483 + padding: 3px 7px;
3484 + border-radius: 4px;
3485 + font-size: 11px;
3486 + font-variant-numeric: tabular-nums;
3487 + white-space: nowrap;
3488 + pointer-events: none;
3489 + opacity: 0;
3490 + transition: opacity 0.15s;
3491 + z-index: 1000;
3492 +}
3493 +
3494 +.waveform-seek-handle {
3495 + position: absolute;
3496 + top: 50%;
3497 + right: 0;
3498 + width: 11px;
3499 + height: 11px;
3500 + border-radius: 50%;
3501 + background: #fff;
3502 + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3490196078);
3503 + transform: translate(50%, -50%) scale(0);
3504 + opacity: 0;
3505 + transition: opacity 0.12s ease, transform 0.12s ease;
3506 + pointer-events: none;
3507 + z-index: 6;
3508 +}
3509 +
3510 +.waveform-seek-handle.is-visible {
3511 + opacity: 1;
3512 + transform: translate(50%, -50%) scale(1);
3513 +}
3514 +
3515 +.waveform-seek-handle.is-active {
3516 + transform: translate(50%, -50%) scale(1.25);
3517 +}
3518 +
3397 3519 .waveform-btn:focus-visible {
3398 3520 outline: 2px solid currentColor;
3399 3521 outline-offset: 2px;
3400 3522 }
@@ -3463,15 +3585,15 @@
3463 3585 color: #fff;
3464 3586 }
3465 3587
3466 3588 .speed-option.active {
3467 - background: rgba(168, 85, 247, 0.2);
3468 - color: #a855f7;
3589 + background: rgba(255, 255, 255, 0.1607843137);
3590 + color: #fff;
3469 3591 font-weight: 600;
3470 3592 }
3471 3593
3472 3594 .waveform-player.waveform-focused {
3473 - outline: 2px solid rgba(168, 85, 247, 0.5);
3595 + outline: 2px solid var(--wfp-accent);
3474 3596 outline-offset: 2px;
3475 3597 border-radius: 4px;
3476 3598 }
3477 3599
@@ -3479,12 +3601,26 @@
3479 3601 outline: none;
3480 3602 }
3481 3603
3482 3604 .waveform-player:focus-visible {
3483 - outline: 1px solid rgba(168, 85, 247, 0.3);
3605 + outline: 1px solid var(--wfp-accent);
3484 3606 outline-offset: 1px;
3485 3607 }
3486 3608
3609 +.waveform-layout-preview .waveform-meta {
3610 + display: none !important;
3611 +}
3612 +
3613 +.waveform-layout-preview .waveform-info {
3614 + justify-content: center;
3615 +}
3616 +
3617 +.waveform-layout-preview .waveform-text {
3618 + flex: 0 1 auto;
3619 + align-items: center;
3620 + text-align: center;
3621 +}
3622 +
3487 3623 .waveform-player.waveform-focused {
3488 3624 outline: none;
3489 3625 }
3490 3626
@@ -3509,11 +3645,11 @@
3509 3645 }
3510 3646
3511 3647 @media (max-width: 480px) {
3512 3648 .waveform-btn {
3513 - width: 32px;
3514 - height: 32px;
3515 - min-width: 32px;
3649 + width: var(--wfp-btn-size, 32px);
3650 + height: var(--wfp-btn-size, 32px);
3651 + min-width: var(--wfp-btn-size, 32px);
3516 3652 }
3517 3653 .waveform-container {
3518 3654 min-height: 50px;
3519 3655 }
@@ -3519,15 +3655,21 @@
3519 3655 }
3520 3656 .waveform-info {
3521 3657 font-size: 12px;
3522 3658 }
3523 - .waveform-subtitle, .waveform-time, .waveform-bpm {
3659 + .waveform-artist, .waveform-time, .waveform-bpm {
3524 3660 font-size: 10px;
3525 3661 }
3526 3662 }
3663 +@media (prefers-reduced-motion: reduce) {
3664 + .waveform-player *, .waveform-player *:before, .waveform-player *:after {
3665 + transition-duration: 0.01ms !important;
3666 + animation-duration: 0.01ms !important;
3667 + animation-iteration-count: 1 !important;
3668 + }
3669 +}
3527 3670 .wp-block-playlist {
3528 - overflow: hidden;
3529 - overflow: clip;
3671 + box-sizing: border-box;
3530 3672 }
3531 3673 .wp-block-playlist .wp-block-playlist__waveform-player {
3532 3674 width: 100%;
3533 3675 margin: var(--wp--preset--spacing--20, 0.625em) 0;
@@ -3532,13 +3674,18 @@
3532 3674 width: 100%;
3533 3675 margin: var(--wp--preset--spacing--20, 0.625em) 0;
3534 3676 position: relative;
3535 3677 }
3678 +.wp-block-playlist .wp-block-playlist__waveform-player:focus-visible {
3679 + outline: revert;
3680 + outline-offset: revert;
3681 +}
3536 3682 .wp-block-playlist .waveform-track {
3537 3683 height: 100px;
3538 3684 gap: 0;
3539 3685 }
3540 3686 .wp-block-playlist .waveform-btn {
3687 + border: none;
3541 3688 border-radius: 0;
3542 3689 border-end-start-radius: 0.125rem;
3543 3690 border-start-start-radius: 0.125rem;
3544 3691 width: 100px;
@@ -3549,14 +3696,45 @@
3549 3696 }
3550 3697 .wp-block-playlist .waveform-btn:hover:not(:disabled) {
3551 3698 transform: none;
3552 3699 }
3700 +.wp-block-playlist .waveform-btn svg {
3701 + width: 3rem;
3702 + height: 3rem;
3703 +}
3704 +.wp-block-playlist .waveform-btn .waveform-icon-pause svg {
3705 + width: 2.625rem;
3706 + height: 2.625rem;
3707 +}
3708 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn {
3709 + background-image: var(--wp--playlist--play-button-artwork);
3710 + background-position: center;
3711 + background-size: cover;
3712 + color: #fff;
3713 +}
3714 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg {
3715 + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
3716 +}
3717 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg path {
3718 + fill: #fff !important;
3719 +}
3553 3720 .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn {
3554 3721 margin-bottom: 0;
3555 3722 }
3556 -.wp-block-playlist .waveform-subtitle {
3723 +.wp-block-playlist .waveform-btn:focus-visible,
3724 +.wp-block-playlist .waveform-container:focus-visible {
3725 + outline: revert;
3726 + outline-offset: revert;
3727 +}
3728 +.wp-block-playlist .waveform-artist {
3557 3729 opacity: 0.7;
3558 3730 }
3731 +.wp-block-playlist .waveform-info,
3732 +.wp-block-playlist .waveform-artist,
3733 +.wp-block-playlist .waveform-title,
3734 +.wp-block-playlist .waveform-time {
3735 + font-size: inherit;
3736 +}
3559 3737 .wp-block-playlist .wp-block-playlist__tracklist {
3560 3738 margin: 0;
3561 3739 padding-right: 0;
3562 3740 list-style: none;
@@ -3603,8 +3781,17 @@
3603 3781 margin-left: var(--wp--preset--spacing--20, 0.5em);
3604 3782 font-size: 0.85em;
3605 3783 opacity: 0.7;
3606 3784 }
3785 +.wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__image {
3786 + flex: 0 0 50px;
3787 + width: 50px;
3788 + height: 50px;
3789 + margin-left: var(--wp--preset--spacing--20, 0.5em);
3790 + border: 1px solid rgba(0, 0, 0, 0.08);
3791 + box-sizing: border-box;
3792 + object-fit: cover;
3793 +}
3607 3794 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
3608 3795 flex: 1 1 0;
3609 3796 min-width: 0;
3610 3797 }
@@ -3651,8 +3838,9 @@
3651 3838
3652 3839 .wp-block-post-author-biography {
3653 3840 box-sizing: border-box;
3654 3841 white-space: pre-wrap;
3842 + overflow-wrap: break-word;
3655 3843 }
3656 3844
3657 3845 :where(.wp-block-post-comments-form textarea),
3658 3846 :where(.wp-block-post-comments-form input:not([type=submit])) {
@@ -3701,14 +3889,8 @@
3701 3889 display: block;
3702 3890 box-sizing: border-box;
3703 3891 width: 100%;
3704 3892 }
3705 -.wp-block-post-comments-form .comment-form-author label,
3706 -.wp-block-post-comments-form .comment-form-email label,
3707 -.wp-block-post-comments-form .comment-form-url label {
3708 - display: block;
3709 - margin-bottom: 0.25em;
3710 -}
3711 3893 .wp-block-post-comments-form .comment-form-cookies-consent {
3712 3894 display: flex;
3713 3895 gap: 0.25em;
3714 3896 }
@@ -3722,8 +3904,15 @@
3722 3904 font-size: var(--wp--preset--font-size--medium, smaller);
3723 3905 margin-right: 0.5em;
3724 3906 }
3725 3907
3908 +:where(.wp-block-post-comments-form .comment-form-author label),
3909 +:where(.wp-block-post-comments-form .comment-form-email label),
3910 +:where(.wp-block-post-comments-form .comment-form-url label) {
3911 + display: block;
3912 + margin-bottom: 0.25em;
3913 +}
3914 +
3726 3915 .wp-block-post-comments-count {
3727 3916 box-sizing: border-box;
3728 3917 }
3729 3918
@@ -3825,8 +4014,11 @@
3825 4014 .wp-block-post-featured-image:where(.alignleft, .alignright) {
3826 4015 width: 100%;
3827 4016 }
3828 4017
4018 +.wp-block-post-navigation-link {
4019 + box-sizing: border-box;
4020 +}
3829 4021 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous {
3830 4022 display: inline-block;
3831 4023 margin-left: 1ch;
3832 4024 }
@@ -3855,13 +4047,13 @@
3855 4047 box-sizing: border-box;
3856 4048 }
3857 4049
3858 4050 .wp-block-post-title {
3859 - word-break: break-word;
4051 + word-break: normal;
4052 + overflow-wrap: anywhere;
3860 4053 box-sizing: border-box;
3861 4054 }
3862 4055 .wp-block-post-title :where(a) {
3863 - display: inline-block;
3864 4056 font-family: inherit;
3865 4057 font-size: inherit;
3866 4058 font-style: inherit;
3867 4059 font-weight: inherit;
@@ -3879,9 +4071,9 @@
3879 4071 white-space: pre-wrap;
3880 4072 }
3881 4073
3882 4074 :where(.wp-block-preformatted.has-background) {
3883 - padding: 1.25em 2.375em;
4075 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3884 4076 }
3885 4077
3886 4078 .wp-block-pullquote {
3887 4079 text-align: center;
@@ -4009,8 +4201,12 @@
4009 4201 margin-inline-start: auto;
4010 4202 margin-inline-end: auto;
4011 4203 }
4012 4204
4205 +:where(.wp-block-query-no-results) {
4206 + box-sizing: border-box;
4207 +}
4208 +
4013 4209 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type {
4014 4210 margin-inline-start: auto;
4015 4211 }
4016 4212 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-previous:first-child {
@@ -4066,9 +4262,8 @@
4066 4262 }
4067 4263
4068 4264 .wp-block-read-more {
4069 4265 display: block;
4070 - width: -moz-fit-content;
4071 4266 width: fit-content;
4072 4267 }
4073 4268 .wp-block-read-more:where(:not([style*=text-decoration])) {
4074 4269 text-decoration: none;
@@ -4149,9 +4344,9 @@
4149 4344 flex-wrap: nowrap;
4150 4345 max-width: 100%;
4151 4346 }
4152 4347
4153 -.wp-block-search__label {
4348 +:where(.wp-block-search__label) {
4154 4349 width: 100%;
4155 4350 }
4156 4351
4157 4352 .wp-block-search.wp-block-search__button-only .wp-block-search__button {
@@ -4202,11 +4397,9 @@
4202 4397 margin-left: 0;
4203 4398 min-width: 3rem;
4204 4399 border: 1px solid #949494;
4205 4400 text-decoration: unset !important;
4206 - -webkit-appearance: initial;
4207 - -moz-appearance: initial;
4208 - appearance: initial;
4401 + appearance: initial;
4209 4402 }
4210 4403
4211 4404 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
4212 4405 padding: 4px;
@@ -4774,9 +4967,8 @@
4774 4967 :where(.wp-block-tab-list button) {
4775 4968 box-sizing: border-box;
4776 4969 color: inherit;
4777 4970 display: block;
4778 - width: -moz-max-content;
4779 4971 width: max-content;
4780 4972 text-decoration: none;
4781 4973 cursor: pointer;
4782 4974 flex-basis: inherit !important;
@@ -4783,10 +4975,9 @@
4783 4975 flex-grow: inherit !important;
4784 4976 position: relative;
4785 4977 border: none;
4786 4978 background: none;
4787 - -moz-appearance: none;
4788 - appearance: none;
4979 + appearance: none;
4789 4980 -webkit-appearance: none;
4790 4981 margin: 0;
4791 4982 padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
4792 4983 font-size: inherit;
@@ -4806,11 +4997,17 @@
4806 4997 width: 100%;
4807 4998 bottom: 0;
4808 4999 }
4809 5000
4810 -.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
5001 +.wp-block-tab-panel:empty {
4811 5002 display: none !important;
4812 5003 }
5004 +.wp-block-tab-panel[hidden] {
5005 + box-shadow: none !important;
5006 + border: none !important;
5007 + margin-block-start: 0;
5008 + padding: 0 !important;
5009 +}
4813 5010
4814 5011 .wp-block-table {
4815 5012 overflow-x: auto;
4816 5013 }
@@ -5010,9 +5207,10 @@
5010 5207 box-sizing: border-box;
5011 5208 overflow: auto;
5012 5209 white-space: pre-wrap;
5013 5210 min-width: 1em;
5014 - word-break: break-word;
5211 + word-break: normal;
5212 + overflow-wrap: break-word;
5015 5213 }
5016 5214
5017 5215 :where(pre.wp-block-verse) {
5018 5216 font-family: inherit;
@@ -5027,10 +5225,9 @@
5027 5225 vertical-align: middle;
5028 5226 }
5029 5227 @supports (position: sticky) {
5030 5228 .wp-block-video [poster] {
5031 - -o-object-fit: cover;
5032 - object-fit: cover;
5229 + object-fit: cover;
5033 5230 }
5034 5231 }
5035 5232 .wp-block-video.aligncenter {
5036 5233 text-align: center;
@@ -5192,9 +5389,9 @@
5192 5389 overflow: hidden;
5193 5390 padding: 0;
5194 5391 position: absolute;
5195 5392 width: 1px;
5196 - word-wrap: normal !important;
5393 + overflow-wrap: normal !important;
5197 5394 word-break: normal !important;
5198 5395 }
5199 5396
5200 5397 .screen-reader-text:focus {
@@ -5303,16 +5500,12 @@
5303 5500 margin: 0 0 1em 0;
5304 5501 }
5305 5502
5306 5503 html :where(.is-position-sticky) {
5307 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5308 5504 --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
5309 - /* stylelint-enable length-zero-no-unit */
5310 5505 }
5311 5506
5312 5507 @media screen and (max-width: 600px) {
5313 5508 html :where(.is-position-sticky) {
5314 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5315 5509 --wp-admin--admin-bar--position-offset: 0px;
5316 - /* stylelint-enable length-zero-no-unit */
5317 5510 }
5318 5511 }