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 +649 -397 23.4.0 → 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;
@@ -776,11 +864,9 @@
776 864 height: 48px;
777 865 padding: 0 13px;
778 866 position: relative;
779 867 -webkit-user-select: none;
780 - -moz-user-select: none;
781 868 user-select: none;
782 - width: -moz-max-content;
783 869 width: max-content;
784 870 }
785 871 .block-editor-block-draggable-chip svg {
786 872 fill: currentColor;
@@ -799,9 +885,9 @@
799 885 min-width: 18px;
800 886 min-height: 18px;
801 887 }
802 888 .block-editor-block-draggable-chip .components-flex__item {
803 - 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;
804 890 font-size: 13px;
805 891 }
806 892
807 893 .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
@@ -855,9 +941,9 @@
855 941 background-color: #fff;
856 942 z-index: 1;
857 943 }
858 944 .block-editor-block-manager__category-title .components-checkbox-control__label {
859 - font-weight: 600;
945 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
860 946 }
861 947
862 948 .block-editor-block-manager__checklist {
863 949 margin-top: 0;
@@ -880,8 +966,9 @@
880 966 }
881 967 .block-editor-block-manager__checklist-item .block-editor-block-icon {
882 968 margin-left: 10px;
883 969 fill: #1e1e1e;
970 + color: #1e1e1e;
884 971 }
885 972
886 973 .block-editor-block-manager__results {
887 974 border-top: 1px solid #ddd;
@@ -970,16 +1057,8 @@
970 1057 animation: components-button__appear-animation 0.1s ease;
971 1058 animation-fill-mode: forwards;
972 1059 }
973 1060 }
974 -.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 {
975 - box-shadow: none;
976 - outline: none;
977 -}
978 -.components-button.block-editor-block-mover-button:focus-visible::before {
979 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
980 - outline: 2px solid transparent;
981 -}
982 1061
983 1062 .block-editor-block-navigation__container {
984 1063 min-width: 280px;
985 1064 }
@@ -988,9 +1067,9 @@
988 1067 margin: 0 0 12px;
989 1068 color: #757575;
990 1069 text-transform: uppercase;
991 1070 font-size: 11px;
992 - font-weight: 499;
1071 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
993 1072 }
994 1073
995 1074 .block-editor-block-patterns-list__list-item {
996 1075 cursor: var(--wpds-cursor-control, pointer);
@@ -1052,9 +1131,9 @@
1052 1131 min-width: 24px;
1053 1132 height: 24px;
1054 1133 }
1055 1134 .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon {
1056 - fill: var(--wp-block-synced-color);
1135 + color: var(--wp-block-synced-color);
1057 1136 }
1058 1137
1059 1138 .block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination {
1060 1139 border-top: 1px solid #2f2f2f;
@@ -1080,9 +1159,8 @@
1080 1159 }
1081 1160 .components-popover.block-editor-block-popover .components-popover__content {
1082 1161 margin: 0 !important;
1083 1162 min-width: auto;
1084 - width: -moz-max-content;
1085 1163 width: max-content;
1086 1164 overflow-y: visible;
1087 1165 }
1088 1166 .components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone, .block-editor-block-list__block-side-inserter-popover) .components-popover__content * {
@@ -1142,9 +1220,9 @@
1142 1220 z-index: 1;
1143 1221 }
1144 1222
1145 1223 .block-editor-block-quick-navigation__item {
1146 - font-weight: 400;
1224 + font-weight: var(--wpds-typography-font-weight-default, 400);
1147 1225 }
1148 1226
1149 1227 .block-editor-block-rename-modal {
1150 1228 z-index: 1000001;
@@ -1167,40 +1245,19 @@
1167 1245 grid-column: 1/-1;
1168 1246 }
1169 1247
1170 1248 .block-editor-block-styles__variants {
1171 - display: flex;
1172 - flex-wrap: wrap;
1173 - justify-content: space-between;
1249 + display: grid;
1174 1250 gap: 8px;
1175 1251 }
1176 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item {
1177 - color: #1e1e1e;
1178 - box-shadow: inset 0 0 0 1px #ddd;
1179 - display: inline-block;
1180 - 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;
1181 1256 }
1182 -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover {
1183 - color: var(--wp-admin-theme-color);
1184 - box-shadow: inset 0 0 0 1px #ddd;
1185 -}
1186 -.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 {
1187 - background-color: #1e1e1e;
1188 - box-shadow: none;
1189 -}
1190 -.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 {
1191 - color: #fff;
1192 -}
1193 -.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 {
1194 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1195 - outline: 2px solid transparent;
1196 -}
1197 1257 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
1198 - word-break: break-all;
1199 - white-space: normal;
1200 1258 text-align: start;
1201 - -moz-text-align-last: center;
1202 - text-align-last: center;
1259 + text-align-last: center;
1203 1260 }
1204 1261
1205 1262 .components-popover.block-editor-block-switcher__popover .components-popover__content {
1206 1263 min-width: 300px;
@@ -1284,9 +1341,8 @@
1284 1341 padding: 8px;
1285 1342 }
1286 1343
1287 1344 .block-editor-block-types-list > [role=presentation] {
1288 - overflow: hidden;
1289 1345 display: flex;
1290 1346 flex-wrap: wrap;
1291 1347 }
1292 1348
@@ -1304,22 +1360,19 @@
1304 1360 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
1305 1361 justify-content: center;
1306 1362 }
1307 1363 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
1308 - -moz-column-gap: 24px;
1309 - column-gap: 24px;
1364 + column-gap: 24px;
1310 1365 display: block;
1311 1366 width: 100%;
1312 1367 padding: 32px;
1313 1368 padding-bottom: 0;
1314 1369 padding-top: 0;
1315 - -moz-column-count: 2;
1316 - column-count: 2;
1370 + column-count: 2;
1317 1371 }
1318 1372 @media (min-width: 1440px) {
1319 1373 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container {
1320 - -moz-column-count: 3;
1321 - column-count: 3;
1374 + column-count: 3;
1322 1375 }
1323 1376 }
1324 1377 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-preview__container,
1325 1378 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
@@ -1339,10 +1392,9 @@
1339 1392 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title {
1340 1393 color: var(--wp-admin-theme-color);
1341 1394 }
1342 1395 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
1343 - -moz-column-break-inside: avoid;
1344 - break-inside: avoid-column;
1396 + break-inside: avoid-column;
1345 1397 margin-bottom: 24px;
1346 1398 }
1347 1399 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
1348 1400 padding-top: 8px;
@@ -1492,12 +1544,8 @@
1492 1544 margin: 0;
1493 1545 min-width: 0;
1494 1546 }
1495 1547
1496 -.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) {
1497 - display: block;
1498 -}
1499 -
1500 1548 @media screen and (min-width: 782px) {
1501 1549 .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
1502 1550 display: grid;
1503 1551 grid-template-columns: repeat(6, 28px);
@@ -1505,8 +1553,18 @@
1505 1553 }
1506 1554 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
1507 1555 margin-bottom: inherit;
1508 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 +}
1509 1567
1510 1568 .block-editor-panel-color-gradient-settings__dropdown-content {
1511 1569 min-height: 160px;
1512 1570 }
@@ -1518,8 +1576,12 @@
1518 1576 .block-editor-panel-color-gradient-settings__color-indicator {
1519 1577 background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
1520 1578 }
1521 1579
1580 +.block-editor-panel-color-gradient-settings__contrast-notice {
1581 + margin-top: 16px;
1582 +}
1583 +
1522 1584 /**
1523 1585 * The following styles replicate the separated border of the
1524 1586 * `ItemGroup` component but allows for hidden items. This is because
1525 1587 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
@@ -1524,10 +1586,14 @@
1524 1586 * `ItemGroup` component but allows for hidden items. This is because
1525 1587 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
1526 1588 * must at least render a placeholder which would otherwise interfere
1527 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.
1528 1594 */
1529 -.block-editor-tools-panel-color-gradient-settings__item {
1595 +.block-editor-color-gradient-item {
1530 1596 padding: 0;
1531 1597 max-width: 100%;
1532 1598 position: relative;
1533 1599 border-right: 1px solid #ddd;
@@ -1533,20 +1599,19 @@
1533 1599 border-right: 1px solid #ddd;
1534 1600 border-left: 1px solid #ddd;
1535 1601 border-bottom: 1px solid #ddd;
1536 1602 }
1537 -.block-editor-tools-panel-color-gradient-settings__item:nth-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
1538 - margin-top: 24px;
1603 +.block-editor-color-gradient-item:nth-child(1 of .block-editor-color-gradient-item) {
1539 1604 border-top-right-radius: 2px;
1540 1605 border-top-left-radius: 2px;
1541 1606 border-top: 1px solid #ddd;
1542 1607 }
1543 -.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) {
1544 1609 border-bottom-right-radius: 2px;
1545 1610 border-bottom-left-radius: 2px;
1546 1611 }
1547 -.block-editor-tools-panel-color-gradient-settings__item > div,
1548 -.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 {
1549 1614 border-radius: inherit;
1550 1615 }
1551 1616
1552 1617 .block-editor-tools-panel-color-gradient-settings__dropdown {
@@ -1563,13 +1628,17 @@
1563 1628 background: #f0f0f0;
1564 1629 color: var(--wp-admin-theme-color);
1565 1630 }
1566 1631 .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
1632 + min-width: 0;
1567 1633 white-space: nowrap;
1568 1634 overflow: hidden;
1569 1635 text-overflow: ellipsis;
1570 1636 max-width: calc(100% - 44px);
1571 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 +}
1572 1641
1573 1642 .block-editor-panel-color-gradient-settings__dropdown {
1574 1643 width: 100%;
1575 1644 }
@@ -1576,8 +1645,21 @@
1576 1645 .block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
1577 1646 flex-shrink: 0;
1578 1647 }
1579 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 +
1580 1662 .block-editor-panel-color-gradient-settings__reset {
1581 1663 position: absolute;
1582 1664 left: 0;
1583 1665 top: 8px;
@@ -1599,9 +1681,22 @@
1599 1681 .block-editor-panel-color-gradient-settings__reset {
1600 1682 opacity: 1;
1601 1683 }
1602 1684 }
1685 +.block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + .block-editor-panel-color-gradient-settings__reset {
1686 + left: 28px;
1687 +}
1603 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 +
1604 1699 .block-editor-date-format-picker {
1605 1700 margin: 0 0 16px;
1606 1701 padding: 0;
1607 1702 border: none;
@@ -1610,8 +1705,14 @@
1610 1705 .block-editor-date-format-picker__custom-format-select-control__custom-option {
1611 1706 border-top: 1px solid #ddd;
1612 1707 }
1613 1708
1709 +.block-editor-dimension-control {
1710 + border: 0;
1711 + margin: 0;
1712 + padding: 0;
1713 +}
1714 +
1614 1715 .block-editor-duotone-control__popover.components-popover > .components-popover__content {
1615 1716 padding: 8px;
1616 1717 width: 260px;
1617 1718 }
@@ -1664,8 +1765,13 @@
1664 1765 .block-editor-global-styles-state-control__badges {
1665 1766 min-height: 24px;
1666 1767 }
1667 1768
1769 +.block-editor-global-styles-state-control__badge-tooltip-trigger {
1770 + display: inline-flex;
1771 + max-width: 100%;
1772 +}
1773 +
1668 1774 .block-editor-global-styles-filters-panel__dropdown,
1669 1775 .block-editor-global-styles__shadow-dropdown {
1670 1776 display: block;
1671 1777 padding: 0;
@@ -1683,8 +1789,17 @@
1683 1789 .block-editor-global-styles__shadow-dropdown-toggle.is-open {
1684 1790 background-color: #f0f0f0;
1685 1791 }
1686 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 +
1687 1802 .block-editor-global-styles__shadow-editor__remove-button {
1688 1803 position: absolute;
1689 1804 left: 0;
1690 1805 top: 8px;
@@ -1705,11 +1820,9 @@
1705 1820 }
1706 1821 }
1707 1822
1708 1823 .block-editor-global-styles__shadow-indicator {
1709 - -webkit-appearance: none;
1710 - -moz-appearance: none;
1711 - appearance: none;
1824 + appearance: none;
1712 1825 background: none;
1713 1826 color: #2f2f2f;
1714 1827 border: #e0e0e0 1px solid;
1715 1828 border-radius: 2px;
@@ -1768,8 +1881,187 @@
1768 1881 opacity: 1;
1769 1882 }
1770 1883 }
1771 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 +
1772 2064 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer {
1773 2065 z-index: 30;
1774 2066 }
1775 2067 .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * {
@@ -1874,16 +2166,8 @@
1874 2166 animation: components-button__appear-animation 0.1s ease;
1875 2167 animation-fill-mode: forwards;
1876 2168 }
1877 2169 }
1878 -.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 {
1879 - box-shadow: none;
1880 - outline: none;
1881 -}
1882 -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before {
1883 - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
1884 - outline: 2px solid transparent;
1885 -}
1886 2170
1887 2171 .block-editor-grid-item-mover__move-vertical-button-container {
1888 2172 display: flex;
1889 2173 position: relative;
@@ -1997,8 +2281,27 @@
1997 2281 position: absolute;
1998 2282 left: 0;
1999 2283 }
2000 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 +
2001 2304 .block-editor-block-types-list__list-item {
2002 2305 display: block;
2003 2306 width: 33.33%;
2004 2307 padding: 0;
@@ -2028,9 +2331,10 @@
2028 2331 align-items: stretch;
2029 2332 justify-content: center;
2030 2333 cursor: var(--wpds-cursor-control, pointer);
2031 2334 background: transparent;
2032 - word-break: break-word;
2335 + word-break: normal;
2336 + overflow-wrap: break-word;
2033 2337 }
2034 2338 @media not (prefers-reduced-motion) {
2035 2339 .components-button.block-editor-block-types-list__item {
2036 2340 transition: all 0.05s ease-in-out;
@@ -2062,17 +2366,8 @@
2062 2366 opacity: 0.04;
2063 2367 background: var(--wp-admin-theme-color);
2064 2368 pointer-events: none;
2065 2369 }
2066 -.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active {
2067 - color: #fff;
2068 - background: #1e1e1e;
2069 - outline: 2px solid transparent;
2070 - outline-offset: -2px;
2071 -}
2072 -.components-button.block-editor-block-types-list__item:not(:disabled):focus {
2073 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2074 -}
2075 2370
2076 2371 .block-editor-block-types-list__item-icon {
2077 2372 padding: 12px 20px;
2078 2373 color: #1e1e1e;
@@ -2245,9 +2540,9 @@
2245 2540 display: inline-block;
2246 2541 width: 100%;
2247 2542 }
2248 2543 .block-editor-link-control__search-item .components-menu-item__item mark {
2249 - font-weight: 600;
2544 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2250 2545 color: inherit;
2251 2546 background-color: transparent;
2252 2547 }
2253 2548 .block-editor-link-control__search-item .components-menu-item__shortcut {
@@ -2294,9 +2589,9 @@
2294 2589 width: 32px;
2295 2590 max-height: 32px;
2296 2591 }
2297 2592 .block-editor-link-control__preview .block-editor-link-control__preview-title {
2298 - line-height: 1.1;
2593 + line-height: var(--wpds-typography-line-height-sm, 20px);
2299 2594 }
2300 2595 .block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
2301 2596 box-shadow: none;
2302 2597 }
@@ -2305,14 +2600,14 @@
2305 2600 outline: 2px solid transparent;
2306 2601 text-decoration: none;
2307 2602 }
2308 2603 .block-editor-link-control__preview .block-editor-link-control__preview-title mark {
2309 - font-weight: 600;
2604 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2310 2605 color: inherit;
2311 2606 background-color: transparent;
2312 2607 }
2313 2608 .block-editor-link-control__preview .block-editor-link-control__preview-title span {
2314 - font-weight: normal;
2609 + font-weight: 400;
2315 2610 }
2316 2611 .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
2317 2612 position: absolute;
2318 2613 width: 1px;
@@ -2319,9 +2614,9 @@
2319 2614 height: 1px;
2320 2615 padding: 0;
2321 2616 margin: -1px;
2322 2617 overflow: hidden;
2323 - clip: rect(0, 0, 0, 0);
2618 + clip-path: inset(50%);
2324 2619 border: 0;
2325 2620 }
2326 2621
2327 2622 .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
@@ -2463,9 +2758,8 @@
2463 2758 .link-preview-button.components-button {
2464 2759 width: 100%;
2465 2760 height: auto;
2466 2761 padding: 12px;
2467 - box-shadow: inset 0 0 0 1px #949494;
2468 2762 border-color: #949494;
2469 2763 }
2470 2764
2471 2765 .link-preview-button__image-container {
@@ -2476,10 +2770,9 @@
2476 2770
2477 2771 .link-preview-button__image {
2478 2772 width: 100%;
2479 2773 height: 100%;
2480 - -o-object-fit: cover;
2481 - object-fit: cover;
2774 + object-fit: cover;
2482 2775 border-radius: 2px;
2483 2776 }
2484 2777
2485 2778 .link-preview-button__content {
@@ -2504,9 +2797,9 @@
2504 2797 }
2505 2798
2506 2799 .link-preview-button__title {
2507 2800 margin-top: 4px;
2508 - font-weight: 500;
2801 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2509 2802 color: #1e1e1e;
2510 2803 display: block;
2511 2804 }
2512 2805
@@ -2541,8 +2834,11 @@
2541 2834 .block-editor-list-view-leaf {
2542 2835 position: relative;
2543 2836 transform: translateY(0);
2544 2837 }
2838 +.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting {
2839 + z-index: 1;
2840 +}
2545 2841 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
2546 2842 cursor: grab;
2547 2843 }
2548 2844 .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] {
@@ -2553,13 +2849,8 @@
2553 2849 }
2554 2850 .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2555 2851 fill: currentColor;
2556 2852 }
2557 -@media (forced-colors: active) {
2558 - .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
2559 - fill: CanvasText;
2560 - }
2561 -}
2562 2853 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
2563 2854 color: inherit;
2564 2855 }
2565 2856 .block-editor-list-view-leaf.is-selected td {
@@ -2571,23 +2862,45 @@
2571 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,
2572 2863 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
2573 2864 color: var(--wp-block-synced-color);
2574 2865 }
2575 -.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
2576 - 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);
2577 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 +}
2578 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 {
2579 2875 color: #fff;
2580 2876 }
2581 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after {
2582 - 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)));
2583 2882 }
2584 -.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after {
2585 - 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 + }
2586 2902 }
2587 -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus {
2588 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff;
2589 -}
2590 2903 .block-editor-list-view-leaf.is-first-selected td:first-child {
2591 2904 border-top-right-radius: 2px;
2592 2905 }
2593 2906 .block-editor-list-view-leaf.is-first-selected td:last-child {
@@ -2709,8 +3022,9 @@
2709 3022 }
2710 3023 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
2711 3024 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
2712 3025 box-shadow: none;
3026 + outline: none;
2713 3027 }
2714 3028 .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
2715 3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2716 3030 content: "";
@@ -2715,13 +3029,16 @@
2715 3029 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
2716 3030 content: "";
2717 3031 position: absolute;
2718 3032 top: 0;
2719 - left: -29px;
3033 + left: -28px;
2720 3034 bottom: 0;
2721 3035 right: 0;
2722 3036 border-radius: inherit;
2723 - 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);
2724 3041 z-index: 2;
2725 3042 pointer-events: none;
2726 3043 }
2727 3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
@@ -2726,13 +3043,8 @@
2726 3043 }
2727 3044 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
2728 3045 left: 0;
2729 3046 }
2730 -.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu,
2731 -.block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
2732 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
2733 - z-index: 1;
2734 -}
2735 3047 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
2736 3048 opacity: 1;
2737 3049 }
2738 3050 @keyframes __wp-base-styles-fade-in {
@@ -2802,14 +3114,8 @@
2802 3114 }
2803 3115 .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg {
2804 3116 top: -4px;
2805 3117 }
2806 -.block-editor-list-view-leaf .block-editor-block-mover-button::before {
2807 - height: 16px;
2808 - min-width: 100%;
2809 - right: 0;
2810 - left: 0;
2811 -}
2812 3118 .block-editor-list-view-leaf .block-editor-inserter__toggle {
2813 3119 background: #1e1e1e;
2814 3120 color: #fff;
2815 3121 height: 24px;
@@ -2818,8 +3124,14 @@
2818 3124 }
2819 3125 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
2820 3126 color: #fff;
2821 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 +}
2822 3134 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg {
2823 3135 right: 2px;
2824 3136 position: relative;
2825 3137 }
@@ -2840,8 +3152,19 @@
2840 3152 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
2841 3153 position: absolute;
2842 3154 left: 0;
2843 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;
2844 3167 }
2845 3168 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
2846 3169 background: rgba(0, 0, 0, 0.3);
2847 3170 color: #fff;
@@ -2868,8 +3191,25 @@
2868 3191 }
2869 3192 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) {
2870 3193 box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
2871 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 +}
2872 3212
2873 3213 .block-editor-list-view-draggable-chip {
2874 3214 opacity: 0.8;
2875 3215 }
@@ -3066,11 +3406,15 @@
3066 3406 padding: 16px;
3067 3407 }
3068 3408
3069 3409 .block-editor-multi-selection-inspector__card-title {
3070 - font-weight: 499;
3410 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3071 3411 }
3072 3412
3413 +.block-editor-multi-selection-inspector__card-description {
3414 + color: #757575;
3415 +}
3416 +
3073 3417 .block-editor-multi-selection-inspector__card .block-editor-block-icon {
3074 3418 margin-right: -2px;
3075 3419 padding: 0 3px;
3076 3420 width: 36px;
@@ -3076,8 +3420,13 @@
3076 3420 width: 36px;
3077 3421 height: 24px;
3078 3422 }
3079 3423
3424 +.block-editor-plain-text {
3425 + width: 100%;
3426 + field-sizing: content;
3427 +}
3428 +
3080 3429 .block-editor-responsive-block-control {
3081 3430 margin-bottom: 28px;
3082 3431 border-bottom: 1px solid #ccc;
3083 3432 padding-bottom: 14px;
@@ -3093,9 +3442,9 @@
3093 3442 margin-right: -3px;
3094 3443 }
3095 3444
3096 3445 .block-editor-responsive-block-control__label {
3097 - font-weight: 600;
3446 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3098 3447 margin-bottom: 0.6em;
3099 3448 margin-right: -3px;
3100 3449 }
3101 3450
@@ -3115,9 +3464,9 @@
3115 3464 overflow: hidden;
3116 3465 padding: 0;
3117 3466 position: absolute;
3118 3467 width: 1px;
3119 - word-wrap: normal !important;
3468 + overflow-wrap: normal !important;
3120 3469 word-break: normal !important;
3121 3470 }
3122 3471
3123 3472 .preset-input-control__wrapper > * {
@@ -3172,9 +3521,9 @@
3172 3521 top: -9999em;
3173 3522 }
3174 3523 .block-editor-skip-to-selected-block:focus {
3175 3524 font-size: 14px;
3176 - font-weight: 600;
3525 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3177 3526 background: #f1f1f1;
3178 3527 z-index: 100000;
3179 3528 }
3180 3529
@@ -3370,8 +3719,13 @@
3370 3719 padding: 16px;
3371 3720 border-top: 1px solid #1e1e1e;
3372 3721 }
3373 3722
3723 +.block-editor-url-popover__link-container-content {
3724 + display: flex;
3725 + align-items: center;
3726 +}
3727 +
3374 3728 .block-editor-url-popover__link-editor,
3375 3729 .block-editor-url-popover__link-viewer {
3376 3730 display: flex;
3377 3731 }
@@ -3409,35 +3763,8 @@
3409 3763 color: #757575;
3410 3764 font-size: 12px;
3411 3765 }
3412 3766
3413 -/**
3414 - * ItemGroup-like border styles for the background panel's ToolsPanelItems.
3415 - * Replicates the separated border of the `ItemGroup` component while
3416 - * allowing for hidden placeholder items (same approach as the color panel).
3417 - */
3418 -.block-editor-background-panel__item {
3419 - padding: 0;
3420 - max-width: 100%;
3421 - position: relative;
3422 - border-right: 1px solid #ddd;
3423 - border-left: 1px solid #ddd;
3424 - border-bottom: 1px solid #ddd;
3425 -}
3426 -.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
3427 - border-top-right-radius: 2px;
3428 - border-top-left-radius: 2px;
3429 - border-top: 1px solid #ddd;
3430 -}
3431 -.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
3432 - border-bottom-right-radius: 2px;
3433 - border-bottom-left-radius: 2px;
3434 -}
3435 -.block-editor-background-panel__item > div,
3436 -.block-editor-background-panel__item > div > button {
3437 - border-radius: inherit;
3438 -}
3439 -
3440 3767 .background-block-support-panel {
3441 3768 /* Increased specificity required to remove the slot wrapper's row gap */
3442 3769 }
3443 3770 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
@@ -3443,180 +3770,8 @@
3443 3770 .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper {
3444 3771 row-gap: 0;
3445 3772 }
3446 3773
3447 -.block-editor-content-only-controls__link {
3448 - width: 100%;
3449 - box-shadow: inset 0 0 0 1px #ccc;
3450 -}
3451 -.block-editor-content-only-controls__link:focus:not(:disabled) {
3452 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3453 -}
3454 -
3455 -.block-editor-content-only-controls__link-row {
3456 - align-items: center;
3457 -}
3458 -
3459 -.block-editor-content-only-controls__link-title {
3460 - width: 100%;
3461 - white-space: nowrap;
3462 - text-overflow: ellipsis;
3463 - overflow: hidden;
3464 -}
3465 -
3466 -.block-editor-content-only-controls__media {
3467 - width: 100%;
3468 - box-shadow: inset 0 0 0 1px #ccc;
3469 - padding-left: 32px;
3470 -}
3471 -.block-editor-content-only-controls__media:focus:not(:disabled) {
3472 - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3473 -}
3474 -
3475 -.block-editor-content-only-controls__media-replace-flow {
3476 - display: block;
3477 -}
3478 -
3479 -.block-editor-content-only-controls__media-row {
3480 - align-items: center;
3481 -}
3482 -
3483 -.block-editor-content-only-controls__media-placeholder {
3484 - width: 24px;
3485 - height: 24px;
3486 - border-radius: 2px;
3487 - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
3488 - display: inline-block;
3489 - padding: 0;
3490 - background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
3491 -}
3492 -
3493 -.block-editor-content-only-controls__media-title {
3494 - width: 100%;
3495 - white-space: nowrap;
3496 - text-overflow: ellipsis;
3497 - overflow: hidden;
3498 -}
3499 -
3500 -.block-editor-content-only-controls__media-thumbnail {
3501 - width: 20px;
3502 - height: 20px;
3503 - border-radius: 2px;
3504 - align-self: center;
3505 - overflow: hidden;
3506 -}
3507 -.block-editor-content-only-controls__media-thumbnail img {
3508 - width: 100% !important;
3509 - height: 100% !important;
3510 - -o-object-fit: cover;
3511 - object-fit: cover;
3512 -}
3513 -
3514 -.block-editor-content-only-controls {
3515 - position: relative;
3516 -}
3517 -
3518 -.block-editor-content-only-controls__media-reset {
3519 - position: absolute;
3520 - left: 0;
3521 - top: 8px;
3522 - margin: auto 8px auto;
3523 - opacity: 0;
3524 - border-radius: 2px;
3525 -}
3526 -@media not (prefers-reduced-motion) {
3527 - .block-editor-content-only-controls__media-reset {
3528 - transition: opacity 0.1s ease-in-out;
3529 - }
3530 -}
3531 -.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 {
3532 - opacity: 1;
3533 -}
3534 -@media (hover: none) {
3535 - .block-editor-content-only-controls__media-reset {
3536 - opacity: 1;
3537 - }
3538 -}
3539 -
3540 -.block-editor-content-only-controls__rich-text {
3541 - width: 100%;
3542 - margin: 0;
3543 - background: #fff;
3544 - color: #1e1e1e;
3545 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3546 - padding: 6px 8px;
3547 - /* Fonts smaller than 16px causes mobile safari to zoom. */
3548 - font-size: 16px;
3549 - /* Override core line-height. To be reviewed. */
3550 - line-height: normal;
3551 - box-shadow: 0 0 0 transparent;
3552 - border-radius: 2px;
3553 - border: 1px solid #949494;
3554 -}
3555 -@media not (prefers-reduced-motion) {
3556 - .block-editor-content-only-controls__rich-text {
3557 - transition: box-shadow 0.1s linear;
3558 - }
3559 -}
3560 -@media (min-width: 600px) {
3561 - .block-editor-content-only-controls__rich-text {
3562 - font-size: 13px;
3563 - /* Override core line-height. To be reviewed. */
3564 - line-height: normal;
3565 - }
3566 -}
3567 -.block-editor-content-only-controls__rich-text:focus {
3568 - border-color: var(--wp-admin-theme-color, #3858e9);
3569 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
3570 - outline: 2px solid transparent;
3571 -}
3572 -.block-editor-content-only-controls__rich-text::-moz-placeholder {
3573 - color: rgba(30, 30, 30, 0.62);
3574 -}
3575 -.block-editor-content-only-controls__rich-text::placeholder {
3576 - color: rgba(30, 30, 30, 0.62);
3577 -}
3578 -.block-editor-content-only-controls__rich-text {
3579 - border-color: #949494;
3580 -}
3581 -.block-editor-content-only-controls__rich-text::-moz-placeholder {
3582 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3583 -}
3584 -.block-editor-content-only-controls__rich-text::placeholder {
3585 - color: color-mix(in srgb, #1e1e1e, transparent 38%);
3586 -}
3587 -.block-editor-content-only-controls__rich-text {
3588 - min-height: 40px;
3589 - padding: 12px;
3590 -}
3591 -
3592 -.block-editor-block-fields__container {
3593 - padding: 0 16px 16px;
3594 -}
3595 -.block-editor-block-fields__container:first-of-type {
3596 - padding-block-start: 8px;
3597 - /*
3598 - * Add border for the entire content controls and remove the similar border
3599 - * for tools panel.
3600 - */
3601 - border-block-start: 1px solid #e0e0e0;
3602 -}
3603 -
3604 -.block-editor-block-fields__header {
3605 - padding: 8px 0;
3606 - margin-bottom: 4px;
3607 -}
3608 -
3609 -.block-editor-block-fields__header-icon {
3610 - flex: 0 0 24px;
3611 -}
3612 -
3613 -.block-editor-block-fields__header-title {
3614 - flex: 1;
3615 - /* Override the default margin on a h2 element. */
3616 - margin: 0 !important;
3617 -}
3618 -
3619 3774 .block-editor-hooks__block-hooks {
3620 3775 /**
3621 3776 * Un-reverse the flex direction for the toggle's label.
3622 3777 */
@@ -3650,17 +3805,14 @@
3650 3805 }
3651 3806 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
3652 3807 row-gap: 0;
3653 3808 }
3654 -.color-block-support-panel {
3655 - /**
3656 - * After converting PanelColorGradientSettings to render as a ToolsPanel
3657 - * we need to remove the top margin when wrapping inner content due to
3658 - * rendering via SlotFills.
3659 - */
3809 +
3810 +.elements-block-support-panel {
3811 + /* Increased specificity required to remove the slot wrapper's row gap */
3660 3812 }
3661 -.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
3662 - margin-top: 0;
3813 +.elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
3814 + row-gap: 0;
3663 3815 }
3664 3816
3665 3817 .dimensions-block-support-panel .single-column {
3666 3818 grid-column: span 1;
@@ -3953,9 +4105,9 @@
3953 4105 }
3954 4106 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list {
3955 4107 display: grid;
3956 4108 grid-template-columns: 1fr 1fr;
3957 - grid-gap: 12px;
4109 + gap: 12px;
3958 4110 }
3959 4111 .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
3960 4112 margin-bottom: 0;
3961 4113 }
@@ -3967,9 +4119,9 @@
3967 4119 display: inline-block;
3968 4120 background: none;
3969 4121 border: none;
3970 4122 padding: 0;
3971 - 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;
3972 4124 font-size: 13px;
3973 4125 line-height: 0;
3974 4126 }
3975 4127 @media (min-width: 782px) {
@@ -4103,9 +4255,9 @@
4103 4255 margin: 0 0 0 12px;
4104 4256 color: #757575;
4105 4257 text-transform: uppercase;
4106 4258 font-size: 11px;
4107 - font-weight: 499;
4259 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4108 4260 }
4109 4261
4110 4262 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
4111 4263 height: 36px;
@@ -4141,12 +4293,8 @@
4141 4293 .block-editor-inserter__parent-block-header .block-editor-block-icon {
4142 4294 margin-left: 8px;
4143 4295 }
4144 4296
4145 -.block-editor-inserter__preview-container__popover {
4146 - top: 16px !important;
4147 -}
4148 -
4149 4297 .block-editor-inserter__preview-container {
4150 4298 display: none;
4151 4299 width: 280px;
4152 4300 padding: 16px;
@@ -4287,9 +4435,9 @@
4287 4435
4288 4436 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list {
4289 4437 display: grid;
4290 4438 grid-template-columns: 1fr 1fr;
4291 - grid-gap: 8px;
4439 + gap: 8px;
4292 4440 }
4293 4441 .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
4294 4442 margin-bottom: 0;
4295 4443 }
@@ -4304,59 +4452,54 @@
4304 4452 .block-editor-inserter__popover.is-quick > .components-popover__content {
4305 4453 padding: 0;
4306 4454 }
4307 4455
4308 -.block-editor-inserter__quick-inserter-expand.components-button {
4309 - display: block;
4310 - background: #1e1e1e;
4311 - color: #fff;
4456 +.block-editor-inserter__quick-inserter-expand {
4457 + padding: 0 16px 16px;
4458 +}
4459 +
4460 +.block-editor-inserter__quick-inserter-expand-toggle {
4312 4461 width: 100%;
4313 - border-radius: 0;
4462 + justify-content: center;
4314 4463 }
4315 -.block-editor-inserter__quick-inserter-expand.components-button:hover {
4316 - color: #fff;
4317 -}
4318 -.block-editor-inserter__quick-inserter-expand.components-button:active {
4319 - color: #ccc;
4320 -}
4321 -.block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) {
4322 - box-shadow: none;
4323 - background: var(--wp-admin-theme-color);
4324 - border-color: var(--wp-admin-theme-color);
4325 -}
4326 4464
4327 4465 .block-editor-block-patterns-explorer__sidebar {
4328 - position: absolute;
4329 - top: 72px;
4330 - right: 0;
4331 - bottom: 0;
4332 - width: 280px;
4333 - padding: 24px 24px 24px;
4334 - overflow-x: visible;
4335 - overflow-y: auto;
4466 + padding-bottom: 24px;
4336 4467 }
4337 -.block-editor-block-patterns-explorer__sidebar__categories-list__item {
4338 - display: block;
4339 - width: 100%;
4340 - height: 48px;
4341 - 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 + }
4342 4479 }
4343 -.block-editor-block-patterns-explorer__search {
4344 - margin-bottom: 32px;
4480 +
4481 +@media (min-width: 782px) {
4482 + .block-editor-block-patterns-explorer__panel {
4483 + margin-inline-start: 280px;
4484 + }
4345 4485 }
4346 -.block-editor-block-patterns-explorer__search-results-count {
4347 - padding-bottom: 32px;
4486 +
4487 +.block-editor-block-patterns-explorer__no-results {
4488 + padding: 32px;
4489 + text-align: center;
4348 4490 }
4491 +
4349 4492 .block-editor-block-patterns-explorer__list {
4350 - margin-right: 280px;
4351 4493 padding: 24px 0 32px;
4352 4494 }
4353 4495 .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
4354 4496 width: 380px;
4355 4497 }
4498 +
4356 4499 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
4357 4500 display: grid;
4358 - grid-gap: 32px;
4501 + gap: 32px;
4359 4502 grid-template-columns: repeat(1, 1fr);
4360 4503 margin-bottom: 16px;
4361 4504 }
4362 4505 @media (min-width: 1080px) {
@@ -4378,9 +4521,9 @@
4378 4521 max-height: 800px;
4379 4522 }
4380 4523
4381 4524 .components-heading.block-editor-inserter__patterns-category-panel-title {
4382 - font-weight: 499;
4525 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4383 4526 }
4384 4527
4385 4528 .block-editor-inserter__patterns-explore-button.components-button,
4386 4529 .block-editor-inserter__media-library-button.components-button {
@@ -4389,17 +4532,26 @@
4389 4532 margin-top: 16px;
4390 4533 width: 100%;
4391 4534 }
4392 4535
4536 +.block-editor-inserter__media-mobile-screen {
4537 + display: flex;
4538 + flex-direction: column;
4539 + align-self: stretch;
4540 +}
4541 +
4393 4542 .block-editor-inserter__media-panel {
4394 - min-height: 100%;
4395 4543 padding: 0 16px;
4396 4544 display: flex;
4397 4545 flex-direction: column;
4546 + flex: 1;
4547 + min-height: 0;
4398 4548 }
4399 4549 @media (min-width: 782px) {
4400 4550 .block-editor-inserter__media-panel {
4401 4551 padding: 0;
4552 + flex: 0 1 auto;
4553 + min-height: 100%;
4402 4554 }
4403 4555 }
4404 4556 .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner {
4405 4557 height: 100%;
@@ -4416,9 +4568,68 @@
4416 4568 margin-bottom: 0;
4417 4569 padding: 16px 24px 16px;
4418 4570 }
4419 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 +}
4420 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 +
4421 4632 .block-editor-inserter__media-list__list-item {
4422 4633 position: relative;
4423 4634 cursor: var(--wpds-cursor-control, pointer);
4424 4635 margin-bottom: 24px;
@@ -4431,9 +4642,9 @@
4431 4642 }
4432 4643 .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * {
4433 4644 outline-color: rgba(0, 0, 0, 0.3);
4434 4645 }
4435 -.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 {
4436 4647 display: block;
4437 4648 }
4438 4649 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options {
4439 4650 position: absolute;
@@ -4615,12 +4826,12 @@
4615 4826 flex-direction: column;
4616 4827 align-items: start;
4617 4828 }
4618 4829 .block-editor-block-visibility-modal__options-checkbox--everywhere {
4619 - font-weight: 600;
4830 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4620 4831 }
4621 4832 .block-editor-block-visibility-modal__options-icon--checked {
4622 - fill: #ddd;
4833 + color: #ddd;
4623 4834 }
4624 4835 .block-editor-block-visibility-modal__sub-options {
4625 4836 width: 100%;
4626 4837 padding-inline-start: 12px;
@@ -4630,11 +4841,52 @@
4630 4841 color: #757575;
4631 4842 }
4632 4843
4633 4844 .block-editor-block-visibility-info {
4634 - padding-top: 4px;
4635 - padding-bottom: 4px;
4636 4845 margin: 0 16px 16px;
4637 - display: flex;
4638 - align-items: center;
4639 - 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;
4640 4892 }