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/editor/style.css +607 -529 23.7.0 → 24.1.0 View file →
@@ -222,8 +222,9 @@
222 222 background: #fff;
223 223 color: #1e1e1e;
224 224 height: 100%;
225 225 overflow: auto;
226 + width: 100vw;
226 227 }
227 228
228 229 @media (min-width: 782px) {
229 230 .interface-complementary-area {
@@ -384,9 +385,9 @@
384 385 }
385 386
386 387 @media (min-width: 782px) {
387 388 .has-footer .interface-interface-skeleton__body {
388 - padding-bottom: 25px;
389 + padding-bottom: calc(var(--wpds-dimension-size-md, 32px) + 1px);
389 390 }
390 391 }
391 392 .interface-interface-skeleton__content {
392 393 flex-grow: 1;
@@ -473,9 +474,9 @@
473 474 .interface-interface-skeleton__footer .block-editor-block-breadcrumb {
474 475 z-index: 30;
475 476 display: flex;
476 477 background: #fff;
477 - height: 24px;
478 + height: var(--wpds-dimension-size-md, 32px);
478 479 align-items: center;
479 480 font-size: 13px;
480 481 padding: 0 18px;
481 482 }
@@ -692,9 +693,9 @@
692 693 .font-library__footer {
693 694 position: absolute;
694 695 width: 100%;
695 696 bottom: 0;
696 - border-top: 1px solid #ddd;
697 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
697 698 padding: 24px;
698 699 background-color: #fff;
699 700 box-sizing: border-box;
700 701 flex-grow: 0 !important;
@@ -736,11 +737,15 @@
736 737 .font-library__fonts-list-item {
737 738 margin-bottom: 0;
738 739 }
739 740
741 +.font-library__font-demo {
742 + position: relative;
743 +}
744 +
740 745 .font-library__font-card {
741 746 box-sizing: border-box;
742 - border: 1px solid #ddd;
747 + border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
743 748 width: 100%;
744 749 height: auto !important;
745 750 padding: 16px;
746 751 margin-top: -1px; /* To collapse the margin with the previous element */
@@ -754,13 +759,13 @@
754 759 position: relative;
755 760 }
756 761
757 762 .font-library__font-card .font-library__font-card__name {
758 - font-weight: bold;
763 + font-weight: 700;
759 764 }
760 765
761 766 .font-library__font-card .font-library__font-card__count {
762 - color: #757575;
767 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
763 768 }
764 769
765 770 .font-library__font-card .font-library__font-variant_demo-image {
766 771 display: block;
@@ -767,8 +772,25 @@
767 772 height: 24px;
768 773 width: auto;
769 774 }
770 775
776 +@media not (prefers-reduced-motion) {
777 + .font-library__font-card .font-library__font-variant_demo-image {
778 + transition: opacity var(--wpds-motion-duration-lg, 300ms) var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
779 + }
780 +}
781 +.font-library__font-card .font-library__font-variant_demo-image.is-loading {
782 + position: absolute;
783 + top: 0;
784 + left: 0;
785 + opacity: 0;
786 +}
787 +
788 +.font-library__font-card .font-library__font-variant-demo-skeleton {
789 + height: 24px;
790 + border-radius: var(--wpds-border-radius-sm, 2px);
791 +}
792 +
771 793 .font-library__font-card .font-library__font-variant_demo-text {
772 794 white-space: nowrap;
773 795 flex-shrink: 0;
774 796 }
@@ -780,9 +802,9 @@
780 802 }
781 803 .font-library-modal__tablist-container {
782 804 position: sticky;
783 805 top: 0;
784 - border-bottom: 1px solid #ddd;
806 + border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
785 807 background: #fff;
786 808 z-index: 1;
787 809 }
788 810
@@ -803,9 +825,9 @@
803 825 width: 80%;
804 826 }
805 827
806 828 .font-library__local-fonts .font-library__upload-area__text {
807 - color: #757575;
829 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
808 830 }
809 831
810 832 .font-library__google-fonts-confirm {
811 833 display: flex;
@@ -840,113 +862,22 @@
840 862 .font-library__select-all .components-checkbox-control__label {
841 863 padding-left: 16px;
842 864 }
843 865
844 -.global-styles-ui-pagination .components-button.is-tertiary {
845 - width: 32px;
846 - height: 32px;
847 - justify-content: center;
848 -}
849 -
850 -.global-styles-ui-screen-revisions__revisions-list {
851 - list-style: none;
852 - margin: 0 16px 16px 16px;
853 - flex-grow: 1;
854 -}
855 -
856 -.global-styles-ui-screen-revisions__revisions-list li {
857 - margin-bottom: 0;
858 -}
859 -
860 -.global-styles-ui-screen-revisions__revision-item {
861 - position: relative;
862 - cursor: var(--wpds-cursor-control, pointer);
866 +.global-styles-ui-screen-revisions {
863 867 display: flex;
864 868 flex-direction: column;
869 + flex-grow: 1;
870 + min-height: 0;
865 871 }
866 872
867 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
868 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
869 - outline: 2px solid transparent;
873 +.global-styles-ui-screen-revisions__actions {
874 + margin-inline-start: auto;
870 875 }
871 876
872 -.global-styles-ui-screen-revisions__revision-item:hover {
873 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
874 -}
875 -
876 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
877 - color: var(--wp-admin-theme-color);
878 -}
879 -
880 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
881 - position: absolute;
882 - content: "\a";
883 - display: block;
884 -}
885 -
886 -.global-styles-ui-screen-revisions__revision-item::before {
887 - background: #ddd;
888 - border-radius: 50%;
889 - height: 8px;
890 - width: 8px;
891 - top: 18px;
892 - left: 17px;
893 - transform: translate(-50%, -50%);
894 - z-index: 1;
895 - border: 4px solid transparent;
896 -}
897 -
898 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
899 - border-radius: 2px;
900 - outline: 3px solid transparent;
901 - outline-offset: -2px;
902 - color: var(--wp-admin-theme-color);
903 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
904 -}
905 -
906 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
907 - color: var(--wp-admin-theme-color);
908 -}
909 -
910 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
911 - background: var(--wp-admin-theme-color);
912 -}
913 -
914 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
915 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
916 - color: #1e1e1e;
917 -}
918 -
919 -.global-styles-ui-screen-revisions__revision-item::after {
920 - height: 100%;
921 - left: 16px;
922 - top: 0;
923 - width: 0;
924 - border: 0.5px solid #ddd;
925 -}
926 -
927 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
928 - top: 18px;
929 -}
930 -
931 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
932 - height: 18px;
933 -}
934 -
935 -.global-styles-ui-screen-revisions__revision-item-wrapper {
936 - display: block;
937 - padding: 12px 12px 4px 40px;
938 -}
939 -
940 -.global-styles-ui-screen-revisions__apply-button.is-primary,
941 -.global-styles-ui-screen-revisions__active-badge {
942 - align-self: flex-start;
943 - margin: 0 12px 12px 40px;
944 -}
945 -
946 -.global-styles-ui-screen-revisions__changes,
947 -.global-styles-ui-screen-revisions__meta {
948 - color: #757575;
877 +.global-styles-ui-screen-revisions__date {
878 + text-transform: uppercase;
879 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
949 880 font-size: 12px;
950 881 }
951 882
952 883 .global-styles-ui-screen-revisions__description {
@@ -955,11 +886,11 @@
955 886 align-items: flex-start;
956 887 gap: 8px;
957 888 }
958 889
959 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
960 - text-transform: uppercase;
961 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
890 +.global-styles-ui-screen-revisions__changes,
891 +.global-styles-ui-screen-revisions__meta {
892 + color: #2f2f2f;
962 893 font-size: 12px;
963 894 }
964 895
965 896 .global-styles-ui-screen-revisions__meta {
@@ -965,11 +896,10 @@
965 896 .global-styles-ui-screen-revisions__meta {
966 897 display: flex;
967 898 justify-content: start;
968 899 width: 100%;
969 - align-items: flex-start;
900 + align-items: center;
970 901 text-align: left;
971 - margin-bottom: 4px;
972 902 }
973 903
974 904 .global-styles-ui-screen-revisions__meta img {
975 905 width: 16px;
@@ -977,16 +907,12 @@
977 907 border-radius: 100%;
978 908 margin-right: 8px;
979 909 }
980 910
981 -.global-styles-ui-screen-revisions__loading {
982 - margin: 24px auto !important;
983 -}
984 -
985 911 .global-styles-ui-screen-revisions__changes {
986 912 text-align: left;
987 913 line-height: 1.4;
988 - margin-left: 12px;
914 + margin: 0 0 0 12px;
989 915 list-style: disc;
990 916 }
991 917
992 918 .global-styles-ui-screen-revisions__changes li {
@@ -992,47 +918,8 @@
992 918 .global-styles-ui-screen-revisions__changes li {
993 919 margin-bottom: 4px;
994 920 }
995 921
996 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
997 - justify-content: space-between;
998 - gap: 2px;
999 -}
1000 -
1001 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
1002 - position: absolute;
1003 - left: -1000px;
1004 - height: 1px;
1005 - margin: -1px;
1006 - overflow: hidden;
1007 -}
1008 -
1009 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
1010 - font-size: 12px;
1011 - will-change: opacity;
1012 -}
1013 -
1014 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
1015 - color: #1e1e1e;
1016 -}
1017 -
1018 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
1019 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
1020 - color: #949494;
1021 -}
1022 -
1023 -.global-styles-ui-screen-revisions__footer {
1024 - height: 56px;
1025 - z-index: 1;
1026 - position: sticky;
1027 - min-width: 100%;
1028 - bottom: 0;
1029 - background: #fff;
1030 - padding: 12px;
1031 - border-top: 1px solid #ddd;
1032 - box-sizing: border-box;
1033 -}
1034 -
1035 922 .global-styles-ui-variations_item {
1036 923 box-sizing: border-box;
1037 924 cursor: var(--wpds-cursor-control, pointer);
1038 925 }
@@ -1113,13 +1000,34 @@
1113 1000 justify-content: center;
1114 1001 border-radius: 2px;
1115 1002 }
1116 1003
1004 +.global-styles-ui-block-types-filter {
1005 + margin-bottom: 12px;
1006 + padding: 0 16px;
1007 +}
1008 +
1117 1009 .global-styles-ui-block-types-search {
1118 - margin-bottom: 10px;
1119 - padding: 0 16px;
1010 + flex-grow: 1;
1120 1011 }
1121 1012
1013 +.global-styles-ui-block-types-item-list .global-styles-ui-block-types-item__icon {
1014 + min-width: 24px;
1015 +}
1016 +
1017 +.global-styles-ui-block-types-item-list__no-results {
1018 + padding-top: 16px;
1019 +}
1020 +
1021 +.global-styles-ui-block-types-item__indicator {
1022 + background: var(--wp-admin-theme-color);
1023 + border-radius: 50%;
1024 + flex: none;
1025 + height: 6px;
1026 + margin-left: auto;
1027 + width: 6px;
1028 +}
1029 +
1122 1030 .global-styles-ui-screen-typography__font-variants-count {
1123 1031 color: #757575;
1124 1032 }
1125 1033
@@ -1161,10 +1069,20 @@
1161 1069
1162 1070 .global-styles-ui__color-indicator-wrapper {
1163 1071 height: 24px;
1164 1072 flex-shrink: 0;
1073 + display: flex;
1074 + align-items: center;
1165 1075 }
1166 1076
1077 +.global-styles-ui__palette-preview {
1078 + display: inline-flex;
1079 +}
1080 +
1081 +.global-styles-ui__palette-preview > * + * {
1082 + margin-inline-start: -8px;
1083 +}
1084 +
1167 1085 .global-styles-ui__shadows-panel__options-container,
1168 1086 .global-styles-ui__typography-panel__options-container {
1169 1087 height: 24px;
1170 1088 }
@@ -1176,9 +1094,10 @@
1176 1094 border-radius: 2px;
1177 1095 overflow: hidden;
1178 1096 }
1179 1097
1180 -.global-styles-ui__shadow-preview-panel {
1098 +.global-styles-ui__shadow-preview-panel,
1099 +.global-styles-ui__text-shadow-preview-panel {
1181 1100 height: 144px;
1182 1101 border: #ddd 1px solid;
1183 1102 border-radius: 2px;
1184 1103 overflow: auto;
@@ -1188,9 +1107,9 @@
1188 1107 /*rtl:end:ignore*/
1189 1108 background-size: 16px 16px;
1190 1109 }
1191 1110
1192 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
1111 +.global-styles-ui__shadow-preview-block {
1193 1112 border: #ddd 1px solid;
1194 1113 border-radius: 2px;
1195 1114 background-color: #fff;
1196 1115 width: 60%;
@@ -1196,22 +1115,44 @@
1196 1115 width: 60%;
1197 1116 height: 60px;
1198 1117 }
1199 1118
1200 -.global-styles-ui__shadow-editor__dropdown-content {
1119 +.global-styles-ui__text-shadow-preview-panel {
1120 + margin-block: -8px 16px;
1121 +}
1122 +
1123 +.global-styles-ui__text-shadow-preview-text {
1124 + font-size: 24px;
1125 +}
1126 +
1127 +.global-styles-ui__text-shadow-editor__header {
1128 + margin-block-end: 8px;
1129 +}
1130 +
1131 +.global-styles-ui__text-shadow-editor__inputs {
1132 + display: grid;
1133 + grid-template-columns: repeat(2, 1fr);
1134 + gap: 16px;
1135 +}
1136 +
1137 +.global-styles-ui__shadow-editor__dropdown-content,
1138 +.global-styles-ui__text-shadow-editor__dropdown-content {
1201 1139 width: 280px;
1202 1140 }
1203 1141
1204 -.global-styles-ui__shadow-editor-panel {
1142 +.global-styles-ui__shadow-editor-panel,
1143 +.global-styles-ui__text-shadow-editor-panel {
1205 1144 margin-bottom: 4px;
1206 1145 }
1207 1146
1208 -.global-styles-ui__shadow-editor__dropdown {
1147 +.global-styles-ui__shadow-editor__dropdown,
1148 +.global-styles-ui__text-shadow-editor__dropdown {
1209 1149 width: 100%;
1210 1150 position: relative;
1211 1151 }
1212 1152
1213 -.global-styles-ui__shadow-editor__dropdown-toggle {
1153 +.global-styles-ui__shadow-editor__dropdown-toggle,
1154 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
1214 1155 width: 100%;
1215 1156 height: auto;
1216 1157 padding-top: 8px;
1217 1158 padding-bottom: 8px;
@@ -1218,14 +1159,16 @@
1218 1159 text-align: left;
1219 1160 border-radius: inherit;
1220 1161 }
1221 1162
1222 -.global-styles-ui__shadow-editor__dropdown-toggle.is-open {
1163 +.global-styles-ui__shadow-editor__dropdown-toggle.is-open,
1164 +.global-styles-ui__text-shadow-editor__dropdown-toggle.is-open {
1223 1165 background: #f0f0f0;
1224 1166 color: var(--wp-admin-theme-color);
1225 1167 }
1226 1168
1227 -.global-styles-ui__shadow-editor__remove-button {
1169 +.global-styles-ui__shadow-editor__remove-button,
1170 +.global-styles-ui__text-shadow-editor__remove-button {
1228 1171 position: absolute;
1229 1172 right: 8px;
1230 1173 top: 8px;
1231 1174 opacity: 0;
@@ -1230,18 +1173,19 @@
1230 1173 top: 8px;
1231 1174 opacity: 0;
1232 1175 }
1233 1176
1234 -.global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
1235 - border: none;
1236 -}
1237 -
1238 -.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 {
1177 +.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,
1178 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
1179 +.global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
1180 +.global-styles-ui__text-shadow-editor__remove-button:focus,
1181 +.global-styles-ui__text-shadow-editor__remove-button:hover {
1239 1182 opacity: 1;
1240 1183 }
1241 1184
1242 1185 @media (hover: none) {
1243 - .global-styles-ui__shadow-editor__remove-button {
1186 + .global-styles-ui__shadow-editor__remove-button,
1187 + .global-styles-ui__text-shadow-editor__remove-button {
1244 1188 opacity: 1;
1245 1189 }
1246 1190 }
1247 1191 .global-styles-ui-screen-css {
@@ -1325,9 +1269,10 @@
1325 1269 clip-path: border-box;
1326 1270 }
1327 1271
1328 1272 .global-styles-ui-color-palette-panel,
1329 -.global-styles-ui-gradient-palette-panel {
1273 +.global-styles-ui-gradient-palette-panel,
1274 +.global-styles-ui-duotone-palette-panel {
1330 1275 padding: 16px;
1331 1276 }
1332 1277
1333 1278 /**
@@ -1459,8 +1404,12 @@
1459 1404 .dataviews__search {
1460 1405 flex-grow: 1;
1461 1406 }
1462 1407
1408 +.dataviews__search .dataviews-search {
1409 + flex-basis: 210px;
1410 +}
1411 +
1463 1412 .dataviews-no-results,
1464 1413 .dataviews-loading {
1465 1414 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1466 1415 flex-grow: 1;
@@ -1655,10 +1604,10 @@
1655 1604 }
1656 1605
1657 1606 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
1658 1607 width: 100%;
1608 + min-width: 0;
1659 1609 white-space: nowrap;
1660 - overflow: hidden;
1661 1610 }
1662 1611
1663 1612 .dataviews-filters__summary-chip-container {
1664 1613 position: relative;
@@ -1730,9 +1679,9 @@
1730 1679 cursor: var(--wpds-cursor-control, pointer);
1731 1680 }
1732 1681
1733 1682 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
1734 - fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1683 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1735 1684 }
1736 1685
1737 1686 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
1738 1687 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
@@ -1738,13 +1687,13 @@
1738 1687 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1739 1688 }
1740 1689
1741 1690 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
1742 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1691 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1743 1692 }
1744 1693
1745 1694 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
1746 - fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1695 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1747 1696 }
1748 1697
1749 1698 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
1750 1699 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
@@ -1806,10 +1755,11 @@
1806 1755 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1807 1756 }
1808 1757
1809 1758 .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 {
1759 + /* 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. */
1760 + background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
1810 1761 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1811 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
1812 1762 }
1813 1763
1814 1764 .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 {
1815 1765 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
@@ -1923,9 +1873,9 @@
1923 1873 }
1924 1874 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1925 1875 --checkbox-size: 24px;
1926 1876 flex-shrink: 0;
1927 - border: 1px solid #1e1e1e;
1877 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1928 1878 margin-right: 12px;
1929 1879 transition: none;
1930 1880 border-radius: 2px;
1931 1881 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1933,18 +1883,12 @@
1933 1883 /* Fonts smaller than 16px causes mobile safari to zoom. */
1934 1884 font-size: 16px;
1935 1885 /* Override core line-height. To be reviewed. */
1936 1886 line-height: normal;
1937 - box-shadow: 0 0 0 transparent;
1938 - border-radius: 2px;
1939 - border: 1px solid #949494;
1887 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1888 + border-radius: var(--wpds-border-radius-sm, 2px);
1940 1889 }
1941 1890
1942 -@media not (prefers-reduced-motion) {
1943 - .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1944 - transition: box-shadow 0.1s linear;
1945 - }
1946 -}
1947 1891 @media (min-width: 600px) {
1948 1892 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1949 1893 font-size: 13px;
1950 1894 /* Override core line-height. To be reviewed. */
@@ -1950,20 +1894,25 @@
1950 1894 /* Override core line-height. To be reviewed. */
1951 1895 line-height: normal;
1952 1896 }
1953 1897 }
1898 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
1899 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1900 +}
1901 +
1954 1902 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
1955 - border-color: var(--wp-admin-theme-color);
1956 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
1957 - outline: 2px solid transparent;
1903 + 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)));
1904 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1905 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1906 + box-shadow: none;
1958 1907 }
1959 1908
1960 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
1909 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
1961 1910 color: rgba(30, 30, 30, 0.62);
1962 1911 }
1963 1912
1964 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
1965 - color: rgba(30, 30, 30, 0.62);
1913 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
1914 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
1966 1915 }
1967 1916
1968 1917 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
1969 1918 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
@@ -1996,9 +1945,9 @@
1996 1945 display: inline-block;
1997 1946 vertical-align: middle;
1998 1947 width: 16px;
1999 1948 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
2000 - font: normal 30px/1 dashicons;
1949 + font: 400 30px/1 dashicons;
2001 1950 speak: none;
2002 1951 -webkit-font-smoothing: antialiased;
2003 1952 -moz-osx-font-smoothing: grayscale;
2004 1953 }
@@ -2009,17 +1958,23 @@
2009 1958 font-size: 21px;
2010 1959 }
2011 1960 }
2012 1961 .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 {
2013 - background: #f0f0f0;
2014 - border-color: #ddd;
1962 + background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
1963 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
1964 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
2015 1965 cursor: default;
2016 1966 opacity: 1;
2017 1967 }
2018 1968
1969 +.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 {
1970 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
1971 +}
1972 +
2019 1973 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2020 1974 position: relative;
2021 - background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
1975 + /* 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. */
1976 + background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
2022 1977 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2023 1978 margin: 0;
2024 1979 padding: 0;
2025 1980 width: var(--checkbox-size);
@@ -2042,9 +1997,9 @@
2042 1997 }
2043 1998
2044 1999 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2045 2000 --checkmark-size: var(--checkbox-size);
2046 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2001 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2047 2002 position: absolute;
2048 2003 left: 50%;
2049 2004 top: 50%;
2050 2005 transform: translate(-50%, -50%);
@@ -2068,18 +2023,12 @@
2068 2023 /* Fonts smaller than 16px causes mobile safari to zoom. */
2069 2024 font-size: 16px;
2070 2025 /* Override core line-height. To be reviewed. */
2071 2026 line-height: normal;
2072 - box-shadow: 0 0 0 transparent;
2073 - border-radius: 2px;
2074 - border: 1px solid #949494;
2027 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2028 + border-radius: var(--wpds-border-radius-sm, 2px);
2075 2029 }
2076 2030
2077 -@media not (prefers-reduced-motion) {
2078 - .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2079 - transition: box-shadow 0.1s linear;
2080 - }
2081 -}
2082 2031 @media (min-width: 600px) {
2083 2032 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2084 2033 font-size: 13px;
2085 2034 /* Override core line-height. To be reviewed. */
@@ -2085,16 +2034,17 @@
2085 2034 /* Override core line-height. To be reviewed. */
2086 2035 line-height: normal;
2087 2036 }
2088 2037 }
2089 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2090 - border-color: var(--wp-admin-theme-color);
2091 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2092 - outline: 2px solid transparent;
2038 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true]) {
2039 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
2093 2040 }
2094 2041
2095 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2096 - color: rgba(30, 30, 30, 0.62);
2042 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2043 + 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)));
2044 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2045 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2046 + box-shadow: none;
2097 2047 }
2098 2048
2099 2049 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2100 2050 color: rgba(30, 30, 30, 0.62);
@@ -2117,15 +2067,10 @@
2117 2067 }
2118 2068 }
2119 2069 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2120 2070 background: var(--wpds-color-background-surface-neutral-strong, #fff);
2121 - 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));
2122 2071 }
2123 2072
2124 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2125 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2126 -}
2127 -
2128 2073 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2129 2074 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2130 2075 }
2131 2076
@@ -2170,12 +2115,8 @@
2170 2115 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2171 2116 box-sizing: border-box;
2172 2117 }
2173 2118
2174 -.dataviews-search {
2175 - flex-basis: 210px;
2176 -}
2177 -
2178 2119 .dataviews-filters__user-input-widget {
2179 2120 padding: var(--wpds-dimension-padding-lg, 16px);
2180 2121 }
2181 2122
@@ -2452,9 +2393,8 @@
2452 2393 }
2453 2394
2454 2395 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
2455 2396 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
2456 - width: -moz-fit-content;
2457 2397 width: fit-content;
2458 2398 }
2459 2399
2460 2400 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
@@ -2474,9 +2414,9 @@
2474 2414
2475 2415 .dataviews-view-grid .dataviews-view-grid__media,
2476 2416 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
2477 2417 width: 100%;
2478 - aspect-ratio: 1/1;
2418 + aspect-ratio: var(--wp-dataviews-media-aspect-ratio, 1/1);
2479 2419 background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2480 2420 border-radius: var(--wpds-border-radius-md, 4px);
2481 2421 overflow: hidden;
2482 2422 position: relative;
@@ -2488,9 +2428,8 @@
2488 2428 }
2489 2429
2490 2430 .dataviews-view-grid .dataviews-view-grid__media img,
2491 2431 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
2492 - -o-object-fit: cover;
2493 2432 object-fit: cover;
2494 2433 width: 100%;
2495 2434 height: 100%;
2496 2435 }
@@ -2517,8 +2456,18 @@
2517 2456 box-shadow: none;
2518 2457 background: var(--wpds-color-background-surface-neutral, #fcfcfc);
2519 2458 }
2520 2459
2460 +.dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media,
2461 +.dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media {
2462 + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2463 +}
2464 +
2465 +.dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
2466 +.dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
2467 + object-fit: contain;
2468 +}
2469 +
2521 2470 .dataviews-view-grid .dataviews-view-grid__fields,
2522 2471 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
2523 2472 position: relative;
2524 2473 font-size: 12px;
@@ -2679,9 +2628,8 @@
2679 2628
2680 2629 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
2681 2630 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
2682 2631 display: flex;
2683 - width: -moz-max-content;
2684 2632 width: max-content;
2685 2633 flex: 0 0 auto;
2686 2634 gap: var(--wpds-dimension-gap-xs, 4px);
2687 2635 white-space: nowrap;
@@ -2734,10 +2682,9 @@
2734 2682 .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,
2735 2683 .dataviews-view-list div[role=article]:not(.is-selected):hover,
2736 2684 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
2737 2685 .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
2738 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2739 - background-color: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
2686 + background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
2740 2687 }
2741 2688
2742 2689 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
2743 2690 .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,
@@ -2748,9 +2695,9 @@
2748 2695 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
2749 2696 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
2750 2697 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
2751 2698 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
2752 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2699 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2753 2700 }
2754 2701
2755 2702 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
2756 2703 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
@@ -2756,9 +2703,9 @@
2756 2703 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
2757 2704 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
2758 2705 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
2759 2706 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2760 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2707 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2761 2708 }
2762 2709
2763 2710 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2764 2711 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
@@ -2767,9 +2714,9 @@
2767 2714 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2768 2715 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
2769 2716 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
2770 2717 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
2771 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2718 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2772 2719 }
2773 2720
2774 2721 .dataviews-view-list .dataviews-view-list__item {
2775 2722 position: absolute;
@@ -2775,10 +2722,8 @@
2775 2722 position: absolute;
2776 2723 z-index: 1;
2777 2724 inset: 0;
2778 2725 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
2779 - -webkit-appearance: none;
2780 - -moz-appearance: none;
2781 2726 appearance: none;
2782 2727 border: none;
2783 2728 background: none;
2784 2729 padding: 0;
@@ -2821,9 +2766,8 @@
2821 2766
2822 2767 .dataviews-view-list .dataviews-view-list__media-wrapper img {
2823 2768 width: 100%;
2824 2769 height: 100%;
2825 - -o-object-fit: cover;
2826 2770 object-fit: cover;
2827 2771 }
2828 2772
2829 2773 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -2843,9 +2787,9 @@
2843 2787 min-width: 0;
2844 2788 }
2845 2789
2846 2790 .dataviews-view-list .dataviews-view-list__field {
2847 - color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
2791 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2848 2792 }
2849 2793
2850 2794 .dataviews-view-list .dataviews-view-list__fields {
2851 2795 display: flex;
@@ -2962,9 +2906,9 @@
2962 2906
2963 2907 .dataviews-view-table th {
2964 2908 text-align: left;
2965 2909 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2966 - font-weight: normal;
2910 + font-weight: 400;
2967 2911 font-size: var(--wpds-typography-font-size-md, 13px);
2968 2912 }
2969 2913
2970 2914 .dataviews-view-table td,
@@ -2992,9 +2936,9 @@
2992 2936 top: 0;
2993 2937 bottom: 0;
2994 2938 left: 0;
2995 2939 width: 1px;
2996 - background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2940 + background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
2997 2941 }
2998 2942
2999 2943 .dataviews-view-table td.dataviews-view-table__checkbox-column,
3000 2944 .dataviews-view-table th.dataviews-view-table__checkbox-column {
@@ -3206,9 +3150,8 @@
3206 3150
3207 3151 .dataviews-column-primary__media img {
3208 3152 width: var(--wpds-dimension-size-md, 32px);
3209 3153 height: var(--wpds-dimension-size-md, 32px);
3210 - -o-object-fit: cover;
3211 3154 object-fit: cover;
3212 3155 }
3213 3156
3214 3157 .dataviews-column-primary__media::after {
@@ -3221,8 +3164,19 @@
3221 3164 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
3222 3165 border-radius: var(--wpds-border-radius-md, 4px);
3223 3166 }
3224 3167
3168 +.dataviews-view-table.has-media-aspect-ratio .dataviews-column-primary__media {
3169 + height: var(--wpds-dimension-size-md, 32px);
3170 + aspect-ratio: var(--wp-dataviews-media-aspect-ratio, 1/1);
3171 + min-width: 0;
3172 +}
3173 +
3174 +.dataviews-view-table.has-media-aspect-ratio .dataviews-column-primary__media img {
3175 + width: 100%;
3176 + height: 100%;
3177 +}
3178 +
3225 3179 .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
3226 3180 .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
3227 3181 min-width: 15ch;
3228 3182 max-width: 80ch;
@@ -3276,9 +3230,8 @@
3276 3230 text-align: start;
3277 3231 }
3278 3232
3279 3233 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
3280 - width: -moz-fit-content;
3281 3234 width: fit-content;
3282 3235 }
3283 3236
3284 3237 .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 {
@@ -3314,13 +3267,13 @@
3314 3267 aspect-ratio: 1/1;
3315 3268 min-height: 0;
3316 3269 background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
3317 3270 border-radius: var(--wpds-border-radius-md, 4px);
3271 + overflow: hidden;
3318 3272 position: relative;
3319 3273 }
3320 3274
3321 3275 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
3322 - -o-object-fit: cover;
3323 3276 object-fit: cover;
3324 3277 width: 100%;
3325 3278 height: 100%;
3326 3279 }
@@ -3336,8 +3289,16 @@
3336 3289 border-radius: var(--wpds-border-radius-md, 4px);
3337 3290 pointer-events: none;
3338 3291 }
3339 3292
3293 +.dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media {
3294 + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
3295 +}
3296 +
3297 +.dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
3298 + object-fit: contain;
3299 +}
3300 +
3340 3301 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
3341 3302 position: relative;
3342 3303 font-size: 12px;
3343 3304 line-height: 16px;
@@ -3499,9 +3460,8 @@
3499 3460 }
3500 3461
3501 3462 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
3502 3463 display: flex;
3503 - width: -moz-max-content;
3504 3464 width: max-content;
3505 3465 flex: 0 0 auto;
3506 3466 }
3507 3467
@@ -3633,9 +3593,8 @@
3633 3593 display: block;
3634 3594 width: 100%;
3635 3595 height: 100%;
3636 3596 margin: 0 auto;
3637 - -o-object-fit: cover;
3638 3597 object-fit: cover;
3639 3598 border-radius: 50%;
3640 3599 box-sizing: border-box;
3641 3600 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -3850,9 +3809,8 @@
3850 3809 display: block;
3851 3810 width: 100%;
3852 3811 height: 100%;
3853 3812 margin: 0 auto;
3854 - -o-object-fit: cover;
3855 3813 object-fit: cover;
3856 3814 border-radius: 50%;
3857 3815 box-sizing: border-box;
3858 3816 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -3874,13 +3832,8 @@
3874 3832 .dataviews-picker-footer__actions {
3875 3833 align-self: flex-end;
3876 3834 }
3877 3835
3878 -.dataviews-controls__richtext [data-rich-text-placeholder]::after {
3879 - content: attr(data-rich-text-placeholder);
3880 - color: color-mix(in srgb, currentColor, transparent 38%);
3881 -}
3882 -
3883 3836 .dataviews-controls__datetime {
3884 3837 border: none;
3885 3838 padding: 0;
3886 3839 }
@@ -3911,8 +3864,29 @@
3911 3864 .dataviews-controls__date-preset:active {
3912 3865 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
3913 3866 }
3914 3867
3868 +.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 {
3869 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3870 +}
3871 +
3872 +.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 {
3873 + border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3874 +}
3875 +
3876 +.dataviews-validated-control__wrapper-with-error-delegate {
3877 + position: relative;
3878 +}
3879 +
3880 +.dataviews-validated-control__error-delegate {
3881 + position: absolute;
3882 + top: 0;
3883 + height: 100%;
3884 + width: 100%;
3885 + opacity: 0;
3886 + pointer-events: none;
3887 +}
3888 +
3915 3889 .dataforms-layouts-panel__field-trigger {
3916 3890 position: relative;
3917 3891 color: inherit;
3918 3892 display: flex;
@@ -3975,8 +3949,14 @@
3975 3949 opacity: 0;
3976 3950 border-radius: var(--wpds-border-radius-xs, 1px);
3977 3951 }
3978 3952
3953 +.dataforms-layouts-panel__field-trigger-icon::after {
3954 + content: "";
3955 + position: absolute;
3956 + inset: 0;
3957 +}
3958 +
3979 3959 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
3980 3960 opacity: 1;
3981 3961 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));
3982 3962 }
@@ -4010,11 +3990,9 @@
4010 3990 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
4011 3991 }
4012 3992
4013 3993 .dataforms-layouts-panel__field-label-error-content {
4014 - position: relative;
4015 - z-index: 1;
4016 - cursor: help;
3994 + pointer-events: none;
4017 3995 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
4018 3996 display: inline-flex;
4019 3997 flex-direction: row;
4020 3998 align-items: center;
@@ -4030,12 +4008,17 @@
4030 4008 align-items: center;
4031 4009 overflow: clip;
4032 4010 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
4033 4011 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4034 - word-break: break-word;
4012 + word-break: normal;
4013 + overflow-wrap: anywhere;
4035 4014 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4036 4015 }
4037 4016
4017 +.dataforms-layouts-panel__field-control:has(a, button) {
4018 + z-index: 1;
4019 +}
4020 +
4038 4021 .dataforms-layouts-panel__field-control > * {
4039 4022 min-width: 0;
4040 4023 }
4041 4024
@@ -4068,12 +4051,8 @@
4068 4051 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
4069 4052 z-index: 159990;
4070 4053 }
4071 4054
4072 -.dataforms-layouts-panel__summary-button:empty {
4073 - min-width: 160px;
4074 -}
4075 -
4076 4055 .dataforms-layouts-regular__field {
4077 4056 width: 100%;
4078 4057 min-height: var(--wpds-dimension-size-md, 32px);
4079 4058 justify-content: flex-start !important;
@@ -4291,9 +4270,9 @@
4291 4270 padding: 12px;
4292 4271 display: grid;
4293 4272 align-items: center;
4294 4273 grid-template-columns: min-content 1fr min-content;
4295 - grid-gap: 4px 8px;
4274 + gap: 4px 8px;
4296 4275 color: #1e1e1e;
4297 4276 }
4298 4277
4299 4278 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -4576,11 +4555,9 @@
4576 4555
4577 4556 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
4578 4557 width: 100%;
4579 4558 height: 100%;
4580 - -o-object-fit: cover;
4581 4559 object-fit: cover;
4582 - -o-object-position: 50% 50%;
4583 4560 object-position: 50% 50%;
4584 4561 }
4585 4562
4586 4563 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
@@ -4640,9 +4617,8 @@
4640 4617
4641 4618 .fields-controls__author-avatar img {
4642 4619 width: 16px;
4643 4620 height: 16px;
4644 - -o-object-fit: cover;
4645 4621 object-fit: cover;
4646 4622 opacity: 0;
4647 4623 border-radius: 100%;
4648 4624 }
@@ -4678,18 +4654,15 @@
4678 4654 padding: 0;
4679 4655 margin: 0;
4680 4656 }
4681 4657
4682 -.fields-controls__slug .fields-controls__slug-external-icon {
4683 - margin-left: 5ch;
4684 -}
4685 -
4686 4658 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
4687 4659 padding-inline-start: 0 !important;
4688 4660 }
4689 4661
4690 4662 .fields-controls__slug .fields-controls__slug-help-link {
4691 - word-break: break-word;
4663 + word-break: normal;
4664 + overflow-wrap: anywhere;
4692 4665 }
4693 4666
4694 4667 .fields-controls__slug .fields-controls__slug-help {
4695 4668 display: flex;
@@ -4817,9 +4790,8 @@
4817 4790
4818 4791 .media-editor-preview--image img {
4819 4792 max-width: 100%;
4820 4793 max-height: 100%;
4821 - -o-object-fit: contain;
4822 4794 object-fit: contain;
4823 4795 width: auto;
4824 4796 height: auto;
4825 4797 opacity: 0;
@@ -4841,9 +4813,8 @@
4841 4813 }
4842 4814 .media-editor-preview--video video {
4843 4815 max-width: 100%;
4844 4816 max-height: 100%;
4845 - -o-object-fit: contain;
4846 4817 object-fit: contain;
4847 4818 width: auto;
4848 4819 height: auto;
4849 4820 }
@@ -4889,8 +4860,9 @@
4889 4860 word-break: break-all;
4890 4861 margin-top: 8px;
4891 4862 }
4892 4863
4864 +/*!rtl:begin:ignore*/
4893 4865 .wp-media-editor-image-editor {
4894 4866 position: relative;
4895 4867 overflow: hidden;
4896 4868 width: 100%;
@@ -4896,9 +4868,8 @@
4896 4868 width: 100%;
4897 4869 height: 100%;
4898 4870 touch-action: none;
4899 4871 -webkit-user-select: none;
4900 - -moz-user-select: none;
4901 4872 user-select: none;
4902 4873 cursor: grab;
4903 4874 }
4904 4875
@@ -5016,10 +4987,8 @@
5016 4987 box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5017 4988 }
5018 4989
5019 4990 .wp-media-editor-image-editor__handle {
5020 - -webkit-appearance: none;
5021 - -moz-appearance: none;
5022 4991 appearance: none;
5023 4992 margin: 0;
5024 4993 padding: 0;
5025 4994 font: inherit;
@@ -5110,8 +5079,9 @@
5110 5079 right: -6px;
5111 5080 cursor: nwse-resize;
5112 5081 }
5113 5082
5083 +/*!rtl:end:ignore*/
5114 5084 /**
5115 5085 * Breakpoints & Media Queries
5116 5086 */
5117 5087 /**
@@ -5175,48 +5145,53 @@
5175 5145 align-items: center;
5176 5146 justify-content: center;
5177 5147 }
5178 5148
5179 -.media-editor .interface-interface-skeleton {
5180 - position: relative;
5181 - top: auto;
5182 - right: auto;
5183 - bottom: auto;
5184 - left: auto;
5185 - height: 100%;
5186 - max-height: none;
5149 +.media-editor .media-editor__body {
5150 + container-type: inline-size;
5151 + container-name: media-editor-body;
5152 + display: flex;
5187 5153 flex: 1;
5188 - flex-direction: column;
5154 + min-height: 0;
5189 5155 }
5190 5156
5191 -.media-editor-modal .media-editor .interface-interface-skeleton.interface-interface-skeleton {
5192 - top: auto;
5193 -}
5194 -
5195 -.media-editor .interface-interface-skeleton__editor {
5196 - min-width: 0;
5197 - flex: 1;
5198 -}
5199 -
5200 5157 .media-editor .media-editor__content {
5201 5158 display: flex;
5202 5159 flex: 1;
5203 5160 flex-direction: column;
5161 + min-width: 0;
5204 5162 min-height: 0;
5205 - margin: 0 24px;
5206 - border-radius: 8px;
5207 - overflow: hidden;
5163 + margin: 24px 24px 8px 24px;
5208 5164 }
5209 5165
5166 +@media (min-width: 600px) {
5167 + .media-editor .media-editor__content {
5168 + margin: 0 24px;
5169 + }
5170 +}
5171 +@container media-editor-body (min-width: 864px) {
5172 + .media-editor .media-editor__content {
5173 + min-width: 520px;
5174 + }
5175 +}
5210 5176 .media-editor .media-editor__canvas-toolbar {
5211 5177 display: flex;
5212 - flex-shrink: 0;
5178 + flex: 0 0 auto;
5179 + flex-direction: column;
5180 + align-items: center;
5181 + gap: 12px;
5182 +}
5183 +
5184 +.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation {
5185 + display: flex;
5213 5186 justify-content: center;
5187 + align-self: stretch;
5214 5188 background: #e0e0e0;
5189 + border-radius: 0 0 8px 8px;
5215 5190 padding: 8px 16px;
5216 5191 }
5217 5192
5218 -.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation {
5193 +.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation .rotation-ruler {
5219 5194 flex: 0 1 360px;
5220 5195 min-width: 0;
5221 5196 }
5222 5197
@@ -5224,8 +5199,9 @@
5224 5199 display: flex;
5225 5200 align-items: center;
5226 5201 justify-content: center;
5227 5202 background: #e0e0e0;
5203 + border-radius: 8px;
5228 5204 overflow: auto;
5229 5205 flex: 1;
5230 5206 min-height: 0;
5231 5207 }
@@ -5237,88 +5213,66 @@
5237 5213 .media-editor .media-editor__canvas-area img,
5238 5214 .media-editor .media-editor__canvas-area video {
5239 5215 max-width: 100%;
5240 5216 max-height: 100%;
5241 - -o-object-fit: contain;
5242 5217 object-fit: contain;
5243 5218 }
5244 5219
5245 5220 .media-editor .media-editor__sidebar {
5246 - box-sizing: border-box;
5221 + display: flex;
5222 + flex: 1;
5223 + flex-direction: column;
5224 + min-width: 0;
5225 + min-height: 0;
5226 + overflow: hidden;
5247 5227 }
5248 5228
5249 -.media-editor .media-editor__sidebar *,
5250 -.media-editor .media-editor__sidebar *::before,
5251 -.media-editor .media-editor__sidebar *::after {
5252 - box-sizing: inherit;
5253 -}
5254 -
5255 5229 @media (min-width: 600px) {
5256 5230 .media-editor .media-editor__sidebar {
5257 - padding-left: 1px;
5231 + flex: none;
5232 + width: var(--wpds-dimension-surface-width-sm, 320px);
5258 5233 }
5259 5234 }
5260 -.media-editor .media-editor__sidebar-panel {
5261 - padding-bottom: 24px;
5235 +.media-editor .media-editor__tabs {
5236 + display: flex;
5237 + flex: 1;
5238 + flex-direction: column;
5239 + min-height: 0;
5262 5240 }
5263 5241
5264 -.media-editor .interface-interface-skeleton__sidebar {
5265 - border-top: 0;
5266 - box-shadow: none;
5267 - outline: 1px solid transparent;
5242 +.media-editor .media-editor__tablist {
5243 + flex-shrink: 0;
5244 + margin-inline: 24px;
5245 + background: #fff;
5246 + border-bottom: 1px solid #ddd;
5268 5247 }
5269 5248
5270 5249 .media-editor .media-editor__panel {
5271 - padding: 16px;
5250 + flex: 1;
5251 + min-height: 0;
5252 + overflow-y: auto;
5253 + padding-block: 24px;
5254 + padding-inline: 24px;
5272 5255 }
5273 5256
5274 -@media (min-width: 600px) {
5275 - .media-editor .media-editor__panel {
5276 - padding: 24px 24px 0 0;
5277 - }
5257 +.media-editor .media-editor__content:has(.media-editor-fine-rotation) .media-editor__canvas-area {
5258 + border-end-start-radius: 0;
5259 + border-end-end-radius: 0;
5278 5260 }
5279 -.media-editor .components-panel__header.media-editor__sidebar-header {
5280 - padding-left: 0;
5281 - padding-right: 8px;
5282 - margin-right: 24px;
5283 - margin-right: 0;
5284 -}
5285 5261
5286 -@media (min-width: 600px) {
5287 - .media-editor .components-panel__header.media-editor__sidebar-header {
5288 - margin-right: 24px;
5289 - }
5262 +.media-editor .media-editor__body.has-panel-open .media-editor__content {
5263 + display: none;
5290 5264 }
5291 -.media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5292 - padding: 0;
5293 -}
5294 5265
5295 5266 @media (min-width: 600px) {
5296 - .media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5267 + .media-editor .media-editor__body.has-panel-open .media-editor__content {
5297 5268 display: flex;
5269 + margin: 0 0 0 24px;
5298 5270 }
5299 5271 }
5300 -@media (min-width: 600px) and (max-width: 781px) {
5301 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5302 - position: relative !important;
5303 - }
5304 - .media-editor .interface-complementary-area__fill,
5305 - .media-editor .interface-complementary-area {
5306 - width: 280px !important;
5307 - }
5308 -}
5309 -@media (max-width: 599px) {
5310 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5311 - width: 100%;
5312 - }
5313 - .media-editor .interface-complementary-area__fill,
5314 - .media-editor .interface-complementary-area {
5315 - width: 100% !important;
5316 - }
5317 -}
5318 5272 .media-editor__snackbar {
5319 5273 position: fixed;
5320 - bottom: 24px;
5274 + bottom: var(--wpds-dimension-size-md, 32px);
5321 5275 left: 0;
5322 5276 right: 0;
5323 5277 padding-inline: 16px;
5324 5278 box-sizing: border-box;
@@ -5352,44 +5306,20 @@
5352 5306
5353 5307 .media-editor-modal.components-modal__frame .media-editor-modal__footer {
5354 5308 flex-shrink: 0;
5355 5309 display: flex;
5356 - gap: 16px;
5357 - padding: 16px 32px 24px;
5358 - background: #fff;
5359 - z-index: 1000001;
5360 -}
5361 -
5362 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide {
5363 5310 flex-direction: row;
5364 5311 align-items: center;
5365 -}
5366 -
5367 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor__footer-actions {
5368 - margin-left: auto;
5369 -}
5370 -
5371 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow {
5372 - flex-direction: column;
5373 -}
5374 -
5375 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow > .media-editor-image-controls {
5376 - align-self: center;
5377 -}
5378 -
5379 -.media-editor-modal__footer-row {
5380 - display: flex;
5381 - flex-wrap: wrap;
5382 - align-items: center;
5383 5312 gap: 16px;
5313 + padding: 24px;
5314 + background: #fff;
5384 5315 }
5385 5316
5386 -.media-editor-modal__footer-row .media-editor-image-controls,
5387 -.media-editor-modal__footer-row .media-editor__footer-actions {
5317 +.media-editor-modal.components-modal__frame .media-editor-modal__footer .media-editor__save-actions {
5388 5318 margin-left: auto;
5389 5319 }
5390 5320
5391 -.media-editor__history-actions .components-button.has-icon:not([aria-disabled=true]) {
5321 +.media-editor-modal .media-editor__history-actions .components-button.has-icon:not([aria-disabled=true]) {
5392 5322 color: var(--wp-admin-theme-color);
5393 5323 }
5394 5324
5395 5325 .media-editor-modal {
@@ -5398,9 +5328,9 @@
5398 5328 }
5399 5329
5400 5330 .media-editor-modal__snackbar {
5401 5331 position: fixed;
5402 - bottom: 24px;
5332 + bottom: var(--wpds-dimension-size-md, 32px);
5403 5333 left: 0;
5404 5334 right: 0;
5405 5335 padding-inline: 16px;
5406 5336 box-sizing: border-box;
@@ -5562,12 +5492,13 @@
5562 5492 box-sizing: border-box;
5563 5493 color: #1e1e1e;
5564 5494 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5565 5495 -webkit-user-select: none;
5566 - -moz-user-select: none;
5567 5496 user-select: none;
5568 5497 touch-action: none;
5569 5498 cursor: ew-resize;
5499 + /*rtl:ignore*/
5500 + direction: ltr;
5570 5501 container-type: inline-size;
5571 5502 }
5572 5503
5573 5504 .rotation-ruler[data-disabled] {
@@ -5588,9 +5519,9 @@
5588 5519 height: 1px;
5589 5520 margin: -1px;
5590 5521 padding: 0;
5591 5522 border: 0;
5592 - clip: rect(0 0 0 0);
5523 + clip-path: inset(50%);
5593 5524 overflow: hidden;
5594 5525 white-space: nowrap;
5595 5526 }
5596 5527
@@ -5678,8 +5609,9 @@
5678 5609
5679 5610 .rotation-ruler__active-label-sign {
5680 5611 position: absolute;
5681 5612 top: 0;
5613 + /*rtl:ignore*/
5682 5614 right: 100%;
5683 5615 }
5684 5616
5685 5617 .rotation-ruler__active-label-unit {
@@ -5684,8 +5616,9 @@
5684 5616
5685 5617 .rotation-ruler__active-label-unit {
5686 5618 position: absolute;
5687 5619 top: 0;
5620 + /*rtl:ignore*/
5688 5621 left: 100%;
5689 5622 }
5690 5623
5691 5624 @container (max-width: 220px) {
@@ -5704,9 +5637,9 @@
5704 5637 }
5705 5638
5706 5639 .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
5707 5640 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
5708 - font: normal 20px/1 dashicons;
5641 + font: 400 20px/1 dashicons;
5709 5642 content: "\f110";
5710 5643 margin-right: 5px;
5711 5644 vertical-align: middle;
5712 5645 }
@@ -5741,9 +5674,10 @@
5741 5674
5742 5675 .interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) {
5743 5676 box-shadow: none;
5744 5677 }
5745 -.interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) .interface-complementary-area-header {
5678 +
5679 +.editor-collab-sidebar__header {
5746 5680 display: none;
5747 5681 }
5748 5682
5749 5683 .editor-collab-sidebar {
@@ -5755,8 +5689,9 @@
5755 5689 position: relative;
5756 5690 padding: 16px 16px 24px;
5757 5691 height: 100%;
5758 5692 overflow: hidden;
5693 + border-left: 1px solid color-mix(in srgb, currentColor 10%, transparent);
5759 5694 }
5760 5695
5761 5696 .editor-collab-sidebar-panel__thread,
5762 5697 .editor-collab-sidebar-panel__add-note {
@@ -5790,8 +5725,12 @@
5790 5725 max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 128px);
5791 5726 overflow-y: auto;
5792 5727 }
5793 5728
5729 +.editor-collab-sidebar-panel__user-info {
5730 + flex: 1;
5731 +}
5732 +
5794 5733 .editor-collab-sidebar-panel__user-name {
5795 5734 font-size: 12px;
5796 5735 font-weight: 400;
5797 5736 line-height: 16px;
@@ -5796,9 +5735,9 @@
5796 5735 font-weight: 400;
5797 5736 line-height: 16px;
5798 5737 text-align: left;
5799 5738 color: #757575;
5800 - text-transform: capitalize;
5739 + overflow-wrap: anywhere;
5801 5740 }
5802 5741
5803 5742 .editor-collab-sidebar-panel__user-time {
5804 5743 font-size: 12px;
@@ -5808,9 +5747,8 @@
5808 5747 color: #757575;
5809 5748 }
5810 5749
5811 5750 .editor-collab-sidebar-panel__show-more-button {
5812 - width: -moz-fit-content;
5813 5751 width: fit-content;
5814 5752 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
5815 5753 cursor: var(--wpds-cursor-control, pointer);
5816 5754 }
@@ -5817,8 +5755,11 @@
5817 5755 .editor-collab-sidebar-panel__show-more-button:hover, .editor-collab-sidebar-panel__show-more-button:focus, .editor-collab-sidebar-panel__show-more-button:active {
5818 5756 color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
5819 5757 }
5820 5758
5759 +.editor-collab-sidebar-panel__note-content {
5760 + overflow-wrap: break-word;
5761 +}
5821 5762 .editor-collab-sidebar-panel__note-content p:last-child {
5822 5763 margin-bottom: 0;
5823 5764 }
5824 5765 .editor-collab-sidebar-panel__note-content.is-collapsed {
@@ -5875,9 +5816,9 @@
5875 5816 line-height: 20px;
5876 5817 max-height: 418px;
5877 5818 overflow-y: auto;
5878 5819 white-space: pre-wrap;
5879 - word-wrap: break-word;
5820 + overflow-wrap: break-word;
5880 5821 }
5881 5822 .editor-collab-sidebar-panel__note-form [role=textbox] code {
5882 5823 font-family: Menlo, Consolas, monaco, monospace;
5883 5824 font-size: 0.9em;
@@ -5957,9 +5898,8 @@
5957 5898 border-radius: var(--wpds-border-radius-sm, 2px);
5958 5899 background: var(--wpds-color-background-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white));
5959 5900 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
5960 5901 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5961 - white-space: nowrap;
5962 5902 }
5963 5903 @media (forced-colors: active) {
5964 5904 .wp-note-mention {
5965 5905 border: 1px solid;
@@ -5969,8 +5909,13 @@
5969 5909 .editor-collab-sidebar-panel__mention-suggestion .editor-autocompleters__user-avatar {
5970 5910 border-radius: 50%;
5971 5911 }
5972 5912
5913 +.editor-rich-text-control [data-rich-text-placeholder]::after {
5914 + content: attr(data-rich-text-placeholder);
5915 + color: color-mix(in srgb, currentColor, transparent 38%);
5916 +}
5917 +
5973 5918 .editor-avatar {
5974 5919 position: relative;
5975 5920 display: inline-flex;
5976 5921 align-items: center;
@@ -6015,10 +5960,9 @@
6015 5960 position: absolute;
6016 5961 inset: 0;
6017 5962 width: 100%;
6018 5963 height: 100%;
6019 - -o-object-fit: cover;
6020 - object-fit: cover;
5964 + object-fit: cover;
6021 5965 border-radius: inherit;
6022 5966 opacity: 0;
6023 5967 }
6024 5968 .has-src > .editor-avatar__image > .editor-avatar__img {
@@ -6057,19 +6001,16 @@
6057 6001
6058 6002 .editor-avatar.is-badge {
6059 6003 display: inline-grid;
6060 6004 grid-template-columns: min-content 0fr;
6061 - -moz-column-gap: 0;
6062 - column-gap: 0;
6005 + column-gap: 0;
6063 6006 padding-inline-end: 0;
6064 6007 background-color: var(--wp-admin-theme-color, #3858e9);
6065 6008 transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
6066 - transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1), -moz-column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1);
6067 6009 }
6068 6010 .editor-avatar.is-badge:hover {
6069 6011 grid-template-columns: min-content 1fr;
6070 - -moz-column-gap: 4px;
6071 - column-gap: 4px;
6012 + column-gap: 4px;
6072 6013 padding-inline-end: 8px;
6073 6014 transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
6074 6015 }
6075 6016 .editor-avatar.is-badge:hover .editor-avatar__name {
@@ -6259,43 +6200,24 @@
6259 6200 height: 32px;
6260 6201 background: #f0f0f0;
6261 6202 border-radius: 4px;
6262 6203 }
6263 -.editor-collaborators-presence:hover {
6204 +.editor-collaborators-presence:hover, .editor-collaborators-presence:has(.is-pressed) {
6264 6205 background-color: #e0e0e0;
6265 6206 }
6266 -.editor-collaborators-presence:has(.is-pressed) {
6267 - background-color: #e0e0e0;
6268 -}
6269 6207
6270 6208 .editor-header__center .editor-collaborators-presence {
6271 6209 margin-right: 8px;
6272 6210 }
6273 6211
6274 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
6275 - display: flex;
6276 - align-items: center;
6277 - cursor: var(--wpds-cursor-control, pointer);
6212 +.editor-collaborators-presence__button.editor-collaborators-presence__button {
6278 6213 position: relative;
6279 6214 padding: 4px;
6280 - border-radius: 4px;
6281 - height: 100%;
6282 - box-sizing: border-box;
6283 - color: #2f2f2f;
6284 - background: transparent;
6285 6215 }
6286 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover {
6216 +.editor-collaborators-presence__button.editor-collaborators-presence__button, .editor-collaborators-presence__button.editor-collaborators-presence__button:hover, .editor-collaborators-presence__button.editor-collaborators-presence__button.is-pressed, .editor-collaborators-presence__button.editor-collaborators-presence__button.is-pressed:hover {
6287 6217 background: transparent;
6288 6218 color: #2f2f2f;
6289 6219 }
6290 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed, .editor-collaborators-presence__button.editor-collaborators-presence__button.components-button.is-pressed:hover {
6291 - background: transparent;
6292 - color: #2f2f2f;
6293 -}
6294 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active) {
6295 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #007cba);
6296 - outline: none;
6297 -}
6298 6220
6299 6221 .editor-collapsible-block-toolbar {
6300 6222 overflow: hidden;
6301 6223 display: flex;
@@ -6390,11 +6312,8 @@
6390 6312 }
6391 6313 .editor-document-bar:hover {
6392 6314 background-color: #e0e0e0;
6393 6315 }
6394 -.editor-document-bar .components-button {
6395 - border-radius: 4px;
6396 -}
6397 6316 @media not (prefers-reduced-motion) {
6398 6317 .editor-document-bar .components-button {
6399 6318 transition: background-color 0.1s ease-out;
6400 6319 }
@@ -6466,9 +6385,9 @@
6466 6385 display: none;
6467 6386 pointer-events: none;
6468 6387 }
6469 6388 .editor-document-bar__icon-layout.editor-document-bar__icon-layout svg {
6470 - fill: #949494;
6389 + color: #949494;
6471 6390 }
6472 6391 @media (min-width: 600px) {
6473 6392 .editor-document-bar__icon-layout.editor-document-bar__icon-layout {
6474 6393 display: flex;
@@ -6598,12 +6517,12 @@
6598 6517 .editor-document-tools .editor-document-tools__left > .components-button.has-icon.is-pressed,
6599 6518 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon.is-pressed {
6600 6519 background: #1e1e1e;
6601 6520 }
6602 -.editor-document-tools .editor-document-tools__left > .components-button.has-icon:focus:not(:disabled),
6603 -.editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
6604 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
6605 - outline: 1px solid transparent;
6521 +.editor-document-tools .editor-document-tools__left > .components-button.has-icon:focus:not(:active),
6522 +.editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon:focus:not(:active) {
6523 + 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)));
6524 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
6606 6525 }
6607 6526 .editor-document-tools .editor-document-tools__left > .components-button.has-icon::before,
6608 6527 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon::before {
6609 6528 display: none;
@@ -6657,19 +6576,28 @@
6657 6576 right: 0;
6658 6577 }
6659 6578
6660 6579 .editor-error-boundary {
6661 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6580 + font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
6662 6581 margin: auto;
6663 - max-width: 780px;
6664 - padding: 1em;
6582 + width: 100%;
6583 + max-width: var(--wpds-dimension-surface-width-lg, 560px);
6584 + padding: var(--wpds-dimension-padding-xl, 20px);
6665 6585 margin-top: 64px;
6666 - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
6667 - border: 1px solid #1e1e1e;
6668 - border-radius: 2px;
6669 - background-color: #fff;
6670 6586 }
6671 6587
6588 +.editor-error-boundary__report {
6589 + max-height: 420px;
6590 + overflow: auto;
6591 + overflow-anchor: none;
6592 +}
6593 +
6594 +.editor-error-boundary__report-section {
6595 + margin: 0;
6596 + white-space: pre-wrap;
6597 + overflow-wrap: break-word;
6598 +}
6599 +
6672 6600 .editor-global-styles-header__description {
6673 6601 padding: 0 16px;
6674 6602 }
6675 6603
@@ -6685,8 +6613,27 @@
6685 6613 .editor-global-styles-sidebar__panel {
6686 6614 flex: 1;
6687 6615 }
6688 6616
6617 +.editor-global-styles-sidebar .editor-global-styles-sidebar__header {
6618 + flex-grow: 1;
6619 +}
6620 +
6621 +.editor-global-styles-sidebar:has(.global-styles-ui-screen-revisions) {
6622 + overflow: hidden;
6623 +}
6624 +
6625 +.editor-global-styles-sidebar__panel:has(.global-styles-ui-screen-revisions) {
6626 + display: flex;
6627 + flex-direction: column;
6628 + min-height: 0;
6629 +}
6630 +
6631 +.editor-global-styles-sidebar .global-styles-ui-sidebar__navigator-provider:has(.global-styles-ui-screen-revisions) {
6632 + flex: 1;
6633 + min-height: 0;
6634 +}
6635 +
6689 6636 .editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
6690 6637 margin: 0;
6691 6638 }
6692 6639
@@ -6746,10 +6693,9 @@
6746 6693 }
6747 6694 .editor-welcome-guide__image > img {
6748 6695 display: block;
6749 6696 max-width: 100%;
6750 - -o-object-fit: cover;
6751 - object-fit: cover;
6697 + object-fit: cover;
6752 6698 }
6753 6699 .editor-welcome-guide__heading {
6754 6700 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6755 6701 font-size: 24px;
@@ -6766,9 +6712,9 @@
6766 6712 .editor-welcome-guide__text img {
6767 6713 vertical-align: bottom;
6768 6714 }
6769 6715 .editor-welcome-guide .components-button:hover svg {
6770 - fill: #fff;
6716 + color: #fff;
6771 6717 }
6772 6718
6773 6719 .editor-header {
6774 6720 box-sizing: border-box;
@@ -6782,16 +6728,16 @@
6782 6728 height: 64px;
6783 6729 background: #fff;
6784 6730 display: grid;
6785 6731 grid-auto-flow: row;
6786 - grid-template: auto/32px minmax(0, max-content) minmax(min-content, 1fr) 64px;
6732 + grid-template: auto/auto minmax(0, max-content) minmax(min-content, 1fr) 64px;
6787 6733 }
6788 6734 .editor-header:has(> .editor-header__center) {
6789 - grid-template: auto/32px min-content 1fr min-content 64px;
6735 + grid-template: auto/auto min-content 1fr min-content 64px;
6790 6736 }
6791 6737 @media (min-width: 782px) {
6792 6738 .editor-header:has(> .editor-header__center) {
6793 - grid-template: auto/32px minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) 64px;
6739 + grid-template: auto/auto minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) 64px;
6794 6740 }
6795 6741 }
6796 6742 @media (min-width: 480px) {
6797 6743 .editor-header {
@@ -6809,10 +6755,13 @@
6809 6755 }
6810 6756 }
6811 6757
6812 6758 .editor-header__back-button {
6813 - padding-left: 8px;
6759 + margin: 0 -8px 0 8px;
6814 6760 }
6761 +.show-icon-labels .editor-header__back-button {
6762 + margin-right: 0;
6763 +}
6815 6764
6816 6765 .editor-header__toolbar {
6817 6766 grid-column: 1/3;
6818 6767 }
@@ -7018,9 +6967,9 @@
7018 6967 }
7019 6968 .editor-editor-interface.is-distraction-free .editor-header > .edit-post-header__settings > .edit-post-header__post-preview-button {
7020 6969 visibility: hidden;
7021 6970 }
7022 -.editor-editor-interface.is-distraction-free .editor-header > .editor-header__toolbar .editor-document-tools__document-overview-toggle, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-preview-dropdown, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .interface-pinned-items, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-zoom-out-toggle {
6971 +.editor-editor-interface.is-distraction-free .editor-header > .editor-header__toolbar .editor-document-tools__document-overview-toggle, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-preview-dropdown__toggle, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .interface-pinned-items, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-zoom-out-toggle {
7023 6972 display: none;
7024 6973 }
7025 6974 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within {
7026 6975 opacity: 1 !important;
@@ -7027,15 +6976,15 @@
7027 6976 }
7028 6977 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within div {
7029 6978 transform: translateX(0) translateZ(0) !important;
7030 6979 }
7031 -.editor-editor-interface.is-distraction-free .components-editor-notices__dismissible {
6980 +.editor-editor-interface.is-distraction-free .editor-notices__dismissible {
7032 6981 position: absolute;
7033 6982 z-index: 35;
7034 6983 }
7035 -
7036 -.components-popover.more-menu-dropdown__content {
7037 - z-index: 99998;
6984 +.editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:hover,
6985 +.editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within {
6986 + z-index: 36;
7038 6987 }
7039 6988
7040 6989 .editor-inserter-sidebar {
7041 6990 box-sizing: border-box;
@@ -7165,9 +7114,9 @@
7165 7114 scrollbar-gutter: auto;
7166 7115 }
7167 7116
7168 7117 .editor-list-view-sidebar__list-view-panel-content {
7169 - padding: 4px;
7118 + padding: 8px;
7170 7119 }
7171 7120
7172 7121 .editor-list-view-sidebar__list-view-container {
7173 7122 display: flex;
@@ -7198,8 +7147,13 @@
7198 7147 line-height: 1.4;
7199 7148 color: #757575;
7200 7149 }
7201 7150
7151 +.editor-more-menu__popup {
7152 + max-height: var(--available-height);
7153 + max-width: var(--wpds-dimension-surface-width-sm, 320px);
7154 +}
7155 +
7202 7156 .editor-post-parent__panel,
7203 7157 .editor-post-order__panel {
7204 7158 padding-top: 8px;
7205 7159 }
@@ -7250,12 +7204,12 @@
7250 7204 margin: 0;
7251 7205 display: flex;
7252 7206 align-items: center;
7253 7207 flex-wrap: wrap;
7254 - -moz-column-gap: 8px;
7255 - column-gap: 8px;
7208 + column-gap: 8px;
7256 7209 row-gap: 4px;
7257 - word-break: break-word;
7210 + word-break: normal;
7211 + overflow-wrap: anywhere;
7258 7212 }
7259 7213 .editor-post-card-panel__icon {
7260 7214 flex: 0 0 24px;
7261 7215 width: 24px;
@@ -7362,13 +7316,11 @@
7362 7316 /*rtl:end:ignore*/
7363 7317 background-size: 24px 24px;
7364 7318 }
7365 7319 .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
7366 - -o-object-fit: cover;
7367 - object-fit: cover;
7320 + object-fit: cover;
7368 7321 width: 100%;
7369 - -o-object-position: 50% 50%;
7370 - object-position: 50% 50%;
7322 + object-position: 50% 50%;
7371 7323 aspect-ratio: 2/1;
7372 7324 }
7373 7325
7374 7326 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) {
@@ -7419,9 +7371,9 @@
7419 7371 .editor-post-last-revision__title.components-button.has-icon:hover, .editor-post-last-revision__title.components-button.has-icon:active {
7420 7372 background: #f0f0f0;
7421 7373 }
7422 7374 .editor-post-last-revision__title.components-button.has-icon:focus {
7423 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
7375 + outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
7424 7376 border-radius: 0;
7425 7377 }
7426 7378
7427 7379 .components-panel__body.is-opened.editor-post-last-revision__panel {
@@ -7457,9 +7409,10 @@
7457 7409 align-items: center;
7458 7410 padding: 6px 0;
7459 7411 line-height: 20px;
7460 7412 hyphens: auto;
7461 - word-break: break-word;
7413 + word-break: normal;
7414 + overflow-wrap: anywhere;
7462 7415 }
7463 7416
7464 7417 .editor-post-panel__row-control {
7465 7418 flex-grow: 1;
@@ -7535,9 +7488,10 @@
7535 7488 .components-site-home {
7536 7489 display: block;
7537 7490 color: #757575;
7538 7491 font-size: 12px;
7539 - word-break: break-word;
7492 + word-break: normal;
7493 + overflow-wrap: anywhere;
7540 7494 }
7541 7495
7542 7496 .editor-post-publish-panel__header-publish-button,
7543 7497 .editor-post-publish-panel__header-cancel-button {
@@ -7558,12 +7512,8 @@
7558 7512 .editor-post-publish-panel__header-cancel-button {
7559 7513 padding-right: 4px;
7560 7514 }
7561 7515
7562 -.editor-post-publish-panel__header-published {
7563 - flex-grow: 1;
7564 -}
7565 -
7566 7516 .editor-post-publish-panel__footer {
7567 7517 padding: 16px;
7568 7518 }
7569 7519
@@ -7593,11 +7543,8 @@
7593 7543 background: #fff;
7594 7544 margin-left: -16px;
7595 7545 margin-right: -16px;
7596 7546 }
7597 -.editor-post-publish-panel__prepublish .editor-post-visibility__dialog-legend {
7598 - display: none;
7599 -}
7600 7547 .editor-post-publish-panel__prepublish .components-panel__body-title .components-button {
7601 7548 align-items: flex-start;
7602 7549 text-wrap: balance;
7603 7550 text-wrap: pretty;
@@ -7605,9 +7552,10 @@
7605 7552
7606 7553 .post-publish-panel__postpublish .components-panel__body {
7607 7554 border-bottom: 1px solid #e0e0e0;
7608 7555 border-top: none;
7609 - word-break: break-word;
7556 + word-break: normal;
7557 + overflow-wrap: anywhere;
7610 7558 }
7611 7559
7612 7560 .post-publish-panel__postpublish-buttons {
7613 7561 display: flex;
@@ -7654,17 +7602,8 @@
7654 7602 .post-publish-panel__postpublish-subheader {
7655 7603 margin: 0 0 8px;
7656 7604 }
7657 7605
7658 -.post-publish-panel__tip {
7659 - color: #f0b849;
7660 -}
7661 -
7662 -@media screen and (max-width: 782px) {
7663 - .post-publish-panel__postpublish-post-address__button-wrap .components-button {
7664 - height: 40px;
7665 - }
7666 -}
7667 7606 .editor-post-publish-panel {
7668 7607 box-sizing: border-box;
7669 7608 }
7670 7609 .editor-post-publish-panel *,
@@ -7738,8 +7677,104 @@
7738 7677 flex: 1;
7739 7678 min-width: 0;
7740 7679 }
7741 7680
7681 +.editor-revisions-code-diff {
7682 + height: 100%;
7683 + overflow: auto;
7684 + background: #fff;
7685 + color: #1e1e1e;
7686 +}
7687 +.editor-revisions-code-diff:focus-visible {
7688 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
7689 + outline: none;
7690 +}
7691 +
7692 +.editor-revisions-code-diff__table {
7693 + width: 100%;
7694 + min-width: max-content;
7695 + border: 0;
7696 + border-collapse: separate;
7697 + border-spacing: 0;
7698 + font-family: Menlo, Consolas, monaco, monospace;
7699 + font-size: 15px;
7700 + line-height: 1.6;
7701 +}
7702 +
7703 +.editor-revisions-code-diff__line.is-added {
7704 + background: rgba(0, 163, 42, 0.12);
7705 +}
7706 +.editor-revisions-code-diff__line.is-added > .editor-revisions-code-diff__line-number,
7707 +.editor-revisions-code-diff__line.is-added > .editor-revisions-code-diff__marker {
7708 + background: color-mix(in srgb, #00a32a 12%, #fff);
7709 +}
7710 +.editor-revisions-code-diff__line.is-removed {
7711 + background: rgba(214, 54, 56, 0.12);
7712 +}
7713 +.editor-revisions-code-diff__line.is-removed > .editor-revisions-code-diff__line-number,
7714 +.editor-revisions-code-diff__line.is-removed > .editor-revisions-code-diff__marker {
7715 + background: color-mix(in srgb, #d63638 12%, #fff);
7716 +}
7717 +
7718 +.editor-revisions-code-diff__line-number,
7719 +.editor-revisions-code-diff__marker {
7720 + position: sticky;
7721 + z-index: 1;
7722 + box-sizing: border-box;
7723 + padding: 0 8px;
7724 + background: #fff;
7725 + color: #757575;
7726 + text-align: right;
7727 + white-space: nowrap;
7728 + -webkit-user-select: none;
7729 + user-select: none;
7730 +}
7731 +
7732 +.editor-revisions-code-diff__line-number {
7733 + left: 0;
7734 + width: 6ch;
7735 + min-width: 6ch;
7736 + max-width: 6ch;
7737 + border-right: 1px solid #e0e0e0;
7738 + background: #f0f0f0;
7739 +}
7740 +.editor-revisions-code-diff__line-number.is-previous + .editor-revisions-code-diff__line-number.is-current {
7741 + left: 6ch;
7742 +}
7743 +
7744 +.editor-revisions-code-diff__marker {
7745 + left: 12ch;
7746 + width: 3ch;
7747 + min-width: 3ch;
7748 + max-width: 3ch;
7749 + border-right: 1px solid #e0e0e0;
7750 + padding: 0;
7751 + font-weight: 600;
7752 + text-align: center;
7753 +}
7754 +
7755 +.editor-revisions-code-diff__code {
7756 + width: 100%;
7757 + padding: 0 16px 0 8px;
7758 + /*rtl:ignore*/
7759 + direction: ltr;
7760 + unicode-bidi: isolate;
7761 + white-space: pre;
7762 +}
7763 +.editor-revisions-code-diff__code code {
7764 + margin: 0;
7765 + padding: 0;
7766 + background: none;
7767 + color: inherit;
7768 + font: inherit;
7769 +}
7770 +
7771 +.editor-revisions-code-diff__empty {
7772 + margin: 0;
7773 + padding: 24px;
7774 + color: #757575;
7775 +}
7776 +
7742 7777 .revision-diff-markers {
7743 7778 position: relative;
7744 7779 flex-shrink: 0;
7745 7780 width: max(16px, 1rem);
@@ -7775,9 +7810,10 @@
7775 7810 display: flex;
7776 7811 flex-direction: column;
7777 7812 overflow: hidden;
7778 7813 }
7779 -.interface-complementary-area:has(.editor-post-revisions-timeline) .editor-sidebar__panel-tabs {
7814 +
7815 +.interface-complementary-area > .editor-sidebar__panel-tabs {
7780 7816 flex-shrink: 0;
7781 7817 }
7782 7818
7783 7819 .editor-sidebar__panel:has(.editor-post-revisions-timeline) {
@@ -7785,25 +7821,29 @@
7785 7821 flex-direction: column;
7786 7822 flex: 1;
7787 7823 min-height: 0;
7788 7824 }
7789 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) [role=tabpanel]:has(.editor-post-revisions-timeline) {
7825 +
7826 +.editor-sidebar__panel [role=tabpanel]:has(.editor-post-revisions-timeline) {
7790 7827 display: flex;
7791 7828 flex-direction: column;
7792 7829 flex: 1;
7793 7830 min-height: 0;
7794 7831 }
7795 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-revision-meta-diff__content {
7832 +
7833 +.editor-sidebar__panel .editor-revision-meta-diff__content {
7796 7834 max-height: 80px;
7797 7835 overflow-y: auto;
7798 7836 }
7799 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-post-revisions-timeline {
7837 +
7838 +.editor-sidebar__panel .editor-post-revisions-timeline {
7800 7839 flex: 1;
7801 7840 min-height: 0;
7802 7841 }
7803 7842
7804 7843 .editor-revision-fields-diff__value {
7805 - word-break: break-word;
7844 + word-break: normal;
7845 + overflow-wrap: anywhere;
7806 7846 }
7807 7847
7808 7848 .editor-revision-fields-diff__added {
7809 7849 background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
@@ -7857,8 +7897,14 @@
7857 7897 min-width: 320px;
7858 7898 padding: 16px;
7859 7899 }
7860 7900
7901 +.editor-post-schedule__reset {
7902 + justify-content: center;
7903 + margin-top: 16px;
7904 + width: 100%;
7905 +}
7906 +
7861 7907 .editor-post-status {
7862 7908 max-width: 100%;
7863 7909 }
7864 7910 .editor-post-status.is-read-only {
@@ -7911,8 +7957,13 @@
7911 7957 .editor-post-taxonomies__hierarchical-terms-choice:last-child {
7912 7958 margin-bottom: 4px;
7913 7959 }
7914 7960
7961 +.editor-post-taxonomies__hierarchical-terms-add,
7962 +.editor-post-taxonomies__hierarchical-terms-submit {
7963 + align-self: flex-start;
7964 +}
7965 +
7915 7966 .editor-post-taxonomies__hierarchical-terms-subchoices {
7916 7967 margin-top: 8px;
7917 7968 margin-left: 16px;
7918 7969 }
@@ -7958,29 +8009,24 @@
7958 8009 z-index: 1000001;
7959 8010 }
7960 8011
7961 8012 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
7962 - -moz-column-count: 2;
7963 - column-count: 2;
7964 - -moz-column-gap: 24px;
7965 - column-gap: 24px;
8013 + column-count: 2;
8014 + column-gap: 24px;
7966 8015 padding-top: 2px;
7967 8016 }
7968 8017 @media (min-width: 782px) {
7969 8018 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
7970 - -moz-column-count: 3;
7971 - column-count: 3;
8019 + column-count: 3;
7972 8020 }
7973 8021 }
7974 8022 @media (min-width: 1280px) {
7975 8023 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
7976 - -moz-column-count: 4;
7977 - column-count: 4;
8024 + column-count: 4;
7978 8025 }
7979 8026 }
7980 8027 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
7981 - -moz-column-break-inside: avoid;
7982 - break-inside: avoid-column;
8028 + break-inside: avoid-column;
7983 8029 }
7984 8030
7985 8031 .editor-post-template__dropdown .components-popover__content {
7986 8032 min-width: 240px;
@@ -8035,9 +8081,10 @@
8035 8081 margin: 0;
8036 8082 width: 100%;
8037 8083 box-shadow: none;
8038 8084 resize: none;
8039 - overflow: hidden;
8085 + field-sizing: content;
8086 + overflow: auto;
8040 8087 font-family: Menlo, Consolas, monaco, monospace;
8041 8088 line-height: 2.4;
8042 8089 min-height: 200px;
8043 8090 }
@@ -8067,11 +8114,8 @@
8067 8114 border-color: var(--wp-admin-theme-color);
8068 8115 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8069 8116 position: relative;
8070 8117 }
8071 -textarea.editor-post-text-editor::-moz-placeholder {
8072 - color: rgba(30, 30, 30, 0.62);
8073 -}
8074 8118 textarea.editor-post-text-editor::placeholder {
8075 8119 color: rgba(30, 30, 30, 0.62);
8076 8120 }
8077 8121
@@ -8093,9 +8137,10 @@
8093 8137 /* rtl:begin:ignore */
8094 8138 .editor-post-url__link,
8095 8139 .editor-post-url__front-page-link {
8096 8140 direction: ltr;
8097 - word-break: break-word;
8141 + word-break: normal;
8142 + overflow-wrap: anywhere;
8098 8143 }
8099 8144
8100 8145 /* rtl:end:ignore */
8101 8146 .editor-post-url__front-page-link {
@@ -8122,9 +8167,10 @@
8122 8167 }
8123 8168
8124 8169 .editor-post-url__panel-toggle,
8125 8170 .editor-post-parent__panel-toggle {
8126 - word-break: break-word;
8171 + word-break: normal;
8172 + overflow-wrap: anywhere;
8127 8173 }
8128 8174
8129 8175 .editor-post-url__intro {
8130 8176 margin: 0;
@@ -8147,20 +8193,24 @@
8147 8193 flex-grow: 1;
8148 8194 justify-content: center;
8149 8195 }
8150 8196
8151 -.editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
8197 +.editor-preview-dropdown__popup {
8198 + max-width: var(--wpds-dimension-surface-width-xs, 240px);
8199 +}
8200 +
8201 +.editor-preview-dropdown__toggle.has-icon.has-text {
8152 8202 padding-right: 4px;
8153 8203 padding-left: 6px;
8154 8204 }
8155 8205
8156 -.editor-preview-dropdown.is-responsive-editing .editor-preview-dropdown__toggle {
8206 +.editor-preview-dropdown__toggle.is-responsive-editing {
8157 8207 color: var(--wp-block-synced-color);
8158 8208 }
8159 8209
8160 8210 @media (prefers-reduced-motion: no-preference) {
8161 8211 .editor-resizable-editor:not(.is-resizing) {
8162 - transition: width 0.2s ease-out, height 0.2s ease-out;
8212 + transition: width 0.2s ease-out;
8163 8213 }
8164 8214 }
8165 8215
8166 8216 .editor-resizable-editor.is-resizable {
@@ -8174,11 +8224,9 @@
8174 8224 bottom: 0;
8175 8225 padding: 0;
8176 8226 margin: auto 0;
8177 8227 width: 12px;
8178 - -webkit-appearance: none;
8179 - -moz-appearance: none;
8180 - appearance: none;
8228 + appearance: none;
8181 8229 cursor: ew-resize;
8182 8230 outline: none;
8183 8231 background: none;
8184 8232 border-radius: 9999px;
@@ -8208,8 +8256,22 @@
8208 8256 .editor-resizable-editor__resize-handle:hover::after, .editor-resizable-editor__resize-handle:focus::after, .editor-resizable-editor__resize-handle:active::after {
8209 8257 background-color: var(--wp-admin-theme-color);
8210 8258 }
8211 8259
8260 +.editor-save-error-details {
8261 + display: inline;
8262 +}
8263 +
8264 +.editor-save-error-details summary {
8265 + display: inline;
8266 + cursor: var(--wpds-cursor-control, pointer);
8267 + margin-left: 0.35em;
8268 +}
8269 +
8270 +.editor-save-error-details__message {
8271 + white-space: break-spaces;
8272 +}
8273 +
8212 8274 .editor-layout__toggle-publish-panel,
8213 8275 .editor-layout__toggle-sidebar-panel,
8214 8276 .editor-layout__toggle-entities-saved-states-panel {
8215 8277 z-index: 100000;
@@ -8240,12 +8302,12 @@
8240 8302 bottom: 0;
8241 8303 width: 100%;
8242 8304 height: 72px;
8243 8305 background-color: #fff;
8244 - margin-left: -32px;
8245 - margin-right: -32px;
8246 - padding-left: 32px;
8247 - padding-right: 32px;
8306 + margin-left: -24px;
8307 + margin-right: -24px;
8308 + padding-left: 24px;
8309 + padding-right: 24px;
8248 8310 border-top: 1px solid #ddd;
8249 8311 z-index: 1;
8250 8312 }
8251 8313 .editor-start-page-options__modal .block-editor-block-patterns-list {
@@ -8250,30 +8312,51 @@
8250 8312 }
8251 8313 .editor-start-page-options__modal .block-editor-block-patterns-list {
8252 8314 padding-bottom: 72px;
8253 8315 }
8316 +.editor-start-page-options__modal .editor-start-page-options__sidebar {
8317 + display: none;
8318 +}
8319 +@media (min-width: 782px) {
8320 + .editor-start-page-options__modal .editor-start-page-options__sidebar {
8321 + display: flex;
8322 + position: absolute;
8323 + top: 72px;
8324 + left: 0;
8325 + bottom: 72px;
8326 + width: 280px;
8327 + padding: 24px;
8328 + overflow-x: visible;
8329 + overflow-y: auto;
8330 + }
8331 +}
8254 8332
8255 -.editor-start-page-options__modal-content .block-editor-block-patterns-list {
8256 - -moz-column-count: 2;
8257 - column-count: 2;
8258 - -moz-column-gap: 24px;
8259 - column-gap: 24px;
8333 +.editor-start-page-options__modal-content {
8334 + container-type: inline-size;
8260 8335 }
8336 +
8261 8337 @media (min-width: 782px) {
8262 - .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8263 - -moz-column-count: 3;
8264 - column-count: 3;
8338 + .editor-start-page-options__modal-content.has-pattern-categories {
8339 + margin-left: 280px;
8265 8340 }
8266 8341 }
8267 -@media (min-width: 1280px) {
8342 +
8343 +.editor-start-page-options__no-results {
8344 + padding: 32px;
8345 + text-align: center;
8346 +}
8347 +
8348 +.editor-start-page-options__modal-content .block-editor-block-patterns-list {
8349 + column-count: 2;
8350 + column-gap: 24px;
8351 +}
8352 +@container (min-width: 464px) {
8268 8353 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8269 - -moz-column-count: 4;
8270 - column-count: 4;
8354 + columns: 4 220px;
8271 8355 }
8272 8356 }
8273 8357 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8274 - -moz-column-break-inside: avoid;
8275 - break-inside: avoid-column;
8358 + break-inside: avoid-column;
8276 8359 margin-bottom: 24px;
8277 8360 }
8278 8361 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
8279 8362 min-height: 100px;
@@ -8287,12 +8370,12 @@
8287 8370 bottom: 0;
8288 8371 width: 100%;
8289 8372 height: 92px;
8290 8373 background-color: #fff;
8291 - margin-left: -32px;
8292 - margin-right: -32px;
8293 - padding-left: 32px;
8294 - padding-right: 32px;
8374 + margin-left: -24px;
8375 + margin-right: -24px;
8376 + padding-left: 24px;
8377 + padding-right: 24px;
8295 8378 border-top: 1px solid #ddd;
8296 8379 z-index: 1;
8297 8380 }
8298 8381 .editor-start-template-options__modal .block-editor-block-patterns-list {
@@ -8299,28 +8382,18 @@
8299 8382 padding-bottom: 92px;
8300 8383 }
8301 8384
8302 8385 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8303 - -moz-column-count: 2;
8304 - column-count: 2;
8305 - -moz-column-gap: 24px;
8306 - column-gap: 24px;
8386 + column-count: 2;
8387 + column-gap: 24px;
8307 8388 }
8308 8389 @media (min-width: 782px) {
8309 8390 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8310 - -moz-column-count: 3;
8311 - column-count: 3;
8391 + columns: 4 220px;
8312 8392 }
8313 8393 }
8314 -@media (min-width: 1280px) {
8315 - .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8316 - -moz-column-count: 4;
8317 - column-count: 4;
8318 - }
8319 -}
8320 8394 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8321 - -moz-column-break-inside: avoid;
8322 - break-inside: avoid-column;
8395 + break-inside: avoid-column;
8323 8396 }
8324 8397 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title {
8325 8398 display: none;
8326 8399 }
@@ -8414,8 +8487,11 @@
8414 8487 display: block;
8415 8488 width: 100%;
8416 8489 height: 100%;
8417 8490 }
8491 +.editor-styles-canvas.is-preview-mode {
8492 + padding: 0;
8493 +}
8418 8494
8419 8495 .editor-styles-canvas__section {
8420 8496 background: #fff;
8421 8497 bottom: 0;
@@ -8528,9 +8604,9 @@
8528 8604 max-width: none;
8529 8605 line-height: 1.4;
8530 8606 font-family: Menlo, Consolas, monaco, monospace;
8531 8607 font-size: 2.5em;
8532 - font-weight: normal;
8608 + font-weight: 400;
8533 8609 border: 1px solid #949494;
8534 8610 border-radius: 0;
8535 8611 padding: 16px;
8536 8612 }
@@ -8614,9 +8690,11 @@
8614 8690 .editor-visual-editor iframe[name=editor-canvas] {
8615 8691 background-color: transparent;
8616 8692 }
8617 8693 .editor-visual-editor {
8694 + flex-direction: column;
8618 8695 align-items: center;
8696 + justify-content: center;
8619 8697 }
8620 8698 @media (prefers-reduced-motion: no-preference) {
8621 8699 .editor-visual-editor {
8622 8700 transition: padding 0.2s ease-out;