PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/block-editor/style-rtl.css +697 -404 23.0.1 → trunk View file →
@@ -67,8 +67,14 @@
67 67 /**
68 68 * Focus styles.
69 69 */
70 70 /**
71 + * Standard focus rings for the WordPress Design System.
72 + *
73 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
74 + * e.g. `&:focus { @include outset-ring__focus(); }`.
75 + */
76 +/**
71 77 * Applies editor left position to the selector passed as argument
72 78 */
73 79 /**
74 80 * Styles that are reused verbatim in a few places
@@ -157,11 +163,8 @@
157 163 }
158 164 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover {
159 165 color: var(--wp-admin-theme-color);
160 166 }
161 -.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus {
162 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
163 -}
164 167 .block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading {
165 168 height: 100%;
166 169 position: absolute;
167 170 z-index: 1;
@@ -172,9 +175,9 @@
172 175 margin: 0;
173 176 }
174 177
175 178 .block-editor-global-styles-background-panel__dropdown-toggle {
176 - cursor: pointer;
179 + cursor: var(--wpds-cursor-control, pointer);
177 180 background: transparent;
178 181 border: none;
179 182 height: 100%;
180 183 width: 100%;
@@ -193,12 +196,23 @@
193 196 .block-editor-global-styles-background-panel__reset {
194 197 transition: opacity 0.1s ease-in-out;
195 198 }
196 199 }
200 +.block-editor-global-styles-background-panel__reset.has-local-override-from-global-styles__reset {
201 + position: absolute;
202 + display: inline-flex;
203 + align-items: center;
204 + justify-content: center;
205 + top: 50%;
206 + transform: translateY(-50%);
207 + margin-block: 0;
208 + margin-inline: 0 8px;
209 + opacity: 1;
210 +}
197 211 .block-editor-global-styles-background-panel__reset.block-editor-global-styles-background-panel__reset {
198 212 border-radius: 2px;
199 213 }
200 -.block-editor-global-styles-background-panel__dropdown-toggle:hover + .block-editor-global-styles-background-panel__reset, .block-editor-global-styles-background-panel__reset:focus, .block-editor-global-styles-background-panel__reset:hover {
214 +.block-editor-global-styles-background-panel__dropdown-toggle:hover + .block-editor-global-styles-background-panel__reset, .block-editor-global-styles-background-panel__reset:focus, .block-editor-global-styles-background-panel__reset:focus-within, .block-editor-global-styles-background-panel__reset:hover {
201 215 opacity: 1;
202 216 }
203 217 @media (hover: none) {
204 218 .block-editor-global-styles-background-panel__reset {
@@ -243,11 +257,11 @@
243 257 z-index: 159890;
244 258 }
245 259
246 260 .block-editor-global-styles-background-panel__media-replace-popover .components-popover__content {
247 - width: 226px;
261 + width: auto;
248 262 }
249 -.block-editor-global-styles-background-panel__media-replace-popover .components-button {
263 +.block-editor-global-styles-background-panel__media-replace-popover .components-menu-item__button.components-button {
250 264 padding: 0 8px;
251 265 }
252 266 .block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right {
253 267 margin-right: 16px;
@@ -281,13 +295,8 @@
281 295 }
282 296 .block-editor-block-icon.has-colors svg {
283 297 fill: currentColor;
284 298 }
285 -@media (forced-colors: active) {
286 - .block-editor-block-icon.has-colors svg {
287 - fill: CanvasText;
288 - }
289 -}
290 299 .block-editor-block-icon svg {
291 300 min-width: 20px;
292 301 min-height: 20px;
293 302 max-width: 24px;
@@ -330,8 +339,21 @@
330 339 padding: 32px 16px;
331 340 text-align: center;
332 341 }
333 342
343 +.block-editor-block-inspector__state-badges {
344 + display: flex;
345 + align-items: center;
346 + flex-wrap: wrap;
347 + gap: 8px;
348 + padding: 8px 16px;
349 + margin-top: -16px;
350 +}
351 +
352 +.block-editor-block-inspector__state-badges-text {
353 + white-space: nowrap;
354 +}
355 +
334 356 .block-editor-block-inspector__no-block-tools {
335 357 border-top: 1px solid #ddd;
336 358 }
337 359
@@ -418,8 +440,18 @@
418 440 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
419 441 color: #fff;
420 442 background: var(--wp-admin-theme-color);
421 443 }
444 +@media not (prefers-reduced-motion) {
445 + .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon svg,
446 + .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon svg {
447 + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
448 + }
449 +}
450 +.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg,
451 +.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg {
452 + transform: rotate(-45deg);
453 +}
422 454
423 455 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
424 456 background: var(--wp-admin-theme-color);
425 457 }
@@ -448,8 +480,14 @@
448 480 }
449 481 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent {
450 482 margin-right: 0;
451 483 }
484 +.components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent:has(.block-editor-block-parent-selector__inserter) {
485 + margin-right: calc(48px + 24px + 12px + 8px + 2 * 1px);
486 +}
487 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent:has(.block-editor-block-parent-selector__inserter) {
488 + margin-right: 0;
489 +}
452 490 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar {
453 491 overflow: visible;
454 492 }
455 493 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar-group,
@@ -470,8 +508,67 @@
470 508 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
471 509 position: absolute;
472 510 right: calc(-48px - 8px - 1px);
473 511 }
512 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) {
513 + right: calc(-48px - 24px - 12px - 8px - 3 * 1px);
514 + border: 1px solid #1e1e1e;
515 + border-radius: 2px;
516 + background-color: #fff;
517 +}
518 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) > .components-toolbar-group:last-child {
519 + border-left: none;
520 +}
521 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) .block-editor-block-parent-selector__button {
522 + border: none;
523 + background: none;
524 +}
525 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon {
526 + color: #fff;
527 + background: transparent;
528 +}
529 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon::after {
530 + content: "";
531 + position: absolute;
532 + z-index: -1;
533 + top: 50%;
534 + right: 50%;
535 + transform: translate(50%, -50%);
536 + width: 24px;
537 + height: 24px;
538 + border-radius: 2px;
539 + background: #1e1e1e;
540 +}
541 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover {
542 + color: #fff;
543 +}
544 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover::after {
545 + background: var(--wp-admin-theme-color);
546 +}
547 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon {
548 + width: auto;
549 + padding: 0 12px;
550 + color: inherit;
551 +}
552 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon svg {
553 + display: none;
554 +}
555 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon::after {
556 + content: attr(aria-label);
557 + position: static;
558 + transform: none;
559 + width: auto;
560 + height: auto;
561 + border-radius: 0;
562 + background: none;
563 + white-space: nowrap;
564 +}
565 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover {
566 + color: var(--wp-admin-theme-color);
567 +}
568 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover::after {
569 + background: none;
570 +}
474 571 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::before {
475 572 content: "";
476 573 }
477 574 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after {
@@ -537,9 +634,9 @@
537 634 .block-editor-block-lock-modal__options-all {
538 635 padding: 12px 0;
539 636 }
540 637 .block-editor-block-lock-modal__options-all .components-checkbox-control__label {
541 - font-weight: 600;
638 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
542 639 }
543 640
544 641 .block-editor-block-lock-modal__checklist-item {
545 642 display: flex;
@@ -551,9 +648,9 @@
551 648 }
552 649 .block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
553 650 flex-shrink: 0;
554 651 margin-left: 12px;
555 - fill: #1e1e1e;
652 + color: #1e1e1e;
556 653 }
557 654 .block-editor-block-lock-modal__checklist-item:hover {
558 655 background-color: #f0f0f0;
559 656 border-radius: 2px;
@@ -656,13 +753,14 @@
656 753 height: auto !important;
657 754 }
658 755
659 756 .block-editor-block-card__title {
660 - font-weight: 499;
757 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
661 758 display: flex;
662 759 align-items: center;
663 760 flex-wrap: wrap;
664 761 gap: 4px 8px;
762 + overflow-wrap: anywhere;
665 763 }
666 764 .block-editor-block-card__title.block-editor-block-card__title {
667 765 font-size: 13px;
668 766 line-height: 1.4;
@@ -787,9 +885,9 @@
787 885 min-width: 18px;
788 886 min-height: 18px;
789 887 }
790 888 .block-editor-block-draggable-chip .components-flex__item {
791 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
889 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
792 890 font-size: 13px;
793 891 }
794 892
795 893 .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
@@ -831,8 +929,9 @@
831 929 text-align: center;
832 930 }
833 931
834 932 .block-editor-block-manager__category {
933 + isolation: isolate;
835 934 margin: 0 0 24px 0;
836 935 }
837 936
838 937 .block-editor-block-manager__category-title {
@@ -842,9 +941,9 @@
842 941 background-color: #fff;
843 942 z-index: 1;
844 943 }
845 944 .block-editor-block-manager__category-title .components-checkbox-control__label {
846 - font-weight: 600;
945 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
847 946 }
848 947
849 948 .block-editor-block-manager__checklist {
850 949 margin-top: 0;
@@ -867,8 +966,9 @@
867 966 }
868 967 .block-editor-block-manager__checklist-item .block-editor-block-icon {
869 968 margin-left: 10px;
870 969 fill: #1e1e1e;
970 + color: #1e1e1e;
871 971 }
872 972
873 973 .block-editor-block-manager__results {
874 974 border-top: 1px solid #ddd;
@@ -957,16 +1057,8 @@
957 1057 animation: components-button__appear-animation 0.1s ease;
958 1058 animation-fill-mode: forwards;
959 1059 }
960 1060 }
961 -.components-button.block-editor-block-mover-button:focus, .components-button.block-editor-block-mover-button:focus:enabled, .components-button.block-editor-block-mover-button:focus::before {
962 - box-shadow: none;
963 - outline: none;
964 -}
965 -.components-button.block-editor-block-mover-button:focus-visible::before {
966 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
967 - outline: 2px solid transparent;
968 -}
969 1061
970 1062 .block-editor-block-navigation__container {
971 1063 min-width: 280px;
972 1064 }
@@ -975,13 +1067,13 @@
975 1067 margin: 0 0 12px;
976 1068 color: #757575;
977 1069 text-transform: uppercase;
978 1070 font-size: 11px;
979 - font-weight: 499;
1071 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
980 1072 }
981 1073
982 1074 .block-editor-block-patterns-list__list-item {
983 - cursor: pointer;
1075 + cursor: var(--wpds-cursor-control, pointer);
984 1076 margin-bottom: 16px;
985 1077 position: relative;
986 1078 }
987 1079 .block-editor-block-patterns-list__list-item.is-placeholder {
@@ -998,9 +1090,8 @@
998 1090 outline: 0;
999 1091 }
1000 1092 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
1001 1093 flex-grow: 1;
1002 - font-size: 12px;
1003 1094 text-align: right;
1004 1095 }
1005 1096 .block-editor-block-patterns-list__item .block-editor-block-preview__container {
1006 1097 display: flex;
@@ -1040,9 +1131,9 @@
1040 1131 min-width: 24px;
1041 1132 height: 24px;
1042 1133 }
1043 1134 .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon {
1044 - fill: var(--wp-block-synced-color);
1135 + color: var(--wp-block-synced-color);
1045 1136 }
1046 1137
1047 1138 .block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination {
1048 1139 border-top: 1px solid #2f2f2f;
@@ -1129,9 +1220,9 @@
1129 1220 z-index: 1;
1130 1221 }
1131 1222
1132 1223 .block-editor-block-quick-navigation__item {
1133 - font-weight: 400;
1224 + font-weight: var(--wpds-typography-font-weight-default, 400);
1134 1225 }
1135 1226
1136 1227 .block-editor-block-rename-modal {
1137 1228 z-index: 1000001;
@@ -1154,37 +1245,17 @@
1154 1245 grid-column: 1/-1;
1155 1246 }
1156 1247
1157 1248 .block-editor-block-styles__variants {
1158 - display: flex;
1159 - flex-wrap: wrap;
1160 - justify-content: space-between;
1249 + display: grid;
1161 1250 gap: 8px;
1162 1251 }
1163 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item {
1164 - color: #1e1e1e;
1165 - box-shadow: inset 0 0 0 1px #ddd;
1166 - display: inline-block;
1167 - width: calc(50% - 4px);
1252 +.block-editor-block-styles__variants .block-editor-block-styles__row {
1253 + display: grid;
1254 + grid-template-columns: repeat(2, minmax(0, 1fr));
1255 + gap: 8px;
1168 1256 }
1169 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover {
1170 - color: var(--wp-admin-theme-color);
1171 - box-shadow: inset 0 0 0 1px #ddd;
1172 -}
1173 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover {
1174 - background-color: #1e1e1e;
1175 - box-shadow: none;
1176 -}
1177 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active .block-editor-block-styles__item-text, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover .block-editor-block-styles__item-text {
1178 - color: #fff;
1179 -}
1180 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
1181 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1182 - outline: 2px solid transparent;
1183 -}
1184 1257 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
1185 - word-break: break-all;
1186 - white-space: normal;
1187 1258 text-align: start;
1188 1259 text-align-last: center;
1189 1260 }
1190 1261
@@ -1229,9 +1300,9 @@
1229 1300 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item {
1230 1301 margin-top: 16px;
1231 1302 }
1232 1303 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-preview__container {
1233 - cursor: pointer;
1304 + cursor: var(--wpds-cursor-control, pointer);
1234 1305 }
1235 1306 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item {
1236 1307 height: 100%;
1237 1308 border-radius: 2px;
@@ -1255,9 +1326,9 @@
1255 1326 .block-editor-block-switcher__preview-patterns-container .block-editor-block-switcher__preview-patterns-container-list__list-item .block-editor-block-switcher__preview-patterns-container-list__item .block-editor-block-switcher__preview-patterns-container-list__item-title {
1256 1327 padding: 4px;
1257 1328 font-size: 12px;
1258 1329 text-align: center;
1259 - cursor: pointer;
1330 + cursor: var(--wpds-cursor-control, pointer);
1260 1331 }
1261 1332
1262 1333 .block-editor-block-switcher__no-transforms {
1263 1334 color: #757575;
@@ -1270,9 +1341,8 @@
1270 1341 padding: 8px;
1271 1342 }
1272 1343
1273 1344 .block-editor-block-types-list > [role=presentation] {
1274 - overflow: hidden;
1275 1345 display: flex;
1276 1346 flex-wrap: wrap;
1277 1347 }
1278 1348
@@ -1305,9 +1375,9 @@
1305 1375 }
1306 1376 }
1307 1377 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
1308 1378 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
1309 - cursor: pointer;
1379 + cursor: var(--wpds-cursor-control, pointer);
1310 1380 }
1311 1381 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item {
1312 1382 scroll-margin: 5px 0;
1313 1383 }
@@ -1329,9 +1399,9 @@
1329 1399 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
1330 1400 padding-top: 8px;
1331 1401 font-size: 12px;
1332 1402 text-align: center;
1333 - cursor: pointer;
1403 + cursor: var(--wpds-cursor-control, pointer);
1334 1404 }
1335 1405 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
1336 1406 min-height: 100px;
1337 1407 border-radius: 4px;
@@ -1474,12 +1544,8 @@
1474 1544 margin: 0;
1475 1545 min-width: 0;
1476 1546 }
1477 1547
1478 -.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) {
1479 - display: block;
1480 -}
1481 -
1482 1548 @media screen and (min-width: 782px) {
1483 1549 .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
1484 1550 display: grid;
1485 1551 grid-template-columns: repeat(6, 28px);
@@ -1487,8 +1553,18 @@
1487 1553 }
1488 1554 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
1489 1555 margin-bottom: inherit;
1490 1556 }
1557 +.block-editor-panel-color-gradient-settings {
1558 + /* Increased specificity required to remove the slot wrapper's row gap */
1559 +}
1560 +.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__inner-wrapper {
1561 + grid-column: 1/-1;
1562 + row-gap: 0;
1563 +}
1564 +.block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__inner-wrapper > * {
1565 + grid-column: 1/-1;
1566 +}
1491 1567
1492 1568 .block-editor-panel-color-gradient-settings__dropdown-content {
1493 1569 min-height: 160px;
1494 1570 }
@@ -1500,8 +1576,12 @@
1500 1576 .block-editor-panel-color-gradient-settings__color-indicator {
1501 1577 background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1502 1578 }
1503 1579
1580 +.block-editor-panel-color-gradient-settings__contrast-notice {
1581 + margin-top: 16px;
1582 +}
1583 +
1504 1584 /**
1505 1585 * The following styles replicate the separated border of the
1506 1586 * `ItemGroup` component but allows for hidden items. This is because
1507 1587 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
@@ -1506,10 +1586,14 @@
1506 1586 * `ItemGroup` component but allows for hidden items. This is because
1507 1587 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
1508 1588 * must at least render a placeholder which would otherwise interfere
1509 1589 * with the `:last-child` styles.
1590 +*
1591 +* Applied via the shared `block-editor-color-gradient-item` class on
1592 +* color/gradient dropdown items across the Color, Background, and
1593 +* Typography panels.
1510 1594 */
1511 -.block-editor-tools-panel-color-gradient-settings__item {
1595 +.block-editor-color-gradient-item {
1512 1596 padding: 0;
1513 1597 max-width: 100%;
1514 1598 position: relative;
1515 1599 border-right: 1px solid #ddd;
@@ -1515,20 +1599,19 @@
1515 1599 border-right: 1px solid #ddd;
1516 1600 border-left: 1px solid #ddd;
1517 1601 border-bottom: 1px solid #ddd;
1518 1602 }
1519 -.block-editor-tools-panel-color-gradient-settings__item:nth-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
1520 - margin-top: 24px;
1603 +.block-editor-color-gradient-item:nth-child(1 of .block-editor-color-gradient-item) {
1521 1604 border-top-right-radius: 2px;
1522 1605 border-top-left-radius: 2px;
1523 1606 border-top: 1px solid #ddd;
1524 1607 }
1525 -.block-editor-tools-panel-color-gradient-settings__item:nth-last-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
1608 +.block-editor-color-gradient-item:nth-last-child(1 of .block-editor-color-gradient-item) {
1526 1609 border-bottom-right-radius: 2px;
1527 1610 border-bottom-left-radius: 2px;
1528 1611 }
1529 -.block-editor-tools-panel-color-gradient-settings__item > div,
1530 -.block-editor-tools-panel-color-gradient-settings__item > div > button {
1612 +.block-editor-color-gradient-item > div,
1613 +.block-editor-color-gradient-item > div > button {
1531 1614 border-radius: inherit;
1532 1615 }
1533 1616
1534 1617 .block-editor-tools-panel-color-gradient-settings__dropdown {
@@ -1545,13 +1628,17 @@
1545 1628 background: #f0f0f0;
1546 1629 color: var(--wp-admin-theme-color);
1547 1630 }
1548 1631 .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
1632 + min-width: 0;
1549 1633 white-space: nowrap;
1550 1634 overflow: hidden;
1551 1635 text-overflow: ellipsis;
1552 1636 max-width: calc(100% - 44px);
1553 1637 }
1638 +.block-editor-tools-panel-color-gradient-settings__dropdown > button.has-contrast-warning .block-editor-panel-color-gradient-settings__color-name {
1639 + max-width: calc(100% - 72px);
1640 +}
1554 1641
1555 1642 .block-editor-panel-color-gradient-settings__dropdown {
1556 1643 width: 100%;
1557 1644 }
@@ -1558,8 +1645,21 @@
1558 1645 .block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
1559 1646 flex-shrink: 0;
1560 1647 }
1561 1648
1649 +.block-editor-panel-color-gradient-settings__labeled-indicators {
1650 + width: 100%;
1651 + min-width: 0;
1652 +}
1653 +
1654 +.block-editor-panel-color-gradient-settings__color-indicators {
1655 + display: flex;
1656 + flex-shrink: 0;
1657 +}
1658 +.block-editor-panel-color-gradient-settings__color-indicators > * + * {
1659 + margin-inline-start: -8px;
1660 +}
1661 +
1562 1662 .block-editor-panel-color-gradient-settings__reset {
1563 1663 position: absolute;
1564 1664 left: 0;
1565 1665 top: 8px;
@@ -1581,9 +1681,22 @@
1581 1681 .block-editor-panel-color-gradient-settings__reset {
1582 1682 opacity: 1;
1583 1683 }
1584 1684 }
1685 +.block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + .block-editor-panel-color-gradient-settings__reset {
1686 + left: 28px;
1687 +}
1585 1688
1689 +.block-editor-panel-color-gradient-settings__contrast-warning {
1690 + position: absolute;
1691 + left: 0;
1692 + top: 8px;
1693 + margin: auto 8px auto;
1694 +}
1695 +.block-editor-panel-color-gradient-settings__contrast-warning.block-editor-panel-color-gradient-settings__contrast-warning {
1696 + border-radius: 2px;
1697 +}
1698 +
1586 1699 .block-editor-date-format-picker {
1587 1700 margin: 0 0 16px;
1588 1701 padding: 0;
1589 1702 border: none;
@@ -1592,8 +1705,14 @@
1592 1705 .block-editor-date-format-picker__custom-format-select-control__custom-option {
1593 1706 border-top: 1px solid #ddd;
1594 1707 }
1595 1708
1709 +.block-editor-dimension-control {
1710 + border: 0;
1711 + margin: 0;
1712 + padding: 0;
1713 +}
1714 +
1596 1715 .block-editor-duotone-control__popover.components-popover > .components-popover__content {
1597 1716 padding: 8px;
1598 1717 width: 260px;
1599 1718 }
@@ -1638,8 +1757,21 @@
1638 1757 .block-editor-global-styles__clear-shadow {
1639 1758 text-align: left;
1640 1759 }
1641 1760
1761 +.block-editor-global-styles-state-control {
1762 + margin-top: -4px;
1763 +}
1764 +
1765 +.block-editor-global-styles-state-control__badges {
1766 + min-height: 24px;
1767 +}
1768 +
1769 +.block-editor-global-styles-state-control__badge-tooltip-trigger {
1770 + display: inline-flex;
1771 + max-width: 100%;
1772 +}
1773 +
1642 1774 .block-editor-global-styles-filters-panel__dropdown,
1643 1775 .block-editor-global-styles__shadow-dropdown {
1644 1776 display: block;
1645 1777 padding: 0;
@@ -1657,8 +1789,17 @@
1657 1789 .block-editor-global-styles__shadow-dropdown-toggle.is-open {
1658 1790 background-color: #f0f0f0;
1659 1791 }
1660 1792
1793 +.block-editor-panel-duotone-settings__label-row {
1794 + width: 100%;
1795 + min-width: 0;
1796 +}
1797 +
1798 +.block-editor-panel-duotone-settings__label {
1799 + min-width: 0;
1800 +}
1801 +
1661 1802 .block-editor-global-styles__shadow-editor__remove-button {
1662 1803 position: absolute;
1663 1804 left: 0;
1664 1805 top: 8px;
@@ -1684,9 +1825,9 @@
1684 1825 background: none;
1685 1826 color: #2f2f2f;
1686 1827 border: #e0e0e0 1px solid;
1687 1828 border-radius: 2px;
1688 - cursor: pointer;
1829 + cursor: var(--wpds-cursor-control, pointer);
1689 1830 display: inline-flex;
1690 1831 align-items: center;
1691 1832 padding: 0;
1692 1833 height: 26px;
@@ -1740,8 +1881,187 @@
1740 1881 opacity: 1;
1741 1882 }
1742 1883 }
1743 1884
1885 +.block-editor-global-styles__text-shadow {
1886 + width: 260px;
1887 + padding: 8px;
1888 +}
1889 +
1890 +.block-editor-global-styles__text-shadow-preview {
1891 + display: flex;
1892 + align-items: center;
1893 + justify-content: center;
1894 + height: 80px;
1895 + border: #ddd 1px solid;
1896 + border-radius: 2px;
1897 + font-size: 24px;
1898 + margin-bottom: 16px;
1899 + background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
1900 + background-position: 0 0, 8px 8px;
1901 + background-size: 16px 16px;
1902 +}
1903 +
1904 +.block-editor-global-styles__text-shadow-list-item {
1905 + justify-content: space-between;
1906 + gap: 8px;
1907 + width: 100%;
1908 +}
1909 +.block-editor-global-styles__text-shadow-list-item:not(.is-active) svg {
1910 + opacity: 0;
1911 +}
1912 +
1913 +.block-editor-global-styles__text-shadow-dropdown {
1914 + display: block;
1915 + padding: 0;
1916 + position: relative;
1917 + border: 1px solid #ddd;
1918 + border-radius: 2px;
1919 +}
1920 +
1921 +.block-editor-global-styles__text-shadow-dropdown-toggle {
1922 + width: 100%;
1923 + padding: 8px;
1924 +}
1925 +.block-editor-global-styles__text-shadow-dropdown-toggle.is-open {
1926 + background-color: #f0f0f0;
1927 +}
1928 +
1929 +.block-editor-global-styles__text-shadow-remove-button {
1930 + position: absolute;
1931 + left: 8px;
1932 + top: 8px;
1933 + opacity: 0;
1934 +}
1935 +@media not (prefers-reduced-motion) {
1936 + .block-editor-global-styles__text-shadow-remove-button {
1937 + transition: opacity 0.1s ease-in-out;
1938 + }
1939 +}
1940 +.block-editor-global-styles__text-shadow-dropdown:hover .block-editor-global-styles__text-shadow-remove-button, .block-editor-global-styles__text-shadow-remove-button:focus, .block-editor-global-styles__text-shadow-remove-button:hover {
1941 + opacity: 1;
1942 +}
1943 +@media (hover: none) {
1944 + .block-editor-global-styles__text-shadow-remove-button {
1945 + opacity: 1;
1946 + }
1947 +}
1948 +
1949 +.is-inherited-from-global-styles .components-base-control__label,
1950 +.is-inherited-from-global-styles .components-input-control__label {
1951 + text-decoration-line: underline;
1952 + text-decoration-style: dotted;
1953 + text-decoration-thickness: 1px;
1954 + text-underline-offset: 0.2em;
1955 +}
1956 +.is-inherited-from-global-styles .block-editor-panel-color-gradient-settings__color-name,
1957 +.is-inherited-from-global-styles .block-editor-global-styles-background-panel__inspector-media-replace-title,
1958 +.is-inherited-from-global-styles .block-editor-panel-duotone-settings__label {
1959 + border-bottom: 1px dotted currentColor;
1960 +}
1961 +
1962 +.has-local-override-from-global-styles {
1963 + position: relative;
1964 +}
1965 +
1966 +.global-styles-inheritance-affordance {
1967 + position: absolute;
1968 + inset-block-start: 0;
1969 + inset-inline-end: 0;
1970 + z-index: 1;
1971 + display: flex;
1972 + align-items: center;
1973 + justify-content: center;
1974 + pointer-events: none;
1975 + height: 16px;
1976 +}
1977 +.global-styles-inheritance-affordance--offset-toggle {
1978 + inset-inline-end: 32px;
1979 +}
1980 +.global-styles-inheritance-affordance .has-local-override-from-global-styles__reset {
1981 + pointer-events: auto;
1982 + margin-inline-start: 0 !important;
1983 +}
1984 +
1985 +.has-local-override-from-global-styles__reset {
1986 + display: inline-flex !important;
1987 + align-items: center;
1988 + justify-content: center;
1989 + vertical-align: middle;
1990 + position: relative;
1991 + margin-inline-start: 6px;
1992 + min-width: 14px !important;
1993 + width: 14px !important;
1994 + height: 14px !important;
1995 + padding: 0 !important;
1996 + border-radius: 50% !important;
1997 + background: transparent !important;
1998 + box-shadow: none !important;
1999 + overflow: hidden;
2000 + text-transform: none;
2001 + letter-spacing: normal;
2002 + cursor: var(--wpds-cursor-control, pointer);
2003 +}
2004 +.has-local-override-from-global-styles__reset:hover, .has-local-override-from-global-styles__reset:focus {
2005 + background: transparent !important;
2006 +}
2007 +.has-local-override-from-global-styles__reset:hover .has-local-override-from-global-styles__dot, .has-local-override-from-global-styles__reset:focus .has-local-override-from-global-styles__dot {
2008 + display: none;
2009 +}
2010 +.has-local-override-from-global-styles__reset:hover .has-local-override-from-global-styles__reset-icon, .has-local-override-from-global-styles__reset:focus .has-local-override-from-global-styles__reset-icon {
2011 + display: block;
2012 +}
2013 +.has-local-override-from-global-styles__reset:focus-visible {
2014 + outline: 1.5px solid var(--wp-admin-theme-color, #007cba);
2015 + outline-offset: 1px;
2016 +}
2017 +.has-local-override-from-global-styles__reset.block-editor-panel-color-gradient-settings__reset {
2018 + position: absolute;
2019 + justify-content: center;
2020 + top: 50%;
2021 + transform: translateY(-50%);
2022 + margin-block: 0;
2023 + margin-inline-start: 0;
2024 + opacity: 1;
2025 +}
2026 +.has-local-override-from-global-styles__reset.block-editor-global-styles__shadow-editor__remove-button {
2027 + position: absolute;
2028 + justify-content: center;
2029 + inset-inline-end: 8px;
2030 + top: 50%;
2031 + transform: translateY(-50%);
2032 + margin-block: 0;
2033 + margin-inline-start: 0;
2034 + opacity: 1;
2035 +}
2036 +.has-local-override-from-global-styles__reset.block-editor-panel-duotone-settings__reset {
2037 + position: absolute;
2038 + justify-content: center;
2039 + inset-inline-end: 8px;
2040 + top: 50%;
2041 + transform: translateY(-50%);
2042 + margin-block: 0;
2043 + margin-inline-start: 0;
2044 + opacity: 1;
2045 +}
2046 +
2047 +.has-local-override-from-global-styles__dot {
2048 + display: block;
2049 + width: 8px;
2050 + height: 8px;
2051 + background-color: var(--wp-admin-theme-color, #007cba);
2052 + border-radius: 50%;
2053 +}
2054 +
2055 +.has-local-override-from-global-styles__reset-icon {
2056 + display: none;
2057 + position: absolute;
2058 + top: 50%;
2059 + right: 50%;
2060 + transform: translate(50%, -50%);
2061 + color: var(--wp-admin-theme-color, #007cba);
2062 +}
2063 +
1744 2064 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
1745 2065 z-index: 30;
1746 2066 }
1747 2067 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
@@ -1846,16 +2166,8 @@
1846 2166 animation: components-button__appear-animation 0.1s ease;
1847 2167 animation-fill-mode: forwards;
1848 2168 }
1849 2169 }
1850 -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus:enabled, .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus::before {
1851 - box-shadow: none;
1852 - outline: none;
1853 -}
1854 -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
1855 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1856 - outline: 2px solid transparent;
1857 -}
1858 2170
1859 2171 .block-editor-grid-item-mover__move-vertical-button-container {
1860 2172 display: flex;
1861 2173 position: relative;
@@ -1969,8 +2281,27 @@
1969 2281 position: absolute;
1970 2282 left: 0;
1971 2283 }
1972 2284
2285 +.wp-block-image__crop-area {
2286 + position: relative;
2287 + max-width: 100%;
2288 + width: 100%;
2289 + overflow: hidden;
2290 +}
2291 +.wp-block-image__crop-area .reactEasyCrop_Container {
2292 + pointer-events: auto;
2293 +}
2294 +.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
2295 + border: none;
2296 + border-radius: 0;
2297 +}
2298 +
2299 +.wp-block-image__zoom .components-popover__content {
2300 + min-width: 260px;
2301 + overflow: visible !important;
2302 +}
2303 +
1973 2304 .block-editor-block-types-list__list-item {
1974 2305 display: block;
1975 2306 width: 33.33%;
1976 2307 padding: 0;
@@ -1998,11 +2329,12 @@
1998 2329 color: #1e1e1e;
1999 2330 padding: 8px;
2000 2331 align-items: stretch;
2001 2332 justify-content: center;
2002 - cursor: pointer;
2333 + cursor: var(--wpds-cursor-control, pointer);
2003 2334 background: transparent;
2004 - word-break: break-word;
2335 + word-break: normal;
2336 + overflow-wrap: break-word;
2005 2337 }
2006 2338 @media not (prefers-reduced-motion) {
2007 2339 .components-button.block-editor-block-types-list__item {
2008 2340 transition: all 0.05s ease-in-out;
@@ -2034,17 +2366,8 @@
2034 2366 opacity: 0.04;
2035 2367 background: var(--wp-admin-theme-color);
2036 2368 pointer-events: none;
2037 2369 }
2038 -.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active {
2039 - color: #fff;
2040 - background: #1e1e1e;
2041 - outline: 2px solid transparent;
2042 - outline-offset: -2px;
2043 -}
2044 -.components-button.block-editor-block-types-list__item:not(:disabled):focus {
2045 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2046 -}
2047 2370
2048 2371 .block-editor-block-types-list__item-icon {
2049 2372 padding: 12px 20px;
2050 2373 color: #1e1e1e;
@@ -2217,9 +2540,9 @@
2217 2540 display: inline-block;
2218 2541 width: 100%;
2219 2542 }
2220 2543 .block-editor-link-control__search-item .components-menu-item__item mark {
2221 - font-weight: 600;
2544 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2222 2545 color: inherit;
2223 2546 background-color: transparent;
2224 2547 }
2225 2548 .block-editor-link-control__search-item .components-menu-item__shortcut {
@@ -2266,9 +2589,9 @@
2266 2589 width: 32px;
2267 2590 max-height: 32px;
2268 2591 }
2269 2592 .block-editor-link-control__preview .block-editor-link-control__preview-title {
2270 - line-height: 1.1;
2593 + line-height: var(--wpds-typography-line-height-sm, 20px);
2271 2594 }
2272 2595 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
2273 2596 box-shadow: none;
2274 2597 }
@@ -2277,14 +2600,14 @@
2277 2600 outline: 2px solid transparent;
2278 2601 text-decoration: none;
2279 2602 }
2280 2603 .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2281 - font-weight: 600;
2604 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2282 2605 color: inherit;
2283 2606 background-color: transparent;
2284 2607 }
2285 2608 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2286 - font-weight: normal;
2609 + font-weight: 400;
2287 2610 }
2288 2611 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2289 2612 position: absolute;
2290 2613 width: 1px;
@@ -2291,9 +2614,9 @@
2291 2614 height: 1px;
2292 2615 padding: 0;
2293 2616 margin: -1px;
2294 2617 overflow: hidden;
2295 - clip: rect(0, 0, 0, 0);
2618 + clip-path: inset(50%);
2296 2619 border: 0;
2297 2620 }
2298 2621
2299 2622 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
@@ -2435,9 +2758,8 @@
2435 2758 .link-preview-button.components-button {
2436 2759 width: 100%;
2437 2760 height: auto;
2438 2761 padding: 12px;
2439 - box-shadow: inset 0 0 0 1px #949494;
2440 2762 border-color: #949494;
2441 2763 }
2442 2764
2443 2765 .link-preview-button__image-container {
@@ -2475,9 +2797,9 @@
2475 2797 }
2476 2798
2477 2799 .link-preview-button__title {
2478 2800 margin-top: 4px;
2479 - font-weight: 500;
2801 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2480 2802 color: #1e1e1e;
2481 2803 display: block;
2482 2804 }
2483 2805
@@ -2512,8 +2834,11 @@
2512 2834 .block-editor-list-view-leaf {
2513 2835 position: relative;
2514 2836 transform: translateY(0);
2515 2837 }
2838 +.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
2839 + z-index: 1;
2840 +}
2516 2841 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2517 2842 cursor: grab;
2518 2843 }
2519 2844 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
@@ -2524,13 +2849,8 @@
2524 2849 }
2525 2850 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2526 2851 fill: currentColor;
2527 2852 }
2528 -@media (forced-colors: active) {
2529 - .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2530 - fill: CanvasText;
2531 - }
2532 -}
2533 2853 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2534 2854 color: inherit;
2535 2855 }
2536 2856 .block-editor-list-view-leaf.is-selected td {
@@ -2542,23 +2862,45 @@
2542 2862 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:hover, .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus,
2543 2863 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2544 2864 color: var(--wp-block-synced-color);
2545 2865 }
2546 -.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2547 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2866 +.block-editor-list-view-leaf.is-synced .block-editor-list-view-block-contents:focus::after {
2867 + --focus-color: var(--wp-block-synced-color);
2548 2868 }
2869 +.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus {
2870 + --focus-color: var(--wp-block-synced-color);
2871 + 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)));
2872 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2873 +}
2549 2874 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2550 2875 color: #fff;
2551 2876 }
2552 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2553 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2877 +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2878 + --focus-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
2879 + 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)));
2880 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2881 + outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2554 2882 }
2555 -.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2556 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2883 +@media (forced-colors: active) {
2884 + .block-editor-list-view-leaf.is-selected td, .block-editor-list-view-leaf.is-selected.is-synced td {
2885 + background: SelectedItem;
2886 + }
2887 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2888 + color: SelectedItemText;
2889 + }
2890 + .block-editor-list-view-leaf.is-selected svg, .block-editor-list-view-leaf.is-selected .block-editor-block-icon.has-colors svg {
2891 + fill: SelectedItemText;
2892 + }
2893 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__title {
2894 + forced-color-adjust: none;
2895 + }
2896 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2897 + --focus-color: CanvasText;
2898 + }
2899 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2900 + --focus-color: SelectedItemText;
2901 + }
2557 2902 }
2558 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2559 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2560 -}
2561 2903 .block-editor-list-view-leaf.is-first-selected td:first-child {
2562 2904 border-top-right-radius: 2px;
2563 2905 }
2564 2906 .block-editor-list-view-leaf.is-first-selected td:last-child {
@@ -2680,8 +3022,9 @@
2680 3022 }
2681 3023 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2682 3024 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2683 3025 box-shadow: none;
3026 + outline: none;
2684 3027 }
2685 3028 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2686 3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2687 3030 content: "";
@@ -2686,13 +3029,16 @@
2686 3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2687 3030 content: "";
2688 3031 position: absolute;
2689 3032 top: 0;
2690 - left: -29px;
3033 + left: -28px;
2691 3034 bottom: 0;
2692 3035 right: 0;
2693 3036 border-radius: inherit;
2694 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3037 + 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)));
3038 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3039 + outline-offset: 1px;
3040 + box-shadow: 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
2695 3041 z-index: 2;
2696 3042 pointer-events: none;
2697 3043 }
2698 3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
@@ -2697,13 +3043,8 @@
2697 3043 }
2698 3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2699 3045 left: 0;
2700 3046 }
2701 -.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu,
2702 -.block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
2703 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2704 - z-index: 1;
2705 -}
2706 3047 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2707 3048 opacity: 1;
2708 3049 }
2709 3050 @keyframes __wp-base-styles-fade-in {
@@ -2773,14 +3114,8 @@
2773 3114 }
2774 3115 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
2775 3116 top: -4px;
2776 3117 }
2777 -.block-editor-list-view-leaf .block-editor-block-mover-button::before {
2778 - height: 16px;
2779 - min-width: 100%;
2780 - right: 0;
2781 - left: 0;
2782 -}
2783 3118 .block-editor-list-view-leaf .block-editor-inserter__toggle {
2784 3119 background: #1e1e1e;
2785 3120 color: #fff;
2786 3121 height: 24px;
@@ -2789,8 +3124,14 @@
2789 3124 }
2790 3125 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
2791 3126 color: #fff;
2792 3127 }
3128 +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
3129 + width: 100%;
3130 +}
3131 +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper > * {
3132 + min-width: 0;
3133 +}
2793 3134 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
2794 3135 right: 2px;
2795 3136 position: relative;
2796 3137 }
@@ -2811,8 +3152,19 @@
2811 3152 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
2812 3153 position: absolute;
2813 3154 left: 0;
2814 3155 transform: translateY(-50%);
3156 + box-sizing: border-box;
3157 + max-width: 100%;
3158 + padding: 2px 8px;
3159 + border-radius: 2px;
3160 + background: #f0f0f0;
3161 + color: #2f2f2f;
3162 + font-size: 12px;
3163 + line-height: 20px;
3164 + overflow: hidden;
3165 + text-overflow: ellipsis;
3166 + white-space: nowrap;
2815 3167 }
2816 3168 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
2817 3169 background: rgba(0, 0, 0, 0.3);
2818 3170 color: #fff;
@@ -2839,8 +3191,25 @@
2839 3191 }
2840 3192 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
2841 3193 box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
2842 3194 }
3195 +.block-editor-list-view-leaf.is-disabled {
3196 + opacity: 0.2;
3197 +}
3198 +@media not (prefers-reduced-motion) {
3199 + .block-editor-list-view-leaf.is-disabled {
3200 + transition: opacity 0.1s linear;
3201 + }
3202 +}
3203 +.block-editor-list-view-leaf.is-disabled:hover {
3204 + opacity: 0.2;
3205 +}
3206 +.block-editor-list-view-leaf.is-disabled .block-editor-list-view__expander {
3207 + cursor: default;
3208 +}
3209 +.block-editor-list-view-leaf.is-disabled .block-editor-list-view-block-select-button:hover {
3210 + color: inherit;
3211 +}
2843 3212
2844 3213 .block-editor-list-view-draggable-chip {
2845 3214 opacity: 0.8;
2846 3215 }
@@ -2854,9 +3223,9 @@
2854 3223
2855 3224 .block-editor-list-view__expander {
2856 3225 height: 24px;
2857 3226 width: 24px;
2858 - cursor: pointer;
3227 + cursor: var(--wpds-cursor-control, pointer);
2859 3228 }
2860 3229
2861 3230 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
2862 3231 margin-right: 192px;
@@ -3032,32 +3401,20 @@
3032 3401 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
3033 3402 padding: 8px 0 0;
3034 3403 }
3035 3404
3036 -.block-editor-media-flow__error {
3037 - padding: 0 20px 20px 20px;
3038 - max-width: 255px;
3039 -}
3040 -.block-editor-media-flow__error .components-with-notices-ui {
3041 - max-width: 255px;
3042 -}
3043 -.block-editor-media-flow__error .components-with-notices-ui .components-notice__content {
3044 - overflow: hidden;
3045 - word-wrap: break-word;
3046 -}
3047 -.block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss {
3048 - position: absolute;
3049 - left: 10px;
3050 -}
3051 -
3052 3405 .block-editor-multi-selection-inspector__card {
3053 3406 padding: 16px;
3054 3407 }
3055 3408
3056 3409 .block-editor-multi-selection-inspector__card-title {
3057 - font-weight: 499;
3410 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3058 3411 }
3059 3412
3413 +.block-editor-multi-selection-inspector__card-description {
3414 + color: #757575;
3415 +}
3416 +
3060 3417 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3061 3418 margin-right: -2px;
3062 3419 padding: 0 3px;
3063 3420 width: 36px;
@@ -3063,8 +3420,13 @@
3063 3420 width: 36px;
3064 3421 height: 24px;
3065 3422 }
3066 3423
3424 +.block-editor-plain-text {
3425 + width: 100%;
3426 + field-sizing: content;
3427 +}
3428 +
3067 3429 .block-editor-responsive-block-control {
3068 3430 margin-bottom: 28px;
3069 3431 border-bottom: 1px solid #ccc;
3070 3432 padding-bottom: 14px;
@@ -3080,9 +3442,9 @@
3080 3442 margin-right: -3px;
3081 3443 }
3082 3444
3083 3445 .block-editor-responsive-block-control__label {
3084 - font-weight: 600;
3446 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3085 3447 margin-bottom: 0.6em;
3086 3448 margin-right: -3px;
3087 3449 }
3088 3450
@@ -3102,9 +3464,9 @@
3102 3464 overflow: hidden;
3103 3465 padding: 0;
3104 3466 position: absolute;
3105 3467 width: 1px;
3106 - word-wrap: normal !important;
3468 + overflow-wrap: normal !important;
3107 3469 word-break: normal !important;
3108 3470 }
3109 3471
3110 3472 .preset-input-control__wrapper > * {
@@ -3159,9 +3521,9 @@
3159 3521 top: -9999em;
3160 3522 }
3161 3523 .block-editor-skip-to-selected-block:focus {
3162 3524 font-size: 14px;
3163 - font-weight: 600;
3525 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3164 3526 background: #f1f1f1;
3165 3527 z-index: 100000;
3166 3528 }
3167 3529
@@ -3264,9 +3626,9 @@
3264 3626 height: auto;
3265 3627 color: #757575;
3266 3628 display: block;
3267 3629 font-size: 13px;
3268 - cursor: pointer;
3630 + cursor: var(--wpds-cursor-control, pointer);
3269 3631 background: #fff;
3270 3632 width: 100%;
3271 3633 border: none;
3272 3634 text-align: right;
@@ -3357,8 +3719,13 @@
3357 3719 padding: 16px;
3358 3720 border-top: 1px solid #1e1e1e;
3359 3721 }
3360 3722
3723 +.block-editor-url-popover__link-container-content {
3724 + display: flex;
3725 + align-items: center;
3726 +}
3727 +
3361 3728 .block-editor-url-popover__link-editor,
3362 3729 .block-editor-url-popover__link-viewer {
3363 3730 display: flex;
3364 3731 }
@@ -3396,35 +3763,8 @@
3396 3763 color: #757575;
3397 3764 font-size: 12px;
3398 3765 }
3399 3766
3400 -/**
3401 - * ItemGroup-like border styles for the background panel's ToolsPanelItems.
3402 - * Replicates the separated border of the `ItemGroup` component while
3403 - * allowing for hidden placeholder items (same approach as the color panel).
3404 - */
3405 -.block-editor-background-panel__item {
3406 - padding: 0;
3407 - max-width: 100%;
3408 - position: relative;
3409 - border-right: 1px solid #ddd;
3410 - border-left: 1px solid #ddd;
3411 - border-bottom: 1px solid #ddd;
3412 -}
3413 -.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
3414 - border-top-right-radius: 2px;
3415 - border-top-left-radius: 2px;
3416 - border-top: 1px solid #ddd;
3417 -}
3418 -.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
3419 - border-bottom-right-radius: 2px;
3420 - border-bottom-left-radius: 2px;
3421 -}
3422 -.block-editor-background-panel__item > div,
3423 -.block-editor-background-panel__item > div > button {
3424 - border-radius: inherit;
3425 -}
3426 -
3427 3767 .background-block-support-panel {
3428 3768 /* Increased specificity required to remove the slot wrapper's row gap */
3429 3769 }
3430 3770 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
@@ -3430,173 +3770,8 @@
3430 3770 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3431 3771 row-gap: 0;
3432 3772 }
3433 3773
3434 -.block-editor-content-only-controls__link {
3435 - width: 100%;
3436 - box-shadow: inset 0 0 0 1px #ccc;
3437 -}
3438 -.block-editor-content-only-controls__link:focus:not(:disabled) {
3439 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3440 -}
3441 -
3442 -.block-editor-content-only-controls__link-row {
3443 - align-items: center;
3444 -}
3445 -
3446 -.block-editor-content-only-controls__link-title {
3447 - width: 100%;
3448 - white-space: nowrap;
3449 - text-overflow: ellipsis;
3450 - overflow: hidden;
3451 -}
3452 -
3453 -.block-editor-content-only-controls__media {
3454 - width: 100%;
3455 - box-shadow: inset 0 0 0 1px #ccc;
3456 - padding-left: 32px;
3457 -}
3458 -.block-editor-content-only-controls__media:focus:not(:disabled) {
3459 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3460 -}
3461 -
3462 -.block-editor-content-only-controls__media-replace-flow {
3463 - display: block;
3464 -}
3465 -
3466 -.block-editor-content-only-controls__media-row {
3467 - align-items: center;
3468 -}
3469 -
3470 -.block-editor-content-only-controls__media-placeholder {
3471 - width: 24px;
3472 - height: 24px;
3473 - border-radius: 2px;
3474 - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3475 - display: inline-block;
3476 - padding: 0;
3477 - background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3478 -}
3479 -
3480 -.block-editor-content-only-controls__media-title {
3481 - width: 100%;
3482 - white-space: nowrap;
3483 - text-overflow: ellipsis;
3484 - overflow: hidden;
3485 -}
3486 -
3487 -.block-editor-content-only-controls__media-thumbnail {
3488 - width: 20px;
3489 - height: 20px;
3490 - border-radius: 2px;
3491 - align-self: center;
3492 - overflow: hidden;
3493 -}
3494 -.block-editor-content-only-controls__media-thumbnail img {
3495 - width: 100% !important;
3496 - height: 100% !important;
3497 - object-fit: cover;
3498 -}
3499 -
3500 -.block-editor-content-only-controls {
3501 - position: relative;
3502 -}
3503 -
3504 -.block-editor-content-only-controls__media-reset {
3505 - position: absolute;
3506 - left: 0;
3507 - top: 8px;
3508 - margin: auto 8px auto;
3509 - opacity: 0;
3510 - border-radius: 2px;
3511 -}
3512 -@media not (prefers-reduced-motion) {
3513 - .block-editor-content-only-controls__media-reset {
3514 - transition: opacity 0.1s ease-in-out;
3515 - }
3516 -}
3517 -.block-editor-content-only-controls:hover .block-editor-content-only-controls__media-reset, .block-editor-content-only-controls__media-reset:focus, .block-editor-content-only-controls__media-reset:hover {
3518 - opacity: 1;
3519 -}
3520 -@media (hover: none) {
3521 - .block-editor-content-only-controls__media-reset {
3522 - opacity: 1;
3523 - }
3524 -}
3525 -
3526 -.block-editor-content-only-controls__rich-text {
3527 - width: 100%;
3528 - margin: 0;
3529 - background: #fff;
3530 - color: #1e1e1e;
3531 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3532 - padding: 6px 8px;
3533 - /* Fonts smaller than 16px causes mobile safari to zoom. */
3534 - font-size: 16px;
3535 - /* Override core line-height. To be reviewed. */
3536 - line-height: normal;
3537 - box-shadow: 0 0 0 transparent;
3538 - border-radius: 2px;
3539 - border: 1px solid #949494;
3540 -}
3541 -@media not (prefers-reduced-motion) {
3542 - .block-editor-content-only-controls__rich-text {
3543 - transition: box-shadow 0.1s linear;
3544 - }
3545 -}
3546 -@media (min-width: 600px) {
3547 - .block-editor-content-only-controls__rich-text {
3548 - font-size: 13px;
3549 - /* Override core line-height. To be reviewed. */
3550 - line-height: normal;
3551 - }
3552 -}
3553 -.block-editor-content-only-controls__rich-text:focus {
3554 - border-color: var(--wp-admin-theme-color, #3858e9);
3555 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
3556 - outline: 2px solid transparent;
3557 -}
3558 -.block-editor-content-only-controls__rich-text::placeholder {
3559 - color: rgba(30, 30, 30, 0.62);
3560 -}
3561 -.block-editor-content-only-controls__rich-text {
3562 - border-color: #949494;
3563 -}
3564 -.block-editor-content-only-controls__rich-text::placeholder {
3565 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3566 -}
3567 -.block-editor-content-only-controls__rich-text {
3568 - min-height: 40px;
3569 - padding: 12px;
3570 -}
3571 -
3572 -.block-editor-block-fields__container {
3573 - padding: 0 16px 16px;
3574 -}
3575 -.block-editor-block-fields__container:first-of-type {
3576 - padding-block-start: 8px;
3577 - /*
3578 - * Add border for the entire content controls and remove the similar border
3579 - * for tools panel.
3580 - */
3581 - border-block-start: 1px solid #e0e0e0;
3582 -}
3583 -
3584 -.block-editor-block-fields__header {
3585 - padding: 8px 0;
3586 - margin-bottom: 4px;
3587 -}
3588 -
3589 -.block-editor-block-fields__header-icon {
3590 - flex: 0 0 24px;
3591 -}
3592 -
3593 -.block-editor-block-fields__header-title {
3594 - flex: 1;
3595 - /* Override the default margin on a h2 element. */
3596 - margin: 0 !important;
3597 -}
3598 -
3599 3774 .block-editor-hooks__block-hooks {
3600 3775 /**
3601 3776 * Un-reverse the flex direction for the toggle's label.
3602 3777 */
@@ -3630,17 +3805,14 @@
3630 3805 }
3631 3806 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3632 3807 row-gap: 0;
3633 3808 }
3634 -.color-block-support-panel {
3635 - /**
3636 - * After converting PanelColorGradientSettings to render as a ToolsPanel
3637 - * we need to remove the top margin when wrapping inner content due to
3638 - * rendering via SlotFills.
3639 - */
3809 +
3810 +.elements-block-support-panel {
3811 + /* Increased specificity required to remove the slot wrapper's row gap */
3640 3812 }
3641 -.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
3642 - margin-top: 0;
3813 +.elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
3814 + row-gap: 0;
3643 3815 }
3644 3816
3645 3817 .dimensions-block-support-panel .single-column {
3646 3818 grid-column: span 1;
@@ -3655,8 +3827,12 @@
3655 3827 font-size: 12px;
3656 3828 margin-bottom: 0;
3657 3829 }
3658 3830
3831 +.layout-block-support-panel .block-editor-hooks__flex-layout-controls {
3832 + grid-column: 1/-1;
3833 +}
3834 +
3659 3835 .block-editor-hooks__flex-layout-justification-controls,
3660 3836 .block-editor-hooks__flex-layout-orientation-controls {
3661 3837 margin-bottom: 12px;
3662 3838 }
@@ -3929,9 +4105,9 @@
3929 4105 }
3930 4106 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
3931 4107 display: grid;
3932 4108 grid-template-columns: 1fr 1fr;
3933 - grid-gap: 12px;
4109 + gap: 12px;
3934 4110 }
3935 4111 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
3936 4112 margin-bottom: 0;
3937 4113 }
@@ -3943,9 +4119,9 @@
3943 4119 display: inline-block;
3944 4120 background: none;
3945 4121 border: none;
3946 4122 padding: 0;
3947 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4123 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3948 4124 font-size: 13px;
3949 4125 line-height: 0;
3950 4126 }
3951 4127 @media (min-width: 782px) {
@@ -4005,9 +4181,9 @@
4005 4181
4006 4182 .block-editor-inserter__toggle.components-button {
4007 4183 display: inline-flex;
4008 4184 align-items: center;
4009 - cursor: pointer;
4185 + cursor: var(--wpds-cursor-control, pointer);
4010 4186 border: none;
4011 4187 outline: none;
4012 4188 padding: 0;
4013 4189 }
@@ -4040,10 +4216,23 @@
4040 4216 z-index: 99999;
4041 4217 }
4042 4218
4043 4219 .block-editor-inserter__search {
4044 - padding: 16px 16px 0 16px;
4220 + padding: 16px;
4221 + position: sticky;
4222 + top: 0;
4223 + z-index: 2;
4224 + background-color: #fff;
4225 + border-bottom: 1px solid transparent;
4045 4226 }
4227 +@media not (prefers-reduced-motion) {
4228 + .block-editor-inserter__search {
4229 + transition: border-bottom-color 0.1s linear;
4230 + }
4231 +}
4232 +.block-editor-inserter__search.is-scrolled {
4233 + border-bottom-color: #e0e0e0;
4234 +}
4046 4235
4047 4236 .block-editor-inserter__no-tab-container {
4048 4237 overflow-y: auto;
4049 4238 flex-grow: 1;
@@ -4053,9 +4242,9 @@
4053 4242 .block-editor-inserter__panel-header {
4054 4243 position: relative;
4055 4244 display: inline-flex;
4056 4245 align-items: center;
4057 - padding: 16px 16px 0;
4246 + padding: 0 16px;
4058 4247 }
4059 4248
4060 4249 .block-editor-inserter__panel-content {
4061 4250 padding: 16px;
@@ -4066,9 +4255,9 @@
4066 4255 margin: 0 0 0 12px;
4067 4256 color: #757575;
4068 4257 text-transform: uppercase;
4069 4258 font-size: 11px;
4070 - font-weight: 499;
4259 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4071 4260 }
4072 4261
4073 4262 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4074 4263 height: 36px;
@@ -4104,12 +4293,8 @@
4104 4293 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4105 4294 margin-left: 8px;
4106 4295 }
4107 4296
4108 -.block-editor-inserter__preview-container__popover {
4109 - top: 16px !important;
4110 -}
4111 -
4112 4297 .block-editor-inserter__preview-container {
4113 4298 display: none;
4114 4299 width: 280px;
4115 4300 padding: 16px;
@@ -4136,14 +4321,18 @@
4136 4321
4137 4322 .block-editor-inserter__media-tabs-container,
4138 4323 .block-editor-inserter__block-patterns-tabs-container {
4139 4324 flex-grow: 1;
4140 - padding: 16px;
4325 + padding: 0 16px 16px;
4141 4326 display: flex;
4142 4327 flex-direction: column;
4143 4328 justify-content: space-between;
4144 4329 }
4145 4330
4331 +.block-editor-inserter__media-tabs-container {
4332 + padding-top: 16px;
4333 +}
4334 +
4146 4335 .block-editor-inserter__category-tablist {
4147 4336 margin-bottom: 8px;
4148 4337 }
4149 4338
@@ -4246,9 +4435,9 @@
4246 4435
4247 4436 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4248 4437 display: grid;
4249 4438 grid-template-columns: 1fr 1fr;
4250 - grid-gap: 8px;
4439 + gap: 8px;
4251 4440 }
4252 4441 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4253 4442 margin-bottom: 0;
4254 4443 }
@@ -4263,59 +4452,54 @@
4263 4452 .block-editor-inserter__popover.is-quick > .components-popover__content {
4264 4453 padding: 0;
4265 4454 }
4266 4455
4267 -.block-editor-inserter__quick-inserter-expand.components-button {
4268 - display: block;
4269 - background: #1e1e1e;
4270 - color: #fff;
4456 +.block-editor-inserter__quick-inserter-expand {
4457 + padding: 0 16px 16px;
4458 +}
4459 +
4460 +.block-editor-inserter__quick-inserter-expand-toggle {
4271 4461 width: 100%;
4272 - border-radius: 0;
4462 + justify-content: center;
4273 4463 }
4274 -.block-editor-inserter__quick-inserter-expand.components-button:hover {
4275 - color: #fff;
4276 -}
4277 -.block-editor-inserter__quick-inserter-expand.components-button:active {
4278 - color: #ccc;
4279 -}
4280 -.block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) {
4281 - box-shadow: none;
4282 - background: var(--wp-admin-theme-color);
4283 - border-color: var(--wp-admin-theme-color);
4284 -}
4285 4464
4286 4465 .block-editor-block-patterns-explorer__sidebar {
4287 - position: absolute;
4288 - top: 72px;
4289 - right: 0;
4290 - bottom: 0;
4291 - width: 280px;
4292 - padding: 24px 24px 24px;
4293 - overflow-x: visible;
4294 - overflow-y: auto;
4466 + padding-bottom: 24px;
4295 4467 }
4296 -.block-editor-block-patterns-explorer__sidebar__categories-list__item {
4297 - display: block;
4298 - width: 100%;
4299 - height: 48px;
4300 - text-align: right;
4468 +@media (min-width: 782px) {
4469 + .block-editor-block-patterns-explorer__sidebar {
4470 + position: absolute;
4471 + top: 72px;
4472 + right: 0;
4473 + bottom: 0;
4474 + width: 280px;
4475 + padding: 24px;
4476 + overflow-x: visible;
4477 + overflow-y: auto;
4478 + }
4301 4479 }
4302 -.block-editor-block-patterns-explorer__search {
4303 - margin-bottom: 32px;
4480 +
4481 +@media (min-width: 782px) {
4482 + .block-editor-block-patterns-explorer__panel {
4483 + margin-inline-start: 280px;
4484 + }
4304 4485 }
4305 -.block-editor-block-patterns-explorer__search-results-count {
4306 - padding-bottom: 32px;
4486 +
4487 +.block-editor-block-patterns-explorer__no-results {
4488 + padding: 32px;
4489 + text-align: center;
4307 4490 }
4491 +
4308 4492 .block-editor-block-patterns-explorer__list {
4309 - margin-right: 280px;
4310 4493 padding: 24px 0 32px;
4311 4494 }
4312 4495 .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4313 4496 width: 380px;
4314 4497 }
4498 +
4315 4499 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4316 4500 display: grid;
4317 - grid-gap: 32px;
4501 + gap: 32px;
4318 4502 grid-template-columns: repeat(1, 1fr);
4319 4503 margin-bottom: 16px;
4320 4504 }
4321 4505 @media (min-width: 1080px) {
@@ -4337,9 +4521,9 @@
4337 4521 max-height: 800px;
4338 4522 }
4339 4523
4340 4524 .components-heading.block-editor-inserter__patterns-category-panel-title {
4341 - font-weight: 499;
4525 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4342 4526 }
4343 4527
4344 4528 .block-editor-inserter__patterns-explore-button.components-button,
4345 4529 .block-editor-inserter__media-library-button.components-button {
@@ -4348,17 +4532,26 @@
4348 4532 margin-top: 16px;
4349 4533 width: 100%;
4350 4534 }
4351 4535
4536 +.block-editor-inserter__media-mobile-screen {
4537 + display: flex;
4538 + flex-direction: column;
4539 + align-self: stretch;
4540 +}
4541 +
4352 4542 .block-editor-inserter__media-panel {
4353 - min-height: 100%;
4354 4543 padding: 0 16px;
4355 4544 display: flex;
4356 4545 flex-direction: column;
4546 + flex: 1;
4547 + min-height: 0;
4357 4548 }
4358 4549 @media (min-width: 782px) {
4359 4550 .block-editor-inserter__media-panel {
4360 4551 padding: 0;
4552 + flex: 0 1 auto;
4553 + min-height: 100%;
4361 4554 }
4362 4555 }
4363 4556 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
4364 4557 height: 100%;
@@ -4375,12 +4568,71 @@
4375 4568 margin-bottom: 0;
4376 4569 padding: 16px 24px 16px;
4377 4570 }
4378 4571 }
4572 +.block-editor-inserter__media-panel .block-editor-inserter__no-results {
4573 + flex-grow: 1;
4574 +}
4575 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer {
4576 + flex-shrink: 0;
4577 + padding-top: 16px;
4578 + padding-bottom: 16px;
4579 +}
4580 +@media (min-width: 782px) {
4581 + .block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer {
4582 + padding-right: 24px;
4583 + padding-left: 24px;
4584 + }
4585 +}
4586 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-attach.components-button {
4587 + justify-content: center;
4588 + padding: 16px;
4589 +}
4590 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-results {
4591 + display: flex;
4592 + flex-direction: column;
4593 + flex-grow: 1;
4594 + min-height: 0;
4595 +}
4596 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list {
4597 + opacity: 0.5;
4598 + pointer-events: none;
4599 +}
4600 +@media not (prefers-reduced-motion) {
4601 + .block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list {
4602 + opacity: 1;
4603 + animation: inserter-media-panel-pulse 1s ease-in-out infinite;
4604 + }
4605 +}
4606 +.block-editor-inserter__media-panel.has-footer .block-editor-inserter__media-list {
4607 + padding-bottom: 0;
4608 +}
4379 4609
4610 +@keyframes inserter-media-panel-pulse {
4611 + 0%, 100% {
4612 + opacity: 1;
4613 + }
4614 + 50% {
4615 + opacity: 0.5;
4616 + }
4617 +}
4618 +.block-editor-inserter__media-panel-detach-modal {
4619 + z-index: 1000001;
4620 +}
4621 +.block-editor-inserter__media-panel-detach-modal p {
4622 + margin-top: 0;
4623 +}
4624 +
4625 +.block-editor-inserter__media-panel-detach-actions {
4626 + display: flex;
4627 + justify-content: flex-end;
4628 + gap: 8px;
4629 + margin-top: 16px;
4630 +}
4631 +
4380 4632 .block-editor-inserter__media-list__list-item {
4381 4633 position: relative;
4382 - cursor: pointer;
4634 + cursor: var(--wpds-cursor-control, pointer);
4383 4635 margin-bottom: 24px;
4384 4636 }
4385 4637 .block-editor-inserter__media-list__list-item.is-placeholder {
4386 4638 min-height: 100px;
@@ -4390,9 +4642,9 @@
4390 4642 }
4391 4643 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
4392 4644 outline-color: rgba(0, 0, 0, 0.3);
4393 4645 }
4394 -.block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options > button {
4646 +.block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options > button, .block-editor-inserter__media-list__list-item:focus-within .block-editor-inserter__media-list__item-preview-options > button {
4395 4647 display: block;
4396 4648 }
4397 4649 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
4398 4650 position: absolute;
@@ -4574,12 +4826,12 @@
4574 4826 flex-direction: column;
4575 4827 align-items: start;
4576 4828 }
4577 4829 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4578 - font-weight: 600;
4830 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4579 4831 }
4580 4832 .block-editor-block-visibility-modal__options-icon--checked {
4581 - fill: #ddd;
4833 + color: #ddd;
4582 4834 }
4583 4835 .block-editor-block-visibility-modal__sub-options {
4584 4836 width: 100%;
4585 4837 padding-inline-start: 12px;
@@ -4589,11 +4841,52 @@
4589 4841 color: #757575;
4590 4842 }
4591 4843
4592 4844 .block-editor-block-visibility-info {
4593 - padding-top: 4px;
4594 - padding-bottom: 4px;
4595 4845 margin: 0 16px 16px;
4596 - display: flex;
4597 - align-items: center;
4598 - justify-content: start;
4846 +}
4847 +
4848 +/* The stop element is invisible, so its focus indication is drawn around the
4849 + canvas it stands for. For the iframed canvas it is an overlay instead of
4850 + an outline, because Safari paints an outline on an iframe element
4851 + underneath the iframe's content. */
4852 +.block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after {
4853 + content: "";
4854 + position: absolute;
4855 + inset: 0;
4856 + z-index: 1;
4857 + pointer-events: none;
4858 + border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4859 +}
4860 +
4861 +.block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow {
4862 + outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4863 + outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4864 +}
4865 +
4866 +/* Looks like a tooltip. Shown at the top of the canvas while the stop is
4867 + focused. Sticky, because on the widgets screen the stop spans scrolling
4868 + content and the hint must stay in view; anywhere else there is nothing
4869 + to scroll and it stays at the top of the canvas. */
4870 +.block-editor-writing-flow__canvas-stop-hint {
4871 + display: none;
4872 + position: sticky;
4873 + top: 16px;
4874 + margin-inline: auto;
4875 + width: fit-content;
4876 + z-index: 2;
4877 + background: #000;
4878 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4879 + border-radius: 4px;
4880 + color: #f0f0f0;
4881 + text-align: center;
4882 + line-height: 1.4;
4883 + font-size: 12px;
4884 + padding: 4px 8px;
4885 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
4886 + white-space: nowrap;
4887 + pointer-events: none;
4888 +}
4889 +
4890 +.block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint {
4891 + display: block;
4599 4892 }