PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/block-editor/style-rtl.css +649 -397 23.4.0 → trunk View file →
@@ -67,8 +67,14 @@
67 67 /**
68 68 * Focus styles.
69 69 */
70 70 /**
71 + * Standard focus rings for the WordPress Design System.
72 + *
73 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
74 + * e.g. `&:focus { @include outset-ring__focus(); }`.
75 + */
76 +/**
71 77 * Applies editor left position to the selector passed as argument
72 78 */
73 79 /**
74 80 * Styles that are reused verbatim in a few places
@@ -157,11 +163,8 @@
157 163 }
158 164 .block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:hover {
159 165 color: var(--wp-admin-theme-color);
160 166 }
161 -.block-editor-global-styles-background-panel__image-tools-panel-item button.components-button:focus {
162 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
163 -}
164 167 .block-editor-global-styles-background-panel__image-tools-panel-item .block-editor-global-styles-background-panel__loading {
165 168 height: 100%;
166 169 position: absolute;
167 170 z-index: 1;
@@ -193,12 +196,23 @@
193 196 .block-editor-global-styles-background-panel__reset {
194 197 transition: opacity 0.1s ease-in-out;
195 198 }
196 199 }
200 +.block-editor-global-styles-background-panel__reset.has-local-override-from-global-styles__reset {
201 + position: absolute;
202 + display: inline-flex;
203 + align-items: center;
204 + justify-content: center;
205 + top: 50%;
206 + transform: translateY(-50%);
207 + margin-block: 0;
208 + margin-inline: 0 8px;
209 + opacity: 1;
210 +}
197 211 .block-editor-global-styles-background-panel__reset.block-editor-global-styles-background-panel__reset {
198 212 border-radius: 2px;
199 213 }
200 -.block-editor-global-styles-background-panel__dropdown-toggle:hover + .block-editor-global-styles-background-panel__reset, .block-editor-global-styles-background-panel__reset:focus, .block-editor-global-styles-background-panel__reset:hover {
214 +.block-editor-global-styles-background-panel__dropdown-toggle:hover + .block-editor-global-styles-background-panel__reset, .block-editor-global-styles-background-panel__reset:focus, .block-editor-global-styles-background-panel__reset:focus-within, .block-editor-global-styles-background-panel__reset:hover {
201 215 opacity: 1;
202 216 }
203 217 @media (hover: none) {
204 218 .block-editor-global-styles-background-panel__reset {
@@ -243,11 +257,11 @@
243 257 z-index: 159890;
244 258 }
245 259
246 260 .block-editor-global-styles-background-panel__media-replace-popover .components-popover__content {
247 - width: 226px;
261 + width: auto;
248 262 }
249 -.block-editor-global-styles-background-panel__media-replace-popover .components-button {
263 +.block-editor-global-styles-background-panel__media-replace-popover .components-menu-item__button.components-button {
250 264 padding: 0 8px;
251 265 }
252 266 .block-editor-global-styles-background-panel__media-replace-popover .components-button .components-menu-items__item-icon.has-icon-right {
253 267 margin-right: 16px;
@@ -281,13 +295,8 @@
281 295 }
282 296 .block-editor-block-icon.has-colors svg {
283 297 fill: currentColor;
284 298 }
285 -@media (forced-colors: active) {
286 - .block-editor-block-icon.has-colors svg {
287 - fill: CanvasText;
288 - }
289 -}
290 299 .block-editor-block-icon svg {
291 300 min-width: 20px;
292 301 min-height: 20px;
293 302 max-width: 24px;
@@ -330,8 +339,21 @@
330 339 padding: 32px 16px;
331 340 text-align: center;
332 341 }
333 342
343 +.block-editor-block-inspector__state-badges {
344 + display: flex;
345 + align-items: center;
346 + flex-wrap: wrap;
347 + gap: 8px;
348 + padding: 8px 16px;
349 + margin-top: -16px;
350 +}
351 +
352 +.block-editor-block-inspector__state-badges-text {
353 + white-space: nowrap;
354 +}
355 +
334 356 .block-editor-block-inspector__no-block-tools {
335 357 border-top: 1px solid #ddd;
336 358 }
337 359
@@ -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 }