PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
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/edit-site/style.css +241 -325 23.8.0 → trunk View file →
@@ -241,8 +241,12 @@
241 241 .dataviews__search {
242 242 flex-grow: 1;
243 243 }
244 244
245 +.dataviews__search .dataviews-search {
246 + flex-basis: 210px;
247 +}
248 +
245 249 .dataviews-no-results,
246 250 .dataviews-loading {
247 251 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
248 252 flex-grow: 1;
@@ -437,10 +441,10 @@
437 441 }
438 442
439 443 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
440 444 width: 100%;
445 + min-width: 0;
441 446 white-space: nowrap;
442 - overflow: hidden;
443 447 }
444 448
445 449 .dataviews-filters__summary-chip-container {
446 450 position: relative;
@@ -512,9 +516,9 @@
512 516 cursor: var(--wpds-cursor-control, pointer);
513 517 }
514 518
515 519 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
516 - fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
520 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
517 521 }
518 522
519 523 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
520 524 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
@@ -520,13 +524,13 @@
520 524 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
521 525 }
522 526
523 527 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
524 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
528 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
525 529 }
526 530
527 531 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
528 - fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
532 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
529 533 }
530 534
531 535 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
532 536 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
@@ -588,10 +592,11 @@
588 592 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
589 593 }
590 594
591 595 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
596 + /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
597 + background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
592 598 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
593 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
594 599 }
595 600
596 601 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
597 602 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
@@ -705,9 +710,9 @@
705 710 }
706 711 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
707 712 --checkbox-size: 24px;
708 713 flex-shrink: 0;
709 - border: 1px solid #1e1e1e;
714 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
710 715 margin-right: 12px;
711 716 transition: none;
712 717 border-radius: 2px;
713 718 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -715,18 +720,12 @@
715 720 /* Fonts smaller than 16px causes mobile safari to zoom. */
716 721 font-size: 16px;
717 722 /* Override core line-height. To be reviewed. */
718 723 line-height: normal;
719 - box-shadow: 0 0 0 transparent;
720 - border-radius: 2px;
721 - border: 1px solid #949494;
724 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
725 + border-radius: var(--wpds-border-radius-sm, 2px);
722 726 }
723 727
724 -@media not (prefers-reduced-motion) {
725 - .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
726 - transition: box-shadow 0.1s linear;
727 - }
728 -}
729 728 @media (min-width: 600px) {
730 729 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
731 730 font-size: 13px;
732 731 /* Override core line-height. To be reviewed. */
@@ -732,20 +731,25 @@
732 731 /* Override core line-height. To be reviewed. */
733 732 line-height: normal;
734 733 }
735 734 }
735 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
736 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
737 +}
738 +
736 739 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
737 - border-color: var(--wp-admin-theme-color);
738 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
739 - outline: 2px solid transparent;
740 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
741 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
742 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
743 + box-shadow: none;
740 744 }
741 745
742 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
746 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
743 747 color: rgba(30, 30, 30, 0.62);
744 748 }
745 749
746 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
747 - color: rgba(30, 30, 30, 0.62);
750 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
751 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
748 752 }
749 753
750 754 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
751 755 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
@@ -778,9 +782,9 @@
778 782 display: inline-block;
779 783 vertical-align: middle;
780 784 width: 16px;
781 785 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
782 - font: normal 30px/1 dashicons;
786 + font: 400 30px/1 dashicons;
783 787 speak: none;
784 788 -webkit-font-smoothing: antialiased;
785 789 -moz-osx-font-smoothing: grayscale;
786 790 }
@@ -791,17 +795,23 @@
791 795 font-size: 21px;
792 796 }
793 797 }
794 798 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled {
795 - background: #f0f0f0;
796 - border-color: #ddd;
799 + background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
800 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
801 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
797 802 cursor: default;
798 803 opacity: 1;
799 804 }
800 805
806 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true]:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true][aria-checked=mixed]::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled[aria-checked=mixed]::before {
807 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
808 +}
809 +
801 810 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
802 811 position: relative;
803 - background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
812 + /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
813 + background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
804 814 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
805 815 margin: 0;
806 816 padding: 0;
807 817 width: var(--checkbox-size);
@@ -824,9 +834,9 @@
824 834 }
825 835
826 836 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
827 837 --checkmark-size: var(--checkbox-size);
828 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
838 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
829 839 position: absolute;
830 840 left: 50%;
831 841 top: 50%;
832 842 transform: translate(-50%, -50%);
@@ -850,18 +860,12 @@
850 860 /* Fonts smaller than 16px causes mobile safari to zoom. */
851 861 font-size: 16px;
852 862 /* Override core line-height. To be reviewed. */
853 863 line-height: normal;
854 - box-shadow: 0 0 0 transparent;
855 - border-radius: 2px;
856 - border: 1px solid #949494;
864 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
865 + border-radius: var(--wpds-border-radius-sm, 2px);
857 866 }
858 867
859 -@media not (prefers-reduced-motion) {
860 - .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
861 - transition: box-shadow 0.1s linear;
862 - }
863 -}
864 868 @media (min-width: 600px) {
865 869 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
866 870 font-size: 13px;
867 871 /* Override core line-height. To be reviewed. */
@@ -867,16 +871,17 @@
867 871 /* Override core line-height. To be reviewed. */
868 872 line-height: normal;
869 873 }
870 874 }
871 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
872 - border-color: var(--wp-admin-theme-color);
873 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
874 - outline: 2px solid transparent;
875 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true]) {
876 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
875 877 }
876 878
877 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
878 - color: rgba(30, 30, 30, 0.62);
879 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
880 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
881 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
882 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
883 + box-shadow: none;
879 884 }
880 885
881 886 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
882 887 color: rgba(30, 30, 30, 0.62);
@@ -899,15 +904,10 @@
899 904 }
900 905 }
901 906 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
902 907 background: var(--wpds-color-background-surface-neutral-strong, #fff);
903 - box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
904 908 }
905 909
906 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
907 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
908 -}
909 -
910 910 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
911 911 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
912 912 }
913 913
@@ -952,12 +952,8 @@
952 952 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
953 953 box-sizing: border-box;
954 954 }
955 955
956 -.dataviews-search {
957 - flex-basis: 210px;
958 -}
959 -
960 956 .dataviews-filters__user-input-widget {
961 957 padding: var(--wpds-dimension-padding-lg, 16px);
962 958 }
963 959
@@ -1234,9 +1230,8 @@
1234 1230 }
1235 1231
1236 1232 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
1237 1233 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
1238 - width: -moz-fit-content;
1239 1234 width: fit-content;
1240 1235 }
1241 1236
1242 1237 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
@@ -1270,9 +1265,8 @@
1270 1265 }
1271 1266
1272 1267 .dataviews-view-grid .dataviews-view-grid__media img,
1273 1268 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
1274 - -o-object-fit: cover;
1275 1269 object-fit: cover;
1276 1270 width: 100%;
1277 1271 height: 100%;
1278 1272 }
@@ -1299,8 +1293,18 @@
1299 1293 box-shadow: none;
1300 1294 background: var(--wpds-color-background-surface-neutral, #fcfcfc);
1301 1295 }
1302 1296
1297 +.dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media,
1298 +.dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media {
1299 + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
1300 +}
1301 +
1302 +.dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
1303 +.dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
1304 + object-fit: contain;
1305 +}
1306 +
1303 1307 .dataviews-view-grid .dataviews-view-grid__fields,
1304 1308 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
1305 1309 position: relative;
1306 1310 font-size: 12px;
@@ -1461,9 +1465,8 @@
1461 1465
1462 1466 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
1463 1467 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
1464 1468 display: flex;
1465 - width: -moz-max-content;
1466 1469 width: max-content;
1467 1470 flex: 0 0 auto;
1468 1471 gap: var(--wpds-dimension-gap-xs, 4px);
1469 1472 white-space: nowrap;
@@ -1516,10 +1519,9 @@
1516 1519 .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
1517 1520 .dataviews-view-list div[role=article]:not(.is-selected):hover,
1518 1521 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1519 1522 .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
1520 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1521 - background-color: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
1523 + background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1522 1524 }
1523 1525
1524 1526 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
1525 1527 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field,
@@ -1530,9 +1532,9 @@
1530 1532 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
1531 1533 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1532 1534 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1533 1535 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
1534 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1536 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1535 1537 }
1536 1538
1537 1539 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1538 1540 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
@@ -1538,9 +1540,9 @@
1538 1540 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1539 1541 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1540 1542 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
1541 1543 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1542 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1544 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1543 1545 }
1544 1546
1545 1547 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1546 1548 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
@@ -1549,9 +1551,9 @@
1549 1551 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1550 1552 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1551 1553 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1552 1554 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
1553 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1555 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1554 1556 }
1555 1557
1556 1558 .dataviews-view-list .dataviews-view-list__item {
1557 1559 position: absolute;
@@ -1557,10 +1559,8 @@
1557 1559 position: absolute;
1558 1560 z-index: 1;
1559 1561 inset: 0;
1560 1562 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
1561 - -webkit-appearance: none;
1562 - -moz-appearance: none;
1563 1563 appearance: none;
1564 1564 border: none;
1565 1565 background: none;
1566 1566 padding: 0;
@@ -1603,9 +1603,8 @@
1603 1603
1604 1604 .dataviews-view-list .dataviews-view-list__media-wrapper img {
1605 1605 width: 100%;
1606 1606 height: 100%;
1607 - -o-object-fit: cover;
1608 1607 object-fit: cover;
1609 1608 }
1610 1609
1611 1610 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -1625,9 +1624,9 @@
1625 1624 min-width: 0;
1626 1625 }
1627 1626
1628 1627 .dataviews-view-list .dataviews-view-list__field {
1629 - color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
1628 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1630 1629 }
1631 1630
1632 1631 .dataviews-view-list .dataviews-view-list__fields {
1633 1632 display: flex;
@@ -1744,9 +1743,9 @@
1744 1743
1745 1744 .dataviews-view-table th {
1746 1745 text-align: left;
1747 1746 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1748 - font-weight: normal;
1747 + font-weight: 400;
1749 1748 font-size: var(--wpds-typography-font-size-md, 13px);
1750 1749 }
1751 1750
1752 1751 .dataviews-view-table td,
@@ -1774,9 +1773,9 @@
1774 1773 top: 0;
1775 1774 bottom: 0;
1776 1775 left: 0;
1777 1776 width: 1px;
1778 - background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
1777 + background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1779 1778 }
1780 1779
1781 1780 .dataviews-view-table td.dataviews-view-table__checkbox-column,
1782 1781 .dataviews-view-table th.dataviews-view-table__checkbox-column {
@@ -1988,9 +1987,8 @@
1988 1987
1989 1988 .dataviews-column-primary__media img {
1990 1989 width: var(--wpds-dimension-size-md, 32px);
1991 1990 height: var(--wpds-dimension-size-md, 32px);
1992 - -o-object-fit: cover;
1993 1991 object-fit: cover;
1994 1992 }
1995 1993
1996 1994 .dataviews-column-primary__media::after {
@@ -2069,9 +2067,8 @@
2069 2067 text-align: start;
2070 2068 }
2071 2069
2072 2070 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
2073 - width: -moz-fit-content;
2074 2071 width: fit-content;
2075 2072 }
2076 2073
2077 2074 .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
@@ -2107,13 +2104,13 @@
2107 2104 aspect-ratio: 1/1;
2108 2105 min-height: 0;
2109 2106 background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2110 2107 border-radius: var(--wpds-border-radius-md, 4px);
2108 + overflow: hidden;
2111 2109 position: relative;
2112 2110 }
2113 2111
2114 2112 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
2115 - -o-object-fit: cover;
2116 2113 object-fit: cover;
2117 2114 width: 100%;
2118 2115 height: 100%;
2119 2116 }
@@ -2129,8 +2126,16 @@
2129 2126 border-radius: var(--wpds-border-radius-md, 4px);
2130 2127 pointer-events: none;
2131 2128 }
2132 2129
2130 +.dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media {
2131 + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2132 +}
2133 +
2134 +.dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
2135 + object-fit: contain;
2136 +}
2137 +
2133 2138 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
2134 2139 position: relative;
2135 2140 font-size: 12px;
2136 2141 line-height: 16px;
@@ -2292,9 +2297,8 @@
2292 2297 }
2293 2298
2294 2299 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
2295 2300 display: flex;
2296 - width: -moz-max-content;
2297 2301 width: max-content;
2298 2302 flex: 0 0 auto;
2299 2303 }
2300 2304
@@ -2426,9 +2430,8 @@
2426 2430 display: block;
2427 2431 width: 100%;
2428 2432 height: 100%;
2429 2433 margin: 0 auto;
2430 - -o-object-fit: cover;
2431 2434 object-fit: cover;
2432 2435 border-radius: 50%;
2433 2436 box-sizing: border-box;
2434 2437 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -2643,9 +2646,8 @@
2643 2646 display: block;
2644 2647 width: 100%;
2645 2648 height: 100%;
2646 2649 margin: 0 auto;
2647 - -o-object-fit: cover;
2648 2650 object-fit: cover;
2649 2651 border-radius: 50%;
2650 2652 box-sizing: border-box;
2651 2653 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -2699,53 +2701,29 @@
2699 2701 .dataviews-controls__date-preset:active {
2700 2702 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
2701 2703 }
2702 2704
2703 -.dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2704 - --wp-components-color-accent: #cc1818;
2705 - border-color: #cc1818;
2705 +.dataviews-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]), .dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2706 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2706 2707 }
2707 2708
2708 -.dataviews-validated-control__indicator {
2709 - display: flex;
2710 - align-items: flex-start;
2711 - gap: 4px;
2712 - margin: 8px 0 0;
2713 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2714 - font-size: 12px;
2715 - line-height: 16px;
2716 - color: #757575;
2717 - animation: dataviews-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
2709 +.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2710 + border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2718 2711 }
2719 2712
2720 -.dataviews-validated-control__indicator.is-invalid {
2721 - color: #cc1818;
2713 +.dataviews-validated-control__wrapper-with-error-delegate {
2714 + position: relative;
2722 2715 }
2723 2716
2724 -.dataviews-validated-control__indicator.is-valid {
2725 - color: color-mix(in srgb, #000 30%, #4ab866);
2717 +.dataviews-validated-control__error-delegate {
2718 + position: absolute;
2719 + top: 0;
2720 + height: 100%;
2721 + width: 100%;
2722 + opacity: 0;
2723 + pointer-events: none;
2726 2724 }
2727 2725
2728 -.dataviews-validated-control__indicator-icon {
2729 - flex-shrink: 0;
2730 -}
2731 -
2732 -.dataviews-validated-control__indicator-spinner {
2733 - margin: 2px;
2734 - width: 12px;
2735 - height: 12px;
2736 -}
2737 -
2738 -@keyframes dataviews-validated-control__indicator-jump {
2739 - 0% {
2740 - transform: translateY(-4px);
2741 - opacity: 0;
2742 - }
2743 - 100% {
2744 - transform: translateY(0);
2745 - opacity: 1;
2746 - }
2747 -}
2748 2726 .dataforms-layouts-panel__field-trigger {
2749 2727 position: relative;
2750 2728 color: inherit;
2751 2729 display: flex;
@@ -2808,8 +2786,14 @@
2808 2786 opacity: 0;
2809 2787 border-radius: var(--wpds-border-radius-xs, 1px);
2810 2788 }
2811 2789
2790 +.dataforms-layouts-panel__field-trigger-icon::after {
2791 + content: "";
2792 + position: absolute;
2793 + inset: 0;
2794 +}
2795 +
2812 2796 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2813 2797 opacity: 1;
2814 2798 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2815 2799 }
@@ -2843,11 +2827,9 @@
2843 2827 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2844 2828 }
2845 2829
2846 2830 .dataforms-layouts-panel__field-label-error-content {
2847 - position: relative;
2848 - z-index: 1;
2849 - cursor: help;
2831 + pointer-events: none;
2850 2832 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2851 2833 display: inline-flex;
2852 2834 flex-direction: row;
2853 2835 align-items: center;
@@ -2863,12 +2845,17 @@
2863 2845 align-items: center;
2864 2846 overflow: clip;
2865 2847 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2866 2848 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2867 - word-break: break-word;
2849 + word-break: normal;
2850 + overflow-wrap: anywhere;
2868 2851 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2869 2852 }
2870 2853
2854 +.dataforms-layouts-panel__field-control:has(a, button) {
2855 + z-index: 1;
2856 +}
2857 +
2871 2858 .dataforms-layouts-panel__field-control > * {
2872 2859 min-width: 0;
2873 2860 }
2874 2861
@@ -2901,12 +2888,8 @@
2901 2888 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
2902 2889 z-index: 159990;
2903 2890 }
2904 2891
2905 -.dataforms-layouts-panel__summary-button:empty {
2906 - min-width: 160px;
2907 -}
2908 -
2909 2892 .dataforms-layouts-regular__field {
2910 2893 width: 100%;
2911 2894 min-height: var(--wpds-dimension-size-md, 32px);
2912 2895 justify-content: flex-start !important;
@@ -3124,9 +3107,9 @@
3124 3107 padding: 12px;
3125 3108 display: grid;
3126 3109 align-items: center;
3127 3110 grid-template-columns: min-content 1fr min-content;
3128 - grid-gap: 4px 8px;
3111 + gap: 4px 8px;
3129 3112 color: #1e1e1e;
3130 3113 }
3131 3114
3132 3115 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -3409,11 +3392,9 @@
3409 3392
3410 3393 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
3411 3394 width: 100%;
3412 3395 height: 100%;
3413 - -o-object-fit: cover;
3414 3396 object-fit: cover;
3415 - -o-object-position: 50% 50%;
3416 3397 object-position: 50% 50%;
3417 3398 }
3418 3399
3419 3400 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
@@ -3473,9 +3454,8 @@
3473 3454
3474 3455 .fields-controls__author-avatar img {
3475 3456 width: 16px;
3476 3457 height: 16px;
3477 - -o-object-fit: cover;
3478 3458 object-fit: cover;
3479 3459 opacity: 0;
3480 3460 border-radius: 100%;
3481 3461 }
@@ -3511,18 +3491,15 @@
3511 3491 padding: 0;
3512 3492 margin: 0;
3513 3493 }
3514 3494
3515 -.fields-controls__slug .fields-controls__slug-external-icon {
3516 - margin-left: 5ch;
3517 -}
3518 -
3519 3495 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
3520 3496 padding-inline-start: 0 !important;
3521 3497 }
3522 3498
3523 3499 .fields-controls__slug .fields-controls__slug-help-link {
3524 - word-break: break-word;
3500 + word-break: normal;
3501 + overflow-wrap: anywhere;
3525 3502 }
3526 3503
3527 3504 .fields-controls__slug .fields-controls__slug-help {
3528 3505 display: flex;
@@ -3731,9 +3708,9 @@
3731 3708 .font-library__footer {
3732 3709 position: absolute;
3733 3710 width: 100%;
3734 3711 bottom: 0;
3735 - border-top: 1px solid #ddd;
3712 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3736 3713 padding: 24px;
3737 3714 background-color: #fff;
3738 3715 box-sizing: border-box;
3739 3716 flex-grow: 0 !important;
@@ -3775,11 +3752,15 @@
3775 3752 .font-library__fonts-list-item {
3776 3753 margin-bottom: 0;
3777 3754 }
3778 3755
3756 +.font-library__font-demo {
3757 + position: relative;
3758 +}
3759 +
3779 3760 .font-library__font-card {
3780 3761 box-sizing: border-box;
3781 - border: 1px solid #ddd;
3762 + border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3782 3763 width: 100%;
3783 3764 height: auto !important;
3784 3765 padding: 16px;
3785 3766 margin-top: -1px; /* To collapse the margin with the previous element */
@@ -3793,13 +3774,13 @@
3793 3774 position: relative;
3794 3775 }
3795 3776
3796 3777 .font-library__font-card .font-library__font-card__name {
3797 - font-weight: bold;
3778 + font-weight: 700;
3798 3779 }
3799 3780
3800 3781 .font-library__font-card .font-library__font-card__count {
3801 - color: #757575;
3782 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3802 3783 }
3803 3784
3804 3785 .font-library__font-card .font-library__font-variant_demo-image {
3805 3786 display: block;
@@ -3806,8 +3787,25 @@
3806 3787 height: 24px;
3807 3788 width: auto;
3808 3789 }
3809 3790
3791 +@media not (prefers-reduced-motion) {
3792 + .font-library__font-card .font-library__font-variant_demo-image {
3793 + transition: opacity var(--wpds-motion-duration-lg, 300ms) var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
3794 + }
3795 +}
3796 +.font-library__font-card .font-library__font-variant_demo-image.is-loading {
3797 + position: absolute;
3798 + top: 0;
3799 + left: 0;
3800 + opacity: 0;
3801 +}
3802 +
3803 +.font-library__font-card .font-library__font-variant-demo-skeleton {
3804 + height: 24px;
3805 + border-radius: var(--wpds-border-radius-sm, 2px);
3806 +}
3807 +
3810 3808 .font-library__font-card .font-library__font-variant_demo-text {
3811 3809 white-space: nowrap;
3812 3810 flex-shrink: 0;
3813 3811 }
@@ -3819,9 +3817,9 @@
3819 3817 }
3820 3818 .font-library-modal__tablist-container {
3821 3819 position: sticky;
3822 3820 top: 0;
3823 - border-bottom: 1px solid #ddd;
3821 + border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3824 3822 background: #fff;
3825 3823 z-index: 1;
3826 3824 }
3827 3825
@@ -3842,9 +3840,9 @@
3842 3840 width: 80%;
3843 3841 }
3844 3842
3845 3843 .font-library__local-fonts .font-library__upload-area__text {
3846 - color: #757575;
3844 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3847 3845 }
3848 3846
3849 3847 .font-library__google-fonts-confirm {
3850 3848 display: flex;
@@ -3879,113 +3877,22 @@
3879 3877 .font-library__select-all .components-checkbox-control__label {
3880 3878 padding-left: 16px;
3881 3879 }
3882 3880
3883 -.global-styles-ui-pagination .components-button.is-tertiary {
3884 - width: 32px;
3885 - height: 32px;
3886 - justify-content: center;
3887 -}
3888 -
3889 -.global-styles-ui-screen-revisions__revisions-list {
3890 - list-style: none;
3891 - margin: 0 16px 16px 16px;
3892 - flex-grow: 1;
3893 -}
3894 -
3895 -.global-styles-ui-screen-revisions__revisions-list li {
3896 - margin-bottom: 0;
3897 -}
3898 -
3899 -.global-styles-ui-screen-revisions__revision-item {
3900 - position: relative;
3901 - cursor: var(--wpds-cursor-control, pointer);
3881 +.global-styles-ui-screen-revisions {
3902 3882 display: flex;
3903 3883 flex-direction: column;
3884 + flex-grow: 1;
3885 + min-height: 0;
3904 3886 }
3905 3887
3906 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
3907 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3908 - outline: 2px solid transparent;
3888 +.global-styles-ui-screen-revisions__actions {
3889 + margin-inline-start: auto;
3909 3890 }
3910 3891
3911 -.global-styles-ui-screen-revisions__revision-item:hover {
3912 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3913 -}
3914 -
3915 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
3916 - color: var(--wp-admin-theme-color);
3917 -}
3918 -
3919 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
3920 - position: absolute;
3921 - content: "\a";
3922 - display: block;
3923 -}
3924 -
3925 -.global-styles-ui-screen-revisions__revision-item::before {
3926 - background: #ddd;
3927 - border-radius: 50%;
3928 - height: 8px;
3929 - width: 8px;
3930 - top: 18px;
3931 - left: 17px;
3932 - transform: translate(-50%, -50%);
3933 - z-index: 1;
3934 - border: 4px solid transparent;
3935 -}
3936 -
3937 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
3938 - border-radius: 2px;
3939 - outline: 3px solid transparent;
3940 - outline-offset: -2px;
3941 - color: var(--wp-admin-theme-color);
3942 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3943 -}
3944 -
3945 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
3946 - color: var(--wp-admin-theme-color);
3947 -}
3948 -
3949 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
3950 - background: var(--wp-admin-theme-color);
3951 -}
3952 -
3953 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3954 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
3955 - color: #1e1e1e;
3956 -}
3957 -
3958 -.global-styles-ui-screen-revisions__revision-item::after {
3959 - height: 100%;
3960 - left: 16px;
3961 - top: 0;
3962 - width: 0;
3963 - border: 0.5px solid #ddd;
3964 -}
3965 -
3966 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
3967 - top: 18px;
3968 -}
3969 -
3970 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
3971 - height: 18px;
3972 -}
3973 -
3974 -.global-styles-ui-screen-revisions__revision-item-wrapper {
3975 - display: block;
3976 - padding: 12px 12px 4px 40px;
3977 -}
3978 -
3979 -.global-styles-ui-screen-revisions__apply-button.is-primary,
3980 -.global-styles-ui-screen-revisions__active-badge {
3981 - align-self: flex-start;
3982 - margin: 0 12px 12px 40px;
3983 -}
3984 -
3985 -.global-styles-ui-screen-revisions__changes,
3986 -.global-styles-ui-screen-revisions__meta {
3987 - color: #757575;
3892 +.global-styles-ui-screen-revisions__date {
3893 + text-transform: uppercase;
3894 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3988 3895 font-size: 12px;
3989 3896 }
3990 3897
3991 3898 .global-styles-ui-screen-revisions__description {
@@ -3994,11 +3901,11 @@
3994 3901 align-items: flex-start;
3995 3902 gap: 8px;
3996 3903 }
3997 3904
3998 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
3999 - text-transform: uppercase;
4000 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3905 +.global-styles-ui-screen-revisions__changes,
3906 +.global-styles-ui-screen-revisions__meta {
3907 + color: #2f2f2f;
4001 3908 font-size: 12px;
4002 3909 }
4003 3910
4004 3911 .global-styles-ui-screen-revisions__meta {
@@ -4004,11 +3911,10 @@
4004 3911 .global-styles-ui-screen-revisions__meta {
4005 3912 display: flex;
4006 3913 justify-content: start;
4007 3914 width: 100%;
4008 - align-items: flex-start;
3915 + align-items: center;
4009 3916 text-align: left;
4010 - margin-bottom: 4px;
4011 3917 }
4012 3918
4013 3919 .global-styles-ui-screen-revisions__meta img {
4014 3920 width: 16px;
@@ -4016,16 +3922,12 @@
4016 3922 border-radius: 100%;
4017 3923 margin-right: 8px;
4018 3924 }
4019 3925
4020 -.global-styles-ui-screen-revisions__loading {
4021 - margin: 24px auto !important;
4022 -}
4023 -
4024 3926 .global-styles-ui-screen-revisions__changes {
4025 3927 text-align: left;
4026 3928 line-height: 1.4;
4027 - margin-left: 12px;
3929 + margin: 0 0 0 12px;
4028 3930 list-style: disc;
4029 3931 }
4030 3932
4031 3933 .global-styles-ui-screen-revisions__changes li {
@@ -4031,47 +3933,8 @@
4031 3933 .global-styles-ui-screen-revisions__changes li {
4032 3934 margin-bottom: 4px;
4033 3935 }
4034 3936
4035 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
4036 - justify-content: space-between;
4037 - gap: 2px;
4038 -}
4039 -
4040 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
4041 - position: absolute;
4042 - left: -1000px;
4043 - height: 1px;
4044 - margin: -1px;
4045 - overflow: hidden;
4046 -}
4047 -
4048 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
4049 - font-size: 12px;
4050 - will-change: opacity;
4051 -}
4052 -
4053 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
4054 - color: #1e1e1e;
4055 -}
4056 -
4057 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
4058 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
4059 - color: #949494;
4060 -}
4061 -
4062 -.global-styles-ui-screen-revisions__footer {
4063 - height: 56px;
4064 - z-index: 1;
4065 - position: sticky;
4066 - min-width: 100%;
4067 - bottom: 0;
4068 - background: #fff;
4069 - padding: 12px;
4070 - border-top: 1px solid #ddd;
4071 - box-sizing: border-box;
4072 -}
4073 -
4074 3937 .global-styles-ui-variations_item {
4075 3938 box-sizing: border-box;
4076 3939 cursor: var(--wpds-cursor-control, pointer);
4077 3940 }
@@ -4152,13 +4015,34 @@
4152 4015 justify-content: center;
4153 4016 border-radius: 2px;
4154 4017 }
4155 4018
4019 +.global-styles-ui-block-types-filter {
4020 + margin-bottom: 12px;
4021 + padding: 0 16px;
4022 +}
4023 +
4156 4024 .global-styles-ui-block-types-search {
4157 - margin-bottom: 10px;
4158 - padding: 0 16px;
4025 + flex-grow: 1;
4159 4026 }
4160 4027
4028 +.global-styles-ui-block-types-item-list .global-styles-ui-block-types-item__icon {
4029 + min-width: 24px;
4030 +}
4031 +
4032 +.global-styles-ui-block-types-item-list__no-results {
4033 + padding-top: 16px;
4034 +}
4035 +
4036 +.global-styles-ui-block-types-item__indicator {
4037 + background: var(--wp-admin-theme-color);
4038 + border-radius: 50%;
4039 + flex: none;
4040 + height: 6px;
4041 + margin-left: auto;
4042 + width: 6px;
4043 +}
4044 +
4161 4045 .global-styles-ui-screen-typography__font-variants-count {
4162 4046 color: #757575;
4163 4047 }
4164 4048
@@ -4200,10 +4084,20 @@
4200 4084
4201 4085 .global-styles-ui__color-indicator-wrapper {
4202 4086 height: 24px;
4203 4087 flex-shrink: 0;
4088 + display: flex;
4089 + align-items: center;
4204 4090 }
4205 4091
4092 +.global-styles-ui__palette-preview {
4093 + display: inline-flex;
4094 +}
4095 +
4096 +.global-styles-ui__palette-preview > * + * {
4097 + margin-inline-start: -8px;
4098 +}
4099 +
4206 4100 .global-styles-ui__shadows-panel__options-container,
4207 4101 .global-styles-ui__typography-panel__options-container {
4208 4102 height: 24px;
4209 4103 }
@@ -4215,9 +4109,10 @@
4215 4109 border-radius: 2px;
4216 4110 overflow: hidden;
4217 4111 }
4218 4112
4219 -.global-styles-ui__shadow-preview-panel {
4113 +.global-styles-ui__shadow-preview-panel,
4114 +.global-styles-ui__text-shadow-preview-panel {
4220 4115 height: 144px;
4221 4116 border: #ddd 1px solid;
4222 4117 border-radius: 2px;
4223 4118 overflow: auto;
@@ -4227,9 +4122,9 @@
4227 4122 /*rtl:end:ignore*/
4228 4123 background-size: 16px 16px;
4229 4124 }
4230 4125
4231 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4126 +.global-styles-ui__shadow-preview-block {
4232 4127 border: #ddd 1px solid;
4233 4128 border-radius: 2px;
4234 4129 background-color: #fff;
4235 4130 width: 60%;
@@ -4235,22 +4130,44 @@
4235 4130 width: 60%;
4236 4131 height: 60px;
4237 4132 }
4238 4133
4239 -.global-styles-ui__shadow-editor__dropdown-content {
4134 +.global-styles-ui__text-shadow-preview-panel {
4135 + margin-block: -8px 16px;
4136 +}
4137 +
4138 +.global-styles-ui__text-shadow-preview-text {
4139 + font-size: 24px;
4140 +}
4141 +
4142 +.global-styles-ui__text-shadow-editor__header {
4143 + margin-block-end: 8px;
4144 +}
4145 +
4146 +.global-styles-ui__text-shadow-editor__inputs {
4147 + display: grid;
4148 + grid-template-columns: repeat(2, 1fr);
4149 + gap: 16px;
4150 +}
4151 +
4152 +.global-styles-ui__shadow-editor__dropdown-content,
4153 +.global-styles-ui__text-shadow-editor__dropdown-content {
4240 4154 width: 280px;
4241 4155 }
4242 4156
4243 -.global-styles-ui__shadow-editor-panel {
4157 +.global-styles-ui__shadow-editor-panel,
4158 +.global-styles-ui__text-shadow-editor-panel {
4244 4159 margin-bottom: 4px;
4245 4160 }
4246 4161
4247 -.global-styles-ui__shadow-editor__dropdown {
4162 +.global-styles-ui__shadow-editor__dropdown,
4163 +.global-styles-ui__text-shadow-editor__dropdown {
4248 4164 width: 100%;
4249 4165 position: relative;
4250 4166 }
4251 4167
4252 -.global-styles-ui__shadow-editor__dropdown-toggle {
4168 +.global-styles-ui__shadow-editor__dropdown-toggle,
4169 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
4253 4170 width: 100%;
4254 4171 height: auto;
4255 4172 padding-top: 8px;
4256 4173 padding-bottom: 8px;
@@ -4257,14 +4174,16 @@
4257 4174 text-align: left;
4258 4175 border-radius: inherit;
4259 4176 }
4260 4177
4261 -.global-styles-ui__shadow-editor__dropdown-toggle.is-open {
4178 +.global-styles-ui__shadow-editor__dropdown-toggle.is-open,
4179 +.global-styles-ui__text-shadow-editor__dropdown-toggle.is-open {
4262 4180 background: #f0f0f0;
4263 4181 color: var(--wp-admin-theme-color);
4264 4182 }
4265 4183
4266 -.global-styles-ui__shadow-editor__remove-button {
4184 +.global-styles-ui__shadow-editor__remove-button,
4185 +.global-styles-ui__text-shadow-editor__remove-button {
4267 4186 position: absolute;
4268 4187 right: 8px;
4269 4188 top: 8px;
4270 4189 opacity: 0;
@@ -4269,18 +4188,19 @@
4269 4188 top: 8px;
4270 4189 opacity: 0;
4271 4190 }
4272 4191
4273 -.global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
4274 - border: none;
4275 -}
4276 -
4277 -.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover {
4192 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover,
4193 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4194 +.global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4195 +.global-styles-ui__text-shadow-editor__remove-button:focus,
4196 +.global-styles-ui__text-shadow-editor__remove-button:hover {
4278 4197 opacity: 1;
4279 4198 }
4280 4199
4281 4200 @media (hover: none) {
4282 - .global-styles-ui__shadow-editor__remove-button {
4201 + .global-styles-ui__shadow-editor__remove-button,
4202 + .global-styles-ui__text-shadow-editor__remove-button {
4283 4203 opacity: 1;
4284 4204 }
4285 4205 }
4286 4206 .global-styles-ui-screen-css {
@@ -4364,9 +4284,10 @@
4364 4284 clip-path: border-box;
4365 4285 }
4366 4286
4367 4287 .global-styles-ui-color-palette-panel,
4368 -.global-styles-ui-gradient-palette-panel {
4288 +.global-styles-ui-gradient-palette-panel,
4289 +.global-styles-ui-duotone-palette-panel {
4369 4290 padding: 16px;
4370 4291 }
4371 4292
4372 4293 .edit-site-custom-template-modal__contents-wrapper {
@@ -4375,13 +4296,8 @@
4375 4296 }
4376 4297 .edit-site-custom-template-modal__contents-wrapper > * {
4377 4298 width: 100%;
4378 4299 }
4379 -.edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4380 - margin-left: -12px;
4381 - margin-right: -12px;
4382 - width: calc(100% + 24px);
4383 -}
4384 4300 .edit-site-custom-template-modal__contents > .components-button {
4385 4301 height: auto;
4386 4302 justify-content: center;
4387 4303 }
@@ -4391,10 +4307,14 @@
4391 4307 }
4392 4308 }
4393 4309 @media (min-width: 600px) {
4394 4310 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4395 - max-height: 224px;
4396 4311 overflow-y: auto;
4312 + max-height: calc(224px + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4313 + padding: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4314 + margin-inline: calc(-2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4315 + width: calc(100% + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4316 + scroll-padding-block: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4397 4317 }
4398 4318 }
4399 4319 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4400 4320 display: block;
@@ -4420,11 +4340,8 @@
4420 4340 }
4421 4341 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4422 4342 background-color: #f0f0f0;
4423 4343 }
4424 -.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4425 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4426 -}
4427 4344 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4428 4345 overflow: hidden;
4429 4346 text-overflow: ellipsis;
4430 4347 display: block;
@@ -4456,14 +4373,10 @@
4456 4373 }
4457 4374 }
4458 4375 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4459 4376 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4460 - fill: var(--wp-admin-theme-color);
4377 + color: var(--wp-admin-theme-color);
4461 4378 }
4462 -.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4463 - flex-grow: 1;
4464 - align-items: flex-start;
4465 -}
4466 4379 .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4467 4380 padding: 8px;
4468 4381 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4469 4382 border-radius: 100%;
@@ -4477,9 +4390,8 @@
4477 4390 display: flex;
4478 4391 flex-direction: column;
4479 4392 border: 1px solid #ddd;
4480 4393 justify-content: center;
4481 - outline: 1px solid transparent;
4482 4394 }
4483 4395 .edit-site-custom-template-modal__contents > .components-button span:first-child,
4484 4396 .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4485 4397 color: #1e1e1e;
@@ -4497,14 +4409,8 @@
4497 4409 .edit-site-custom-template-modal__contents > .components-button:hover span,
4498 4410 .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4499 4411 color: var(--wp-admin-theme-color);
4500 4412 }
4501 -.edit-site-custom-template-modal__contents > .components-button:focus,
4502 -.edit-site-add-new-template__template-list__contents > .components-button:focus {
4503 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4504 - border-color: transparent;
4505 - outline: 3px solid transparent;
4506 -}
4507 4413 .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4508 4414 .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4509 4415 color: var(--wp-admin-theme-color);
4510 4416 }
@@ -4516,10 +4422,12 @@
4516 4422 }
4517 4423
4518 4424 .edit-site-add-new-template__template-list__contents > .components-button {
4519 4425 height: 100%;
4426 + padding: 16px;
4520 4427 text-align: start;
4521 4428 align-items: flex-start;
4429 + justify-content: flex-start;
4522 4430 }
4523 4431
4524 4432 .edit-site-visual-editor__editor-canvas.is-focused {
4525 4433 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
@@ -4728,10 +4636,9 @@
4728 4636 }
4729 4637 .edit-site-welcome-guide__image > img {
4730 4638 display: block;
4731 4639 max-width: 100%;
4732 - -o-object-fit: cover;
4733 - object-fit: cover;
4640 + object-fit: cover;
4734 4641 }
4735 4642 .edit-site-welcome-guide__heading {
4736 4643 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4737 4644 font-size: 24px;
@@ -4752,9 +4659,9 @@
4752 4659 margin: 0 4px;
4753 4660 vertical-align: text-top;
4754 4661 }
4755 4662 .edit-site-welcome-guide .components-button:hover svg {
4756 - fill: #fff;
4663 + color: #fff;
4757 4664 }
4758 4665
4759 4666 .edit-site-layout {
4760 4667 height: 100%;
@@ -5321,13 +5228,8 @@
5321 5228 margin-left: -16px;
5322 5229 margin-right: -16px;
5323 5230 }
5324 5231
5325 -.edit-site-sidebar-navigation-screen-templates-browse {
5326 - margin-left: -16px;
5327 - margin-right: -16px;
5328 -}
5329 -
5330 5232 .edit-site-sidebar-dataviews {
5331 5233 margin-left: -16px;
5332 5234 margin-right: -16px;
5333 5235 }
@@ -5435,9 +5337,8 @@
5435 5337 }
5436 5338 body:has(.edit-site-resizable-frame__inner.is-resizing) {
5437 5339 cursor: col-resize;
5438 5340 -webkit-user-select: none;
5439 - -moz-user-select: none;
5440 5341 user-select: none;
5441 5342 }
5442 5343
5443 5344 .edit-site-resizable-frame__inner.is-resizing::before {
@@ -5521,8 +5422,14 @@
5521 5422 .edit-site-styles .edit-site-sidebar-button {
5522 5423 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5523 5424 }
5524 5425
5426 +.edit-site-styles__content {
5427 + flex-grow: 1;
5428 + min-height: 0;
5429 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5430 +}
5431 +
5525 5432 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5526 5433 width: auto;
5527 5434 padding: 0 var(--wpds-dimension-padding-xs, 4px);
5528 5435 }
@@ -5533,8 +5440,16 @@
5533 5440 content: attr(aria-label);
5534 5441 font-size: var(--wpds-typography-font-size-sm, 12px);
5535 5442 }
5536 5443
5444 +.edit-site-sidebar-identity__form {
5445 + flex-grow: 1;
5446 + min-height: 0;
5447 + overflow: auto;
5448 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5449 + padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
5450 +}
5451 +
5537 5452 ::view-transition-image-pair(root) {
5538 5453 isolation: auto;
5539 5454 }
5540 5455
@@ -5596,11 +5511,12 @@
5596 5511 }
5597 5512 @media (min-width: 782px) {
5598 5513 body.js.site-editor-php:has(.editor-editor-interface.is-distraction-free) {
5599 5514 --wp-admin--admin-bar--height: 0px;
5515 + --wp-editor-admin-bar-display: none;
5600 5516 }
5601 - body.js.site-editor-php:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
5602 - display: none;
5517 + body.js.site-editor-php #wpadminbar {
5518 + display: var(--wp-editor-admin-bar-display, block);
5603 5519 }
5604 5520 }
5605 5521
5606 5522 .edit-site {