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-rtl.css +656 -389 23.2.2 → 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-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 }