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/edit-site/style.css +241 -325 23.8.0 → 24.1.0 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 {