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 +459 -553 23.8.0 → 24.1.0 View file →
@@ -693,9 +693,9 @@
693 693 .font-library__footer {
694 694 position: absolute;
695 695 width: 100%;
696 696 bottom: 0;
697 - border-top: 1px solid #ddd;
697 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
698 698 padding: 24px;
699 699 background-color: #fff;
700 700 box-sizing: border-box;
701 701 flex-grow: 0 !important;
@@ -737,11 +737,15 @@
737 737 .font-library__fonts-list-item {
738 738 margin-bottom: 0;
739 739 }
740 740
741 +.font-library__font-demo {
742 + position: relative;
743 +}
744 +
741 745 .font-library__font-card {
742 746 box-sizing: border-box;
743 - border: 1px solid #ddd;
747 + border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
744 748 width: 100%;
745 749 height: auto !important;
746 750 padding: 16px;
747 751 margin-top: -1px; /* To collapse the margin with the previous element */
@@ -755,13 +759,13 @@
755 759 position: relative;
756 760 }
757 761
758 762 .font-library__font-card .font-library__font-card__name {
759 - font-weight: bold;
763 + font-weight: 700;
760 764 }
761 765
762 766 .font-library__font-card .font-library__font-card__count {
763 - color: #757575;
767 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
764 768 }
765 769
766 770 .font-library__font-card .font-library__font-variant_demo-image {
767 771 display: block;
@@ -768,8 +772,25 @@
768 772 height: 24px;
769 773 width: auto;
770 774 }
771 775
776 +@media not (prefers-reduced-motion) {
777 + .font-library__font-card .font-library__font-variant_demo-image {
778 + transition: opacity var(--wpds-motion-duration-lg, 300ms) var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
779 + }
780 +}
781 +.font-library__font-card .font-library__font-variant_demo-image.is-loading {
782 + position: absolute;
783 + top: 0;
784 + left: 0;
785 + opacity: 0;
786 +}
787 +
788 +.font-library__font-card .font-library__font-variant-demo-skeleton {
789 + height: 24px;
790 + border-radius: var(--wpds-border-radius-sm, 2px);
791 +}
792 +
772 793 .font-library__font-card .font-library__font-variant_demo-text {
773 794 white-space: nowrap;
774 795 flex-shrink: 0;
775 796 }
@@ -781,9 +802,9 @@
781 802 }
782 803 .font-library-modal__tablist-container {
783 804 position: sticky;
784 805 top: 0;
785 - border-bottom: 1px solid #ddd;
806 + border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
786 807 background: #fff;
787 808 z-index: 1;
788 809 }
789 810
@@ -804,9 +825,9 @@
804 825 width: 80%;
805 826 }
806 827
807 828 .font-library__local-fonts .font-library__upload-area__text {
808 - color: #757575;
829 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
809 830 }
810 831
811 832 .font-library__google-fonts-confirm {
812 833 display: flex;
@@ -841,113 +862,22 @@
841 862 .font-library__select-all .components-checkbox-control__label {
842 863 padding-left: 16px;
843 864 }
844 865
845 -.global-styles-ui-pagination .components-button.is-tertiary {
846 - width: 32px;
847 - height: 32px;
848 - justify-content: center;
849 -}
850 -
851 -.global-styles-ui-screen-revisions__revisions-list {
852 - list-style: none;
853 - margin: 0 16px 16px 16px;
854 - flex-grow: 1;
855 -}
856 -
857 -.global-styles-ui-screen-revisions__revisions-list li {
858 - margin-bottom: 0;
859 -}
860 -
861 -.global-styles-ui-screen-revisions__revision-item {
862 - position: relative;
863 - cursor: var(--wpds-cursor-control, pointer);
866 +.global-styles-ui-screen-revisions {
864 867 display: flex;
865 868 flex-direction: column;
869 + flex-grow: 1;
870 + min-height: 0;
866 871 }
867 872
868 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
869 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
870 - outline: 2px solid transparent;
873 +.global-styles-ui-screen-revisions__actions {
874 + margin-inline-start: auto;
871 875 }
872 876
873 -.global-styles-ui-screen-revisions__revision-item:hover {
874 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
875 -}
876 -
877 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
878 - color: var(--wp-admin-theme-color);
879 -}
880 -
881 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
882 - position: absolute;
883 - content: "\a";
884 - display: block;
885 -}
886 -
887 -.global-styles-ui-screen-revisions__revision-item::before {
888 - background: #ddd;
889 - border-radius: 50%;
890 - height: 8px;
891 - width: 8px;
892 - top: 18px;
893 - left: 17px;
894 - transform: translate(-50%, -50%);
895 - z-index: 1;
896 - border: 4px solid transparent;
897 -}
898 -
899 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
900 - border-radius: 2px;
901 - outline: 3px solid transparent;
902 - outline-offset: -2px;
903 - color: var(--wp-admin-theme-color);
904 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
905 -}
906 -
907 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
908 - color: var(--wp-admin-theme-color);
909 -}
910 -
911 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
912 - background: var(--wp-admin-theme-color);
913 -}
914 -
915 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
916 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
917 - color: #1e1e1e;
918 -}
919 -
920 -.global-styles-ui-screen-revisions__revision-item::after {
921 - height: 100%;
922 - left: 16px;
923 - top: 0;
924 - width: 0;
925 - border: 0.5px solid #ddd;
926 -}
927 -
928 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
929 - top: 18px;
930 -}
931 -
932 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
933 - height: 18px;
934 -}
935 -
936 -.global-styles-ui-screen-revisions__revision-item-wrapper {
937 - display: block;
938 - padding: 12px 12px 4px 40px;
939 -}
940 -
941 -.global-styles-ui-screen-revisions__apply-button.is-primary,
942 -.global-styles-ui-screen-revisions__active-badge {
943 - align-self: flex-start;
944 - margin: 0 12px 12px 40px;
945 -}
946 -
947 -.global-styles-ui-screen-revisions__changes,
948 -.global-styles-ui-screen-revisions__meta {
949 - color: #757575;
877 +.global-styles-ui-screen-revisions__date {
878 + text-transform: uppercase;
879 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
950 880 font-size: 12px;
951 881 }
952 882
953 883 .global-styles-ui-screen-revisions__description {
@@ -956,11 +886,11 @@
956 886 align-items: flex-start;
957 887 gap: 8px;
958 888 }
959 889
960 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
961 - text-transform: uppercase;
962 - 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;
963 893 font-size: 12px;
964 894 }
965 895
966 896 .global-styles-ui-screen-revisions__meta {
@@ -966,11 +896,10 @@
966 896 .global-styles-ui-screen-revisions__meta {
967 897 display: flex;
968 898 justify-content: start;
969 899 width: 100%;
970 - align-items: flex-start;
900 + align-items: center;
971 901 text-align: left;
972 - margin-bottom: 4px;
973 902 }
974 903
975 904 .global-styles-ui-screen-revisions__meta img {
976 905 width: 16px;
@@ -978,16 +907,12 @@
978 907 border-radius: 100%;
979 908 margin-right: 8px;
980 909 }
981 910
982 -.global-styles-ui-screen-revisions__loading {
983 - margin: 24px auto !important;
984 -}
985 -
986 911 .global-styles-ui-screen-revisions__changes {
987 912 text-align: left;
988 913 line-height: 1.4;
989 - margin-left: 12px;
914 + margin: 0 0 0 12px;
990 915 list-style: disc;
991 916 }
992 917
993 918 .global-styles-ui-screen-revisions__changes li {
@@ -993,47 +918,8 @@
993 918 .global-styles-ui-screen-revisions__changes li {
994 919 margin-bottom: 4px;
995 920 }
996 921
997 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
998 - justify-content: space-between;
999 - gap: 2px;
1000 -}
1001 -
1002 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
1003 - position: absolute;
1004 - left: -1000px;
1005 - height: 1px;
1006 - margin: -1px;
1007 - overflow: hidden;
1008 -}
1009 -
1010 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
1011 - font-size: 12px;
1012 - will-change: opacity;
1013 -}
1014 -
1015 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
1016 - color: #1e1e1e;
1017 -}
1018 -
1019 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
1020 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
1021 - color: #949494;
1022 -}
1023 -
1024 -.global-styles-ui-screen-revisions__footer {
1025 - height: 56px;
1026 - z-index: 1;
1027 - position: sticky;
1028 - min-width: 100%;
1029 - bottom: 0;
1030 - background: #fff;
1031 - padding: 12px;
1032 - border-top: 1px solid #ddd;
1033 - box-sizing: border-box;
1034 -}
1035 -
1036 922 .global-styles-ui-variations_item {
1037 923 box-sizing: border-box;
1038 924 cursor: var(--wpds-cursor-control, pointer);
1039 925 }
@@ -1114,13 +1000,34 @@
1114 1000 justify-content: center;
1115 1001 border-radius: 2px;
1116 1002 }
1117 1003
1004 +.global-styles-ui-block-types-filter {
1005 + margin-bottom: 12px;
1006 + padding: 0 16px;
1007 +}
1008 +
1118 1009 .global-styles-ui-block-types-search {
1119 - margin-bottom: 10px;
1120 - padding: 0 16px;
1010 + flex-grow: 1;
1121 1011 }
1122 1012
1013 +.global-styles-ui-block-types-item-list .global-styles-ui-block-types-item__icon {
1014 + min-width: 24px;
1015 +}
1016 +
1017 +.global-styles-ui-block-types-item-list__no-results {
1018 + padding-top: 16px;
1019 +}
1020 +
1021 +.global-styles-ui-block-types-item__indicator {
1022 + background: var(--wp-admin-theme-color);
1023 + border-radius: 50%;
1024 + flex: none;
1025 + height: 6px;
1026 + margin-left: auto;
1027 + width: 6px;
1028 +}
1029 +
1123 1030 .global-styles-ui-screen-typography__font-variants-count {
1124 1031 color: #757575;
1125 1032 }
1126 1033
@@ -1162,10 +1069,20 @@
1162 1069
1163 1070 .global-styles-ui__color-indicator-wrapper {
1164 1071 height: 24px;
1165 1072 flex-shrink: 0;
1073 + display: flex;
1074 + align-items: center;
1166 1075 }
1167 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 +
1168 1085 .global-styles-ui__shadows-panel__options-container,
1169 1086 .global-styles-ui__typography-panel__options-container {
1170 1087 height: 24px;
1171 1088 }
@@ -1177,9 +1094,10 @@
1177 1094 border-radius: 2px;
1178 1095 overflow: hidden;
1179 1096 }
1180 1097
1181 -.global-styles-ui__shadow-preview-panel {
1098 +.global-styles-ui__shadow-preview-panel,
1099 +.global-styles-ui__text-shadow-preview-panel {
1182 1100 height: 144px;
1183 1101 border: #ddd 1px solid;
1184 1102 border-radius: 2px;
1185 1103 overflow: auto;
@@ -1189,9 +1107,9 @@
1189 1107 /*rtl:end:ignore*/
1190 1108 background-size: 16px 16px;
1191 1109 }
1192 1110
1193 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
1111 +.global-styles-ui__shadow-preview-block {
1194 1112 border: #ddd 1px solid;
1195 1113 border-radius: 2px;
1196 1114 background-color: #fff;
1197 1115 width: 60%;
@@ -1197,22 +1115,44 @@
1197 1115 width: 60%;
1198 1116 height: 60px;
1199 1117 }
1200 1118
1201 -.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 {
1202 1139 width: 280px;
1203 1140 }
1204 1141
1205 -.global-styles-ui__shadow-editor-panel {
1142 +.global-styles-ui__shadow-editor-panel,
1143 +.global-styles-ui__text-shadow-editor-panel {
1206 1144 margin-bottom: 4px;
1207 1145 }
1208 1146
1209 -.global-styles-ui__shadow-editor__dropdown {
1147 +.global-styles-ui__shadow-editor__dropdown,
1148 +.global-styles-ui__text-shadow-editor__dropdown {
1210 1149 width: 100%;
1211 1150 position: relative;
1212 1151 }
1213 1152
1214 -.global-styles-ui__shadow-editor__dropdown-toggle {
1153 +.global-styles-ui__shadow-editor__dropdown-toggle,
1154 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
1215 1155 width: 100%;
1216 1156 height: auto;
1217 1157 padding-top: 8px;
1218 1158 padding-bottom: 8px;
@@ -1219,14 +1159,16 @@
1219 1159 text-align: left;
1220 1160 border-radius: inherit;
1221 1161 }
1222 1162
1223 -.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 {
1224 1165 background: #f0f0f0;
1225 1166 color: var(--wp-admin-theme-color);
1226 1167 }
1227 1168
1228 -.global-styles-ui__shadow-editor__remove-button {
1169 +.global-styles-ui__shadow-editor__remove-button,
1170 +.global-styles-ui__text-shadow-editor__remove-button {
1229 1171 position: absolute;
1230 1172 right: 8px;
1231 1173 top: 8px;
1232 1174 opacity: 0;
@@ -1231,18 +1173,19 @@
1231 1173 top: 8px;
1232 1174 opacity: 0;
1233 1175 }
1234 1176
1235 -.global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
1236 - border: none;
1237 -}
1238 -
1239 -.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 {
1240 1182 opacity: 1;
1241 1183 }
1242 1184
1243 1185 @media (hover: none) {
1244 - .global-styles-ui__shadow-editor__remove-button {
1186 + .global-styles-ui__shadow-editor__remove-button,
1187 + .global-styles-ui__text-shadow-editor__remove-button {
1245 1188 opacity: 1;
1246 1189 }
1247 1190 }
1248 1191 .global-styles-ui-screen-css {
@@ -1326,9 +1269,10 @@
1326 1269 clip-path: border-box;
1327 1270 }
1328 1271
1329 1272 .global-styles-ui-color-palette-panel,
1330 -.global-styles-ui-gradient-palette-panel {
1273 +.global-styles-ui-gradient-palette-panel,
1274 +.global-styles-ui-duotone-palette-panel {
1331 1275 padding: 16px;
1332 1276 }
1333 1277
1334 1278 /**
@@ -1460,8 +1404,12 @@
1460 1404 .dataviews__search {
1461 1405 flex-grow: 1;
1462 1406 }
1463 1407
1408 +.dataviews__search .dataviews-search {
1409 + flex-basis: 210px;
1410 +}
1411 +
1464 1412 .dataviews-no-results,
1465 1413 .dataviews-loading {
1466 1414 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1467 1415 flex-grow: 1;
@@ -1656,10 +1604,10 @@
1656 1604 }
1657 1605
1658 1606 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
1659 1607 width: 100%;
1608 + min-width: 0;
1660 1609 white-space: nowrap;
1661 - overflow: hidden;
1662 1610 }
1663 1611
1664 1612 .dataviews-filters__summary-chip-container {
1665 1613 position: relative;
@@ -1731,9 +1679,9 @@
1731 1679 cursor: var(--wpds-cursor-control, pointer);
1732 1680 }
1733 1681
1734 1682 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
1735 - fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1683 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1736 1684 }
1737 1685
1738 1686 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
1739 1687 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
@@ -1739,13 +1687,13 @@
1739 1687 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1740 1688 }
1741 1689
1742 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 {
1743 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1691 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1744 1692 }
1745 1693
1746 1694 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
1747 - 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));
1748 1696 }
1749 1697
1750 1698 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
1751 1699 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
@@ -1807,10 +1755,11 @@
1807 1755 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
1808 1756 }
1809 1757
1810 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));
1811 1761 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
1812 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
1813 1762 }
1814 1763
1815 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 {
1816 1765 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
@@ -1924,9 +1873,9 @@
1924 1873 }
1925 1874 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1926 1875 --checkbox-size: 24px;
1927 1876 flex-shrink: 0;
1928 - border: 1px solid #1e1e1e;
1877 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1929 1878 margin-right: 12px;
1930 1879 transition: none;
1931 1880 border-radius: 2px;
1932 1881 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1934,18 +1883,12 @@
1934 1883 /* Fonts smaller than 16px causes mobile safari to zoom. */
1935 1884 font-size: 16px;
1936 1885 /* Override core line-height. To be reviewed. */
1937 1886 line-height: normal;
1938 - box-shadow: 0 0 0 transparent;
1939 - border-radius: 2px;
1940 - border: 1px solid #949494;
1887 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1888 + border-radius: var(--wpds-border-radius-sm, 2px);
1941 1889 }
1942 1890
1943 -@media not (prefers-reduced-motion) {
1944 - .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1945 - transition: box-shadow 0.1s linear;
1946 - }
1947 -}
1948 1891 @media (min-width: 600px) {
1949 1892 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
1950 1893 font-size: 13px;
1951 1894 /* Override core line-height. To be reviewed. */
@@ -1951,20 +1894,25 @@
1951 1894 /* Override core line-height. To be reviewed. */
1952 1895 line-height: normal;
1953 1896 }
1954 1897 }
1898 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
1899 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
1900 +}
1901 +
1955 1902 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
1956 - border-color: var(--wp-admin-theme-color);
1957 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
1958 - outline: 2px solid transparent;
1903 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
1904 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1905 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
1906 + box-shadow: none;
1959 1907 }
1960 1908
1961 -.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 {
1962 1910 color: rgba(30, 30, 30, 0.62);
1963 1911 }
1964 1912
1965 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
1966 - 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);
1967 1915 }
1968 1916
1969 1917 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
1970 1918 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
@@ -1997,9 +1945,9 @@
1997 1945 display: inline-block;
1998 1946 vertical-align: middle;
1999 1947 width: 16px;
2000 1948 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
2001 - font: normal 30px/1 dashicons;
1949 + font: 400 30px/1 dashicons;
2002 1950 speak: none;
2003 1951 -webkit-font-smoothing: antialiased;
2004 1952 -moz-osx-font-smoothing: grayscale;
2005 1953 }
@@ -2010,17 +1958,23 @@
2010 1958 font-size: 21px;
2011 1959 }
2012 1960 }
2013 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 {
2014 - background: #f0f0f0;
2015 - 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);
2016 1965 cursor: default;
2017 1966 opacity: 1;
2018 1967 }
2019 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 +
2020 1973 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
2021 1974 position: relative;
2022 - 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));
2023 1977 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2024 1978 margin: 0;
2025 1979 padding: 0;
2026 1980 width: var(--checkbox-size);
@@ -2043,9 +1997,9 @@
2043 1997 }
2044 1998
2045 1999 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
2046 2000 --checkmark-size: var(--checkbox-size);
2047 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2001 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2048 2002 position: absolute;
2049 2003 left: 50%;
2050 2004 top: 50%;
2051 2005 transform: translate(-50%, -50%);
@@ -2069,18 +2023,12 @@
2069 2023 /* Fonts smaller than 16px causes mobile safari to zoom. */
2070 2024 font-size: 16px;
2071 2025 /* Override core line-height. To be reviewed. */
2072 2026 line-height: normal;
2073 - box-shadow: 0 0 0 transparent;
2074 - border-radius: 2px;
2075 - border: 1px solid #949494;
2027 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2028 + border-radius: var(--wpds-border-radius-sm, 2px);
2076 2029 }
2077 2030
2078 -@media not (prefers-reduced-motion) {
2079 - .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2080 - transition: box-shadow 0.1s linear;
2081 - }
2082 -}
2083 2031 @media (min-width: 600px) {
2084 2032 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
2085 2033 font-size: 13px;
2086 2034 /* Override core line-height. To be reviewed. */
@@ -2086,16 +2034,17 @@
2086 2034 /* Override core line-height. To be reviewed. */
2087 2035 line-height: normal;
2088 2036 }
2089 2037 }
2090 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2091 - border-color: var(--wp-admin-theme-color);
2092 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2093 - outline: 2px solid transparent;
2038 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true]) {
2039 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
2094 2040 }
2095 2041
2096 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2097 - color: rgba(30, 30, 30, 0.62);
2042 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2043 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
2044 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2045 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
2046 + box-shadow: none;
2098 2047 }
2099 2048
2100 2049 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2101 2050 color: rgba(30, 30, 30, 0.62);
@@ -2118,15 +2067,10 @@
2118 2067 }
2119 2068 }
2120 2069 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
2121 2070 background: var(--wpds-color-background-surface-neutral-strong, #fff);
2122 - box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2123 2071 }
2124 2072
2125 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
2126 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2127 -}
2128 -
2129 2073 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
2130 2074 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2131 2075 }
2132 2076
@@ -2171,12 +2115,8 @@
2171 2115 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
2172 2116 box-sizing: border-box;
2173 2117 }
2174 2118
2175 -.dataviews-search {
2176 - flex-basis: 210px;
2177 -}
2178 -
2179 2119 .dataviews-filters__user-input-widget {
2180 2120 padding: var(--wpds-dimension-padding-lg, 16px);
2181 2121 }
2182 2122
@@ -2453,9 +2393,8 @@
2453 2393 }
2454 2394
2455 2395 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
2456 2396 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
2457 - width: -moz-fit-content;
2458 2397 width: fit-content;
2459 2398 }
2460 2399
2461 2400 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
@@ -2489,9 +2428,8 @@
2489 2428 }
2490 2429
2491 2430 .dataviews-view-grid .dataviews-view-grid__media img,
2492 2431 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
2493 - -o-object-fit: cover;
2494 2432 object-fit: cover;
2495 2433 width: 100%;
2496 2434 height: 100%;
2497 2435 }
@@ -2518,8 +2456,18 @@
2518 2456 box-shadow: none;
2519 2457 background: var(--wpds-color-background-surface-neutral, #fcfcfc);
2520 2458 }
2521 2459
2460 +.dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media,
2461 +.dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media {
2462 + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2463 +}
2464 +
2465 +.dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
2466 +.dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
2467 + object-fit: contain;
2468 +}
2469 +
2522 2470 .dataviews-view-grid .dataviews-view-grid__fields,
2523 2471 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
2524 2472 position: relative;
2525 2473 font-size: 12px;
@@ -2680,9 +2628,8 @@
2680 2628
2681 2629 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
2682 2630 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
2683 2631 display: flex;
2684 - width: -moz-max-content;
2685 2632 width: max-content;
2686 2633 flex: 0 0 auto;
2687 2634 gap: var(--wpds-dimension-gap-xs, 4px);
2688 2635 white-space: nowrap;
@@ -2735,10 +2682,9 @@
2735 2682 .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
2736 2683 .dataviews-view-list div[role=article]:not(.is-selected):hover,
2737 2684 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
2738 2685 .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
2739 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2740 - background-color: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
2686 + background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
2741 2687 }
2742 2688
2743 2689 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
2744 2690 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field,
@@ -2749,9 +2695,9 @@
2749 2695 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
2750 2696 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
2751 2697 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
2752 2698 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
2753 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
2699 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2754 2700 }
2755 2701
2756 2702 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
2757 2703 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
@@ -2757,9 +2703,9 @@
2757 2703 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
2758 2704 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
2759 2705 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
2760 2706 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
2761 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
2707 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2762 2708 }
2763 2709
2764 2710 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2765 2711 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
@@ -2768,9 +2714,9 @@
2768 2714 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
2769 2715 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
2770 2716 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
2771 2717 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
2772 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2718 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2773 2719 }
2774 2720
2775 2721 .dataviews-view-list .dataviews-view-list__item {
2776 2722 position: absolute;
@@ -2776,10 +2722,8 @@
2776 2722 position: absolute;
2777 2723 z-index: 1;
2778 2724 inset: 0;
2779 2725 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
2780 - -webkit-appearance: none;
2781 - -moz-appearance: none;
2782 2726 appearance: none;
2783 2727 border: none;
2784 2728 background: none;
2785 2729 padding: 0;
@@ -2822,9 +2766,8 @@
2822 2766
2823 2767 .dataviews-view-list .dataviews-view-list__media-wrapper img {
2824 2768 width: 100%;
2825 2769 height: 100%;
2826 - -o-object-fit: cover;
2827 2770 object-fit: cover;
2828 2771 }
2829 2772
2830 2773 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -2844,9 +2787,9 @@
2844 2787 min-width: 0;
2845 2788 }
2846 2789
2847 2790 .dataviews-view-list .dataviews-view-list__field {
2848 - color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
2791 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2849 2792 }
2850 2793
2851 2794 .dataviews-view-list .dataviews-view-list__fields {
2852 2795 display: flex;
@@ -2963,9 +2906,9 @@
2963 2906
2964 2907 .dataviews-view-table th {
2965 2908 text-align: left;
2966 2909 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2967 - font-weight: normal;
2910 + font-weight: 400;
2968 2911 font-size: var(--wpds-typography-font-size-md, 13px);
2969 2912 }
2970 2913
2971 2914 .dataviews-view-table td,
@@ -2993,9 +2936,9 @@
2993 2936 top: 0;
2994 2937 bottom: 0;
2995 2938 left: 0;
2996 2939 width: 1px;
2997 - background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2940 + background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
2998 2941 }
2999 2942
3000 2943 .dataviews-view-table td.dataviews-view-table__checkbox-column,
3001 2944 .dataviews-view-table th.dataviews-view-table__checkbox-column {
@@ -3207,9 +3150,8 @@
3207 3150
3208 3151 .dataviews-column-primary__media img {
3209 3152 width: var(--wpds-dimension-size-md, 32px);
3210 3153 height: var(--wpds-dimension-size-md, 32px);
3211 - -o-object-fit: cover;
3212 3154 object-fit: cover;
3213 3155 }
3214 3156
3215 3157 .dataviews-column-primary__media::after {
@@ -3288,9 +3230,8 @@
3288 3230 text-align: start;
3289 3231 }
3290 3232
3291 3233 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
3292 - width: -moz-fit-content;
3293 3234 width: fit-content;
3294 3235 }
3295 3236
3296 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 {
@@ -3326,13 +3267,13 @@
3326 3267 aspect-ratio: 1/1;
3327 3268 min-height: 0;
3328 3269 background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
3329 3270 border-radius: var(--wpds-border-radius-md, 4px);
3271 + overflow: hidden;
3330 3272 position: relative;
3331 3273 }
3332 3274
3333 3275 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
3334 - -o-object-fit: cover;
3335 3276 object-fit: cover;
3336 3277 width: 100%;
3337 3278 height: 100%;
3338 3279 }
@@ -3348,8 +3289,16 @@
3348 3289 border-radius: var(--wpds-border-radius-md, 4px);
3349 3290 pointer-events: none;
3350 3291 }
3351 3292
3293 +.dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media {
3294 + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
3295 +}
3296 +
3297 +.dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
3298 + object-fit: contain;
3299 +}
3300 +
3352 3301 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
3353 3302 position: relative;
3354 3303 font-size: 12px;
3355 3304 line-height: 16px;
@@ -3511,9 +3460,8 @@
3511 3460 }
3512 3461
3513 3462 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
3514 3463 display: flex;
3515 - width: -moz-max-content;
3516 3464 width: max-content;
3517 3465 flex: 0 0 auto;
3518 3466 }
3519 3467
@@ -3645,9 +3593,8 @@
3645 3593 display: block;
3646 3594 width: 100%;
3647 3595 height: 100%;
3648 3596 margin: 0 auto;
3649 - -o-object-fit: cover;
3650 3597 object-fit: cover;
3651 3598 border-radius: 50%;
3652 3599 box-sizing: border-box;
3653 3600 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -3862,9 +3809,8 @@
3862 3809 display: block;
3863 3810 width: 100%;
3864 3811 height: 100%;
3865 3812 margin: 0 auto;
3866 - -o-object-fit: cover;
3867 3813 object-fit: cover;
3868 3814 border-radius: 50%;
3869 3815 box-sizing: border-box;
3870 3816 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -3918,53 +3864,29 @@
3918 3864 .dataviews-controls__date-preset:active {
3919 3865 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
3920 3866 }
3921 3867
3922 -.dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3923 - --wp-components-color-accent: #cc1818;
3924 - border-color: #cc1818;
3868 +.dataviews-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]), .dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3869 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3925 3870 }
3926 3871
3927 -.dataviews-validated-control__indicator {
3928 - display: flex;
3929 - align-items: flex-start;
3930 - gap: 4px;
3931 - margin: 8px 0 0;
3932 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3933 - font-size: 12px;
3934 - line-height: 16px;
3935 - color: #757575;
3936 - animation: dataviews-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
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);
3937 3874 }
3938 3875
3939 -.dataviews-validated-control__indicator.is-invalid {
3940 - color: #cc1818;
3876 +.dataviews-validated-control__wrapper-with-error-delegate {
3877 + position: relative;
3941 3878 }
3942 3879
3943 -.dataviews-validated-control__indicator.is-valid {
3944 - color: color-mix(in srgb, #000 30%, #4ab866);
3880 +.dataviews-validated-control__error-delegate {
3881 + position: absolute;
3882 + top: 0;
3883 + height: 100%;
3884 + width: 100%;
3885 + opacity: 0;
3886 + pointer-events: none;
3945 3887 }
3946 3888
3947 -.dataviews-validated-control__indicator-icon {
3948 - flex-shrink: 0;
3949 -}
3950 -
3951 -.dataviews-validated-control__indicator-spinner {
3952 - margin: 2px;
3953 - width: 12px;
3954 - height: 12px;
3955 -}
3956 -
3957 -@keyframes dataviews-validated-control__indicator-jump {
3958 - 0% {
3959 - transform: translateY(-4px);
3960 - opacity: 0;
3961 - }
3962 - 100% {
3963 - transform: translateY(0);
3964 - opacity: 1;
3965 - }
3966 -}
3967 3889 .dataforms-layouts-panel__field-trigger {
3968 3890 position: relative;
3969 3891 color: inherit;
3970 3892 display: flex;
@@ -4027,8 +3949,14 @@
4027 3949 opacity: 0;
4028 3950 border-radius: var(--wpds-border-radius-xs, 1px);
4029 3951 }
4030 3952
3953 +.dataforms-layouts-panel__field-trigger-icon::after {
3954 + content: "";
3955 + position: absolute;
3956 + inset: 0;
3957 +}
3958 +
4031 3959 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
4032 3960 opacity: 1;
4033 3961 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
4034 3962 }
@@ -4062,11 +3990,9 @@
4062 3990 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
4063 3991 }
4064 3992
4065 3993 .dataforms-layouts-panel__field-label-error-content {
4066 - position: relative;
4067 - z-index: 1;
4068 - cursor: help;
3994 + pointer-events: none;
4069 3995 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
4070 3996 display: inline-flex;
4071 3997 flex-direction: row;
4072 3998 align-items: center;
@@ -4082,12 +4008,17 @@
4082 4008 align-items: center;
4083 4009 overflow: clip;
4084 4010 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
4085 4011 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4086 - word-break: break-word;
4012 + word-break: normal;
4013 + overflow-wrap: anywhere;
4087 4014 font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4088 4015 }
4089 4016
4017 +.dataforms-layouts-panel__field-control:has(a, button) {
4018 + z-index: 1;
4019 +}
4020 +
4090 4021 .dataforms-layouts-panel__field-control > * {
4091 4022 min-width: 0;
4092 4023 }
4093 4024
@@ -4120,12 +4051,8 @@
4120 4051 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
4121 4052 z-index: 159990;
4122 4053 }
4123 4054
4124 -.dataforms-layouts-panel__summary-button:empty {
4125 - min-width: 160px;
4126 -}
4127 -
4128 4055 .dataforms-layouts-regular__field {
4129 4056 width: 100%;
4130 4057 min-height: var(--wpds-dimension-size-md, 32px);
4131 4058 justify-content: flex-start !important;
@@ -4343,9 +4270,9 @@
4343 4270 padding: 12px;
4344 4271 display: grid;
4345 4272 align-items: center;
4346 4273 grid-template-columns: min-content 1fr min-content;
4347 - grid-gap: 4px 8px;
4274 + gap: 4px 8px;
4348 4275 color: #1e1e1e;
4349 4276 }
4350 4277
4351 4278 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -4628,11 +4555,9 @@
4628 4555
4629 4556 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
4630 4557 width: 100%;
4631 4558 height: 100%;
4632 - -o-object-fit: cover;
4633 4559 object-fit: cover;
4634 - -o-object-position: 50% 50%;
4635 4560 object-position: 50% 50%;
4636 4561 }
4637 4562
4638 4563 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
@@ -4692,9 +4617,8 @@
4692 4617
4693 4618 .fields-controls__author-avatar img {
4694 4619 width: 16px;
4695 4620 height: 16px;
4696 - -o-object-fit: cover;
4697 4621 object-fit: cover;
4698 4622 opacity: 0;
4699 4623 border-radius: 100%;
4700 4624 }
@@ -4730,18 +4654,15 @@
4730 4654 padding: 0;
4731 4655 margin: 0;
4732 4656 }
4733 4657
4734 -.fields-controls__slug .fields-controls__slug-external-icon {
4735 - margin-left: 5ch;
4736 -}
4737 -
4738 4658 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
4739 4659 padding-inline-start: 0 !important;
4740 4660 }
4741 4661
4742 4662 .fields-controls__slug .fields-controls__slug-help-link {
4743 - word-break: break-word;
4663 + word-break: normal;
4664 + overflow-wrap: anywhere;
4744 4665 }
4745 4666
4746 4667 .fields-controls__slug .fields-controls__slug-help {
4747 4668 display: flex;
@@ -4869,9 +4790,8 @@
4869 4790
4870 4791 .media-editor-preview--image img {
4871 4792 max-width: 100%;
4872 4793 max-height: 100%;
4873 - -o-object-fit: contain;
4874 4794 object-fit: contain;
4875 4795 width: auto;
4876 4796 height: auto;
4877 4797 opacity: 0;
@@ -4893,9 +4813,8 @@
4893 4813 }
4894 4814 .media-editor-preview--video video {
4895 4815 max-width: 100%;
4896 4816 max-height: 100%;
4897 - -o-object-fit: contain;
4898 4817 object-fit: contain;
4899 4818 width: auto;
4900 4819 height: auto;
4901 4820 }
@@ -4941,8 +4860,9 @@
4941 4860 word-break: break-all;
4942 4861 margin-top: 8px;
4943 4862 }
4944 4863
4864 +/*!rtl:begin:ignore*/
4945 4865 .wp-media-editor-image-editor {
4946 4866 position: relative;
4947 4867 overflow: hidden;
4948 4868 width: 100%;
@@ -4948,9 +4868,8 @@
4948 4868 width: 100%;
4949 4869 height: 100%;
4950 4870 touch-action: none;
4951 4871 -webkit-user-select: none;
4952 - -moz-user-select: none;
4953 4872 user-select: none;
4954 4873 cursor: grab;
4955 4874 }
4956 4875
@@ -5068,10 +4987,8 @@
5068 4987 box-shadow: 0 0 0 1px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
5069 4988 }
5070 4989
5071 4990 .wp-media-editor-image-editor__handle {
5072 - -webkit-appearance: none;
5073 - -moz-appearance: none;
5074 4991 appearance: none;
5075 4992 margin: 0;
5076 4993 padding: 0;
5077 4994 font: inherit;
@@ -5162,8 +5079,9 @@
5162 5079 right: -6px;
5163 5080 cursor: nwse-resize;
5164 5081 }
5165 5082
5083 +/*!rtl:end:ignore*/
5166 5084 /**
5167 5085 * Breakpoints & Media Queries
5168 5086 */
5169 5087 /**
@@ -5227,48 +5145,53 @@
5227 5145 align-items: center;
5228 5146 justify-content: center;
5229 5147 }
5230 5148
5231 -.media-editor .interface-interface-skeleton {
5232 - position: relative;
5233 - top: auto;
5234 - right: auto;
5235 - bottom: auto;
5236 - left: auto;
5237 - height: 100%;
5238 - max-height: none;
5149 +.media-editor .media-editor__body {
5150 + container-type: inline-size;
5151 + container-name: media-editor-body;
5152 + display: flex;
5239 5153 flex: 1;
5240 - flex-direction: column;
5154 + min-height: 0;
5241 5155 }
5242 5156
5243 -.media-editor-modal .media-editor .interface-interface-skeleton.interface-interface-skeleton {
5244 - top: auto;
5245 -}
5246 -
5247 -.media-editor .interface-interface-skeleton__editor {
5248 - min-width: 0;
5249 - flex: 1;
5250 -}
5251 -
5252 5157 .media-editor .media-editor__content {
5253 5158 display: flex;
5254 5159 flex: 1;
5255 5160 flex-direction: column;
5161 + min-width: 0;
5256 5162 min-height: 0;
5257 - margin: 0 24px;
5258 - border-radius: 8px;
5259 - overflow: hidden;
5163 + margin: 24px 24px 8px 24px;
5260 5164 }
5261 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 +}
5262 5176 .media-editor .media-editor__canvas-toolbar {
5263 5177 display: flex;
5264 - 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;
5265 5186 justify-content: center;
5187 + align-self: stretch;
5266 5188 background: #e0e0e0;
5189 + border-radius: 0 0 8px 8px;
5267 5190 padding: 8px 16px;
5268 5191 }
5269 5192
5270 -.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation {
5193 +.media-editor .media-editor__canvas-toolbar .media-editor-fine-rotation .rotation-ruler {
5271 5194 flex: 0 1 360px;
5272 5195 min-width: 0;
5273 5196 }
5274 5197
@@ -5276,8 +5199,9 @@
5276 5199 display: flex;
5277 5200 align-items: center;
5278 5201 justify-content: center;
5279 5202 background: #e0e0e0;
5203 + border-radius: 8px;
5280 5204 overflow: auto;
5281 5205 flex: 1;
5282 5206 min-height: 0;
5283 5207 }
@@ -5289,85 +5213,63 @@
5289 5213 .media-editor .media-editor__canvas-area img,
5290 5214 .media-editor .media-editor__canvas-area video {
5291 5215 max-width: 100%;
5292 5216 max-height: 100%;
5293 - -o-object-fit: contain;
5294 5217 object-fit: contain;
5295 5218 }
5296 5219
5297 5220 .media-editor .media-editor__sidebar {
5298 - 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;
5299 5227 }
5300 5228
5301 -.media-editor .media-editor__sidebar *,
5302 -.media-editor .media-editor__sidebar *::before,
5303 -.media-editor .media-editor__sidebar *::after {
5304 - box-sizing: inherit;
5305 -}
5306 -
5307 5229 @media (min-width: 600px) {
5308 5230 .media-editor .media-editor__sidebar {
5309 - padding-left: 1px;
5231 + flex: none;
5232 + width: var(--wpds-dimension-surface-width-sm, 320px);
5310 5233 }
5311 5234 }
5312 -.media-editor .media-editor__sidebar-panel {
5313 - padding-bottom: 24px;
5235 +.media-editor .media-editor__tabs {
5236 + display: flex;
5237 + flex: 1;
5238 + flex-direction: column;
5239 + min-height: 0;
5314 5240 }
5315 5241
5316 -.media-editor .interface-interface-skeleton__sidebar {
5317 - border-top: 0;
5318 - box-shadow: none;
5319 - 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;
5320 5247 }
5321 5248
5322 5249 .media-editor .media-editor__panel {
5323 - padding: 16px;
5250 + flex: 1;
5251 + min-height: 0;
5252 + overflow-y: auto;
5253 + padding-block: 24px;
5254 + padding-inline: 24px;
5324 5255 }
5325 5256
5326 -@media (min-width: 600px) {
5327 - .media-editor .media-editor__panel {
5328 - padding: 24px 24px 0 0;
5329 - }
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;
5330 5260 }
5331 -.media-editor .components-panel__header.media-editor__sidebar-header {
5332 - padding-left: 0;
5333 - padding-right: 8px;
5334 - margin-right: 24px;
5335 - margin-right: 0;
5336 -}
5337 5261
5338 -@media (min-width: 600px) {
5339 - .media-editor .components-panel__header.media-editor__sidebar-header {
5340 - margin-right: 24px;
5341 - }
5262 +.media-editor .media-editor__body.has-panel-open .media-editor__content {
5263 + display: none;
5342 5264 }
5343 -.media-editor .components-panel__header.media-editor__sidebar-header .components-button.has-icon {
5344 - padding: 0;
5345 -}
5346 5265
5347 5266 @media (min-width: 600px) {
5348 - .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 {
5349 5268 display: flex;
5269 + margin: 0 0 0 24px;
5350 5270 }
5351 5271 }
5352 -@media (min-width: 600px) and (max-width: 781px) {
5353 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5354 - position: relative !important;
5355 - }
5356 - .media-editor .interface-complementary-area__fill,
5357 - .media-editor .interface-complementary-area {
5358 - width: 280px !important;
5359 - }
5360 -}
5361 -@media (max-width: 599px) {
5362 - .media-editor .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
5363 - width: 100%;
5364 - }
5365 - .media-editor .interface-complementary-area__fill,
5366 - .media-editor .interface-complementary-area {
5367 - width: 100% !important;
5368 - }
5369 -}
5370 5272 .media-editor__snackbar {
5371 5273 position: fixed;
5372 5274 bottom: var(--wpds-dimension-size-md, 32px);
5373 5275 left: 0;
@@ -5404,44 +5306,20 @@
5404 5306
5405 5307 .media-editor-modal.components-modal__frame .media-editor-modal__footer {
5406 5308 flex-shrink: 0;
5407 5309 display: flex;
5408 - gap: 16px;
5409 - padding: 16px 32px 24px;
5410 - background: #fff;
5411 - z-index: 1000001;
5412 -}
5413 -
5414 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide {
5415 5310 flex-direction: row;
5416 5311 align-items: center;
5417 -}
5418 -
5419 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-wide .media-editor__footer-actions {
5420 - margin-left: auto;
5421 -}
5422 -
5423 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow {
5424 - flex-direction: column;
5425 -}
5426 -
5427 -.media-editor-modal.components-modal__frame .media-editor-modal__footer.is-narrow > .media-editor-image-controls {
5428 - align-self: center;
5429 -}
5430 -
5431 -.media-editor-modal__footer-row {
5432 - display: flex;
5433 - flex-wrap: wrap;
5434 - align-items: center;
5435 5312 gap: 16px;
5313 + padding: 24px;
5314 + background: #fff;
5436 5315 }
5437 5316
5438 -.media-editor-modal__footer-row .media-editor-image-controls,
5439 -.media-editor-modal__footer-row .media-editor__footer-actions {
5317 +.media-editor-modal.components-modal__frame .media-editor-modal__footer .media-editor__save-actions {
5440 5318 margin-left: auto;
5441 5319 }
5442 5320
5443 -.media-editor__history-actions .components-button.has-icon:not([aria-disabled=true]) {
5321 +.media-editor-modal .media-editor__history-actions .components-button.has-icon:not([aria-disabled=true]) {
5444 5322 color: var(--wp-admin-theme-color);
5445 5323 }
5446 5324
5447 5325 .media-editor-modal {
@@ -5614,12 +5492,13 @@
5614 5492 box-sizing: border-box;
5615 5493 color: #1e1e1e;
5616 5494 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
5617 5495 -webkit-user-select: none;
5618 - -moz-user-select: none;
5619 5496 user-select: none;
5620 5497 touch-action: none;
5621 5498 cursor: ew-resize;
5499 + /*rtl:ignore*/
5500 + direction: ltr;
5622 5501 container-type: inline-size;
5623 5502 }
5624 5503
5625 5504 .rotation-ruler[data-disabled] {
@@ -5640,9 +5519,9 @@
5640 5519 height: 1px;
5641 5520 margin: -1px;
5642 5521 padding: 0;
5643 5522 border: 0;
5644 - clip: rect(0 0 0 0);
5523 + clip-path: inset(50%);
5645 5524 overflow: hidden;
5646 5525 white-space: nowrap;
5647 5526 }
5648 5527
@@ -5730,8 +5609,9 @@
5730 5609
5731 5610 .rotation-ruler__active-label-sign {
5732 5611 position: absolute;
5733 5612 top: 0;
5613 + /*rtl:ignore*/
5734 5614 right: 100%;
5735 5615 }
5736 5616
5737 5617 .rotation-ruler__active-label-unit {
@@ -5736,8 +5616,9 @@
5736 5616
5737 5617 .rotation-ruler__active-label-unit {
5738 5618 position: absolute;
5739 5619 top: 0;
5620 + /*rtl:ignore*/
5740 5621 left: 100%;
5741 5622 }
5742 5623
5743 5624 @container (max-width: 220px) {
@@ -5756,9 +5637,9 @@
5756 5637 }
5757 5638
5758 5639 .editor-autocompleters__user .editor-autocompleters__no-avatar::before {
5759 5640 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
5760 - font: normal 20px/1 dashicons;
5641 + font: 400 20px/1 dashicons;
5761 5642 content: "\f110";
5762 5643 margin-right: 5px;
5763 5644 vertical-align: middle;
5764 5645 }
@@ -5793,9 +5674,10 @@
5793 5674
5794 5675 .interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) {
5795 5676 box-shadow: none;
5796 5677 }
5797 -.interface-interface-skeleton__sidebar:has(.editor-collab-sidebar) .interface-complementary-area-header {
5678 +
5679 +.editor-collab-sidebar__header {
5798 5680 display: none;
5799 5681 }
5800 5682
5801 5683 .editor-collab-sidebar {
@@ -5807,8 +5689,9 @@
5807 5689 position: relative;
5808 5690 padding: 16px 16px 24px;
5809 5691 height: 100%;
5810 5692 overflow: hidden;
5693 + border-left: 1px solid color-mix(in srgb, currentColor 10%, transparent);
5811 5694 }
5812 5695
5813 5696 .editor-collab-sidebar-panel__thread,
5814 5697 .editor-collab-sidebar-panel__add-note {
@@ -5842,8 +5725,12 @@
5842 5725 max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 128px);
5843 5726 overflow-y: auto;
5844 5727 }
5845 5728
5729 +.editor-collab-sidebar-panel__user-info {
5730 + flex: 1;
5731 +}
5732 +
5846 5733 .editor-collab-sidebar-panel__user-name {
5847 5734 font-size: 12px;
5848 5735 font-weight: 400;
5849 5736 line-height: 16px;
@@ -5848,9 +5735,9 @@
5848 5735 font-weight: 400;
5849 5736 line-height: 16px;
5850 5737 text-align: left;
5851 5738 color: #757575;
5852 - text-transform: capitalize;
5739 + overflow-wrap: anywhere;
5853 5740 }
5854 5741
5855 5742 .editor-collab-sidebar-panel__user-time {
5856 5743 font-size: 12px;
@@ -5860,9 +5747,8 @@
5860 5747 color: #757575;
5861 5748 }
5862 5749
5863 5750 .editor-collab-sidebar-panel__show-more-button {
5864 - width: -moz-fit-content;
5865 5751 width: fit-content;
5866 5752 color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
5867 5753 cursor: var(--wpds-cursor-control, pointer);
5868 5754 }
@@ -6074,10 +5960,9 @@
6074 5960 position: absolute;
6075 5961 inset: 0;
6076 5962 width: 100%;
6077 5963 height: 100%;
6078 - -o-object-fit: cover;
6079 - object-fit: cover;
5964 + object-fit: cover;
6080 5965 border-radius: inherit;
6081 5966 opacity: 0;
6082 5967 }
6083 5968 .has-src > .editor-avatar__image > .editor-avatar__img {
@@ -6116,19 +6001,16 @@
6116 6001
6117 6002 .editor-avatar.is-badge {
6118 6003 display: inline-grid;
6119 6004 grid-template-columns: min-content 0fr;
6120 - -moz-column-gap: 0;
6121 - column-gap: 0;
6005 + column-gap: 0;
6122 6006 padding-inline-end: 0;
6123 6007 background-color: var(--wp-admin-theme-color, #3858e9);
6124 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);
6125 - 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);
6126 6009 }
6127 6010 .editor-avatar.is-badge:hover {
6128 6011 grid-template-columns: min-content 1fr;
6129 - -moz-column-gap: 4px;
6130 - column-gap: 4px;
6012 + column-gap: 4px;
6131 6013 padding-inline-end: 8px;
6132 6014 transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
6133 6015 }
6134 6016 .editor-avatar.is-badge:hover .editor-avatar__name {
@@ -6318,43 +6200,24 @@
6318 6200 height: 32px;
6319 6201 background: #f0f0f0;
6320 6202 border-radius: 4px;
6321 6203 }
6322 -.editor-collaborators-presence:hover {
6204 +.editor-collaborators-presence:hover, .editor-collaborators-presence:has(.is-pressed) {
6323 6205 background-color: #e0e0e0;
6324 6206 }
6325 -.editor-collaborators-presence:has(.is-pressed) {
6326 - background-color: #e0e0e0;
6327 -}
6328 6207
6329 6208 .editor-header__center .editor-collaborators-presence {
6330 6209 margin-right: 8px;
6331 6210 }
6332 6211
6333 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
6334 - display: flex;
6335 - align-items: center;
6336 - cursor: var(--wpds-cursor-control, pointer);
6212 +.editor-collaborators-presence__button.editor-collaborators-presence__button {
6337 6213 position: relative;
6338 6214 padding: 4px;
6339 - border-radius: 4px;
6340 - height: 100%;
6341 - box-sizing: border-box;
6342 - color: #2f2f2f;
6343 - background: transparent;
6344 6215 }
6345 -.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 {
6346 6217 background: transparent;
6347 6218 color: #2f2f2f;
6348 6219 }
6349 -.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 {
6350 - background: transparent;
6351 - color: #2f2f2f;
6352 -}
6353 -.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button:focus:not(:active) {
6354 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #007cba);
6355 - outline: none;
6356 -}
6357 6220
6358 6221 .editor-collapsible-block-toolbar {
6359 6222 overflow: hidden;
6360 6223 display: flex;
@@ -6449,11 +6312,8 @@
6449 6312 }
6450 6313 .editor-document-bar:hover {
6451 6314 background-color: #e0e0e0;
6452 6315 }
6453 -.editor-document-bar .components-button {
6454 - border-radius: 4px;
6455 -}
6456 6316 @media not (prefers-reduced-motion) {
6457 6317 .editor-document-bar .components-button {
6458 6318 transition: background-color 0.1s ease-out;
6459 6319 }
@@ -6525,9 +6385,9 @@
6525 6385 display: none;
6526 6386 pointer-events: none;
6527 6387 }
6528 6388 .editor-document-bar__icon-layout.editor-document-bar__icon-layout svg {
6529 - fill: #949494;
6389 + color: #949494;
6530 6390 }
6531 6391 @media (min-width: 600px) {
6532 6392 .editor-document-bar__icon-layout.editor-document-bar__icon-layout {
6533 6393 display: flex;
@@ -6659,10 +6519,9 @@
6659 6519 background: #1e1e1e;
6660 6520 }
6661 6521 .editor-document-tools .editor-document-tools__left > .components-button.has-icon:focus:not(:active),
6662 6522 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon:focus:not(:active) {
6663 - --focus-color: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
6664 - outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color);
6523 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
6665 6524 outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
6666 6525 }
6667 6526 .editor-document-tools .editor-document-tools__left > .components-button.has-icon::before,
6668 6527 .editor-document-tools .editor-document-tools__left > .components-dropdown > .components-button.has-icon::before {
@@ -6717,19 +6576,28 @@
6717 6576 right: 0;
6718 6577 }
6719 6578
6720 6579 .editor-error-boundary {
6721 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6580 + font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
6722 6581 margin: auto;
6723 - max-width: 780px;
6724 - padding: 1em;
6582 + width: 100%;
6583 + max-width: var(--wpds-dimension-surface-width-lg, 560px);
6584 + padding: var(--wpds-dimension-padding-xl, 20px);
6725 6585 margin-top: 64px;
6726 - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
6727 - border: 1px solid #1e1e1e;
6728 - border-radius: 2px;
6729 - background-color: #fff;
6730 6586 }
6731 6587
6588 +.editor-error-boundary__report {
6589 + max-height: 420px;
6590 + overflow: auto;
6591 + overflow-anchor: none;
6592 +}
6593 +
6594 +.editor-error-boundary__report-section {
6595 + margin: 0;
6596 + white-space: pre-wrap;
6597 + overflow-wrap: break-word;
6598 +}
6599 +
6732 6600 .editor-global-styles-header__description {
6733 6601 padding: 0 16px;
6734 6602 }
6735 6603
@@ -6745,8 +6613,27 @@
6745 6613 .editor-global-styles-sidebar__panel {
6746 6614 flex: 1;
6747 6615 }
6748 6616
6617 +.editor-global-styles-sidebar .editor-global-styles-sidebar__header {
6618 + flex-grow: 1;
6619 +}
6620 +
6621 +.editor-global-styles-sidebar:has(.global-styles-ui-screen-revisions) {
6622 + overflow: hidden;
6623 +}
6624 +
6625 +.editor-global-styles-sidebar__panel:has(.global-styles-ui-screen-revisions) {
6626 + display: flex;
6627 + flex-direction: column;
6628 + min-height: 0;
6629 +}
6630 +
6631 +.editor-global-styles-sidebar .global-styles-ui-sidebar__navigator-provider:has(.global-styles-ui-screen-revisions) {
6632 + flex: 1;
6633 + min-height: 0;
6634 +}
6635 +
6749 6636 .editor-global-styles-sidebar .editor-global-styles-sidebar__header-title {
6750 6637 margin: 0;
6751 6638 }
6752 6639
@@ -6806,10 +6693,9 @@
6806 6693 }
6807 6694 .editor-welcome-guide__image > img {
6808 6695 display: block;
6809 6696 max-width: 100%;
6810 - -o-object-fit: cover;
6811 - object-fit: cover;
6697 + object-fit: cover;
6812 6698 }
6813 6699 .editor-welcome-guide__heading {
6814 6700 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
6815 6701 font-size: 24px;
@@ -6826,9 +6712,9 @@
6826 6712 .editor-welcome-guide__text img {
6827 6713 vertical-align: bottom;
6828 6714 }
6829 6715 .editor-welcome-guide .components-button:hover svg {
6830 - fill: #fff;
6716 + color: #fff;
6831 6717 }
6832 6718
6833 6719 .editor-header {
6834 6720 box-sizing: border-box;
@@ -6842,16 +6728,16 @@
6842 6728 height: 64px;
6843 6729 background: #fff;
6844 6730 display: grid;
6845 6731 grid-auto-flow: row;
6846 - grid-template: auto/32px minmax(0, max-content) minmax(min-content, 1fr) 64px;
6732 + grid-template: auto/auto minmax(0, max-content) minmax(min-content, 1fr) 64px;
6847 6733 }
6848 6734 .editor-header:has(> .editor-header__center) {
6849 - grid-template: auto/32px min-content 1fr min-content 64px;
6735 + grid-template: auto/auto min-content 1fr min-content 64px;
6850 6736 }
6851 6737 @media (min-width: 782px) {
6852 6738 .editor-header:has(> .editor-header__center) {
6853 - grid-template: auto/32px minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) 64px;
6739 + grid-template: auto/auto minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) 64px;
6854 6740 }
6855 6741 }
6856 6742 @media (min-width: 480px) {
6857 6743 .editor-header {
@@ -6869,10 +6755,13 @@
6869 6755 }
6870 6756 }
6871 6757
6872 6758 .editor-header__back-button {
6873 - padding-left: 8px;
6759 + margin: 0 -8px 0 8px;
6874 6760 }
6761 +.show-icon-labels .editor-header__back-button {
6762 + margin-right: 0;
6763 +}
6875 6764
6876 6765 .editor-header__toolbar {
6877 6766 grid-column: 1/3;
6878 6767 }
@@ -7078,9 +6967,9 @@
7078 6967 }
7079 6968 .editor-editor-interface.is-distraction-free .editor-header > .edit-post-header__settings > .edit-post-header__post-preview-button {
7080 6969 visibility: hidden;
7081 6970 }
7082 -.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 {
7083 6972 display: none;
7084 6973 }
7085 6974 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within {
7086 6975 opacity: 1 !important;
@@ -7087,15 +6976,15 @@
7087 6976 }
7088 6977 .editor-editor-interface.is-distraction-free .interface-interface-skeleton__header:focus-within div {
7089 6978 transform: translateX(0) translateZ(0) !important;
7090 6979 }
7091 -.editor-editor-interface.is-distraction-free .components-editor-notices__dismissible {
6980 +.editor-editor-interface.is-distraction-free .editor-notices__dismissible {
7092 6981 position: absolute;
7093 6982 z-index: 35;
7094 6983 }
7095 -
7096 -.components-popover.more-menu-dropdown__content {
7097 - 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;
7098 6987 }
7099 6988
7100 6989 .editor-inserter-sidebar {
7101 6990 box-sizing: border-box;
@@ -7225,9 +7114,9 @@
7225 7114 scrollbar-gutter: auto;
7226 7115 }
7227 7116
7228 7117 .editor-list-view-sidebar__list-view-panel-content {
7229 - padding: 4px;
7118 + padding: 8px;
7230 7119 }
7231 7120
7232 7121 .editor-list-view-sidebar__list-view-container {
7233 7122 display: flex;
@@ -7258,8 +7147,13 @@
7258 7147 line-height: 1.4;
7259 7148 color: #757575;
7260 7149 }
7261 7150
7151 +.editor-more-menu__popup {
7152 + max-height: var(--available-height);
7153 + max-width: var(--wpds-dimension-surface-width-sm, 320px);
7154 +}
7155 +
7262 7156 .editor-post-parent__panel,
7263 7157 .editor-post-order__panel {
7264 7158 padding-top: 8px;
7265 7159 }
@@ -7310,12 +7204,12 @@
7310 7204 margin: 0;
7311 7205 display: flex;
7312 7206 align-items: center;
7313 7207 flex-wrap: wrap;
7314 - -moz-column-gap: 8px;
7315 - column-gap: 8px;
7208 + column-gap: 8px;
7316 7209 row-gap: 4px;
7317 - word-break: break-word;
7210 + word-break: normal;
7211 + overflow-wrap: anywhere;
7318 7212 }
7319 7213 .editor-post-card-panel__icon {
7320 7214 flex: 0 0 24px;
7321 7215 width: 24px;
@@ -7422,13 +7316,11 @@
7422 7316 /*rtl:end:ignore*/
7423 7317 background-size: 24px 24px;
7424 7318 }
7425 7319 .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
7426 - -o-object-fit: cover;
7427 - object-fit: cover;
7320 + object-fit: cover;
7428 7321 width: 100%;
7429 - -o-object-position: 50% 50%;
7430 - object-position: 50% 50%;
7322 + object-position: 50% 50%;
7431 7323 aspect-ratio: 2/1;
7432 7324 }
7433 7325
7434 7326 .editor-post-featured-image__actions:not(.editor-post-featured-image__actions-missing-image) {
@@ -7479,9 +7371,9 @@
7479 7371 .editor-post-last-revision__title.components-button.has-icon:hover, .editor-post-last-revision__title.components-button.has-icon:active {
7480 7372 background: #f0f0f0;
7481 7373 }
7482 7374 .editor-post-last-revision__title.components-button.has-icon:focus {
7483 - 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)));
7484 7376 border-radius: 0;
7485 7377 }
7486 7378
7487 7379 .components-panel__body.is-opened.editor-post-last-revision__panel {
@@ -7517,9 +7409,10 @@
7517 7409 align-items: center;
7518 7410 padding: 6px 0;
7519 7411 line-height: 20px;
7520 7412 hyphens: auto;
7521 - word-break: break-word;
7413 + word-break: normal;
7414 + overflow-wrap: anywhere;
7522 7415 }
7523 7416
7524 7417 .editor-post-panel__row-control {
7525 7418 flex-grow: 1;
@@ -7595,9 +7488,10 @@
7595 7488 .components-site-home {
7596 7489 display: block;
7597 7490 color: #757575;
7598 7491 font-size: 12px;
7599 - word-break: break-word;
7492 + word-break: normal;
7493 + overflow-wrap: anywhere;
7600 7494 }
7601 7495
7602 7496 .editor-post-publish-panel__header-publish-button,
7603 7497 .editor-post-publish-panel__header-cancel-button {
@@ -7618,12 +7512,8 @@
7618 7512 .editor-post-publish-panel__header-cancel-button {
7619 7513 padding-right: 4px;
7620 7514 }
7621 7515
7622 -.editor-post-publish-panel__header-published {
7623 - flex-grow: 1;
7624 -}
7625 -
7626 7516 .editor-post-publish-panel__footer {
7627 7517 padding: 16px;
7628 7518 }
7629 7519
@@ -7653,11 +7543,8 @@
7653 7543 background: #fff;
7654 7544 margin-left: -16px;
7655 7545 margin-right: -16px;
7656 7546 }
7657 -.editor-post-publish-panel__prepublish .editor-post-visibility__dialog-legend {
7658 - display: none;
7659 -}
7660 7547 .editor-post-publish-panel__prepublish .components-panel__body-title .components-button {
7661 7548 align-items: flex-start;
7662 7549 text-wrap: balance;
7663 7550 text-wrap: pretty;
@@ -7665,9 +7552,10 @@
7665 7552
7666 7553 .post-publish-panel__postpublish .components-panel__body {
7667 7554 border-bottom: 1px solid #e0e0e0;
7668 7555 border-top: none;
7669 - word-break: break-word;
7556 + word-break: normal;
7557 + overflow-wrap: anywhere;
7670 7558 }
7671 7559
7672 7560 .post-publish-panel__postpublish-buttons {
7673 7561 display: flex;
@@ -7714,17 +7602,8 @@
7714 7602 .post-publish-panel__postpublish-subheader {
7715 7603 margin: 0 0 8px;
7716 7604 }
7717 7605
7718 -.post-publish-panel__tip {
7719 - color: #f0b849;
7720 -}
7721 -
7722 -@media screen and (max-width: 782px) {
7723 - .post-publish-panel__postpublish-post-address__button-wrap .components-button {
7724 - height: 40px;
7725 - }
7726 -}
7727 7606 .editor-post-publish-panel {
7728 7607 box-sizing: border-box;
7729 7608 }
7730 7609 .editor-post-publish-panel *,
@@ -7811,9 +7690,8 @@
7811 7690 }
7812 7691
7813 7692 .editor-revisions-code-diff__table {
7814 7693 width: 100%;
7815 - min-width: -moz-max-content;
7816 7694 min-width: max-content;
7817 7695 border: 0;
7818 7696 border-collapse: separate;
7819 7697 border-spacing: 0;
@@ -7847,9 +7725,8 @@
7847 7725 color: #757575;
7848 7726 text-align: right;
7849 7727 white-space: nowrap;
7850 7728 -webkit-user-select: none;
7851 - -moz-user-select: none;
7852 7729 user-select: none;
7853 7730 }
7854 7731
7855 7732 .editor-revisions-code-diff__line-number {
@@ -7933,9 +7810,10 @@
7933 7810 display: flex;
7934 7811 flex-direction: column;
7935 7812 overflow: hidden;
7936 7813 }
7937 -.interface-complementary-area:has(.editor-post-revisions-timeline) .editor-sidebar__panel-tabs {
7814 +
7815 +.interface-complementary-area > .editor-sidebar__panel-tabs {
7938 7816 flex-shrink: 0;
7939 7817 }
7940 7818
7941 7819 .editor-sidebar__panel:has(.editor-post-revisions-timeline) {
@@ -7943,25 +7821,29 @@
7943 7821 flex-direction: column;
7944 7822 flex: 1;
7945 7823 min-height: 0;
7946 7824 }
7947 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) [role=tabpanel]:has(.editor-post-revisions-timeline) {
7825 +
7826 +.editor-sidebar__panel [role=tabpanel]:has(.editor-post-revisions-timeline) {
7948 7827 display: flex;
7949 7828 flex-direction: column;
7950 7829 flex: 1;
7951 7830 min-height: 0;
7952 7831 }
7953 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-revision-meta-diff__content {
7832 +
7833 +.editor-sidebar__panel .editor-revision-meta-diff__content {
7954 7834 max-height: 80px;
7955 7835 overflow-y: auto;
7956 7836 }
7957 -.editor-sidebar__panel:has(.editor-post-revisions-timeline) .editor-post-revisions-timeline {
7837 +
7838 +.editor-sidebar__panel .editor-post-revisions-timeline {
7958 7839 flex: 1;
7959 7840 min-height: 0;
7960 7841 }
7961 7842
7962 7843 .editor-revision-fields-diff__value {
7963 - word-break: break-word;
7844 + word-break: normal;
7845 + overflow-wrap: anywhere;
7964 7846 }
7965 7847
7966 7848 .editor-revision-fields-diff__added {
7967 7849 background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
@@ -8015,8 +7897,14 @@
8015 7897 min-width: 320px;
8016 7898 padding: 16px;
8017 7899 }
8018 7900
7901 +.editor-post-schedule__reset {
7902 + justify-content: center;
7903 + margin-top: 16px;
7904 + width: 100%;
7905 +}
7906 +
8019 7907 .editor-post-status {
8020 7908 max-width: 100%;
8021 7909 }
8022 7910 .editor-post-status.is-read-only {
@@ -8069,8 +7957,13 @@
8069 7957 .editor-post-taxonomies__hierarchical-terms-choice:last-child {
8070 7958 margin-bottom: 4px;
8071 7959 }
8072 7960
7961 +.editor-post-taxonomies__hierarchical-terms-add,
7962 +.editor-post-taxonomies__hierarchical-terms-submit {
7963 + align-self: flex-start;
7964 +}
7965 +
8073 7966 .editor-post-taxonomies__hierarchical-terms-subchoices {
8074 7967 margin-top: 8px;
8075 7968 margin-left: 16px;
8076 7969 }
@@ -8116,29 +8009,24 @@
8116 8009 z-index: 1000001;
8117 8010 }
8118 8011
8119 8012 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8120 - -moz-column-count: 2;
8121 - column-count: 2;
8122 - -moz-column-gap: 24px;
8123 - column-gap: 24px;
8013 + column-count: 2;
8014 + column-gap: 24px;
8124 8015 padding-top: 2px;
8125 8016 }
8126 8017 @media (min-width: 782px) {
8127 8018 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8128 - -moz-column-count: 3;
8129 - column-count: 3;
8019 + column-count: 3;
8130 8020 }
8131 8021 }
8132 8022 @media (min-width: 1280px) {
8133 8023 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
8134 - -moz-column-count: 4;
8135 - column-count: 4;
8024 + column-count: 4;
8136 8025 }
8137 8026 }
8138 8027 .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8139 - -moz-column-break-inside: avoid;
8140 - break-inside: avoid-column;
8028 + break-inside: avoid-column;
8141 8029 }
8142 8030
8143 8031 .editor-post-template__dropdown .components-popover__content {
8144 8032 min-width: 240px;
@@ -8193,9 +8081,10 @@
8193 8081 margin: 0;
8194 8082 width: 100%;
8195 8083 box-shadow: none;
8196 8084 resize: none;
8197 - overflow: hidden;
8085 + field-sizing: content;
8086 + overflow: auto;
8198 8087 font-family: Menlo, Consolas, monaco, monospace;
8199 8088 line-height: 2.4;
8200 8089 min-height: 200px;
8201 8090 }
@@ -8225,11 +8114,8 @@
8225 8114 border-color: var(--wp-admin-theme-color);
8226 8115 box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
8227 8116 position: relative;
8228 8117 }
8229 -textarea.editor-post-text-editor::-moz-placeholder {
8230 - color: rgba(30, 30, 30, 0.62);
8231 -}
8232 8118 textarea.editor-post-text-editor::placeholder {
8233 8119 color: rgba(30, 30, 30, 0.62);
8234 8120 }
8235 8121
@@ -8251,9 +8137,10 @@
8251 8137 /* rtl:begin:ignore */
8252 8138 .editor-post-url__link,
8253 8139 .editor-post-url__front-page-link {
8254 8140 direction: ltr;
8255 - word-break: break-word;
8141 + word-break: normal;
8142 + overflow-wrap: anywhere;
8256 8143 }
8257 8144
8258 8145 /* rtl:end:ignore */
8259 8146 .editor-post-url__front-page-link {
@@ -8280,9 +8167,10 @@
8280 8167 }
8281 8168
8282 8169 .editor-post-url__panel-toggle,
8283 8170 .editor-post-parent__panel-toggle {
8284 - word-break: break-word;
8171 + word-break: normal;
8172 + overflow-wrap: anywhere;
8285 8173 }
8286 8174
8287 8175 .editor-post-url__intro {
8288 8176 margin: 0;
@@ -8305,14 +8193,18 @@
8305 8193 flex-grow: 1;
8306 8194 justify-content: center;
8307 8195 }
8308 8196
8309 -.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 {
8310 8202 padding-right: 4px;
8311 8203 padding-left: 6px;
8312 8204 }
8313 8205
8314 -.editor-preview-dropdown.is-responsive-editing .editor-preview-dropdown__toggle {
8206 +.editor-preview-dropdown__toggle.is-responsive-editing {
8315 8207 color: var(--wp-block-synced-color);
8316 8208 }
8317 8209
8318 8210 @media (prefers-reduced-motion: no-preference) {
@@ -8332,11 +8224,9 @@
8332 8224 bottom: 0;
8333 8225 padding: 0;
8334 8226 margin: auto 0;
8335 8227 width: 12px;
8336 - -webkit-appearance: none;
8337 - -moz-appearance: none;
8338 - appearance: none;
8228 + appearance: none;
8339 8229 cursor: ew-resize;
8340 8230 outline: none;
8341 8231 background: none;
8342 8232 border-radius: 9999px;
@@ -8412,12 +8302,12 @@
8412 8302 bottom: 0;
8413 8303 width: 100%;
8414 8304 height: 72px;
8415 8305 background-color: #fff;
8416 - margin-left: -32px;
8417 - margin-right: -32px;
8418 - padding-left: 32px;
8419 - padding-right: 32px;
8306 + margin-left: -24px;
8307 + margin-right: -24px;
8308 + padding-left: 24px;
8309 + padding-right: 24px;
8420 8310 border-top: 1px solid #ddd;
8421 8311 z-index: 1;
8422 8312 }
8423 8313 .editor-start-page-options__modal .block-editor-block-patterns-list {
@@ -8422,30 +8312,51 @@
8422 8312 }
8423 8313 .editor-start-page-options__modal .block-editor-block-patterns-list {
8424 8314 padding-bottom: 72px;
8425 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 +}
8426 8332
8427 -.editor-start-page-options__modal-content .block-editor-block-patterns-list {
8428 - -moz-column-count: 2;
8429 - column-count: 2;
8430 - -moz-column-gap: 24px;
8431 - column-gap: 24px;
8333 +.editor-start-page-options__modal-content {
8334 + container-type: inline-size;
8432 8335 }
8336 +
8433 8337 @media (min-width: 782px) {
8434 - .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8435 - -moz-column-count: 3;
8436 - column-count: 3;
8338 + .editor-start-page-options__modal-content.has-pattern-categories {
8339 + margin-left: 280px;
8437 8340 }
8438 8341 }
8439 -@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) {
8440 8353 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
8441 - -moz-column-count: 4;
8442 - column-count: 4;
8354 + columns: 4 220px;
8443 8355 }
8444 8356 }
8445 8357 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8446 - -moz-column-break-inside: avoid;
8447 - break-inside: avoid-column;
8358 + break-inside: avoid-column;
8448 8359 margin-bottom: 24px;
8449 8360 }
8450 8361 .editor-start-page-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
8451 8362 min-height: 100px;
@@ -8459,12 +8370,12 @@
8459 8370 bottom: 0;
8460 8371 width: 100%;
8461 8372 height: 92px;
8462 8373 background-color: #fff;
8463 - margin-left: -32px;
8464 - margin-right: -32px;
8465 - padding-left: 32px;
8466 - padding-right: 32px;
8374 + margin-left: -24px;
8375 + margin-right: -24px;
8376 + padding-left: 24px;
8377 + padding-right: 24px;
8467 8378 border-top: 1px solid #ddd;
8468 8379 z-index: 1;
8469 8380 }
8470 8381 .editor-start-template-options__modal .block-editor-block-patterns-list {
@@ -8471,28 +8382,18 @@
8471 8382 padding-bottom: 92px;
8472 8383 }
8473 8384
8474 8385 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8475 - -moz-column-count: 2;
8476 - column-count: 2;
8477 - -moz-column-gap: 24px;
8478 - column-gap: 24px;
8386 + column-count: 2;
8387 + column-gap: 24px;
8479 8388 }
8480 8389 @media (min-width: 782px) {
8481 8390 .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8482 - -moz-column-count: 3;
8483 - column-count: 3;
8391 + columns: 4 220px;
8484 8392 }
8485 8393 }
8486 -@media (min-width: 1280px) {
8487 - .editor-start-template-options__modal-content .block-editor-block-patterns-list {
8488 - -moz-column-count: 4;
8489 - column-count: 4;
8490 - }
8491 -}
8492 8394 .editor-start-template-options__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
8493 - -moz-column-break-inside: avoid;
8494 - break-inside: avoid-column;
8395 + break-inside: avoid-column;
8495 8396 }
8496 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 {
8497 8398 display: none;
8498 8399 }
@@ -8586,8 +8487,11 @@
8586 8487 display: block;
8587 8488 width: 100%;
8588 8489 height: 100%;
8589 8490 }
8491 +.editor-styles-canvas.is-preview-mode {
8492 + padding: 0;
8493 +}
8590 8494
8591 8495 .editor-styles-canvas__section {
8592 8496 background: #fff;
8593 8497 bottom: 0;
@@ -8700,9 +8604,9 @@
8700 8604 max-width: none;
8701 8605 line-height: 1.4;
8702 8606 font-family: Menlo, Consolas, monaco, monospace;
8703 8607 font-size: 2.5em;
8704 - font-weight: normal;
8608 + font-weight: 400;
8705 8609 border: 1px solid #949494;
8706 8610 border-radius: 0;
8707 8611 padding: 16px;
8708 8612 }
@@ -8786,9 +8690,11 @@
8786 8690 .editor-visual-editor iframe[name=editor-canvas] {
8787 8691 background-color: transparent;
8788 8692 }
8789 8693 .editor-visual-editor {
8694 + flex-direction: column;
8790 8695 align-items: center;
8696 + justify-content: center;
8791 8697 }
8792 8698 @media (prefers-reduced-motion: no-preference) {
8793 8699 .editor-visual-editor {
8794 8700 transition: padding 0.2s ease-out;