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 +125 -254 23.9.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;
@@ -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;
@@ -726,9 +731,9 @@
726 731 /* Override core line-height. To be reviewed. */
727 732 line-height: normal;
728 733 }
729 734 }
730 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
735 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
731 736 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
732 737 }
733 738
734 739 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
@@ -737,14 +742,14 @@
737 742 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
738 743 box-shadow: none;
739 744 }
740 745
741 -.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 {
742 747 color: rgba(30, 30, 30, 0.62);
743 748 }
744 749
745 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
746 - 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);
747 752 }
748 753
749 754 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
750 755 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
@@ -777,9 +782,9 @@
777 782 display: inline-block;
778 783 vertical-align: middle;
779 784 width: 16px;
780 785 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
781 - font: normal 30px/1 dashicons;
786 + font: 400 30px/1 dashicons;
782 787 speak: none;
783 788 -webkit-font-smoothing: antialiased;
784 789 -moz-osx-font-smoothing: grayscale;
785 790 }
@@ -790,17 +795,23 @@
790 795 font-size: 21px;
791 796 }
792 797 }
793 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 {
794 - background: #f0f0f0;
795 - 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);
796 802 cursor: default;
797 803 opacity: 1;
798 804 }
799 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 +
800 810 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
801 811 position: relative;
802 - 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));
803 814 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
804 815 margin: 0;
805 816 padding: 0;
806 817 width: var(--checkbox-size);
@@ -823,9 +834,9 @@
823 834 }
824 835
825 836 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
826 837 --checkmark-size: var(--checkbox-size);
827 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
838 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
828 839 position: absolute;
829 840 left: 50%;
830 841 top: 50%;
831 842 transform: translate(-50%, -50%);
@@ -860,9 +871,9 @@
860 871 /* Override core line-height. To be reviewed. */
861 872 line-height: normal;
862 873 }
863 874 }
864 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
875 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true]) {
865 876 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
866 877 }
867 878
868 879 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
@@ -871,12 +882,8 @@
871 882 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
872 883 box-shadow: none;
873 884 }
874 885
875 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
876 - color: rgba(30, 30, 30, 0.62);
877 -}
878 -
879 886 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
880 887 color: rgba(30, 30, 30, 0.62);
881 888 }
882 889
@@ -899,12 +906,8 @@
899 906 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
900 907 background: var(--wpds-color-background-surface-neutral-strong, #fff);
901 908 }
902 909
903 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
904 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
905 -}
906 -
907 910 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
908 911 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
909 912 }
910 913
@@ -949,12 +952,8 @@
949 952 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
950 953 box-sizing: border-box;
951 954 }
952 955
953 -.dataviews-search {
954 - flex-basis: 210px;
955 -}
956 -
957 956 .dataviews-filters__user-input-widget {
958 957 padding: var(--wpds-dimension-padding-lg, 16px);
959 958 }
960 959
@@ -1231,9 +1230,8 @@
1231 1230 }
1232 1231
1233 1232 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
1234 1233 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
1235 - width: -moz-fit-content;
1236 1234 width: fit-content;
1237 1235 }
1238 1236
1239 1237 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
@@ -1267,9 +1265,8 @@
1267 1265 }
1268 1266
1269 1267 .dataviews-view-grid .dataviews-view-grid__media img,
1270 1268 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
1271 - -o-object-fit: cover;
1272 1269 object-fit: cover;
1273 1270 width: 100%;
1274 1271 height: 100%;
1275 1272 }
@@ -1303,9 +1300,8 @@
1303 1300 }
1304 1301
1305 1302 .dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
1306 1303 .dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
1307 - -o-object-fit: contain;
1308 1304 object-fit: contain;
1309 1305 }
1310 1306
1311 1307 .dataviews-view-grid .dataviews-view-grid__fields,
@@ -1469,9 +1465,8 @@
1469 1465
1470 1466 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
1471 1467 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
1472 1468 display: flex;
1473 - width: -moz-max-content;
1474 1469 width: max-content;
1475 1470 flex: 0 0 auto;
1476 1471 gap: var(--wpds-dimension-gap-xs, 4px);
1477 1472 white-space: nowrap;
@@ -1564,10 +1559,8 @@
1564 1559 position: absolute;
1565 1560 z-index: 1;
1566 1561 inset: 0;
1567 1562 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
1568 - -webkit-appearance: none;
1569 - -moz-appearance: none;
1570 1563 appearance: none;
1571 1564 border: none;
1572 1565 background: none;
1573 1566 padding: 0;
@@ -1610,9 +1603,8 @@
1610 1603
1611 1604 .dataviews-view-list .dataviews-view-list__media-wrapper img {
1612 1605 width: 100%;
1613 1606 height: 100%;
1614 - -o-object-fit: cover;
1615 1607 object-fit: cover;
1616 1608 }
1617 1609
1618 1610 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -1751,9 +1743,9 @@
1751 1743
1752 1744 .dataviews-view-table th {
1753 1745 text-align: left;
1754 1746 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1755 - font-weight: normal;
1747 + font-weight: 400;
1756 1748 font-size: var(--wpds-typography-font-size-md, 13px);
1757 1749 }
1758 1750
1759 1751 .dataviews-view-table td,
@@ -1995,9 +1987,8 @@
1995 1987
1996 1988 .dataviews-column-primary__media img {
1997 1989 width: var(--wpds-dimension-size-md, 32px);
1998 1990 height: var(--wpds-dimension-size-md, 32px);
1999 - -o-object-fit: cover;
2000 1991 object-fit: cover;
2001 1992 }
2002 1993
2003 1994 .dataviews-column-primary__media::after {
@@ -2076,9 +2067,8 @@
2076 2067 text-align: start;
2077 2068 }
2078 2069
2079 2070 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
2080 - width: -moz-fit-content;
2081 2071 width: fit-content;
2082 2072 }
2083 2073
2084 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 {
@@ -2119,9 +2109,8 @@
2119 2109 position: relative;
2120 2110 }
2121 2111
2122 2112 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
2123 - -o-object-fit: cover;
2124 2113 object-fit: cover;
2125 2114 width: 100%;
2126 2115 height: 100%;
2127 2116 }
@@ -2142,9 +2131,8 @@
2142 2131 background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2143 2132 }
2144 2133
2145 2134 .dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
2146 - -o-object-fit: contain;
2147 2135 object-fit: contain;
2148 2136 }
2149 2137
2150 2138 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
@@ -2309,9 +2297,8 @@
2309 2297 }
2310 2298
2311 2299 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
2312 2300 display: flex;
2313 - width: -moz-max-content;
2314 2301 width: max-content;
2315 2302 flex: 0 0 auto;
2316 2303 }
2317 2304
@@ -2443,9 +2430,8 @@
2443 2430 display: block;
2444 2431 width: 100%;
2445 2432 height: 100%;
2446 2433 margin: 0 auto;
2447 - -o-object-fit: cover;
2448 2434 object-fit: cover;
2449 2435 border-radius: 50%;
2450 2436 box-sizing: border-box;
2451 2437 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -2660,9 +2646,8 @@
2660 2646 display: block;
2661 2647 width: 100%;
2662 2648 height: 100%;
2663 2649 margin: 0 auto;
2664 - -o-object-fit: cover;
2665 2650 object-fit: cover;
2666 2651 border-radius: 50%;
2667 2652 box-sizing: border-box;
2668 2653 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -2717,27 +2702,19 @@
2717 2702 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
2718 2703 }
2719 2704
2720 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 {
2721 - --focus-color: #cc1818;
2706 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2722 2707 }
2723 2708
2724 -.dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2725 - border-color: #cc1818;
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);
2726 2711 }
2727 2712
2728 -.dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
2729 - border-color: #cc1818;
2730 -}
2731 -
2732 2713 .dataviews-validated-control__wrapper-with-error-delegate {
2733 2714 position: relative;
2734 2715 }
2735 2716
2736 -.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
2737 - border-color: #cc1818;
2738 -}
2739 -
2740 2717 .dataviews-validated-control__error-delegate {
2741 2718 position: absolute;
2742 2719 top: 0;
2743 2720 height: 100%;
@@ -2868,9 +2845,10 @@
2868 2845 align-items: center;
2869 2846 overflow: clip;
2870 2847 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2871 2848 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2872 - word-break: break-word;
2849 + word-break: normal;
2850 + overflow-wrap: anywhere;
2873 2851 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2874 2852 }
2875 2853
2876 2854 .dataforms-layouts-panel__field-control:has(a, button) {
@@ -3129,9 +3107,9 @@
3129 3107 padding: 12px;
3130 3108 display: grid;
3131 3109 align-items: center;
3132 3110 grid-template-columns: min-content 1fr min-content;
3133 - grid-gap: 4px 8px;
3111 + gap: 4px 8px;
3134 3112 color: #1e1e1e;
3135 3113 }
3136 3114
3137 3115 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -3414,11 +3392,9 @@
3414 3392
3415 3393 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
3416 3394 width: 100%;
3417 3395 height: 100%;
3418 - -o-object-fit: cover;
3419 3396 object-fit: cover;
3420 - -o-object-position: 50% 50%;
3421 3397 object-position: 50% 50%;
3422 3398 }
3423 3399
3424 3400 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
@@ -3478,9 +3454,8 @@
3478 3454
3479 3455 .fields-controls__author-avatar img {
3480 3456 width: 16px;
3481 3457 height: 16px;
3482 - -o-object-fit: cover;
3483 3458 object-fit: cover;
3484 3459 opacity: 0;
3485 3460 border-radius: 100%;
3486 3461 }
@@ -3516,18 +3491,15 @@
3516 3491 padding: 0;
3517 3492 margin: 0;
3518 3493 }
3519 3494
3520 -.fields-controls__slug .fields-controls__slug-external-icon {
3521 - margin-left: 5ch;
3522 -}
3523 -
3524 3495 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
3525 3496 padding-inline-start: 0 !important;
3526 3497 }
3527 3498
3528 3499 .fields-controls__slug .fields-controls__slug-help-link {
3529 - word-break: break-word;
3500 + word-break: normal;
3501 + overflow-wrap: anywhere;
3530 3502 }
3531 3503
3532 3504 .fields-controls__slug .fields-controls__slug-help {
3533 3505 display: flex;
@@ -3802,13 +3774,13 @@
3802 3774 position: relative;
3803 3775 }
3804 3776
3805 3777 .font-library__font-card .font-library__font-card__name {
3806 - font-weight: bold;
3778 + font-weight: 700;
3807 3779 }
3808 3780
3809 3781 .font-library__font-card .font-library__font-card__count {
3810 - color: #757575;
3782 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3811 3783 }
3812 3784
3813 3785 .font-library__font-card .font-library__font-variant_demo-image {
3814 3786 display: block;
@@ -3868,9 +3840,9 @@
3868 3840 width: 80%;
3869 3841 }
3870 3842
3871 3843 .font-library__local-fonts .font-library__upload-area__text {
3872 - color: #757575;
3844 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3873 3845 }
3874 3846
3875 3847 .font-library__google-fonts-confirm {
3876 3848 display: flex;
@@ -3905,113 +3877,22 @@
3905 3877 .font-library__select-all .components-checkbox-control__label {
3906 3878 padding-left: 16px;
3907 3879 }
3908 3880
3909 -.global-styles-ui-pagination .components-button.is-tertiary {
3910 - width: 32px;
3911 - height: 32px;
3912 - justify-content: center;
3913 -}
3914 -
3915 -.global-styles-ui-screen-revisions__revisions-list {
3916 - list-style: none;
3917 - margin: 0 16px 16px 16px;
3918 - flex-grow: 1;
3919 -}
3920 -
3921 -.global-styles-ui-screen-revisions__revisions-list li {
3922 - margin-bottom: 0;
3923 -}
3924 -
3925 -.global-styles-ui-screen-revisions__revision-item {
3926 - position: relative;
3927 - cursor: var(--wpds-cursor-control, pointer);
3881 +.global-styles-ui-screen-revisions {
3928 3882 display: flex;
3929 3883 flex-direction: column;
3884 + flex-grow: 1;
3885 + min-height: 0;
3930 3886 }
3931 3887
3932 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
3933 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3934 - outline: 2px solid transparent;
3888 +.global-styles-ui-screen-revisions__actions {
3889 + margin-inline-start: auto;
3935 3890 }
3936 3891
3937 -.global-styles-ui-screen-revisions__revision-item:hover {
3938 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3939 -}
3940 -
3941 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
3942 - color: var(--wp-admin-theme-color);
3943 -}
3944 -
3945 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
3946 - position: absolute;
3947 - content: "\a";
3948 - display: block;
3949 -}
3950 -
3951 -.global-styles-ui-screen-revisions__revision-item::before {
3952 - background: #ddd;
3953 - border-radius: 50%;
3954 - height: 8px;
3955 - width: 8px;
3956 - top: 18px;
3957 - left: 17px;
3958 - transform: translate(-50%, -50%);
3959 - z-index: 1;
3960 - border: 4px solid transparent;
3961 -}
3962 -
3963 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
3964 - border-radius: 2px;
3965 - outline: 3px solid transparent;
3966 - outline-offset: -2px;
3967 - color: var(--wp-admin-theme-color);
3968 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3969 -}
3970 -
3971 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
3972 - color: var(--wp-admin-theme-color);
3973 -}
3974 -
3975 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
3976 - background: var(--wp-admin-theme-color);
3977 -}
3978 -
3979 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3980 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
3981 - color: #1e1e1e;
3982 -}
3983 -
3984 -.global-styles-ui-screen-revisions__revision-item::after {
3985 - height: 100%;
3986 - left: 16px;
3987 - top: 0;
3988 - width: 0;
3989 - border: 0.5px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3990 -}
3991 -
3992 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
3993 - top: 18px;
3994 -}
3995 -
3996 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
3997 - height: 18px;
3998 -}
3999 -
4000 -.global-styles-ui-screen-revisions__revision-item-wrapper {
4001 - display: block;
4002 - padding: 12px 12px 4px 40px;
4003 -}
4004 -
4005 -.global-styles-ui-screen-revisions__apply-button.is-primary,
4006 -.global-styles-ui-screen-revisions__active-badge {
4007 - align-self: flex-start;
4008 - margin: 0 12px 12px 40px;
4009 -}
4010 -
4011 -.global-styles-ui-screen-revisions__changes,
4012 -.global-styles-ui-screen-revisions__meta {
4013 - color: #757575;
3892 +.global-styles-ui-screen-revisions__date {
3893 + text-transform: uppercase;
3894 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4014 3895 font-size: 12px;
4015 3896 }
4016 3897
4017 3898 .global-styles-ui-screen-revisions__description {
@@ -4020,11 +3901,11 @@
4020 3901 align-items: flex-start;
4021 3902 gap: 8px;
4022 3903 }
4023 3904
4024 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
4025 - text-transform: uppercase;
4026 - 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;
4027 3908 font-size: 12px;
4028 3909 }
4029 3910
4030 3911 .global-styles-ui-screen-revisions__meta {
@@ -4030,11 +3911,10 @@
4030 3911 .global-styles-ui-screen-revisions__meta {
4031 3912 display: flex;
4032 3913 justify-content: start;
4033 3914 width: 100%;
4034 - align-items: flex-start;
3915 + align-items: center;
4035 3916 text-align: left;
4036 - margin-bottom: 4px;
4037 3917 }
4038 3918
4039 3919 .global-styles-ui-screen-revisions__meta img {
4040 3920 width: 16px;
@@ -4042,16 +3922,12 @@
4042 3922 border-radius: 100%;
4043 3923 margin-right: 8px;
4044 3924 }
4045 3925
4046 -.global-styles-ui-screen-revisions__loading {
4047 - margin: 24px auto !important;
4048 -}
4049 -
4050 3926 .global-styles-ui-screen-revisions__changes {
4051 3927 text-align: left;
4052 3928 line-height: 1.4;
4053 - margin-left: 12px;
3929 + margin: 0 0 0 12px;
4054 3930 list-style: disc;
4055 3931 }
4056 3932
4057 3933 .global-styles-ui-screen-revisions__changes li {
@@ -4057,47 +3933,8 @@
4057 3933 .global-styles-ui-screen-revisions__changes li {
4058 3934 margin-bottom: 4px;
4059 3935 }
4060 3936
4061 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
4062 - justify-content: space-between;
4063 - gap: 2px;
4064 -}
4065 -
4066 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
4067 - position: absolute;
4068 - left: -1000px;
4069 - height: 1px;
4070 - margin: -1px;
4071 - overflow: hidden;
4072 -}
4073 -
4074 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
4075 - font-size: 12px;
4076 - will-change: opacity;
4077 -}
4078 -
4079 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
4080 - color: #1e1e1e;
4081 -}
4082 -
4083 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
4084 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
4085 - color: #949494;
4086 -}
4087 -
4088 -.global-styles-ui-screen-revisions__footer {
4089 - height: 56px;
4090 - z-index: 1;
4091 - position: sticky;
4092 - min-width: 100%;
4093 - bottom: 0;
4094 - background: #fff;
4095 - padding: 12px;
4096 - border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
4097 - box-sizing: border-box;
4098 -}
4099 -
4100 3937 .global-styles-ui-variations_item {
4101 3938 box-sizing: border-box;
4102 3939 cursor: var(--wpds-cursor-control, pointer);
4103 3940 }
@@ -4247,10 +4084,20 @@
4247 4084
4248 4085 .global-styles-ui__color-indicator-wrapper {
4249 4086 height: 24px;
4250 4087 flex-shrink: 0;
4088 + display: flex;
4089 + align-items: center;
4251 4090 }
4252 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 +
4253 4100 .global-styles-ui__shadows-panel__options-container,
4254 4101 .global-styles-ui__typography-panel__options-container {
4255 4102 height: 24px;
4256 4103 }
@@ -4262,9 +4109,10 @@
4262 4109 border-radius: 2px;
4263 4110 overflow: hidden;
4264 4111 }
4265 4112
4266 -.global-styles-ui__shadow-preview-panel {
4113 +.global-styles-ui__shadow-preview-panel,
4114 +.global-styles-ui__text-shadow-preview-panel {
4267 4115 height: 144px;
4268 4116 border: #ddd 1px solid;
4269 4117 border-radius: 2px;
4270 4118 overflow: auto;
@@ -4274,9 +4122,9 @@
4274 4122 /*rtl:end:ignore*/
4275 4123 background-size: 16px 16px;
4276 4124 }
4277 4125
4278 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4126 +.global-styles-ui__shadow-preview-block {
4279 4127 border: #ddd 1px solid;
4280 4128 border-radius: 2px;
4281 4129 background-color: #fff;
4282 4130 width: 60%;
@@ -4282,22 +4130,44 @@
4282 4130 width: 60%;
4283 4131 height: 60px;
4284 4132 }
4285 4133
4286 -.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 {
4287 4154 width: 280px;
4288 4155 }
4289 4156
4290 -.global-styles-ui__shadow-editor-panel {
4157 +.global-styles-ui__shadow-editor-panel,
4158 +.global-styles-ui__text-shadow-editor-panel {
4291 4159 margin-bottom: 4px;
4292 4160 }
4293 4161
4294 -.global-styles-ui__shadow-editor__dropdown {
4162 +.global-styles-ui__shadow-editor__dropdown,
4163 +.global-styles-ui__text-shadow-editor__dropdown {
4295 4164 width: 100%;
4296 4165 position: relative;
4297 4166 }
4298 4167
4299 -.global-styles-ui__shadow-editor__dropdown-toggle {
4168 +.global-styles-ui__shadow-editor__dropdown-toggle,
4169 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
4300 4170 width: 100%;
4301 4171 height: auto;
4302 4172 padding-top: 8px;
4303 4173 padding-bottom: 8px;
@@ -4304,14 +4174,16 @@
4304 4174 text-align: left;
4305 4175 border-radius: inherit;
4306 4176 }
4307 4177
4308 -.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 {
4309 4180 background: #f0f0f0;
4310 4181 color: var(--wp-admin-theme-color);
4311 4182 }
4312 4183
4313 -.global-styles-ui__shadow-editor__remove-button {
4184 +.global-styles-ui__shadow-editor__remove-button,
4185 +.global-styles-ui__text-shadow-editor__remove-button {
4314 4186 position: absolute;
4315 4187 right: 8px;
4316 4188 top: 8px;
4317 4189 opacity: 0;
@@ -4316,14 +4188,19 @@
4316 4188 top: 8px;
4317 4189 opacity: 0;
4318 4190 }
4319 4191
4320 -.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 {
4321 4197 opacity: 1;
4322 4198 }
4323 4199
4324 4200 @media (hover: none) {
4325 - .global-styles-ui__shadow-editor__remove-button {
4201 + .global-styles-ui__shadow-editor__remove-button,
4202 + .global-styles-ui__text-shadow-editor__remove-button {
4326 4203 opacity: 1;
4327 4204 }
4328 4205 }
4329 4206 .global-styles-ui-screen-css {
@@ -4419,13 +4296,8 @@
4419 4296 }
4420 4297 .edit-site-custom-template-modal__contents-wrapper > * {
4421 4298 width: 100%;
4422 4299 }
4423 -.edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4424 - margin-left: -12px;
4425 - margin-right: -12px;
4426 - width: calc(100% + 24px);
4427 -}
4428 4300 .edit-site-custom-template-modal__contents > .components-button {
4429 4301 height: auto;
4430 4302 justify-content: center;
4431 4303 }
@@ -4435,10 +4307,14 @@
4435 4307 }
4436 4308 }
4437 4309 @media (min-width: 600px) {
4438 4310 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4439 - max-height: 224px;
4440 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)));
4441 4317 }
4442 4318 }
4443 4319 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4444 4320 display: block;
@@ -4464,11 +4340,8 @@
4464 4340 }
4465 4341 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4466 4342 background-color: #f0f0f0;
4467 4343 }
4468 -.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4469 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4470 -}
4471 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 {
4472 4345 overflow: hidden;
4473 4346 text-overflow: ellipsis;
4474 4347 display: block;
@@ -4500,14 +4373,10 @@
4500 4373 }
4501 4374 }
4502 4375 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4503 4376 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4504 - fill: var(--wp-admin-theme-color);
4377 + color: var(--wp-admin-theme-color);
4505 4378 }
4506 -.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4507 - flex-grow: 1;
4508 - align-items: flex-start;
4509 -}
4510 4379 .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4511 4380 padding: 8px;
4512 4381 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4513 4382 border-radius: 100%;
@@ -4521,9 +4390,8 @@
4521 4390 display: flex;
4522 4391 flex-direction: column;
4523 4392 border: 1px solid #ddd;
4524 4393 justify-content: center;
4525 - outline: 1px solid transparent;
4526 4394 }
4527 4395 .edit-site-custom-template-modal__contents > .components-button span:first-child,
4528 4396 .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4529 4397 color: #1e1e1e;
@@ -4541,14 +4409,8 @@
4541 4409 .edit-site-custom-template-modal__contents > .components-button:hover span,
4542 4410 .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4543 4411 color: var(--wp-admin-theme-color);
4544 4412 }
4545 -.edit-site-custom-template-modal__contents > .components-button:focus,
4546 -.edit-site-add-new-template__template-list__contents > .components-button:focus {
4547 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4548 - border-color: transparent;
4549 - outline: 3px solid transparent;
4550 -}
4551 4413 .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4552 4414 .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4553 4415 color: var(--wp-admin-theme-color);
4554 4416 }
@@ -4560,10 +4422,12 @@
4560 4422 }
4561 4423
4562 4424 .edit-site-add-new-template__template-list__contents > .components-button {
4563 4425 height: 100%;
4426 + padding: 16px;
4564 4427 text-align: start;
4565 4428 align-items: flex-start;
4429 + justify-content: flex-start;
4566 4430 }
4567 4431
4568 4432 .edit-site-visual-editor__editor-canvas.is-focused {
4569 4433 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
@@ -4772,10 +4636,9 @@
4772 4636 }
4773 4637 .edit-site-welcome-guide__image > img {
4774 4638 display: block;
4775 4639 max-width: 100%;
4776 - -o-object-fit: cover;
4777 - object-fit: cover;
4640 + object-fit: cover;
4778 4641 }
4779 4642 .edit-site-welcome-guide__heading {
4780 4643 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4781 4644 font-size: 24px;
@@ -4796,9 +4659,9 @@
4796 4659 margin: 0 4px;
4797 4660 vertical-align: text-top;
4798 4661 }
4799 4662 .edit-site-welcome-guide .components-button:hover svg {
4800 - fill: #fff;
4663 + color: #fff;
4801 4664 }
4802 4665
4803 4666 .edit-site-layout {
4804 4667 height: 100%;
@@ -5365,13 +5228,8 @@
5365 5228 margin-left: -16px;
5366 5229 margin-right: -16px;
5367 5230 }
5368 5231
5369 -.edit-site-sidebar-navigation-screen-templates-browse {
5370 - margin-left: -16px;
5371 - margin-right: -16px;
5372 -}
5373 -
5374 5232 .edit-site-sidebar-dataviews {
5375 5233 margin-left: -16px;
5376 5234 margin-right: -16px;
5377 5235 }
@@ -5479,9 +5337,8 @@
5479 5337 }
5480 5338 body:has(.edit-site-resizable-frame__inner.is-resizing) {
5481 5339 cursor: col-resize;
5482 5340 -webkit-user-select: none;
5483 - -moz-user-select: none;
5484 5341 user-select: none;
5485 5342 }
5486 5343
5487 5344 .edit-site-resizable-frame__inner.is-resizing::before {
@@ -5565,8 +5422,14 @@
5565 5422 .edit-site-styles .edit-site-sidebar-button {
5566 5423 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5567 5424 }
5568 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 +
5569 5432 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5570 5433 width: auto;
5571 5434 padding: 0 var(--wpds-dimension-padding-xs, 4px);
5572 5435 }
@@ -5575,8 +5438,16 @@
5575 5438 }
5576 5439 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon::after {
5577 5440 content: attr(aria-label);
5578 5441 font-size: var(--wpds-typography-font-size-sm, 12px);
5442 +}
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);
5579 5450 }
5580 5451
5581 5452 ::view-transition-image-pair(root) {
5582 5453 isolation: auto;