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 +642 -372 23.3.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
@@ -458,8 +480,14 @@
458 480 }
459 481 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent {
460 482 margin-right: 0;
461 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 +}
462 490 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar {
463 491 overflow: visible;
464 492 }
465 493 .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar-group,
@@ -480,8 +508,67 @@
480 508 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
481 509 position: absolute;
482 510 right: calc(-48px - 8px - 1px);
483 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 +}
484 571 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::before {
485 572 content: "";
486 573 }
487 574 .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after {
@@ -547,9 +634,9 @@
547 634 .block-editor-block-lock-modal__options-all {
548 635 padding: 12px 0;
549 636 }
550 637 .block-editor-block-lock-modal__options-all .components-checkbox-control__label {
551 - font-weight: 600;
638 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
552 639 }
553 640
554 641 .block-editor-block-lock-modal__checklist-item {
555 642 display: flex;
@@ -561,9 +648,9 @@
561 648 }
562 649 .block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon {
563 650 flex-shrink: 0;
564 651 margin-left: 12px;
565 - fill: #1e1e1e;
652 + color: #1e1e1e;
566 653 }
567 654 .block-editor-block-lock-modal__checklist-item:hover {
568 655 background-color: #f0f0f0;
569 656 border-radius: 2px;
@@ -666,13 +753,14 @@
666 753 height: auto !important;
667 754 }
668 755
669 756 .block-editor-block-card__title {
670 - font-weight: 499;
757 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
671 758 display: flex;
672 759 align-items: center;
673 760 flex-wrap: wrap;
674 761 gap: 4px 8px;
762 + overflow-wrap: anywhere;
675 763 }
676 764 .block-editor-block-card__title.block-editor-block-card__title {
677 765 font-size: 13px;
678 766 line-height: 1.4;
@@ -797,9 +885,9 @@
797 885 min-width: 18px;
798 886 min-height: 18px;
799 887 }
800 888 .block-editor-block-draggable-chip .components-flex__item {
801 - 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;
802 890 font-size: 13px;
803 891 }
804 892
805 893 .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
@@ -853,9 +941,9 @@
853 941 background-color: #fff;
854 942 z-index: 1;
855 943 }
856 944 .block-editor-block-manager__category-title .components-checkbox-control__label {
857 - font-weight: 600;
945 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
858 946 }
859 947
860 948 .block-editor-block-manager__checklist {
861 949 margin-top: 0;
@@ -878,8 +966,9 @@
878 966 }
879 967 .block-editor-block-manager__checklist-item .block-editor-block-icon {
880 968 margin-left: 10px;
881 969 fill: #1e1e1e;
970 + color: #1e1e1e;
882 971 }
883 972
884 973 .block-editor-block-manager__results {
885 974 border-top: 1px solid #ddd;
@@ -968,16 +1057,8 @@
968 1057 animation: components-button__appear-animation 0.1s ease;
969 1058 animation-fill-mode: forwards;
970 1059 }
971 1060 }
972 -.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 {
973 - box-shadow: none;
974 - outline: none;
975 -}
976 -.components-button.block-editor-block-mover-button:focus-visible::before {
977 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
978 - outline: 2px solid transparent;
979 -}
980 1061
981 1062 .block-editor-block-navigation__container {
982 1063 min-width: 280px;
983 1064 }
@@ -986,9 +1067,9 @@
986 1067 margin: 0 0 12px;
987 1068 color: #757575;
988 1069 text-transform: uppercase;
989 1070 font-size: 11px;
990 - font-weight: 499;
1071 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
991 1072 }
992 1073
993 1074 .block-editor-block-patterns-list__list-item {
994 1075 cursor: var(--wpds-cursor-control, pointer);
@@ -1050,9 +1131,9 @@
1050 1131 min-width: 24px;
1051 1132 height: 24px;
1052 1133 }
1053 1134 .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon {
1054 - fill: var(--wp-block-synced-color);
1135 + color: var(--wp-block-synced-color);
1055 1136 }
1056 1137
1057 1138 .block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination {
1058 1139 border-top: 1px solid #2f2f2f;
@@ -1139,9 +1220,9 @@
1139 1220 z-index: 1;
1140 1221 }
1141 1222
1142 1223 .block-editor-block-quick-navigation__item {
1143 - font-weight: 400;
1224 + font-weight: var(--wpds-typography-font-weight-default, 400);
1144 1225 }
1145 1226
1146 1227 .block-editor-block-rename-modal {
1147 1228 z-index: 1000001;
@@ -1164,37 +1245,17 @@
1164 1245 grid-column: 1/-1;
1165 1246 }
1166 1247
1167 1248 .block-editor-block-styles__variants {
1168 - display: flex;
1169 - flex-wrap: wrap;
1170 - justify-content: space-between;
1249 + display: grid;
1171 1250 gap: 8px;
1172 1251 }
1173 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item {
1174 - color: #1e1e1e;
1175 - box-shadow: inset 0 0 0 1px #ddd;
1176 - display: inline-block;
1177 - 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;
1178 1256 }
1179 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover {
1180 - color: var(--wp-admin-theme-color);
1181 - box-shadow: inset 0 0 0 1px #ddd;
1182 -}
1183 -.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 {
1184 - background-color: #1e1e1e;
1185 - box-shadow: none;
1186 -}
1187 -.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 {
1188 - color: #fff;
1189 -}
1190 -.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 {
1191 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1192 - outline: 2px solid transparent;
1193 -}
1194 1257 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
1195 - word-break: break-all;
1196 - white-space: normal;
1197 1258 text-align: start;
1198 1259 text-align-last: center;
1199 1260 }
1200 1261
@@ -1280,9 +1341,8 @@
1280 1341 padding: 8px;
1281 1342 }
1282 1343
1283 1344 .block-editor-block-types-list > [role=presentation] {
1284 - overflow: hidden;
1285 1345 display: flex;
1286 1346 flex-wrap: wrap;
1287 1347 }
1288 1348
@@ -1484,12 +1544,8 @@
1484 1544 margin: 0;
1485 1545 min-width: 0;
1486 1546 }
1487 1547
1488 -.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) {
1489 - display: block;
1490 -}
1491 -
1492 1548 @media screen and (min-width: 782px) {
1493 1549 .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
1494 1550 display: grid;
1495 1551 grid-template-columns: repeat(6, 28px);
@@ -1497,8 +1553,18 @@
1497 1553 }
1498 1554 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
1499 1555 margin-bottom: inherit;
1500 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 +}
1501 1567
1502 1568 .block-editor-panel-color-gradient-settings__dropdown-content {
1503 1569 min-height: 160px;
1504 1570 }
@@ -1510,8 +1576,12 @@
1510 1576 .block-editor-panel-color-gradient-settings__color-indicator {
1511 1577 background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1512 1578 }
1513 1579
1580 +.block-editor-panel-color-gradient-settings__contrast-notice {
1581 + margin-top: 16px;
1582 +}
1583 +
1514 1584 /**
1515 1585 * The following styles replicate the separated border of the
1516 1586 * `ItemGroup` component but allows for hidden items. This is because
1517 1587 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
@@ -1516,10 +1586,14 @@
1516 1586 * `ItemGroup` component but allows for hidden items. This is because
1517 1587 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
1518 1588 * must at least render a placeholder which would otherwise interfere
1519 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.
1520 1594 */
1521 -.block-editor-tools-panel-color-gradient-settings__item {
1595 +.block-editor-color-gradient-item {
1522 1596 padding: 0;
1523 1597 max-width: 100%;
1524 1598 position: relative;
1525 1599 border-right: 1px solid #ddd;
@@ -1525,20 +1599,19 @@
1525 1599 border-right: 1px solid #ddd;
1526 1600 border-left: 1px solid #ddd;
1527 1601 border-bottom: 1px solid #ddd;
1528 1602 }
1529 -.block-editor-tools-panel-color-gradient-settings__item:nth-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
1530 - margin-top: 24px;
1603 +.block-editor-color-gradient-item:nth-child(1 of .block-editor-color-gradient-item) {
1531 1604 border-top-right-radius: 2px;
1532 1605 border-top-left-radius: 2px;
1533 1606 border-top: 1px solid #ddd;
1534 1607 }
1535 -.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) {
1536 1609 border-bottom-right-radius: 2px;
1537 1610 border-bottom-left-radius: 2px;
1538 1611 }
1539 -.block-editor-tools-panel-color-gradient-settings__item > div,
1540 -.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 {
1541 1614 border-radius: inherit;
1542 1615 }
1543 1616
1544 1617 .block-editor-tools-panel-color-gradient-settings__dropdown {
@@ -1555,13 +1628,17 @@
1555 1628 background: #f0f0f0;
1556 1629 color: var(--wp-admin-theme-color);
1557 1630 }
1558 1631 .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
1632 + min-width: 0;
1559 1633 white-space: nowrap;
1560 1634 overflow: hidden;
1561 1635 text-overflow: ellipsis;
1562 1636 max-width: calc(100% - 44px);
1563 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 +}
1564 1641
1565 1642 .block-editor-panel-color-gradient-settings__dropdown {
1566 1643 width: 100%;
1567 1644 }
@@ -1568,8 +1645,21 @@
1568 1645 .block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
1569 1646 flex-shrink: 0;
1570 1647 }
1571 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 +
1572 1662 .block-editor-panel-color-gradient-settings__reset {
1573 1663 position: absolute;
1574 1664 left: 0;
1575 1665 top: 8px;
@@ -1591,9 +1681,22 @@
1591 1681 .block-editor-panel-color-gradient-settings__reset {
1592 1682 opacity: 1;
1593 1683 }
1594 1684 }
1685 +.block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + .block-editor-panel-color-gradient-settings__reset {
1686 + left: 28px;
1687 +}
1595 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 +
1596 1699 .block-editor-date-format-picker {
1597 1700 margin: 0 0 16px;
1598 1701 padding: 0;
1599 1702 border: none;
@@ -1602,8 +1705,14 @@
1602 1705 .block-editor-date-format-picker__custom-format-select-control__custom-option {
1603 1706 border-top: 1px solid #ddd;
1604 1707 }
1605 1708
1709 +.block-editor-dimension-control {
1710 + border: 0;
1711 + margin: 0;
1712 + padding: 0;
1713 +}
1714 +
1606 1715 .block-editor-duotone-control__popover.components-popover > .components-popover__content {
1607 1716 padding: 8px;
1608 1717 width: 260px;
1609 1718 }
@@ -1656,8 +1765,13 @@
1656 1765 .block-editor-global-styles-state-control__badges {
1657 1766 min-height: 24px;
1658 1767 }
1659 1768
1769 +.block-editor-global-styles-state-control__badge-tooltip-trigger {
1770 + display: inline-flex;
1771 + max-width: 100%;
1772 +}
1773 +
1660 1774 .block-editor-global-styles-filters-panel__dropdown,
1661 1775 .block-editor-global-styles__shadow-dropdown {
1662 1776 display: block;
1663 1777 padding: 0;
@@ -1675,8 +1789,17 @@
1675 1789 .block-editor-global-styles__shadow-dropdown-toggle.is-open {
1676 1790 background-color: #f0f0f0;
1677 1791 }
1678 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 +
1679 1802 .block-editor-global-styles__shadow-editor__remove-button {
1680 1803 position: absolute;
1681 1804 left: 0;
1682 1805 top: 8px;
@@ -1758,8 +1881,187 @@
1758 1881 opacity: 1;
1759 1882 }
1760 1883 }
1761 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 +
1762 2064 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
1763 2065 z-index: 30;
1764 2066 }
1765 2067 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
@@ -1864,16 +2166,8 @@
1864 2166 animation: components-button__appear-animation 0.1s ease;
1865 2167 animation-fill-mode: forwards;
1866 2168 }
1867 2169 }
1868 -.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 {
1869 - box-shadow: none;
1870 - outline: none;
1871 -}
1872 -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
1873 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1874 - outline: 2px solid transparent;
1875 -}
1876 2170
1877 2171 .block-editor-grid-item-mover__move-vertical-button-container {
1878 2172 display: flex;
1879 2173 position: relative;
@@ -1987,8 +2281,27 @@
1987 2281 position: absolute;
1988 2282 left: 0;
1989 2283 }
1990 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 +
1991 2304 .block-editor-block-types-list__list-item {
1992 2305 display: block;
1993 2306 width: 33.33%;
1994 2307 padding: 0;
@@ -2018,9 +2331,10 @@
2018 2331 align-items: stretch;
2019 2332 justify-content: center;
2020 2333 cursor: var(--wpds-cursor-control, pointer);
2021 2334 background: transparent;
2022 - word-break: break-word;
2335 + word-break: normal;
2336 + overflow-wrap: break-word;
2023 2337 }
2024 2338 @media not (prefers-reduced-motion) {
2025 2339 .components-button.block-editor-block-types-list__item {
2026 2340 transition: all 0.05s ease-in-out;
@@ -2052,17 +2366,8 @@
2052 2366 opacity: 0.04;
2053 2367 background: var(--wp-admin-theme-color);
2054 2368 pointer-events: none;
2055 2369 }
2056 -.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active {
2057 - color: #fff;
2058 - background: #1e1e1e;
2059 - outline: 2px solid transparent;
2060 - outline-offset: -2px;
2061 -}
2062 -.components-button.block-editor-block-types-list__item:not(:disabled):focus {
2063 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2064 -}
2065 2370
2066 2371 .block-editor-block-types-list__item-icon {
2067 2372 padding: 12px 20px;
2068 2373 color: #1e1e1e;
@@ -2235,9 +2540,9 @@
2235 2540 display: inline-block;
2236 2541 width: 100%;
2237 2542 }
2238 2543 .block-editor-link-control__search-item .components-menu-item__item mark {
2239 - font-weight: 600;
2544 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2240 2545 color: inherit;
2241 2546 background-color: transparent;
2242 2547 }
2243 2548 .block-editor-link-control__search-item .components-menu-item__shortcut {
@@ -2284,9 +2589,9 @@
2284 2589 width: 32px;
2285 2590 max-height: 32px;
2286 2591 }
2287 2592 .block-editor-link-control__preview .block-editor-link-control__preview-title {
2288 - line-height: 1.1;
2593 + line-height: var(--wpds-typography-line-height-sm, 20px);
2289 2594 }
2290 2595 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
2291 2596 box-shadow: none;
2292 2597 }
@@ -2295,14 +2600,14 @@
2295 2600 outline: 2px solid transparent;
2296 2601 text-decoration: none;
2297 2602 }
2298 2603 .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2299 - font-weight: 600;
2604 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2300 2605 color: inherit;
2301 2606 background-color: transparent;
2302 2607 }
2303 2608 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2304 - font-weight: normal;
2609 + font-weight: 400;
2305 2610 }
2306 2611 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2307 2612 position: absolute;
2308 2613 width: 1px;
@@ -2309,9 +2614,9 @@
2309 2614 height: 1px;
2310 2615 padding: 0;
2311 2616 margin: -1px;
2312 2617 overflow: hidden;
2313 - clip: rect(0, 0, 0, 0);
2618 + clip-path: inset(50%);
2314 2619 border: 0;
2315 2620 }
2316 2621
2317 2622 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
@@ -2453,9 +2758,8 @@
2453 2758 .link-preview-button.components-button {
2454 2759 width: 100%;
2455 2760 height: auto;
2456 2761 padding: 12px;
2457 - box-shadow: inset 0 0 0 1px #949494;
2458 2762 border-color: #949494;
2459 2763 }
2460 2764
2461 2765 .link-preview-button__image-container {
@@ -2493,9 +2797,9 @@
2493 2797 }
2494 2798
2495 2799 .link-preview-button__title {
2496 2800 margin-top: 4px;
2497 - font-weight: 500;
2801 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2498 2802 color: #1e1e1e;
2499 2803 display: block;
2500 2804 }
2501 2805
@@ -2530,8 +2834,11 @@
2530 2834 .block-editor-list-view-leaf {
2531 2835 position: relative;
2532 2836 transform: translateY(0);
2533 2837 }
2838 +.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
2839 + z-index: 1;
2840 +}
2534 2841 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2535 2842 cursor: grab;
2536 2843 }
2537 2844 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
@@ -2542,13 +2849,8 @@
2542 2849 }
2543 2850 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2544 2851 fill: currentColor;
2545 2852 }
2546 -@media (forced-colors: active) {
2547 - .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2548 - fill: CanvasText;
2549 - }
2550 -}
2551 2853 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2552 2854 color: inherit;
2553 2855 }
2554 2856 .block-editor-list-view-leaf.is-selected td {
@@ -2560,23 +2862,45 @@
2560 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,
2561 2863 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2562 2864 color: var(--wp-block-synced-color);
2563 2865 }
2564 -.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2565 - 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);
2566 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 +}
2567 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 {
2568 2875 color: #fff;
2569 2876 }
2570 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2571 - 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)));
2572 2882 }
2573 -.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2574 - 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 + }
2575 2902 }
2576 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2577 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2578 -}
2579 2903 .block-editor-list-view-leaf.is-first-selected td:first-child {
2580 2904 border-top-right-radius: 2px;
2581 2905 }
2582 2906 .block-editor-list-view-leaf.is-first-selected td:last-child {
@@ -2698,8 +3022,9 @@
2698 3022 }
2699 3023 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2700 3024 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2701 3025 box-shadow: none;
3026 + outline: none;
2702 3027 }
2703 3028 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2704 3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2705 3030 content: "";
@@ -2704,13 +3029,16 @@
2704 3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2705 3030 content: "";
2706 3031 position: absolute;
2707 3032 top: 0;
2708 - left: -29px;
3033 + left: -28px;
2709 3034 bottom: 0;
2710 3035 right: 0;
2711 3036 border-radius: inherit;
2712 - 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);
2713 3041 z-index: 2;
2714 3042 pointer-events: none;
2715 3043 }
2716 3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
@@ -2715,13 +3043,8 @@
2715 3043 }
2716 3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2717 3045 left: 0;
2718 3046 }
2719 -.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu,
2720 -.block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
2721 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2722 - z-index: 1;
2723 -}
2724 3047 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2725 3048 opacity: 1;
2726 3049 }
2727 3050 @keyframes __wp-base-styles-fade-in {
@@ -2791,14 +3114,8 @@
2791 3114 }
2792 3115 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
2793 3116 top: -4px;
2794 3117 }
2795 -.block-editor-list-view-leaf .block-editor-block-mover-button::before {
2796 - height: 16px;
2797 - min-width: 100%;
2798 - right: 0;
2799 - left: 0;
2800 -}
2801 3118 .block-editor-list-view-leaf .block-editor-inserter__toggle {
2802 3119 background: #1e1e1e;
2803 3120 color: #fff;
2804 3121 height: 24px;
@@ -2807,8 +3124,14 @@
2807 3124 }
2808 3125 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
2809 3126 color: #fff;
2810 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 +}
2811 3134 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
2812 3135 right: 2px;
2813 3136 position: relative;
2814 3137 }
@@ -2829,8 +3152,19 @@
2829 3152 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
2830 3153 position: absolute;
2831 3154 left: 0;
2832 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;
2833 3167 }
2834 3168 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
2835 3169 background: rgba(0, 0, 0, 0.3);
2836 3170 color: #fff;
@@ -2857,8 +3191,25 @@
2857 3191 }
2858 3192 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
2859 3193 box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
2860 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 +}
2861 3212
2862 3213 .block-editor-list-view-draggable-chip {
2863 3214 opacity: 0.8;
2864 3215 }
@@ -3055,11 +3406,15 @@
3055 3406 padding: 16px;
3056 3407 }
3057 3408
3058 3409 .block-editor-multi-selection-inspector__card-title {
3059 - font-weight: 499;
3410 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3060 3411 }
3061 3412
3413 +.block-editor-multi-selection-inspector__card-description {
3414 + color: #757575;
3415 +}
3416 +
3062 3417 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3063 3418 margin-right: -2px;
3064 3419 padding: 0 3px;
3065 3420 width: 36px;
@@ -3065,8 +3420,13 @@
3065 3420 width: 36px;
3066 3421 height: 24px;
3067 3422 }
3068 3423
3424 +.block-editor-plain-text {
3425 + width: 100%;
3426 + field-sizing: content;
3427 +}
3428 +
3069 3429 .block-editor-responsive-block-control {
3070 3430 margin-bottom: 28px;
3071 3431 border-bottom: 1px solid #ccc;
3072 3432 padding-bottom: 14px;
@@ -3082,9 +3442,9 @@
3082 3442 margin-right: -3px;
3083 3443 }
3084 3444
3085 3445 .block-editor-responsive-block-control__label {
3086 - font-weight: 600;
3446 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3087 3447 margin-bottom: 0.6em;
3088 3448 margin-right: -3px;
3089 3449 }
3090 3450
@@ -3104,9 +3464,9 @@
3104 3464 overflow: hidden;
3105 3465 padding: 0;
3106 3466 position: absolute;
3107 3467 width: 1px;
3108 - word-wrap: normal !important;
3468 + overflow-wrap: normal !important;
3109 3469 word-break: normal !important;
3110 3470 }
3111 3471
3112 3472 .preset-input-control__wrapper > * {
@@ -3161,9 +3521,9 @@
3161 3521 top: -9999em;
3162 3522 }
3163 3523 .block-editor-skip-to-selected-block:focus {
3164 3524 font-size: 14px;
3165 - font-weight: 600;
3525 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3166 3526 background: #f1f1f1;
3167 3527 z-index: 100000;
3168 3528 }
3169 3529
@@ -3359,8 +3719,13 @@
3359 3719 padding: 16px;
3360 3720 border-top: 1px solid #1e1e1e;
3361 3721 }
3362 3722
3723 +.block-editor-url-popover__link-container-content {
3724 + display: flex;
3725 + align-items: center;
3726 +}
3727 +
3363 3728 .block-editor-url-popover__link-editor,
3364 3729 .block-editor-url-popover__link-viewer {
3365 3730 display: flex;
3366 3731 }
@@ -3398,35 +3763,8 @@
3398 3763 color: #757575;
3399 3764 font-size: 12px;
3400 3765 }
3401 3766
3402 -/**
3403 - * ItemGroup-like border styles for the background panel's ToolsPanelItems.
3404 - * Replicates the separated border of the `ItemGroup` component while
3405 - * allowing for hidden placeholder items (same approach as the color panel).
3406 - */
3407 -.block-editor-background-panel__item {
3408 - padding: 0;
3409 - max-width: 100%;
3410 - position: relative;
3411 - border-right: 1px solid #ddd;
3412 - border-left: 1px solid #ddd;
3413 - border-bottom: 1px solid #ddd;
3414 -}
3415 -.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
3416 - border-top-right-radius: 2px;
3417 - border-top-left-radius: 2px;
3418 - border-top: 1px solid #ddd;
3419 -}
3420 -.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
3421 - border-bottom-right-radius: 2px;
3422 - border-bottom-left-radius: 2px;
3423 -}
3424 -.block-editor-background-panel__item > div,
3425 -.block-editor-background-panel__item > div > button {
3426 - border-radius: inherit;
3427 -}
3428 -
3429 3767 .background-block-support-panel {
3430 3768 /* Increased specificity required to remove the slot wrapper's row gap */
3431 3769 }
3432 3770 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
@@ -3432,173 +3770,8 @@
3432 3770 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3433 3771 row-gap: 0;
3434 3772 }
3435 3773
3436 -.block-editor-content-only-controls__link {
3437 - width: 100%;
3438 - box-shadow: inset 0 0 0 1px #ccc;
3439 -}
3440 -.block-editor-content-only-controls__link:focus:not(:disabled) {
3441 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3442 -}
3443 -
3444 -.block-editor-content-only-controls__link-row {
3445 - align-items: center;
3446 -}
3447 -
3448 -.block-editor-content-only-controls__link-title {
3449 - width: 100%;
3450 - white-space: nowrap;
3451 - text-overflow: ellipsis;
3452 - overflow: hidden;
3453 -}
3454 -
3455 -.block-editor-content-only-controls__media {
3456 - width: 100%;
3457 - box-shadow: inset 0 0 0 1px #ccc;
3458 - padding-left: 32px;
3459 -}
3460 -.block-editor-content-only-controls__media:focus:not(:disabled) {
3461 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3462 -}
3463 -
3464 -.block-editor-content-only-controls__media-replace-flow {
3465 - display: block;
3466 -}
3467 -
3468 -.block-editor-content-only-controls__media-row {
3469 - align-items: center;
3470 -}
3471 -
3472 -.block-editor-content-only-controls__media-placeholder {
3473 - width: 24px;
3474 - height: 24px;
3475 - border-radius: 2px;
3476 - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3477 - display: inline-block;
3478 - padding: 0;
3479 - background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3480 -}
3481 -
3482 -.block-editor-content-only-controls__media-title {
3483 - width: 100%;
3484 - white-space: nowrap;
3485 - text-overflow: ellipsis;
3486 - overflow: hidden;
3487 -}
3488 -
3489 -.block-editor-content-only-controls__media-thumbnail {
3490 - width: 20px;
3491 - height: 20px;
3492 - border-radius: 2px;
3493 - align-self: center;
3494 - overflow: hidden;
3495 -}
3496 -.block-editor-content-only-controls__media-thumbnail img {
3497 - width: 100% !important;
3498 - height: 100% !important;
3499 - object-fit: cover;
3500 -}
3501 -
3502 -.block-editor-content-only-controls {
3503 - position: relative;
3504 -}
3505 -
3506 -.block-editor-content-only-controls__media-reset {
3507 - position: absolute;
3508 - left: 0;
3509 - top: 8px;
3510 - margin: auto 8px auto;
3511 - opacity: 0;
3512 - border-radius: 2px;
3513 -}
3514 -@media not (prefers-reduced-motion) {
3515 - .block-editor-content-only-controls__media-reset {
3516 - transition: opacity 0.1s ease-in-out;
3517 - }
3518 -}
3519 -.block-editor-content-only-controls:hover .block-editor-content-only-controls__media-reset, .block-editor-content-only-controls__media-reset:focus, .block-editor-content-only-controls__media-reset:hover {
3520 - opacity: 1;
3521 -}
3522 -@media (hover: none) {
3523 - .block-editor-content-only-controls__media-reset {
3524 - opacity: 1;
3525 - }
3526 -}
3527 -
3528 -.block-editor-content-only-controls__rich-text {
3529 - width: 100%;
3530 - margin: 0;
3531 - background: #fff;
3532 - color: #1e1e1e;
3533 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3534 - padding: 6px 8px;
3535 - /* Fonts smaller than 16px causes mobile safari to zoom. */
3536 - font-size: 16px;
3537 - /* Override core line-height. To be reviewed. */
3538 - line-height: normal;
3539 - box-shadow: 0 0 0 transparent;
3540 - border-radius: 2px;
3541 - border: 1px solid #949494;
3542 -}
3543 -@media not (prefers-reduced-motion) {
3544 - .block-editor-content-only-controls__rich-text {
3545 - transition: box-shadow 0.1s linear;
3546 - }
3547 -}
3548 -@media (min-width: 600px) {
3549 - .block-editor-content-only-controls__rich-text {
3550 - font-size: 13px;
3551 - /* Override core line-height. To be reviewed. */
3552 - line-height: normal;
3553 - }
3554 -}
3555 -.block-editor-content-only-controls__rich-text:focus {
3556 - border-color: var(--wp-admin-theme-color, #3858e9);
3557 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
3558 - outline: 2px solid transparent;
3559 -}
3560 -.block-editor-content-only-controls__rich-text::placeholder {
3561 - color: rgba(30, 30, 30, 0.62);
3562 -}
3563 -.block-editor-content-only-controls__rich-text {
3564 - border-color: #949494;
3565 -}
3566 -.block-editor-content-only-controls__rich-text::placeholder {
3567 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3568 -}
3569 -.block-editor-content-only-controls__rich-text {
3570 - min-height: 40px;
3571 - padding: 12px;
3572 -}
3573 -
3574 -.block-editor-block-fields__container {
3575 - padding: 0 16px 16px;
3576 -}
3577 -.block-editor-block-fields__container:first-of-type {
3578 - padding-block-start: 8px;
3579 - /*
3580 - * Add border for the entire content controls and remove the similar border
3581 - * for tools panel.
3582 - */
3583 - border-block-start: 1px solid #e0e0e0;
3584 -}
3585 -
3586 -.block-editor-block-fields__header {
3587 - padding: 8px 0;
3588 - margin-bottom: 4px;
3589 -}
3590 -
3591 -.block-editor-block-fields__header-icon {
3592 - flex: 0 0 24px;
3593 -}
3594 -
3595 -.block-editor-block-fields__header-title {
3596 - flex: 1;
3597 - /* Override the default margin on a h2 element. */
3598 - margin: 0 !important;
3599 -}
3600 -
3601 3774 .block-editor-hooks__block-hooks {
3602 3775 /**
3603 3776 * Un-reverse the flex direction for the toggle's label.
3604 3777 */
@@ -3632,17 +3805,14 @@
3632 3805 }
3633 3806 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3634 3807 row-gap: 0;
3635 3808 }
3636 -.color-block-support-panel {
3637 - /**
3638 - * After converting PanelColorGradientSettings to render as a ToolsPanel
3639 - * we need to remove the top margin when wrapping inner content due to
3640 - * rendering via SlotFills.
3641 - */
3809 +
3810 +.elements-block-support-panel {
3811 + /* Increased specificity required to remove the slot wrapper's row gap */
3642 3812 }
3643 -.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
3644 - margin-top: 0;
3813 +.elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
3814 + row-gap: 0;
3645 3815 }
3646 3816
3647 3817 .dimensions-block-support-panel .single-column {
3648 3818 grid-column: span 1;
@@ -3935,9 +4105,9 @@
3935 4105 }
3936 4106 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
3937 4107 display: grid;
3938 4108 grid-template-columns: 1fr 1fr;
3939 - grid-gap: 12px;
4109 + gap: 12px;
3940 4110 }
3941 4111 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
3942 4112 margin-bottom: 0;
3943 4113 }
@@ -3949,9 +4119,9 @@
3949 4119 display: inline-block;
3950 4120 background: none;
3951 4121 border: none;
3952 4122 padding: 0;
3953 - 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;
3954 4124 font-size: 13px;
3955 4125 line-height: 0;
3956 4126 }
3957 4127 @media (min-width: 782px) {
@@ -4085,9 +4255,9 @@
4085 4255 margin: 0 0 0 12px;
4086 4256 color: #757575;
4087 4257 text-transform: uppercase;
4088 4258 font-size: 11px;
4089 - font-weight: 499;
4259 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4090 4260 }
4091 4261
4092 4262 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4093 4263 height: 36px;
@@ -4123,12 +4293,8 @@
4123 4293 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4124 4294 margin-left: 8px;
4125 4295 }
4126 4296
4127 -.block-editor-inserter__preview-container__popover {
4128 - top: 16px !important;
4129 -}
4130 -
4131 4297 .block-editor-inserter__preview-container {
4132 4298 display: none;
4133 4299 width: 280px;
4134 4300 padding: 16px;
@@ -4269,9 +4435,9 @@
4269 4435
4270 4436 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4271 4437 display: grid;
4272 4438 grid-template-columns: 1fr 1fr;
4273 - grid-gap: 8px;
4439 + gap: 8px;
4274 4440 }
4275 4441 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4276 4442 margin-bottom: 0;
4277 4443 }
@@ -4286,59 +4452,54 @@
4286 4452 .block-editor-inserter__popover.is-quick > .components-popover__content {
4287 4453 padding: 0;
4288 4454 }
4289 4455
4290 -.block-editor-inserter__quick-inserter-expand.components-button {
4291 - display: block;
4292 - background: #1e1e1e;
4293 - color: #fff;
4456 +.block-editor-inserter__quick-inserter-expand {
4457 + padding: 0 16px 16px;
4458 +}
4459 +
4460 +.block-editor-inserter__quick-inserter-expand-toggle {
4294 4461 width: 100%;
4295 - border-radius: 0;
4462 + justify-content: center;
4296 4463 }
4297 -.block-editor-inserter__quick-inserter-expand.components-button:hover {
4298 - color: #fff;
4299 -}
4300 -.block-editor-inserter__quick-inserter-expand.components-button:active {
4301 - color: #ccc;
4302 -}
4303 -.block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) {
4304 - box-shadow: none;
4305 - background: var(--wp-admin-theme-color);
4306 - border-color: var(--wp-admin-theme-color);
4307 -}
4308 4464
4309 4465 .block-editor-block-patterns-explorer__sidebar {
4310 - position: absolute;
4311 - top: 72px;
4312 - right: 0;
4313 - bottom: 0;
4314 - width: 280px;
4315 - padding: 24px 24px 24px;
4316 - overflow-x: visible;
4317 - overflow-y: auto;
4466 + padding-bottom: 24px;
4318 4467 }
4319 -.block-editor-block-patterns-explorer__sidebar__categories-list__item {
4320 - display: block;
4321 - width: 100%;
4322 - height: 48px;
4323 - 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 + }
4324 4479 }
4325 -.block-editor-block-patterns-explorer__search {
4326 - margin-bottom: 32px;
4480 +
4481 +@media (min-width: 782px) {
4482 + .block-editor-block-patterns-explorer__panel {
4483 + margin-inline-start: 280px;
4484 + }
4327 4485 }
4328 -.block-editor-block-patterns-explorer__search-results-count {
4329 - padding-bottom: 32px;
4486 +
4487 +.block-editor-block-patterns-explorer__no-results {
4488 + padding: 32px;
4489 + text-align: center;
4330 4490 }
4491 +
4331 4492 .block-editor-block-patterns-explorer__list {
4332 - margin-right: 280px;
4333 4493 padding: 24px 0 32px;
4334 4494 }
4335 4495 .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4336 4496 width: 380px;
4337 4497 }
4498 +
4338 4499 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4339 4500 display: grid;
4340 - grid-gap: 32px;
4501 + gap: 32px;
4341 4502 grid-template-columns: repeat(1, 1fr);
4342 4503 margin-bottom: 16px;
4343 4504 }
4344 4505 @media (min-width: 1080px) {
@@ -4360,9 +4521,9 @@
4360 4521 max-height: 800px;
4361 4522 }
4362 4523
4363 4524 .components-heading.block-editor-inserter__patterns-category-panel-title {
4364 - font-weight: 499;
4525 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4365 4526 }
4366 4527
4367 4528 .block-editor-inserter__patterns-explore-button.components-button,
4368 4529 .block-editor-inserter__media-library-button.components-button {
@@ -4371,17 +4532,26 @@
4371 4532 margin-top: 16px;
4372 4533 width: 100%;
4373 4534 }
4374 4535
4536 +.block-editor-inserter__media-mobile-screen {
4537 + display: flex;
4538 + flex-direction: column;
4539 + align-self: stretch;
4540 +}
4541 +
4375 4542 .block-editor-inserter__media-panel {
4376 - min-height: 100%;
4377 4543 padding: 0 16px;
4378 4544 display: flex;
4379 4545 flex-direction: column;
4546 + flex: 1;
4547 + min-height: 0;
4380 4548 }
4381 4549 @media (min-width: 782px) {
4382 4550 .block-editor-inserter__media-panel {
4383 4551 padding: 0;
4552 + flex: 0 1 auto;
4553 + min-height: 100%;
4384 4554 }
4385 4555 }
4386 4556 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
4387 4557 height: 100%;
@@ -4398,9 +4568,68 @@
4398 4568 margin-bottom: 0;
4399 4569 padding: 16px 24px 16px;
4400 4570 }
4401 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 +}
4402 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 +
4403 4632 .block-editor-inserter__media-list__list-item {
4404 4633 position: relative;
4405 4634 cursor: var(--wpds-cursor-control, pointer);
4406 4635 margin-bottom: 24px;
@@ -4413,9 +4642,9 @@
4413 4642 }
4414 4643 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
4415 4644 outline-color: rgba(0, 0, 0, 0.3);
4416 4645 }
4417 -.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 {
4418 4647 display: block;
4419 4648 }
4420 4649 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
4421 4650 position: absolute;
@@ -4597,12 +4826,12 @@
4597 4826 flex-direction: column;
4598 4827 align-items: start;
4599 4828 }
4600 4829 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4601 - font-weight: 600;
4830 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4602 4831 }
4603 4832 .block-editor-block-visibility-modal__options-icon--checked {
4604 - fill: #ddd;
4833 + color: #ddd;
4605 4834 }
4606 4835 .block-editor-block-visibility-modal__sub-options {
4607 4836 width: 100%;
4608 4837 padding-inline-start: 12px;
@@ -4612,11 +4841,52 @@
4612 4841 color: #757575;
4613 4842 }
4614 4843
4615 4844 .block-editor-block-visibility-info {
4616 - padding-top: 4px;
4617 - padding-bottom: 4px;
4618 4845 margin: 0 16px 16px;
4619 - display: flex;
4620 - align-items: center;
4621 - 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;
4622 4892 }