PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/editor/style-rtl.css +296 -462 23.9.0 → trunk View file →
@@ -759,13 +759,13 @@
759 759 position: relative;
760 760 }
761 761
762 762 .font-library__font-card .font-library__font-card__name {
763 - font-weight: bold;
763 + font-weight: 700;
764 764 }
765 765
766 766 .font-library__font-card .font-library__font-card__count {
767 - color: #757575;
767 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
768 768 }
769 769
770 770 .font-library__font-card .font-library__font-variant_demo-image {
771 771 display: block;
@@ -825,9 +825,9 @@
825 825 width: 80%;
826 826 }
827 827
828 828 .font-library__local-fonts .font-library__upload-area__text {
829 - color: #757575;
829 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
830 830 }
831 831
832 832 .font-library__google-fonts-confirm {
833 833 display: flex;
@@ -862,113 +862,22 @@
862 862 .font-library__select-all .components-checkbox-control__label {
863 863 padding-right: 16px;
864 864 }
865 865
866 -.global-styles-ui-pagination .components-button.is-tertiary {
867 - width: 32px;
868 - height: 32px;
869 - justify-content: center;
870 -}
871 -
872 -.global-styles-ui-screen-revisions__revisions-list {
873 - list-style: none;
874 - margin: 0 16px 16px 16px;
875 - flex-grow: 1;
876 -}
877 -
878 -.global-styles-ui-screen-revisions__revisions-list li {
879 - margin-bottom: 0;
880 -}
881 -
882 -.global-styles-ui-screen-revisions__revision-item {
883 - position: relative;
884 - cursor: var(--wpds-cursor-control, pointer);
866 +.global-styles-ui-screen-revisions {
885 867 display: flex;
886 868 flex-direction: column;
869 + flex-grow: 1;
870 + min-height: 0;
887 871 }
888 872
889 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
890 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
891 - outline: 2px solid transparent;
873 +.global-styles-ui-screen-revisions__actions {
874 + margin-inline-start: auto;
892 875 }
893 876
894 -.global-styles-ui-screen-revisions__revision-item:hover {
895 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
896 -}
897 -
898 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
899 - color: var(--wp-admin-theme-color);
900 -}
901 -
902 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
903 - position: absolute;
904 - content: "\a";
905 - display: block;
906 -}
907 -
908 -.global-styles-ui-screen-revisions__revision-item::before {
909 - background: #ddd;
910 - border-radius: 50%;
911 - height: 8px;
912 - width: 8px;
913 - top: 18px;
914 - right: 17px;
915 - transform: translate(50%, -50%);
916 - z-index: 1;
917 - border: 4px solid transparent;
918 -}
919 -
920 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
921 - border-radius: 2px;
922 - outline: 3px solid transparent;
923 - outline-offset: -2px;
924 - color: var(--wp-admin-theme-color);
925 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
926 -}
927 -
928 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
929 - color: var(--wp-admin-theme-color);
930 -}
931 -
932 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
933 - background: var(--wp-admin-theme-color);
934 -}
935 -
936 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
937 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
938 - color: #1e1e1e;
939 -}
940 -
941 -.global-styles-ui-screen-revisions__revision-item::after {
942 - height: 100%;
943 - right: 16px;
944 - top: 0;
945 - width: 0;
946 - border: 0.5px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
947 -}
948 -
949 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
950 - top: 18px;
951 -}
952 -
953 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
954 - height: 18px;
955 -}
956 -
957 -.global-styles-ui-screen-revisions__revision-item-wrapper {
958 - display: block;
959 - padding: 12px 40px 4px 12px;
960 -}
961 -
962 -.global-styles-ui-screen-revisions__apply-button.is-primary,
963 -.global-styles-ui-screen-revisions__active-badge {
964 - align-self: flex-start;
965 - margin: 0 40px 12px 12px;
966 -}
967 -
968 -.global-styles-ui-screen-revisions__changes,
969 -.global-styles-ui-screen-revisions__meta {
970 - color: #757575;
877 +.global-styles-ui-screen-revisions__date {
878 + text-transform: uppercase;
879 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
971 880 font-size: 12px;
972 881 }
973 882
974 883 .global-styles-ui-screen-revisions__description {
@@ -977,11 +886,11 @@
977 886 align-items: flex-start;
978 887 gap: 8px;
979 888 }
980 889
981 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
982 - text-transform: uppercase;
983 - 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;
984 893 font-size: 12px;
985 894 }
986 895
987 896 .global-styles-ui-screen-revisions__meta {
@@ -987,11 +896,10 @@
987 896 .global-styles-ui-screen-revisions__meta {
988 897 display: flex;
989 898 justify-content: start;
990 899 width: 100%;
991 - align-items: flex-start;
900 + align-items: center;
992 901 text-align: right;
993 - margin-bottom: 4px;
994 902 }
995 903
996 904 .global-styles-ui-screen-revisions__meta img {
997 905 width: 16px;
@@ -999,16 +907,12 @@
999 907 border-radius: 100%;
1000 908 margin-left: 8px;
1001 909 }
1002 910
1003 -.global-styles-ui-screen-revisions__loading {
1004 - margin: 24px auto !important;
1005 -}
1006 -
1007 911 .global-styles-ui-screen-revisions__changes {
1008 912 text-align: right;
1009 913 line-height: 1.4;
1010 - margin-right: 12px;
914 + margin: 0 12px 0 0;
1011 915 list-style: disc;
1012 916 }
1013 917
1014 918 .global-styles-ui-screen-revisions__changes li {
@@ -1014,47 +918,8 @@
1014 918 .global-styles-ui-screen-revisions__changes li {
1015 919 margin-bottom: 4px;
1016 920 }
1017 921
1018 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
1019 - justify-content: space-between;
1020 - gap: 2px;
1021 -}
1022 -
1023 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
1024 - position: absolute;
1025 - right: -1000px;
1026 - height: 1px;
1027 - margin: -1px;
1028 - overflow: hidden;
1029 -}
1030 -
1031 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
1032 - font-size: 12px;
1033 - will-change: opacity;
1034 -}
1035 -
1036 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
1037 - color: #1e1e1e;
1038 -}
1039 -
1040 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
1041 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
1042 - color: #949494;
1043 -}
1044 -
1045 -.global-styles-ui-screen-revisions__footer {
1046 - height: 56px;
1047 - z-index: 1;
1048 - position: sticky;
1049 - min-width: 100%;
1050 - bottom: 0;
1051 - background: #fff;
1052 - padding: 12px;
1053 - border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1054 - box-sizing: border-box;
1055 -}
1056 -
1057 922 .global-styles-ui-variations_item {
1058 923 box-sizing: border-box;
1059 924 cursor: var(--wpds-cursor-control, pointer);
1060 925 }
@@ -1204,10 +1069,20 @@
1204 1069
1205 1070 .global-styles-ui__color-indicator-wrapper {
1206 1071 height: 24px;
1207 1072 flex-shrink: 0;
1073 + display: flex;
1074 + align-items: center;
1208 1075 }
1209 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 +
1210 1085 .global-styles-ui__shadows-panel__options-container,
1211 1086 .global-styles-ui__typography-panel__options-container {
1212 1087 height: 24px;
1213 1088 }
@@ -1219,9 +1094,10 @@
1219 1094 border-radius: 2px;
1220 1095 overflow: hidden;
1221 1096 }
1222 1097
1223 -.global-styles-ui__shadow-preview-panel {
1098 +.global-styles-ui__shadow-preview-panel,
1099 +.global-styles-ui__text-shadow-preview-panel {
1224 1100 height: 144px;
1225 1101 border: #ddd 1px solid;
1226 1102 border-radius: 2px;
1227 1103 overflow: auto;
@@ -1229,9 +1105,9 @@
1229 1105 background-position: 0 0, 8px 8px;
1230 1106 background-size: 16px 16px;
1231 1107 }
1232 1108
1233 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
1109 +.global-styles-ui__shadow-preview-block {
1234 1110 border: #ddd 1px solid;
1235 1111 border-radius: 2px;
1236 1112 background-color: #fff;
1237 1113 width: 60%;
@@ -1237,22 +1113,44 @@
1237 1113 width: 60%;
1238 1114 height: 60px;
1239 1115 }
1240 1116
1241 -.global-styles-ui__shadow-editor__dropdown-content {
1117 +.global-styles-ui__text-shadow-preview-panel {
1118 + margin-block: -8px 16px;
1119 +}
1120 +
1121 +.global-styles-ui__text-shadow-preview-text {
1122 + font-size: 24px;
1123 +}
1124 +
1125 +.global-styles-ui__text-shadow-editor__header {
1126 + margin-block-end: 8px;
1127 +}
1128 +
1129 +.global-styles-ui__text-shadow-editor__inputs {
1130 + display: grid;
1131 + grid-template-columns: repeat(2, 1fr);
1132 + gap: 16px;
1133 +}
1134 +
1135 +.global-styles-ui__shadow-editor__dropdown-content,
1136 +.global-styles-ui__text-shadow-editor__dropdown-content {
1242 1137 width: 280px;
1243 1138 }
1244 1139
1245 -.global-styles-ui__shadow-editor-panel {
1140 +.global-styles-ui__shadow-editor-panel,
1141 +.global-styles-ui__text-shadow-editor-panel {
1246 1142 margin-bottom: 4px;
1247 1143 }
1248 1144
1249 -.global-styles-ui__shadow-editor__dropdown {
1145 +.global-styles-ui__shadow-editor__dropdown,
1146 +.global-styles-ui__text-shadow-editor__dropdown {
1250 1147 width: 100%;
1251 1148 position: relative;
1252 1149 }
1253 1150
1254 -.global-styles-ui__shadow-editor__dropdown-toggle {
1151 +.global-styles-ui__shadow-editor__dropdown-toggle,
1152 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
1255 1153 width: 100%;
1256 1154 height: auto;
1257 1155 padding-top: 8px;
1258 1156 padding-bottom: 8px;
@@ -1259,14 +1157,16 @@
1259 1157 text-align: right;
1260 1158 border-radius: inherit;
1261 1159 }
1262 1160
1263 -.global-styles-ui__shadow-editor__dropdown-toggle.is-open {
1161 +.global-styles-ui__shadow-editor__dropdown-toggle.is-open,
1162 +.global-styles-ui__text-shadow-editor__dropdown-toggle.is-open {
1264 1163 background: #f0f0f0;
1265 1164 color: var(--wp-admin-theme-color);
1266 1165 }
1267 1166
1268 -.global-styles-ui__shadow-editor__remove-button {
1167 +.global-styles-ui__shadow-editor__remove-button,
1168 +.global-styles-ui__text-shadow-editor__remove-button {
1269 1169 position: absolute;
1270 1170 left: 8px;
1271 1171 top: 8px;
1272 1172 opacity: 0;
@@ -1271,14 +1171,19 @@
1271 1171 top: 8px;
1272 1172 opacity: 0;
1273 1173 }
1274 1174
1275 -.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 {
1175 +.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,
1176 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
1177 +.global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
1178 +.global-styles-ui__text-shadow-editor__remove-button:focus,
1179 +.global-styles-ui__text-shadow-editor__remove-button:hover {
1276 1180 opacity: 1;
1277 1181 }
1278 1182
1279 1183 @media (hover: none) {
1280 - .global-styles-ui__shadow-editor__remove-button {
1184 + .global-styles-ui__shadow-editor__remove-button,
1185 + .global-styles-ui__text-shadow-editor__remove-button {
1281 1186 opacity: 1;
1282 1187 }
1283 1188 }
1284 1189 .global-styles-ui-screen-css {
@@ -1497,8 +1402,12 @@
1497 1402 .dataviews__search {
1498 1403 flex-grow: 1;
1499 1404 }
1500 1405
1406 +.dataviews__search .dataviews-search {
1407 + flex-basis: 210px;
1408 +}
1409 +
1501 1410 .dataviews-no-results,
1502 1411 .dataviews-loading {
1503 1412 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1504 1413 flex-grow: 1;
@@ -1768,9 +1677,9 @@
1768 1677 cursor: var(--wpds-cursor-control, pointer);
1769 1678 }
1770 1679
1771 1680 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
1772 - fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1681 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1773 1682 }
1774 1683
1775 1684 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
1776 1685 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
@@ -1776,13 +1685,13 @@
1776 1685 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1777 1686 }
1778 1687
1779 1688 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
1780 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1689 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1781 1690 }
1782 1691
1783 1692 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
1784 - fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1693 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1785 1694 }
1786 1695
1787 1696 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
1788 1697 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
@@ -1844,10 +1753,11 @@
1844 1753 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1845 1754 }
1846 1755
1847 1756 .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 {
1757 + /* 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. */
1758 + background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
1848 1759 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1849 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
1850 1760 }
1851 1761
1852 1762 .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 {
1853 1763 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
@@ -1961,9 +1871,9 @@
1961 1871 }
1962 1872 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1963 1873 --checkbox-size: 24px;
1964 1874 flex-shrink: 0;
1965 - border: 1px solid #1e1e1e;
1875 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1966 1876 margin-left: 12px;
1967 1877 transition: none;
1968 1878 border-radius: 2px;
1969 1879 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1982,9 +1892,9 @@
1982 1892 /* Override core line-height. To be reviewed. */
1983 1893 line-height: normal;
1984 1894 }
1985 1895 }
1986 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
1896 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
1987 1897 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1988 1898 }
1989 1899
1990 1900 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
@@ -1993,14 +1903,14 @@
1993 1903 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1994 1904 box-shadow: none;
1995 1905 }
1996 1906
1997 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
1907 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
1998 1908 color: rgba(30, 30, 30, 0.62);
1999 1909 }
2000 1910
2001 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
2002 - color: rgba(30, 30, 30, 0.62);
1911 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
1912 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
2003 1913 }
2004 1914
2005 1915 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
2006 1916 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
@@ -2033,9 +1943,9 @@
2033 1943 display: inline-block;
2034 1944 vertical-align: middle;
2035 1945 width: 16px;
2036 1946 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
2037 - font: normal 30px/1 dashicons;
1947 + font: 400 30px/1 dashicons;
2038 1948 speak: none;
2039 1949 -webkit-font-smoothing: antialiased;
2040 1950 -moz-osx-font-smoothing: grayscale;
2041 1951 }
@@ -2046,17 +1956,23 @@
2046 1956 font-size: 21px;
2047 1957 }
2048 1958 }
2049 1959 .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 {
2050 - background: #f0f0f0;
2051 - border-color: #ddd;
1960 + background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
1961 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
1962 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
2052 1963 cursor: default;
2053 1964 opacity: 1;
2054 1965 }
2055 1966
1967 +.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 {
1968 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
1969 +}
1970 +
2056 1971 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2057 1972 position: relative;
2058 - background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
1973 + /* 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. */
1974 + background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
2059 1975 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2060 1976 margin: 0;
2061 1977 padding: 0;
2062 1978 width: var(--checkbox-size);
@@ -2079,9 +1995,9 @@
2079 1995 }
2080 1996
2081 1997 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2082 1998 --checkmark-size: var(--checkbox-size);
2083 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
1999 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2084 2000 position: absolute;
2085 2001 right: 50%;
2086 2002 top: 50%;
2087 2003 transform: translate(50%, -50%);
@@ -2116,9 +2032,9 @@
2116 2032 /* Override core line-height. To be reviewed. */
2117 2033 line-height: normal;
2118 2034 }
2119 2035 }
2120 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
2036 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true]) {
2121 2037 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
2122 2038 }
2123 2039
2124 2040 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
@@ -2127,12 +2043,8 @@
2127 2043 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2128 2044 box-shadow: none;
2129 2045 }
2130 2046
2131 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2132 - color: rgba(30, 30, 30, 0.62);
2133 -}
2134 -
2135 2047 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2136 2048 color: rgba(30, 30, 30, 0.62);
2137 2049 }
2138 2050
@@ -2155,12 +2067,8 @@
2155 2067 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2156 2068 background: var(--wpds-color-background-surface-neutral-strong, #fff);
2157 2069 }
2158 2070
2159 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2160 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2161 -}
2162 -
2163 2071 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2164 2072 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2165 2073 }
2166 2074
@@ -2205,12 +2113,8 @@
2205 2113 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2206 2114 box-sizing: border-box;
2207 2115 }
2208 2116
2209 -.dataviews-search {
2210 - flex-basis: 210px;
2211 -}
2212 -
2213 2117 .dataviews-filters__user-input-widget {
2214 2118 padding: var(--wpds-dimension-padding-lg, 16px);
2215 2119 }
2216 2120
@@ -2487,9 +2391,8 @@
2487 2391 }
2488 2392
2489 2393 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
2490 2394 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
2491 - width: -moz-fit-content;
2492 2395 width: fit-content;
2493 2396 }
2494 2397
2495 2398 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
@@ -2523,9 +2426,8 @@
2523 2426 }
2524 2427
2525 2428 .dataviews-view-grid .dataviews-view-grid__media img,
2526 2429 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
2527 - -o-object-fit: cover;
2528 2430 object-fit: cover;
2529 2431 width: 100%;
2530 2432 height: 100%;
2531 2433 }
@@ -2559,9 +2461,8 @@
2559 2461 }
2560 2462
2561 2463 .dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
2562 2464 .dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
2563 - -o-object-fit: contain;
2564 2465 object-fit: contain;
2565 2466 }
2566 2467
2567 2468 .dataviews-view-grid .dataviews-view-grid__fields,
@@ -2725,9 +2626,8 @@
2725 2626
2726 2627 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
2727 2628 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
2728 2629 display: flex;
2729 - width: -moz-max-content;
2730 2630 width: max-content;
2731 2631 flex: 0 0 auto;
2732 2632 gap: var(--wpds-dimension-gap-xs, 4px);
2733 2633 white-space: nowrap;
@@ -2820,10 +2720,8 @@
2820 2720 position: absolute;
2821 2721 z-index: 1;
2822 2722 inset: 0;
2823 2723 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
2824 - -webkit-appearance: none;
2825 - -moz-appearance: none;
2826 2724 appearance: none;
2827 2725 border: none;
2828 2726 background: none;
2829 2727 padding: 0;
@@ -2866,9 +2764,8 @@
2866 2764
2867 2765 .dataviews-view-list .dataviews-view-list__media-wrapper img {
2868 2766 width: 100%;
2869 2767 height: 100%;
2870 - -o-object-fit: cover;
2871 2768 object-fit: cover;
2872 2769 }
2873 2770
2874 2771 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -3007,9 +2904,9 @@
3007 2904
3008 2905 .dataviews-view-table th {
3009 2906 text-align: right;
3010 2907 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3011 - font-weight: normal;
2908 + font-weight: 400;
3012 2909 font-size: var(--wpds-typography-font-size-md, 13px);
3013 2910 }
3014 2911
3015 2912 .dataviews-view-table td,
@@ -3251,9 +3148,8 @@
3251 3148
3252 3149 .dataviews-column-primary__media img {
3253 3150 width: var(--wpds-dimension-size-md, 32px);
3254 3151 height: var(--wpds-dimension-size-md, 32px);
3255 - -o-object-fit: cover;
3256 3152 object-fit: cover;
3257 3153 }
3258 3154
3259 3155 .dataviews-column-primary__media::after {
@@ -3332,9 +3228,8 @@
3332 3228 text-align: start;
3333 3229 }
3334 3230
3335 3231 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
3336 - width: -moz-fit-content;
3337 3232 width: fit-content;
3338 3233 }
3339 3234
3340 3235 .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 {
@@ -3375,9 +3270,8 @@
3375 3270 position: relative;
3376 3271 }
3377 3272
3378 3273 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
3379 - -o-object-fit: cover;
3380 3274 object-fit: cover;
3381 3275 width: 100%;
3382 3276 height: 100%;
3383 3277 }
@@ -3398,9 +3292,8 @@
3398 3292 background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
3399 3293 }
3400 3294
3401 3295 .dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
3402 - -o-object-fit: contain;
3403 3296 object-fit: contain;
3404 3297 }
3405 3298
3406 3299 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
@@ -3565,9 +3458,8 @@
3565 3458 }
3566 3459
3567 3460 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
3568 3461 display: flex;
3569 - width: -moz-max-content;
3570 3462 width: max-content;
3571 3463 flex: 0 0 auto;
3572 3464 }
3573 3465
@@ -3699,9 +3591,8 @@
3699 3591 display: block;
3700 3592 width: 100%;
3701 3593 height: 100%;
3702 3594 margin: 0 auto;
3703 - -o-object-fit: cover;
3704 3595 object-fit: cover;
3705 3596 border-radius: 50%;
3706 3597 box-sizing: border-box;
3707 3598 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -3916,9 +3807,8 @@
3916 3807 display: block;
3917 3808 width: 100%;
3918 3809 height: 100%;
3919 3810 margin: 0 auto;
3920 - -o-object-fit: cover;
3921 3811 object-fit: cover;
3922 3812 border-radius: 50%;
3923 3813 box-sizing: border-box;
3924 3814 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -3973,27 +3863,19 @@
3973 3863 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
3974 3864 }
3975 3865
3976 3866 .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 {
3977 - --focus-color: #cc1818;
3867 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3978 3868 }
3979 3869
3980 -.dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3981 - border-color: #cc1818;
3870 +.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 {
3871 + border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3982 3872 }
3983 3873
3984 -.dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
3985 - border-color: #cc1818;
3986 -}
3987 -
3988 3874 .dataviews-validated-control__wrapper-with-error-delegate {
3989 3875 position: relative;
3990 3876 }
3991 3877
3992 -.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
3993 - border-color: #cc1818;
3994 -}
3995 -
3996 3878 .dataviews-validated-control__error-delegate {
3997 3879 position: absolute;
3998 3880 top: 0;
3999 3881 height: 100%;
@@ -4124,9 +4006,10 @@
4124 4006 align-items: center;
4125 4007 overflow: clip;
4126 4008 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
4127 4009 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4128 - word-break: break-word;
4010 + word-break: normal;
4011 + overflow-wrap: anywhere;
4129 4012 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4130 4013 }
4131 4014
4132 4015 .dataforms-layouts-panel__field-control:has(a, button) {
@@ -4385,9 +4268,9 @@
4385 4268 padding: 12px;
4386 4269 display: grid;
4387 4270 align-items: center;
4388 4271 grid-template-columns: min-content 1fr min-content;
4389 - grid-gap: 4px 8px;
4272 + gap: 4px 8px;
4390 4273 color: #1e1e1e;
4391 4274 }
4392 4275
4393 4276 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -4670,11 +4553,9 @@
4670 4553
4671 4554 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
4672 4555 width: 100%;
4673 4556 height: 100%;
4674 - -o-object-fit: cover;
4675 4557 object-fit: cover;
4676 - -o-object-position: 50% 50%;
4677 4558 object-position: 50% 50%;
4678 4559 }
4679 4560
4680 4561 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
@@ -4734,9 +4615,8 @@
4734 4615
4735 4616 .fields-controls__author-avatar img {
4736 4617 width: 16px;
4737 4618 height: 16px;
4738 - -o-object-fit: cover;
4739 4619 object-fit: cover;
4740 4620 opacity: 0;
4741 4621 border-radius: 100%;
4742 4622 }
@@ -4772,18 +4652,15 @@
4772 4652 padding: 0;
4773 4653 margin: 0;
4774 4654 }
4775 4655
4776 -.fields-controls__slug .fields-controls__slug-external-icon {
4777 - margin-right: 5ch;
4778 -}
4779 -
4780 4656 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
4781 4657 padding-inline-start: 0 !important;
4782 4658 }
4783 4659
4784 4660 .fields-controls__slug .fields-controls__slug-help-link {
4785 - word-break: break-word;
4661 + word-break: normal;
4662 + overflow-wrap: anywhere;
4786 4663 }
4787 4664
4788 4665 .fields-controls__slug .fields-controls__slug-help {
4789 4666 display: flex;
@@ -4911,9 +4788,8 @@
4911 4788
4912 4789 .media-editor-preview--image img {
4913 4790 max-width: 100%;
4914 4791 max-height: 100%;
4915 - -o-object-fit: contain;
4916 4792 object-fit: contain;
4917 4793 width: auto;
4918 4794 height: auto;
4919 4795 opacity: 0;
@@ -4935,9 +4811,8 @@
4935 4811 }
4936 4812 .media-editor-preview--video video {
4937 4813 max-width: 100%;
4938 4814 max-height: 100%;
4939 - -o-object-fit: contain;
4940 4815 object-fit: contain;
4941 4816 width: auto;
4942 4817 height: auto;
4943 4818 }
@@ -4982,9 +4857,8 @@
4982 4857 color: #949494;
4983 4858 word-break: break-all;
4984 4859 margin-top: 8px;
4985 4860 }
4986 -
4987 4861 .wp-media-editor-image-editor {
4988 4862 position: relative;
4989 4863 overflow: hidden;
4990 4864 width: 100%;
@@ -4990,9 +4864,8 @@
4990 4864 width: 100%;
4991 4865 height: 100%;
4992 4866 touch-action: none;
4993 4867 -webkit-user-select: none;
4994 - -moz-user-select: none;
4995 4868 user-select: none;
4996 4869 cursor: grab;
4997 4870 }
4998 4871
@@ -5018,9 +4891,9 @@
5018 4891
5019 4892 .wp-media-editor-image-editor__image {
5020 4893 position: absolute;
5021 4894 top: 0;
5022 - right: 0;
4895 + left: 0;
5023 4896 will-change: transform;
5024 4897 transform-origin: center center;
5025 4898 }
5026 4899
@@ -5071,9 +4944,9 @@
5071 4944 background: rgba(255, 255, 255, 0.4);
5072 4945 }
5073 4946
5074 4947 .wp-media-editor-image-editor__grid-line--horizontal {
5075 - right: 0;
4948 + left: 0;
5076 4949 width: 100%;
5077 4950 height: 1px;
5078 4951 }
5079 4952
@@ -5110,10 +4983,8 @@
5110 4983 box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5111 4984 }
5112 4985
5113 4986 .wp-media-editor-image-editor__handle {
5114 - -webkit-appearance: none;
5115 - -moz-appearance: none;
5116 4987 appearance: none;
5117 4988 margin: 0;
5118 4989 padding: 0;
5119 4990 font: inherit;
@@ -5142,12 +5013,12 @@
5142 5013 .wp-media-editor-image-editor__handle::before {
5143 5014 content: "";
5144 5015 position: absolute;
5145 5016 top: 50%;
5146 - right: 50%;
5017 + left: 50%;
5147 5018 width: 44px;
5148 5019 height: 44px;
5149 - transform: translate(50%, -50%);
5020 + transform: translate(-50%, -50%);
5150 5021 }
5151 5022
5152 5023 .wp-media-editor-image-editor__handle {
5153 5024 /* Offset by half the handle width (12px / 2 = 6px) to center on crop edge */
@@ -5154,23 +5025,23 @@
5154 5025 }
5155 5026
5156 5027 .wp-media-editor-image-editor__handle--n {
5157 5028 top: -6px;
5158 - right: 50%;
5159 - margin-right: -6px;
5029 + left: 50%;
5030 + margin-left: -6px;
5160 5031 cursor: ns-resize;
5161 5032 }
5162 5033
5163 5034 .wp-media-editor-image-editor__handle--s {
5164 5035 bottom: -6px;
5165 - right: 50%;
5166 - margin-right: -6px;
5036 + left: 50%;
5037 + margin-left: -6px;
5167 5038 cursor: ns-resize;
5168 5039 }
5169 5040
5170 5041 .wp-media-editor-image-editor__handle--e {
5171 5042 top: 50%;
5172 - left: -6px;
5043 + right: -6px;
5173 5044 margin-top: -6px;
5174 5045 cursor: ew-resize;
5175 5046 }
5176 5047
@@ -5175,9 +5046,9 @@
5175 5046 }
5176 5047
5177 5048 .wp-media-editor-image-editor__handle--w {
5178 5049 top: 50%;
5179 - right: -6px;
5050 + left: -6px;
5180 5051 margin-top: -6px;
5181 5052 cursor: ew-resize;
5182 5053 }
5183 5054
@@ -5182,30 +5053,29 @@
5182 5053 }
5183 5054
5184 5055 .wp-media-editor-image-editor__handle--nw {
5185 5056 top: -6px;
5186 - right: -6px;
5187 - cursor: nesw-resize;
5057 + left: -6px;
5058 + cursor: nwse-resize;
5188 5059 }
5189 5060
5190 5061 .wp-media-editor-image-editor__handle--ne {
5191 5062 top: -6px;
5192 - left: -6px;
5193 - cursor: nwse-resize;
5063 + right: -6px;
5064 + cursor: nesw-resize;
5194 5065 }
5195 5066
5196 5067 .wp-media-editor-image-editor__handle--sw {
5197 5068 bottom: -6px;
5198 - right: -6px;
5199 - cursor: nwse-resize;
5069 + left: -6px;
5070 + cursor: nesw-resize;
5200 5071 }
5201 5072
5202 5073 .wp-media-editor-image-editor__handle--se {
5203 5074 bottom: -6px;
5204 - left: -6px;
5205 - cursor: nesw-resize;
5075 + right: -6px;
5076 + cursor: nwse-resize;
5206 5077 }
5207 -
5208 5078 /**
5209 5079 * Breakpoints & Media Queries
5210 5080 */
5211 5081 /**
@@ -5269,48 +5139,53 @@
5269 5139 align-items: center;
5270 5140 justify-content: center;
5271 5141 }
5272 5142
5273 -.media-editor .interface-interface-skeleton {
5274 - position: relative;
5275 - top: auto;
5276 - left: auto;
5277 - bottom: auto;
5278 - right: auto;
5279 - height: 100%;
5280 - max-height: none;
5143 +.media-editor .media-editor__body {
5144 + container-type: inline-size;
5145 + container-name: media-editor-body;
5146 + display: flex;
5281 5147 flex: 1;
5282 - flex-direction: column;
5148 + min-height: 0;
5283 5149 }
5284 5150
5285 -.media-editor-modal .media-editor .interface-interface-skeleton.interface-interface-skeleton {
5286 - top: auto;
5287 -}
5288 -
5289 -.media-editor .interface-interface-skeleton__editor {
5290 - min-width: 0;
5291 - flex: 1;
5292 -}
5293 -
5294 5151 .media-editor .media-editor__content {
5295 5152 display: flex;
5296 5153 flex: 1;
5297 5154 flex-direction: column;
5155 + min-width: 0;
5298 5156 min-height: 0;
5299 - margin: 0 24px;
5300 - border-radius: 8px;
5301 - overflow: hidden;
5157 + margin: 24px 24px 8px 24px;
5302 5158 }
5303 5159
5160 +@media (min-width: 600px) {
5161 + .media-editor .media-editor__content {
5162 + margin: 0 24px;
5163 + }
5164 +}
5165 +@container media-editor-body (min-width: 864px) {
5166 + .media-editor .media-editor__content {
5167 + min-width: 520px;
5168 + }
5169 +}
5304 5170 .media-editor .media-editor__canvas-toolbar {
5305 5171 display: flex;
5306 - flex-shrink: 0;
5172 + flex: 0 0 auto;
5173 + flex-direction: column;
5174 + align-items: center;
5175 + gap: 12px;
5176 +}
5177 +
5178 +.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation {
5179 + display: flex;
5307 5180 justify-content: center;
5181 + align-self: stretch;
5308 5182 background: #e0e0e0;
5183 + border-radius: 0 0 8px 8px;
5309 5184 padding: 8px 16px;
5310 5185 }
5311 5186
5312 -.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation {
5187 +.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation .rotation-ruler {
5313 5188 flex: 0 1 360px;
5314 5189 min-width: 0;
5315 5190 }
5316 5191
@@ -5318,8 +5193,9 @@
5318 5193 display: flex;
5319 5194 align-items: center;
5320 5195 justify-content: center;
5321 5196 background: #e0e0e0;
5197 + border-radius: 8px;
5322 5198 overflow: auto;
5323 5199 flex: 1;
5324 5200 min-height: 0;
5325 5201 }
@@ -5331,85 +5207,63 @@
5331 5207 .media-editor .media-editor__canvas-area img,
5332 5208 .media-editor .media-editor__canvas-area video {
5333 5209 max-width: 100%;
5334 5210 max-height: 100%;
5335 - -o-object-fit: contain;
5336 5211 object-fit: contain;
5337 5212 }
5338 5213
5339 5214 .media-editor .media-editor__sidebar {
5340 - box-sizing: border-box;
5215 + display: flex;
5216 + flex: 1;
5217 + flex-direction: column;
5218 + min-width: 0;
5219 + min-height: 0;
5220 + overflow: hidden;
5341 5221 }
5342 5222
5343 -.media-editor .media-editor__sidebar *,
5344 -.media-editor .media-editor__sidebar *::before,
5345 -.media-editor .media-editor__sidebar *::after {
5346 - box-sizing: inherit;
5347 -}
5348 -
5349 5223 @media (min-width: 600px) {
5350 5224 .media-editor .media-editor__sidebar {
5351 - padding-inline: 8px;
5225 + flex: none;
5226 + width: var(--wpds-dimension-surface-width-sm, 320px);
5352 5227 }
5353 5228 }
5354 -.media-editor .media-editor__sidebar-panel {
5355 - padding-bottom: 24px;
5229 +.media-editor .media-editor__tabs {
5230 + display: flex;
5231 + flex: 1;
5232 + flex-direction: column;
5233 + min-height: 0;
5356 5234 }
5357 5235
5358 -.media-editor .interface-interface-skeleton__sidebar {
5359 - border-top: 0;
5360 - box-shadow: none;
5361 - outline: 1px solid transparent;
5236 +.media-editor .media-editor__tablist {
5237 + flex-shrink: 0;
5238 + margin-inline: 24px;
5239 + background: #fff;
5240 + border-bottom: 1px solid #ddd;
5362 5241 }
5363 5242
5364 5243 .media-editor .media-editor__panel {
5365 - padding: 16px;
5244 + flex: 1;
5245 + min-height: 0;
5246 + overflow-y: auto;
5247 + padding-block: 24px;
5248 + padding-inline: 24px;
5366 5249 }
5367 5250
5368 -@media (min-width: 600px) {
5369 - .media-editor .media-editor__panel {
5370 - padding: 24px 0 0 24px;
5371 - }
5251 +.media-editor .media-editor__content:has(.media-editor-fine-rotation) .media-editor__canvas-area {
5252 + border-end-start-radius: 0;
5253 + border-end-end-radius: 0;
5372 5254 }
5373 -.media-editor .components-panel__header.media-editor__sidebar-header {
5374 - padding-right: 0;
5375 - padding-left: 8px;
5376 - margin-left: 24px;
5377 - margin-left: 0;
5378 -}
5379 5255
5380 -@media (min-width: 600px) {
5381 - .media-editor .components-panel__header.media-editor__sidebar-header {
5382 - margin-left: 24px;
5383 - }
5256 +.media-editor .media-editor__body.has-panel-open .media-editor__content {
5257 + display: none;
5384 5258 }
5385 -.media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5386 - padding: 0;
5387 -}
5388 5259
5389 5260 @media (min-width: 600px) {
5390 - .media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5261 + .media-editor .media-editor__body.has-panel-open .media-editor__content {
5391 5262 display: flex;
5263 + margin: 0 24px 0 0;
5392 5264 }
5393 5265 }
5394 -@media (min-width: 600px) and (max-width: 781px) {
5395 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5396 - position: relative !important;
5397 - }
5398 - .media-editor .interface-complementary-area__fill,
5399 - .media-editor .interface-complementary-area {
5400 - width: 280px !important;
5401 - }
5402 -}
5403 -@media (max-width: 599px) {
5404 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5405 - width: 100%;
5406 - }
5407 - .media-editor .interface-complementary-area__fill,
5408 - .media-editor .interface-complementary-area {
5409 - width: 100% !important;
5410 - }
5411 -}
5412 5266 .media-editor__snackbar {
5413 5267 position: fixed;
5414 5268 bottom: var(--wpds-dimension-size-md, 32px);
5415 5269 right: 0;
@@ -5446,40 +5300,16 @@
5446 5300
5447 5301 .media-editor-modal.components-modal__frame .media-editor-modal__footer {
5448 5302 flex-shrink: 0;
5449 5303 display: flex;
5450 - gap: 16px;
5451 - padding: 16px 32px 24px;
5452 - background: #fff;
5453 - z-index: 1000001;
5454 -}
5455 -
5456 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide {
5457 5304 flex-direction: row;
5458 5305 align-items: center;
5459 -}
5460 -
5461 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor__save-actions {
5462 - margin-right: auto;
5463 -}
5464 -
5465 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow {
5466 - flex-direction: column;
5467 -}
5468 -
5469 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow > .media-editor-image-controls {
5470 - align-self: center;
5471 -}
5472 -
5473 -.media-editor-modal__footer-row {
5474 - display: flex;
5475 - flex-wrap: wrap;
5476 - align-items: center;
5477 5306 gap: 16px;
5307 + padding: 24px;
5308 + background: #fff;
5478 5309 }
5479 5310
5480 -.media-editor-modal__footer-row .media-editor-image-controls,
5481 -.media-editor-modal__footer-row .media-editor__save-actions {
5311 +.media-editor-modal.components-modal__frame .media-editor-modal__footer .media-editor__save-actions {
5482 5312 margin-right: auto;
5483 5313 }
5484 5314
5485 5315 .media-editor-modal .media-editor__history-actions .components-button.has-icon:not([aria-disabled=true]) {
@@ -5656,12 +5486,12 @@
5656 5486 box-sizing: border-box;
5657 5487 color: #1e1e1e;
5658 5488 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5659 5489 -webkit-user-select: none;
5660 - -moz-user-select: none;
5661 5490 user-select: none;
5662 5491 touch-action: none;
5663 5492 cursor: ew-resize;
5493 + direction: ltr;
5664 5494 container-type: inline-size;
5665 5495 }
5666 5496
5667 5497 .rotation-ruler[data-disabled] {
@@ -5682,9 +5512,9 @@
5682 5512 height: 1px;
5683 5513 margin: -1px;
5684 5514 padding: 0;
5685 5515 border: 0;
5686 - clip: rect(0 0 0 0);
5516 + clip-path: inset(50%);
5687 5517 overflow: hidden;
5688 5518 white-space: nowrap;
5689 5519 }
5690 5520
@@ -5771,15 +5601,15 @@
5771 5601
5772 5602 .rotation-ruler__active-label-sign {
5773 5603 position: absolute;
5774 5604 top: 0;
5775 - left: 100%;
5605 + right: 100%;
5776 5606 }
5777 5607
5778 5608 .rotation-ruler__active-label-unit {
5779 5609 position: absolute;
5780 5610 top: 0;
5781 - right: 100%;
5611 + left: 100%;
5782 5612 }
5783 5613
5784 5614 @container (max-width: 220px) {
5785 5615 .rotation-ruler__tick--minor {
@@ -5797,9 +5627,9 @@
5797 5627 }
5798 5628
5799 5629 .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
5800 5630 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
5801 - font: normal 20px/1 dashicons;
5631 + font: 400 20px/1 dashicons;
5802 5632 content: "\f110";
5803 5633 margin-left: 5px;
5804 5634 vertical-align: middle;
5805 5635 }
@@ -5849,8 +5679,9 @@
5849 5679 position: relative;
5850 5680 padding: 16px 16px 24px;
5851 5681 height: 100%;
5852 5682 overflow: hidden;
5683 + border-right: 1px solid color-mix(in srgb, currentColor 10%, transparent);
5853 5684 }
5854 5685
5855 5686 .editor-collab-sidebar-panel__thread,
5856 5687 .editor-collab-sidebar-panel__add-note {
@@ -5906,9 +5737,8 @@
5906 5737 color: #757575;
5907 5738 }
5908 5739
5909 5740 .editor-collab-sidebar-panel__show-more-button {
5910 - width: -moz-fit-content;
5911 5741 width: fit-content;
5912 5742 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
5913 5743 cursor: var(--wpds-cursor-control, pointer);
5914 5744 }
@@ -6120,10 +5950,9 @@
6120 5950 position: absolute;
6121 5951 inset: 0;
6122 5952 width: 100%;
6123 5953 height: 100%;
6124 - -o-object-fit: cover;
6125 - object-fit: cover;
5954 + object-fit: cover;
6126 5955 border-radius: inherit;
6127 5956 opacity: 0;
6128 5957 }
6129 5958 .has-src > .editor-avatar__image > .editor-avatar__img {
@@ -6162,19 +5991,16 @@
6162 5991
6163 5992 .editor-avatar.is-badge {
6164 5993 display: inline-grid;
6165 5994 grid-template-columns: min-content 0fr;
6166 - -moz-column-gap: 0;
6167 - column-gap: 0;
5995 + column-gap: 0;
6168 5996 padding-inline-end: 0;
6169 5997 background-color: var(--wp-admin-theme-color, #3858e9);
6170 5998 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);
6171 - 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);
6172 5999 }
6173 6000 .editor-avatar.is-badge:hover {
6174 6001 grid-template-columns: min-content 1fr;
6175 - -moz-column-gap: 4px;
6176 - column-gap: 4px;
6002 + column-gap: 4px;
6177 6003 padding-inline-end: 8px;
6178 6004 transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
6179 6005 }
6180 6006 .editor-avatar.is-badge:hover .editor-avatar__name {
@@ -6364,43 +6190,24 @@
6364 6190 height: 32px;
6365 6191 background: #f0f0f0;
6366 6192 border-radius: 4px;
6367 6193 }
6368 -.editor-collaborators-presence:hover {
6194 +.editor-collaborators-presence:hover, .editor-collaborators-presence:has(.is-pressed) {
6369 6195 background-color: #e0e0e0;
6370 6196 }
6371 -.editor-collaborators-presence:has(.is-pressed) {
6372 - background-color: #e0e0e0;
6373 -}
6374 6197
6375 6198 .editor-header__center .editor-collaborators-presence {
6376 6199 margin-left: 8px;
6377 6200 }
6378 6201
6379 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
6380 - display: flex;
6381 - align-items: center;
6382 - cursor: var(--wpds-cursor-control, pointer);
6202 +.editor-collaborators-presence__button.editor-collaborators-presence__button {
6383 6203 position: relative;
6384 6204 padding: 4px;
6385 - border-radius: 4px;
6386 - height: 100%;
6387 - box-sizing: border-box;
6388 - color: #2f2f2f;
6389 - background: transparent;
6390 6205 }
6391 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover {
6206 +.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 {
6392 6207 background: transparent;
6393 6208 color: #2f2f2f;
6394 6209 }
6395 -.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 {
6396 - background: transparent;
6397 - color: #2f2f2f;
6398 -}
6399 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active) {
6400 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #007cba);
6401 - outline: none;
6402 -}
6403 6210
6404 6211 .editor-collapsible-block-toolbar {
6405 6212 overflow: hidden;
6406 6213 display: flex;
@@ -6495,11 +6302,8 @@
6495 6302 }
6496 6303 .editor-document-bar:hover {
6497 6304 background-color: #e0e0e0;
6498 6305 }
6499 -.editor-document-bar .components-button {
6500 - border-radius: 4px;
6501 -}
6502 6306 @media not (prefers-reduced-motion) {
6503 6307 .editor-document-bar .components-button {
6504 6308 transition: background-color 0.1s ease-out;
6505 6309 }
@@ -6571,9 +6375,9 @@
6571 6375 display: none;
6572 6376 pointer-events: none;
6573 6377 }
6574 6378 .editor-document-bar__icon-layout.editor-document-bar__icon-layout svg {
6575 - fill: #949494;
6379 + color: #949494;
6576 6380 }
6577 6381 @media (min-width: 600px) {
6578 6382 .editor-document-bar__icon-layout.editor-document-bar__icon-layout {
6579 6383 display: flex;
@@ -6803,8 +6607,23 @@
6803 6607 .editor-global-styles-sidebar .editor-global-styles-sidebar__header {
6804 6608 flex-grow: 1;
6805 6609 }
6806 6610
6611 +.editor-global-styles-sidebar:has(.global-styles-ui-screen-revisions) {
6612 + overflow: hidden;
6613 +}
6614 +
6615 +.editor-global-styles-sidebar__panel:has(.global-styles-ui-screen-revisions) {
6616 + display: flex;
6617 + flex-direction: column;
6618 + min-height: 0;
6619 +}
6620 +
6621 +.editor-global-styles-sidebar .global-styles-ui-sidebar__navigator-provider:has(.global-styles-ui-screen-revisions) {
6622 + flex: 1;
6623 + min-height: 0;
6624 +}
6625 +
6807 6626 .editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
6808 6627 margin: 0;
6809 6628 }
6810 6629
@@ -6864,10 +6683,9 @@
6864 6683 }
6865 6684 .editor-welcome-guide__image > img {
6866 6685 display: block;
6867 6686 max-width: 100%;
6868 - -o-object-fit: cover;
6869 - object-fit: cover;
6687 + object-fit: cover;
6870 6688 }
6871 6689 .editor-welcome-guide__heading {
6872 6690 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6873 6691 font-size: 24px;
@@ -6884,9 +6702,9 @@
6884 6702 .editor-welcome-guide__text img {
6885 6703 vertical-align: bottom;
6886 6704 }
6887 6705 .editor-welcome-guide .components-button:hover svg {
6888 - fill: #fff;
6706 + color: #fff;
6889 6707 }
6890 6708
6891 6709 .editor-header {
6892 6710 box-sizing: border-box;
@@ -7139,9 +6957,9 @@
7139 6957 }
7140 6958 .editor-editor-interface.is-distraction-free .editor-header > .edit-post-header__settings > .edit-post-header__post-preview-button {
7141 6959 visibility: hidden;
7142 6960 }
7143 -.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 {
6961 +.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 {
7144 6962 display: none;
7145 6963 }
7146 6964 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within {
7147 6965 opacity: 1 !important;
@@ -7148,15 +6966,15 @@
7148 6966 }
7149 6967 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within div {
7150 6968 transform: translateX(0) translateZ(0) !important;
7151 6969 }
7152 -.editor-editor-interface.is-distraction-free .components-editor-notices__dismissible {
6970 +.editor-editor-interface.is-distraction-free .editor-notices__dismissible {
7153 6971 position: absolute;
7154 6972 z-index: 35;
7155 6973 }
7156 -
7157 -.components-popover.more-menu-dropdown__content {
7158 - z-index: 99998;
6974 +.editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:hover,
6975 +.editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within {
6976 + z-index: 36;
7159 6977 }
7160 6978
7161 6979 .editor-inserter-sidebar {
7162 6980 box-sizing: border-box;
@@ -7286,9 +7104,9 @@
7286 7104 scrollbar-gutter: auto;
7287 7105 }
7288 7106
7289 7107 .editor-list-view-sidebar__list-view-panel-content {
7290 - padding: 4px;
7108 + padding: 8px;
7291 7109 }
7292 7110
7293 7111 .editor-list-view-sidebar__list-view-container {
7294 7112 display: flex;
@@ -7319,8 +7137,13 @@
7319 7137 line-height: 1.4;
7320 7138 color: #757575;
7321 7139 }
7322 7140
7141 +.editor-more-menu__popup {
7142 + max-height: var(--available-height);
7143 + max-width: var(--wpds-dimension-surface-width-sm, 320px);
7144 +}
7145 +
7323 7146 .editor-post-parent__panel,
7324 7147 .editor-post-order__panel {
7325 7148 padding-top: 8px;
7326 7149 }
@@ -7371,12 +7194,12 @@
7371 7194 margin: 0;
7372 7195 display: flex;
7373 7196 align-items: center;
7374 7197 flex-wrap: wrap;
7375 - -moz-column-gap: 8px;
7376 - column-gap: 8px;
7198 + column-gap: 8px;
7377 7199 row-gap: 4px;
7378 - word-break: break-word;
7200 + word-break: normal;
7201 + overflow-wrap: anywhere;
7379 7202 }
7380 7203 .editor-post-card-panel__icon {
7381 7204 flex: 0 0 24px;
7382 7205 width: 24px;
@@ -7481,13 +7304,11 @@
7481 7304 background-position: 0 0, 12px 12px;
7482 7305 background-size: 24px 24px;
7483 7306 }
7484 7307 .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
7485 - -o-object-fit: cover;
7486 - object-fit: cover;
7308 + object-fit: cover;
7487 7309 width: 100%;
7488 - -o-object-position: 50% 50%;
7489 - object-position: 50% 50%;
7310 + object-position: 50% 50%;
7490 7311 aspect-ratio: 2/1;
7491 7312 }
7492 7313
7493 7314 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) {
@@ -7538,9 +7359,9 @@
7538 7359 .editor-post-last-revision__title.components-button.has-icon:hover, .editor-post-last-revision__title.components-button.has-icon:active {
7539 7360 background: #f0f0f0;
7540 7361 }
7541 7362 .editor-post-last-revision__title.components-button.has-icon:focus {
7542 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
7363 + outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
7543 7364 border-radius: 0;
7544 7365 }
7545 7366
7546 7367 .components-panel__body.is-opened.editor-post-last-revision__panel {
@@ -7576,9 +7397,10 @@
7576 7397 align-items: center;
7577 7398 padding: 6px 0;
7578 7399 line-height: 20px;
7579 7400 hyphens: auto;
7580 - word-break: break-word;
7401 + word-break: normal;
7402 + overflow-wrap: anywhere;
7581 7403 }
7582 7404
7583 7405 .editor-post-panel__row-control {
7584 7406 flex-grow: 1;
@@ -7654,9 +7476,10 @@
7654 7476 .components-site-home {
7655 7477 display: block;
7656 7478 color: #757575;
7657 7479 font-size: 12px;
7658 - word-break: break-word;
7480 + word-break: normal;
7481 + overflow-wrap: anywhere;
7659 7482 }
7660 7483
7661 7484 .editor-post-publish-panel__header-publish-button,
7662 7485 .editor-post-publish-panel__header-cancel-button {
@@ -7717,9 +7540,10 @@
7717 7540
7718 7541 .post-publish-panel__postpublish .components-panel__body {
7719 7542 border-bottom: 1px solid #e0e0e0;
7720 7543 border-top: none;
7721 - word-break: break-word;
7544 + word-break: normal;
7545 + overflow-wrap: anywhere;
7722 7546 }
7723 7547
7724 7548 .post-publish-panel__postpublish-buttons {
7725 7549 display: flex;
@@ -7854,9 +7678,8 @@
7854 7678 }
7855 7679
7856 7680 .editor-revisions-code-diff__table {
7857 7681 width: 100%;
7858 - min-width: -moz-max-content;
7859 7682 min-width: max-content;
7860 7683 border: 0;
7861 7684 border-collapse: separate;
7862 7685 border-spacing: 0;
@@ -7890,9 +7713,8 @@
7890 7713 color: #757575;
7891 7714 text-align: left;
7892 7715 white-space: nowrap;
7893 7716 -webkit-user-select: none;
7894 - -moz-user-select: none;
7895 7717 user-select: none;
7896 7718 }
7897 7719
7898 7720 .editor-revisions-code-diff__line-number {
@@ -8005,9 +7827,10 @@
8005 7827 min-height: 0;
8006 7828 }
8007 7829
8008 7830 .editor-revision-fields-diff__value {
8009 - word-break: break-word;
7831 + word-break: normal;
7832 + overflow-wrap: anywhere;
8010 7833 }
8011 7834
8012 7835 .editor-revision-fields-diff__added {
8013 7836 background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
@@ -8173,29 +7996,24 @@
8173 7996 z-index: 1000001;
8174 7997 }
8175 7998
8176 7999 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8177 - -moz-column-count: 2;
8178 - column-count: 2;
8179 - -moz-column-gap: 24px;
8180 - column-gap: 24px;
8000 + column-count: 2;
8001 + column-gap: 24px;
8181 8002 padding-top: 2px;
8182 8003 }
8183 8004 @media (min-width: 782px) {
8184 8005 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8185 - -moz-column-count: 3;
8186 - column-count: 3;
8006 + column-count: 3;
8187 8007 }
8188 8008 }
8189 8009 @media (min-width: 1280px) {
8190 8010 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8191 - -moz-column-count: 4;
8192 - column-count: 4;
8011 + column-count: 4;
8193 8012 }
8194 8013 }
8195 8014 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8196 - -moz-column-break-inside: avoid;
8197 - break-inside: avoid-column;
8015 + break-inside: avoid-column;
8198 8016 }
8199 8017
8200 8018 .editor-post-template__dropdown .components-popover__content {
8201 8019 min-width: 240px;
@@ -8250,9 +8068,10 @@
8250 8068 margin: 0;
8251 8069 width: 100%;
8252 8070 box-shadow: none;
8253 8071 resize: none;
8254 - overflow: hidden;
8072 + field-sizing: content;
8073 + overflow: auto;
8255 8074 font-family: Menlo, Consolas, monaco, monospace;
8256 8075 line-height: 2.4;
8257 8076 min-height: 200px;
8258 8077 }
@@ -8282,11 +8101,8 @@
8282 8101 border-color: var(--wp-admin-theme-color);
8283 8102 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8284 8103 position: relative;
8285 8104 }
8286 -textarea.editor-post-text-editor::-moz-placeholder {
8287 - color: rgba(30, 30, 30, 0.62);
8288 -}
8289 8105 textarea.editor-post-text-editor::placeholder {
8290 8106 color: rgba(30, 30, 30, 0.62);
8291 8107 }
8292 8108
@@ -8306,9 +8122,10 @@
8306 8122 }
8307 8123 .editor-post-url__link,
8308 8124 .editor-post-url__front-page-link {
8309 8125 direction: ltr;
8310 - word-break: break-word;
8126 + word-break: normal;
8127 + overflow-wrap: anywhere;
8311 8128 }
8312 8129 .editor-post-url__front-page-link {
8313 8130 padding: 6px 12px;
8314 8131 border-radius: 2px;
@@ -8333,9 +8150,10 @@
8333 8150 }
8334 8151
8335 8152 .editor-post-url__panel-toggle,
8336 8153 .editor-post-parent__panel-toggle {
8337 - word-break: break-word;
8154 + word-break: normal;
8155 + overflow-wrap: anywhere;
8338 8156 }
8339 8157
8340 8158 .editor-post-url__intro {
8341 8159 margin: 0;
@@ -8358,14 +8176,18 @@
8358 8176 flex-grow: 1;
8359 8177 justify-content: center;
8360 8178 }
8361 8179
8362 -.editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
8180 +.editor-preview-dropdown__popup {
8181 + max-width: var(--wpds-dimension-surface-width-xs, 240px);
8182 +}
8183 +
8184 +.editor-preview-dropdown__toggle.has-icon.has-text {
8363 8185 padding-left: 4px;
8364 8186 padding-right: 6px;
8365 8187 }
8366 8188
8367 -.editor-preview-dropdown.is-responsive-editing .editor-preview-dropdown__toggle {
8189 +.editor-preview-dropdown__toggle.is-responsive-editing {
8368 8190 color: var(--wp-block-synced-color);
8369 8191 }
8370 8192
8371 8193 @media (prefers-reduced-motion: no-preference) {
@@ -8385,11 +8207,9 @@
8385 8207 bottom: 0;
8386 8208 padding: 0;
8387 8209 margin: auto 0;
8388 8210 width: 12px;
8389 - -webkit-appearance: none;
8390 - -moz-appearance: none;
8391 - appearance: none;
8211 + appearance: none;
8392 8212 cursor: ew-resize;
8393 8213 outline: none;
8394 8214 background: none;
8395 8215 border-radius: 9999px;
@@ -8475,30 +8295,51 @@
8475 8295 }
8476 8296 .editor-start-page-options__modal .block-editor-block-patterns-list {
8477 8297 padding-bottom: 72px;
8478 8298 }
8299 +.editor-start-page-options__modal .editor-start-page-options__sidebar {
8300 + display: none;
8301 +}
8302 +@media (min-width: 782px) {
8303 + .editor-start-page-options__modal .editor-start-page-options__sidebar {
8304 + display: flex;
8305 + position: absolute;
8306 + top: 72px;
8307 + right: 0;
8308 + bottom: 72px;
8309 + width: 280px;
8310 + padding: 24px;
8311 + overflow-x: visible;
8312 + overflow-y: auto;
8313 + }
8314 +}
8479 8315
8480 -.editor-start-page-options__modal-content .block-editor-block-patterns-list {
8481 - -moz-column-count: 2;
8482 - column-count: 2;
8483 - -moz-column-gap: 24px;
8484 - column-gap: 24px;
8316 +.editor-start-page-options__modal-content {
8317 + container-type: inline-size;
8485 8318 }
8319 +
8486 8320 @media (min-width: 782px) {
8487 - .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8488 - -moz-column-count: 3;
8489 - column-count: 3;
8321 + .editor-start-page-options__modal-content.has-pattern-categories {
8322 + margin-right: 280px;
8490 8323 }
8491 8324 }
8492 -@media (min-width: 1280px) {
8325 +
8326 +.editor-start-page-options__no-results {
8327 + padding: 32px;
8328 + text-align: center;
8329 +}
8330 +
8331 +.editor-start-page-options__modal-content .block-editor-block-patterns-list {
8332 + column-count: 2;
8333 + column-gap: 24px;
8334 +}
8335 +@container (min-width: 464px) {
8493 8336 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8494 - -moz-column-count: 4;
8495 - column-count: 4;
8337 + columns: 4 220px;
8496 8338 }
8497 8339 }
8498 8340 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8499 - -moz-column-break-inside: avoid;
8500 - break-inside: avoid-column;
8341 + break-inside: avoid-column;
8501 8342 margin-bottom: 24px;
8502 8343 }
8503 8344 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
8504 8345 min-height: 100px;
@@ -8524,28 +8365,18 @@
8524 8365 padding-bottom: 92px;
8525 8366 }
8526 8367
8527 8368 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8528 - -moz-column-count: 2;
8529 - column-count: 2;
8530 - -moz-column-gap: 24px;
8531 - column-gap: 24px;
8369 + column-count: 2;
8370 + column-gap: 24px;
8532 8371 }
8533 8372 @media (min-width: 782px) {
8534 8373 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8535 - -moz-column-count: 3;
8536 - column-count: 3;
8374 + columns: 4 220px;
8537 8375 }
8538 8376 }
8539 -@media (min-width: 1280px) {
8540 - .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8541 - -moz-column-count: 4;
8542 - column-count: 4;
8543 - }
8544 -}
8545 8377 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8546 - -moz-column-break-inside: avoid;
8547 - break-inside: avoid-column;
8378 + break-inside: avoid-column;
8548 8379 }
8549 8380 .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 {
8550 8381 display: none;
8551 8382 }
@@ -8639,8 +8470,11 @@
8639 8470 display: block;
8640 8471 width: 100%;
8641 8472 height: 100%;
8642 8473 }
8474 +.editor-styles-canvas.is-preview-mode {
8475 + padding: 0;
8476 +}
8643 8477
8644 8478 .editor-styles-canvas__section {
8645 8479 background: #fff;
8646 8480 bottom: 0;
@@ -8753,9 +8587,9 @@
8753 8587 max-width: none;
8754 8588 line-height: 1.4;
8755 8589 font-family: Menlo, Consolas, monaco, monospace;
8756 8590 font-size: 2.5em;
8757 - font-weight: normal;
8591 + font-weight: 400;
8758 8592 border: 1px solid #949494;
8759 8593 border-radius: 0;
8760 8594 padding: 16px;
8761 8595 }