PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/editor/style.css +281 -440 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-left: 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 - left: 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 - left: 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 12px 4px 40px;
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 12px 12px 40px;
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: left;
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-right: 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: left;
1009 913 line-height: 1.4;
1010 - margin-left: 12px;
914 + margin: 0 0 0 12px;
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 - left: -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;
@@ -1231,9 +1107,9 @@
1231 1107 /*rtl:end:ignore*/
1232 1108 background-size: 16px 16px;
1233 1109 }
1234 1110
1235 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
1111 +.global-styles-ui__shadow-preview-block {
1236 1112 border: #ddd 1px solid;
1237 1113 border-radius: 2px;
1238 1114 background-color: #fff;
1239 1115 width: 60%;
@@ -1239,22 +1115,44 @@
1239 1115 width: 60%;
1240 1116 height: 60px;
1241 1117 }
1242 1118
1243 -.global-styles-ui__shadow-editor__dropdown-content {
1119 +.global-styles-ui__text-shadow-preview-panel {
1120 + margin-block: -8px 16px;
1121 +}
1122 +
1123 +.global-styles-ui__text-shadow-preview-text {
1124 + font-size: 24px;
1125 +}
1126 +
1127 +.global-styles-ui__text-shadow-editor__header {
1128 + margin-block-end: 8px;
1129 +}
1130 +
1131 +.global-styles-ui__text-shadow-editor__inputs {
1132 + display: grid;
1133 + grid-template-columns: repeat(2, 1fr);
1134 + gap: 16px;
1135 +}
1136 +
1137 +.global-styles-ui__shadow-editor__dropdown-content,
1138 +.global-styles-ui__text-shadow-editor__dropdown-content {
1244 1139 width: 280px;
1245 1140 }
1246 1141
1247 -.global-styles-ui__shadow-editor-panel {
1142 +.global-styles-ui__shadow-editor-panel,
1143 +.global-styles-ui__text-shadow-editor-panel {
1248 1144 margin-bottom: 4px;
1249 1145 }
1250 1146
1251 -.global-styles-ui__shadow-editor__dropdown {
1147 +.global-styles-ui__shadow-editor__dropdown,
1148 +.global-styles-ui__text-shadow-editor__dropdown {
1252 1149 width: 100%;
1253 1150 position: relative;
1254 1151 }
1255 1152
1256 -.global-styles-ui__shadow-editor__dropdown-toggle {
1153 +.global-styles-ui__shadow-editor__dropdown-toggle,
1154 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
1257 1155 width: 100%;
1258 1156 height: auto;
1259 1157 padding-top: 8px;
1260 1158 padding-bottom: 8px;
@@ -1261,14 +1159,16 @@
1261 1159 text-align: left;
1262 1160 border-radius: inherit;
1263 1161 }
1264 1162
1265 -.global-styles-ui__shadow-editor__dropdown-toggle.is-open {
1163 +.global-styles-ui__shadow-editor__dropdown-toggle.is-open,
1164 +.global-styles-ui__text-shadow-editor__dropdown-toggle.is-open {
1266 1165 background: #f0f0f0;
1267 1166 color: var(--wp-admin-theme-color);
1268 1167 }
1269 1168
1270 -.global-styles-ui__shadow-editor__remove-button {
1169 +.global-styles-ui__shadow-editor__remove-button,
1170 +.global-styles-ui__text-shadow-editor__remove-button {
1271 1171 position: absolute;
1272 1172 right: 8px;
1273 1173 top: 8px;
1274 1174 opacity: 0;
@@ -1273,14 +1173,19 @@
1273 1173 top: 8px;
1274 1174 opacity: 0;
1275 1175 }
1276 1176
1277 -.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover {
1177 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover,
1178 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
1179 +.global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
1180 +.global-styles-ui__text-shadow-editor__remove-button:focus,
1181 +.global-styles-ui__text-shadow-editor__remove-button:hover {
1278 1182 opacity: 1;
1279 1183 }
1280 1184
1281 1185 @media (hover: none) {
1282 - .global-styles-ui__shadow-editor__remove-button {
1186 + .global-styles-ui__shadow-editor__remove-button,
1187 + .global-styles-ui__text-shadow-editor__remove-button {
1283 1188 opacity: 1;
1284 1189 }
1285 1190 }
1286 1191 .global-styles-ui-screen-css {
@@ -1499,8 +1404,12 @@
1499 1404 .dataviews__search {
1500 1405 flex-grow: 1;
1501 1406 }
1502 1407
1408 +.dataviews__search .dataviews-search {
1409 + flex-basis: 210px;
1410 +}
1411 +
1503 1412 .dataviews-no-results,
1504 1413 .dataviews-loading {
1505 1414 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1506 1415 flex-grow: 1;
@@ -1770,9 +1679,9 @@
1770 1679 cursor: var(--wpds-cursor-control, pointer);
1771 1680 }
1772 1681
1773 1682 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
1774 - fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1683 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1775 1684 }
1776 1685
1777 1686 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
1778 1687 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
@@ -1778,13 +1687,13 @@
1778 1687 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1779 1688 }
1780 1689
1781 1690 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
1782 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1691 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1783 1692 }
1784 1693
1785 1694 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
1786 - fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1695 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1787 1696 }
1788 1697
1789 1698 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
1790 1699 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
@@ -1846,10 +1755,11 @@
1846 1755 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1847 1756 }
1848 1757
1849 1758 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
1759 + /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
1760 + background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
1850 1761 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1851 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
1852 1762 }
1853 1763
1854 1764 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
1855 1765 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
@@ -1963,9 +1873,9 @@
1963 1873 }
1964 1874 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1965 1875 --checkbox-size: 24px;
1966 1876 flex-shrink: 0;
1967 - border: 1px solid #1e1e1e;
1877 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1968 1878 margin-right: 12px;
1969 1879 transition: none;
1970 1880 border-radius: 2px;
1971 1881 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1984,9 +1894,9 @@
1984 1894 /* Override core line-height. To be reviewed. */
1985 1895 line-height: normal;
1986 1896 }
1987 1897 }
1988 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
1898 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
1989 1899 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1990 1900 }
1991 1901
1992 1902 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
@@ -1995,14 +1905,14 @@
1995 1905 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1996 1906 box-shadow: none;
1997 1907 }
1998 1908
1999 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
1909 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
2000 1910 color: rgba(30, 30, 30, 0.62);
2001 1911 }
2002 1912
2003 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
2004 - color: rgba(30, 30, 30, 0.62);
1913 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
1914 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
2005 1915 }
2006 1916
2007 1917 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
2008 1918 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
@@ -2035,9 +1945,9 @@
2035 1945 display: inline-block;
2036 1946 vertical-align: middle;
2037 1947 width: 16px;
2038 1948 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
2039 - font: normal 30px/1 dashicons;
1949 + font: 400 30px/1 dashicons;
2040 1950 speak: none;
2041 1951 -webkit-font-smoothing: antialiased;
2042 1952 -moz-osx-font-smoothing: grayscale;
2043 1953 }
@@ -2048,17 +1958,23 @@
2048 1958 font-size: 21px;
2049 1959 }
2050 1960 }
2051 1961 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled {
2052 - background: #f0f0f0;
2053 - border-color: #ddd;
1962 + background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
1963 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
1964 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
2054 1965 cursor: default;
2055 1966 opacity: 1;
2056 1967 }
2057 1968
1969 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true]:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true][aria-checked=mixed]::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled[aria-checked=mixed]::before {
1970 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
1971 +}
1972 +
2058 1973 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2059 1974 position: relative;
2060 - background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
1975 + /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
1976 + background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
2061 1977 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2062 1978 margin: 0;
2063 1979 padding: 0;
2064 1980 width: var(--checkbox-size);
@@ -2081,9 +1997,9 @@
2081 1997 }
2082 1998
2083 1999 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2084 2000 --checkmark-size: var(--checkbox-size);
2085 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2001 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2086 2002 position: absolute;
2087 2003 left: 50%;
2088 2004 top: 50%;
2089 2005 transform: translate(-50%, -50%);
@@ -2118,9 +2034,9 @@
2118 2034 /* Override core line-height. To be reviewed. */
2119 2035 line-height: normal;
2120 2036 }
2121 2037 }
2122 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
2038 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true]) {
2123 2039 border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
2124 2040 }
2125 2041
2126 2042 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
@@ -2129,12 +2045,8 @@
2129 2045 border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2130 2046 box-shadow: none;
2131 2047 }
2132 2048
2133 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2134 - color: rgba(30, 30, 30, 0.62);
2135 -}
2136 -
2137 2049 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2138 2050 color: rgba(30, 30, 30, 0.62);
2139 2051 }
2140 2052
@@ -2157,12 +2069,8 @@
2157 2069 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2158 2070 background: var(--wpds-color-background-surface-neutral-strong, #fff);
2159 2071 }
2160 2072
2161 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2162 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2163 -}
2164 -
2165 2073 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2166 2074 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2167 2075 }
2168 2076
@@ -2207,12 +2115,8 @@
2207 2115 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2208 2116 box-sizing: border-box;
2209 2117 }
2210 2118
2211 -.dataviews-search {
2212 - flex-basis: 210px;
2213 -}
2214 -
2215 2119 .dataviews-filters__user-input-widget {
2216 2120 padding: var(--wpds-dimension-padding-lg, 16px);
2217 2121 }
2218 2122
@@ -2489,9 +2393,8 @@
2489 2393 }
2490 2394
2491 2395 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
2492 2396 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
2493 - width: -moz-fit-content;
2494 2397 width: fit-content;
2495 2398 }
2496 2399
2497 2400 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
@@ -2525,9 +2428,8 @@
2525 2428 }
2526 2429
2527 2430 .dataviews-view-grid .dataviews-view-grid__media img,
2528 2431 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
2529 - -o-object-fit: cover;
2530 2432 object-fit: cover;
2531 2433 width: 100%;
2532 2434 height: 100%;
2533 2435 }
@@ -2561,9 +2463,8 @@
2561 2463 }
2562 2464
2563 2465 .dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
2564 2466 .dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
2565 - -o-object-fit: contain;
2566 2467 object-fit: contain;
2567 2468 }
2568 2469
2569 2470 .dataviews-view-grid .dataviews-view-grid__fields,
@@ -2727,9 +2628,8 @@
2727 2628
2728 2629 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
2729 2630 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
2730 2631 display: flex;
2731 - width: -moz-max-content;
2732 2632 width: max-content;
2733 2633 flex: 0 0 auto;
2734 2634 gap: var(--wpds-dimension-gap-xs, 4px);
2735 2635 white-space: nowrap;
@@ -2822,10 +2722,8 @@
2822 2722 position: absolute;
2823 2723 z-index: 1;
2824 2724 inset: 0;
2825 2725 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
2826 - -webkit-appearance: none;
2827 - -moz-appearance: none;
2828 2726 appearance: none;
2829 2727 border: none;
2830 2728 background: none;
2831 2729 padding: 0;
@@ -2868,9 +2766,8 @@
2868 2766
2869 2767 .dataviews-view-list .dataviews-view-list__media-wrapper img {
2870 2768 width: 100%;
2871 2769 height: 100%;
2872 - -o-object-fit: cover;
2873 2770 object-fit: cover;
2874 2771 }
2875 2772
2876 2773 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -3009,9 +2906,9 @@
3009 2906
3010 2907 .dataviews-view-table th {
3011 2908 text-align: left;
3012 2909 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3013 - font-weight: normal;
2910 + font-weight: 400;
3014 2911 font-size: var(--wpds-typography-font-size-md, 13px);
3015 2912 }
3016 2913
3017 2914 .dataviews-view-table td,
@@ -3253,9 +3150,8 @@
3253 3150
3254 3151 .dataviews-column-primary__media img {
3255 3152 width: var(--wpds-dimension-size-md, 32px);
3256 3153 height: var(--wpds-dimension-size-md, 32px);
3257 - -o-object-fit: cover;
3258 3154 object-fit: cover;
3259 3155 }
3260 3156
3261 3157 .dataviews-column-primary__media::after {
@@ -3334,9 +3230,8 @@
3334 3230 text-align: start;
3335 3231 }
3336 3232
3337 3233 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
3338 - width: -moz-fit-content;
3339 3234 width: fit-content;
3340 3235 }
3341 3236
3342 3237 .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
@@ -3377,9 +3272,8 @@
3377 3272 position: relative;
3378 3273 }
3379 3274
3380 3275 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
3381 - -o-object-fit: cover;
3382 3276 object-fit: cover;
3383 3277 width: 100%;
3384 3278 height: 100%;
3385 3279 }
@@ -3400,9 +3294,8 @@
3400 3294 background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
3401 3295 }
3402 3296
3403 3297 .dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
3404 - -o-object-fit: contain;
3405 3298 object-fit: contain;
3406 3299 }
3407 3300
3408 3301 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
@@ -3567,9 +3460,8 @@
3567 3460 }
3568 3461
3569 3462 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
3570 3463 display: flex;
3571 - width: -moz-max-content;
3572 3464 width: max-content;
3573 3465 flex: 0 0 auto;
3574 3466 }
3575 3467
@@ -3701,9 +3593,8 @@
3701 3593 display: block;
3702 3594 width: 100%;
3703 3595 height: 100%;
3704 3596 margin: 0 auto;
3705 - -o-object-fit: cover;
3706 3597 object-fit: cover;
3707 3598 border-radius: 50%;
3708 3599 box-sizing: border-box;
3709 3600 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -3918,9 +3809,8 @@
3918 3809 display: block;
3919 3810 width: 100%;
3920 3811 height: 100%;
3921 3812 margin: 0 auto;
3922 - -o-object-fit: cover;
3923 3813 object-fit: cover;
3924 3814 border-radius: 50%;
3925 3815 box-sizing: border-box;
3926 3816 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -3975,27 +3865,19 @@
3975 3865 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
3976 3866 }
3977 3867
3978 3868 .dataviews-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]), .dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3979 - --focus-color: #cc1818;
3869 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3980 3870 }
3981 3871
3982 -.dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3983 - border-color: #cc1818;
3872 +.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3873 + border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3984 3874 }
3985 3875
3986 -.dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
3987 - border-color: #cc1818;
3988 -}
3989 -
3990 3876 .dataviews-validated-control__wrapper-with-error-delegate {
3991 3877 position: relative;
3992 3878 }
3993 3879
3994 -.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
3995 - border-color: #cc1818;
3996 -}
3997 -
3998 3880 .dataviews-validated-control__error-delegate {
3999 3881 position: absolute;
4000 3882 top: 0;
4001 3883 height: 100%;
@@ -4126,9 +4008,10 @@
4126 4008 align-items: center;
4127 4009 overflow: clip;
4128 4010 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
4129 4011 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4130 - word-break: break-word;
4012 + word-break: normal;
4013 + overflow-wrap: anywhere;
4131 4014 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4132 4015 }
4133 4016
4134 4017 .dataforms-layouts-panel__field-control:has(a, button) {
@@ -4387,9 +4270,9 @@
4387 4270 padding: 12px;
4388 4271 display: grid;
4389 4272 align-items: center;
4390 4273 grid-template-columns: min-content 1fr min-content;
4391 - grid-gap: 4px 8px;
4274 + gap: 4px 8px;
4392 4275 color: #1e1e1e;
4393 4276 }
4394 4277
4395 4278 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -4672,11 +4555,9 @@
4672 4555
4673 4556 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
4674 4557 width: 100%;
4675 4558 height: 100%;
4676 - -o-object-fit: cover;
4677 4559 object-fit: cover;
4678 - -o-object-position: 50% 50%;
4679 4560 object-position: 50% 50%;
4680 4561 }
4681 4562
4682 4563 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
@@ -4736,9 +4617,8 @@
4736 4617
4737 4618 .fields-controls__author-avatar img {
4738 4619 width: 16px;
4739 4620 height: 16px;
4740 - -o-object-fit: cover;
4741 4621 object-fit: cover;
4742 4622 opacity: 0;
4743 4623 border-radius: 100%;
4744 4624 }
@@ -4774,18 +4654,15 @@
4774 4654 padding: 0;
4775 4655 margin: 0;
4776 4656 }
4777 4657
4778 -.fields-controls__slug .fields-controls__slug-external-icon {
4779 - margin-left: 5ch;
4780 -}
4781 -
4782 4658 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
4783 4659 padding-inline-start: 0 !important;
4784 4660 }
4785 4661
4786 4662 .fields-controls__slug .fields-controls__slug-help-link {
4787 - word-break: break-word;
4663 + word-break: normal;
4664 + overflow-wrap: anywhere;
4788 4665 }
4789 4666
4790 4667 .fields-controls__slug .fields-controls__slug-help {
4791 4668 display: flex;
@@ -4913,9 +4790,8 @@
4913 4790
4914 4791 .media-editor-preview--image img {
4915 4792 max-width: 100%;
4916 4793 max-height: 100%;
4917 - -o-object-fit: contain;
4918 4794 object-fit: contain;
4919 4795 width: auto;
4920 4796 height: auto;
4921 4797 opacity: 0;
@@ -4937,9 +4813,8 @@
4937 4813 }
4938 4814 .media-editor-preview--video video {
4939 4815 max-width: 100%;
4940 4816 max-height: 100%;
4941 - -o-object-fit: contain;
4942 4817 object-fit: contain;
4943 4818 width: auto;
4944 4819 height: auto;
4945 4820 }
@@ -4985,8 +4860,9 @@
4985 4860 word-break: break-all;
4986 4861 margin-top: 8px;
4987 4862 }
4988 4863
4864 +/*!rtl:begin:ignore*/
4989 4865 .wp-media-editor-image-editor {
4990 4866 position: relative;
4991 4867 overflow: hidden;
4992 4868 width: 100%;
@@ -4992,9 +4868,8 @@
4992 4868 width: 100%;
4993 4869 height: 100%;
4994 4870 touch-action: none;
4995 4871 -webkit-user-select: none;
4996 - -moz-user-select: none;
4997 4872 user-select: none;
4998 4873 cursor: grab;
4999 4874 }
5000 4875
@@ -5112,10 +4987,8 @@
5112 4987 box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5113 4988 }
5114 4989
5115 4990 .wp-media-editor-image-editor__handle {
5116 - -webkit-appearance: none;
5117 - -moz-appearance: none;
5118 4991 appearance: none;
5119 4992 margin: 0;
5120 4993 padding: 0;
5121 4994 font: inherit;
@@ -5206,8 +5079,9 @@
5206 5079 right: -6px;
5207 5080 cursor: nwse-resize;
5208 5081 }
5209 5082
5083 +/*!rtl:end:ignore*/
5210 5084 /**
5211 5085 * Breakpoints & Media Queries
5212 5086 */
5213 5087 /**
@@ -5271,48 +5145,53 @@
5271 5145 align-items: center;
5272 5146 justify-content: center;
5273 5147 }
5274 5148
5275 -.media-editor .interface-interface-skeleton {
5276 - position: relative;
5277 - top: auto;
5278 - right: auto;
5279 - bottom: auto;
5280 - left: auto;
5281 - height: 100%;
5282 - max-height: none;
5149 +.media-editor .media-editor__body {
5150 + container-type: inline-size;
5151 + container-name: media-editor-body;
5152 + display: flex;
5283 5153 flex: 1;
5284 - flex-direction: column;
5154 + min-height: 0;
5285 5155 }
5286 5156
5287 -.media-editor-modal .media-editor .interface-interface-skeleton.interface-interface-skeleton {
5288 - top: auto;
5289 -}
5290 -
5291 -.media-editor .interface-interface-skeleton__editor {
5292 - min-width: 0;
5293 - flex: 1;
5294 -}
5295 -
5296 5157 .media-editor .media-editor__content {
5297 5158 display: flex;
5298 5159 flex: 1;
5299 5160 flex-direction: column;
5161 + min-width: 0;
5300 5162 min-height: 0;
5301 - margin: 0 24px;
5302 - border-radius: 8px;
5303 - overflow: hidden;
5163 + margin: 24px 24px 8px 24px;
5304 5164 }
5305 5165
5166 +@media (min-width: 600px) {
5167 + .media-editor .media-editor__content {
5168 + margin: 0 24px;
5169 + }
5170 +}
5171 +@container media-editor-body (min-width: 864px) {
5172 + .media-editor .media-editor__content {
5173 + min-width: 520px;
5174 + }
5175 +}
5306 5176 .media-editor .media-editor__canvas-toolbar {
5307 5177 display: flex;
5308 - flex-shrink: 0;
5178 + flex: 0 0 auto;
5179 + flex-direction: column;
5180 + align-items: center;
5181 + gap: 12px;
5182 +}
5183 +
5184 +.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation {
5185 + display: flex;
5309 5186 justify-content: center;
5187 + align-self: stretch;
5310 5188 background: #e0e0e0;
5189 + border-radius: 0 0 8px 8px;
5311 5190 padding: 8px 16px;
5312 5191 }
5313 5192
5314 -.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation {
5193 +.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation .rotation-ruler {
5315 5194 flex: 0 1 360px;
5316 5195 min-width: 0;
5317 5196 }
5318 5197
@@ -5320,8 +5199,9 @@
5320 5199 display: flex;
5321 5200 align-items: center;
5322 5201 justify-content: center;
5323 5202 background: #e0e0e0;
5203 + border-radius: 8px;
5324 5204 overflow: auto;
5325 5205 flex: 1;
5326 5206 min-height: 0;
5327 5207 }
@@ -5333,85 +5213,63 @@
5333 5213 .media-editor .media-editor__canvas-area img,
5334 5214 .media-editor .media-editor__canvas-area video {
5335 5215 max-width: 100%;
5336 5216 max-height: 100%;
5337 - -o-object-fit: contain;
5338 5217 object-fit: contain;
5339 5218 }
5340 5219
5341 5220 .media-editor .media-editor__sidebar {
5342 - box-sizing: border-box;
5221 + display: flex;
5222 + flex: 1;
5223 + flex-direction: column;
5224 + min-width: 0;
5225 + min-height: 0;
5226 + overflow: hidden;
5343 5227 }
5344 5228
5345 -.media-editor .media-editor__sidebar *,
5346 -.media-editor .media-editor__sidebar *::before,
5347 -.media-editor .media-editor__sidebar *::after {
5348 - box-sizing: inherit;
5349 -}
5350 -
5351 5229 @media (min-width: 600px) {
5352 5230 .media-editor .media-editor__sidebar {
5353 - padding-inline: 8px;
5231 + flex: none;
5232 + width: var(--wpds-dimension-surface-width-sm, 320px);
5354 5233 }
5355 5234 }
5356 -.media-editor .media-editor__sidebar-panel {
5357 - padding-bottom: 24px;
5235 +.media-editor .media-editor__tabs {
5236 + display: flex;
5237 + flex: 1;
5238 + flex-direction: column;
5239 + min-height: 0;
5358 5240 }
5359 5241
5360 -.media-editor .interface-interface-skeleton__sidebar {
5361 - border-top: 0;
5362 - box-shadow: none;
5363 - outline: 1px solid transparent;
5242 +.media-editor .media-editor__tablist {
5243 + flex-shrink: 0;
5244 + margin-inline: 24px;
5245 + background: #fff;
5246 + border-bottom: 1px solid #ddd;
5364 5247 }
5365 5248
5366 5249 .media-editor .media-editor__panel {
5367 - padding: 16px;
5250 + flex: 1;
5251 + min-height: 0;
5252 + overflow-y: auto;
5253 + padding-block: 24px;
5254 + padding-inline: 24px;
5368 5255 }
5369 5256
5370 -@media (min-width: 600px) {
5371 - .media-editor .media-editor__panel {
5372 - padding: 24px 24px 0 0;
5373 - }
5257 +.media-editor .media-editor__content:has(.media-editor-fine-rotation) .media-editor__canvas-area {
5258 + border-end-start-radius: 0;
5259 + border-end-end-radius: 0;
5374 5260 }
5375 -.media-editor .components-panel__header.media-editor__sidebar-header {
5376 - padding-left: 0;
5377 - padding-right: 8px;
5378 - margin-right: 24px;
5379 - margin-right: 0;
5380 -}
5381 5261
5382 -@media (min-width: 600px) {
5383 - .media-editor .components-panel__header.media-editor__sidebar-header {
5384 - margin-right: 24px;
5385 - }
5262 +.media-editor .media-editor__body.has-panel-open .media-editor__content {
5263 + display: none;
5386 5264 }
5387 -.media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5388 - padding: 0;
5389 -}
5390 5265
5391 5266 @media (min-width: 600px) {
5392 - .media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5267 + .media-editor .media-editor__body.has-panel-open .media-editor__content {
5393 5268 display: flex;
5269 + margin: 0 0 0 24px;
5394 5270 }
5395 5271 }
5396 -@media (min-width: 600px) and (max-width: 781px) {
5397 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5398 - position: relative !important;
5399 - }
5400 - .media-editor .interface-complementary-area__fill,
5401 - .media-editor .interface-complementary-area {
5402 - width: 280px !important;
5403 - }
5404 -}
5405 -@media (max-width: 599px) {
5406 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5407 - width: 100%;
5408 - }
5409 - .media-editor .interface-complementary-area__fill,
5410 - .media-editor .interface-complementary-area {
5411 - width: 100% !important;
5412 - }
5413 -}
5414 5272 .media-editor__snackbar {
5415 5273 position: fixed;
5416 5274 bottom: var(--wpds-dimension-size-md, 32px);
5417 5275 left: 0;
@@ -5448,40 +5306,16 @@
5448 5306
5449 5307 .media-editor-modal.components-modal__frame .media-editor-modal__footer {
5450 5308 flex-shrink: 0;
5451 5309 display: flex;
5452 - gap: 16px;
5453 - padding: 16px 32px 24px;
5454 - background: #fff;
5455 - z-index: 1000001;
5456 -}
5457 -
5458 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide {
5459 5310 flex-direction: row;
5460 5311 align-items: center;
5461 -}
5462 -
5463 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor__save-actions {
5464 - margin-left: auto;
5465 -}
5466 -
5467 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow {
5468 - flex-direction: column;
5469 -}
5470 -
5471 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow > .media-editor-image-controls {
5472 - align-self: center;
5473 -}
5474 -
5475 -.media-editor-modal__footer-row {
5476 - display: flex;
5477 - flex-wrap: wrap;
5478 - align-items: center;
5479 5312 gap: 16px;
5313 + padding: 24px;
5314 + background: #fff;
5480 5315 }
5481 5316
5482 -.media-editor-modal__footer-row .media-editor-image-controls,
5483 -.media-editor-modal__footer-row .media-editor__save-actions {
5317 +.media-editor-modal.components-modal__frame .media-editor-modal__footer .media-editor__save-actions {
5484 5318 margin-left: auto;
5485 5319 }
5486 5320
5487 5321 .media-editor-modal .media-editor__history-actions .components-button.has-icon:not([aria-disabled=true]) {
@@ -5658,12 +5492,13 @@
5658 5492 box-sizing: border-box;
5659 5493 color: #1e1e1e;
5660 5494 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5661 5495 -webkit-user-select: none;
5662 - -moz-user-select: none;
5663 5496 user-select: none;
5664 5497 touch-action: none;
5665 5498 cursor: ew-resize;
5499 + /*rtl:ignore*/
5500 + direction: ltr;
5666 5501 container-type: inline-size;
5667 5502 }
5668 5503
5669 5504 .rotation-ruler[data-disabled] {
@@ -5684,9 +5519,9 @@
5684 5519 height: 1px;
5685 5520 margin: -1px;
5686 5521 padding: 0;
5687 5522 border: 0;
5688 - clip: rect(0 0 0 0);
5523 + clip-path: inset(50%);
5689 5524 overflow: hidden;
5690 5525 white-space: nowrap;
5691 5526 }
5692 5527
@@ -5774,8 +5609,9 @@
5774 5609
5775 5610 .rotation-ruler__active-label-sign {
5776 5611 position: absolute;
5777 5612 top: 0;
5613 + /*rtl:ignore*/
5778 5614 right: 100%;
5779 5615 }
5780 5616
5781 5617 .rotation-ruler__active-label-unit {
@@ -5780,8 +5616,9 @@
5780 5616
5781 5617 .rotation-ruler__active-label-unit {
5782 5618 position: absolute;
5783 5619 top: 0;
5620 + /*rtl:ignore*/
5784 5621 left: 100%;
5785 5622 }
5786 5623
5787 5624 @container (max-width: 220px) {
@@ -5800,9 +5637,9 @@
5800 5637 }
5801 5638
5802 5639 .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
5803 5640 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
5804 - font: normal 20px/1 dashicons;
5641 + font: 400 20px/1 dashicons;
5805 5642 content: "\f110";
5806 5643 margin-right: 5px;
5807 5644 vertical-align: middle;
5808 5645 }
@@ -5852,8 +5689,9 @@
5852 5689 position: relative;
5853 5690 padding: 16px 16px 24px;
5854 5691 height: 100%;
5855 5692 overflow: hidden;
5693 + border-left: 1px solid color-mix(in srgb, currentColor 10%, transparent);
5856 5694 }
5857 5695
5858 5696 .editor-collab-sidebar-panel__thread,
5859 5697 .editor-collab-sidebar-panel__add-note {
@@ -5909,9 +5747,8 @@
5909 5747 color: #757575;
5910 5748 }
5911 5749
5912 5750 .editor-collab-sidebar-panel__show-more-button {
5913 - width: -moz-fit-content;
5914 5751 width: fit-content;
5915 5752 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
5916 5753 cursor: var(--wpds-cursor-control, pointer);
5917 5754 }
@@ -6123,10 +5960,9 @@
6123 5960 position: absolute;
6124 5961 inset: 0;
6125 5962 width: 100%;
6126 5963 height: 100%;
6127 - -o-object-fit: cover;
6128 - object-fit: cover;
5964 + object-fit: cover;
6129 5965 border-radius: inherit;
6130 5966 opacity: 0;
6131 5967 }
6132 5968 .has-src > .editor-avatar__image > .editor-avatar__img {
@@ -6165,19 +6001,16 @@
6165 6001
6166 6002 .editor-avatar.is-badge {
6167 6003 display: inline-grid;
6168 6004 grid-template-columns: min-content 0fr;
6169 - -moz-column-gap: 0;
6170 - column-gap: 0;
6005 + column-gap: 0;
6171 6006 padding-inline-end: 0;
6172 6007 background-color: var(--wp-admin-theme-color, #3858e9);
6173 6008 transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
6174 - 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);
6175 6009 }
6176 6010 .editor-avatar.is-badge:hover {
6177 6011 grid-template-columns: min-content 1fr;
6178 - -moz-column-gap: 4px;
6179 - column-gap: 4px;
6012 + column-gap: 4px;
6180 6013 padding-inline-end: 8px;
6181 6014 transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
6182 6015 }
6183 6016 .editor-avatar.is-badge:hover .editor-avatar__name {
@@ -6367,43 +6200,24 @@
6367 6200 height: 32px;
6368 6201 background: #f0f0f0;
6369 6202 border-radius: 4px;
6370 6203 }
6371 -.editor-collaborators-presence:hover {
6204 +.editor-collaborators-presence:hover, .editor-collaborators-presence:has(.is-pressed) {
6372 6205 background-color: #e0e0e0;
6373 6206 }
6374 -.editor-collaborators-presence:has(.is-pressed) {
6375 - background-color: #e0e0e0;
6376 -}
6377 6207
6378 6208 .editor-header__center .editor-collaborators-presence {
6379 6209 margin-right: 8px;
6380 6210 }
6381 6211
6382 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
6383 - display: flex;
6384 - align-items: center;
6385 - cursor: var(--wpds-cursor-control, pointer);
6212 +.editor-collaborators-presence__button.editor-collaborators-presence__button {
6386 6213 position: relative;
6387 6214 padding: 4px;
6388 - border-radius: 4px;
6389 - height: 100%;
6390 - box-sizing: border-box;
6391 - color: #2f2f2f;
6392 - background: transparent;
6393 6215 }
6394 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:hover {
6216 +.editor-collaborators-presence__button.editor-collaborators-presence__button, .editor-collaborators-presence__button.editor-collaborators-presence__button:hover, .editor-collaborators-presence__button.editor-collaborators-presence__button.is-pressed, .editor-collaborators-presence__button.editor-collaborators-presence__button.is-pressed:hover {
6395 6217 background: transparent;
6396 6218 color: #2f2f2f;
6397 6219 }
6398 -.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 {
6399 - background: transparent;
6400 - color: #2f2f2f;
6401 -}
6402 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active) {
6403 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #007cba);
6404 - outline: none;
6405 -}
6406 6220
6407 6221 .editor-collapsible-block-toolbar {
6408 6222 overflow: hidden;
6409 6223 display: flex;
@@ -6498,11 +6312,8 @@
6498 6312 }
6499 6313 .editor-document-bar:hover {
6500 6314 background-color: #e0e0e0;
6501 6315 }
6502 -.editor-document-bar .components-button {
6503 - border-radius: 4px;
6504 -}
6505 6316 @media not (prefers-reduced-motion) {
6506 6317 .editor-document-bar .components-button {
6507 6318 transition: background-color 0.1s ease-out;
6508 6319 }
@@ -6574,9 +6385,9 @@
6574 6385 display: none;
6575 6386 pointer-events: none;
6576 6387 }
6577 6388 .editor-document-bar__icon-layout.editor-document-bar__icon-layout svg {
6578 - fill: #949494;
6389 + color: #949494;
6579 6390 }
6580 6391 @media (min-width: 600px) {
6581 6392 .editor-document-bar__icon-layout.editor-document-bar__icon-layout {
6582 6393 display: flex;
@@ -6806,8 +6617,23 @@
6806 6617 .editor-global-styles-sidebar .editor-global-styles-sidebar__header {
6807 6618 flex-grow: 1;
6808 6619 }
6809 6620
6621 +.editor-global-styles-sidebar:has(.global-styles-ui-screen-revisions) {
6622 + overflow: hidden;
6623 +}
6624 +
6625 +.editor-global-styles-sidebar__panel:has(.global-styles-ui-screen-revisions) {
6626 + display: flex;
6627 + flex-direction: column;
6628 + min-height: 0;
6629 +}
6630 +
6631 +.editor-global-styles-sidebar .global-styles-ui-sidebar__navigator-provider:has(.global-styles-ui-screen-revisions) {
6632 + flex: 1;
6633 + min-height: 0;
6634 +}
6635 +
6810 6636 .editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
6811 6637 margin: 0;
6812 6638 }
6813 6639
@@ -6867,10 +6693,9 @@
6867 6693 }
6868 6694 .editor-welcome-guide__image > img {
6869 6695 display: block;
6870 6696 max-width: 100%;
6871 - -o-object-fit: cover;
6872 - object-fit: cover;
6697 + object-fit: cover;
6873 6698 }
6874 6699 .editor-welcome-guide__heading {
6875 6700 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6876 6701 font-size: 24px;
@@ -6887,9 +6712,9 @@
6887 6712 .editor-welcome-guide__text img {
6888 6713 vertical-align: bottom;
6889 6714 }
6890 6715 .editor-welcome-guide .components-button:hover svg {
6891 - fill: #fff;
6716 + color: #fff;
6892 6717 }
6893 6718
6894 6719 .editor-header {
6895 6720 box-sizing: border-box;
@@ -7142,9 +6967,9 @@
7142 6967 }
7143 6968 .editor-editor-interface.is-distraction-free .editor-header > .edit-post-header__settings > .edit-post-header__post-preview-button {
7144 6969 visibility: hidden;
7145 6970 }
7146 -.editor-editor-interface.is-distraction-free .editor-header > .editor-header__toolbar .editor-document-tools__document-overview-toggle, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-preview-dropdown, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .interface-pinned-items, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-zoom-out-toggle {
6971 +.editor-editor-interface.is-distraction-free .editor-header > .editor-header__toolbar .editor-document-tools__document-overview-toggle, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-preview-dropdown__toggle, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .interface-pinned-items, .editor-editor-interface.is-distraction-free .editor-header > .editor-header__settings > .editor-zoom-out-toggle {
7147 6972 display: none;
7148 6973 }
7149 6974 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within {
7150 6975 opacity: 1 !important;
@@ -7151,15 +6976,15 @@
7151 6976 }
7152 6977 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within div {
7153 6978 transform: translateX(0) translateZ(0) !important;
7154 6979 }
7155 -.editor-editor-interface.is-distraction-free .components-editor-notices__dismissible {
6980 +.editor-editor-interface.is-distraction-free .editor-notices__dismissible {
7156 6981 position: absolute;
7157 6982 z-index: 35;
7158 6983 }
7159 -
7160 -.components-popover.more-menu-dropdown__content {
7161 - z-index: 99998;
6984 +.editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:hover,
6985 +.editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within {
6986 + z-index: 36;
7162 6987 }
7163 6988
7164 6989 .editor-inserter-sidebar {
7165 6990 box-sizing: border-box;
@@ -7289,9 +7114,9 @@
7289 7114 scrollbar-gutter: auto;
7290 7115 }
7291 7116
7292 7117 .editor-list-view-sidebar__list-view-panel-content {
7293 - padding: 4px;
7118 + padding: 8px;
7294 7119 }
7295 7120
7296 7121 .editor-list-view-sidebar__list-view-container {
7297 7122 display: flex;
@@ -7322,8 +7147,13 @@
7322 7147 line-height: 1.4;
7323 7148 color: #757575;
7324 7149 }
7325 7150
7151 +.editor-more-menu__popup {
7152 + max-height: var(--available-height);
7153 + max-width: var(--wpds-dimension-surface-width-sm, 320px);
7154 +}
7155 +
7326 7156 .editor-post-parent__panel,
7327 7157 .editor-post-order__panel {
7328 7158 padding-top: 8px;
7329 7159 }
@@ -7374,12 +7204,12 @@
7374 7204 margin: 0;
7375 7205 display: flex;
7376 7206 align-items: center;
7377 7207 flex-wrap: wrap;
7378 - -moz-column-gap: 8px;
7379 - column-gap: 8px;
7208 + column-gap: 8px;
7380 7209 row-gap: 4px;
7381 - word-break: break-word;
7210 + word-break: normal;
7211 + overflow-wrap: anywhere;
7382 7212 }
7383 7213 .editor-post-card-panel__icon {
7384 7214 flex: 0 0 24px;
7385 7215 width: 24px;
@@ -7486,13 +7316,11 @@
7486 7316 /*rtl:end:ignore*/
7487 7317 background-size: 24px 24px;
7488 7318 }
7489 7319 .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
7490 - -o-object-fit: cover;
7491 - object-fit: cover;
7320 + object-fit: cover;
7492 7321 width: 100%;
7493 - -o-object-position: 50% 50%;
7494 - object-position: 50% 50%;
7322 + object-position: 50% 50%;
7495 7323 aspect-ratio: 2/1;
7496 7324 }
7497 7325
7498 7326 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) {
@@ -7543,9 +7371,9 @@
7543 7371 .editor-post-last-revision__title.components-button.has-icon:hover, .editor-post-last-revision__title.components-button.has-icon:active {
7544 7372 background: #f0f0f0;
7545 7373 }
7546 7374 .editor-post-last-revision__title.components-button.has-icon:focus {
7547 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
7375 + outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
7548 7376 border-radius: 0;
7549 7377 }
7550 7378
7551 7379 .components-panel__body.is-opened.editor-post-last-revision__panel {
@@ -7581,9 +7409,10 @@
7581 7409 align-items: center;
7582 7410 padding: 6px 0;
7583 7411 line-height: 20px;
7584 7412 hyphens: auto;
7585 - word-break: break-word;
7413 + word-break: normal;
7414 + overflow-wrap: anywhere;
7586 7415 }
7587 7416
7588 7417 .editor-post-panel__row-control {
7589 7418 flex-grow: 1;
@@ -7659,9 +7488,10 @@
7659 7488 .components-site-home {
7660 7489 display: block;
7661 7490 color: #757575;
7662 7491 font-size: 12px;
7663 - word-break: break-word;
7492 + word-break: normal;
7493 + overflow-wrap: anywhere;
7664 7494 }
7665 7495
7666 7496 .editor-post-publish-panel__header-publish-button,
7667 7497 .editor-post-publish-panel__header-cancel-button {
@@ -7722,9 +7552,10 @@
7722 7552
7723 7553 .post-publish-panel__postpublish .components-panel__body {
7724 7554 border-bottom: 1px solid #e0e0e0;
7725 7555 border-top: none;
7726 - word-break: break-word;
7556 + word-break: normal;
7557 + overflow-wrap: anywhere;
7727 7558 }
7728 7559
7729 7560 .post-publish-panel__postpublish-buttons {
7730 7561 display: flex;
@@ -7859,9 +7690,8 @@
7859 7690 }
7860 7691
7861 7692 .editor-revisions-code-diff__table {
7862 7693 width: 100%;
7863 - min-width: -moz-max-content;
7864 7694 min-width: max-content;
7865 7695 border: 0;
7866 7696 border-collapse: separate;
7867 7697 border-spacing: 0;
@@ -7895,9 +7725,8 @@
7895 7725 color: #757575;
7896 7726 text-align: right;
7897 7727 white-space: nowrap;
7898 7728 -webkit-user-select: none;
7899 - -moz-user-select: none;
7900 7729 user-select: none;
7901 7730 }
7902 7731
7903 7732 .editor-revisions-code-diff__line-number {
@@ -8011,9 +7840,10 @@
8011 7840 min-height: 0;
8012 7841 }
8013 7842
8014 7843 .editor-revision-fields-diff__value {
8015 - word-break: break-word;
7844 + word-break: normal;
7845 + overflow-wrap: anywhere;
8016 7846 }
8017 7847
8018 7848 .editor-revision-fields-diff__added {
8019 7849 background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
@@ -8179,29 +8009,24 @@
8179 8009 z-index: 1000001;
8180 8010 }
8181 8011
8182 8012 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8183 - -moz-column-count: 2;
8184 - column-count: 2;
8185 - -moz-column-gap: 24px;
8186 - column-gap: 24px;
8013 + column-count: 2;
8014 + column-gap: 24px;
8187 8015 padding-top: 2px;
8188 8016 }
8189 8017 @media (min-width: 782px) {
8190 8018 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8191 - -moz-column-count: 3;
8192 - column-count: 3;
8019 + column-count: 3;
8193 8020 }
8194 8021 }
8195 8022 @media (min-width: 1280px) {
8196 8023 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8197 - -moz-column-count: 4;
8198 - column-count: 4;
8024 + column-count: 4;
8199 8025 }
8200 8026 }
8201 8027 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8202 - -moz-column-break-inside: avoid;
8203 - break-inside: avoid-column;
8028 + break-inside: avoid-column;
8204 8029 }
8205 8030
8206 8031 .editor-post-template__dropdown .components-popover__content {
8207 8032 min-width: 240px;
@@ -8256,9 +8081,10 @@
8256 8081 margin: 0;
8257 8082 width: 100%;
8258 8083 box-shadow: none;
8259 8084 resize: none;
8260 - overflow: hidden;
8085 + field-sizing: content;
8086 + overflow: auto;
8261 8087 font-family: Menlo, Consolas, monaco, monospace;
8262 8088 line-height: 2.4;
8263 8089 min-height: 200px;
8264 8090 }
@@ -8288,11 +8114,8 @@
8288 8114 border-color: var(--wp-admin-theme-color);
8289 8115 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8290 8116 position: relative;
8291 8117 }
8292 -textarea.editor-post-text-editor::-moz-placeholder {
8293 - color: rgba(30, 30, 30, 0.62);
8294 -}
8295 8118 textarea.editor-post-text-editor::placeholder {
8296 8119 color: rgba(30, 30, 30, 0.62);
8297 8120 }
8298 8121
@@ -8314,9 +8137,10 @@
8314 8137 /* rtl:begin:ignore */
8315 8138 .editor-post-url__link,
8316 8139 .editor-post-url__front-page-link {
8317 8140 direction: ltr;
8318 - word-break: break-word;
8141 + word-break: normal;
8142 + overflow-wrap: anywhere;
8319 8143 }
8320 8144
8321 8145 /* rtl:end:ignore */
8322 8146 .editor-post-url__front-page-link {
@@ -8343,9 +8167,10 @@
8343 8167 }
8344 8168
8345 8169 .editor-post-url__panel-toggle,
8346 8170 .editor-post-parent__panel-toggle {
8347 - word-break: break-word;
8171 + word-break: normal;
8172 + overflow-wrap: anywhere;
8348 8173 }
8349 8174
8350 8175 .editor-post-url__intro {
8351 8176 margin: 0;
@@ -8368,14 +8193,18 @@
8368 8193 flex-grow: 1;
8369 8194 justify-content: center;
8370 8195 }
8371 8196
8372 -.editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text {
8197 +.editor-preview-dropdown__popup {
8198 + max-width: var(--wpds-dimension-surface-width-xs, 240px);
8199 +}
8200 +
8201 +.editor-preview-dropdown__toggle.has-icon.has-text {
8373 8202 padding-right: 4px;
8374 8203 padding-left: 6px;
8375 8204 }
8376 8205
8377 -.editor-preview-dropdown.is-responsive-editing .editor-preview-dropdown__toggle {
8206 +.editor-preview-dropdown__toggle.is-responsive-editing {
8378 8207 color: var(--wp-block-synced-color);
8379 8208 }
8380 8209
8381 8210 @media (prefers-reduced-motion: no-preference) {
@@ -8395,11 +8224,9 @@
8395 8224 bottom: 0;
8396 8225 padding: 0;
8397 8226 margin: auto 0;
8398 8227 width: 12px;
8399 - -webkit-appearance: none;
8400 - -moz-appearance: none;
8401 - appearance: none;
8228 + appearance: none;
8402 8229 cursor: ew-resize;
8403 8230 outline: none;
8404 8231 background: none;
8405 8232 border-radius: 9999px;
@@ -8485,30 +8312,51 @@
8485 8312 }
8486 8313 .editor-start-page-options__modal .block-editor-block-patterns-list {
8487 8314 padding-bottom: 72px;
8488 8315 }
8316 +.editor-start-page-options__modal .editor-start-page-options__sidebar {
8317 + display: none;
8318 +}
8319 +@media (min-width: 782px) {
8320 + .editor-start-page-options__modal .editor-start-page-options__sidebar {
8321 + display: flex;
8322 + position: absolute;
8323 + top: 72px;
8324 + left: 0;
8325 + bottom: 72px;
8326 + width: 280px;
8327 + padding: 24px;
8328 + overflow-x: visible;
8329 + overflow-y: auto;
8330 + }
8331 +}
8489 8332
8490 -.editor-start-page-options__modal-content .block-editor-block-patterns-list {
8491 - -moz-column-count: 2;
8492 - column-count: 2;
8493 - -moz-column-gap: 24px;
8494 - column-gap: 24px;
8333 +.editor-start-page-options__modal-content {
8334 + container-type: inline-size;
8495 8335 }
8336 +
8496 8337 @media (min-width: 782px) {
8497 - .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8498 - -moz-column-count: 3;
8499 - column-count: 3;
8338 + .editor-start-page-options__modal-content.has-pattern-categories {
8339 + margin-left: 280px;
8500 8340 }
8501 8341 }
8502 -@media (min-width: 1280px) {
8342 +
8343 +.editor-start-page-options__no-results {
8344 + padding: 32px;
8345 + text-align: center;
8346 +}
8347 +
8348 +.editor-start-page-options__modal-content .block-editor-block-patterns-list {
8349 + column-count: 2;
8350 + column-gap: 24px;
8351 +}
8352 +@container (min-width: 464px) {
8503 8353 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8504 - -moz-column-count: 4;
8505 - column-count: 4;
8354 + columns: 4 220px;
8506 8355 }
8507 8356 }
8508 8357 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8509 - -moz-column-break-inside: avoid;
8510 - break-inside: avoid-column;
8358 + break-inside: avoid-column;
8511 8359 margin-bottom: 24px;
8512 8360 }
8513 8361 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
8514 8362 min-height: 100px;
@@ -8534,28 +8382,18 @@
8534 8382 padding-bottom: 92px;
8535 8383 }
8536 8384
8537 8385 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8538 - -moz-column-count: 2;
8539 - column-count: 2;
8540 - -moz-column-gap: 24px;
8541 - column-gap: 24px;
8386 + column-count: 2;
8387 + column-gap: 24px;
8542 8388 }
8543 8389 @media (min-width: 782px) {
8544 8390 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8545 - -moz-column-count: 3;
8546 - column-count: 3;
8391 + columns: 4 220px;
8547 8392 }
8548 8393 }
8549 -@media (min-width: 1280px) {
8550 - .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8551 - -moz-column-count: 4;
8552 - column-count: 4;
8553 - }
8554 -}
8555 8394 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8556 - -moz-column-break-inside: avoid;
8557 - break-inside: avoid-column;
8395 + break-inside: avoid-column;
8558 8396 }
8559 8397 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-patterns-list__item-title {
8560 8398 display: none;
8561 8399 }
@@ -8649,8 +8487,11 @@
8649 8487 display: block;
8650 8488 width: 100%;
8651 8489 height: 100%;
8652 8490 }
8491 +.editor-styles-canvas.is-preview-mode {
8492 + padding: 0;
8493 +}
8653 8494
8654 8495 .editor-styles-canvas__section {
8655 8496 background: #fff;
8656 8497 bottom: 0;
@@ -8763,9 +8604,9 @@
8763 8604 max-width: none;
8764 8605 line-height: 1.4;
8765 8606 font-family: Menlo, Consolas, monaco, monospace;
8766 8607 font-size: 2.5em;
8767 - font-weight: normal;
8608 + font-weight: 400;
8768 8609 border: 1px solid #949494;
8769 8610 border-radius: 0;
8770 8611 padding: 16px;
8771 8612 }