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-rtl.css +296 -462 23.9.1 → 24.1.0 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 }