PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/block-editor/style-rtl.css +656 -389 23.2.2 → 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-right: 16px;
@@ -281,13 +295,8 @@
281 295 }
282 296 .block-editor-block-icon.has-colors svg {
283 297 fill: currentColor;
284 298 }
285 -@media (forced-colors: active) {
286 - .block-editor-block-icon.has-colors svg {
287 - fill: CanvasText;
288 - }
289 -}
290 299 .block-editor-block-icon svg {
291 300 min-width: 20px;
292 301 min-height: 20px;
293 302 max-width: 24px;
@@ -330,8 +339,21 @@
330 339 padding: 32px 16px;
331 340 text-align: center;
332 341 }
333 342
343 +.block-editor-block-inspector__state-badges {
344 + display: flex;
345 + align-items: center;
346 + flex-wrap: wrap;
347 + gap: 8px;
348 + padding: 8px 16px;
349 + margin-top: -16px;
350 +}
351 +
352 +.block-editor-block-inspector__state-badges-text {
353 + white-space: nowrap;
354 +}
355 +
334 356 .block-editor-block-inspector__no-block-tools {
335 357 border-top: 1px solid #ddd;
336 358 }
337 359
@@ -418,8 +440,18 @@
418 440 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
419 441 color: #fff;
420 442 background: var(--wp-admin-theme-color);
421 443 }
444 +@media not (prefers-reduced-motion) {
445 + .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon svg,
446 + .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon svg {
447 + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
448 + }
449 +}
450 +.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg,
451 +.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg {
452 + transform: rotate(-45deg);
453 +}
422 454
423 455 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
424 456 background: var(--wp-admin-theme-color);
425 457 }
@@ -448,8 +480,14 @@
448 480 }
449 481 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent {
450 482 margin-right: 0;
451 483 }
484 +.components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent:has(.block-editor-block-parent-selector__inserter) {
485 + margin-right: calc(48px + 24px + 12px + 8px + 2 * 1px);
486 +}
487 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent:has(.block-editor-block-parent-selector__inserter) {
488 + margin-right: 0;
489 +}
452 490 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar {
453 491 overflow: visible;
454 492 }
455 493 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar-group,
@@ -470,8 +508,67 @@
470 508 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
471 509 position: absolute;
472 510 right: calc(-48px - 8px - 1px);
473 511 }
512 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) {
513 + right: calc(-48px - 24px - 12px - 8px - 3 * 1px);
514 + border: 1px solid #1e1e1e;
515 + border-radius: 2px;
516 + background-color: #fff;
517 +}
518 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) > .components-toolbar-group:last-child {
519 + border-left: none;
520 +}
521 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) .block-editor-block-parent-selector__button {
522 + border: none;
523 + background: none;
524 +}
525 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon {
526 + color: #fff;
527 + background: transparent;
528 +}
529 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon::after {
530 + content: "";
531 + position: absolute;
532 + z-index: -1;
533 + top: 50%;
534 + right: 50%;
535 + transform: translate(50%, -50%);
536 + width: 24px;
537 + height: 24px;
538 + border-radius: 2px;
539 + background: #1e1e1e;
540 +}
541 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover {
542 + color: #fff;
543 +}
544 +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover::after {
545 + background: var(--wp-admin-theme-color);
546 +}
547 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon {
548 + width: auto;
549 + padding: 0 12px;
550 + color: inherit;
551 +}
552 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon svg {
553 + display: none;
554 +}
555 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon::after {
556 + content: attr(aria-label);
557 + position: static;
558 + transform: none;
559 + width: auto;
560 + height: auto;
561 + border-radius: 0;
562 + background: none;
563 + white-space: nowrap;
564 +}
565 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover {
566 + color: var(--wp-admin-theme-color);
567 +}
568 +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover::after {
569 + background: none;
570 +}
474 571 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::before {
475 572 content: "";
476 573 }
477 574 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after {
@@ -537,9 +634,9 @@
537 634 .block-editor-block-lock-modal__options-all {
538 635 padding: 12px 0;
539 636 }
540 637 .block-editor-block-lock-modal__options-all .components-checkbox-control__label {
541 - font-weight: 600;
638 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
542 639 }
543 640
544 641 .block-editor-block-lock-modal__checklist-item {
545 642 display: flex;
@@ -551,9 +648,9 @@
551 648 }
552 649 .block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
553 650 flex-shrink: 0;
554 651 margin-left: 12px;
555 - fill: #1e1e1e;
652 + color: #1e1e1e;
556 653 }
557 654 .block-editor-block-lock-modal__checklist-item:hover {
558 655 background-color: #f0f0f0;
559 656 border-radius: 2px;
@@ -656,13 +753,14 @@
656 753 height: auto !important;
657 754 }
658 755
659 756 .block-editor-block-card__title {
660 - font-weight: 499;
757 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
661 758 display: flex;
662 759 align-items: center;
663 760 flex-wrap: wrap;
664 761 gap: 4px 8px;
762 + overflow-wrap: anywhere;
665 763 }
666 764 .block-editor-block-card__title.block-editor-block-card__title {
667 765 font-size: 13px;
668 766 line-height: 1.4;
@@ -787,9 +885,9 @@
787 885 min-width: 18px;
788 886 min-height: 18px;
789 887 }
790 888 .block-editor-block-draggable-chip .components-flex__item {
791 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
889 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
792 890 font-size: 13px;
793 891 }
794 892
795 893 .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
@@ -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-left: 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: right;
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-right: 1px solid #ddd;
@@ -1516,20 +1599,19 @@
1516 1599 border-right: 1px solid #ddd;
1517 1600 border-left: 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-right-radius: 2px;
1523 1605 border-top-left-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-right-radius: 2px;
1528 1610 border-bottom-left-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 left: 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 + left: 28px;
1687 +}
1586 1688
1689 +.block-editor-panel-color-gradient-settings__contrast-warning {
1690 + position: absolute;
1691 + left: 0;
1692 + top: 8px;
1693 + margin: auto 8px auto;
1694 +}
1695 +.block-editor-panel-color-gradient-settings__contrast-warning.block-editor-panel-color-gradient-settings__contrast-warning {
1696 + border-radius: 2px;
1697 +}
1698 +
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 left: 0;
1673 1805 top: 8px;
@@ -1749,8 +1881,187 @@
1749 1881 opacity: 1;
1750 1882 }
1751 1883 }
1752 1884
1885 +.block-editor-global-styles__text-shadow {
1886 + width: 260px;
1887 + padding: 8px;
1888 +}
1889 +
1890 +.block-editor-global-styles__text-shadow-preview {
1891 + display: flex;
1892 + align-items: center;
1893 + justify-content: center;
1894 + height: 80px;
1895 + border: #ddd 1px solid;
1896 + border-radius: 2px;
1897 + font-size: 24px;
1898 + margin-bottom: 16px;
1899 + background-image: repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
1900 + background-position: 0 0, 8px 8px;
1901 + background-size: 16px 16px;
1902 +}
1903 +
1904 +.block-editor-global-styles__text-shadow-list-item {
1905 + justify-content: space-between;
1906 + gap: 8px;
1907 + width: 100%;
1908 +}
1909 +.block-editor-global-styles__text-shadow-list-item:not(.is-active) svg {
1910 + opacity: 0;
1911 +}
1912 +
1913 +.block-editor-global-styles__text-shadow-dropdown {
1914 + display: block;
1915 + padding: 0;
1916 + position: relative;
1917 + border: 1px solid #ddd;
1918 + border-radius: 2px;
1919 +}
1920 +
1921 +.block-editor-global-styles__text-shadow-dropdown-toggle {
1922 + width: 100%;
1923 + padding: 8px;
1924 +}
1925 +.block-editor-global-styles__text-shadow-dropdown-toggle.is-open {
1926 + background-color: #f0f0f0;
1927 +}
1928 +
1929 +.block-editor-global-styles__text-shadow-remove-button {
1930 + position: absolute;
1931 + left: 8px;
1932 + top: 8px;
1933 + opacity: 0;
1934 +}
1935 +@media not (prefers-reduced-motion) {
1936 + .block-editor-global-styles__text-shadow-remove-button {
1937 + transition: opacity 0.1s ease-in-out;
1938 + }
1939 +}
1940 +.block-editor-global-styles__text-shadow-dropdown:hover .block-editor-global-styles__text-shadow-remove-button, .block-editor-global-styles__text-shadow-remove-button:focus, .block-editor-global-styles__text-shadow-remove-button:hover {
1941 + opacity: 1;
1942 +}
1943 +@media (hover: none) {
1944 + .block-editor-global-styles__text-shadow-remove-button {
1945 + opacity: 1;
1946 + }
1947 +}
1948 +
1949 +.is-inherited-from-global-styles .components-base-control__label,
1950 +.is-inherited-from-global-styles .components-input-control__label {
1951 + text-decoration-line: underline;
1952 + text-decoration-style: dotted;
1953 + text-decoration-thickness: 1px;
1954 + text-underline-offset: 0.2em;
1955 +}
1956 +.is-inherited-from-global-styles .block-editor-panel-color-gradient-settings__color-name,
1957 +.is-inherited-from-global-styles .block-editor-global-styles-background-panel__inspector-media-replace-title,
1958 +.is-inherited-from-global-styles .block-editor-panel-duotone-settings__label {
1959 + border-bottom: 1px dotted currentColor;
1960 +}
1961 +
1962 +.has-local-override-from-global-styles {
1963 + position: relative;
1964 +}
1965 +
1966 +.global-styles-inheritance-affordance {
1967 + position: absolute;
1968 + inset-block-start: 0;
1969 + inset-inline-end: 0;
1970 + z-index: 1;
1971 + display: flex;
1972 + align-items: center;
1973 + justify-content: center;
1974 + pointer-events: none;
1975 + height: 16px;
1976 +}
1977 +.global-styles-inheritance-affordance--offset-toggle {
1978 + inset-inline-end: 32px;
1979 +}
1980 +.global-styles-inheritance-affordance .has-local-override-from-global-styles__reset {
1981 + pointer-events: auto;
1982 + margin-inline-start: 0 !important;
1983 +}
1984 +
1985 +.has-local-override-from-global-styles__reset {
1986 + display: inline-flex !important;
1987 + align-items: center;
1988 + justify-content: center;
1989 + vertical-align: middle;
1990 + position: relative;
1991 + margin-inline-start: 6px;
1992 + min-width: 14px !important;
1993 + width: 14px !important;
1994 + height: 14px !important;
1995 + padding: 0 !important;
1996 + border-radius: 50% !important;
1997 + background: transparent !important;
1998 + box-shadow: none !important;
1999 + overflow: hidden;
2000 + text-transform: none;
2001 + letter-spacing: normal;
2002 + cursor: var(--wpds-cursor-control, pointer);
2003 +}
2004 +.has-local-override-from-global-styles__reset:hover, .has-local-override-from-global-styles__reset:focus {
2005 + background: transparent !important;
2006 +}
2007 +.has-local-override-from-global-styles__reset:hover .has-local-override-from-global-styles__dot, .has-local-override-from-global-styles__reset:focus .has-local-override-from-global-styles__dot {
2008 + display: none;
2009 +}
2010 +.has-local-override-from-global-styles__reset:hover .has-local-override-from-global-styles__reset-icon, .has-local-override-from-global-styles__reset:focus .has-local-override-from-global-styles__reset-icon {
2011 + display: block;
2012 +}
2013 +.has-local-override-from-global-styles__reset:focus-visible {
2014 + outline: 1.5px solid var(--wp-admin-theme-color, #007cba);
2015 + outline-offset: 1px;
2016 +}
2017 +.has-local-override-from-global-styles__reset.block-editor-panel-color-gradient-settings__reset {
2018 + position: absolute;
2019 + justify-content: center;
2020 + top: 50%;
2021 + transform: translateY(-50%);
2022 + margin-block: 0;
2023 + margin-inline-start: 0;
2024 + opacity: 1;
2025 +}
2026 +.has-local-override-from-global-styles__reset.block-editor-global-styles__shadow-editor__remove-button {
2027 + position: absolute;
2028 + justify-content: center;
2029 + inset-inline-end: 8px;
2030 + top: 50%;
2031 + transform: translateY(-50%);
2032 + margin-block: 0;
2033 + margin-inline-start: 0;
2034 + opacity: 1;
2035 +}
2036 +.has-local-override-from-global-styles__reset.block-editor-panel-duotone-settings__reset {
2037 + position: absolute;
2038 + justify-content: center;
2039 + inset-inline-end: 8px;
2040 + top: 50%;
2041 + transform: translateY(-50%);
2042 + margin-block: 0;
2043 + margin-inline-start: 0;
2044 + opacity: 1;
2045 +}
2046 +
2047 +.has-local-override-from-global-styles__dot {
2048 + display: block;
2049 + width: 8px;
2050 + height: 8px;
2051 + background-color: var(--wp-admin-theme-color, #007cba);
2052 + border-radius: 50%;
2053 +}
2054 +
2055 +.has-local-override-from-global-styles__reset-icon {
2056 + display: none;
2057 + position: absolute;
2058 + top: 50%;
2059 + right: 50%;
2060 + transform: translate(50%, -50%);
2061 + color: var(--wp-admin-theme-color, #007cba);
2062 +}
2063 +
1753 2064 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
1754 2065 z-index: 30;
1755 2066 }
1756 2067 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
@@ -1855,16 +2166,8 @@
1855 2166 animation: components-button__appear-animation 0.1s ease;
1856 2167 animation-fill-mode: forwards;
1857 2168 }
1858 2169 }
1859 -.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 {
1860 - box-shadow: none;
1861 - outline: none;
1862 -}
1863 -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
1864 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1865 - outline: 2px solid transparent;
1866 -}
1867 2170
1868 2171 .block-editor-grid-item-mover__move-vertical-button-container {
1869 2172 display: flex;
1870 2173 position: relative;
@@ -1978,8 +2281,27 @@
1978 2281 position: absolute;
1979 2282 left: 0;
1980 2283 }
1981 2284
2285 +.wp-block-image__crop-area {
2286 + position: relative;
2287 + max-width: 100%;
2288 + width: 100%;
2289 + overflow: hidden;
2290 +}
2291 +.wp-block-image__crop-area .reactEasyCrop_Container {
2292 + pointer-events: auto;
2293 +}
2294 +.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
2295 + border: none;
2296 + border-radius: 0;
2297 +}
2298 +
2299 +.wp-block-image__zoom .components-popover__content {
2300 + min-width: 260px;
2301 + overflow: visible !important;
2302 +}
2303 +
1982 2304 .block-editor-block-types-list__list-item {
1983 2305 display: block;
1984 2306 width: 33.33%;
1985 2307 padding: 0;
@@ -2009,9 +2331,10 @@
2009 2331 align-items: stretch;
2010 2332 justify-content: center;
2011 2333 cursor: var(--wpds-cursor-control, pointer);
2012 2334 background: transparent;
2013 - word-break: break-word;
2335 + word-break: normal;
2336 + overflow-wrap: break-word;
2014 2337 }
2015 2338 @media not (prefers-reduced-motion) {
2016 2339 .components-button.block-editor-block-types-list__item {
2017 2340 transition: all 0.05s ease-in-out;
@@ -2043,17 +2366,8 @@
2043 2366 opacity: 0.04;
2044 2367 background: var(--wp-admin-theme-color);
2045 2368 pointer-events: none;
2046 2369 }
2047 -.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active {
2048 - color: #fff;
2049 - background: #1e1e1e;
2050 - outline: 2px solid transparent;
2051 - outline-offset: -2px;
2052 -}
2053 -.components-button.block-editor-block-types-list__item:not(:disabled):focus {
2054 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2055 -}
2056 2370
2057 2371 .block-editor-block-types-list__item-icon {
2058 2372 padding: 12px 20px;
2059 2373 color: #1e1e1e;
@@ -2226,9 +2540,9 @@
2226 2540 display: inline-block;
2227 2541 width: 100%;
2228 2542 }
2229 2543 .block-editor-link-control__search-item .components-menu-item__item mark {
2230 - font-weight: 600;
2544 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2231 2545 color: inherit;
2232 2546 background-color: transparent;
2233 2547 }
2234 2548 .block-editor-link-control__search-item .components-menu-item__shortcut {
@@ -2275,9 +2589,9 @@
2275 2589 width: 32px;
2276 2590 max-height: 32px;
2277 2591 }
2278 2592 .block-editor-link-control__preview .block-editor-link-control__preview-title {
2279 - line-height: 1.1;
2593 + line-height: var(--wpds-typography-line-height-sm, 20px);
2280 2594 }
2281 2595 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
2282 2596 box-shadow: none;
2283 2597 }
@@ -2286,14 +2600,14 @@
2286 2600 outline: 2px solid transparent;
2287 2601 text-decoration: none;
2288 2602 }
2289 2603 .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2290 - font-weight: 600;
2604 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2291 2605 color: inherit;
2292 2606 background-color: transparent;
2293 2607 }
2294 2608 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2295 - font-weight: normal;
2609 + font-weight: 400;
2296 2610 }
2297 2611 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2298 2612 position: absolute;
2299 2613 width: 1px;
@@ -2300,9 +2614,9 @@
2300 2614 height: 1px;
2301 2615 padding: 0;
2302 2616 margin: -1px;
2303 2617 overflow: hidden;
2304 - clip: rect(0, 0, 0, 0);
2618 + clip-path: inset(50%);
2305 2619 border: 0;
2306 2620 }
2307 2621
2308 2622 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
@@ -2444,9 +2758,8 @@
2444 2758 .link-preview-button.components-button {
2445 2759 width: 100%;
2446 2760 height: auto;
2447 2761 padding: 12px;
2448 - box-shadow: inset 0 0 0 1px #949494;
2449 2762 border-color: #949494;
2450 2763 }
2451 2764
2452 2765 .link-preview-button__image-container {
@@ -2484,9 +2797,9 @@
2484 2797 }
2485 2798
2486 2799 .link-preview-button__title {
2487 2800 margin-top: 4px;
2488 - font-weight: 500;
2801 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2489 2802 color: #1e1e1e;
2490 2803 display: block;
2491 2804 }
2492 2805
@@ -2521,8 +2834,11 @@
2521 2834 .block-editor-list-view-leaf {
2522 2835 position: relative;
2523 2836 transform: translateY(0);
2524 2837 }
2838 +.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
2839 + z-index: 1;
2840 +}
2525 2841 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2526 2842 cursor: grab;
2527 2843 }
2528 2844 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
@@ -2533,13 +2849,8 @@
2533 2849 }
2534 2850 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2535 2851 fill: currentColor;
2536 2852 }
2537 -@media (forced-colors: active) {
2538 - .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2539 - fill: CanvasText;
2540 - }
2541 -}
2542 2853 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2543 2854 color: inherit;
2544 2855 }
2545 2856 .block-editor-list-view-leaf.is-selected td {
@@ -2551,23 +2862,45 @@
2551 2862 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:hover, .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus,
2552 2863 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2553 2864 color: var(--wp-block-synced-color);
2554 2865 }
2555 -.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2556 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2866 +.block-editor-list-view-leaf.is-synced .block-editor-list-view-block-contents:focus::after {
2867 + --focus-color: var(--wp-block-synced-color);
2557 2868 }
2869 +.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus {
2870 + --focus-color: var(--wp-block-synced-color);
2871 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
2872 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2873 +}
2558 2874 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2559 2875 color: #fff;
2560 2876 }
2561 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2562 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2877 +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2878 + --focus-color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
2879 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
2880 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2881 + outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2563 2882 }
2564 -.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2565 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
2883 +@media (forced-colors: active) {
2884 + .block-editor-list-view-leaf.is-selected td, .block-editor-list-view-leaf.is-selected.is-synced td {
2885 + background: SelectedItem;
2886 + }
2887 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
2888 + color: SelectedItemText;
2889 + }
2890 + .block-editor-list-view-leaf.is-selected svg, .block-editor-list-view-leaf.is-selected .block-editor-block-icon.has-colors svg {
2891 + fill: SelectedItemText;
2892 + }
2893 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__title {
2894 + forced-color-adjust: none;
2895 + }
2896 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2897 + --focus-color: CanvasText;
2898 + }
2899 + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2900 + --focus-color: SelectedItemText;
2901 + }
2566 2902 }
2567 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2568 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2569 -}
2570 2903 .block-editor-list-view-leaf.is-first-selected td:first-child {
2571 2904 border-top-right-radius: 2px;
2572 2905 }
2573 2906 .block-editor-list-view-leaf.is-first-selected td:last-child {
@@ -2689,8 +3022,9 @@
2689 3022 }
2690 3023 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2691 3024 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2692 3025 box-shadow: none;
3026 + outline: none;
2693 3027 }
2694 3028 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2695 3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2696 3030 content: "";
@@ -2695,13 +3029,16 @@
2695 3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2696 3030 content: "";
2697 3031 position: absolute;
2698 3032 top: 0;
2699 - left: -29px;
3033 + left: -28px;
2700 3034 bottom: 0;
2701 3035 right: 0;
2702 3036 border-radius: inherit;
2703 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3037 + outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
3038 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3039 + outline-offset: 1px;
3040 + box-shadow: 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
2704 3041 z-index: 2;
2705 3042 pointer-events: none;
2706 3043 }
2707 3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
@@ -2706,13 +3043,8 @@
2706 3043 }
2707 3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2708 3045 left: 0;
2709 3046 }
2710 -.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu,
2711 -.block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
2712 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2713 - z-index: 1;
2714 -}
2715 3047 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2716 3048 opacity: 1;
2717 3049 }
2718 3050 @keyframes __wp-base-styles-fade-in {
@@ -2782,14 +3114,8 @@
2782 3114 }
2783 3115 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
2784 3116 top: -4px;
2785 3117 }
2786 -.block-editor-list-view-leaf .block-editor-block-mover-button::before {
2787 - height: 16px;
2788 - min-width: 100%;
2789 - right: 0;
2790 - left: 0;
2791 -}
2792 3118 .block-editor-list-view-leaf .block-editor-inserter__toggle {
2793 3119 background: #1e1e1e;
2794 3120 color: #fff;
2795 3121 height: 24px;
@@ -2798,8 +3124,14 @@
2798 3124 }
2799 3125 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
2800 3126 color: #fff;
2801 3127 }
3128 +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
3129 + width: 100%;
3130 +}
3131 +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper > * {
3132 + min-width: 0;
3133 +}
2802 3134 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
2803 3135 right: 2px;
2804 3136 position: relative;
2805 3137 }
@@ -2820,8 +3152,19 @@
2820 3152 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
2821 3153 position: absolute;
2822 3154 left: 0;
2823 3155 transform: translateY(-50%);
3156 + box-sizing: border-box;
3157 + max-width: 100%;
3158 + padding: 2px 8px;
3159 + border-radius: 2px;
3160 + background: #f0f0f0;
3161 + color: #2f2f2f;
3162 + font-size: 12px;
3163 + line-height: 20px;
3164 + overflow: hidden;
3165 + text-overflow: ellipsis;
3166 + white-space: nowrap;
2824 3167 }
2825 3168 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
2826 3169 background: rgba(0, 0, 0, 0.3);
2827 3170 color: #fff;
@@ -2848,8 +3191,25 @@
2848 3191 }
2849 3192 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
2850 3193 box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
2851 3194 }
3195 +.block-editor-list-view-leaf.is-disabled {
3196 + opacity: 0.2;
3197 +}
3198 +@media not (prefers-reduced-motion) {
3199 + .block-editor-list-view-leaf.is-disabled {
3200 + transition: opacity 0.1s linear;
3201 + }
3202 +}
3203 +.block-editor-list-view-leaf.is-disabled:hover {
3204 + opacity: 0.2;
3205 +}
3206 +.block-editor-list-view-leaf.is-disabled .block-editor-list-view__expander {
3207 + cursor: default;
3208 +}
3209 +.block-editor-list-view-leaf.is-disabled .block-editor-list-view-block-select-button:hover {
3210 + color: inherit;
3211 +}
2852 3212
2853 3213 .block-editor-list-view-draggable-chip {
2854 3214 opacity: 0.8;
2855 3215 }
@@ -3041,32 +3401,20 @@
3041 3401 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions {
3042 3402 padding: 8px 0 0;
3043 3403 }
3044 3404
3045 -.block-editor-media-flow__error {
3046 - padding: 0 20px 20px 20px;
3047 - max-width: 255px;
3048 -}
3049 -.block-editor-media-flow__error .components-with-notices-ui {
3050 - max-width: 255px;
3051 -}
3052 -.block-editor-media-flow__error .components-with-notices-ui .components-notice__content {
3053 - overflow: hidden;
3054 - word-wrap: break-word;
3055 -}
3056 -.block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss {
3057 - position: absolute;
3058 - left: 10px;
3059 -}
3060 -
3061 3405 .block-editor-multi-selection-inspector__card {
3062 3406 padding: 16px;
3063 3407 }
3064 3408
3065 3409 .block-editor-multi-selection-inspector__card-title {
3066 - font-weight: 499;
3410 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3067 3411 }
3068 3412
3413 +.block-editor-multi-selection-inspector__card-description {
3414 + color: #757575;
3415 +}
3416 +
3069 3417 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3070 3418 margin-right: -2px;
3071 3419 padding: 0 3px;
3072 3420 width: 36px;
@@ -3072,8 +3420,13 @@
3072 3420 width: 36px;
3073 3421 height: 24px;
3074 3422 }
3075 3423
3424 +.block-editor-plain-text {
3425 + width: 100%;
3426 + field-sizing: content;
3427 +}
3428 +
3076 3429 .block-editor-responsive-block-control {
3077 3430 margin-bottom: 28px;
3078 3431 border-bottom: 1px solid #ccc;
3079 3432 padding-bottom: 14px;
@@ -3089,9 +3442,9 @@
3089 3442 margin-right: -3px;
3090 3443 }
3091 3444
3092 3445 .block-editor-responsive-block-control__label {
3093 - font-weight: 600;
3446 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3094 3447 margin-bottom: 0.6em;
3095 3448 margin-right: -3px;
3096 3449 }
3097 3450
@@ -3111,9 +3464,9 @@
3111 3464 overflow: hidden;
3112 3465 padding: 0;
3113 3466 position: absolute;
3114 3467 width: 1px;
3115 - word-wrap: normal !important;
3468 + overflow-wrap: normal !important;
3116 3469 word-break: normal !important;
3117 3470 }
3118 3471
3119 3472 .preset-input-control__wrapper > * {
@@ -3168,9 +3521,9 @@
3168 3521 top: -9999em;
3169 3522 }
3170 3523 .block-editor-skip-to-selected-block:focus {
3171 3524 font-size: 14px;
3172 - font-weight: 600;
3525 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3173 3526 background: #f1f1f1;
3174 3527 z-index: 100000;
3175 3528 }
3176 3529
@@ -3366,8 +3719,13 @@
3366 3719 padding: 16px;
3367 3720 border-top: 1px solid #1e1e1e;
3368 3721 }
3369 3722
3723 +.block-editor-url-popover__link-container-content {
3724 + display: flex;
3725 + align-items: center;
3726 +}
3727 +
3370 3728 .block-editor-url-popover__link-editor,
3371 3729 .block-editor-url-popover__link-viewer {
3372 3730 display: flex;
3373 3731 }
@@ -3405,35 +3763,8 @@
3405 3763 color: #757575;
3406 3764 font-size: 12px;
3407 3765 }
3408 3766
3409 -/**
3410 - * ItemGroup-like border styles for the background panel's ToolsPanelItems.
3411 - * Replicates the separated border of the `ItemGroup` component while
3412 - * allowing for hidden placeholder items (same approach as the color panel).
3413 - */
3414 -.block-editor-background-panel__item {
3415 - padding: 0;
3416 - max-width: 100%;
3417 - position: relative;
3418 - border-right: 1px solid #ddd;
3419 - border-left: 1px solid #ddd;
3420 - border-bottom: 1px solid #ddd;
3421 -}
3422 -.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
3423 - border-top-right-radius: 2px;
3424 - border-top-left-radius: 2px;
3425 - border-top: 1px solid #ddd;
3426 -}
3427 -.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
3428 - border-bottom-right-radius: 2px;
3429 - border-bottom-left-radius: 2px;
3430 -}
3431 -.block-editor-background-panel__item > div,
3432 -.block-editor-background-panel__item > div > button {
3433 - border-radius: inherit;
3434 -}
3435 -
3436 3767 .background-block-support-panel {
3437 3768 /* Increased specificity required to remove the slot wrapper's row gap */
3438 3769 }
3439 3770 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
@@ -3439,173 +3770,8 @@
3439 3770 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3440 3771 row-gap: 0;
3441 3772 }
3442 3773
3443 -.block-editor-content-only-controls__link {
3444 - width: 100%;
3445 - box-shadow: inset 0 0 0 1px #ccc;
3446 -}
3447 -.block-editor-content-only-controls__link:focus:not(:disabled) {
3448 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3449 -}
3450 -
3451 -.block-editor-content-only-controls__link-row {
3452 - align-items: center;
3453 -}
3454 -
3455 -.block-editor-content-only-controls__link-title {
3456 - width: 100%;
3457 - white-space: nowrap;
3458 - text-overflow: ellipsis;
3459 - overflow: hidden;
3460 -}
3461 -
3462 -.block-editor-content-only-controls__media {
3463 - width: 100%;
3464 - box-shadow: inset 0 0 0 1px #ccc;
3465 - padding-left: 32px;
3466 -}
3467 -.block-editor-content-only-controls__media:focus:not(:disabled) {
3468 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3469 -}
3470 -
3471 -.block-editor-content-only-controls__media-replace-flow {
3472 - display: block;
3473 -}
3474 -
3475 -.block-editor-content-only-controls__media-row {
3476 - align-items: center;
3477 -}
3478 -
3479 -.block-editor-content-only-controls__media-placeholder {
3480 - width: 24px;
3481 - height: 24px;
3482 - border-radius: 2px;
3483 - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3484 - display: inline-block;
3485 - padding: 0;
3486 - background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3487 -}
3488 -
3489 -.block-editor-content-only-controls__media-title {
3490 - width: 100%;
3491 - white-space: nowrap;
3492 - text-overflow: ellipsis;
3493 - overflow: hidden;
3494 -}
3495 -
3496 -.block-editor-content-only-controls__media-thumbnail {
3497 - width: 20px;
3498 - height: 20px;
3499 - border-radius: 2px;
3500 - align-self: center;
3501 - overflow: hidden;
3502 -}
3503 -.block-editor-content-only-controls__media-thumbnail img {
3504 - width: 100% !important;
3505 - height: 100% !important;
3506 - object-fit: cover;
3507 -}
3508 -
3509 -.block-editor-content-only-controls {
3510 - position: relative;
3511 -}
3512 -
3513 -.block-editor-content-only-controls__media-reset {
3514 - position: absolute;
3515 - left: 0;
3516 - top: 8px;
3517 - margin: auto 8px auto;
3518 - opacity: 0;
3519 - border-radius: 2px;
3520 -}
3521 -@media not (prefers-reduced-motion) {
3522 - .block-editor-content-only-controls__media-reset {
3523 - transition: opacity 0.1s ease-in-out;
3524 - }
3525 -}
3526 -.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 {
3527 - opacity: 1;
3528 -}
3529 -@media (hover: none) {
3530 - .block-editor-content-only-controls__media-reset {
3531 - opacity: 1;
3532 - }
3533 -}
3534 -
3535 -.block-editor-content-only-controls__rich-text {
3536 - width: 100%;
3537 - margin: 0;
3538 - background: #fff;
3539 - color: #1e1e1e;
3540 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3541 - padding: 6px 8px;
3542 - /* Fonts smaller than 16px causes mobile safari to zoom. */
3543 - font-size: 16px;
3544 - /* Override core line-height. To be reviewed. */
3545 - line-height: normal;
3546 - box-shadow: 0 0 0 transparent;
3547 - border-radius: 2px;
3548 - border: 1px solid #949494;
3549 -}
3550 -@media not (prefers-reduced-motion) {
3551 - .block-editor-content-only-controls__rich-text {
3552 - transition: box-shadow 0.1s linear;
3553 - }
3554 -}
3555 -@media (min-width: 600px) {
3556 - .block-editor-content-only-controls__rich-text {
3557 - font-size: 13px;
3558 - /* Override core line-height. To be reviewed. */
3559 - line-height: normal;
3560 - }
3561 -}
3562 -.block-editor-content-only-controls__rich-text:focus {
3563 - border-color: var(--wp-admin-theme-color, #3858e9);
3564 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
3565 - outline: 2px solid transparent;
3566 -}
3567 -.block-editor-content-only-controls__rich-text::placeholder {
3568 - color: rgba(30, 30, 30, 0.62);
3569 -}
3570 -.block-editor-content-only-controls__rich-text {
3571 - border-color: #949494;
3572 -}
3573 -.block-editor-content-only-controls__rich-text::placeholder {
3574 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3575 -}
3576 -.block-editor-content-only-controls__rich-text {
3577 - min-height: 40px;
3578 - padding: 12px;
3579 -}
3580 -
3581 -.block-editor-block-fields__container {
3582 - padding: 0 16px 16px;
3583 -}
3584 -.block-editor-block-fields__container:first-of-type {
3585 - padding-block-start: 8px;
3586 - /*
3587 - * Add border for the entire content controls and remove the similar border
3588 - * for tools panel.
3589 - */
3590 - border-block-start: 1px solid #e0e0e0;
3591 -}
3592 -
3593 -.block-editor-block-fields__header {
3594 - padding: 8px 0;
3595 - margin-bottom: 4px;
3596 -}
3597 -
3598 -.block-editor-block-fields__header-icon {
3599 - flex: 0 0 24px;
3600 -}
3601 -
3602 -.block-editor-block-fields__header-title {
3603 - flex: 1;
3604 - /* Override the default margin on a h2 element. */
3605 - margin: 0 !important;
3606 -}
3607 -
3608 3774 .block-editor-hooks__block-hooks {
3609 3775 /**
3610 3776 * Un-reverse the flex direction for the toggle's label.
3611 3777 */
@@ -3639,17 +3805,14 @@
3639 3805 }
3640 3806 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3641 3807 row-gap: 0;
3642 3808 }
3643 -.color-block-support-panel {
3644 - /**
3645 - * After converting PanelColorGradientSettings to render as a ToolsPanel
3646 - * we need to remove the top margin when wrapping inner content due to
3647 - * rendering via SlotFills.
3648 - */
3809 +
3810 +.elements-block-support-panel {
3811 + /* Increased specificity required to remove the slot wrapper's row gap */
3649 3812 }
3650 -.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
3651 - margin-top: 0;
3813 +.elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
3814 + row-gap: 0;
3652 3815 }
3653 3816
3654 3817 .dimensions-block-support-panel .single-column {
3655 3818 grid-column: span 1;
@@ -3664,8 +3827,12 @@
3664 3827 font-size: 12px;
3665 3828 margin-bottom: 0;
3666 3829 }
3667 3830
3831 +.layout-block-support-panel .block-editor-hooks__flex-layout-controls {
3832 + grid-column: 1/-1;
3833 +}
3834 +
3668 3835 .block-editor-hooks__flex-layout-justification-controls,
3669 3836 .block-editor-hooks__flex-layout-orientation-controls {
3670 3837 margin-bottom: 12px;
3671 3838 }
@@ -3938,9 +4105,9 @@
3938 4105 }
3939 4106 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
3940 4107 display: grid;
3941 4108 grid-template-columns: 1fr 1fr;
3942 - grid-gap: 12px;
4109 + gap: 12px;
3943 4110 }
3944 4111 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
3945 4112 margin-bottom: 0;
3946 4113 }
@@ -3952,9 +4119,9 @@
3952 4119 display: inline-block;
3953 4120 background: none;
3954 4121 border: none;
3955 4122 padding: 0;
3956 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4123 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3957 4124 font-size: 13px;
3958 4125 line-height: 0;
3959 4126 }
3960 4127 @media (min-width: 782px) {
@@ -4088,9 +4255,9 @@
4088 4255 margin: 0 0 0 12px;
4089 4256 color: #757575;
4090 4257 text-transform: uppercase;
4091 4258 font-size: 11px;
4092 - font-weight: 499;
4259 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4093 4260 }
4094 4261
4095 4262 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4096 4263 height: 36px;
@@ -4126,12 +4293,8 @@
4126 4293 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4127 4294 margin-left: 8px;
4128 4295 }
4129 4296
4130 -.block-editor-inserter__preview-container__popover {
4131 - top: 16px !important;
4132 -}
4133 -
4134 4297 .block-editor-inserter__preview-container {
4135 4298 display: none;
4136 4299 width: 280px;
4137 4300 padding: 16px;
@@ -4272,9 +4435,9 @@
4272 4435
4273 4436 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4274 4437 display: grid;
4275 4438 grid-template-columns: 1fr 1fr;
4276 - grid-gap: 8px;
4439 + gap: 8px;
4277 4440 }
4278 4441 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4279 4442 margin-bottom: 0;
4280 4443 }
@@ -4289,59 +4452,54 @@
4289 4452 .block-editor-inserter__popover.is-quick > .components-popover__content {
4290 4453 padding: 0;
4291 4454 }
4292 4455
4293 -.block-editor-inserter__quick-inserter-expand.components-button {
4294 - display: block;
4295 - background: #1e1e1e;
4296 - color: #fff;
4456 +.block-editor-inserter__quick-inserter-expand {
4457 + padding: 0 16px 16px;
4458 +}
4459 +
4460 +.block-editor-inserter__quick-inserter-expand-toggle {
4297 4461 width: 100%;
4298 - border-radius: 0;
4462 + justify-content: center;
4299 4463 }
4300 -.block-editor-inserter__quick-inserter-expand.components-button:hover {
4301 - color: #fff;
4302 -}
4303 -.block-editor-inserter__quick-inserter-expand.components-button:active {
4304 - color: #ccc;
4305 -}
4306 -.block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) {
4307 - box-shadow: none;
4308 - background: var(--wp-admin-theme-color);
4309 - border-color: var(--wp-admin-theme-color);
4310 -}
4311 4464
4312 4465 .block-editor-block-patterns-explorer__sidebar {
4313 - position: absolute;
4314 - top: 72px;
4315 - right: 0;
4316 - bottom: 0;
4317 - width: 280px;
4318 - padding: 24px 24px 24px;
4319 - overflow-x: visible;
4320 - overflow-y: auto;
4466 + padding-bottom: 24px;
4321 4467 }
4322 -.block-editor-block-patterns-explorer__sidebar__categories-list__item {
4323 - display: block;
4324 - width: 100%;
4325 - height: 48px;
4326 - text-align: right;
4468 +@media (min-width: 782px) {
4469 + .block-editor-block-patterns-explorer__sidebar {
4470 + position: absolute;
4471 + top: 72px;
4472 + right: 0;
4473 + bottom: 0;
4474 + width: 280px;
4475 + padding: 24px;
4476 + overflow-x: visible;
4477 + overflow-y: auto;
4478 + }
4327 4479 }
4328 -.block-editor-block-patterns-explorer__search {
4329 - margin-bottom: 32px;
4480 +
4481 +@media (min-width: 782px) {
4482 + .block-editor-block-patterns-explorer__panel {
4483 + margin-inline-start: 280px;
4484 + }
4330 4485 }
4331 -.block-editor-block-patterns-explorer__search-results-count {
4332 - padding-bottom: 32px;
4486 +
4487 +.block-editor-block-patterns-explorer__no-results {
4488 + padding: 32px;
4489 + text-align: center;
4333 4490 }
4491 +
4334 4492 .block-editor-block-patterns-explorer__list {
4335 - margin-right: 280px;
4336 4493 padding: 24px 0 32px;
4337 4494 }
4338 4495 .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4339 4496 width: 380px;
4340 4497 }
4498 +
4341 4499 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4342 4500 display: grid;
4343 - grid-gap: 32px;
4501 + gap: 32px;
4344 4502 grid-template-columns: repeat(1, 1fr);
4345 4503 margin-bottom: 16px;
4346 4504 }
4347 4505 @media (min-width: 1080px) {
@@ -4363,9 +4521,9 @@
4363 4521 max-height: 800px;
4364 4522 }
4365 4523
4366 4524 .components-heading.block-editor-inserter__patterns-category-panel-title {
4367 - font-weight: 499;
4525 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4368 4526 }
4369 4527
4370 4528 .block-editor-inserter__patterns-explore-button.components-button,
4371 4529 .block-editor-inserter__media-library-button.components-button {
@@ -4374,17 +4532,26 @@
4374 4532 margin-top: 16px;
4375 4533 width: 100%;
4376 4534 }
4377 4535
4536 +.block-editor-inserter__media-mobile-screen {
4537 + display: flex;
4538 + flex-direction: column;
4539 + align-self: stretch;
4540 +}
4541 +
4378 4542 .block-editor-inserter__media-panel {
4379 - min-height: 100%;
4380 4543 padding: 0 16px;
4381 4544 display: flex;
4382 4545 flex-direction: column;
4546 + flex: 1;
4547 + min-height: 0;
4383 4548 }
4384 4549 @media (min-width: 782px) {
4385 4550 .block-editor-inserter__media-panel {
4386 4551 padding: 0;
4552 + flex: 0 1 auto;
4553 + min-height: 100%;
4387 4554 }
4388 4555 }
4389 4556 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
4390 4557 height: 100%;
@@ -4401,9 +4568,68 @@
4401 4568 margin-bottom: 0;
4402 4569 padding: 16px 24px 16px;
4403 4570 }
4404 4571 }
4572 +.block-editor-inserter__media-panel .block-editor-inserter__no-results {
4573 + flex-grow: 1;
4574 +}
4575 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer {
4576 + flex-shrink: 0;
4577 + padding-top: 16px;
4578 + padding-bottom: 16px;
4579 +}
4580 +@media (min-width: 782px) {
4581 + .block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer {
4582 + padding-right: 24px;
4583 + padding-left: 24px;
4584 + }
4585 +}
4586 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-attach.components-button {
4587 + justify-content: center;
4588 + padding: 16px;
4589 +}
4590 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-results {
4591 + display: flex;
4592 + flex-direction: column;
4593 + flex-grow: 1;
4594 + min-height: 0;
4595 +}
4596 +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list {
4597 + opacity: 0.5;
4598 + pointer-events: none;
4599 +}
4600 +@media not (prefers-reduced-motion) {
4601 + .block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list {
4602 + opacity: 1;
4603 + animation: inserter-media-panel-pulse 1s ease-in-out infinite;
4604 + }
4605 +}
4606 +.block-editor-inserter__media-panel.has-footer .block-editor-inserter__media-list {
4607 + padding-bottom: 0;
4608 +}
4405 4609
4610 +@keyframes inserter-media-panel-pulse {
4611 + 0%, 100% {
4612 + opacity: 1;
4613 + }
4614 + 50% {
4615 + opacity: 0.5;
4616 + }
4617 +}
4618 +.block-editor-inserter__media-panel-detach-modal {
4619 + z-index: 1000001;
4620 +}
4621 +.block-editor-inserter__media-panel-detach-modal p {
4622 + margin-top: 0;
4623 +}
4624 +
4625 +.block-editor-inserter__media-panel-detach-actions {
4626 + display: flex;
4627 + justify-content: flex-end;
4628 + gap: 8px;
4629 + margin-top: 16px;
4630 +}
4631 +
4406 4632 .block-editor-inserter__media-list__list-item {
4407 4633 position: relative;
4408 4634 cursor: var(--wpds-cursor-control, pointer);
4409 4635 margin-bottom: 24px;
@@ -4416,9 +4642,9 @@
4416 4642 }
4417 4643 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
4418 4644 outline-color: rgba(0, 0, 0, 0.3);
4419 4645 }
4420 -.block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options > button {
4646 +.block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options > button, .block-editor-inserter__media-list__list-item:focus-within .block-editor-inserter__media-list__item-preview-options > button {
4421 4647 display: block;
4422 4648 }
4423 4649 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
4424 4650 position: absolute;
@@ -4600,12 +4826,12 @@
4600 4826 flex-direction: column;
4601 4827 align-items: start;
4602 4828 }
4603 4829 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4604 - font-weight: 600;
4830 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4605 4831 }
4606 4832 .block-editor-block-visibility-modal__options-icon--checked {
4607 - fill: #ddd;
4833 + color: #ddd;
4608 4834 }
4609 4835 .block-editor-block-visibility-modal__sub-options {
4610 4836 width: 100%;
4611 4837 padding-inline-start: 12px;
@@ -4615,11 +4841,52 @@
4615 4841 color: #757575;
4616 4842 }
4617 4843
4618 4844 .block-editor-block-visibility-info {
4619 - padding-top: 4px;
4620 - padding-bottom: 4px;
4621 4845 margin: 0 16px 16px;
4622 - display: flex;
4623 - align-items: center;
4624 - justify-content: start;
4846 +}
4847 +
4848 +/* The stop element is invisible, so its focus indication is drawn around the
4849 + canvas it stands for. For the iframed canvas it is an overlay instead of
4850 + an outline, because Safari paints an outline on an iframe element
4851 + underneath the iframe's content. */
4852 +.block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after {
4853 + content: "";
4854 + position: absolute;
4855 + inset: 0;
4856 + z-index: 1;
4857 + pointer-events: none;
4858 + border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4859 +}
4860 +
4861 +.block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow {
4862 + outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
4863 + outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
4864 +}
4865 +
4866 +/* Looks like a tooltip. Shown at the top of the canvas while the stop is
4867 + focused. Sticky, because on the widgets screen the stop spans scrolling
4868 + content and the hint must stay in view; anywhere else there is nothing
4869 + to scroll and it stays at the top of the canvas. */
4870 +.block-editor-writing-flow__canvas-stop-hint {
4871 + display: none;
4872 + position: sticky;
4873 + top: 16px;
4874 + margin-inline: auto;
4875 + width: fit-content;
4876 + z-index: 2;
4877 + background: #000;
4878 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4879 + border-radius: 4px;
4880 + color: #f0f0f0;
4881 + text-align: center;
4882 + line-height: 1.4;
4883 + font-size: 12px;
4884 + padding: 4px 8px;
4885 + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
4886 + white-space: nowrap;
4887 + pointer-events: none;
4888 +}
4889 +
4890 +.block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint {
4891 + display: block;
4625 4892 }