PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/block-editor/style.css +658 -389 23.2.1 → 24.1.0 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 }