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 +424 -244 23.4.0 → 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]),
@@ -1772,17 +1744,30 @@
1772 1744 .wp-block-icon svg {
1773 1745 box-sizing: border-box;
1774 1746 fill: currentColor;
1775 1747 }
1748 +.wp-block-icon svg.is-flip-horizontal {
1749 + transform: scaleX(-1);
1750 +}
1751 +.wp-block-icon svg.is-flip-vertical {
1752 + transform: scaleY(-1);
1753 +}
1754 +.wp-block-icon svg.is-flip-horizontal.is-flip-vertical {
1755 + transform: scaleX(-1) scaleY(-1);
1756 +}
1776 1757
1777 1758 :where(.wp-block-icon) svg {
1778 1759 width: 100%;
1779 1760 height: 100%;
1780 1761 }
1762 +:where(.wp-block-icon) svg :where(path, rect, circle, ellipse, line, polygon, polyline) {
1763 + vector-effect: none;
1764 +}
1781 1765
1782 1766 .wp-block-image > a,
1783 1767 .wp-block-image > figure > a {
1784 1768 display: inline-block;
1769 + color: inherit;
1785 1770 }
1786 1771 .wp-block-image img {
1787 1772 height: auto;
1788 1773 max-width: 100%;
@@ -1857,20 +1842,15 @@
1857 1842 }
1858 1843 .wp-block-image.is-style-circle-mask img {
1859 1844 border-radius: 9999px;
1860 1845 }
1861 -@supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
1846 +@supports (mask-image: none) or (-webkit-mask-image: none) {
1862 1847 .wp-block-image.is-style-circle-mask img {
1863 - /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1864 - -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>');
1865 - 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>');
1866 1849 mask-mode: alpha;
1867 - -webkit-mask-repeat: no-repeat;
1868 - mask-repeat: no-repeat;
1869 - -webkit-mask-size: contain;
1870 - mask-size: contain;
1871 - -webkit-mask-position: center;
1872 - mask-position: center;
1850 + mask-repeat: no-repeat;
1851 + mask-size: contain;
1852 + mask-position: center;
1873 1853 border-radius: 0;
1874 1854 }
1875 1855 }
1876 1856
@@ -2250,49 +2230,54 @@
2250 2230 .wp-block-latest-posts.wp-block-latest-posts__list li {
2251 2231 clear: both;
2252 2232 overflow-wrap: break-word;
2253 2233 }
2254 -.wp-block-latest-posts.is-grid {
2234 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
2255 2235 display: flex;
2256 2236 flex-wrap: wrap;
2257 2237 }
2258 -.wp-block-latest-posts.is-grid li {
2238 +.wp-block-latest-posts.is-grid:not(.is-layout-grid) li {
2259 2239 margin: 0 1.25em 1.25em 0;
2260 2240 width: 100%;
2261 2241 }
2262 2242 @media (min-width: 600px) {
2263 - .wp-block-latest-posts.columns-2 li {
2243 + .wp-block-latest-posts.columns-2:not(.is-layout-grid) li {
2264 2244 width: calc(100% / 2 - 1.25em + 1.25em / 2);
2265 2245 }
2266 - .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) {
2267 2247 margin-right: 0;
2268 2248 }
2269 - .wp-block-latest-posts.columns-3 li {
2249 + .wp-block-latest-posts.columns-3:not(.is-layout-grid) li {
2270 2250 width: calc(100% / 3 - 1.25em + 1.25em / 3);
2271 2251 }
2272 - .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) {
2273 2253 margin-right: 0;
2274 2254 }
2275 - .wp-block-latest-posts.columns-4 li {
2255 + .wp-block-latest-posts.columns-4:not(.is-layout-grid) li {
2276 2256 width: calc(100% / 4 - 1.25em + 1.25em / 4);
2277 2257 }
2278 - .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) {
2279 2259 margin-right: 0;
2280 2260 }
2281 - .wp-block-latest-posts.columns-5 li {
2261 + .wp-block-latest-posts.columns-5:not(.is-layout-grid) li {
2282 2262 width: calc(100% / 5 - 1.25em + 1.25em / 5);
2283 2263 }
2284 - .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) {
2285 2265 margin-right: 0;
2286 2266 }
2287 - .wp-block-latest-posts.columns-6 li {
2267 + .wp-block-latest-posts.columns-6:not(.is-layout-grid) li {
2288 2268 width: calc(100% / 6 - 1.25em + 1.25em / 6);
2289 2269 }
2290 - .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) {
2291 2271 margin-right: 0;
2292 2272 }
2293 2273 }
2294 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 +}
2295 2280 :root :where(.wp-block-latest-posts.is-grid) {
2296 2281 padding: 0;
2297 2282 }
2298 2283 :root :where(.wp-block-latest-posts.wp-block-latest-posts__list) {
@@ -2341,9 +2326,9 @@
2341 2326 box-sizing: border-box;
2342 2327 }
2343 2328
2344 2329 :root :where(.wp-block-list.has-background) {
2345 - padding: 1.25em 2.375em;
2330 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
2346 2331 }
2347 2332
2348 2333 .wp-block-loginout {
2349 2334 box-sizing: border-box;
@@ -2446,9 +2431,9 @@
2446 2431 height: 1px;
2447 2432 padding: 0;
2448 2433 margin: -1px;
2449 2434 overflow: hidden;
2450 - clip: rect(0, 0, 0, 0);
2435 + clip-path: inset(50%);
2451 2436 border: 0;
2452 2437 }
2453 2438
2454 2439 /* Image fill for versions 8 and onwards */
@@ -2466,10 +2451,9 @@
2466 2451 .wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
2467 2452 position: absolute;
2468 2453 width: 100%;
2469 2454 height: 100%;
2470 - -o-object-fit: cover;
2471 - object-fit: cover;
2455 + object-fit: cover;
2472 2456 }
2473 2457
2474 2458 /*
2475 2459 * Here we here not able to use a mobile first CSS approach.
@@ -2565,9 +2549,16 @@
2565 2549 .wp-block-navigation.is-vertical {
2566 2550 --navigation-layout-direction: column;
2567 2551 --navigation-layout-justify: initial;
2568 2552 --navigation-layout-align: flex-start;
2553 + text-align: var(--navigation-layout-text-align, inherit);
2569 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 +}
2570 2561 .wp-block-navigation.no-wrap {
2571 2562 --navigation-layout-wrap: nowrap;
2572 2563 }
2573 2564 .wp-block-navigation.items-justified-center {
@@ -2572,8 +2563,9 @@
2572 2563 }
2573 2564 .wp-block-navigation.items-justified-center {
2574 2565 --navigation-layout-justification-setting: center;
2575 2566 --navigation-layout-justify: center;
2567 + --navigation-layout-text-align: center;
2576 2568 }
2577 2569 .wp-block-navigation.items-justified-center.is-vertical {
2578 2570 --navigation-layout-align: center;
2579 2571 }
@@ -2579,8 +2571,9 @@
2579 2571 }
2580 2572 .wp-block-navigation.items-justified-right {
2581 2573 --navigation-layout-justification-setting: flex-end;
2582 2574 --navigation-layout-justify: flex-end;
2575 + --navigation-layout-text-align: end;
2583 2576 }
2584 2577 .wp-block-navigation.items-justified-right.is-vertical {
2585 2578 --navigation-layout-align: flex-end;
2586 2579 }
@@ -2651,9 +2644,9 @@
2651 2644 transform: rotate(-90deg);
2652 2645 }
2653 2646 }
2654 2647 @media (hover: hover) {
2655 - .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 {
2656 2649 visibility: visible;
2657 2650 overflow: visible;
2658 2651 opacity: 1;
2659 2652 width: auto;
@@ -2660,10 +2653,9 @@
2660 2653 height: auto;
2661 2654 min-width: 200px;
2662 2655 }
2663 2656 }
2664 -.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
2665 -.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 {
2666 2658 visibility: visible;
2667 2659 overflow: visible;
2668 2660 opacity: 1;
2669 2661 width: auto;
@@ -2711,8 +2703,9 @@
2711 2703 position: static;
2712 2704 border: none;
2713 2705 background-color: transparent;
2714 2706 color: inherit;
2707 + box-shadow: none !important;
2715 2708 }
2716 2709
2717 2710 .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
2718 2711 left: 0;
@@ -2918,8 +2911,9 @@
2918 2911 display: flex;
2919 2912 flex-direction: column;
2920 2913 flex-wrap: nowrap;
2921 2914 align-items: var(--navigation-layout-justification-setting, inherit);
2915 + text-align: var(--navigation-layout-text-align, inherit);
2922 2916 }
2923 2917 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content,
2924 2918 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list,
2925 2919 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
@@ -2945,11 +2939,13 @@
2945 2939 gap: inherit;
2946 2940 }
2947 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 {
2948 2942 padding-top: var(--wp--style--block-gap, 2em);
2943 + text-align: inherit;
2949 2944 }
2950 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 {
2951 2946 padding: 0;
2947 + text-align: inherit;
2952 2948 }
2953 2949 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
2954 2950 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
2955 2951 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list {
@@ -2963,8 +2959,11 @@
2963 2959 .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-page-list {
2964 2960 color: inherit !important;
2965 2961 background: transparent !important;
2966 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 +}
2967 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 {
2968 2967 right: auto;
2969 2968 left: auto;
2970 2969 }
@@ -3010,9 +3009,9 @@
3010 3009 }
3011 3010
3012 3011 .wp-block-navigation__toggle_button_label {
3013 3012 font-size: 1rem;
3014 - font-weight: bold;
3013 + font-weight: 700;
3015 3014 }
3016 3015
3017 3016 .wp-block-navigation__responsive-container-open,
3018 3017 .wp-block-navigation__responsive-container-close {
@@ -3120,8 +3119,20 @@
3120 3119 margin-left: 8px;
3121 3120 text-transform: uppercase;
3122 3121 }
3123 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 +
3124 3135 .wp-block-navigation-overlay-close {
3125 3136 display: inline-flex;
3126 3137 align-items: center;
3127 3138 justify-content: center;
@@ -3126,9 +3137,8 @@
3126 3137 align-items: center;
3127 3138 justify-content: center;
3128 3139 gap: 0.5em;
3129 3140 padding: 0;
3130 - border: none;
3131 3141 background: transparent;
3132 3142 cursor: pointer;
3133 3143 text-decoration: none;
3134 3144 }
@@ -3198,9 +3208,9 @@
3198 3208 overflow: hidden;
3199 3209 }
3200 3210
3201 3211 :root :where(p.has-background) {
3202 - padding: 1.25em 2.375em;
3212 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3203 3213 }
3204 3214
3205 3215 :where(p.has-text-color:not(.has-link-color)) a {
3206 3216 color: inherit;
@@ -3213,11 +3223,23 @@
3213 3223
3214 3224 .waveform-player {
3215 3225 font-family: inherit;
3216 3226 color: inherit;
3217 - 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);
3218 3234 }
3219 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 +
3220 3242 .waveform-player * {
3221 3243 box-sizing: border-box;
3222 3244 }
3223 3245
@@ -3223,26 +3245,26 @@
3223 3245
3224 3246 .waveform-body {
3225 3247 display: flex;
3226 3248 flex-direction: column;
3227 - gap: 8px;
3249 + gap: var(--waveform-body-gap, 8px);
3228 3250 }
3229 3251
3230 3252 .waveform-track {
3231 3253 display: flex;
3232 3254 align-items: center;
3233 - gap: 12px;
3255 + gap: var(--waveform-track-gap, 12px);
3234 3256 position: relative;
3235 3257 }
3236 3258
3237 3259 .waveform-btn {
3238 - width: 36px;
3239 - height: 36px;
3240 - min-width: 36px;
3241 - 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%);
3242 3264 border: 2px solid currentColor;
3243 3265 background: transparent;
3244 - color: inherit;
3266 + color: var(--wfp-button-color, inherit);
3245 3267 cursor: pointer;
3246 3268 display: flex;
3247 3269 align-items: center;
3248 3270 justify-content: center;
@@ -3256,8 +3278,27 @@
3256 3278 opacity: 1;
3257 3279 transform: scale(1.05);
3258 3280 }
3259 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 +
3260 3301 .waveform-btn:disabled {
3261 3302 cursor: not-allowed;
3262 3303 opacity: 0.3;
3263 3304 }
@@ -3270,14 +3311,48 @@
3270 3311 height: 100%;
3271 3312 }
3272 3313
3273 3314 .waveform-btn svg {
3274 - width: 16px;
3275 - height: 16px;
3315 + width: calc(var(--wfp-btn-size, 36px) * 0.45);
3316 + height: calc(var(--wfp-btn-size, 36px) * 0.45);
3276 3317 fill: currentColor;
3277 3318 display: block;
3278 3319 }
3279 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 +
3280 3355 .waveform-icon-play svg {
3281 3356 margin-left: 1px;
3282 3357 }
3283 3358
@@ -3289,8 +3364,12 @@
3289 3364 min-width: 0;
3290 3365 width: 100%;
3291 3366 }
3292 3367
3368 +.waveform-container:focus-visible {
3369 + outline: 2px solid currentColor;
3370 +}
3371 +
3293 3372 .waveform-container canvas {
3294 3373 display: block;
3295 3374 width: 100%;
3296 3375 height: 100%;
@@ -3316,8 +3395,9 @@
3316 3395 min-width: 0;
3317 3396 }
3318 3397
3319 3398 .waveform-title {
3399 + color: var(--wfp-text-color);
3320 3400 white-space: nowrap;
3321 3401 overflow: hidden;
3322 3402 text-overflow: ellipsis;
3323 3403 font-weight: 500;
@@ -3322,9 +3402,10 @@
3322 3402 text-overflow: ellipsis;
3323 3403 font-weight: 500;
3324 3404 }
3325 3405
3326 -.waveform-subtitle {
3406 +.waveform-artist {
3407 + color: var(--wfp-text-secondary-color);
3327 3408 font-size: 11px;
3328 3409 white-space: nowrap;
3329 3410 overflow: hidden;
3330 3411 text-overflow: ellipsis;
@@ -3330,8 +3411,9 @@
3330 3411 text-overflow: ellipsis;
3331 3412 }
3332 3413
3333 3414 .waveform-time {
3415 + color: var(--wfp-text-secondary-color);
3334 3416 font-size: 11px;
3335 3417 white-space: nowrap;
3336 3418 flex-shrink: 0;
3337 3419 }
@@ -3336,8 +3418,9 @@
3336 3418 flex-shrink: 0;
3337 3419 }
3338 3420
3339 3421 .waveform-bpm {
3422 + color: var(--wfp-text-secondary-color);
3340 3423 font-size: 11px;
3341 3424 white-space: nowrap;
3342 3425 flex-shrink: 0;
3343 3426 display: inline-flex;
@@ -3393,8 +3476,14 @@
3393 3476 width: 4px;
3394 3477 z-index: 20;
3395 3478 }
3396 3479
3480 +.waveform-marker.active {
3481 + width: 4px;
3482 + background: currentColor;
3483 + z-index: 10;
3484 +}
3485 +
3397 3486 .waveform-marker-tooltip {
3398 3487 position: absolute;
3399 3488 bottom: calc(100% + 4px);
3400 3489 left: 50%;
@@ -3410,12 +3499,54 @@
3410 3499 transition: opacity 0.2s;
3411 3500 z-index: 1000;
3412 3501 }
3413 3502
3414 -.waveform-marker:hover .waveform-marker-tooltip {
3503 +.waveform-marker:hover .waveform-marker-tooltip, .waveform-marker.show-label .waveform-marker-tooltip {
3415 3504 opacity: 1;
3416 3505 }
3417 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 +
3418 3549 .waveform-btn:focus-visible {
3419 3550 outline: 2px solid currentColor;
3420 3551 outline-offset: 2px;
3421 3552 }
@@ -3484,15 +3615,15 @@
3484 3615 color: #fff;
3485 3616 }
3486 3617
3487 3618 .speed-option.active {
3488 - background: rgba(168, 85, 247, 0.2);
3489 - color: #a855f7;
3619 + background: rgba(255, 255, 255, 0.1607843137);
3620 + color: #fff;
3490 3621 font-weight: 600;
3491 3622 }
3492 3623
3493 3624 .waveform-player.waveform-focused {
3494 - outline: 2px solid rgba(168, 85, 247, 0.5);
3625 + outline: 2px solid var(--wfp-accent);
3495 3626 outline-offset: 2px;
3496 3627 border-radius: 4px;
3497 3628 }
3498 3629
@@ -3500,12 +3631,26 @@
3500 3631 outline: none;
3501 3632 }
3502 3633
3503 3634 .waveform-player:focus-visible {
3504 - outline: 1px solid rgba(168, 85, 247, 0.3);
3635 + outline: 1px solid var(--wfp-accent);
3505 3636 outline-offset: 1px;
3506 3637 }
3507 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 +
3508 3653 .waveform-player.waveform-focused {
3509 3654 outline: none;
3510 3655 }
3511 3656
@@ -3530,11 +3675,11 @@
3530 3675 }
3531 3676
3532 3677 @media (max-width: 480px) {
3533 3678 .waveform-btn {
3534 - width: 32px;
3535 - height: 32px;
3536 - 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);
3537 3682 }
3538 3683 .waveform-container {
3539 3684 min-height: 50px;
3540 3685 }
@@ -3540,15 +3685,21 @@
3540 3685 }
3541 3686 .waveform-info {
3542 3687 font-size: 12px;
3543 3688 }
3544 - .waveform-subtitle, .waveform-time, .waveform-bpm {
3689 + .waveform-artist, .waveform-time, .waveform-bpm {
3545 3690 font-size: 10px;
3546 3691 }
3547 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 +}
3548 3700 .wp-block-playlist {
3549 - overflow: hidden;
3550 - overflow: clip;
3701 + box-sizing: border-box;
3551 3702 }
3552 3703 .wp-block-playlist .wp-block-playlist__waveform-player {
3553 3704 width: 100%;
3554 3705 margin: var(--wp--preset--spacing--20, 0.625em) 0;
@@ -3553,13 +3704,18 @@
3553 3704 width: 100%;
3554 3705 margin: var(--wp--preset--spacing--20, 0.625em) 0;
3555 3706 position: relative;
3556 3707 }
3708 +.wp-block-playlist .wp-block-playlist__waveform-player:focus-visible {
3709 + outline: revert;
3710 + outline-offset: revert;
3711 +}
3557 3712 .wp-block-playlist .waveform-track {
3558 3713 height: 100px;
3559 3714 gap: 0;
3560 3715 }
3561 3716 .wp-block-playlist .waveform-btn {
3717 + border: none;
3562 3718 border-radius: 0;
3563 3719 border-end-start-radius: 0.125rem;
3564 3720 border-start-start-radius: 0.125rem;
3565 3721 width: 100px;
@@ -3570,14 +3726,45 @@
3570 3726 }
3571 3727 .wp-block-playlist .waveform-btn:hover:not(:disabled) {
3572 3728 transform: none;
3573 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 +}
3574 3750 .wp-block-playlist .waveform-track.waveform-align-bottom .waveform-btn {
3575 3751 margin-bottom: 0;
3576 3752 }
3577 -.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 {
3578 3759 opacity: 0.7;
3579 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 +}
3580 3767 .wp-block-playlist .wp-block-playlist__tracklist {
3581 3768 margin: 0;
3582 3769 padding-left: 0;
3583 3770 list-style: none;
@@ -3624,8 +3811,17 @@
3624 3811 margin-right: var(--wp--preset--spacing--20, 0.5em);
3625 3812 font-size: 0.85em;
3626 3813 opacity: 0.7;
3627 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 +}
3628 3824 .wp-block-playlist-track .wp-block-playlist-track__button .wp-block-playlist-track__content {
3629 3825 flex: 1 1 0;
3630 3826 min-width: 0;
3631 3827 }
@@ -3672,8 +3868,9 @@
3672 3868
3673 3869 .wp-block-post-author-biography {
3674 3870 box-sizing: border-box;
3675 3871 white-space: pre-wrap;
3872 + overflow-wrap: break-word;
3676 3873 }
3677 3874
3678 3875 :where(.wp-block-post-comments-form textarea),
3679 3876 :where(.wp-block-post-comments-form input:not([type=submit])) {
@@ -3722,14 +3919,8 @@
3722 3919 display: block;
3723 3920 box-sizing: border-box;
3724 3921 width: 100%;
3725 3922 }
3726 -.wp-block-post-comments-form .comment-form-author label,
3727 -.wp-block-post-comments-form .comment-form-email label,
3728 -.wp-block-post-comments-form .comment-form-url label {
3729 - display: block;
3730 - margin-bottom: 0.25em;
3731 -}
3732 3923 .wp-block-post-comments-form .comment-form-cookies-consent {
3733 3924 display: flex;
3734 3925 gap: 0.25em;
3735 3926 }
@@ -3743,8 +3934,15 @@
3743 3934 font-size: var(--wp--preset--font-size--medium, smaller);
3744 3935 margin-left: 0.5em;
3745 3936 }
3746 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 +
3747 3945 .wp-block-post-comments-count {
3748 3946 box-sizing: border-box;
3749 3947 }
3750 3948
@@ -3846,8 +4044,11 @@
3846 4044 .wp-block-post-featured-image:where(.alignleft, .alignright) {
3847 4045 width: 100%;
3848 4046 }
3849 4047
4048 +.wp-block-post-navigation-link {
4049 + box-sizing: border-box;
4050 +}
3850 4051 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous {
3851 4052 display: inline-block;
3852 4053 margin-right: 1ch;
3853 4054 }
@@ -3876,13 +4077,13 @@
3876 4077 box-sizing: border-box;
3877 4078 }
3878 4079
3879 4080 .wp-block-post-title {
3880 - word-break: break-word;
4081 + word-break: normal;
4082 + overflow-wrap: anywhere;
3881 4083 box-sizing: border-box;
3882 4084 }
3883 4085 .wp-block-post-title :where(a) {
3884 - display: inline-block;
3885 4086 font-family: inherit;
3886 4087 font-size: inherit;
3887 4088 font-style: inherit;
3888 4089 font-weight: inherit;
@@ -3900,9 +4101,9 @@
3900 4101 white-space: pre-wrap;
3901 4102 }
3902 4103
3903 4104 :where(.wp-block-preformatted.has-background) {
3904 - padding: 1.25em 2.375em;
4105 + padding: var(--wp--style--block-background-padding, 1.25em 2.375em);
3905 4106 }
3906 4107
3907 4108 .wp-block-pullquote {
3908 4109 text-align: center;
@@ -4030,8 +4231,12 @@
4030 4231 margin-inline-start: auto;
4031 4232 margin-inline-end: auto;
4032 4233 }
4033 4234
4235 +:where(.wp-block-query-no-results) {
4236 + box-sizing: border-box;
4237 +}
4238 +
4034 4239 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-next:last-of-type {
4035 4240 margin-inline-start: auto;
4036 4241 }
4037 4242 .wp-block-query-pagination.is-content-justification-space-between > .wp-block-query-pagination-previous:first-child {
@@ -4087,9 +4292,8 @@
4087 4292 }
4088 4293
4089 4294 .wp-block-read-more {
4090 4295 display: block;
4091 - width: -moz-fit-content;
4092 4296 width: fit-content;
4093 4297 }
4094 4298 .wp-block-read-more:where(:not([style*=text-decoration])) {
4095 4299 text-decoration: none;
@@ -4172,9 +4376,9 @@
4172 4376 flex-wrap: nowrap;
4173 4377 max-width: 100%;
4174 4378 }
4175 4379
4176 -.wp-block-search__label {
4380 +:where(.wp-block-search__label) {
4177 4381 width: 100%;
4178 4382 }
4179 4383
4180 4384 .wp-block-search.wp-block-search__button-only .wp-block-search__button {
@@ -4225,11 +4429,9 @@
4225 4429 margin-right: 0;
4226 4430 min-width: 3rem;
4227 4431 border: 1px solid #949494;
4228 4432 text-decoration: unset !important;
4229 - -webkit-appearance: initial;
4230 - -moz-appearance: initial;
4231 - appearance: initial;
4433 + appearance: initial;
4232 4434 }
4233 4435
4234 4436 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
4235 4437 padding: 4px;
@@ -4794,13 +4996,12 @@
4794 4996 padding: 1ch 2ch;
4795 4997 text-decoration: none !important;
4796 4998 }
4797 4999
4798 -.wp-block-tab {
5000 +:where(.wp-block-tab-list button) {
4799 5001 box-sizing: border-box;
4800 5002 color: inherit;
4801 5003 display: block;
4802 - width: -moz-max-content;
4803 5004 width: max-content;
4804 5005 text-decoration: none;
4805 5006 cursor: pointer;
4806 5007 flex-basis: inherit !important;
@@ -4807,10 +5008,9 @@
4807 5008 flex-grow: inherit !important;
4808 5009 position: relative;
4809 5010 border: none;
4810 5011 background: none;
4811 - -moz-appearance: none;
4812 - appearance: none;
5012 + appearance: none;
4813 5013 -webkit-appearance: none;
4814 5014 margin: 0;
4815 5015 padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
4816 5016 font-size: inherit;
@@ -4820,9 +5020,9 @@
4820 5020 letter-spacing: inherit;
4821 5021 text-transform: inherit;
4822 5022 text-align: inherit;
4823 5023 }
4824 -.wp-block-tab[aria-selected=true]::before, .wp-block-tab.is-active::before {
5024 +:where(.wp-block-tab-list button)[aria-selected=true]::before {
4825 5025 content: "";
4826 5026 position: absolute;
4827 5027 border-bottom: 2px solid currentColor;
4828 5028 pointer-events: none;
@@ -4830,34 +5030,18 @@
4830 5030 width: 100%;
4831 5031 bottom: 0;
4832 5032 }
4833 5033
4834 -.wp-block-tab-panel {
4835 - max-width: 100%;
4836 - flex-basis: 100%;
4837 - flex-grow: 1;
4838 - box-sizing: border-box;
4839 -}
4840 -.wp-block-tab-panel > *:first-child {
4841 - margin-top: 0;
4842 -}
4843 -.wp-block-tab-panel > *:last-child {
4844 - margin-bottom: 0;
4845 -}
4846 -.wp-block-tab-panel[hidden], .wp-block-tab-panel:empty {
5034 +.wp-block-tab-panel:empty {
4847 5035 display: none !important;
4848 5036 }
4849 -
4850 -.wp-block-tab-panel.wp-block.has-background,
4851 -.wp-block-tab-panel:not(.wp-block).has-background {
4852 - padding: var(--wp--preset--spacing--30);
5037 +.wp-block-tab-panel[hidden] {
5038 + box-shadow: none !important;
5039 + border: none !important;
5040 + margin-block-start: 0;
5041 + padding: 0 !important;
4853 5042 }
4854 5043
4855 -.wp-block-tab-panels {
4856 - flex-grow: 1;
4857 - min-width: 0;
4858 -}
4859 -
4860 5044 .wp-block-table {
4861 5045 overflow-x: auto;
4862 5046 }
4863 5047 .wp-block-table table {
@@ -5056,9 +5240,10 @@
5056 5240 box-sizing: border-box;
5057 5241 overflow: auto;
5058 5242 white-space: pre-wrap;
5059 5243 min-width: 1em;
5060 - word-break: break-word;
5244 + word-break: normal;
5245 + overflow-wrap: break-word;
5061 5246 }
5062 5247
5063 5248 :where(pre.wp-block-verse) {
5064 5249 font-family: inherit;
@@ -5073,10 +5258,9 @@
5073 5258 vertical-align: middle;
5074 5259 }
5075 5260 @supports (position: sticky) {
5076 5261 .wp-block-video [poster] {
5077 - -o-object-fit: cover;
5078 - object-fit: cover;
5262 + object-fit: cover;
5079 5263 }
5080 5264 }
5081 5265 .wp-block-video.aligncenter {
5082 5266 text-align: center;
@@ -5240,9 +5424,9 @@
5240 5424 overflow: hidden;
5241 5425 padding: 0;
5242 5426 position: absolute;
5243 5427 width: 1px;
5244 - word-wrap: normal !important;
5428 + overflow-wrap: normal !important;
5245 5429 word-break: normal !important;
5246 5430 }
5247 5431
5248 5432 .screen-reader-text:focus {
@@ -5355,16 +5539,12 @@
5355 5539 margin: 0 0 1em 0;
5356 5540 }
5357 5541
5358 5542 html :where(.is-position-sticky) {
5359 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5360 5543 --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
5361 - /* stylelint-enable length-zero-no-unit */
5362 5544 }
5363 5545
5364 5546 @media screen and (max-width: 600px) {
5365 5547 html :where(.is-position-sticky) {
5366 - /* stylelint-disable length-zero-no-unit -- 0px is set explicitly so that it can be used in a calc value. */
5367 5548 --wp-admin--admin-bar--position-offset: 0px;
5368 - /* stylelint-enable length-zero-no-unit */
5369 5549 }
5370 5550 }