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.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 }
@@ -417,9 +426,10 @@
417 426 }
418 427 .wp-block-categories.wp-block-categories-dropdown.aligncenter {
419 428 text-align: center;
420 429 }
421 -.wp-block-categories .wp-block-categories__label:not(.screen-reader-text) {
430 +
431 +:where(.wp-block-categories__label:not(.screen-reader-text)) {
422 432 width: 100%;
423 433 display: block;
424 434 }
425 435
@@ -491,15 +501,15 @@
491 501 margin-bottom: 1.75em;
492 502 }
493 503
494 504 :where(.wp-block-columns.has-background) {
495 - padding: 1.25em 2.375em;
505 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
496 506 }
497 507
498 508 .wp-block-column {
499 509 flex-grow: 1;
500 510 min-width: 0;
501 - word-break: break-word;
511 + word-break: normal;
502 512 overflow-wrap: break-word;
503 513 /**
504 514 * Individual Column Alignment
505 515 */
@@ -578,9 +588,9 @@
578 588 font-size: 0.875em;
579 589 line-height: 1.5;
580 590 }
581 591 .wp-block-post-comments .comment-meta b {
582 - font-weight: normal;
592 + font-weight: 400;
583 593 }
584 594 .wp-block-post-comments .comment-meta .comment-awaiting-moderation {
585 595 margin-top: 1em;
586 596 margin-bottom: 1em;
@@ -588,15 +598,8 @@
588 598 }
589 599 .wp-block-post-comments .comment-body .commentmetadata {
590 600 font-size: 0.875em;
591 601 }
592 -.wp-block-post-comments .comment-form-comment label,
593 -.wp-block-post-comments .comment-form-author label,
594 -.wp-block-post-comments .comment-form-email label,
595 -.wp-block-post-comments .comment-form-url label {
596 - display: block;
597 - margin-bottom: 0.25em;
598 -}
599 602 .wp-block-post-comments .comment-form textarea,
600 603 .wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]) {
601 604 display: block;
602 605 box-sizing: border-box;
@@ -630,8 +633,16 @@
630 633 .wp-block-post-comments input:not([type=submit]):not([type=checkbox]) {
631 634 padding: calc(0.667em + 2px);
632 635 }
633 636
637 +:where(.wp-block-post-comments .comment-form-comment label),
638 +:where(.wp-block-post-comments .comment-form-author label),
639 +:where(.wp-block-post-comments .comment-form-email label),
640 +:where(.wp-block-post-comments .comment-form-url label) {
641 + display: block;
642 + margin-bottom: 0.25em;
643 +}
644 +
634 645 :where(.wp-block-post-comments input[type=submit]) {
635 646 border: none;
636 647 }
637 648
@@ -683,9 +694,8 @@
683 694 }
684 695 .wp-block-comment-template.aligncenter {
685 696 margin-left: auto;
686 697 margin-right: auto;
687 - width: -moz-fit-content;
688 698 width: fit-content;
689 699 }
690 700 .wp-block-comment-template.alignright {
691 701 float: right;
@@ -1007,14 +1017,19 @@
1007 1017 width: 100%;
1008 1018 height: 100%;
1009 1019 max-width: none;
1010 1020 max-height: none;
1011 - -o-object-fit: cover;
1012 - object-fit: cover;
1021 + object-fit: cover;
1013 1022 outline: none;
1014 1023 border: none;
1015 1024 box-shadow: none;
1016 1025 }
1026 +@supports (-webkit-hyphens: none) {
1027 + .wp-block-cover-image.has-aspect-ratio,
1028 + .wp-block-cover.has-aspect-ratio {
1029 + min-height: fit-content !important;
1030 + }
1031 +}
1017 1032 .wp-block-cover-image .wp-block-cover__embed-background,
1018 1033 .wp-block-cover .wp-block-cover__embed-background {
1019 1034 position: absolute;
1020 1035 top: 0;
@@ -1305,57 +1320,8 @@
1305 1320 opacity: 0.85;
1306 1321 text-decoration: none;
1307 1322 }
1308 1323
1309 -.wp-block-form-input__label {
1310 - width: 100%;
1311 - display: flex;
1312 - flex-direction: column;
1313 - gap: 0.25em;
1314 - margin-bottom: 0.5em;
1315 -}
1316 -.wp-block-form-input__label.is-label-inline {
1317 - flex-direction: row;
1318 - gap: 0.5em;
1319 - align-items: center;
1320 -}
1321 -.wp-block-form-input__label.is-label-inline .wp-block-form-input__label-content {
1322 - margin-bottom: 0.5em;
1323 -}
1324 -.wp-block-form-input__label:has(input[type=checkbox]) {
1325 - flex-direction: row;
1326 - width: -moz-fit-content;
1327 - width: fit-content;
1328 -}
1329 -.wp-block-form-input__label:has(input[type=checkbox]) .wp-block-form-input__label-content {
1330 - margin: 0;
1331 -}
1332 -.wp-block-form-input__label:has(.wp-block-form-input__label-content + input[type=checkbox]) {
1333 - /* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
1334 - flex-direction: row-reverse;
1335 -}
1336 -
1337 -.wp-block-form-input__label-content {
1338 - width: -moz-fit-content;
1339 - width: fit-content;
1340 -}
1341 -
1342 -:where(.wp-block-form-input__input) {
1343 - padding: 0 0.5em;
1344 - font-size: 1em;
1345 - margin-bottom: 0.5em;
1346 -}
1347 -: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] {
1348 - min-height: 2em;
1349 - line-height: 2;
1350 - border-width: 1px;
1351 - border-style: solid;
1352 -}
1353 -
1354 -textarea.wp-block-form-input__input {
1355 - min-height: 10em;
1356 -}
1357 -
1358 1324 .wp-block-gallery:not(.has-nested-images),
1359 1325 .blocks-gallery-grid:not(.has-nested-images) {
1360 1326 display: flex;
1361 1327 flex-wrap: wrap;
@@ -1437,10 +1403,9 @@
1437 1403 .blocks-gallery-grid:not(.has-nested-images).is-cropped .blocks-gallery-item img {
1438 1404 width: 100%;
1439 1405 height: 100%;
1440 1406 flex: 1;
1441 - -o-object-fit: cover;
1442 - object-fit: cover;
1407 + object-fit: cover;
1443 1408 }
1444 1409 .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-image, .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
1445 1410 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-image,
1446 1411 .blocks-gallery-grid:not(.has-nested-images).columns-1 .blocks-gallery-item {
@@ -1545,37 +1510,104 @@
1545 1510 .wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
1546 1511 align-self: flex-start;
1547 1512 }
1548 1513
1549 -figure.wp-block-gallery.has-nested-images {
1514 +figure.wp-block-gallery.has-nested-images:where(.is-layout-flex) {
1550 1515 align-items: normal;
1551 1516 }
1552 1517
1553 -.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
1518 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image:not(#individual-image) {
1554 1519 width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
1555 1520 margin: 0;
1556 1521 }
1557 -.wp-block-gallery.has-nested-images figure.wp-block-image {
1522 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image {
1558 1523 display: flex;
1559 1524 flex-grow: 1;
1560 1525 justify-content: center;
1561 - position: relative;
1562 1526 flex-direction: column;
1563 1527 max-width: 100%;
1564 1528 box-sizing: border-box;
1565 1529 }
1566 -.wp-block-gallery.has-nested-images figure.wp-block-image > div,
1567 -.wp-block-gallery.has-nested-images figure.wp-block-image > a {
1530 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > div,
1531 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image > a {
1568 1532 margin: 0;
1569 1533 flex-direction: column;
1570 1534 flex-grow: 1;
1571 1535 }
1572 -.wp-block-gallery.has-nested-images figure.wp-block-image img {
1536 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figure.wp-block-image img {
1573 1537 display: block;
1574 1538 height: auto;
1575 1539 max-width: 100% !important;
1576 1540 width: auto;
1577 1541 }
1542 +.wp-block-gallery.has-nested-images:where(.is-layout-flex) figcaption {
1543 + flex-grow: 1;
1544 + flex-basis: 100%;
1545 + text-align: center;
1546 +}
1547 +.wp-block-gallery.has-nested-images:where(.is-layout-flex):not(.is-cropped) figure.wp-block-image:not(#individual-image) {
1548 + margin-top: 0;
1549 + margin-bottom: auto;
1550 +}
1551 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) {
1552 + align-self: inherit;
1553 +}
1554 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
1555 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) > a {
1556 + display: flex;
1557 +}
1558 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) a,
1559 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).is-cropped figure.wp-block-image:not(#individual-image) img {
1560 + width: 100%;
1561 + flex: 1 0 0%;
1562 + height: 100%;
1563 + object-fit: cover;
1564 +}
1565 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-1 figure.wp-block-image:not(#individual-image) {
1566 + width: 100%;
1567 +}
1568 +@media (min-width: 600px) {
1569 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-3 figure.wp-block-image:not(#individual-image) {
1570 + width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1571 + }
1572 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-4 figure.wp-block-image:not(#individual-image) {
1573 + width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
1574 + }
1575 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-5 figure.wp-block-image:not(#individual-image) {
1576 + width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
1577 + }
1578 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-6 figure.wp-block-image:not(#individual-image) {
1579 + width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
1580 + }
1581 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-7 figure.wp-block-image:not(#individual-image) {
1582 + width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
1583 + }
1584 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-8 figure.wp-block-image:not(#individual-image) {
1585 + width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
1586 + }
1587 + .wp-block-gallery.has-nested-images:where(.is-layout-flex).columns-default figure.wp-block-image:not(#individual-image) {
1588 + width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1589 + }
1590 + .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),
1591 + .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) {
1592 + width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
1593 + }
1594 + .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) {
1595 + width: 100%;
1596 + }
1597 +}
1598 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).alignleft, .wp-block-gallery.has-nested-images:where(.is-layout-flex).alignright {
1599 + max-width: 420px;
1600 + width: 100%;
1601 +}
1602 +.wp-block-gallery.has-nested-images:where(.is-layout-flex).aligncenter {
1603 + justify-content: center;
1604 +}
1605 +
1606 +.wp-block-gallery.has-nested-images figure.wp-block-image {
1607 + position: relative;
1608 + margin: 0;
1609 +}
1578 1610 .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before,
1579 1611 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
1580 1612 position: absolute;
1581 1613 bottom: 0;
@@ -1588,10 +1620,9 @@
1588 1620 height: 100%;
1589 1621 max-height: 3em;
1590 1622 pointer-events: none;
1591 1623 backdrop-filter: blur(3px);
1592 - -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1593 - mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1624 + mask-image: linear-gradient(0deg, #000 20%, transparent 100%);
1594 1625 }
1595 1626 .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
1596 1627 color: #fff;
1597 1628 text-shadow: 0 0 1.5px #000;
@@ -1662,72 +1693,13 @@
1662 1693 }
1663 1694 .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 {
1664 1695 content: none;
1665 1696 }
1666 -.wp-block-gallery.has-nested-images figcaption {
1667 - flex-grow: 1;
1668 - flex-basis: 100%;
1697 +
1698 +:where(.wp-block-gallery.has-nested-images.is-layout-grid) > .blocks-gallery-caption {
1699 + grid-column: 1/-1;
1669 1700 text-align: center;
1670 1701 }
1671 -.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
1672 - margin-top: 0;
1673 - margin-bottom: auto;
1674 -}
1675 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
1676 - align-self: inherit;
1677 -}
1678 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
1679 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
1680 - display: flex;
1681 -}
1682 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
1683 -.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
1684 - width: 100%;
1685 - flex: 1 0 0%;
1686 - height: 100%;
1687 - -o-object-fit: cover;
1688 - object-fit: cover;
1689 -}
1690 -.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
1691 - width: 100%;
1692 -}
1693 -@media (min-width: 600px) {
1694 - .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
1695 - width: calc(33.3333333333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1696 - }
1697 - .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
1698 - width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75);
1699 - }
1700 - .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
1701 - width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8);
1702 - }
1703 - .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
1704 - width: calc(16.6666666667% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8333333333);
1705 - }
1706 - .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
1707 - width: calc(14.2857142857% - var(--wp--style--unstable-gallery-gap, 16px) * 0.8571428571);
1708 - }
1709 - .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
1710 - width: calc(12.5% - var(--wp--style--unstable-gallery-gap, 16px) * 0.875);
1711 - }
1712 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
1713 - width: calc(33.33% - var(--wp--style--unstable-gallery-gap, 16px) * 0.6666666667);
1714 - }
1715 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
1716 - .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) {
1717 - width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) * 0.5);
1718 - }
1719 - .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
1720 - width: 100%;
1721 - }
1722 -}
1723 -.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
1724 - max-width: 420px;
1725 - width: 100%;
1726 -}
1727 -.wp-block-gallery.has-nested-images.aligncenter {
1728 - justify-content: center;
1729 -}
1730 1702
1731 1703 .wp-block-group {
1732 1704 box-sizing: border-box;
1733 1705 }
@@ -1741,9 +1713,9 @@
1741 1713 h3:where(.wp-block-heading).has-background,
1742 1714 h4:where(.wp-block-heading).has-background,
1743 1715 h5:where(.wp-block-heading).has-background,
1744 1716 h6:where(.wp-block-heading).has-background {
1745 - padding: 1.25em 2.375em;
1717 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
1746 1718 }
1747 1719 h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]), h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),
1748 1720 h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),
1749 1721 h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),
@@ -1786,12 +1758,16 @@
1786 1758 :where(.wp-block-icon) svg {
1787 1759 width: 100%;
1788 1760 height: 100%;
1789 1761 }
1762 +:where(.wp-block-icon) svg :where(path, rect, circle, ellipse, line, polygon, polyline) {
1763 + vector-effect: none;
1764 +}
1790 1765
1791 1766 .wp-block-image > a,
1792 1767 .wp-block-image > figure > a {
1793 1768 display: inline-block;
1769 + color: inherit;
1794 1770 }
1795 1771 .wp-block-image img {
1796 1772 height: auto;
1797 1773 max-width: 100%;
@@ -1866,20 +1842,15 @@
1866 1842 }
1867 1843 .wp-block-image.is-style-circle-mask img {
1868 1844 border-radius: 9999px;
1869 1845 }
1870 -@supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
1846 +@supports (mask-image: none) or (-webkit-mask-image: none) {
1871 1847 .wp-block-image.is-style-circle-mask img {
1872 - /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1873 - -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>');
1874 - 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>');
1848 + 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>');
1875 1849 mask-mode: alpha;
1876 - -webkit-mask-repeat: no-repeat;
1877 - mask-repeat: no-repeat;
1878 - -webkit-mask-size: contain;
1879 - mask-size: contain;
1880 - -webkit-mask-position: center;
1881 - mask-position: center;
1850 + mask-repeat: no-repeat;
1851 + mask-size: contain;
1852 + mask-position: center;
1882 1853 border-radius: 0;
1883 1854 }
1884 1855 }
1885 1856
@@ -2259,49 +2230,54 @@
2259 2230 .wp-block-latest-posts.wp-block-latest-posts__list li {
2260 2231 clear: both;
2261 2232 overflow-wrap: break-word;
2262 2233 }
2263 -.wp-block-latest-posts.is-grid {
2234 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
2264 2235 display: flex;
2265 2236 flex-wrap: wrap;
2266 2237 }
2267 -.wp-block-latest-posts.is-grid li {
2238 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
2268 2239 margin: 0 1.25em 1.25em 0;
2269 2240 width: 100%;
2270 2241 }
2271 2242 @media (min-width: 600px) {
2272 - .wp-block-latest-posts.columns-2 li {
2243 + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li {
2273 2244 width: calc(100% / 2 - 1.25em + 1.25em / 2);
2274 2245 }
2275 - .wp-block-latest-posts.columns-2 li:nth-child(2n) {
2246 + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li:nth-child(2n) {
2276 2247 margin-right: 0;
2277 2248 }
2278 - .wp-block-latest-posts.columns-3 li {
2249 + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li {
2279 2250 width: calc(100% / 3 - 1.25em + 1.25em / 3);
2280 2251 }
2281 - .wp-block-latest-posts.columns-3 li:nth-child(3n) {
2252 + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li:nth-child(3n) {
2282 2253 margin-right: 0;
2283 2254 }
2284 - .wp-block-latest-posts.columns-4 li {
2255 + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li {
2285 2256 width: calc(100% / 4 - 1.25em + 1.25em / 4);
2286 2257 }
2287 - .wp-block-latest-posts.columns-4 li:nth-child(4n) {
2258 + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li:nth-child(4n) {
2288 2259 margin-right: 0;
2289 2260 }
2290 - .wp-block-latest-posts.columns-5 li {
2261 + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li {
2291 2262 width: calc(100% / 5 - 1.25em + 1.25em / 5);
2292 2263 }
2293 - .wp-block-latest-posts.columns-5 li:nth-child(5n) {
2264 + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li:nth-child(5n) {
2294 2265 margin-right: 0;
2295 2266 }
2296 - .wp-block-latest-posts.columns-6 li {
2267 + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li {
2297 2268 width: calc(100% / 6 - 1.25em + 1.25em / 6);
2298 2269 }
2299 - .wp-block-latest-posts.columns-6 li:nth-child(6n) {
2270 + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li:nth-child(6n) {
2300 2271 margin-right: 0;
2301 2272 }
2302 2273 }
2303 2274
2275 +@media (max-width: 600px) {
2276 + .wp-block-latest-posts-is-layout-grid[class*=columns-]:not(.has-native-responsive-grid) {
2277 + grid-template-columns: 1fr;
2278 + }
2279 +}
2304 2280 :root :where(.wp-block-latest-posts.is-grid) {
2305 2281 padding: 0;
2306 2282 }
2307 2283 :root :where(.wp-block-latest-posts.wp-block-latest-posts__list) {
@@ -2350,9 +2326,9 @@
2350 2326 box-sizing: border-box;
2351 2327 }
2352 2328
2353 2329 :root :where(.wp-block-list.has-background) {
2354 - padding: 1.25em 2.375em;
2330 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
2355 2331 }
2356 2332
2357 2333 .wp-block-loginout {
2358 2334 box-sizing: border-box;
@@ -2455,9 +2431,9 @@
2455 2431 height: 1px;
2456 2432 padding: 0;
2457 2433 margin: -1px;
2458 2434 overflow: hidden;
2459 - clip: rect(0, 0, 0, 0);
2435 + clip-path: inset(50%);
2460 2436 border: 0;
2461 2437 }
2462 2438
2463 2439 /* Image fill for versions 8 and onwards */
@@ -2475,10 +2451,9 @@
2475 2451 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
2476 2452 position: absolute;
2477 2453 width: 100%;
2478 2454 height: 100%;
2479 - -o-object-fit: cover;
2480 - object-fit: cover;
2455 + object-fit: cover;
2481 2456 }
2482 2457
2483 2458 /*
2484 2459 * Here we here not able to use a mobile first CSS approach.
@@ -2574,9 +2549,16 @@
2574 2549 .wp-block-navigation.is-vertical {
2575 2550 --navigation-layout-direction: column;
2576 2551 --navigation-layout-justify: initial;
2577 2552 --navigation-layout-align: flex-start;
2553 + text-align: var(--navigation-layout-text-align, inherit);
2578 2554 }
2555 +.wp-block-navigation.is-vertical .wp-block-navigation-item__content {
2556 + text-align: inherit;
2557 +}
2558 +.wp-block-navigation.is-vertical .wp-block-navigation-item:not(.open-always) > .wp-block-navigation__submenu-container {
2559 + text-align: initial;
2560 +}
2579 2561 .wp-block-navigation.no-wrap {
2580 2562 --navigation-layout-wrap: nowrap;
2581 2563 }
2582 2564 .wp-block-navigation.items-justified-center {
@@ -2581,8 +2563,9 @@
2581 2563 }
2582 2564 .wp-block-navigation.items-justified-center {
2583 2565 --navigation-layout-justification-setting: center;
2584 2566 --navigation-layout-justify: center;
2567 + --navigation-layout-text-align: center;
2585 2568 }
2586 2569 .wp-block-navigation.items-justified-center.is-vertical {
2587 2570 --navigation-layout-align: center;
2588 2571 }
@@ -2588,8 +2571,9 @@
2588 2571 }
2589 2572 .wp-block-navigation.items-justified-right {
2590 2573 --navigation-layout-justification-setting: flex-end;
2591 2574 --navigation-layout-justify: flex-end;
2575 + --navigation-layout-text-align: end;
2592 2576 }
2593 2577 .wp-block-navigation.items-justified-right.is-vertical {
2594 2578 --navigation-layout-align: flex-end;
2595 2579 }
@@ -2660,9 +2644,9 @@
2660 2644 transform: rotate(-90deg);
2661 2645 }
2662 2646 }
2663 2647 @media (hover: hover) {
2664 - .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
2648 + .wp-block-navigation .has-child:not(.open-on-click):not(.open-always):hover > .wp-block-navigation__submenu-container {
2665 2649 visibility: visible;
2666 2650 overflow: visible;
2667 2651 opacity: 1;
2668 2652 width: auto;
@@ -2669,10 +2653,9 @@
2669 2653 height: auto;
2670 2654 min-width: 200px;
2671 2655 }
2672 2656 }
2673 -.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
2674 -.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
2657 +.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 {
2675 2658 visibility: visible;
2676 2659 overflow: visible;
2677 2660 opacity: 1;
2678 2661 width: auto;
@@ -2720,8 +2703,9 @@
2720 2703 position: static;
2721 2704 border: none;
2722 2705 background-color: transparent;
2723 2706 color: inherit;
2707 + box-shadow: none !important;
2724 2708 }
2725 2709
2726 2710 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
2727 2711 left: 0;
@@ -2927,8 +2911,9 @@
2927 2911 display: flex;
2928 2912 flex-direction: column;
2929 2913 flex-wrap: nowrap;
2930 2914 align-items: var(--navigation-layout-justification-setting, inherit);
2915 + text-align: var(--navigation-layout-text-align, inherit);
2931 2916 }
2932 2917 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content,
2933 2918 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list,
2934 2919 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
@@ -2954,11 +2939,13 @@
2954 2939 gap: inherit;
2955 2940 }
2956 2941 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
2957 2942 padding-top: var(--wp--style--block-gap, 2em);
2943 + text-align: inherit;
2958 2944 }
2959 2945 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
2960 2946 padding: 0;
2947 + text-align: inherit;
2961 2948 }
2962 2949 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
2963 2950 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
2964 2951 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list {
@@ -2972,8 +2959,11 @@
2972 2959 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-page-list {
2973 2960 color: inherit !important;
2974 2961 background: transparent !important;
2975 2962 }
2963 +.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation-item .wp-block-navigation__submenu-container {
2964 + box-shadow: none !important;
2965 +}
2976 2966 .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 {
2977 2967 right: auto;
2978 2968 left: auto;
2979 2969 }
@@ -3019,9 +3009,9 @@
3019 3009 }
3020 3010
3021 3011 .wp-block-navigation__toggle_button_label {
3022 3012 font-size: 1rem;
3023 - font-weight: bold;
3013 + font-weight: 700;
3024 3014 }
3025 3015
3026 3016 .wp-block-navigation__responsive-container-open,
3027 3017 .wp-block-navigation__responsive-container-close {
@@ -3129,8 +3119,20 @@
3129 3119 margin-left: 8px;
3130 3120 text-transform: uppercase;
3131 3121 }
3132 3122
3123 +:where(.wp-block-navigation-overlay-close) {
3124 + color: inherit;
3125 + font-family: inherit;
3126 + font-size: inherit;
3127 + font-style: inherit;
3128 + font-weight: inherit;
3129 + letter-spacing: inherit;
3130 + line-height: inherit;
3131 + text-transform: inherit;
3132 + border: none;
3133 +}
3134 +
3133 3135 .wp-block-navigation-overlay-close {
3134 3136 display: inline-flex;
3135 3137 align-items: center;
3136 3138 justify-content: center;
@@ -3135,9 +3137,8 @@
3135 3137 align-items: center;
3136 3138 justify-content: center;
3137 3139 gap: 0.5em;
3138 3140 padding: 0;
3139 - border: none;
3140 3141 background: transparent;
3141 3142 cursor: pointer;
3142 3143 text-decoration: none;
3143 3144 }
@@ -3207,9 +3208,9 @@
3207 3208 overflow: hidden;
3208 3209 }
3209 3210
3210 3211 :root :where(p.has-background) {
3211 - padding: 1.25em 2.375em;
3212 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3212 3213 }
3213 3214
3214 3215 :where(p.has-text-color:not(.has-link-color)) a {
3215 3216 color: inherit;
@@ -3222,11 +3223,23 @@
3222 3223
3223 3224 .waveform-player {
3224 3225 font-family: inherit;
3225 3226 color: inherit;
3226 - line-height: 1.4;
3227 + line-height: var(--waveform-line-height, 1.4);
3228 + --wfp-accent: #71717a;
3229 + --wfp-button-color: rgba(255, 255, 255, .9);
3230 + --wfp-text-color: #ffffff;
3231 + --wfp-text-secondary-color: rgba(255, 255, 255, .6);
3232 + --wfp-btn-artwork-color: rgba(255, 255, 255, .9);
3233 + --wfp-btn-artwork-scrim: rgba(0, 0, 0, .5);
3227 3234 }
3228 3235
3236 +.waveform-player.waveform-theme-light {
3237 + --wfp-button-color: rgba(0, 0, 0, .8);
3238 + --wfp-text-color: #333333;
3239 + --wfp-text-secondary-color: rgba(0, 0, 0, .6);
3240 +}
3241 +
3229 3242 .waveform-player * {
3230 3243 box-sizing: border-box;
3231 3244 }
3232 3245
@@ -3232,26 +3245,26 @@
3232 3245
3233 3246 .waveform-body {
3234 3247 display: flex;
3235 3248 flex-direction: column;
3236 - gap: 8px;
3249 + gap: var(--waveform-body-gap, 8px);
3237 3250 }
3238 3251
3239 3252 .waveform-track {
3240 3253 display: flex;
3241 3254 align-items: center;
3242 - gap: 12px;
3255 + gap: var(--waveform-track-gap, 12px);
3243 3256 position: relative;
3244 3257 }
3245 3258
3246 3259 .waveform-btn {
3247 - width: 36px;
3248 - height: 36px;
3249 - min-width: 36px;
3250 - border-radius: 50%;
3260 + width: var(--wfp-btn-size, 36px);
3261 + height: var(--wfp-btn-size, 36px);
3262 + min-width: var(--wfp-btn-size, 36px);
3263 + border-radius: var(--wfp-btn-radius, 50%);
3251 3264 border: 2px solid currentColor;
3252 3265 background: transparent;
3253 - color: inherit;
3266 + color: var(--wfp-button-color, inherit);
3254 3267 cursor: pointer;
3255 3268 display: flex;
3256 3269 align-items: center;
3257 3270 justify-content: center;
@@ -3265,8 +3278,27 @@
3265 3278 opacity: 1;
3266 3279 transform: scale(1.05);
3267 3280 }
3268 3281
3282 +.waveform-btn-minimal {
3283 + width: calc(var(--wfp-btn-size, 36px) * 1.1);
3284 + height: calc(var(--wfp-btn-size, 36px) * 1.1);
3285 + min-width: calc(var(--wfp-btn-size, 36px) * 1.1);
3286 + border: none;
3287 + border-radius: 0;
3288 + opacity: 0.7;
3289 +}
3290 +
3291 +.waveform-btn-minimal:hover:not(:disabled) {
3292 + opacity: 1;
3293 + transform: none;
3294 +}
3295 +
3296 +.waveform-btn.waveform-btn-minimal svg {
3297 + width: calc(var(--wfp-btn-size, 36px) * 0.94);
3298 + height: calc(var(--wfp-btn-size, 36px) * 0.94);
3299 +}
3300 +
3269 3301 .waveform-btn:disabled {
3270 3302 cursor: not-allowed;
3271 3303 opacity: 0.3;
3272 3304 }
@@ -3279,14 +3311,48 @@
3279 3311 height: 100%;
3280 3312 }
3281 3313
3282 3314 .waveform-btn svg {
3283 - width: 16px;
3284 - height: 16px;
3315 + width: calc(var(--wfp-btn-size, 36px) * 0.45);
3316 + height: calc(var(--wfp-btn-size, 36px) * 0.45);
3285 3317 fill: currentColor;
3286 3318 display: block;
3287 3319 }
3288 3320
3321 +.waveform-btn-has-artwork {
3322 + --wfp-btn-size: 64px;
3323 + --wfp-btn-radius: 8px;
3324 + position: relative;
3325 + overflow: hidden;
3326 + border: none;
3327 + color: var(--wfp-btn-artwork-color);
3328 +}
3329 +
3330 +.waveform-btn > .waveform-btn-artwork {
3331 + display: block;
3332 + position: absolute;
3333 + inset: 0;
3334 + width: 100%;
3335 + height: 100%;
3336 + object-fit: cover;
3337 + pointer-events: none;
3338 + z-index: 0;
3339 +}
3340 +
3341 +.waveform-btn-has-artwork:after {
3342 + content: "";
3343 + position: absolute;
3344 + inset: 0;
3345 + background: var(--wfp-btn-artwork-scrim);
3346 + pointer-events: none;
3347 + z-index: 1;
3348 +}
3349 +
3350 +.waveform-btn-has-artwork > :not(.waveform-btn-artwork) {
3351 + position: relative;
3352 + z-index: 2;
3353 +}
3354 +
3289 3355 .waveform-icon-play svg {
3290 3356 margin-left: 1px;
3291 3357 }
3292 3358
@@ -3298,8 +3364,12 @@
3298 3364 min-width: 0;
3299 3365 width: 100%;
3300 3366 }
3301 3367
3368 +.waveform-container:focus-visible {
3369 + outline: 2px solid currentColor;
3370 +}
3371 +
3302 3372 .waveform-container canvas {
3303 3373 display: block;
3304 3374 width: 100%;
3305 3375 height: 100%;
@@ -3325,8 +3395,9 @@
3325 3395 min-width: 0;
3326 3396 }
3327 3397
3328 3398 .waveform-title {
3399 + color: var(--wfp-text-color);
3329 3400 white-space: nowrap;
3330 3401 overflow: hidden;
3331 3402 text-overflow: ellipsis;
3332 3403 font-weight: 500;
@@ -3331,9 +3402,10 @@
3331 3402 text-overflow: ellipsis;
3332 3403 font-weight: 500;
3333 3404 }
3334 3405
3335 -.waveform-subtitle {
3406 +.waveform-artist {
3407 + color: var(--wfp-text-secondary-color);
3336 3408 font-size: 11px;
3337 3409 white-space: nowrap;
3338 3410 overflow: hidden;
3339 3411 text-overflow: ellipsis;
@@ -3339,8 +3411,9 @@
3339 3411 text-overflow: ellipsis;
3340 3412 }
3341 3413
3342 3414 .waveform-time {
3415 + color: var(--wfp-text-secondary-color);
3343 3416 font-size: 11px;
3344 3417 white-space: nowrap;
3345 3418 flex-shrink: 0;
3346 3419 }
@@ -3345,8 +3418,9 @@
3345 3418 flex-shrink: 0;
3346 3419 }
3347 3420
3348 3421 .waveform-bpm {
3422 + color: var(--wfp-text-secondary-color);
3349 3423 font-size: 11px;
3350 3424 white-space: nowrap;
3351 3425 flex-shrink: 0;
3352 3426 display: inline-flex;
@@ -3402,8 +3476,14 @@
3402 3476 width: 4px;
3403 3477 z-index: 20;
3404 3478 }
3405 3479
3480 +.waveform-marker.active {
3481 + width: 4px;
3482 + background: currentColor;
3483 + z-index: 10;
3484 +}
3485 +
3406 3486 .waveform-marker-tooltip {
3407 3487 position: absolute;
3408 3488 bottom: calc(100% + 4px);
3409 3489 left: 50%;
@@ -3419,12 +3499,54 @@
3419 3499 transition: opacity 0.2s;
3420 3500 z-index: 1000;
3421 3501 }
3422 3502
3423 -.waveform-marker:hover .waveform-marker-tooltip {
3503 +.waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip {
3424 3504 opacity: 1;
3425 3505 }
3426 3506
3507 +.waveform-hover-time {
3508 + position: absolute;
3509 + bottom: calc(100% + 4px);
3510 + transform: translate(-50%);
3511 + background: rgba(0, 0, 0, 0.9019607843);
3512 + color: #fff;
3513 + padding: 3px 7px;
3514 + border-radius: 4px;
3515 + font-size: 11px;
3516 + font-variant-numeric: tabular-nums;
3517 + white-space: nowrap;
3518 + pointer-events: none;
3519 + opacity: 0;
3520 + transition: opacity 0.15s;
3521 + z-index: 1000;
3522 +}
3523 +
3524 +.waveform-seek-handle {
3525 + position: absolute;
3526 + top: 50%;
3527 + left: 0;
3528 + width: 11px;
3529 + height: 11px;
3530 + border-radius: 50%;
3531 + background: #fff;
3532 + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3490196078);
3533 + transform: translate(-50%, -50%) scale(0);
3534 + opacity: 0;
3535 + transition: opacity 0.12s ease, transform 0.12s ease;
3536 + pointer-events: none;
3537 + z-index: 6;
3538 +}
3539 +
3540 +.waveform-seek-handle.is-visible {
3541 + opacity: 1;
3542 + transform: translate(-50%, -50%) scale(1);
3543 +}
3544 +
3545 +.waveform-seek-handle.is-active {
3546 + transform: translate(-50%, -50%) scale(1.25);
3547 +}
3548 +
3427 3549 .waveform-btn:focus-visible {
3428 3550 outline: 2px solid currentColor;
3429 3551 outline-offset: 2px;
3430 3552 }
@@ -3493,15 +3615,15 @@
3493 3615 color: #fff;
3494 3616 }
3495 3617
3496 3618 .speed-option.active {
3497 - background: rgba(168, 85, 247, 0.2);
3498 - color: #a855f7;
3619 + background: rgba(255, 255, 255, 0.1607843137);
3620 + color: #fff;
3499 3621 font-weight: 600;
3500 3622 }
3501 3623
3502 3624 .waveform-player.waveform-focused {
3503 - outline: 2px solid rgba(168, 85, 247, 0.5);
3625 + outline: 2px solid var(--wfp-accent);
3504 3626 outline-offset: 2px;
3505 3627 border-radius: 4px;
3506 3628 }
3507 3629
@@ -3509,12 +3631,26 @@
3509 3631 outline: none;
3510 3632 }
3511 3633
3512 3634 .waveform-player:focus-visible {
3513 - outline: 1px solid rgba(168, 85, 247, 0.3);
3635 + outline: 1px solid var(--wfp-accent);
3514 3636 outline-offset: 1px;
3515 3637 }
3516 3638
3639 +.waveform-layout-preview .waveform-meta {
3640 + display: none !important;
3641 +}
3642 +
3643 +.waveform-layout-preview .waveform-info {
3644 + justify-content: center;
3645 +}
3646 +
3647 +.waveform-layout-preview .waveform-text {
3648 + flex: 0 1 auto;
3649 + align-items: center;
3650 + text-align: center;
3651 +}
3652 +
3517 3653 .waveform-player.waveform-focused {
3518 3654 outline: none;
3519 3655 }
3520 3656
@@ -3539,11 +3675,11 @@
3539 3675 }
3540 3676
3541 3677 @media (max-width: 480px) {
3542 3678 .waveform-btn {
3543 - width: 32px;
3544 - height: 32px;
3545 - min-width: 32px;
3679 + width: var(--wfp-btn-size, 32px);
3680 + height: var(--wfp-btn-size, 32px);
3681 + min-width: var(--wfp-btn-size, 32px);
3546 3682 }
3547 3683 .waveform-container {
3548 3684 min-height: 50px;
3549 3685 }
@@ -3549,15 +3685,21 @@
3549 3685 }
3550 3686 .waveform-info {
3551 3687 font-size: 12px;
3552 3688 }
3553 - .waveform-subtitle, .waveform-time, .waveform-bpm {
3689 + .waveform-artist, .waveform-time, .waveform-bpm {
3554 3690 font-size: 10px;
3555 3691 }
3556 3692 }
3693 +@media (prefers-reduced-motion: reduce) {
3694 + .waveform-player *, .waveform-player *:before, .waveform-player *:after {
3695 + transition-duration: 0.01ms !important;
3696 + animation-duration: 0.01ms !important;
3697 + animation-iteration-count: 1 !important;
3698 + }
3699 +}
3557 3700 .wp-block-playlist {
3558 - overflow: hidden;
3559 - overflow: clip;
3701 + box-sizing: border-box;
3560 3702 }
3561 3703 .wp-block-playlist .wp-block-playlist__waveform-player {
3562 3704 width: 100%;
3563 3705 margin: var(--wp--preset--spacing--20, 0.625em) 0;
@@ -3562,13 +3704,18 @@
3562 3704 width: 100%;
3563 3705 margin: var(--wp--preset--spacing--20, 0.625em) 0;
3564 3706 position: relative;
3565 3707 }
3708 +.wp-block-playlist .wp-block-playlist__waveform-player:focus-visible {
3709 + outline: revert;
3710 + outline-offset: revert;
3711 +}
3566 3712 .wp-block-playlist .waveform-track {
3567 3713 height: 100px;
3568 3714 gap: 0;
3569 3715 }
3570 3716 .wp-block-playlist .waveform-btn {
3717 + border: none;
3571 3718 border-radius: 0;
3572 3719 border-end-start-radius: 0.125rem;
3573 3720 border-start-start-radius: 0.125rem;
3574 3721 width: 100px;
@@ -3579,14 +3726,45 @@
3579 3726 }
3580 3727 .wp-block-playlist .waveform-btn:hover:not(:disabled) {
3581 3728 transform: none;
3582 3729 }
3730 +.wp-block-playlist .waveform-btn svg {
3731 + width: 3rem;
3732 + height: 3rem;
3733 +}
3734 +.wp-block-playlist .waveform-btn .waveform-icon-pause svg {
3735 + width: 2.625rem;
3736 + height: 2.625rem;
3737 +}
3738 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn {
3739 + background-image: var(--wp--playlist--play-button-artwork);
3740 + background-position: center;
3741 + background-size: cover;
3742 + color: #fff;
3743 +}
3744 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg {
3745 + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
3746 +}
3747 +.wp-block-playlist .waveform-player.has-play-button-artwork .waveform-btn svg path {
3748 + fill: #fff !important;
3749 +}
3583 3750 .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn {
3584 3751 margin-bottom: 0;
3585 3752 }
3586 -.wp-block-playlist .waveform-subtitle {
3753 +.wp-block-playlist .waveform-btn:focus-visible,
3754 +.wp-block-playlist .waveform-container:focus-visible {
3755 + outline: revert;
3756 + outline-offset: revert;
3757 +}
3758 +.wp-block-playlist .waveform-artist {
3587 3759 opacity: 0.7;
3588 3760 }
3761 +.wp-block-playlist .waveform-info,
3762 +.wp-block-playlist .waveform-artist,
3763 +.wp-block-playlist .waveform-title,
3764 +.wp-block-playlist .waveform-time {
3765 + font-size: inherit;
3766 +}
3589 3767 .wp-block-playlist .wp-block-playlist__tracklist {
3590 3768 margin: 0;
3591 3769 padding-left: 0;
3592 3770 list-style: none;
@@ -3633,8 +3811,17 @@
3633 3811 margin-right: var(--wp--preset--spacing--20, 0.5em);
3634 3812 font-size: 0.85em;
3635 3813 opacity: 0.7;
3636 3814 }
3815 +.wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__image {
3816 + flex: 0 0 50px;
3817 + width: 50px;
3818 + height: 50px;
3819 + margin-right: var(--wp--preset--spacing--20, 0.5em);
3820 + border: 1px solid rgba(0, 0, 0, 0.08);
3821 + box-sizing: border-box;
3822 + object-fit: cover;
3823 +}
3637 3824 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
3638 3825 flex: 1 1 0;
3639 3826 min-width: 0;
3640 3827 }
@@ -3681,8 +3868,9 @@
3681 3868
3682 3869 .wp-block-post-author-biography {
3683 3870 box-sizing: border-box;
3684 3871 white-space: pre-wrap;
3872 + overflow-wrap: break-word;
3685 3873 }
3686 3874
3687 3875 :where(.wp-block-post-comments-form textarea),
3688 3876 :where(.wp-block-post-comments-form input:not([type=submit])) {
@@ -3731,14 +3919,8 @@
3731 3919 display: block;
3732 3920 box-sizing: border-box;
3733 3921 width: 100%;
3734 3922 }
3735 -.wp-block-post-comments-form .comment-form-author label,
3736 -.wp-block-post-comments-form .comment-form-email label,
3737 -.wp-block-post-comments-form .comment-form-url label {
3738 - display: block;
3739 - margin-bottom: 0.25em;
3740 -}
3741 3923 .wp-block-post-comments-form .comment-form-cookies-consent {
3742 3924 display: flex;
3743 3925 gap: 0.25em;
3744 3926 }
@@ -3752,8 +3934,15 @@
3752 3934 font-size: var(--wp--preset--font-size--medium, smaller);
3753 3935 margin-left: 0.5em;
3754 3936 }
3755 3937
3938 +:where(.wp-block-post-comments-form .comment-form-author label),
3939 +:where(.wp-block-post-comments-form .comment-form-email label),
3940 +:where(.wp-block-post-comments-form .comment-form-url label) {
3941 + display: block;
3942 + margin-bottom: 0.25em;
3943 +}
3944 +
3756 3945 .wp-block-post-comments-count {
3757 3946 box-sizing: border-box;
3758 3947 }
3759 3948
@@ -3855,8 +4044,11 @@
3855 4044 .wp-block-post-featured-image:where(.alignleft, .alignright) {
3856 4045 width: 100%;
3857 4046 }
3858 4047
4048 +.wp-block-post-navigation-link {
4049 + box-sizing: border-box;
4050 +}
3859 4051 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous {
3860 4052 display: inline-block;
3861 4053 margin-right: 1ch;
3862 4054 }
@@ -3885,13 +4077,13 @@
3885 4077 box-sizing: border-box;
3886 4078 }
3887 4079
3888 4080 .wp-block-post-title {
3889 - word-break: break-word;
4081 + word-break: normal;
4082 + overflow-wrap: anywhere;
3890 4083 box-sizing: border-box;
3891 4084 }
3892 4085 .wp-block-post-title :where(a) {
3893 - display: inline-block;
3894 4086 font-family: inherit;
3895 4087 font-size: inherit;
3896 4088 font-style: inherit;
3897 4089 font-weight: inherit;
@@ -3909,9 +4101,9 @@
3909 4101 white-space: pre-wrap;
3910 4102 }
3911 4103
3912 4104 :where(.wp-block-preformatted.has-background) {
3913 - padding: 1.25em 2.375em;
4105 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3914 4106 }
3915 4107
3916 4108 .wp-block-pullquote {
3917 4109 text-align: center;
@@ -4039,8 +4231,12 @@
4039 4231 margin-inline-start: auto;
4040 4232 margin-inline-end: auto;
4041 4233 }
4042 4234
4235 +:where(.wp-block-query-no-results) {
4236 + box-sizing: border-box;
4237 +}
4238 +
4043 4239 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type {
4044 4240 margin-inline-start: auto;
4045 4241 }
4046 4242 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-previous:first-child {
@@ -4096,9 +4292,8 @@
4096 4292 }
4097 4293
4098 4294 .wp-block-read-more {
4099 4295 display: block;
4100 - width: -moz-fit-content;
4101 4296 width: fit-content;
4102 4297 }
4103 4298 .wp-block-read-more:where(:not([style*=text-decoration])) {
4104 4299 text-decoration: none;
@@ -4181,9 +4376,9 @@
4181 4376 flex-wrap: nowrap;
4182 4377 max-width: 100%;
4183 4378 }
4184 4379
4185 -.wp-block-search__label {
4380 +:where(.wp-block-search__label) {
4186 4381 width: 100%;
4187 4382 }
4188 4383
4189 4384 .wp-block-search.wp-block-search__button-only .wp-block-search__button {
@@ -4234,11 +4429,9 @@
4234 4429 margin-right: 0;
4235 4430 min-width: 3rem;
4236 4431 border: 1px solid #949494;
4237 4432 text-decoration: unset !important;
4238 - -webkit-appearance: initial;
4239 - -moz-appearance: initial;
4240 - appearance: initial;
4433 + appearance: initial;
4241 4434 }
4242 4435
4243 4436 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
4244 4437 padding: 4px;
@@ -4807,9 +5000,8 @@
4807 5000 :where(.wp-block-tab-list button) {
4808 5001 box-sizing: border-box;
4809 5002 color: inherit;
4810 5003 display: block;
4811 - width: -moz-max-content;
4812 5004 width: max-content;
4813 5005 text-decoration: none;
4814 5006 cursor: pointer;
4815 5007 flex-basis: inherit !important;
@@ -4816,10 +5008,9 @@
4816 5008 flex-grow: inherit !important;
4817 5009 position: relative;
4818 5010 border: none;
4819 5011 background: none;
4820 - -moz-appearance: none;
4821 - appearance: none;
5012 + appearance: none;
4822 5013 -webkit-appearance: none;
4823 5014 margin: 0;
4824 5015 padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
4825 5016 font-size: inherit;
@@ -4839,11 +5030,17 @@
4839 5030 width: 100%;
4840 5031 bottom: 0;
4841 5032 }
4842 5033
4843 -.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
5034 +.wp-block-tab-panel:empty {
4844 5035 display: none !important;
4845 5036 }
5037 +.wp-block-tab-panel[hidden] {
5038 + box-shadow: none !important;
5039 + border: none !important;
5040 + margin-block-start: 0;
5041 + padding: 0 !important;
5042 +}
4846 5043
4847 5044 .wp-block-table {
4848 5045 overflow-x: auto;
4849 5046 }
@@ -5043,9 +5240,10 @@
5043 5240 box-sizing: border-box;
5044 5241 overflow: auto;
5045 5242 white-space: pre-wrap;
5046 5243 min-width: 1em;
5047 - word-break: break-word;
5244 + word-break: normal;
5245 + overflow-wrap: break-word;
5048 5246 }
5049 5247
5050 5248 :where(pre.wp-block-verse) {
5051 5249 font-family: inherit;
@@ -5060,10 +5258,9 @@
5060 5258 vertical-align: middle;
5061 5259 }
5062 5260 @supports (position: sticky) {
5063 5261 .wp-block-video [poster] {
5064 - -o-object-fit: cover;
5065 - object-fit: cover;
5262 + object-fit: cover;
5066 5263 }
5067 5264 }
5068 5265 .wp-block-video.aligncenter {
5069 5266 text-align: center;
@@ -5227,9 +5424,9 @@
5227 5424 overflow: hidden;
5228 5425 padding: 0;
5229 5426 position: absolute;
5230 5427 width: 1px;
5231 - word-wrap: normal !important;
5428 + overflow-wrap: normal !important;
5232 5429 word-break: normal !important;
5233 5430 }
5234 5431
5235 5432 .screen-reader-text:focus {
@@ -5342,16 +5539,12 @@
5342 5539 margin: 0 0 1em 0;
5343 5540 }
5344 5541
5345 5542 html :where(.is-position-sticky) {
5346 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5347 5543 --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
5348 - /* stylelint-enable length-zero-no-unit */
5349 5544 }
5350 5545
5351 5546 @media screen and (max-width: 600px) {
5352 5547 html :where(.is-position-sticky) {
5353 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5354 5548 --wp-admin--admin-bar--position-offset: 0px;
5355 - /* stylelint-enable length-zero-no-unit */
5356 5549 }
5357 5550 }