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.css +687 -392 23.1.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;
@@ -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-left: 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-left: 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-left: 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-left: 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 left: 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 + left: 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-right: 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 + left: 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-right: 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-right: 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,9 +1067,9 @@
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 1075 cursor: var(--wpds-cursor-control, pointer);
@@ -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: left;
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
@@ -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
@@ -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-left: 1px solid #ddd;
@@ -1515,20 +1599,19 @@
1515 1599 border-left: 1px solid #ddd;
1516 1600 border-right: 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-left-radius: 2px;
1522 1605 border-top-right-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-left-radius: 2px;
1527 1610 border-bottom-right-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 right: 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 + right: 28px;
1687 +}
1585 1688
1689 +.block-editor-panel-color-gradient-settings__contrast-warning {
1690 + position: absolute;
1691 + right: 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: right;
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 right: 0;
1664 1805 top: 8px;
@@ -1741,8 +1882,189 @@
1741 1882 opacity: 1;
1742 1883 }
1743 1884 }
1744 1885
1886 +.block-editor-global-styles__text-shadow {
1887 + width: 260px;
1888 + padding: 8px;
1889 +}
1890 +
1891 +.block-editor-global-styles__text-shadow-preview {
1892 + display: flex;
1893 + align-items: center;
1894 + justify-content: center;
1895 + height: 80px;
1896 + border: #ddd 1px solid;
1897 + border-radius: 2px;
1898 + font-size: 24px;
1899 + margin-bottom: 16px;
1900 + /*rtl:begin:ignore*/
1901 + 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);
1902 + background-position: 0 0, 8px 8px;
1903 + /*rtl:end:ignore*/
1904 + background-size: 16px 16px;
1905 +}
1906 +
1907 +.block-editor-global-styles__text-shadow-list-item {
1908 + justify-content: space-between;
1909 + gap: 8px;
1910 + width: 100%;
1911 +}
1912 +.block-editor-global-styles__text-shadow-list-item:not(.is-active) svg {
1913 + opacity: 0;
1914 +}
1915 +
1916 +.block-editor-global-styles__text-shadow-dropdown {
1917 + display: block;
1918 + padding: 0;
1919 + position: relative;
1920 + border: 1px solid #ddd;
1921 + border-radius: 2px;
1922 +}
1923 +
1924 +.block-editor-global-styles__text-shadow-dropdown-toggle {
1925 + width: 100%;
1926 + padding: 8px;
1927 +}
1928 +.block-editor-global-styles__text-shadow-dropdown-toggle.is-open {
1929 + background-color: #f0f0f0;
1930 +}
1931 +
1932 +.block-editor-global-styles__text-shadow-remove-button {
1933 + position: absolute;
1934 + right: 8px;
1935 + top: 8px;
1936 + opacity: 0;
1937 +}
1938 +@media not (prefers-reduced-motion) {
1939 + .block-editor-global-styles__text-shadow-remove-button {
1940 + transition: opacity 0.1s ease-in-out;
1941 + }
1942 +}
1943 +.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 {
1944 + opacity: 1;
1945 +}
1946 +@media (hover: none) {
1947 + .block-editor-global-styles__text-shadow-remove-button {
1948 + opacity: 1;
1949 + }
1950 +}
1951 +
1952 +.is-inherited-from-global-styles .components-base-control__label,
1953 +.is-inherited-from-global-styles .components-input-control__label {
1954 + text-decoration-line: underline;
1955 + text-decoration-style: dotted;
1956 + text-decoration-thickness: 1px;
1957 + text-underline-offset: 0.2em;
1958 +}
1959 +.is-inherited-from-global-styles .block-editor-panel-color-gradient-settings__color-name,
1960 +.is-inherited-from-global-styles .block-editor-global-styles-background-panel__inspector-media-replace-title,
1961 +.is-inherited-from-global-styles .block-editor-panel-duotone-settings__label {
1962 + border-bottom: 1px dotted currentColor;
1963 +}
1964 +
1965 +.has-local-override-from-global-styles {
1966 + position: relative;
1967 +}
1968 +
1969 +.global-styles-inheritance-affordance {
1970 + position: absolute;
1971 + inset-block-start: 0;
1972 + inset-inline-end: 0;
1973 + z-index: 1;
1974 + display: flex;
1975 + align-items: center;
1976 + justify-content: center;
1977 + pointer-events: none;
1978 + height: 16px;
1979 +}
1980 +.global-styles-inheritance-affordance--offset-toggle {
1981 + inset-inline-end: 32px;
1982 +}
1983 +.global-styles-inheritance-affordance .has-local-override-from-global-styles__reset {
1984 + pointer-events: auto;
1985 + margin-inline-start: 0 !important;
1986 +}
1987 +
1988 +.has-local-override-from-global-styles__reset {
1989 + display: inline-flex !important;
1990 + align-items: center;
1991 + justify-content: center;
1992 + vertical-align: middle;
1993 + position: relative;
1994 + margin-inline-start: 6px;
1995 + min-width: 14px !important;
1996 + width: 14px !important;
1997 + height: 14px !important;
1998 + padding: 0 !important;
1999 + border-radius: 50% !important;
2000 + background: transparent !important;
2001 + box-shadow: none !important;
2002 + overflow: hidden;
2003 + text-transform: none;
2004 + letter-spacing: normal;
2005 + cursor: var(--wpds-cursor-control, pointer);
2006 +}
2007 +.has-local-override-from-global-styles__reset:hover, .has-local-override-from-global-styles__reset:focus {
2008 + background: transparent !important;
2009 +}
2010 +.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 {
2011 + display: none;
2012 +}
2013 +.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 {
2014 + display: block;
2015 +}
2016 +.has-local-override-from-global-styles__reset:focus-visible {
2017 + outline: 1.5px solid var(--wp-admin-theme-color, #007cba);
2018 + outline-offset: 1px;
2019 +}
2020 +.has-local-override-from-global-styles__reset.block-editor-panel-color-gradient-settings__reset {
2021 + position: absolute;
2022 + justify-content: center;
2023 + top: 50%;
2024 + transform: translateY(-50%);
2025 + margin-block: 0;
2026 + margin-inline-start: 0;
2027 + opacity: 1;
2028 +}
2029 +.has-local-override-from-global-styles__reset.block-editor-global-styles__shadow-editor__remove-button {
2030 + position: absolute;
2031 + justify-content: center;
2032 + inset-inline-end: 8px;
2033 + top: 50%;
2034 + transform: translateY(-50%);
2035 + margin-block: 0;
2036 + margin-inline-start: 0;
2037 + opacity: 1;
2038 +}
2039 +.has-local-override-from-global-styles__reset.block-editor-panel-duotone-settings__reset {
2040 + position: absolute;
2041 + justify-content: center;
2042 + inset-inline-end: 8px;
2043 + top: 50%;
2044 + transform: translateY(-50%);
2045 + margin-block: 0;
2046 + margin-inline-start: 0;
2047 + opacity: 1;
2048 +}
2049 +
2050 +.has-local-override-from-global-styles__dot {
2051 + display: block;
2052 + width: 8px;
2053 + height: 8px;
2054 + background-color: var(--wp-admin-theme-color, #007cba);
2055 + border-radius: 50%;
2056 +}
2057 +
2058 +.has-local-override-from-global-styles__reset-icon {
2059 + display: none;
2060 + position: absolute;
2061 + top: 50%;
2062 + left: 50%;
2063 + transform: translate(-50%, -50%);
2064 + color: var(--wp-admin-theme-color, #007cba);
2065 +}
2066 +
1745 2067 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
1746 2068 z-index: 30;
1747 2069 }
1748 2070 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
@@ -1847,16 +2169,8 @@
1847 2169 animation: components-button__appear-animation 0.1s ease;
1848 2170 animation-fill-mode: forwards;
1849 2171 }
1850 2172 }
1851 -.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 {
1852 - box-shadow: none;
1853 - outline: none;
1854 -}
1855 -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
1856 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1857 - outline: 2px solid transparent;
1858 -}
1859 2173
1860 2174 .block-editor-grid-item-mover__move-vertical-button-container {
1861 2175 display: flex;
1862 2176 position: relative;
@@ -1970,8 +2284,27 @@
1970 2284 position: absolute;
1971 2285 right: 0;
1972 2286 }
1973 2287
2288 +.wp-block-image__crop-area {
2289 + position: relative;
2290 + max-width: 100%;
2291 + width: 100%;
2292 + overflow: hidden;
2293 +}
2294 +.wp-block-image__crop-area .reactEasyCrop_Container {
2295 + pointer-events: auto;
2296 +}
2297 +.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
2298 + border: none;
2299 + border-radius: 0;
2300 +}
2301 +
2302 +.wp-block-image__zoom .components-popover__content {
2303 + min-width: 260px;
2304 + overflow: visible !important;
2305 +}
2306 +
1974 2307 .block-editor-block-types-list__list-item {
1975 2308 display: block;
1976 2309 width: 33.33%;
1977 2310 padding: 0;
@@ -2001,9 +2334,10 @@
2001 2334 align-items: stretch;
2002 2335 justify-content: center;
2003 2336 cursor: var(--wpds-cursor-control, pointer);
2004 2337 background: transparent;
2005 - word-break: break-word;
2338 + word-break: normal;
2339 + overflow-wrap: break-word;
2006 2340 }
2007 2341 @media not (prefers-reduced-motion) {
2008 2342 .components-button.block-editor-block-types-list__item {
2009 2343 transition: all 0.05s ease-in-out;
@@ -2035,17 +2369,8 @@
2035 2369 opacity: 0.04;
2036 2370 background: var(--wp-admin-theme-color);
2037 2371 pointer-events: none;
2038 2372 }
2039 -.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active {
2040 - color: #fff;
2041 - background: #1e1e1e;
2042 - outline: 2px solid transparent;
2043 - outline-offset: -2px;
2044 -}
2045 -.components-button.block-editor-block-types-list__item:not(:disabled):focus {
2046 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2047 -}
2048 2373
2049 2374 .block-editor-block-types-list__item-icon {
2050 2375 padding: 12px 20px;
2051 2376 color: #1e1e1e;
@@ -2218,9 +2543,9 @@
2218 2543 display: inline-block;
2219 2544 width: 100%;
2220 2545 }
2221 2546 .block-editor-link-control__search-item .components-menu-item__item mark {
2222 - font-weight: 600;
2547 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2223 2548 color: inherit;
2224 2549 background-color: transparent;
2225 2550 }
2226 2551 .block-editor-link-control__search-item .components-menu-item__shortcut {
@@ -2267,9 +2592,9 @@
2267 2592 width: 32px;
2268 2593 max-height: 32px;
2269 2594 }
2270 2595 .block-editor-link-control__preview .block-editor-link-control__preview-title {
2271 - line-height: 1.1;
2596 + line-height: var(--wpds-typography-line-height-sm, 20px);
2272 2597 }
2273 2598 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
2274 2599 box-shadow: none;
2275 2600 }
@@ -2278,14 +2603,14 @@
2278 2603 outline: 2px solid transparent;
2279 2604 text-decoration: none;
2280 2605 }
2281 2606 .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2282 - font-weight: 600;
2607 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2283 2608 color: inherit;
2284 2609 background-color: transparent;
2285 2610 }
2286 2611 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2287 - font-weight: normal;
2612 + font-weight: 400;
2288 2613 }
2289 2614 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2290 2615 position: absolute;
2291 2616 width: 1px;
@@ -2292,9 +2617,9 @@
2292 2617 height: 1px;
2293 2618 padding: 0;
2294 2619 margin: -1px;
2295 2620 overflow: hidden;
2296 - clip: rect(0, 0, 0, 0);
2621 + clip-path: inset(50%);
2297 2622 border: 0;
2298 2623 }
2299 2624
2300 2625 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
@@ -2436,9 +2761,8 @@
2436 2761 .link-preview-button.components-button {
2437 2762 width: 100%;
2438 2763 height: auto;
2439 2764 padding: 12px;
2440 - box-shadow: inset 0 0 0 1px #949494;
2441 2765 border-color: #949494;
2442 2766 }
2443 2767
2444 2768 .link-preview-button__image-container {
@@ -2476,9 +2800,9 @@
2476 2800 }
2477 2801
2478 2802 .link-preview-button__title {
2479 2803 margin-top: 4px;
2480 - font-weight: 500;
2804 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2481 2805 color: #1e1e1e;
2482 2806 display: block;
2483 2807 }
2484 2808
@@ -2513,8 +2837,11 @@
2513 2837 .block-editor-list-view-leaf {
2514 2838 position: relative;
2515 2839 transform: translateY(0);
2516 2840 }
2841 +.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
2842 + z-index: 1;
2843 +}
2517 2844 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2518 2845 cursor: grab;
2519 2846 }
2520 2847 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
@@ -2525,13 +2852,8 @@
2525 2852 }
2526 2853 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2527 2854 fill: currentColor;
2528 2855 }
2529 -@media (forced-colors: active) {
2530 - .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2531 - fill: CanvasText;
2532 - }
2533 -}
2534 2856 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2535 2857 color: inherit;
2536 2858 }
2537 2859 .block-editor-list-view-leaf.is-selected td {
@@ -2543,23 +2865,45 @@
2543 2865 .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,
2544 2866 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2545 2867 color: var(--wp-block-synced-color);
2546 2868 }
2547 -.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2548 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2869 +.block-editor-list-view-leaf.is-synced .block-editor-list-view-block-contents:focus::after {
2870 + --focus-color: var(--wp-block-synced-color);
2549 2871 }
2872 +.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus {
2873 + --focus-color: var(--wp-block-synced-color);
2874 + 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)));
2875 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2876 +}
2550 2877 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2551 2878 color: #fff;
2552 2879 }
2553 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2554 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2880 +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2881 + --focus-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
2882 + 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)));
2883 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2884 + outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2555 2885 }
2556 -.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2557 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2886 +@media (forced-colors: active) {
2887 + .block-editor-list-view-leaf.is-selected td, .block-editor-list-view-leaf.is-selected.is-synced td {
2888 + background: SelectedItem;
2889 + }
2890 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2891 + color: SelectedItemText;
2892 + }
2893 + .block-editor-list-view-leaf.is-selected svg, .block-editor-list-view-leaf.is-selected .block-editor-block-icon.has-colors svg {
2894 + fill: SelectedItemText;
2895 + }
2896 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__title {
2897 + forced-color-adjust: none;
2898 + }
2899 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2900 + --focus-color: CanvasText;
2901 + }
2902 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2903 + --focus-color: SelectedItemText;
2904 + }
2558 2905 }
2559 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2560 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2561 -}
2562 2906 .block-editor-list-view-leaf.is-first-selected td:first-child {
2563 2907 border-top-left-radius: 2px;
2564 2908 }
2565 2909 .block-editor-list-view-leaf.is-first-selected td:last-child {
@@ -2681,8 +3025,9 @@
2681 3025 }
2682 3026 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2683 3027 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2684 3028 box-shadow: none;
3029 + outline: none;
2685 3030 }
2686 3031 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2687 3032 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2688 3033 content: "";
@@ -2687,13 +3032,16 @@
2687 3032 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2688 3033 content: "";
2689 3034 position: absolute;
2690 3035 top: 0;
2691 - right: -29px;
3036 + right: -28px;
2692 3037 bottom: 0;
2693 3038 left: 0;
2694 3039 border-radius: inherit;
2695 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3040 + 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)));
3041 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3042 + outline-offset: 1px;
3043 + 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);
2696 3044 z-index: 2;
2697 3045 pointer-events: none;
2698 3046 }
2699 3047 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
@@ -2698,13 +3046,8 @@
2698 3046 }
2699 3047 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2700 3048 right: 0;
2701 3049 }
2702 -.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu,
2703 -.block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
2704 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2705 - z-index: 1;
2706 -}
2707 3050 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2708 3051 opacity: 1;
2709 3052 }
2710 3053 @keyframes __wp-base-styles-fade-in {
@@ -2774,14 +3117,8 @@
2774 3117 }
2775 3118 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
2776 3119 top: -4px;
2777 3120 }
2778 -.block-editor-list-view-leaf .block-editor-block-mover-button::before {
2779 - height: 16px;
2780 - min-width: 100%;
2781 - left: 0;
2782 - right: 0;
2783 -}
2784 3121 .block-editor-list-view-leaf .block-editor-inserter__toggle {
2785 3122 background: #1e1e1e;
2786 3123 color: #fff;
2787 3124 height: 24px;
@@ -2790,8 +3127,14 @@
2790 3127 }
2791 3128 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
2792 3129 color: #fff;
2793 3130 }
3131 +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
3132 + width: 100%;
3133 +}
3134 +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper > * {
3135 + min-width: 0;
3136 +}
2794 3137 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
2795 3138 left: 2px;
2796 3139 position: relative;
2797 3140 }
@@ -2812,8 +3155,19 @@
2812 3155 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
2813 3156 position: absolute;
2814 3157 right: 0;
2815 3158 transform: translateY(-50%);
3159 + box-sizing: border-box;
3160 + max-width: 100%;
3161 + padding: 2px 8px;
3162 + border-radius: 2px;
3163 + background: #f0f0f0;
3164 + color: #2f2f2f;
3165 + font-size: 12px;
3166 + line-height: 20px;
3167 + overflow: hidden;
3168 + text-overflow: ellipsis;
3169 + white-space: nowrap;
2816 3170 }
2817 3171 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
2818 3172 background: rgba(0, 0, 0, 0.3);
2819 3173 color: #fff;
@@ -2840,8 +3194,25 @@
2840 3194 }
2841 3195 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
2842 3196 box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
2843 3197 }
3198 +.block-editor-list-view-leaf.is-disabled {
3199 + opacity: 0.2;
3200 +}
3201 +@media not (prefers-reduced-motion) {
3202 + .block-editor-list-view-leaf.is-disabled {
3203 + transition: opacity 0.1s linear;
3204 + }
3205 +}
3206 +.block-editor-list-view-leaf.is-disabled:hover {
3207 + opacity: 0.2;
3208 +}
3209 +.block-editor-list-view-leaf.is-disabled .block-editor-list-view__expander {
3210 + cursor: default;
3211 +}
3212 +.block-editor-list-view-leaf.is-disabled .block-editor-list-view-block-select-button:hover {
3213 + color: inherit;
3214 +}
2844 3215
2845 3216 .block-editor-list-view-draggable-chip {
2846 3217 opacity: 0.8;
2847 3218 }
@@ -3034,32 +3405,20 @@
3034 3405 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
3035 3406 padding: 8px 0 0;
3036 3407 }
3037 3408
3038 -.block-editor-media-flow__error {
3039 - padding: 0 20px 20px 20px;
3040 - max-width: 255px;
3041 -}
3042 -.block-editor-media-flow__error .components-with-notices-ui {
3043 - max-width: 255px;
3044 -}
3045 -.block-editor-media-flow__error .components-with-notices-ui .components-notice__content {
3046 - overflow: hidden;
3047 - word-wrap: break-word;
3048 -}
3049 -.block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss {
3050 - position: absolute;
3051 - right: 10px;
3052 -}
3053 -
3054 3409 .block-editor-multi-selection-inspector__card {
3055 3410 padding: 16px;
3056 3411 }
3057 3412
3058 3413 .block-editor-multi-selection-inspector__card-title {
3059 - font-weight: 499;
3414 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3060 3415 }
3061 3416
3417 +.block-editor-multi-selection-inspector__card-description {
3418 + color: #757575;
3419 +}
3420 +
3062 3421 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3063 3422 margin-left: -2px;
3064 3423 padding: 0 3px;
3065 3424 width: 36px;
@@ -3065,8 +3424,13 @@
3065 3424 width: 36px;
3066 3425 height: 24px;
3067 3426 }
3068 3427
3428 +.block-editor-plain-text {
3429 + width: 100%;
3430 + field-sizing: content;
3431 +}
3432 +
3069 3433 .block-editor-responsive-block-control {
3070 3434 margin-bottom: 28px;
3071 3435 border-bottom: 1px solid #ccc;
3072 3436 padding-bottom: 14px;
@@ -3082,9 +3446,9 @@
3082 3446 margin-left: -3px;
3083 3447 }
3084 3448
3085 3449 .block-editor-responsive-block-control__label {
3086 - font-weight: 600;
3450 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3087 3451 margin-bottom: 0.6em;
3088 3452 margin-left: -3px;
3089 3453 }
3090 3454
@@ -3104,9 +3468,9 @@
3104 3468 overflow: hidden;
3105 3469 padding: 0;
3106 3470 position: absolute;
3107 3471 width: 1px;
3108 - word-wrap: normal !important;
3472 + overflow-wrap: normal !important;
3109 3473 word-break: normal !important;
3110 3474 }
3111 3475
3112 3476 .preset-input-control__wrapper > * {
@@ -3161,9 +3525,9 @@
3161 3525 top: -9999em;
3162 3526 }
3163 3527 .block-editor-skip-to-selected-block:focus {
3164 3528 font-size: 14px;
3165 - font-weight: 600;
3529 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3166 3530 background: #f1f1f1;
3167 3531 z-index: 100000;
3168 3532 }
3169 3533
@@ -3359,8 +3723,13 @@
3359 3723 padding: 16px;
3360 3724 border-top: 1px solid #1e1e1e;
3361 3725 }
3362 3726
3727 +.block-editor-url-popover__link-container-content {
3728 + display: flex;
3729 + align-items: center;
3730 +}
3731 +
3363 3732 .block-editor-url-popover__link-editor,
3364 3733 .block-editor-url-popover__link-viewer {
3365 3734 display: flex;
3366 3735 }
@@ -3398,35 +3767,8 @@
3398 3767 color: #757575;
3399 3768 font-size: 12px;
3400 3769 }
3401 3770
3402 -/**
3403 - * ItemGroup-like border styles for the background panel's ToolsPanelItems.
3404 - * Replicates the separated border of the `ItemGroup` component while
3405 - * allowing for hidden placeholder items (same approach as the color panel).
3406 - */
3407 -.block-editor-background-panel__item {
3408 - padding: 0;
3409 - max-width: 100%;
3410 - position: relative;
3411 - border-left: 1px solid #ddd;
3412 - border-right: 1px solid #ddd;
3413 - border-bottom: 1px solid #ddd;
3414 -}
3415 -.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
3416 - border-top-left-radius: 2px;
3417 - border-top-right-radius: 2px;
3418 - border-top: 1px solid #ddd;
3419 -}
3420 -.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
3421 - border-bottom-left-radius: 2px;
3422 - border-bottom-right-radius: 2px;
3423 -}
3424 -.block-editor-background-panel__item > div,
3425 -.block-editor-background-panel__item > div > button {
3426 - border-radius: inherit;
3427 -}
3428 -
3429 3771 .background-block-support-panel {
3430 3772 /* Increased specificity required to remove the slot wrapper's row gap */
3431 3773 }
3432 3774 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
@@ -3432,173 +3774,8 @@
3432 3774 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3433 3775 row-gap: 0;
3434 3776 }
3435 3777
3436 -.block-editor-content-only-controls__link {
3437 - width: 100%;
3438 - box-shadow: inset 0 0 0 1px #ccc;
3439 -}
3440 -.block-editor-content-only-controls__link:focus:not(:disabled) {
3441 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3442 -}
3443 -
3444 -.block-editor-content-only-controls__link-row {
3445 - align-items: center;
3446 -}
3447 -
3448 -.block-editor-content-only-controls__link-title {
3449 - width: 100%;
3450 - white-space: nowrap;
3451 - text-overflow: ellipsis;
3452 - overflow: hidden;
3453 -}
3454 -
3455 -.block-editor-content-only-controls__media {
3456 - width: 100%;
3457 - box-shadow: inset 0 0 0 1px #ccc;
3458 - padding-right: 32px;
3459 -}
3460 -.block-editor-content-only-controls__media:focus:not(:disabled) {
3461 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3462 -}
3463 -
3464 -.block-editor-content-only-controls__media-replace-flow {
3465 - display: block;
3466 -}
3467 -
3468 -.block-editor-content-only-controls__media-row {
3469 - align-items: center;
3470 -}
3471 -
3472 -.block-editor-content-only-controls__media-placeholder {
3473 - width: 24px;
3474 - height: 24px;
3475 - border-radius: 2px;
3476 - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3477 - display: inline-block;
3478 - padding: 0;
3479 - background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3480 -}
3481 -
3482 -.block-editor-content-only-controls__media-title {
3483 - width: 100%;
3484 - white-space: nowrap;
3485 - text-overflow: ellipsis;
3486 - overflow: hidden;
3487 -}
3488 -
3489 -.block-editor-content-only-controls__media-thumbnail {
3490 - width: 20px;
3491 - height: 20px;
3492 - border-radius: 2px;
3493 - align-self: center;
3494 - overflow: hidden;
3495 -}
3496 -.block-editor-content-only-controls__media-thumbnail img {
3497 - width: 100% !important;
3498 - height: 100% !important;
3499 - object-fit: cover;
3500 -}
3501 -
3502 -.block-editor-content-only-controls {
3503 - position: relative;
3504 -}
3505 -
3506 -.block-editor-content-only-controls__media-reset {
3507 - position: absolute;
3508 - right: 0;
3509 - top: 8px;
3510 - margin: auto 8px auto;
3511 - opacity: 0;
3512 - border-radius: 2px;
3513 -}
3514 -@media not (prefers-reduced-motion) {
3515 - .block-editor-content-only-controls__media-reset {
3516 - transition: opacity 0.1s ease-in-out;
3517 - }
3518 -}
3519 -.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 {
3520 - opacity: 1;
3521 -}
3522 -@media (hover: none) {
3523 - .block-editor-content-only-controls__media-reset {
3524 - opacity: 1;
3525 - }
3526 -}
3527 -
3528 -.block-editor-content-only-controls__rich-text {
3529 - width: 100%;
3530 - margin: 0;
3531 - background: #fff;
3532 - color: #1e1e1e;
3533 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3534 - padding: 6px 8px;
3535 - /* Fonts smaller than 16px causes mobile safari to zoom. */
3536 - font-size: 16px;
3537 - /* Override core line-height. To be reviewed. */
3538 - line-height: normal;
3539 - box-shadow: 0 0 0 transparent;
3540 - border-radius: 2px;
3541 - border: 1px solid #949494;
3542 -}
3543 -@media not (prefers-reduced-motion) {
3544 - .block-editor-content-only-controls__rich-text {
3545 - transition: box-shadow 0.1s linear;
3546 - }
3547 -}
3548 -@media (min-width: 600px) {
3549 - .block-editor-content-only-controls__rich-text {
3550 - font-size: 13px;
3551 - /* Override core line-height. To be reviewed. */
3552 - line-height: normal;
3553 - }
3554 -}
3555 -.block-editor-content-only-controls__rich-text:focus {
3556 - border-color: var(--wp-admin-theme-color, #3858e9);
3557 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
3558 - outline: 2px solid transparent;
3559 -}
3560 -.block-editor-content-only-controls__rich-text::placeholder {
3561 - color: rgba(30, 30, 30, 0.62);
3562 -}
3563 -.block-editor-content-only-controls__rich-text {
3564 - border-color: #949494;
3565 -}
3566 -.block-editor-content-only-controls__rich-text::placeholder {
3567 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3568 -}
3569 -.block-editor-content-only-controls__rich-text {
3570 - min-height: 40px;
3571 - padding: 12px;
3572 -}
3573 -
3574 -.block-editor-block-fields__container {
3575 - padding: 0 16px 16px;
3576 -}
3577 -.block-editor-block-fields__container:first-of-type {
3578 - padding-block-start: 8px;
3579 - /*
3580 - * Add border for the entire content controls and remove the similar border
3581 - * for tools panel.
3582 - */
3583 - border-block-start: 1px solid #e0e0e0;
3584 -}
3585 -
3586 -.block-editor-block-fields__header {
3587 - padding: 8px 0;
3588 - margin-bottom: 4px;
3589 -}
3590 -
3591 -.block-editor-block-fields__header-icon {
3592 - flex: 0 0 24px;
3593 -}
3594 -
3595 -.block-editor-block-fields__header-title {
3596 - flex: 1;
3597 - /* Override the default margin on a h2 element. */
3598 - margin: 0 !important;
3599 -}
3600 -
3601 3778 .block-editor-hooks__block-hooks {
3602 3779 /**
3603 3780 * Un-reverse the flex direction for the toggle's label.
3604 3781 */
@@ -3632,17 +3809,14 @@
3632 3809 }
3633 3810 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3634 3811 row-gap: 0;
3635 3812 }
3636 -.color-block-support-panel {
3637 - /**
3638 - * After converting PanelColorGradientSettings to render as a ToolsPanel
3639 - * we need to remove the top margin when wrapping inner content due to
3640 - * rendering via SlotFills.
3641 - */
3813 +
3814 +.elements-block-support-panel {
3815 + /* Increased specificity required to remove the slot wrapper's row gap */
3642 3816 }
3643 -.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
3644 - margin-top: 0;
3817 +.elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
3818 + row-gap: 0;
3645 3819 }
3646 3820
3647 3821 .dimensions-block-support-panel .single-column {
3648 3822 grid-column: span 1;
@@ -3657,8 +3831,12 @@
3657 3831 font-size: 12px;
3658 3832 margin-bottom: 0;
3659 3833 }
3660 3834
3835 +.layout-block-support-panel .block-editor-hooks__flex-layout-controls {
3836 + grid-column: 1/-1;
3837 +}
3838 +
3661 3839 .block-editor-hooks__flex-layout-justification-controls,
3662 3840 .block-editor-hooks__flex-layout-orientation-controls {
3663 3841 margin-bottom: 12px;
3664 3842 }
@@ -3931,9 +4109,9 @@
3931 4109 }
3932 4110 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
3933 4111 display: grid;
3934 4112 grid-template-columns: 1fr 1fr;
3935 - grid-gap: 12px;
4113 + gap: 12px;
3936 4114 }
3937 4115 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
3938 4116 margin-bottom: 0;
3939 4117 }
@@ -3945,9 +4123,9 @@
3945 4123 display: inline-block;
3946 4124 background: none;
3947 4125 border: none;
3948 4126 padding: 0;
3949 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4127 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3950 4128 font-size: 13px;
3951 4129 line-height: 0;
3952 4130 }
3953 4131 @media (min-width: 782px) {
@@ -4042,10 +4220,23 @@
4042 4220 z-index: 99999;
4043 4221 }
4044 4222
4045 4223 .block-editor-inserter__search {
4046 - padding: 16px 16px 0 16px;
4224 + padding: 16px;
4225 + position: sticky;
4226 + top: 0;
4227 + z-index: 2;
4228 + background-color: #fff;
4229 + border-bottom: 1px solid transparent;
4047 4230 }
4231 +@media not (prefers-reduced-motion) {
4232 + .block-editor-inserter__search {
4233 + transition: border-bottom-color 0.1s linear;
4234 + }
4235 +}
4236 +.block-editor-inserter__search.is-scrolled {
4237 + border-bottom-color: #e0e0e0;
4238 +}
4048 4239
4049 4240 .block-editor-inserter__no-tab-container {
4050 4241 overflow-y: auto;
4051 4242 flex-grow: 1;
@@ -4055,9 +4246,9 @@
4055 4246 .block-editor-inserter__panel-header {
4056 4247 position: relative;
4057 4248 display: inline-flex;
4058 4249 align-items: center;
4059 - padding: 16px 16px 0;
4250 + padding: 0 16px;
4060 4251 }
4061 4252
4062 4253 .block-editor-inserter__panel-content {
4063 4254 padding: 16px;
@@ -4068,9 +4259,9 @@
4068 4259 margin: 0 12px 0 0;
4069 4260 color: #757575;
4070 4261 text-transform: uppercase;
4071 4262 font-size: 11px;
4072 - font-weight: 499;
4263 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4073 4264 }
4074 4265
4075 4266 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4076 4267 height: 36px;
@@ -4106,12 +4297,8 @@
4106 4297 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4107 4298 margin-right: 8px;
4108 4299 }
4109 4300
4110 -.block-editor-inserter__preview-container__popover {
4111 - top: 16px !important;
4112 -}
4113 -
4114 4301 .block-editor-inserter__preview-container {
4115 4302 display: none;
4116 4303 width: 280px;
4117 4304 padding: 16px;
@@ -4138,14 +4325,18 @@
4138 4325
4139 4326 .block-editor-inserter__media-tabs-container,
4140 4327 .block-editor-inserter__block-patterns-tabs-container {
4141 4328 flex-grow: 1;
4142 - padding: 16px;
4329 + padding: 0 16px 16px;
4143 4330 display: flex;
4144 4331 flex-direction: column;
4145 4332 justify-content: space-between;
4146 4333 }
4147 4334
4335 +.block-editor-inserter__media-tabs-container {
4336 + padding-top: 16px;
4337 +}
4338 +
4148 4339 .block-editor-inserter__category-tablist {
4149 4340 margin-bottom: 8px;
4150 4341 }
4151 4342
@@ -4248,9 +4439,9 @@
4248 4439
4249 4440 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4250 4441 display: grid;
4251 4442 grid-template-columns: 1fr 1fr;
4252 - grid-gap: 8px;
4443 + gap: 8px;
4253 4444 }
4254 4445 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4255 4446 margin-bottom: 0;
4256 4447 }
@@ -4265,59 +4456,54 @@
4265 4456 .block-editor-inserter__popover.is-quick > .components-popover__content {
4266 4457 padding: 0;
4267 4458 }
4268 4459
4269 -.block-editor-inserter__quick-inserter-expand.components-button {
4270 - display: block;
4271 - background: #1e1e1e;
4272 - color: #fff;
4460 +.block-editor-inserter__quick-inserter-expand {
4461 + padding: 0 16px 16px;
4462 +}
4463 +
4464 +.block-editor-inserter__quick-inserter-expand-toggle {
4273 4465 width: 100%;
4274 - border-radius: 0;
4466 + justify-content: center;
4275 4467 }
4276 -.block-editor-inserter__quick-inserter-expand.components-button:hover {
4277 - color: #fff;
4278 -}
4279 -.block-editor-inserter__quick-inserter-expand.components-button:active {
4280 - color: #ccc;
4281 -}
4282 -.block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) {
4283 - box-shadow: none;
4284 - background: var(--wp-admin-theme-color);
4285 - border-color: var(--wp-admin-theme-color);
4286 -}
4287 4468
4288 4469 .block-editor-block-patterns-explorer__sidebar {
4289 - position: absolute;
4290 - top: 72px;
4291 - left: 0;
4292 - bottom: 0;
4293 - width: 280px;
4294 - padding: 24px 24px 24px;
4295 - overflow-x: visible;
4296 - overflow-y: auto;
4470 + padding-bottom: 24px;
4297 4471 }
4298 -.block-editor-block-patterns-explorer__sidebar__categories-list__item {
4299 - display: block;
4300 - width: 100%;
4301 - height: 48px;
4302 - text-align: left;
4472 +@media (min-width: 782px) {
4473 + .block-editor-block-patterns-explorer__sidebar {
4474 + position: absolute;
4475 + top: 72px;
4476 + left: 0;
4477 + bottom: 0;
4478 + width: 280px;
4479 + padding: 24px;
4480 + overflow-x: visible;
4481 + overflow-y: auto;
4482 + }
4303 4483 }
4304 -.block-editor-block-patterns-explorer__search {
4305 - margin-bottom: 32px;
4484 +
4485 +@media (min-width: 782px) {
4486 + .block-editor-block-patterns-explorer__panel {
4487 + margin-inline-start: 280px;
4488 + }
4306 4489 }
4307 -.block-editor-block-patterns-explorer__search-results-count {
4308 - padding-bottom: 32px;
4490 +
4491 +.block-editor-block-patterns-explorer__no-results {
4492 + padding: 32px;
4493 + text-align: center;
4309 4494 }
4495 +
4310 4496 .block-editor-block-patterns-explorer__list {
4311 - margin-left: 280px;
4312 4497 padding: 24px 0 32px;
4313 4498 }
4314 4499 .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4315 4500 width: 380px;
4316 4501 }
4502 +
4317 4503 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4318 4504 display: grid;
4319 - grid-gap: 32px;
4505 + gap: 32px;
4320 4506 grid-template-columns: repeat(1, 1fr);
4321 4507 margin-bottom: 16px;
4322 4508 }
4323 4509 @media (min-width: 1080px) {
@@ -4339,9 +4525,9 @@
4339 4525 max-height: 800px;
4340 4526 }
4341 4527
4342 4528 .components-heading.block-editor-inserter__patterns-category-panel-title {
4343 - font-weight: 499;
4529 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4344 4530 }
4345 4531
4346 4532 .block-editor-inserter__patterns-explore-button.components-button,
4347 4533 .block-editor-inserter__media-library-button.components-button {
@@ -4350,17 +4536,26 @@
4350 4536 margin-top: 16px;
4351 4537 width: 100%;
4352 4538 }
4353 4539
4540 +.block-editor-inserter__media-mobile-screen {
4541 + display: flex;
4542 + flex-direction: column;
4543 + align-self: stretch;
4544 +}
4545 +
4354 4546 .block-editor-inserter__media-panel {
4355 - min-height: 100%;
4356 4547 padding: 0 16px;
4357 4548 display: flex;
4358 4549 flex-direction: column;
4550 + flex: 1;
4551 + min-height: 0;
4359 4552 }
4360 4553 @media (min-width: 782px) {
4361 4554 .block-editor-inserter__media-panel {
4362 4555 padding: 0;
4556 + flex: 0 1 auto;
4557 + min-height: 100%;
4363 4558 }
4364 4559 }
4365 4560 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
4366 4561 height: 100%;
@@ -4377,9 +4572,68 @@
4377 4572 margin-bottom: 0;
4378 4573 padding: 16px 24px 16px;
4379 4574 }
4380 4575 }
4576 +.block-editor-inserter__media-panel .block-editor-inserter__no-results {
4577 + flex-grow: 1;
4578 +}
4579 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer {
4580 + flex-shrink: 0;
4581 + padding-top: 16px;
4582 + padding-bottom: 16px;
4583 +}
4584 +@media (min-width: 782px) {
4585 + .block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer {
4586 + padding-left: 24px;
4587 + padding-right: 24px;
4588 + }
4589 +}
4590 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-attach.components-button {
4591 + justify-content: center;
4592 + padding: 16px;
4593 +}
4594 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-results {
4595 + display: flex;
4596 + flex-direction: column;
4597 + flex-grow: 1;
4598 + min-height: 0;
4599 +}
4600 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list {
4601 + opacity: 0.5;
4602 + pointer-events: none;
4603 +}
4604 +@media not (prefers-reduced-motion) {
4605 + .block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list {
4606 + opacity: 1;
4607 + animation: inserter-media-panel-pulse 1s ease-in-out infinite;
4608 + }
4609 +}
4610 +.block-editor-inserter__media-panel.has-footer .block-editor-inserter__media-list {
4611 + padding-bottom: 0;
4612 +}
4381 4613
4614 +@keyframes inserter-media-panel-pulse {
4615 + 0%, 100% {
4616 + opacity: 1;
4617 + }
4618 + 50% {
4619 + opacity: 0.5;
4620 + }
4621 +}
4622 +.block-editor-inserter__media-panel-detach-modal {
4623 + z-index: 1000001;
4624 +}
4625 +.block-editor-inserter__media-panel-detach-modal p {
4626 + margin-top: 0;
4627 +}
4628 +
4629 +.block-editor-inserter__media-panel-detach-actions {
4630 + display: flex;
4631 + justify-content: flex-end;
4632 + gap: 8px;
4633 + margin-top: 16px;
4634 +}
4635 +
4382 4636 .block-editor-inserter__media-list__list-item {
4383 4637 position: relative;
4384 4638 cursor: var(--wpds-cursor-control, pointer);
4385 4639 margin-bottom: 24px;
@@ -4392,9 +4646,9 @@
4392 4646 }
4393 4647 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
4394 4648 outline-color: rgba(0, 0, 0, 0.3);
4395 4649 }
4396 -.block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options > button {
4650 +.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 {
4397 4651 display: block;
4398 4652 }
4399 4653 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
4400 4654 position: absolute;
@@ -4576,12 +4830,12 @@
4576 4830 flex-direction: column;
4577 4831 align-items: start;
4578 4832 }
4579 4833 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4580 - font-weight: 600;
4834 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4581 4835 }
4582 4836 .block-editor-block-visibility-modal__options-icon--checked {
4583 - fill: #ddd;
4837 + color: #ddd;
4584 4838 }
4585 4839 .block-editor-block-visibility-modal__sub-options {
4586 4840 width: 100%;
4587 4841 padding-inline-start: 12px;
@@ -4591,11 +4845,52 @@
4591 4845 color: #757575;
4592 4846 }
4593 4847
4594 4848 .block-editor-block-visibility-info {
4595 - padding-top: 4px;
4596 - padding-bottom: 4px;
4597 4849 margin: 0 16px 16px;
4598 - display: flex;
4599 - align-items: center;
4600 - justify-content: start;
4850 +}
4851 +
4852 +/* The stop element is invisible, so its focus indication is drawn around the
4853 + canvas it stands for. For the iframed canvas it is an overlay instead of
4854 + an outline, because Safari paints an outline on an iframe element
4855 + underneath the iframe's content. */
4856 +.block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after {
4857 + content: "";
4858 + position: absolute;
4859 + inset: 0;
4860 + z-index: 1;
4861 + pointer-events: none;
4862 + border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4863 +}
4864 +
4865 +.block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow {
4866 + outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4867 + outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4868 +}
4869 +
4870 +/* Looks like a tooltip. Shown at the top of the canvas while the stop is
4871 + focused. Sticky, because on the widgets screen the stop spans scrolling
4872 + content and the hint must stay in view; anywhere else there is nothing
4873 + to scroll and it stays at the top of the canvas. */
4874 +.block-editor-writing-flow__canvas-stop-hint {
4875 + display: none;
4876 + position: sticky;
4877 + top: 16px;
4878 + margin-inline: auto;
4879 + width: fit-content;
4880 + z-index: 2;
4881 + background: #000;
4882 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4883 + border-radius: 4px;
4884 + color: #f0f0f0;
4885 + text-align: center;
4886 + line-height: 1.4;
4887 + font-size: 12px;
4888 + padding: 4px 8px;
4889 + 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);
4890 + white-space: nowrap;
4891 + pointer-events: none;
4892 +}
4893 +
4894 +.block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint {
4895 + display: block;
4601 4896 }