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 +658 -389 23.2.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 {
@@ -843,9 +941,9 @@
843 941 background-color: #fff;
844 942 z-index: 1;
845 943 }
846 944 .block-editor-block-manager__category-title .components-checkbox-control__label {
847 - font-weight: 600;
945 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
848 946 }
849 947
850 948 .block-editor-block-manager__checklist {
851 949 margin-top: 0;
@@ -868,8 +966,9 @@
868 966 }
869 967 .block-editor-block-manager__checklist-item .block-editor-block-icon {
870 968 margin-right: 10px;
871 969 fill: #1e1e1e;
970 + color: #1e1e1e;
872 971 }
873 972
874 973 .block-editor-block-manager__results {
875 974 border-top: 1px solid #ddd;
@@ -958,16 +1057,8 @@
958 1057 animation: components-button__appear-animation 0.1s ease;
959 1058 animation-fill-mode: forwards;
960 1059 }
961 1060 }
962 -.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 {
963 - box-shadow: none;
964 - outline: none;
965 -}
966 -.components-button.block-editor-block-mover-button:focus-visible::before {
967 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
968 - outline: 2px solid transparent;
969 -}
970 1061
971 1062 .block-editor-block-navigation__container {
972 1063 min-width: 280px;
973 1064 }
@@ -976,9 +1067,9 @@
976 1067 margin: 0 0 12px;
977 1068 color: #757575;
978 1069 text-transform: uppercase;
979 1070 font-size: 11px;
980 - font-weight: 499;
1071 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
981 1072 }
982 1073
983 1074 .block-editor-block-patterns-list__list-item {
984 1075 cursor: var(--wpds-cursor-control, pointer);
@@ -999,9 +1090,8 @@
999 1090 outline: 0;
1000 1091 }
1001 1092 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
1002 1093 flex-grow: 1;
1003 - font-size: 12px;
1004 1094 text-align: left;
1005 1095 }
1006 1096 .block-editor-block-patterns-list__item .block-editor-block-preview__container {
1007 1097 display: flex;
@@ -1041,9 +1131,9 @@
1041 1131 min-width: 24px;
1042 1132 height: 24px;
1043 1133 }
1044 1134 .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon {
1045 - fill: var(--wp-block-synced-color);
1135 + color: var(--wp-block-synced-color);
1046 1136 }
1047 1137
1048 1138 .block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination {
1049 1139 border-top: 1px solid #2f2f2f;
@@ -1130,9 +1220,9 @@
1130 1220 z-index: 1;
1131 1221 }
1132 1222
1133 1223 .block-editor-block-quick-navigation__item {
1134 - font-weight: 400;
1224 + font-weight: var(--wpds-typography-font-weight-default, 400);
1135 1225 }
1136 1226
1137 1227 .block-editor-block-rename-modal {
1138 1228 z-index: 1000001;
@@ -1155,37 +1245,17 @@
1155 1245 grid-column: 1/-1;
1156 1246 }
1157 1247
1158 1248 .block-editor-block-styles__variants {
1159 - display: flex;
1160 - flex-wrap: wrap;
1161 - justify-content: space-between;
1249 + display: grid;
1162 1250 gap: 8px;
1163 1251 }
1164 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item {
1165 - color: #1e1e1e;
1166 - box-shadow: inset 0 0 0 1px #ddd;
1167 - display: inline-block;
1168 - 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;
1169 1256 }
1170 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover {
1171 - color: var(--wp-admin-theme-color);
1172 - box-shadow: inset 0 0 0 1px #ddd;
1173 -}
1174 -.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 {
1175 - background-color: #1e1e1e;
1176 - box-shadow: none;
1177 -}
1178 -.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 {
1179 - color: #fff;
1180 -}
1181 -.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 {
1182 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1183 - outline: 2px solid transparent;
1184 -}
1185 1257 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
1186 - word-break: break-all;
1187 - white-space: normal;
1188 1258 text-align: start;
1189 1259 text-align-last: center;
1190 1260 }
1191 1261
@@ -1271,9 +1341,8 @@
1271 1341 padding: 8px;
1272 1342 }
1273 1343
1274 1344 .block-editor-block-types-list > [role=presentation] {
1275 - overflow: hidden;
1276 1345 display: flex;
1277 1346 flex-wrap: wrap;
1278 1347 }
1279 1348
@@ -1475,12 +1544,8 @@
1475 1544 margin: 0;
1476 1545 min-width: 0;
1477 1546 }
1478 1547
1479 -.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) {
1480 - display: block;
1481 -}
1482 -
1483 1548 @media screen and (min-width: 782px) {
1484 1549 .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
1485 1550 display: grid;
1486 1551 grid-template-columns: repeat(6, 28px);
@@ -1488,8 +1553,18 @@
1488 1553 }
1489 1554 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
1490 1555 margin-bottom: inherit;
1491 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 +}
1492 1567
1493 1568 .block-editor-panel-color-gradient-settings__dropdown-content {
1494 1569 min-height: 160px;
1495 1570 }
@@ -1501,8 +1576,12 @@
1501 1576 .block-editor-panel-color-gradient-settings__color-indicator {
1502 1577 background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1503 1578 }
1504 1579
1580 +.block-editor-panel-color-gradient-settings__contrast-notice {
1581 + margin-top: 16px;
1582 +}
1583 +
1505 1584 /**
1506 1585 * The following styles replicate the separated border of the
1507 1586 * `ItemGroup` component but allows for hidden items. This is because
1508 1587 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
@@ -1507,10 +1586,14 @@
1507 1586 * `ItemGroup` component but allows for hidden items. This is because
1508 1587 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
1509 1588 * must at least render a placeholder which would otherwise interfere
1510 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.
1511 1594 */
1512 -.block-editor-tools-panel-color-gradient-settings__item {
1595 +.block-editor-color-gradient-item {
1513 1596 padding: 0;
1514 1597 max-width: 100%;
1515 1598 position: relative;
1516 1599 border-left: 1px solid #ddd;
@@ -1516,20 +1599,19 @@
1516 1599 border-left: 1px solid #ddd;
1517 1600 border-right: 1px solid #ddd;
1518 1601 border-bottom: 1px solid #ddd;
1519 1602 }
1520 -.block-editor-tools-panel-color-gradient-settings__item:nth-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
1521 - margin-top: 24px;
1603 +.block-editor-color-gradient-item:nth-child(1 of .block-editor-color-gradient-item) {
1522 1604 border-top-left-radius: 2px;
1523 1605 border-top-right-radius: 2px;
1524 1606 border-top: 1px solid #ddd;
1525 1607 }
1526 -.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) {
1527 1609 border-bottom-left-radius: 2px;
1528 1610 border-bottom-right-radius: 2px;
1529 1611 }
1530 -.block-editor-tools-panel-color-gradient-settings__item > div,
1531 -.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 {
1532 1614 border-radius: inherit;
1533 1615 }
1534 1616
1535 1617 .block-editor-tools-panel-color-gradient-settings__dropdown {
@@ -1546,13 +1628,17 @@
1546 1628 background: #f0f0f0;
1547 1629 color: var(--wp-admin-theme-color);
1548 1630 }
1549 1631 .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
1632 + min-width: 0;
1550 1633 white-space: nowrap;
1551 1634 overflow: hidden;
1552 1635 text-overflow: ellipsis;
1553 1636 max-width: calc(100% - 44px);
1554 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 +}
1555 1641
1556 1642 .block-editor-panel-color-gradient-settings__dropdown {
1557 1643 width: 100%;
1558 1644 }
@@ -1559,8 +1645,21 @@
1559 1645 .block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
1560 1646 flex-shrink: 0;
1561 1647 }
1562 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 +
1563 1662 .block-editor-panel-color-gradient-settings__reset {
1564 1663 position: absolute;
1565 1664 right: 0;
1566 1665 top: 8px;
@@ -1582,9 +1681,22 @@
1582 1681 .block-editor-panel-color-gradient-settings__reset {
1583 1682 opacity: 1;
1584 1683 }
1585 1684 }
1685 +.block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + .block-editor-panel-color-gradient-settings__reset {
1686 + right: 28px;
1687 +}
1586 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 +
1587 1699 .block-editor-date-format-picker {
1588 1700 margin: 0 0 16px;
1589 1701 padding: 0;
1590 1702 border: none;
@@ -1593,8 +1705,14 @@
1593 1705 .block-editor-date-format-picker__custom-format-select-control__custom-option {
1594 1706 border-top: 1px solid #ddd;
1595 1707 }
1596 1708
1709 +.block-editor-dimension-control {
1710 + border: 0;
1711 + margin: 0;
1712 + padding: 0;
1713 +}
1714 +
1597 1715 .block-editor-duotone-control__popover.components-popover > .components-popover__content {
1598 1716 padding: 8px;
1599 1717 width: 260px;
1600 1718 }
@@ -1647,8 +1765,13 @@
1647 1765 .block-editor-global-styles-state-control__badges {
1648 1766 min-height: 24px;
1649 1767 }
1650 1768
1769 +.block-editor-global-styles-state-control__badge-tooltip-trigger {
1770 + display: inline-flex;
1771 + max-width: 100%;
1772 +}
1773 +
1651 1774 .block-editor-global-styles-filters-panel__dropdown,
1652 1775 .block-editor-global-styles__shadow-dropdown {
1653 1776 display: block;
1654 1777 padding: 0;
@@ -1666,8 +1789,17 @@
1666 1789 .block-editor-global-styles__shadow-dropdown-toggle.is-open {
1667 1790 background-color: #f0f0f0;
1668 1791 }
1669 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 +
1670 1802 .block-editor-global-styles__shadow-editor__remove-button {
1671 1803 position: absolute;
1672 1804 right: 0;
1673 1805 top: 8px;
@@ -1750,8 +1882,189 @@
1750 1882 opacity: 1;
1751 1883 }
1752 1884 }
1753 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 +
1754 2067 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
1755 2068 z-index: 30;
1756 2069 }
1757 2070 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
@@ -1856,16 +2169,8 @@
1856 2169 animation: components-button__appear-animation 0.1s ease;
1857 2170 animation-fill-mode: forwards;
1858 2171 }
1859 2172 }
1860 -.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 {
1861 - box-shadow: none;
1862 - outline: none;
1863 -}
1864 -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
1865 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1866 - outline: 2px solid transparent;
1867 -}
1868 2173
1869 2174 .block-editor-grid-item-mover__move-vertical-button-container {
1870 2175 display: flex;
1871 2176 position: relative;
@@ -1979,8 +2284,27 @@
1979 2284 position: absolute;
1980 2285 right: 0;
1981 2286 }
1982 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 +
1983 2307 .block-editor-block-types-list__list-item {
1984 2308 display: block;
1985 2309 width: 33.33%;
1986 2310 padding: 0;
@@ -2010,9 +2334,10 @@
2010 2334 align-items: stretch;
2011 2335 justify-content: center;
2012 2336 cursor: var(--wpds-cursor-control, pointer);
2013 2337 background: transparent;
2014 - word-break: break-word;
2338 + word-break: normal;
2339 + overflow-wrap: break-word;
2015 2340 }
2016 2341 @media not (prefers-reduced-motion) {
2017 2342 .components-button.block-editor-block-types-list__item {
2018 2343 transition: all 0.05s ease-in-out;
@@ -2044,17 +2369,8 @@
2044 2369 opacity: 0.04;
2045 2370 background: var(--wp-admin-theme-color);
2046 2371 pointer-events: none;
2047 2372 }
2048 -.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active {
2049 - color: #fff;
2050 - background: #1e1e1e;
2051 - outline: 2px solid transparent;
2052 - outline-offset: -2px;
2053 -}
2054 -.components-button.block-editor-block-types-list__item:not(:disabled):focus {
2055 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2056 -}
2057 2373
2058 2374 .block-editor-block-types-list__item-icon {
2059 2375 padding: 12px 20px;
2060 2376 color: #1e1e1e;
@@ -2227,9 +2543,9 @@
2227 2543 display: inline-block;
2228 2544 width: 100%;
2229 2545 }
2230 2546 .block-editor-link-control__search-item .components-menu-item__item mark {
2231 - font-weight: 600;
2547 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2232 2548 color: inherit;
2233 2549 background-color: transparent;
2234 2550 }
2235 2551 .block-editor-link-control__search-item .components-menu-item__shortcut {
@@ -2276,9 +2592,9 @@
2276 2592 width: 32px;
2277 2593 max-height: 32px;
2278 2594 }
2279 2595 .block-editor-link-control__preview .block-editor-link-control__preview-title {
2280 - line-height: 1.1;
2596 + line-height: var(--wpds-typography-line-height-sm, 20px);
2281 2597 }
2282 2598 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
2283 2599 box-shadow: none;
2284 2600 }
@@ -2287,14 +2603,14 @@
2287 2603 outline: 2px solid transparent;
2288 2604 text-decoration: none;
2289 2605 }
2290 2606 .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2291 - font-weight: 600;
2607 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2292 2608 color: inherit;
2293 2609 background-color: transparent;
2294 2610 }
2295 2611 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2296 - font-weight: normal;
2612 + font-weight: 400;
2297 2613 }
2298 2614 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2299 2615 position: absolute;
2300 2616 width: 1px;
@@ -2301,9 +2617,9 @@
2301 2617 height: 1px;
2302 2618 padding: 0;
2303 2619 margin: -1px;
2304 2620 overflow: hidden;
2305 - clip: rect(0, 0, 0, 0);
2621 + clip-path: inset(50%);
2306 2622 border: 0;
2307 2623 }
2308 2624
2309 2625 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
@@ -2445,9 +2761,8 @@
2445 2761 .link-preview-button.components-button {
2446 2762 width: 100%;
2447 2763 height: auto;
2448 2764 padding: 12px;
2449 - box-shadow: inset 0 0 0 1px #949494;
2450 2765 border-color: #949494;
2451 2766 }
2452 2767
2453 2768 .link-preview-button__image-container {
@@ -2485,9 +2800,9 @@
2485 2800 }
2486 2801
2487 2802 .link-preview-button__title {
2488 2803 margin-top: 4px;
2489 - font-weight: 500;
2804 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2490 2805 color: #1e1e1e;
2491 2806 display: block;
2492 2807 }
2493 2808
@@ -2522,8 +2837,11 @@
2522 2837 .block-editor-list-view-leaf {
2523 2838 position: relative;
2524 2839 transform: translateY(0);
2525 2840 }
2841 +.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
2842 + z-index: 1;
2843 +}
2526 2844 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2527 2845 cursor: grab;
2528 2846 }
2529 2847 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
@@ -2534,13 +2852,8 @@
2534 2852 }
2535 2853 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2536 2854 fill: currentColor;
2537 2855 }
2538 -@media (forced-colors: active) {
2539 - .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2540 - fill: CanvasText;
2541 - }
2542 -}
2543 2856 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2544 2857 color: inherit;
2545 2858 }
2546 2859 .block-editor-list-view-leaf.is-selected td {
@@ -2552,23 +2865,45 @@
2552 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,
2553 2866 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2554 2867 color: var(--wp-block-synced-color);
2555 2868 }
2556 -.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2557 - 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);
2558 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 +}
2559 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 {
2560 2878 color: #fff;
2561 2879 }
2562 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2563 - 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)));
2564 2885 }
2565 -.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2566 - 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 + }
2567 2905 }
2568 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2569 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2570 -}
2571 2906 .block-editor-list-view-leaf.is-first-selected td:first-child {
2572 2907 border-top-left-radius: 2px;
2573 2908 }
2574 2909 .block-editor-list-view-leaf.is-first-selected td:last-child {
@@ -2690,8 +3025,9 @@
2690 3025 }
2691 3026 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2692 3027 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2693 3028 box-shadow: none;
3029 + outline: none;
2694 3030 }
2695 3031 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2696 3032 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2697 3033 content: "";
@@ -2696,13 +3032,16 @@
2696 3032 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2697 3033 content: "";
2698 3034 position: absolute;
2699 3035 top: 0;
2700 - right: -29px;
3036 + right: -28px;
2701 3037 bottom: 0;
2702 3038 left: 0;
2703 3039 border-radius: inherit;
2704 - 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);
2705 3044 z-index: 2;
2706 3045 pointer-events: none;
2707 3046 }
2708 3047 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
@@ -2707,13 +3046,8 @@
2707 3046 }
2708 3047 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2709 3048 right: 0;
2710 3049 }
2711 -.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu,
2712 -.block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
2713 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2714 - z-index: 1;
2715 -}
2716 3050 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2717 3051 opacity: 1;
2718 3052 }
2719 3053 @keyframes __wp-base-styles-fade-in {
@@ -2783,14 +3117,8 @@
2783 3117 }
2784 3118 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
2785 3119 top: -4px;
2786 3120 }
2787 -.block-editor-list-view-leaf .block-editor-block-mover-button::before {
2788 - height: 16px;
2789 - min-width: 100%;
2790 - left: 0;
2791 - right: 0;
2792 -}
2793 3121 .block-editor-list-view-leaf .block-editor-inserter__toggle {
2794 3122 background: #1e1e1e;
2795 3123 color: #fff;
2796 3124 height: 24px;
@@ -2799,8 +3127,14 @@
2799 3127 }
2800 3128 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
2801 3129 color: #fff;
2802 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 +}
2803 3137 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
2804 3138 left: 2px;
2805 3139 position: relative;
2806 3140 }
@@ -2821,8 +3155,19 @@
2821 3155 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
2822 3156 position: absolute;
2823 3157 right: 0;
2824 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;
2825 3170 }
2826 3171 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
2827 3172 background: rgba(0, 0, 0, 0.3);
2828 3173 color: #fff;
@@ -2849,8 +3194,25 @@
2849 3194 }
2850 3195 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
2851 3196 box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
2852 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 +}
2853 3215
2854 3216 .block-editor-list-view-draggable-chip {
2855 3217 opacity: 0.8;
2856 3218 }
@@ -3043,32 +3405,20 @@
3043 3405 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
3044 3406 padding: 8px 0 0;
3045 3407 }
3046 3408
3047 -.block-editor-media-flow__error {
3048 - padding: 0 20px 20px 20px;
3049 - max-width: 255px;
3050 -}
3051 -.block-editor-media-flow__error .components-with-notices-ui {
3052 - max-width: 255px;
3053 -}
3054 -.block-editor-media-flow__error .components-with-notices-ui .components-notice__content {
3055 - overflow: hidden;
3056 - word-wrap: break-word;
3057 -}
3058 -.block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss {
3059 - position: absolute;
3060 - right: 10px;
3061 -}
3062 -
3063 3409 .block-editor-multi-selection-inspector__card {
3064 3410 padding: 16px;
3065 3411 }
3066 3412
3067 3413 .block-editor-multi-selection-inspector__card-title {
3068 - font-weight: 499;
3414 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3069 3415 }
3070 3416
3417 +.block-editor-multi-selection-inspector__card-description {
3418 + color: #757575;
3419 +}
3420 +
3071 3421 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3072 3422 margin-left: -2px;
3073 3423 padding: 0 3px;
3074 3424 width: 36px;
@@ -3074,8 +3424,13 @@
3074 3424 width: 36px;
3075 3425 height: 24px;
3076 3426 }
3077 3427
3428 +.block-editor-plain-text {
3429 + width: 100%;
3430 + field-sizing: content;
3431 +}
3432 +
3078 3433 .block-editor-responsive-block-control {
3079 3434 margin-bottom: 28px;
3080 3435 border-bottom: 1px solid #ccc;
3081 3436 padding-bottom: 14px;
@@ -3091,9 +3446,9 @@
3091 3446 margin-left: -3px;
3092 3447 }
3093 3448
3094 3449 .block-editor-responsive-block-control__label {
3095 - font-weight: 600;
3450 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3096 3451 margin-bottom: 0.6em;
3097 3452 margin-left: -3px;
3098 3453 }
3099 3454
@@ -3113,9 +3468,9 @@
3113 3468 overflow: hidden;
3114 3469 padding: 0;
3115 3470 position: absolute;
3116 3471 width: 1px;
3117 - word-wrap: normal !important;
3472 + overflow-wrap: normal !important;
3118 3473 word-break: normal !important;
3119 3474 }
3120 3475
3121 3476 .preset-input-control__wrapper > * {
@@ -3170,9 +3525,9 @@
3170 3525 top: -9999em;
3171 3526 }
3172 3527 .block-editor-skip-to-selected-block:focus {
3173 3528 font-size: 14px;
3174 - font-weight: 600;
3529 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3175 3530 background: #f1f1f1;
3176 3531 z-index: 100000;
3177 3532 }
3178 3533
@@ -3368,8 +3723,13 @@
3368 3723 padding: 16px;
3369 3724 border-top: 1px solid #1e1e1e;
3370 3725 }
3371 3726
3727 +.block-editor-url-popover__link-container-content {
3728 + display: flex;
3729 + align-items: center;
3730 +}
3731 +
3372 3732 .block-editor-url-popover__link-editor,
3373 3733 .block-editor-url-popover__link-viewer {
3374 3734 display: flex;
3375 3735 }
@@ -3407,35 +3767,8 @@
3407 3767 color: #757575;
3408 3768 font-size: 12px;
3409 3769 }
3410 3770
3411 -/**
3412 - * ItemGroup-like border styles for the background panel's ToolsPanelItems.
3413 - * Replicates the separated border of the `ItemGroup` component while
3414 - * allowing for hidden placeholder items (same approach as the color panel).
3415 - */
3416 -.block-editor-background-panel__item {
3417 - padding: 0;
3418 - max-width: 100%;
3419 - position: relative;
3420 - border-left: 1px solid #ddd;
3421 - border-right: 1px solid #ddd;
3422 - border-bottom: 1px solid #ddd;
3423 -}
3424 -.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
3425 - border-top-left-radius: 2px;
3426 - border-top-right-radius: 2px;
3427 - border-top: 1px solid #ddd;
3428 -}
3429 -.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
3430 - border-bottom-left-radius: 2px;
3431 - border-bottom-right-radius: 2px;
3432 -}
3433 -.block-editor-background-panel__item > div,
3434 -.block-editor-background-panel__item > div > button {
3435 - border-radius: inherit;
3436 -}
3437 -
3438 3771 .background-block-support-panel {
3439 3772 /* Increased specificity required to remove the slot wrapper's row gap */
3440 3773 }
3441 3774 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
@@ -3441,173 +3774,8 @@
3441 3774 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3442 3775 row-gap: 0;
3443 3776 }
3444 3777
3445 -.block-editor-content-only-controls__link {
3446 - width: 100%;
3447 - box-shadow: inset 0 0 0 1px #ccc;
3448 -}
3449 -.block-editor-content-only-controls__link:focus:not(:disabled) {
3450 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3451 -}
3452 -
3453 -.block-editor-content-only-controls__link-row {
3454 - align-items: center;
3455 -}
3456 -
3457 -.block-editor-content-only-controls__link-title {
3458 - width: 100%;
3459 - white-space: nowrap;
3460 - text-overflow: ellipsis;
3461 - overflow: hidden;
3462 -}
3463 -
3464 -.block-editor-content-only-controls__media {
3465 - width: 100%;
3466 - box-shadow: inset 0 0 0 1px #ccc;
3467 - padding-right: 32px;
3468 -}
3469 -.block-editor-content-only-controls__media:focus:not(:disabled) {
3470 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3471 -}
3472 -
3473 -.block-editor-content-only-controls__media-replace-flow {
3474 - display: block;
3475 -}
3476 -
3477 -.block-editor-content-only-controls__media-row {
3478 - align-items: center;
3479 -}
3480 -
3481 -.block-editor-content-only-controls__media-placeholder {
3482 - width: 24px;
3483 - height: 24px;
3484 - border-radius: 2px;
3485 - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3486 - display: inline-block;
3487 - padding: 0;
3488 - background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3489 -}
3490 -
3491 -.block-editor-content-only-controls__media-title {
3492 - width: 100%;
3493 - white-space: nowrap;
3494 - text-overflow: ellipsis;
3495 - overflow: hidden;
3496 -}
3497 -
3498 -.block-editor-content-only-controls__media-thumbnail {
3499 - width: 20px;
3500 - height: 20px;
3501 - border-radius: 2px;
3502 - align-self: center;
3503 - overflow: hidden;
3504 -}
3505 -.block-editor-content-only-controls__media-thumbnail img {
3506 - width: 100% !important;
3507 - height: 100% !important;
3508 - object-fit: cover;
3509 -}
3510 -
3511 -.block-editor-content-only-controls {
3512 - position: relative;
3513 -}
3514 -
3515 -.block-editor-content-only-controls__media-reset {
3516 - position: absolute;
3517 - right: 0;
3518 - top: 8px;
3519 - margin: auto 8px auto;
3520 - opacity: 0;
3521 - border-radius: 2px;
3522 -}
3523 -@media not (prefers-reduced-motion) {
3524 - .block-editor-content-only-controls__media-reset {
3525 - transition: opacity 0.1s ease-in-out;
3526 - }
3527 -}
3528 -.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 {
3529 - opacity: 1;
3530 -}
3531 -@media (hover: none) {
3532 - .block-editor-content-only-controls__media-reset {
3533 - opacity: 1;
3534 - }
3535 -}
3536 -
3537 -.block-editor-content-only-controls__rich-text {
3538 - width: 100%;
3539 - margin: 0;
3540 - background: #fff;
3541 - color: #1e1e1e;
3542 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3543 - padding: 6px 8px;
3544 - /* Fonts smaller than 16px causes mobile safari to zoom. */
3545 - font-size: 16px;
3546 - /* Override core line-height. To be reviewed. */
3547 - line-height: normal;
3548 - box-shadow: 0 0 0 transparent;
3549 - border-radius: 2px;
3550 - border: 1px solid #949494;
3551 -}
3552 -@media not (prefers-reduced-motion) {
3553 - .block-editor-content-only-controls__rich-text {
3554 - transition: box-shadow 0.1s linear;
3555 - }
3556 -}
3557 -@media (min-width: 600px) {
3558 - .block-editor-content-only-controls__rich-text {
3559 - font-size: 13px;
3560 - /* Override core line-height. To be reviewed. */
3561 - line-height: normal;
3562 - }
3563 -}
3564 -.block-editor-content-only-controls__rich-text:focus {
3565 - border-color: var(--wp-admin-theme-color, #3858e9);
3566 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
3567 - outline: 2px solid transparent;
3568 -}
3569 -.block-editor-content-only-controls__rich-text::placeholder {
3570 - color: rgba(30, 30, 30, 0.62);
3571 -}
3572 -.block-editor-content-only-controls__rich-text {
3573 - border-color: #949494;
3574 -}
3575 -.block-editor-content-only-controls__rich-text::placeholder {
3576 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3577 -}
3578 -.block-editor-content-only-controls__rich-text {
3579 - min-height: 40px;
3580 - padding: 12px;
3581 -}
3582 -
3583 -.block-editor-block-fields__container {
3584 - padding: 0 16px 16px;
3585 -}
3586 -.block-editor-block-fields__container:first-of-type {
3587 - padding-block-start: 8px;
3588 - /*
3589 - * Add border for the entire content controls and remove the similar border
3590 - * for tools panel.
3591 - */
3592 - border-block-start: 1px solid #e0e0e0;
3593 -}
3594 -
3595 -.block-editor-block-fields__header {
3596 - padding: 8px 0;
3597 - margin-bottom: 4px;
3598 -}
3599 -
3600 -.block-editor-block-fields__header-icon {
3601 - flex: 0 0 24px;
3602 -}
3603 -
3604 -.block-editor-block-fields__header-title {
3605 - flex: 1;
3606 - /* Override the default margin on a h2 element. */
3607 - margin: 0 !important;
3608 -}
3609 -
3610 3778 .block-editor-hooks__block-hooks {
3611 3779 /**
3612 3780 * Un-reverse the flex direction for the toggle's label.
3613 3781 */
@@ -3641,17 +3809,14 @@
3641 3809 }
3642 3810 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3643 3811 row-gap: 0;
3644 3812 }
3645 -.color-block-support-panel {
3646 - /**
3647 - * After converting PanelColorGradientSettings to render as a ToolsPanel
3648 - * we need to remove the top margin when wrapping inner content due to
3649 - * rendering via SlotFills.
3650 - */
3813 +
3814 +.elements-block-support-panel {
3815 + /* Increased specificity required to remove the slot wrapper's row gap */
3651 3816 }
3652 -.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
3653 - margin-top: 0;
3817 +.elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
3818 + row-gap: 0;
3654 3819 }
3655 3820
3656 3821 .dimensions-block-support-panel .single-column {
3657 3822 grid-column: span 1;
@@ -3666,8 +3831,12 @@
3666 3831 font-size: 12px;
3667 3832 margin-bottom: 0;
3668 3833 }
3669 3834
3835 +.layout-block-support-panel .block-editor-hooks__flex-layout-controls {
3836 + grid-column: 1/-1;
3837 +}
3838 +
3670 3839 .block-editor-hooks__flex-layout-justification-controls,
3671 3840 .block-editor-hooks__flex-layout-orientation-controls {
3672 3841 margin-bottom: 12px;
3673 3842 }
@@ -3940,9 +4109,9 @@
3940 4109 }
3941 4110 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
3942 4111 display: grid;
3943 4112 grid-template-columns: 1fr 1fr;
3944 - grid-gap: 12px;
4113 + gap: 12px;
3945 4114 }
3946 4115 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
3947 4116 margin-bottom: 0;
3948 4117 }
@@ -3954,9 +4123,9 @@
3954 4123 display: inline-block;
3955 4124 background: none;
3956 4125 border: none;
3957 4126 padding: 0;
3958 - 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;
3959 4128 font-size: 13px;
3960 4129 line-height: 0;
3961 4130 }
3962 4131 @media (min-width: 782px) {
@@ -4090,9 +4259,9 @@
4090 4259 margin: 0 12px 0 0;
4091 4260 color: #757575;
4092 4261 text-transform: uppercase;
4093 4262 font-size: 11px;
4094 - font-weight: 499;
4263 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4095 4264 }
4096 4265
4097 4266 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4098 4267 height: 36px;
@@ -4128,12 +4297,8 @@
4128 4297 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4129 4298 margin-right: 8px;
4130 4299 }
4131 4300
4132 -.block-editor-inserter__preview-container__popover {
4133 - top: 16px !important;
4134 -}
4135 -
4136 4301 .block-editor-inserter__preview-container {
4137 4302 display: none;
4138 4303 width: 280px;
4139 4304 padding: 16px;
@@ -4274,9 +4439,9 @@
4274 4439
4275 4440 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4276 4441 display: grid;
4277 4442 grid-template-columns: 1fr 1fr;
4278 - grid-gap: 8px;
4443 + gap: 8px;
4279 4444 }
4280 4445 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4281 4446 margin-bottom: 0;
4282 4447 }
@@ -4291,59 +4456,54 @@
4291 4456 .block-editor-inserter__popover.is-quick > .components-popover__content {
4292 4457 padding: 0;
4293 4458 }
4294 4459
4295 -.block-editor-inserter__quick-inserter-expand.components-button {
4296 - display: block;
4297 - background: #1e1e1e;
4298 - color: #fff;
4460 +.block-editor-inserter__quick-inserter-expand {
4461 + padding: 0 16px 16px;
4462 +}
4463 +
4464 +.block-editor-inserter__quick-inserter-expand-toggle {
4299 4465 width: 100%;
4300 - border-radius: 0;
4466 + justify-content: center;
4301 4467 }
4302 -.block-editor-inserter__quick-inserter-expand.components-button:hover {
4303 - color: #fff;
4304 -}
4305 -.block-editor-inserter__quick-inserter-expand.components-button:active {
4306 - color: #ccc;
4307 -}
4308 -.block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) {
4309 - box-shadow: none;
4310 - background: var(--wp-admin-theme-color);
4311 - border-color: var(--wp-admin-theme-color);
4312 -}
4313 4468
4314 4469 .block-editor-block-patterns-explorer__sidebar {
4315 - position: absolute;
4316 - top: 72px;
4317 - left: 0;
4318 - bottom: 0;
4319 - width: 280px;
4320 - padding: 24px 24px 24px;
4321 - overflow-x: visible;
4322 - overflow-y: auto;
4470 + padding-bottom: 24px;
4323 4471 }
4324 -.block-editor-block-patterns-explorer__sidebar__categories-list__item {
4325 - display: block;
4326 - width: 100%;
4327 - height: 48px;
4328 - 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 + }
4329 4483 }
4330 -.block-editor-block-patterns-explorer__search {
4331 - margin-bottom: 32px;
4484 +
4485 +@media (min-width: 782px) {
4486 + .block-editor-block-patterns-explorer__panel {
4487 + margin-inline-start: 280px;
4488 + }
4332 4489 }
4333 -.block-editor-block-patterns-explorer__search-results-count {
4334 - padding-bottom: 32px;
4490 +
4491 +.block-editor-block-patterns-explorer__no-results {
4492 + padding: 32px;
4493 + text-align: center;
4335 4494 }
4495 +
4336 4496 .block-editor-block-patterns-explorer__list {
4337 - margin-left: 280px;
4338 4497 padding: 24px 0 32px;
4339 4498 }
4340 4499 .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4341 4500 width: 380px;
4342 4501 }
4502 +
4343 4503 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4344 4504 display: grid;
4345 - grid-gap: 32px;
4505 + gap: 32px;
4346 4506 grid-template-columns: repeat(1, 1fr);
4347 4507 margin-bottom: 16px;
4348 4508 }
4349 4509 @media (min-width: 1080px) {
@@ -4365,9 +4525,9 @@
4365 4525 max-height: 800px;
4366 4526 }
4367 4527
4368 4528 .components-heading.block-editor-inserter__patterns-category-panel-title {
4369 - font-weight: 499;
4529 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4370 4530 }
4371 4531
4372 4532 .block-editor-inserter__patterns-explore-button.components-button,
4373 4533 .block-editor-inserter__media-library-button.components-button {
@@ -4376,17 +4536,26 @@
4376 4536 margin-top: 16px;
4377 4537 width: 100%;
4378 4538 }
4379 4539
4540 +.block-editor-inserter__media-mobile-screen {
4541 + display: flex;
4542 + flex-direction: column;
4543 + align-self: stretch;
4544 +}
4545 +
4380 4546 .block-editor-inserter__media-panel {
4381 - min-height: 100%;
4382 4547 padding: 0 16px;
4383 4548 display: flex;
4384 4549 flex-direction: column;
4550 + flex: 1;
4551 + min-height: 0;
4385 4552 }
4386 4553 @media (min-width: 782px) {
4387 4554 .block-editor-inserter__media-panel {
4388 4555 padding: 0;
4556 + flex: 0 1 auto;
4557 + min-height: 100%;
4389 4558 }
4390 4559 }
4391 4560 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
4392 4561 height: 100%;
@@ -4403,9 +4572,68 @@
4403 4572 margin-bottom: 0;
4404 4573 padding: 16px 24px 16px;
4405 4574 }
4406 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 +}
4407 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 +
4408 4636 .block-editor-inserter__media-list__list-item {
4409 4637 position: relative;
4410 4638 cursor: var(--wpds-cursor-control, pointer);
4411 4639 margin-bottom: 24px;
@@ -4418,9 +4646,9 @@
4418 4646 }
4419 4647 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
4420 4648 outline-color: rgba(0, 0, 0, 0.3);
4421 4649 }
4422 -.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 {
4423 4651 display: block;
4424 4652 }
4425 4653 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
4426 4654 position: absolute;
@@ -4602,12 +4830,12 @@
4602 4830 flex-direction: column;
4603 4831 align-items: start;
4604 4832 }
4605 4833 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4606 - font-weight: 600;
4834 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4607 4835 }
4608 4836 .block-editor-block-visibility-modal__options-icon--checked {
4609 - fill: #ddd;
4837 + color: #ddd;
4610 4838 }
4611 4839 .block-editor-block-visibility-modal__sub-options {
4612 4840 width: 100%;
4613 4841 padding-inline-start: 12px;
@@ -4617,11 +4845,52 @@
4617 4845 color: #757575;
4618 4846 }
4619 4847
4620 4848 .block-editor-block-visibility-info {
4621 - padding-top: 4px;
4622 - padding-bottom: 4px;
4623 4849 margin: 0 16px 16px;
4624 - display: flex;
4625 - align-items: center;
4626 - 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;
4627 4896 }