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 +615 -589 23.6.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;
@@ -708,13 +709,17 @@
708 709 text-transform: uppercase;
709 710 }
710 711
711 712 @media (min-width: 600px) {
712 - .font-library__page-selection .font-library__page-selection-trigger {
713 + .font-library__page-selection .components-select-control__input {
713 714 font-size: 11px !important;
714 715 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
715 716 }
716 717 }
718 +.font-library__search {
719 + width: 240px;
720 +}
721 +
717 722 .font-library__fonts-title {
718 723 text-transform: uppercase;
719 724 font-size: 11px;
720 725 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
@@ -732,11 +737,15 @@
732 737 .font-library__fonts-list-item {
733 738 margin-bottom: 0;
734 739 }
735 740
741 +.font-library__font-demo {
742 + position: relative;
743 +}
744 +
736 745 .font-library__font-card {
737 746 box-sizing: border-box;
738 - border: 1px solid #ddd;
747 + border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
739 748 width: 100%;
740 749 height: auto !important;
741 750 padding: 16px;
742 751 margin-top: -1px; /* To collapse the margin with the previous element */
@@ -750,13 +759,13 @@
750 759 position: relative;
751 760 }
752 761
753 762 .font-library__font-card .font-library__font-card__name {
754 - font-weight: bold;
763 + font-weight: 700;
755 764 }
756 765
757 766 .font-library__font-card .font-library__font-card__count {
758 - color: #757575;
767 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
759 768 }
760 769
761 770 .font-library__font-card .font-library__font-variant_demo-image {
762 771 display: block;
@@ -763,8 +772,25 @@
763 772 height: 24px;
764 773 width: auto;
765 774 }
766 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 +
767 793 .font-library__font-card .font-library__font-variant_demo-text {
768 794 white-space: nowrap;
769 795 flex-shrink: 0;
770 796 }
@@ -776,9 +802,9 @@
776 802 }
777 803 .font-library-modal__tablist-container {
778 804 position: sticky;
779 805 top: 0;
780 - border-bottom: 1px solid #ddd;
806 + border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
781 807 background: #fff;
782 808 z-index: 1;
783 809 }
784 810
@@ -799,9 +825,9 @@
799 825 width: 80%;
800 826 }
801 827
802 828 .font-library__local-fonts .font-library__upload-area__text {
803 - color: #757575;
829 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
804 830 }
805 831
806 832 .font-library__google-fonts-confirm {
807 833 display: flex;
@@ -836,113 +862,22 @@
836 862 .font-library__select-all .components-checkbox-control__label {
837 863 padding-left: 16px;
838 864 }
839 865
840 -.global-styles-ui-pagination .components-button.is-tertiary {
841 - width: 32px;
842 - height: 32px;
843 - justify-content: center;
844 -}
845 -
846 -.global-styles-ui-screen-revisions__revisions-list {
847 - list-style: none;
848 - margin: 0 16px 16px 16px;
849 - flex-grow: 1;
850 -}
851 -
852 -.global-styles-ui-screen-revisions__revisions-list li {
853 - margin-bottom: 0;
854 -}
855 -
856 -.global-styles-ui-screen-revisions__revision-item {
857 - position: relative;
858 - cursor: var(--wpds-cursor-control, pointer);
866 +.global-styles-ui-screen-revisions {
859 867 display: flex;
860 868 flex-direction: column;
869 + flex-grow: 1;
870 + min-height: 0;
861 871 }
862 872
863 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
864 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
865 - outline: 2px solid transparent;
873 +.global-styles-ui-screen-revisions__actions {
874 + margin-inline-start: auto;
866 875 }
867 876
868 -.global-styles-ui-screen-revisions__revision-item:hover {
869 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
870 -}
871 -
872 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
873 - color: var(--wp-admin-theme-color);
874 -}
875 -
876 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
877 - position: absolute;
878 - content: "\a";
879 - display: block;
880 -}
881 -
882 -.global-styles-ui-screen-revisions__revision-item::before {
883 - background: #ddd;
884 - border-radius: 50%;
885 - height: 8px;
886 - width: 8px;
887 - top: 18px;
888 - left: 17px;
889 - transform: translate(-50%, -50%);
890 - z-index: 1;
891 - border: 4px solid transparent;
892 -}
893 -
894 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
895 - border-radius: 2px;
896 - outline: 3px solid transparent;
897 - outline-offset: -2px;
898 - color: var(--wp-admin-theme-color);
899 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
900 -}
901 -
902 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
903 - color: var(--wp-admin-theme-color);
904 -}
905 -
906 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
907 - background: var(--wp-admin-theme-color);
908 -}
909 -
910 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
911 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
912 - color: #1e1e1e;
913 -}
914 -
915 -.global-styles-ui-screen-revisions__revision-item::after {
916 - height: 100%;
917 - left: 16px;
918 - top: 0;
919 - width: 0;
920 - border: 0.5px solid #ddd;
921 -}
922 -
923 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
924 - top: 18px;
925 -}
926 -
927 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
928 - height: 18px;
929 -}
930 -
931 -.global-styles-ui-screen-revisions__revision-item-wrapper {
932 - display: block;
933 - padding: 12px 12px 4px 40px;
934 -}
935 -
936 -.global-styles-ui-screen-revisions__apply-button.is-primary,
937 -.global-styles-ui-screen-revisions__active-badge {
938 - align-self: flex-start;
939 - margin: 0 12px 12px 40px;
940 -}
941 -
942 -.global-styles-ui-screen-revisions__changes,
943 -.global-styles-ui-screen-revisions__meta {
944 - color: #757575;
877 +.global-styles-ui-screen-revisions__date {
878 + text-transform: uppercase;
879 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
945 880 font-size: 12px;
946 881 }
947 882
948 883 .global-styles-ui-screen-revisions__description {
@@ -951,11 +886,11 @@
951 886 align-items: flex-start;
952 887 gap: 8px;
953 888 }
954 889
955 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
956 - text-transform: uppercase;
957 - 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;
958 893 font-size: 12px;
959 894 }
960 895
961 896 .global-styles-ui-screen-revisions__meta {
@@ -961,11 +896,10 @@
961 896 .global-styles-ui-screen-revisions__meta {
962 897 display: flex;
963 898 justify-content: start;
964 899 width: 100%;
965 - align-items: flex-start;
900 + align-items: center;
966 901 text-align: left;
967 - margin-bottom: 4px;
968 902 }
969 903
970 904 .global-styles-ui-screen-revisions__meta img {
971 905 width: 16px;
@@ -973,16 +907,12 @@
973 907 border-radius: 100%;
974 908 margin-right: 8px;
975 909 }
976 910
977 -.global-styles-ui-screen-revisions__loading {
978 - margin: 24px auto !important;
979 -}
980 -
981 911 .global-styles-ui-screen-revisions__changes {
982 912 text-align: left;
983 913 line-height: 1.4;
984 - margin-left: 12px;
914 + margin: 0 0 0 12px;
985 915 list-style: disc;
986 916 }
987 917
988 918 .global-styles-ui-screen-revisions__changes li {
@@ -988,47 +918,8 @@
988 918 .global-styles-ui-screen-revisions__changes li {
989 919 margin-bottom: 4px;
990 920 }
991 921
992 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
993 - justify-content: space-between;
994 - gap: 2px;
995 -}
996 -
997 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
998 - position: absolute;
999 - left: -1000px;
1000 - height: 1px;
1001 - margin: -1px;
1002 - overflow: hidden;
1003 -}
1004 -
1005 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
1006 - font-size: 12px;
1007 - will-change: opacity;
1008 -}
1009 -
1010 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
1011 - color: #1e1e1e;
1012 -}
1013 -
1014 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
1015 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
1016 - color: #949494;
1017 -}
1018 -
1019 -.global-styles-ui-screen-revisions__footer {
1020 - height: 56px;
1021 - z-index: 1;
1022 - position: sticky;
1023 - min-width: 100%;
1024 - bottom: 0;
1025 - background: #fff;
1026 - padding: 12px;
1027 - border-top: 1px solid #ddd;
1028 - box-sizing: border-box;
1029 -}
1030 -
1031 922 .global-styles-ui-variations_item {
1032 923 box-sizing: border-box;
1033 924 cursor: var(--wpds-cursor-control, pointer);
1034 925 }
@@ -1109,13 +1000,34 @@
1109 1000 justify-content: center;
1110 1001 border-radius: 2px;
1111 1002 }
1112 1003
1004 +.global-styles-ui-block-types-filter {
1005 + margin-bottom: 12px;
1006 + padding: 0 16px;
1007 +}
1008 +
1113 1009 .global-styles-ui-block-types-search {
1114 - margin-bottom: 10px;
1115 - padding: 0 16px;
1010 + flex-grow: 1;
1116 1011 }
1117 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 +
1118 1030 .global-styles-ui-screen-typography__font-variants-count {
1119 1031 color: #757575;
1120 1032 }
1121 1033
@@ -1157,10 +1069,20 @@
1157 1069
1158 1070 .global-styles-ui__color-indicator-wrapper {
1159 1071 height: 24px;
1160 1072 flex-shrink: 0;
1073 + display: flex;
1074 + align-items: center;
1161 1075 }
1162 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 +
1163 1085 .global-styles-ui__shadows-panel__options-container,
1164 1086 .global-styles-ui__typography-panel__options-container {
1165 1087 height: 24px;
1166 1088 }
@@ -1172,9 +1094,10 @@
1172 1094 border-radius: 2px;
1173 1095 overflow: hidden;
1174 1096 }
1175 1097
1176 -.global-styles-ui__shadow-preview-panel {
1098 +.global-styles-ui__shadow-preview-panel,
1099 +.global-styles-ui__text-shadow-preview-panel {
1177 1100 height: 144px;
1178 1101 border: #ddd 1px solid;
1179 1102 border-radius: 2px;
1180 1103 overflow: auto;
@@ -1184,9 +1107,9 @@
1184 1107 /*rtl:end:ignore*/
1185 1108 background-size: 16px 16px;
1186 1109 }
1187 1110
1188 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
1111 +.global-styles-ui__shadow-preview-block {
1189 1112 border: #ddd 1px solid;
1190 1113 border-radius: 2px;
1191 1114 background-color: #fff;
1192 1115 width: 60%;
@@ -1192,22 +1115,44 @@
1192 1115 width: 60%;
1193 1116 height: 60px;
1194 1117 }
1195 1118
1196 -.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 {
1197 1139 width: 280px;
1198 1140 }
1199 1141
1200 -.global-styles-ui__shadow-editor-panel {
1142 +.global-styles-ui__shadow-editor-panel,
1143 +.global-styles-ui__text-shadow-editor-panel {
1201 1144 margin-bottom: 4px;
1202 1145 }
1203 1146
1204 -.global-styles-ui__shadow-editor__dropdown {
1147 +.global-styles-ui__shadow-editor__dropdown,
1148 +.global-styles-ui__text-shadow-editor__dropdown {
1205 1149 width: 100%;
1206 1150 position: relative;
1207 1151 }
1208 1152
1209 -.global-styles-ui__shadow-editor__dropdown-toggle {
1153 +.global-styles-ui__shadow-editor__dropdown-toggle,
1154 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
1210 1155 width: 100%;
1211 1156 height: auto;
1212 1157 padding-top: 8px;
1213 1158 padding-bottom: 8px;
@@ -1214,14 +1159,16 @@
1214 1159 text-align: left;
1215 1160 border-radius: inherit;
1216 1161 }
1217 1162
1218 -.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 {
1219 1165 background: #f0f0f0;
1220 1166 color: var(--wp-admin-theme-color);
1221 1167 }
1222 1168
1223 -.global-styles-ui__shadow-editor__remove-button {
1169 +.global-styles-ui__shadow-editor__remove-button,
1170 +.global-styles-ui__text-shadow-editor__remove-button {
1224 1171 position: absolute;
1225 1172 right: 8px;
1226 1173 top: 8px;
1227 1174 opacity: 0;
@@ -1226,18 +1173,19 @@
1226 1173 top: 8px;
1227 1174 opacity: 0;
1228 1175 }
1229 1176
1230 -.global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
1231 - border: none;
1232 -}
1233 -
1234 -.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 {
1235 1182 opacity: 1;
1236 1183 }
1237 1184
1238 1185 @media (hover: none) {
1239 - .global-styles-ui__shadow-editor__remove-button {
1186 + .global-styles-ui__shadow-editor__remove-button,
1187 + .global-styles-ui__text-shadow-editor__remove-button {
1240 1188 opacity: 1;
1241 1189 }
1242 1190 }
1243 1191 .global-styles-ui-screen-css {
@@ -1321,9 +1269,10 @@
1321 1269 clip-path: border-box;
1322 1270 }
1323 1271
1324 1272 .global-styles-ui-color-palette-panel,
1325 -.global-styles-ui-gradient-palette-panel {
1273 +.global-styles-ui-gradient-palette-panel,
1274 +.global-styles-ui-duotone-palette-panel {
1326 1275 padding: 16px;
1327 1276 }
1328 1277
1329 1278 /**
@@ -1451,8 +1400,16 @@
1451 1400 .dataviews-filters__container {
1452 1401 transition: padding ease-out 0.1s;
1453 1402 }
1454 1403 }
1404 +.dataviews__search {
1405 + flex-grow: 1;
1406 +}
1407 +
1408 +.dataviews__search .dataviews-search {
1409 + flex-basis: 210px;
1410 +}
1411 +
1455 1412 .dataviews-no-results,
1456 1413 .dataviews-loading {
1457 1414 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1458 1415 flex-grow: 1;
@@ -1647,10 +1604,10 @@
1647 1604 }
1648 1605
1649 1606 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
1650 1607 width: 100%;
1608 + min-width: 0;
1651 1609 white-space: nowrap;
1652 - overflow: hidden;
1653 1610 }
1654 1611
1655 1612 .dataviews-filters__summary-chip-container {
1656 1613 position: relative;
@@ -1722,9 +1679,9 @@
1722 1679 cursor: var(--wpds-cursor-control, pointer);
1723 1680 }
1724 1681
1725 1682 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
1726 - fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1683 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1727 1684 }
1728 1685
1729 1686 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
1730 1687 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
@@ -1730,13 +1687,13 @@
1730 1687 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1731 1688 }
1732 1689
1733 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 {
1734 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1691 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1735 1692 }
1736 1693
1737 1694 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
1738 - 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));
1739 1696 }
1740 1697
1741 1698 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
1742 1699 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
@@ -1798,10 +1755,11 @@
1798 1755 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1799 1756 }
1800 1757
1801 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));
1802 1761 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1803 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
1804 1762 }
1805 1763
1806 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 {
1807 1765 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
@@ -1915,9 +1873,9 @@
1915 1873 }
1916 1874 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1917 1875 --checkbox-size: 24px;
1918 1876 flex-shrink: 0;
1919 - border: 1px solid #1e1e1e;
1877 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1920 1878 margin-right: 12px;
1921 1879 transition: none;
1922 1880 border-radius: 2px;
1923 1881 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1925,18 +1883,12 @@
1925 1883 /* Fonts smaller than 16px causes mobile safari to zoom. */
1926 1884 font-size: 16px;
1927 1885 /* Override core line-height. To be reviewed. */
1928 1886 line-height: normal;
1929 - box-shadow: 0 0 0 transparent;
1930 - border-radius: 2px;
1931 - 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);
1932 1889 }
1933 1890
1934 -@media not (prefers-reduced-motion) {
1935 - .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1936 - transition: box-shadow 0.1s linear;
1937 - }
1938 -}
1939 1891 @media (min-width: 600px) {
1940 1892 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1941 1893 font-size: 13px;
1942 1894 /* Override core line-height. To be reviewed. */
@@ -1942,20 +1894,25 @@
1942 1894 /* Override core line-height. To be reviewed. */
1943 1895 line-height: normal;
1944 1896 }
1945 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 +
1946 1902 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
1947 - border-color: var(--wp-admin-theme-color);
1948 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
1949 - 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;
1950 1907 }
1951 1908
1952 -.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 {
1953 1910 color: rgba(30, 30, 30, 0.62);
1954 1911 }
1955 1912
1956 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
1957 - 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);
1958 1915 }
1959 1916
1960 1917 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
1961 1918 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
@@ -1988,9 +1945,9 @@
1988 1945 display: inline-block;
1989 1946 vertical-align: middle;
1990 1947 width: 16px;
1991 1948 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
1992 - font: normal 30px/1 dashicons;
1949 + font: 400 30px/1 dashicons;
1993 1950 speak: none;
1994 1951 -webkit-font-smoothing: antialiased;
1995 1952 -moz-osx-font-smoothing: grayscale;
1996 1953 }
@@ -2001,17 +1958,23 @@
2001 1958 font-size: 21px;
2002 1959 }
2003 1960 }
2004 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 {
2005 - background: #f0f0f0;
2006 - 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);
2007 1965 cursor: default;
2008 1966 opacity: 1;
2009 1967 }
2010 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 +
2011 1973 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2012 1974 position: relative;
2013 - 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));
2014 1977 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2015 1978 margin: 0;
2016 1979 padding: 0;
2017 1980 width: var(--checkbox-size);
@@ -2034,9 +1997,9 @@
2034 1997 }
2035 1998
2036 1999 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2037 2000 --checkmark-size: var(--checkbox-size);
2038 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2001 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2039 2002 position: absolute;
2040 2003 left: 50%;
2041 2004 top: 50%;
2042 2005 transform: translate(-50%, -50%);
@@ -2060,18 +2023,12 @@
2060 2023 /* Fonts smaller than 16px causes mobile safari to zoom. */
2061 2024 font-size: 16px;
2062 2025 /* Override core line-height. To be reviewed. */
2063 2026 line-height: normal;
2064 - box-shadow: 0 0 0 transparent;
2065 - border-radius: 2px;
2066 - 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);
2067 2029 }
2068 2030
2069 -@media not (prefers-reduced-motion) {
2070 - .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2071 - transition: box-shadow 0.1s linear;
2072 - }
2073 -}
2074 2031 @media (min-width: 600px) {
2075 2032 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2076 2033 font-size: 13px;
2077 2034 /* Override core line-height. To be reviewed. */
@@ -2077,16 +2034,17 @@
2077 2034 /* Override core line-height. To be reviewed. */
2078 2035 line-height: normal;
2079 2036 }
2080 2037 }
2081 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2082 - border-color: var(--wp-admin-theme-color);
2083 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2084 - 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);
2085 2040 }
2086 2041
2087 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2088 - 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;
2089 2047 }
2090 2048
2091 2049 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2092 2050 color: rgba(30, 30, 30, 0.62);
@@ -2109,15 +2067,10 @@
2109 2067 }
2110 2068 }
2111 2069 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2112 2070 background: var(--wpds-color-background-surface-neutral-strong, #fff);
2113 - 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));
2114 2071 }
2115 2072
2116 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2117 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2118 -}
2119 -
2120 2073 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2121 2074 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2122 2075 }
2123 2076
@@ -2162,13 +2115,8 @@
2162 2115 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2163 2116 box-sizing: border-box;
2164 2117 }
2165 2118
2166 -.dataviews-search {
2167 - width: -moz-fit-content;
2168 - width: fit-content;
2169 -}
2170 -
2171 2119 .dataviews-filters__user-input-widget {
2172 2120 padding: var(--wpds-dimension-padding-lg, 16px);
2173 2121 }
2174 2122
@@ -2445,9 +2393,8 @@
2445 2393 }
2446 2394
2447 2395 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
2448 2396 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
2449 - width: -moz-fit-content;
2450 2397 width: fit-content;
2451 2398 }
2452 2399
2453 2400 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
@@ -2467,9 +2414,9 @@
2467 2414
2468 2415 .dataviews-view-grid .dataviews-view-grid__media,
2469 2416 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
2470 2417 width: 100%;
2471 - aspect-ratio: 1/1;
2418 + aspect-ratio: var(--wp-dataviews-media-aspect-ratio, 1/1);
2472 2419 background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2473 2420 border-radius: var(--wpds-border-radius-md, 4px);
2474 2421 overflow: hidden;
2475 2422 position: relative;
@@ -2481,9 +2428,8 @@
2481 2428 }
2482 2429
2483 2430 .dataviews-view-grid .dataviews-view-grid__media img,
2484 2431 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
2485 - -o-object-fit: cover;
2486 2432 object-fit: cover;
2487 2433 width: 100%;
2488 2434 height: 100%;
2489 2435 }
@@ -2510,8 +2456,18 @@
2510 2456 box-shadow: none;
2511 2457 background: var(--wpds-color-background-surface-neutral, #fcfcfc);
2512 2458 }
2513 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 +
2514 2470 .dataviews-view-grid .dataviews-view-grid__fields,
2515 2471 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
2516 2472 position: relative;
2517 2473 font-size: 12px;
@@ -2672,9 +2628,8 @@
2672 2628
2673 2629 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
2674 2630 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
2675 2631 display: flex;
2676 - width: -moz-max-content;
2677 2632 width: max-content;
2678 2633 flex: 0 0 auto;
2679 2634 gap: var(--wpds-dimension-gap-xs, 4px);
2680 2635 white-space: nowrap;
@@ -2727,10 +2682,9 @@
2727 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,
2728 2683 .dataviews-view-list div[role=article]:not(.is-selected):hover,
2729 2684 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
2730 2685 .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
2731 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2732 - 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);
2733 2687 }
2734 2688
2735 2689 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
2736 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,
@@ -2741,9 +2695,9 @@
2741 2695 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
2742 2696 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
2743 2697 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
2744 2698 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
2745 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2699 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2746 2700 }
2747 2701
2748 2702 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
2749 2703 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
@@ -2749,9 +2703,9 @@
2749 2703 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
2750 2704 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
2751 2705 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
2752 2706 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2753 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2707 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2754 2708 }
2755 2709
2756 2710 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2757 2711 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
@@ -2760,9 +2714,9 @@
2760 2714 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2761 2715 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
2762 2716 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
2763 2717 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
2764 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2718 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2765 2719 }
2766 2720
2767 2721 .dataviews-view-list .dataviews-view-list__item {
2768 2722 position: absolute;
@@ -2768,10 +2722,8 @@
2768 2722 position: absolute;
2769 2723 z-index: 1;
2770 2724 inset: 0;
2771 2725 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
2772 - -webkit-appearance: none;
2773 - -moz-appearance: none;
2774 2726 appearance: none;
2775 2727 border: none;
2776 2728 background: none;
2777 2729 padding: 0;
@@ -2814,9 +2766,8 @@
2814 2766
2815 2767 .dataviews-view-list .dataviews-view-list__media-wrapper img {
2816 2768 width: 100%;
2817 2769 height: 100%;
2818 - -o-object-fit: cover;
2819 2770 object-fit: cover;
2820 2771 }
2821 2772
2822 2773 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -2836,9 +2787,9 @@
2836 2787 min-width: 0;
2837 2788 }
2838 2789
2839 2790 .dataviews-view-list .dataviews-view-list__field {
2840 - color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
2791 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2841 2792 }
2842 2793
2843 2794 .dataviews-view-list .dataviews-view-list__fields {
2844 2795 display: flex;
@@ -2955,9 +2906,9 @@
2955 2906
2956 2907 .dataviews-view-table th {
2957 2908 text-align: left;
2958 2909 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2959 - font-weight: normal;
2910 + font-weight: 400;
2960 2911 font-size: var(--wpds-typography-font-size-md, 13px);
2961 2912 }
2962 2913
2963 2914 .dataviews-view-table td,
@@ -2985,9 +2936,9 @@
2985 2936 top: 0;
2986 2937 bottom: 0;
2987 2938 left: 0;
2988 2939 width: 1px;
2989 - background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2940 + background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
2990 2941 }
2991 2942
2992 2943 .dataviews-view-table td.dataviews-view-table__checkbox-column,
2993 2944 .dataviews-view-table th.dataviews-view-table__checkbox-column {
@@ -3199,9 +3150,8 @@
3199 3150
3200 3151 .dataviews-column-primary__media img {
3201 3152 width: var(--wpds-dimension-size-md, 32px);
3202 3153 height: var(--wpds-dimension-size-md, 32px);
3203 - -o-object-fit: cover;
3204 3154 object-fit: cover;
3205 3155 }
3206 3156
3207 3157 .dataviews-column-primary__media::after {
@@ -3214,8 +3164,19 @@
3214 3164 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
3215 3165 border-radius: var(--wpds-border-radius-md, 4px);
3216 3166 }
3217 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 +
3218 3179 .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
3219 3180 .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
3220 3181 min-width: 15ch;
3221 3182 max-width: 80ch;
@@ -3269,9 +3230,8 @@
3269 3230 text-align: start;
3270 3231 }
3271 3232
3272 3233 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
3273 - width: -moz-fit-content;
3274 3234 width: fit-content;
3275 3235 }
3276 3236
3277 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 {
@@ -3307,13 +3267,13 @@
3307 3267 aspect-ratio: 1/1;
3308 3268 min-height: 0;
3309 3269 background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
3310 3270 border-radius: var(--wpds-border-radius-md, 4px);
3271 + overflow: hidden;
3311 3272 position: relative;
3312 3273 }
3313 3274
3314 3275 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
3315 - -o-object-fit: cover;
3316 3276 object-fit: cover;
3317 3277 width: 100%;
3318 3278 height: 100%;
3319 3279 }
@@ -3329,8 +3289,16 @@
3329 3289 border-radius: var(--wpds-border-radius-md, 4px);
3330 3290 pointer-events: none;
3331 3291 }
3332 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 +
3333 3301 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
3334 3302 position: relative;
3335 3303 font-size: 12px;
3336 3304 line-height: 16px;
@@ -3492,9 +3460,8 @@
3492 3460 }
3493 3461
3494 3462 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
3495 3463 display: flex;
3496 - width: -moz-max-content;
3497 3464 width: max-content;
3498 3465 flex: 0 0 auto;
3499 3466 }
3500 3467
@@ -3626,9 +3593,8 @@
3626 3593 display: block;
3627 3594 width: 100%;
3628 3595 height: 100%;
3629 3596 margin: 0 auto;
3630 - -o-object-fit: cover;
3631 3597 object-fit: cover;
3632 3598 border-radius: 50%;
3633 3599 box-sizing: border-box;
3634 3600 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -3843,9 +3809,8 @@
3843 3809 display: block;
3844 3810 width: 100%;
3845 3811 height: 100%;
3846 3812 margin: 0 auto;
3847 - -o-object-fit: cover;
3848 3813 object-fit: cover;
3849 3814 border-radius: 50%;
3850 3815 box-sizing: border-box;
3851 3816 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -3867,13 +3832,8 @@
3867 3832 .dataviews-picker-footer__actions {
3868 3833 align-self: flex-end;
3869 3834 }
3870 3835
3871 -.dataviews-controls__richtext [data-rich-text-placeholder]::after {
3872 - content: attr(data-rich-text-placeholder);
3873 - color: color-mix(in srgb, currentColor, transparent 38%);
3874 -}
3875 -
3876 3836 .dataviews-controls__datetime {
3877 3837 border: none;
3878 3838 padding: 0;
3879 3839 }
@@ -3904,8 +3864,29 @@
3904 3864 .dataviews-controls__date-preset:active {
3905 3865 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
3906 3866 }
3907 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 +
3908 3889 .dataforms-layouts-panel__field-trigger {
3909 3890 position: relative;
3910 3891 color: inherit;
3911 3892 display: flex;
@@ -3968,8 +3949,14 @@
3968 3949 opacity: 0;
3969 3950 border-radius: var(--wpds-border-radius-xs, 1px);
3970 3951 }
3971 3952
3953 +.dataforms-layouts-panel__field-trigger-icon::after {
3954 + content: "";
3955 + position: absolute;
3956 + inset: 0;
3957 +}
3958 +
3972 3959 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
3973 3960 opacity: 1;
3974 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));
3975 3962 }
@@ -4003,11 +3990,9 @@
4003 3990 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
4004 3991 }
4005 3992
4006 3993 .dataforms-layouts-panel__field-label-error-content {
4007 - position: relative;
4008 - z-index: 1;
4009 - cursor: help;
3994 + pointer-events: none;
4010 3995 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
4011 3996 display: inline-flex;
4012 3997 flex-direction: row;
4013 3998 align-items: center;
@@ -4023,12 +4008,17 @@
4023 4008 align-items: center;
4024 4009 overflow: clip;
4025 4010 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
4026 4011 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4027 - word-break: break-word;
4012 + word-break: normal;
4013 + overflow-wrap: anywhere;
4028 4014 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4029 4015 }
4030 4016
4017 +.dataforms-layouts-panel__field-control:has(a, button) {
4018 + z-index: 1;
4019 +}
4020 +
4031 4021 .dataforms-layouts-panel__field-control > * {
4032 4022 min-width: 0;
4033 4023 }
4034 4024
@@ -4061,12 +4051,8 @@
4061 4051 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
4062 4052 z-index: 159990;
4063 4053 }
4064 4054
4065 -.dataforms-layouts-panel__summary-button:empty {
4066 - min-width: 160px;
4067 -}
4068 -
4069 4055 .dataforms-layouts-regular__field {
4070 4056 width: 100%;
4071 4057 min-height: var(--wpds-dimension-size-md, 32px);
4072 4058 justify-content: flex-start !important;
@@ -4284,9 +4270,9 @@
4284 4270 padding: 12px;
4285 4271 display: grid;
4286 4272 align-items: center;
4287 4273 grid-template-columns: min-content 1fr min-content;
4288 - grid-gap: 4px 8px;
4274 + gap: 4px 8px;
4289 4275 color: #1e1e1e;
4290 4276 }
4291 4277
4292 4278 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -4569,11 +4555,9 @@
4569 4555
4570 4556 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
4571 4557 width: 100%;
4572 4558 height: 100%;
4573 - -o-object-fit: cover;
4574 4559 object-fit: cover;
4575 - -o-object-position: 50% 50%;
4576 4560 object-position: 50% 50%;
4577 4561 }
4578 4562
4579 4563 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
@@ -4633,9 +4617,8 @@
4633 4617
4634 4618 .fields-controls__author-avatar img {
4635 4619 width: 16px;
4636 4620 height: 16px;
4637 - -o-object-fit: cover;
4638 4621 object-fit: cover;
4639 4622 opacity: 0;
4640 4623 border-radius: 100%;
4641 4624 }
@@ -4671,18 +4654,15 @@
4671 4654 padding: 0;
4672 4655 margin: 0;
4673 4656 }
4674 4657
4675 -.fields-controls__slug .fields-controls__slug-external-icon {
4676 - margin-left: 5ch;
4677 -}
4678 -
4679 4658 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
4680 4659 padding-inline-start: 0 !important;
4681 4660 }
4682 4661
4683 4662 .fields-controls__slug .fields-controls__slug-help-link {
4684 - word-break: break-word;
4663 + word-break: normal;
4664 + overflow-wrap: anywhere;
4685 4665 }
4686 4666
4687 4667 .fields-controls__slug .fields-controls__slug-help {
4688 4668 display: flex;
@@ -4810,9 +4790,8 @@
4810 4790
4811 4791 .media-editor-preview--image img {
4812 4792 max-width: 100%;
4813 4793 max-height: 100%;
4814 - -o-object-fit: contain;
4815 4794 object-fit: contain;
4816 4795 width: auto;
4817 4796 height: auto;
4818 4797 opacity: 0;
@@ -4834,9 +4813,8 @@
4834 4813 }
4835 4814 .media-editor-preview--video video {
4836 4815 max-width: 100%;
4837 4816 max-height: 100%;
4838 - -o-object-fit: contain;
4839 4817 object-fit: contain;
4840 4818 width: auto;
4841 4819 height: auto;
4842 4820 }
@@ -4882,8 +4860,9 @@
4882 4860 word-break: break-all;
4883 4861 margin-top: 8px;
4884 4862 }
4885 4863
4864 +/*!rtl:begin:ignore*/
4886 4865 .wp-media-editor-image-editor {
4887 4866 position: relative;
4888 4867 overflow: hidden;
4889 4868 width: 100%;
@@ -4889,9 +4868,8 @@
4889 4868 width: 100%;
4890 4869 height: 100%;
4891 4870 touch-action: none;
4892 4871 -webkit-user-select: none;
4893 - -moz-user-select: none;
4894 4872 user-select: none;
4895 4873 cursor: grab;
4896 4874 }
4897 4875
@@ -5009,10 +4987,8 @@
5009 4987 box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5010 4988 }
5011 4989
5012 4990 .wp-media-editor-image-editor__handle {
5013 - -webkit-appearance: none;
5014 - -moz-appearance: none;
5015 4991 appearance: none;
5016 4992 margin: 0;
5017 4993 padding: 0;
5018 4994 font: inherit;
@@ -5103,8 +5079,9 @@
5103 5079 right: -6px;
5104 5080 cursor: nwse-resize;
5105 5081 }
5106 5082
5083 +/*!rtl:end:ignore*/
5107 5084 /**
5108 5085 * Breakpoints & Media Queries
5109 5086 */
5110 5087 /**
@@ -5168,48 +5145,53 @@
5168 5145 align-items: center;
5169 5146 justify-content: center;
5170 5147 }
5171 5148
5172 -.media-editor .interface-interface-skeleton {
5173 - position: relative;
5174 - top: auto;
5175 - right: auto;
5176 - bottom: auto;
5177 - left: auto;
5178 - height: 100%;
5179 - max-height: none;
5149 +.media-editor .media-editor__body {
5150 + container-type: inline-size;
5151 + container-name: media-editor-body;
5152 + display: flex;
5180 5153 flex: 1;
5181 - flex-direction: column;
5154 + min-height: 0;
5182 5155 }
5183 5156
5184 -.media-editor-modal .media-editor .interface-interface-skeleton.interface-interface-skeleton {
5185 - top: auto;
5186 -}
5187 -
5188 -.media-editor .interface-interface-skeleton__editor {
5189 - min-width: 0;
5190 - flex: 1;
5191 -}
5192 -
5193 5157 .media-editor .media-editor__content {
5194 5158 display: flex;
5195 5159 flex: 1;
5196 5160 flex-direction: column;
5161 + min-width: 0;
5197 5162 min-height: 0;
5198 - margin: 0 24px;
5199 - border-radius: 8px;
5200 - overflow: hidden;
5163 + margin: 24px 24px 8px 24px;
5201 5164 }
5202 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 +}
5203 5176 .media-editor .media-editor__canvas-toolbar {
5204 5177 display: flex;
5205 - 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;
5206 5186 justify-content: center;
5187 + align-self: stretch;
5207 5188 background: #e0e0e0;
5189 + border-radius: 0 0 8px 8px;
5208 5190 padding: 8px 16px;
5209 5191 }
5210 5192
5211 -.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation {
5193 +.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation .rotation-ruler {
5212 5194 flex: 0 1 360px;
5213 5195 min-width: 0;
5214 5196 }
5215 5197
@@ -5217,8 +5199,9 @@
5217 5199 display: flex;
5218 5200 align-items: center;
5219 5201 justify-content: center;
5220 5202 background: #e0e0e0;
5203 + border-radius: 8px;
5221 5204 overflow: auto;
5222 5205 flex: 1;
5223 5206 min-height: 0;
5224 5207 }
@@ -5230,88 +5213,66 @@
5230 5213 .media-editor .media-editor__canvas-area img,
5231 5214 .media-editor .media-editor__canvas-area video {
5232 5215 max-width: 100%;
5233 5216 max-height: 100%;
5234 - -o-object-fit: contain;
5235 5217 object-fit: contain;
5236 5218 }
5237 5219
5238 5220 .media-editor .media-editor__sidebar {
5239 - 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;
5240 5227 }
5241 5228
5242 -.media-editor .media-editor__sidebar *,
5243 -.media-editor .media-editor__sidebar *::before,
5244 -.media-editor .media-editor__sidebar *::after {
5245 - box-sizing: inherit;
5246 -}
5247 -
5248 5229 @media (min-width: 600px) {
5249 5230 .media-editor .media-editor__sidebar {
5250 - padding-left: 1px;
5231 + flex: none;
5232 + width: var(--wpds-dimension-surface-width-sm, 320px);
5251 5233 }
5252 5234 }
5253 -.media-editor .media-editor__sidebar-panel {
5254 - padding-bottom: 24px;
5235 +.media-editor .media-editor__tabs {
5236 + display: flex;
5237 + flex: 1;
5238 + flex-direction: column;
5239 + min-height: 0;
5255 5240 }
5256 5241
5257 -.media-editor .interface-interface-skeleton__sidebar {
5258 - border-top: 0;
5259 - box-shadow: none;
5260 - 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;
5261 5247 }
5262 5248
5263 5249 .media-editor .media-editor__panel {
5264 - padding: 16px;
5250 + flex: 1;
5251 + min-height: 0;
5252 + overflow-y: auto;
5253 + padding-block: 24px;
5254 + padding-inline: 24px;
5265 5255 }
5266 5256
5267 -@media (min-width: 600px) {
5268 - .media-editor .media-editor__panel {
5269 - padding: 24px 24px 0 0;
5270 - }
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;
5271 5260 }
5272 -.media-editor .components-panel__header.media-editor__sidebar-header {
5273 - padding-left: 0;
5274 - padding-right: 8px;
5275 - margin-right: 24px;
5276 - margin-right: 0;
5277 -}
5278 5261
5279 -@media (min-width: 600px) {
5280 - .media-editor .components-panel__header.media-editor__sidebar-header {
5281 - margin-right: 24px;
5282 - }
5262 +.media-editor .media-editor__body.has-panel-open .media-editor__content {
5263 + display: none;
5283 5264 }
5284 -.media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5285 - padding: 0;
5286 -}
5287 5265
5288 5266 @media (min-width: 600px) {
5289 - .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 {
5290 5268 display: flex;
5269 + margin: 0 0 0 24px;
5291 5270 }
5292 5271 }
5293 -@media (min-width: 600px) and (max-width: 781px) {
5294 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5295 - position: relative !important;
5296 - }
5297 - .media-editor .interface-complementary-area__fill,
5298 - .media-editor .interface-complementary-area {
5299 - width: 280px !important;
5300 - }
5301 -}
5302 -@media (max-width: 599px) {
5303 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5304 - width: 100%;
5305 - }
5306 - .media-editor .interface-complementary-area__fill,
5307 - .media-editor .interface-complementary-area {
5308 - width: 100% !important;
5309 - }
5310 -}
5311 5272 .media-editor__snackbar {
5312 5273 position: fixed;
5313 - bottom: 24px;
5274 + bottom: var(--wpds-dimension-size-md, 32px);
5314 5275 left: 0;
5315 5276 right: 0;
5316 5277 padding-inline: 16px;
5317 5278 box-sizing: border-box;
@@ -5345,44 +5306,20 @@
5345 5306
5346 5307 .media-editor-modal.components-modal__frame .media-editor-modal__footer {
5347 5308 flex-shrink: 0;
5348 5309 display: flex;
5349 - gap: 16px;
5350 - padding: 16px 32px 24px;
5351 - background: #fff;
5352 - z-index: 1000001;
5353 -}
5354 -
5355 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide {
5356 5310 flex-direction: row;
5357 5311 align-items: center;
5358 -}
5359 -
5360 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor__footer-actions {
5361 - margin-left: auto;
5362 -}
5363 -
5364 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow {
5365 - flex-direction: column;
5366 -}
5367 -
5368 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow > .media-editor-image-controls {
5369 - align-self: center;
5370 -}
5371 -
5372 -.media-editor-modal__footer-row {
5373 - display: flex;
5374 - flex-wrap: wrap;
5375 - align-items: center;
5376 5312 gap: 16px;
5313 + padding: 24px;
5314 + background: #fff;
5377 5315 }
5378 5316
5379 -.media-editor-modal__footer-row .media-editor-image-controls,
5380 -.media-editor-modal__footer-row .media-editor__footer-actions {
5317 +.media-editor-modal.components-modal__frame .media-editor-modal__footer .media-editor__save-actions {
5381 5318 margin-left: auto;
5382 5319 }
5383 5320
5384 -.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]) {
5385 5322 color: var(--wp-admin-theme-color);
5386 5323 }
5387 5324
5388 5325 .media-editor-modal {
@@ -5391,9 +5328,9 @@
5391 5328 }
5392 5329
5393 5330 .media-editor-modal__snackbar {
5394 5331 position: fixed;
5395 - bottom: 24px;
5332 + bottom: var(--wpds-dimension-size-md, 32px);
5396 5333 left: 0;
5397 5334 right: 0;
5398 5335 padding-inline: 16px;
5399 5336 box-sizing: border-box;
@@ -5555,12 +5492,13 @@
5555 5492 box-sizing: border-box;
5556 5493 color: #1e1e1e;
5557 5494 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5558 5495 -webkit-user-select: none;
5559 - -moz-user-select: none;
5560 5496 user-select: none;
5561 5497 touch-action: none;
5562 5498 cursor: ew-resize;
5499 + /*rtl:ignore*/
5500 + direction: ltr;
5563 5501 container-type: inline-size;
5564 5502 }
5565 5503
5566 5504 .rotation-ruler[data-disabled] {
@@ -5581,9 +5519,9 @@
5581 5519 height: 1px;
5582 5520 margin: -1px;
5583 5521 padding: 0;
5584 5522 border: 0;
5585 - clip: rect(0 0 0 0);
5523 + clip-path: inset(50%);
5586 5524 overflow: hidden;
5587 5525 white-space: nowrap;
5588 5526 }
5589 5527
@@ -5671,8 +5609,9 @@
5671 5609
5672 5610 .rotation-ruler__active-label-sign {
5673 5611 position: absolute;
5674 5612 top: 0;
5613 + /*rtl:ignore*/
5675 5614 right: 100%;
5676 5615 }
5677 5616
5678 5617 .rotation-ruler__active-label-unit {
@@ -5677,8 +5616,9 @@
5677 5616
5678 5617 .rotation-ruler__active-label-unit {
5679 5618 position: absolute;
5680 5619 top: 0;
5620 + /*rtl:ignore*/
5681 5621 left: 100%;
5682 5622 }
5683 5623
5684 5624 @container (max-width: 220px) {
@@ -5697,9 +5637,9 @@
5697 5637 }
5698 5638
5699 5639 .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
5700 5640 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
5701 - font: normal 20px/1 dashicons;
5641 + font: 400 20px/1 dashicons;
5702 5642 content: "\f110";
5703 5643 margin-right: 5px;
5704 5644 vertical-align: middle;
5705 5645 }
@@ -5734,9 +5674,10 @@
5734 5674
5735 5675 .interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) {
5736 5676 box-shadow: none;
5737 5677 }
5738 -.interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) .interface-complementary-area-header {
5678 +
5679 +.editor-collab-sidebar__header {
5739 5680 display: none;
5740 5681 }
5741 5682
5742 5683 .editor-collab-sidebar {
@@ -5748,8 +5689,9 @@
5748 5689 position: relative;
5749 5690 padding: 16px 16px 24px;
5750 5691 height: 100%;
5751 5692 overflow: hidden;
5693 + border-left: 1px solid color-mix(in srgb, currentColor 10%, transparent);
5752 5694 }
5753 5695
5754 5696 .editor-collab-sidebar-panel__thread,
5755 5697 .editor-collab-sidebar-panel__add-note {
@@ -5783,8 +5725,12 @@
5783 5725 max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 128px);
5784 5726 overflow-y: auto;
5785 5727 }
5786 5728
5729 +.editor-collab-sidebar-panel__user-info {
5730 + flex: 1;
5731 +}
5732 +
5787 5733 .editor-collab-sidebar-panel__user-name {
5788 5734 font-size: 12px;
5789 5735 font-weight: 400;
5790 5736 line-height: 16px;
@@ -5789,9 +5735,9 @@
5789 5735 font-weight: 400;
5790 5736 line-height: 16px;
5791 5737 text-align: left;
5792 5738 color: #757575;
5793 - text-transform: capitalize;
5739 + overflow-wrap: anywhere;
5794 5740 }
5795 5741
5796 5742 .editor-collab-sidebar-panel__user-time {
5797 5743 font-size: 12px;
@@ -5801,9 +5747,8 @@
5801 5747 color: #757575;
5802 5748 }
5803 5749
5804 5750 .editor-collab-sidebar-panel__show-more-button {
5805 - width: -moz-fit-content;
5806 5751 width: fit-content;
5807 5752 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
5808 5753 cursor: var(--wpds-cursor-control, pointer);
5809 5754 }
@@ -5810,8 +5755,11 @@
5810 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 {
5811 5756 color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
5812 5757 }
5813 5758
5759 +.editor-collab-sidebar-panel__note-content {
5760 + overflow-wrap: break-word;
5761 +}
5814 5762 .editor-collab-sidebar-panel__note-content p:last-child {
5815 5763 margin-bottom: 0;
5816 5764 }
5817 5765 .editor-collab-sidebar-panel__note-content.is-collapsed {
@@ -5868,9 +5816,9 @@
5868 5816 line-height: 20px;
5869 5817 max-height: 418px;
5870 5818 overflow-y: auto;
5871 5819 white-space: pre-wrap;
5872 - word-wrap: break-word;
5820 + overflow-wrap: break-word;
5873 5821 }
5874 5822 .editor-collab-sidebar-panel__note-form [role=textbox] code {
5875 5823 font-family: Menlo, Consolas, monaco, monospace;
5876 5824 font-size: 0.9em;
@@ -5950,9 +5898,8 @@
5950 5898 border-radius: var(--wpds-border-radius-sm, 2px);
5951 5899 background: var(--wpds-color-background-surface-brand, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 9%, white));
5952 5900 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
5953 5901 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5954 - white-space: nowrap;
5955 5902 }
5956 5903 @media (forced-colors: active) {
5957 5904 .wp-note-mention {
5958 5905 border: 1px solid;
@@ -5962,8 +5909,13 @@
5962 5909 .editor-collab-sidebar-panel__mention-suggestion .editor-autocompleters__user-avatar {
5963 5910 border-radius: 50%;
5964 5911 }
5965 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 +
5966 5918 .editor-avatar {
5967 5919 position: relative;
5968 5920 display: inline-flex;
5969 5921 align-items: center;
@@ -6008,10 +5960,9 @@
6008 5960 position: absolute;
6009 5961 inset: 0;
6010 5962 width: 100%;
6011 5963 height: 100%;
6012 - -o-object-fit: cover;
6013 - object-fit: cover;
5964 + object-fit: cover;
6014 5965 border-radius: inherit;
6015 5966 opacity: 0;
6016 5967 }
6017 5968 .has-src > .editor-avatar__image > .editor-avatar__img {
@@ -6050,19 +6001,16 @@
6050 6001
6051 6002 .editor-avatar.is-badge {
6052 6003 display: inline-grid;
6053 6004 grid-template-columns: min-content 0fr;
6054 - -moz-column-gap: 0;
6055 - column-gap: 0;
6005 + column-gap: 0;
6056 6006 padding-inline-end: 0;
6057 6007 background-color: var(--wp-admin-theme-color, #3858e9);
6058 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);
6059 - 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);
6060 6009 }
6061 6010 .editor-avatar.is-badge:hover {
6062 6011 grid-template-columns: min-content 1fr;
6063 - -moz-column-gap: 4px;
6064 - column-gap: 4px;
6012 + column-gap: 4px;
6065 6013 padding-inline-end: 8px;
6066 6014 transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
6067 6015 }
6068 6016 .editor-avatar.is-badge:hover .editor-avatar__name {
@@ -6252,43 +6200,24 @@
6252 6200 height: 32px;
6253 6201 background: #f0f0f0;
6254 6202 border-radius: 4px;
6255 6203 }
6256 -.editor-collaborators-presence:hover {
6204 +.editor-collaborators-presence:hover, .editor-collaborators-presence:has(.is-pressed) {
6257 6205 background-color: #e0e0e0;
6258 6206 }
6259 -.editor-collaborators-presence:has(.is-pressed) {
6260 - background-color: #e0e0e0;
6261 -}
6262 6207
6263 6208 .editor-header__center .editor-collaborators-presence {
6264 6209 margin-right: 8px;
6265 6210 }
6266 6211
6267 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
6268 - display: flex;
6269 - align-items: center;
6270 - cursor: var(--wpds-cursor-control, pointer);
6212 +.editor-collaborators-presence__button.editor-collaborators-presence__button {
6271 6213 position: relative;
6272 6214 padding: 4px;
6273 - border-radius: 4px;
6274 - height: 100%;
6275 - box-sizing: border-box;
6276 - color: #2f2f2f;
6277 - background: transparent;
6278 6215 }
6279 -.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 {
6280 6217 background: transparent;
6281 6218 color: #2f2f2f;
6282 6219 }
6283 -.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 {
6284 - background: transparent;
6285 - color: #2f2f2f;
6286 -}
6287 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active) {
6288 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #007cba);
6289 - outline: none;
6290 -}
6291 6220
6292 6221 .editor-collapsible-block-toolbar {
6293 6222 overflow: hidden;
6294 6223 display: flex;
@@ -6383,11 +6312,8 @@
6383 6312 }
6384 6313 .editor-document-bar:hover {
6385 6314 background-color: #e0e0e0;
6386 6315 }
6387 -.editor-document-bar .components-button {
6388 - border-radius: 4px;
6389 -}
6390 6316 @media not (prefers-reduced-motion) {
6391 6317 .editor-document-bar .components-button {
6392 6318 transition: background-color 0.1s ease-out;
6393 6319 }
@@ -6459,9 +6385,9 @@
6459 6385 display: none;
6460 6386 pointer-events: none;
6461 6387 }
6462 6388 .editor-document-bar__icon-layout.editor-document-bar__icon-layout svg {
6463 - fill: #949494;
6389 + color: #949494;
6464 6390 }
6465 6391 @media (min-width: 600px) {
6466 6392 .editor-document-bar__icon-layout.editor-document-bar__icon-layout {
6467 6393 display: flex;
@@ -6591,12 +6517,12 @@
6591 6517 .editor-document-tools .editor-document-tools__left > .components-button.has-icon.is-pressed,
6592 6518 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon.is-pressed {
6593 6519 background: #1e1e1e;
6594 6520 }
6595 -.editor-document-tools .editor-document-tools__left > .components-button.has-icon:focus:not(:disabled),
6596 -.editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon:focus:not(:disabled) {
6597 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff;
6598 - 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));
6599 6525 }
6600 6526 .editor-document-tools .editor-document-tools__left > .components-button.has-icon::before,
6601 6527 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon::before {
6602 6528 display: none;
@@ -6649,79 +6575,29 @@
6649 6575 top: 0;
6650 6576 right: 0;
6651 6577 }
6652 6578
6653 -.entities-saved-states__panel-header {
6654 - box-sizing: border-box;
6655 - background: #fff;
6656 - padding-left: 16px;
6657 - padding-right: 16px;
6658 - height: 64px;
6659 - border-bottom: 1px solid #ddd;
6579 +.editor-error-boundary {
6580 + font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
6581 + margin: auto;
6582 + width: 100%;
6583 + max-width: var(--wpds-dimension-surface-width-lg, 560px);
6584 + padding: var(--wpds-dimension-padding-xl, 20px);
6585 + margin-top: 64px;
6660 6586 }
6661 6587
6662 -.entities-saved-states__text-prompt {
6663 - padding: 16px;
6664 - padding-bottom: 4px;
6588 +.editor-error-boundary__report {
6589 + max-height: 420px;
6590 + overflow: auto;
6591 + overflow-anchor: none;
6665 6592 }
6666 -.entities-saved-states__text-prompt .entities-saved-states__text-prompt--header {
6667 - display: block;
6668 - margin-bottom: 12px;
6669 -}
6670 6593
6671 -.entities-saved-states__panel.is-inline .entities-saved-states__text-prompt {
6672 - padding: 0;
6594 +.editor-error-boundary__report-section {
6595 + margin: 0;
6596 + white-space: pre-wrap;
6597 + overflow-wrap: break-word;
6673 6598 }
6674 -.entities-saved-states__panel.is-inline .entities-saved-states__panel-body {
6675 - padding-left: 0;
6676 - padding-right: 0;
6677 - border: 0;
6678 -}
6679 -.entities-saved-states__panel.is-inline .entities-saved-states__panel-body > h2 {
6680 - margin-left: -16px;
6681 - margin-right: -16px;
6682 - margin-bottom: 0;
6683 -}
6684 -.entities-saved-states__panel.is-inline .entities-saved-states__panel-body > h2 button {
6685 - font-size: 11px;
6686 - text-transform: uppercase;
6687 -}
6688 -.entities-saved-states__panel.is-inline .entities-saved-states__text-prompt--header-wrapper {
6689 - display: none;
6690 -}
6691 -.entities-saved-states__panel.is-inline .entities-saved-states__text-prompt--changes-count {
6692 - margin-top: 0;
6693 - margin-bottom: 8px;
6694 -}
6695 -.entities-saved-states__panel.is-inline .entities-saved-states__panel-footer {
6696 - margin-top: 16px;
6697 -}
6698 6599
6699 -.entities-saved-states__change-control {
6700 - flex: 1;
6701 -}
6702 -
6703 -.entities-saved-states__changes {
6704 - font-size: 13px;
6705 - margin: 4px 16px 0 24px;
6706 - list-style: disc;
6707 -}
6708 -.entities-saved-states__changes li {
6709 - margin-bottom: 4px;
6710 -}
6711 -
6712 -.editor-error-boundary {
6713 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6714 - margin: auto;
6715 - max-width: 780px;
6716 - padding: 1em;
6717 - margin-top: 64px;
6718 - 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);
6719 - border: 1px solid #1e1e1e;
6720 - border-radius: 2px;
6721 - background-color: #fff;
6722 -}
6723 -
6724 6600 .editor-global-styles-header__description {
6725 6601 padding: 0 16px;
6726 6602 }
6727 6603
@@ -6737,8 +6613,27 @@
6737 6613 .editor-global-styles-sidebar__panel {
6738 6614 flex: 1;
6739 6615 }
6740 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 +
6741 6636 .editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
6742 6637 margin: 0;
6743 6638 }
6744 6639
@@ -6798,10 +6693,9 @@
6798 6693 }
6799 6694 .editor-welcome-guide__image > img {
6800 6695 display: block;
6801 6696 max-width: 100%;
6802 - -o-object-fit: cover;
6803 - object-fit: cover;
6697 + object-fit: cover;
6804 6698 }
6805 6699 .editor-welcome-guide__heading {
6806 6700 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6807 6701 font-size: 24px;
@@ -6818,9 +6712,9 @@
6818 6712 .editor-welcome-guide__text img {
6819 6713 vertical-align: bottom;
6820 6714 }
6821 6715 .editor-welcome-guide .components-button:hover svg {
6822 - fill: #fff;
6716 + color: #fff;
6823 6717 }
6824 6718
6825 6719 .editor-header {
6826 6720 box-sizing: border-box;
@@ -6834,16 +6728,16 @@
6834 6728 height: 64px;
6835 6729 background: #fff;
6836 6730 display: grid;
6837 6731 grid-auto-flow: row;
6838 - 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;
6839 6733 }
6840 6734 .editor-header:has(> .editor-header__center) {
6841 - grid-template: auto/32px min-content 1fr min-content 64px;
6735 + grid-template: auto/auto min-content 1fr min-content 64px;
6842 6736 }
6843 6737 @media (min-width: 782px) {
6844 6738 .editor-header:has(> .editor-header__center) {
6845 - 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;
6846 6740 }
6847 6741 }
6848 6742 @media (min-width: 480px) {
6849 6743 .editor-header {
@@ -6861,10 +6755,13 @@
6861 6755 }
6862 6756 }
6863 6757
6864 6758 .editor-header__back-button {
6865 - padding-left: 8px;
6759 + margin: 0 -8px 0 8px;
6866 6760 }
6761 +.show-icon-labels .editor-header__back-button {
6762 + margin-right: 0;
6763 +}
6867 6764
6868 6765 .editor-header__toolbar {
6869 6766 grid-column: 1/3;
6870 6767 }
@@ -7070,9 +6967,9 @@
7070 6967 }
7071 6968 .editor-editor-interface.is-distraction-free .editor-header > .edit-post-header__settings > .edit-post-header__post-preview-button {
7072 6969 visibility: hidden;
7073 6970 }
7074 -.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 {
7075 6972 display: none;
7076 6973 }
7077 6974 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within {
7078 6975 opacity: 1 !important;
@@ -7079,15 +6976,15 @@
7079 6976 }
7080 6977 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within div {
7081 6978 transform: translateX(0) translateZ(0) !important;
7082 6979 }
7083 -.editor-editor-interface.is-distraction-free .components-editor-notices__dismissible {
6980 +.editor-editor-interface.is-distraction-free .editor-notices__dismissible {
7084 6981 position: absolute;
7085 6982 z-index: 35;
7086 6983 }
7087 -
7088 -.components-popover.more-menu-dropdown__content {
7089 - 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;
7090 6987 }
7091 6988
7092 6989 .editor-inserter-sidebar {
7093 6990 box-sizing: border-box;
@@ -7217,9 +7114,9 @@
7217 7114 scrollbar-gutter: auto;
7218 7115 }
7219 7116
7220 7117 .editor-list-view-sidebar__list-view-panel-content {
7221 - padding: 4px;
7118 + padding: 8px;
7222 7119 }
7223 7120
7224 7121 .editor-list-view-sidebar__list-view-container {
7225 7122 display: flex;
@@ -7250,8 +7147,13 @@
7250 7147 line-height: 1.4;
7251 7148 color: #757575;
7252 7149 }
7253 7150
7151 +.editor-more-menu__popup {
7152 + max-height: var(--available-height);
7153 + max-width: var(--wpds-dimension-surface-width-sm, 320px);
7154 +}
7155 +
7254 7156 .editor-post-parent__panel,
7255 7157 .editor-post-order__panel {
7256 7158 padding-top: 8px;
7257 7159 }
@@ -7302,12 +7204,12 @@
7302 7204 margin: 0;
7303 7205 display: flex;
7304 7206 align-items: center;
7305 7207 flex-wrap: wrap;
7306 - -moz-column-gap: 8px;
7307 - column-gap: 8px;
7208 + column-gap: 8px;
7308 7209 row-gap: 4px;
7309 - word-break: break-word;
7210 + word-break: normal;
7211 + overflow-wrap: anywhere;
7310 7212 }
7311 7213 .editor-post-card-panel__icon {
7312 7214 flex: 0 0 24px;
7313 7215 width: 24px;
@@ -7414,13 +7316,11 @@
7414 7316 /*rtl:end:ignore*/
7415 7317 background-size: 24px 24px;
7416 7318 }
7417 7319 .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
7418 - -o-object-fit: cover;
7419 - object-fit: cover;
7320 + object-fit: cover;
7420 7321 width: 100%;
7421 - -o-object-position: 50% 50%;
7422 - object-position: 50% 50%;
7322 + object-position: 50% 50%;
7423 7323 aspect-ratio: 2/1;
7424 7324 }
7425 7325
7426 7326 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) {
@@ -7471,9 +7371,9 @@
7471 7371 .editor-post-last-revision__title.components-button.has-icon:hover, .editor-post-last-revision__title.components-button.has-icon:active {
7472 7372 background: #f0f0f0;
7473 7373 }
7474 7374 .editor-post-last-revision__title.components-button.has-icon:focus {
7475 - 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)));
7476 7376 border-radius: 0;
7477 7377 }
7478 7378
7479 7379 .components-panel__body.is-opened.editor-post-last-revision__panel {
@@ -7509,9 +7409,10 @@
7509 7409 align-items: center;
7510 7410 padding: 6px 0;
7511 7411 line-height: 20px;
7512 7412 hyphens: auto;
7513 - word-break: break-word;
7413 + word-break: normal;
7414 + overflow-wrap: anywhere;
7514 7415 }
7515 7416
7516 7417 .editor-post-panel__row-control {
7517 7418 flex-grow: 1;
@@ -7587,9 +7488,10 @@
7587 7488 .components-site-home {
7588 7489 display: block;
7589 7490 color: #757575;
7590 7491 font-size: 12px;
7591 - word-break: break-word;
7492 + word-break: normal;
7493 + overflow-wrap: anywhere;
7592 7494 }
7593 7495
7594 7496 .editor-post-publish-panel__header-publish-button,
7595 7497 .editor-post-publish-panel__header-cancel-button {
@@ -7610,12 +7512,8 @@
7610 7512 .editor-post-publish-panel__header-cancel-button {
7611 7513 padding-right: 4px;
7612 7514 }
7613 7515
7614 -.editor-post-publish-panel__header-published {
7615 - flex-grow: 1;
7616 -}
7617 -
7618 7516 .editor-post-publish-panel__footer {
7619 7517 padding: 16px;
7620 7518 }
7621 7519
@@ -7645,11 +7543,8 @@
7645 7543 background: #fff;
7646 7544 margin-left: -16px;
7647 7545 margin-right: -16px;
7648 7546 }
7649 -.editor-post-publish-panel__prepublish .editor-post-visibility__dialog-legend {
7650 - display: none;
7651 -}
7652 7547 .editor-post-publish-panel__prepublish .components-panel__body-title .components-button {
7653 7548 align-items: flex-start;
7654 7549 text-wrap: balance;
7655 7550 text-wrap: pretty;
@@ -7657,9 +7552,10 @@
7657 7552
7658 7553 .post-publish-panel__postpublish .components-panel__body {
7659 7554 border-bottom: 1px solid #e0e0e0;
7660 7555 border-top: none;
7661 - word-break: break-word;
7556 + word-break: normal;
7557 + overflow-wrap: anywhere;
7662 7558 }
7663 7559
7664 7560 .post-publish-panel__postpublish-buttons {
7665 7561 display: flex;
@@ -7706,17 +7602,8 @@
7706 7602 .post-publish-panel__postpublish-subheader {
7707 7603 margin: 0 0 8px;
7708 7604 }
7709 7605
7710 -.post-publish-panel__tip {
7711 - color: #f0b849;
7712 -}
7713 -
7714 -@media screen and (max-width: 782px) {
7715 - .post-publish-panel__postpublish-post-address__button-wrap .components-button {
7716 - height: 40px;
7717 - }
7718 -}
7719 7606 .editor-post-publish-panel {
7720 7607 box-sizing: border-box;
7721 7608 }
7722 7609 .editor-post-publish-panel *,
@@ -7790,8 +7677,104 @@
7790 7677 flex: 1;
7791 7678 min-width: 0;
7792 7679 }
7793 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 +
7794 7777 .revision-diff-markers {
7795 7778 position: relative;
7796 7779 flex-shrink: 0;
7797 7780 width: max(16px, 1rem);
@@ -7827,9 +7810,10 @@
7827 7810 display: flex;
7828 7811 flex-direction: column;
7829 7812 overflow: hidden;
7830 7813 }
7831 -.interface-complementary-area:has(.editor-post-revisions-timeline) .editor-sidebar__panel-tabs {
7814 +
7815 +.interface-complementary-area > .editor-sidebar__panel-tabs {
7832 7816 flex-shrink: 0;
7833 7817 }
7834 7818
7835 7819 .editor-sidebar__panel:has(.editor-post-revisions-timeline) {
@@ -7837,25 +7821,29 @@
7837 7821 flex-direction: column;
7838 7822 flex: 1;
7839 7823 min-height: 0;
7840 7824 }
7841 -.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) {
7842 7827 display: flex;
7843 7828 flex-direction: column;
7844 7829 flex: 1;
7845 7830 min-height: 0;
7846 7831 }
7847 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-revision-meta-diff__content {
7832 +
7833 +.editor-sidebar__panel .editor-revision-meta-diff__content {
7848 7834 max-height: 80px;
7849 7835 overflow-y: auto;
7850 7836 }
7851 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-post-revisions-timeline {
7837 +
7838 +.editor-sidebar__panel .editor-post-revisions-timeline {
7852 7839 flex: 1;
7853 7840 min-height: 0;
7854 7841 }
7855 7842
7856 7843 .editor-revision-fields-diff__value {
7857 - word-break: break-word;
7844 + word-break: normal;
7845 + overflow-wrap: anywhere;
7858 7846 }
7859 7847
7860 7848 .editor-revision-fields-diff__added {
7861 7849 background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
@@ -7909,8 +7897,14 @@
7909 7897 min-width: 320px;
7910 7898 padding: 16px;
7911 7899 }
7912 7900
7901 +.editor-post-schedule__reset {
7902 + justify-content: center;
7903 + margin-top: 16px;
7904 + width: 100%;
7905 +}
7906 +
7913 7907 .editor-post-status {
7914 7908 max-width: 100%;
7915 7909 }
7916 7910 .editor-post-status.is-read-only {
@@ -7963,8 +7957,13 @@
7963 7957 .editor-post-taxonomies__hierarchical-terms-choice:last-child {
7964 7958 margin-bottom: 4px;
7965 7959 }
7966 7960
7961 +.editor-post-taxonomies__hierarchical-terms-add,
7962 +.editor-post-taxonomies__hierarchical-terms-submit {
7963 + align-self: flex-start;
7964 +}
7965 +
7967 7966 .editor-post-taxonomies__hierarchical-terms-subchoices {
7968 7967 margin-top: 8px;
7969 7968 margin-left: 16px;
7970 7969 }
@@ -8010,29 +8009,24 @@
8010 8009 z-index: 1000001;
8011 8010 }
8012 8011
8013 8012 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8014 - -moz-column-count: 2;
8015 - column-count: 2;
8016 - -moz-column-gap: 24px;
8017 - column-gap: 24px;
8013 + column-count: 2;
8014 + column-gap: 24px;
8018 8015 padding-top: 2px;
8019 8016 }
8020 8017 @media (min-width: 782px) {
8021 8018 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8022 - -moz-column-count: 3;
8023 - column-count: 3;
8019 + column-count: 3;
8024 8020 }
8025 8021 }
8026 8022 @media (min-width: 1280px) {
8027 8023 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8028 - -moz-column-count: 4;
8029 - column-count: 4;
8024 + column-count: 4;
8030 8025 }
8031 8026 }
8032 8027 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8033 - -moz-column-break-inside: avoid;
8034 - break-inside: avoid-column;
8028 + break-inside: avoid-column;
8035 8029 }
8036 8030
8037 8031 .editor-post-template__dropdown .components-popover__content {
8038 8032 min-width: 240px;
@@ -8087,9 +8081,10 @@
8087 8081 margin: 0;
8088 8082 width: 100%;
8089 8083 box-shadow: none;
8090 8084 resize: none;
8091 - overflow: hidden;
8085 + field-sizing: content;
8086 + overflow: auto;
8092 8087 font-family: Menlo, Consolas, monaco, monospace;
8093 8088 line-height: 2.4;
8094 8089 min-height: 200px;
8095 8090 }
@@ -8119,11 +8114,8 @@
8119 8114 border-color: var(--wp-admin-theme-color);
8120 8115 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8121 8116 position: relative;
8122 8117 }
8123 -textarea.editor-post-text-editor::-moz-placeholder {
8124 - color: rgba(30, 30, 30, 0.62);
8125 -}
8126 8118 textarea.editor-post-text-editor::placeholder {
8127 8119 color: rgba(30, 30, 30, 0.62);
8128 8120 }
8129 8121
@@ -8145,9 +8137,10 @@
8145 8137 /* rtl:begin:ignore */
8146 8138 .editor-post-url__link,
8147 8139 .editor-post-url__front-page-link {
8148 8140 direction: ltr;
8149 - word-break: break-word;
8141 + word-break: normal;
8142 + overflow-wrap: anywhere;
8150 8143 }
8151 8144
8152 8145 /* rtl:end:ignore */
8153 8146 .editor-post-url__front-page-link {
@@ -8174,9 +8167,10 @@
8174 8167 }
8175 8168
8176 8169 .editor-post-url__panel-toggle,
8177 8170 .editor-post-parent__panel-toggle {
8178 - word-break: break-word;
8171 + word-break: normal;
8172 + overflow-wrap: anywhere;
8179 8173 }
8180 8174
8181 8175 .editor-post-url__intro {
8182 8176 margin: 0;
@@ -8199,20 +8193,24 @@
8199 8193 flex-grow: 1;
8200 8194 justify-content: center;
8201 8195 }
8202 8196
8203 -.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 {
8204 8202 padding-right: 4px;
8205 8203 padding-left: 6px;
8206 8204 }
8207 8205
8208 -.editor-preview-dropdown.is-responsive-editing .editor-preview-dropdown__toggle {
8206 +.editor-preview-dropdown__toggle.is-responsive-editing {
8209 8207 color: var(--wp-block-synced-color);
8210 8208 }
8211 8209
8212 8210 @media (prefers-reduced-motion: no-preference) {
8213 8211 .editor-resizable-editor:not(.is-resizing) {
8214 - transition: width 0.2s ease-out, height 0.2s ease-out;
8212 + transition: width 0.2s ease-out;
8215 8213 }
8216 8214 }
8217 8215
8218 8216 .editor-resizable-editor.is-resizable {
@@ -8226,11 +8224,9 @@
8226 8224 bottom: 0;
8227 8225 padding: 0;
8228 8226 margin: auto 0;
8229 8227 width: 12px;
8230 - -webkit-appearance: none;
8231 - -moz-appearance: none;
8232 - appearance: none;
8228 + appearance: none;
8233 8229 cursor: ew-resize;
8234 8230 outline: none;
8235 8231 background: none;
8236 8232 border-radius: 9999px;
@@ -8260,8 +8256,22 @@
8260 8256 .editor-resizable-editor__resize-handle:hover::after, .editor-resizable-editor__resize-handle:focus::after, .editor-resizable-editor__resize-handle:active::after {
8261 8257 background-color: var(--wp-admin-theme-color);
8262 8258 }
8263 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 +
8264 8274 .editor-layout__toggle-publish-panel,
8265 8275 .editor-layout__toggle-sidebar-panel,
8266 8276 .editor-layout__toggle-entities-saved-states-panel {
8267 8277 z-index: 100000;
@@ -8292,12 +8302,12 @@
8292 8302 bottom: 0;
8293 8303 width: 100%;
8294 8304 height: 72px;
8295 8305 background-color: #fff;
8296 - margin-left: -32px;
8297 - margin-right: -32px;
8298 - padding-left: 32px;
8299 - padding-right: 32px;
8306 + margin-left: -24px;
8307 + margin-right: -24px;
8308 + padding-left: 24px;
8309 + padding-right: 24px;
8300 8310 border-top: 1px solid #ddd;
8301 8311 z-index: 1;
8302 8312 }
8303 8313 .editor-start-page-options__modal .block-editor-block-patterns-list {
@@ -8302,30 +8312,51 @@
8302 8312 }
8303 8313 .editor-start-page-options__modal .block-editor-block-patterns-list {
8304 8314 padding-bottom: 72px;
8305 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 +}
8306 8332
8307 -.editor-start-page-options__modal-content .block-editor-block-patterns-list {
8308 - -moz-column-count: 2;
8309 - column-count: 2;
8310 - -moz-column-gap: 24px;
8311 - column-gap: 24px;
8333 +.editor-start-page-options__modal-content {
8334 + container-type: inline-size;
8312 8335 }
8336 +
8313 8337 @media (min-width: 782px) {
8314 - .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8315 - -moz-column-count: 3;
8316 - column-count: 3;
8338 + .editor-start-page-options__modal-content.has-pattern-categories {
8339 + margin-left: 280px;
8317 8340 }
8318 8341 }
8319 -@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) {
8320 8353 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8321 - -moz-column-count: 4;
8322 - column-count: 4;
8354 + columns: 4 220px;
8323 8355 }
8324 8356 }
8325 8357 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8326 - -moz-column-break-inside: avoid;
8327 - break-inside: avoid-column;
8358 + break-inside: avoid-column;
8328 8359 margin-bottom: 24px;
8329 8360 }
8330 8361 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
8331 8362 min-height: 100px;
@@ -8339,12 +8370,12 @@
8339 8370 bottom: 0;
8340 8371 width: 100%;
8341 8372 height: 92px;
8342 8373 background-color: #fff;
8343 - margin-left: -32px;
8344 - margin-right: -32px;
8345 - padding-left: 32px;
8346 - padding-right: 32px;
8374 + margin-left: -24px;
8375 + margin-right: -24px;
8376 + padding-left: 24px;
8377 + padding-right: 24px;
8347 8378 border-top: 1px solid #ddd;
8348 8379 z-index: 1;
8349 8380 }
8350 8381 .editor-start-template-options__modal .block-editor-block-patterns-list {
@@ -8351,28 +8382,18 @@
8351 8382 padding-bottom: 92px;
8352 8383 }
8353 8384
8354 8385 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8355 - -moz-column-count: 2;
8356 - column-count: 2;
8357 - -moz-column-gap: 24px;
8358 - column-gap: 24px;
8386 + column-count: 2;
8387 + column-gap: 24px;
8359 8388 }
8360 8389 @media (min-width: 782px) {
8361 8390 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8362 - -moz-column-count: 3;
8363 - column-count: 3;
8391 + columns: 4 220px;
8364 8392 }
8365 8393 }
8366 -@media (min-width: 1280px) {
8367 - .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8368 - -moz-column-count: 4;
8369 - column-count: 4;
8370 - }
8371 -}
8372 8394 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8373 - -moz-column-break-inside: avoid;
8374 - break-inside: avoid-column;
8395 + break-inside: avoid-column;
8375 8396 }
8376 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 {
8377 8398 display: none;
8378 8399 }
@@ -8466,8 +8487,11 @@
8466 8487 display: block;
8467 8488 width: 100%;
8468 8489 height: 100%;
8469 8490 }
8491 +.editor-styles-canvas.is-preview-mode {
8492 + padding: 0;
8493 +}
8470 8494
8471 8495 .editor-styles-canvas__section {
8472 8496 background: #fff;
8473 8497 bottom: 0;
@@ -8580,9 +8604,9 @@
8580 8604 max-width: none;
8581 8605 line-height: 1.4;
8582 8606 font-family: Menlo, Consolas, monaco, monospace;
8583 8607 font-size: 2.5em;
8584 - font-weight: normal;
8608 + font-weight: 400;
8585 8609 border: 1px solid #949494;
8586 8610 border-radius: 0;
8587 8611 padding: 16px;
8588 8612 }
@@ -8666,9 +8690,11 @@
8666 8690 .editor-visual-editor iframe[name=editor-canvas] {
8667 8691 background-color: transparent;
8668 8692 }
8669 8693 .editor-visual-editor {
8694 + flex-direction: column;
8670 8695 align-items: center;
8696 + justify-content: center;
8671 8697 }
8672 8698 @media (prefers-reduced-motion: no-preference) {
8673 8699 .editor-visual-editor {
8674 8700 transition: padding 0.2s ease-out;