| @@ -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-left: 16px; |
| @@ -281,13 +295,8 @@ | ||
| 281 | 295 | } |
| 282 | 296 | .block-editor-block-icon.has-colors svg { |
| 283 | 297 | fill: currentColor; |
| 284 | 298 | } |
| 285 | -@media (forced-colors: active) { | |
| 286 | - .block-editor-block-icon.has-colors svg { | |
| 287 | - fill: CanvasText; | |
| 288 | - } | |
| 289 | -} | |
| 290 | 299 | .block-editor-block-icon svg { |
| 291 | 300 | min-width: 20px; |
| 292 | 301 | min-height: 20px; |
| 293 | 302 | max-width: 24px; |
| @@ -330,8 +339,21 @@ | ||
| 330 | 339 | padding: 32px 16px; |
| 331 | 340 | text-align: center; |
| 332 | 341 | } |
| 333 | 342 | |
| 343 | +.block-editor-block-inspector__state-badges { | |
| 344 | + display: flex; | |
| 345 | + align-items: center; | |
| 346 | + flex-wrap: wrap; | |
| 347 | + gap: 8px; | |
| 348 | + padding: 8px 16px; | |
| 349 | + margin-top: -16px; | |
| 350 | +} | |
| 351 | + | |
| 352 | +.block-editor-block-inspector__state-badges-text { | |
| 353 | + white-space: nowrap; | |
| 354 | +} | |
| 355 | + | |
| 334 | 356 | .block-editor-block-inspector__no-block-tools { |
| 335 | 357 | border-top: 1px solid #ddd; |
| 336 | 358 | } |
| 337 | 359 | |
| @@ -418,8 +440,18 @@ | ||
| 418 | 440 | .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover { |
| 419 | 441 | color: #fff; |
| 420 | 442 | background: var(--wp-admin-theme-color); |
| 421 | 443 | } |
| 444 | +@media not (prefers-reduced-motion) { | |
| 445 | + .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon svg, | |
| 446 | + .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon svg { | |
| 447 | + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; | |
| 448 | + } | |
| 449 | +} | |
| 450 | +.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg, | |
| 451 | +.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg { | |
| 452 | + transform: rotate(45deg); | |
| 453 | +} | |
| 422 | 454 | |
| 423 | 455 | .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon { |
| 424 | 456 | background: var(--wp-admin-theme-color); |
| 425 | 457 | } |
| @@ -448,8 +480,14 @@ | ||
| 448 | 480 | } |
| 449 | 481 | .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent { |
| 450 | 482 | margin-left: 0; |
| 451 | 483 | } |
| 484 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar.has-parent:has(.block-editor-block-parent-selector__inserter) { | |
| 485 | + margin-left: 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-left: 0; | |
| 489 | +} | |
| 452 | 490 | .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar { |
| 453 | 491 | overflow: visible; |
| 454 | 492 | } |
| 455 | 493 | .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar .components-toolbar-group, |
| @@ -470,8 +508,67 @@ | ||
| 470 | 508 | .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector { |
| 471 | 509 | position: absolute; |
| 472 | 510 | left: calc(-48px - 8px - 1px); |
| 473 | 511 | } |
| 512 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector:has(.block-editor-block-parent-selector__inserter) { | |
| 513 | + left: 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-right: 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 | + left: 50%; | |
| 535 | + transform: translate(-50%, -50%); | |
| 536 | + width: 24px; | |
| 537 | + height: 24px; | |
| 538 | + border-radius: 2px; | |
| 539 | + background: #1e1e1e; | |
| 540 | +} | |
| 541 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover { | |
| 542 | + color: #fff; | |
| 543 | +} | |
| 544 | +.components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover::after { | |
| 545 | + background: var(--wp-admin-theme-color); | |
| 546 | +} | |
| 547 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon { | |
| 548 | + width: auto; | |
| 549 | + padding: 0 12px; | |
| 550 | + color: inherit; | |
| 551 | +} | |
| 552 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon svg { | |
| 553 | + display: none; | |
| 554 | +} | |
| 555 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon::after { | |
| 556 | + content: attr(aria-label); | |
| 557 | + position: static; | |
| 558 | + transform: none; | |
| 559 | + width: auto; | |
| 560 | + height: auto; | |
| 561 | + border-radius: 0; | |
| 562 | + background: none; | |
| 563 | + white-space: nowrap; | |
| 564 | +} | |
| 565 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover { | |
| 566 | + color: var(--wp-admin-theme-color); | |
| 567 | +} | |
| 568 | +.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__inserter.components-button.has-icon:hover::after { | |
| 569 | + background: none; | |
| 570 | +} | |
| 474 | 571 | .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::before { |
| 475 | 572 | content: ""; |
| 476 | 573 | } |
| 477 | 574 | .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector::after { |
| @@ -537,9 +634,9 @@ | ||
| 537 | 634 | .block-editor-block-lock-modal__options-all { |
| 538 | 635 | padding: 12px 0; |
| 539 | 636 | } |
| 540 | 637 | .block-editor-block-lock-modal__options-all .components-checkbox-control__label { |
| 541 | - font-weight: 600; | |
| 638 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 542 | 639 | } |
| 543 | 640 | |
| 544 | 641 | .block-editor-block-lock-modal__checklist-item { |
| 545 | 642 | display: flex; |
| @@ -551,9 +648,9 @@ | ||
| 551 | 648 | } |
| 552 | 649 | .block-editor-block-lock-modal__checklist-item .block-editor-block-lock-modal__lock-icon { |
| 553 | 650 | flex-shrink: 0; |
| 554 | 651 | margin-right: 12px; |
| 555 | - fill: #1e1e1e; | |
| 652 | + color: #1e1e1e; | |
| 556 | 653 | } |
| 557 | 654 | .block-editor-block-lock-modal__checklist-item:hover { |
| 558 | 655 | background-color: #f0f0f0; |
| 559 | 656 | border-radius: 2px; |
| @@ -656,13 +753,14 @@ | ||
| 656 | 753 | height: auto !important; |
| 657 | 754 | } |
| 658 | 755 | |
| 659 | 756 | .block-editor-block-card__title { |
| 660 | - font-weight: 499; | |
| 757 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 661 | 758 | display: flex; |
| 662 | 759 | align-items: center; |
| 663 | 760 | flex-wrap: wrap; |
| 664 | 761 | gap: 4px 8px; |
| 762 | + overflow-wrap: anywhere; | |
| 665 | 763 | } |
| 666 | 764 | .block-editor-block-card__title.block-editor-block-card__title { |
| 667 | 765 | font-size: 13px; |
| 668 | 766 | line-height: 1.4; |
| @@ -787,9 +885,9 @@ | ||
| 787 | 885 | min-width: 18px; |
| 788 | 886 | min-height: 18px; |
| 789 | 887 | } |
| 790 | 888 | .block-editor-block-draggable-chip .components-flex__item { |
| 791 | - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 889 | + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 792 | 890 | font-size: 13px; |
| 793 | 891 | } |
| 794 | 892 | |
| 795 | 893 | .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled { |
| @@ -831,8 +929,9 @@ | ||
| 831 | 929 | text-align: center; |
| 832 | 930 | } |
| 833 | 931 | |
| 834 | 932 | .block-editor-block-manager__category { |
| 933 | + isolation: isolate; | |
| 835 | 934 | margin: 0 0 24px 0; |
| 836 | 935 | } |
| 837 | 936 | |
| 838 | 937 | .block-editor-block-manager__category-title { |
| @@ -842,9 +941,9 @@ | ||
| 842 | 941 | background-color: #fff; |
| 843 | 942 | z-index: 1; |
| 844 | 943 | } |
| 845 | 944 | .block-editor-block-manager__category-title .components-checkbox-control__label { |
| 846 | - font-weight: 600; | |
| 945 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 847 | 946 | } |
| 848 | 947 | |
| 849 | 948 | .block-editor-block-manager__checklist { |
| 850 | 949 | margin-top: 0; |
| @@ -867,8 +966,9 @@ | ||
| 867 | 966 | } |
| 868 | 967 | .block-editor-block-manager__checklist-item .block-editor-block-icon { |
| 869 | 968 | margin-right: 10px; |
| 870 | 969 | fill: #1e1e1e; |
| 970 | + color: #1e1e1e; | |
| 871 | 971 | } |
| 872 | 972 | |
| 873 | 973 | .block-editor-block-manager__results { |
| 874 | 974 | border-top: 1px solid #ddd; |
| @@ -957,16 +1057,8 @@ | ||
| 957 | 1057 | animation: components-button__appear-animation 0.1s ease; |
| 958 | 1058 | animation-fill-mode: forwards; |
| 959 | 1059 | } |
| 960 | 1060 | } |
| 961 | -.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 { | |
| 962 | - box-shadow: none; | |
| 963 | - outline: none; | |
| 964 | -} | |
| 965 | -.components-button.block-editor-block-mover-button:focus-visible::before { | |
| 966 | - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 967 | - outline: 2px solid transparent; | |
| 968 | -} | |
| 969 | 1061 | |
| 970 | 1062 | .block-editor-block-navigation__container { |
| 971 | 1063 | min-width: 280px; |
| 972 | 1064 | } |
| @@ -975,9 +1067,9 @@ | ||
| 975 | 1067 | margin: 0 0 12px; |
| 976 | 1068 | color: #757575; |
| 977 | 1069 | text-transform: uppercase; |
| 978 | 1070 | font-size: 11px; |
| 979 | - font-weight: 499; | |
| 1071 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 980 | 1072 | } |
| 981 | 1073 | |
| 982 | 1074 | .block-editor-block-patterns-list__list-item { |
| 983 | 1075 | cursor: var(--wpds-cursor-control, pointer); |
| @@ -998,9 +1090,8 @@ | ||
| 998 | 1090 | outline: 0; |
| 999 | 1091 | } |
| 1000 | 1092 | .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title { |
| 1001 | 1093 | flex-grow: 1; |
| 1002 | - font-size: 12px; | |
| 1003 | 1094 | text-align: left; |
| 1004 | 1095 | } |
| 1005 | 1096 | .block-editor-block-patterns-list__item .block-editor-block-preview__container { |
| 1006 | 1097 | display: flex; |
| @@ -1040,9 +1131,9 @@ | ||
| 1040 | 1131 | min-width: 24px; |
| 1041 | 1132 | height: 24px; |
| 1042 | 1133 | } |
| 1043 | 1134 | .block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon { |
| 1044 | - fill: var(--wp-block-synced-color); | |
| 1135 | + color: var(--wp-block-synced-color); | |
| 1045 | 1136 | } |
| 1046 | 1137 | |
| 1047 | 1138 | .block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination { |
| 1048 | 1139 | border-top: 1px solid #2f2f2f; |
| @@ -1129,9 +1220,9 @@ | ||
| 1129 | 1220 | z-index: 1; |
| 1130 | 1221 | } |
| 1131 | 1222 | |
| 1132 | 1223 | .block-editor-block-quick-navigation__item { |
| 1133 | - font-weight: 400; | |
| 1224 | + font-weight: var(--wpds-typography-font-weight-default, 400); | |
| 1134 | 1225 | } |
| 1135 | 1226 | |
| 1136 | 1227 | .block-editor-block-rename-modal { |
| 1137 | 1228 | z-index: 1000001; |
| @@ -1154,37 +1245,17 @@ | ||
| 1154 | 1245 | grid-column: 1/-1; |
| 1155 | 1246 | } |
| 1156 | 1247 | |
| 1157 | 1248 | .block-editor-block-styles__variants { |
| 1158 | - display: flex; | |
| 1159 | - flex-wrap: wrap; | |
| 1160 | - justify-content: space-between; | |
| 1249 | + display: grid; | |
| 1161 | 1250 | gap: 8px; |
| 1162 | 1251 | } |
| 1163 | -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item { | |
| 1164 | - color: #1e1e1e; | |
| 1165 | - box-shadow: inset 0 0 0 1px #ddd; | |
| 1166 | - display: inline-block; | |
| 1167 | - 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; | |
| 1168 | 1256 | } |
| 1169 | -.block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover { | |
| 1170 | - color: var(--wp-admin-theme-color); | |
| 1171 | - box-shadow: inset 0 0 0 1px #ddd; | |
| 1172 | -} | |
| 1173 | -.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 { | |
| 1174 | - background-color: #1e1e1e; | |
| 1175 | - box-shadow: none; | |
| 1176 | -} | |
| 1177 | -.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 { | |
| 1178 | - color: #fff; | |
| 1179 | -} | |
| 1180 | -.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 { | |
| 1181 | - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 1182 | - outline: 2px solid transparent; | |
| 1183 | -} | |
| 1184 | 1257 | .block-editor-block-styles__variants .block-editor-block-styles__item-text { |
| 1185 | - word-break: break-all; | |
| 1186 | - white-space: normal; | |
| 1187 | 1258 | text-align: start; |
| 1188 | 1259 | text-align-last: center; |
| 1189 | 1260 | } |
| 1190 | 1261 | |
| @@ -1270,9 +1341,8 @@ | ||
| 1270 | 1341 | padding: 8px; |
| 1271 | 1342 | } |
| 1272 | 1343 | |
| 1273 | 1344 | .block-editor-block-types-list > [role=presentation] { |
| 1274 | - overflow: hidden; | |
| 1275 | 1345 | display: flex; |
| 1276 | 1346 | flex-wrap: wrap; |
| 1277 | 1347 | } |
| 1278 | 1348 | |
| @@ -1474,12 +1544,8 @@ | ||
| 1474 | 1544 | margin: 0; |
| 1475 | 1545 | min-width: 0; |
| 1476 | 1546 | } |
| 1477 | 1547 | |
| 1478 | -.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) { | |
| 1479 | - display: block; | |
| 1480 | -} | |
| 1481 | - | |
| 1482 | 1548 | @media screen and (min-width: 782px) { |
| 1483 | 1549 | .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches { |
| 1484 | 1550 | display: grid; |
| 1485 | 1551 | grid-template-columns: repeat(6, 28px); |
| @@ -1487,8 +1553,18 @@ | ||
| 1487 | 1553 | } |
| 1488 | 1554 | .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control { |
| 1489 | 1555 | margin-bottom: inherit; |
| 1490 | 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 | +} | |
| 1491 | 1567 | |
| 1492 | 1568 | .block-editor-panel-color-gradient-settings__dropdown-content { |
| 1493 | 1569 | min-height: 160px; |
| 1494 | 1570 | } |
| @@ -1500,8 +1576,12 @@ | ||
| 1500 | 1576 | .block-editor-panel-color-gradient-settings__color-indicator { |
| 1501 | 1577 | background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%); |
| 1502 | 1578 | } |
| 1503 | 1579 | |
| 1580 | +.block-editor-panel-color-gradient-settings__contrast-notice { | |
| 1581 | + margin-top: 16px; | |
| 1582 | +} | |
| 1583 | + | |
| 1504 | 1584 | /** |
| 1505 | 1585 | * The following styles replicate the separated border of the |
| 1506 | 1586 | * `ItemGroup` component but allows for hidden items. This is because |
| 1507 | 1587 | * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem` |
| @@ -1506,10 +1586,14 @@ | ||
| 1506 | 1586 | * `ItemGroup` component but allows for hidden items. This is because |
| 1507 | 1587 | * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem` |
| 1508 | 1588 | * must at least render a placeholder which would otherwise interfere |
| 1509 | 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. | |
| 1510 | 1594 | */ |
| 1511 | -.block-editor-tools-panel-color-gradient-settings__item { | |
| 1595 | +.block-editor-color-gradient-item { | |
| 1512 | 1596 | padding: 0; |
| 1513 | 1597 | max-width: 100%; |
| 1514 | 1598 | position: relative; |
| 1515 | 1599 | border-left: 1px solid #ddd; |
| @@ -1515,20 +1599,19 @@ | ||
| 1515 | 1599 | border-left: 1px solid #ddd; |
| 1516 | 1600 | border-right: 1px solid #ddd; |
| 1517 | 1601 | border-bottom: 1px solid #ddd; |
| 1518 | 1602 | } |
| 1519 | -.block-editor-tools-panel-color-gradient-settings__item:nth-child(1 of .block-editor-tools-panel-color-gradient-settings__item) { | |
| 1520 | - margin-top: 24px; | |
| 1603 | +.block-editor-color-gradient-item:nth-child(1 of .block-editor-color-gradient-item) { | |
| 1521 | 1604 | border-top-left-radius: 2px; |
| 1522 | 1605 | border-top-right-radius: 2px; |
| 1523 | 1606 | border-top: 1px solid #ddd; |
| 1524 | 1607 | } |
| 1525 | -.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) { | |
| 1526 | 1609 | border-bottom-left-radius: 2px; |
| 1527 | 1610 | border-bottom-right-radius: 2px; |
| 1528 | 1611 | } |
| 1529 | -.block-editor-tools-panel-color-gradient-settings__item > div, | |
| 1530 | -.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 { | |
| 1531 | 1614 | border-radius: inherit; |
| 1532 | 1615 | } |
| 1533 | 1616 | |
| 1534 | 1617 | .block-editor-tools-panel-color-gradient-settings__dropdown { |
| @@ -1545,13 +1628,17 @@ | ||
| 1545 | 1628 | background: #f0f0f0; |
| 1546 | 1629 | color: var(--wp-admin-theme-color); |
| 1547 | 1630 | } |
| 1548 | 1631 | .block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name { |
| 1632 | + min-width: 0; | |
| 1549 | 1633 | white-space: nowrap; |
| 1550 | 1634 | overflow: hidden; |
| 1551 | 1635 | text-overflow: ellipsis; |
| 1552 | 1636 | max-width: calc(100% - 44px); |
| 1553 | 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 | +} | |
| 1554 | 1641 | |
| 1555 | 1642 | .block-editor-panel-color-gradient-settings__dropdown { |
| 1556 | 1643 | width: 100%; |
| 1557 | 1644 | } |
| @@ -1558,8 +1645,21 @@ | ||
| 1558 | 1645 | .block-editor-panel-color-gradient-settings__dropdown .component-color-indicator { |
| 1559 | 1646 | flex-shrink: 0; |
| 1560 | 1647 | } |
| 1561 | 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 | + | |
| 1562 | 1662 | .block-editor-panel-color-gradient-settings__reset { |
| 1563 | 1663 | position: absolute; |
| 1564 | 1664 | right: 0; |
| 1565 | 1665 | top: 8px; |
| @@ -1581,9 +1681,22 @@ | ||
| 1581 | 1681 | .block-editor-panel-color-gradient-settings__reset { |
| 1582 | 1682 | opacity: 1; |
| 1583 | 1683 | } |
| 1584 | 1684 | } |
| 1685 | +.block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + .block-editor-panel-color-gradient-settings__reset { | |
| 1686 | + right: 28px; | |
| 1687 | +} | |
| 1585 | 1688 | |
| 1689 | +.block-editor-panel-color-gradient-settings__contrast-warning { | |
| 1690 | + position: absolute; | |
| 1691 | + right: 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 | + | |
| 1586 | 1699 | .block-editor-date-format-picker { |
| 1587 | 1700 | margin: 0 0 16px; |
| 1588 | 1701 | padding: 0; |
| 1589 | 1702 | border: none; |
| @@ -1592,8 +1705,14 @@ | ||
| 1592 | 1705 | .block-editor-date-format-picker__custom-format-select-control__custom-option { |
| 1593 | 1706 | border-top: 1px solid #ddd; |
| 1594 | 1707 | } |
| 1595 | 1708 | |
| 1709 | +.block-editor-dimension-control { | |
| 1710 | + border: 0; | |
| 1711 | + margin: 0; | |
| 1712 | + padding: 0; | |
| 1713 | +} | |
| 1714 | + | |
| 1596 | 1715 | .block-editor-duotone-control__popover.components-popover > .components-popover__content { |
| 1597 | 1716 | padding: 8px; |
| 1598 | 1717 | width: 260px; |
| 1599 | 1718 | } |
| @@ -1638,8 +1757,21 @@ | ||
| 1638 | 1757 | .block-editor-global-styles__clear-shadow { |
| 1639 | 1758 | text-align: right; |
| 1640 | 1759 | } |
| 1641 | 1760 | |
| 1761 | +.block-editor-global-styles-state-control { | |
| 1762 | + margin-top: -4px; | |
| 1763 | +} | |
| 1764 | + | |
| 1765 | +.block-editor-global-styles-state-control__badges { | |
| 1766 | + min-height: 24px; | |
| 1767 | +} | |
| 1768 | + | |
| 1769 | +.block-editor-global-styles-state-control__badge-tooltip-trigger { | |
| 1770 | + display: inline-flex; | |
| 1771 | + max-width: 100%; | |
| 1772 | +} | |
| 1773 | + | |
| 1642 | 1774 | .block-editor-global-styles-filters-panel__dropdown, |
| 1643 | 1775 | .block-editor-global-styles__shadow-dropdown { |
| 1644 | 1776 | display: block; |
| 1645 | 1777 | padding: 0; |
| @@ -1657,8 +1789,17 @@ | ||
| 1657 | 1789 | .block-editor-global-styles__shadow-dropdown-toggle.is-open { |
| 1658 | 1790 | background-color: #f0f0f0; |
| 1659 | 1791 | } |
| 1660 | 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 | + | |
| 1661 | 1802 | .block-editor-global-styles__shadow-editor__remove-button { |
| 1662 | 1803 | position: absolute; |
| 1663 | 1804 | right: 0; |
| 1664 | 1805 | top: 8px; |
| @@ -1741,8 +1882,189 @@ | ||
| 1741 | 1882 | opacity: 1; |
| 1742 | 1883 | } |
| 1743 | 1884 | } |
| 1744 | 1885 | |
| 1886 | +.block-editor-global-styles__text-shadow { | |
| 1887 | + width: 260px; | |
| 1888 | + padding: 8px; | |
| 1889 | +} | |
| 1890 | + | |
| 1891 | +.block-editor-global-styles__text-shadow-preview { | |
| 1892 | + display: flex; | |
| 1893 | + align-items: center; | |
| 1894 | + justify-content: center; | |
| 1895 | + height: 80px; | |
| 1896 | + border: #ddd 1px solid; | |
| 1897 | + border-radius: 2px; | |
| 1898 | + font-size: 24px; | |
| 1899 | + margin-bottom: 16px; | |
| 1900 | + /*rtl:begin:ignore*/ | |
| 1901 | + 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); | |
| 1902 | + background-position: 0 0, 8px 8px; | |
| 1903 | + /*rtl:end:ignore*/ | |
| 1904 | + background-size: 16px 16px; | |
| 1905 | +} | |
| 1906 | + | |
| 1907 | +.block-editor-global-styles__text-shadow-list-item { | |
| 1908 | + justify-content: space-between; | |
| 1909 | + gap: 8px; | |
| 1910 | + width: 100%; | |
| 1911 | +} | |
| 1912 | +.block-editor-global-styles__text-shadow-list-item:not(.is-active) svg { | |
| 1913 | + opacity: 0; | |
| 1914 | +} | |
| 1915 | + | |
| 1916 | +.block-editor-global-styles__text-shadow-dropdown { | |
| 1917 | + display: block; | |
| 1918 | + padding: 0; | |
| 1919 | + position: relative; | |
| 1920 | + border: 1px solid #ddd; | |
| 1921 | + border-radius: 2px; | |
| 1922 | +} | |
| 1923 | + | |
| 1924 | +.block-editor-global-styles__text-shadow-dropdown-toggle { | |
| 1925 | + width: 100%; | |
| 1926 | + padding: 8px; | |
| 1927 | +} | |
| 1928 | +.block-editor-global-styles__text-shadow-dropdown-toggle.is-open { | |
| 1929 | + background-color: #f0f0f0; | |
| 1930 | +} | |
| 1931 | + | |
| 1932 | +.block-editor-global-styles__text-shadow-remove-button { | |
| 1933 | + position: absolute; | |
| 1934 | + right: 8px; | |
| 1935 | + top: 8px; | |
| 1936 | + opacity: 0; | |
| 1937 | +} | |
| 1938 | +@media not (prefers-reduced-motion) { | |
| 1939 | + .block-editor-global-styles__text-shadow-remove-button { | |
| 1940 | + transition: opacity 0.1s ease-in-out; | |
| 1941 | + } | |
| 1942 | +} | |
| 1943 | +.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 { | |
| 1944 | + opacity: 1; | |
| 1945 | +} | |
| 1946 | +@media (hover: none) { | |
| 1947 | + .block-editor-global-styles__text-shadow-remove-button { | |
| 1948 | + opacity: 1; | |
| 1949 | + } | |
| 1950 | +} | |
| 1951 | + | |
| 1952 | +.is-inherited-from-global-styles .components-base-control__label, | |
| 1953 | +.is-inherited-from-global-styles .components-input-control__label { | |
| 1954 | + text-decoration-line: underline; | |
| 1955 | + text-decoration-style: dotted; | |
| 1956 | + text-decoration-thickness: 1px; | |
| 1957 | + text-underline-offset: 0.2em; | |
| 1958 | +} | |
| 1959 | +.is-inherited-from-global-styles .block-editor-panel-color-gradient-settings__color-name, | |
| 1960 | +.is-inherited-from-global-styles .block-editor-global-styles-background-panel__inspector-media-replace-title, | |
| 1961 | +.is-inherited-from-global-styles .block-editor-panel-duotone-settings__label { | |
| 1962 | + border-bottom: 1px dotted currentColor; | |
| 1963 | +} | |
| 1964 | + | |
| 1965 | +.has-local-override-from-global-styles { | |
| 1966 | + position: relative; | |
| 1967 | +} | |
| 1968 | + | |
| 1969 | +.global-styles-inheritance-affordance { | |
| 1970 | + position: absolute; | |
| 1971 | + inset-block-start: 0; | |
| 1972 | + inset-inline-end: 0; | |
| 1973 | + z-index: 1; | |
| 1974 | + display: flex; | |
| 1975 | + align-items: center; | |
| 1976 | + justify-content: center; | |
| 1977 | + pointer-events: none; | |
| 1978 | + height: 16px; | |
| 1979 | +} | |
| 1980 | +.global-styles-inheritance-affordance--offset-toggle { | |
| 1981 | + inset-inline-end: 32px; | |
| 1982 | +} | |
| 1983 | +.global-styles-inheritance-affordance .has-local-override-from-global-styles__reset { | |
| 1984 | + pointer-events: auto; | |
| 1985 | + margin-inline-start: 0 !important; | |
| 1986 | +} | |
| 1987 | + | |
| 1988 | +.has-local-override-from-global-styles__reset { | |
| 1989 | + display: inline-flex !important; | |
| 1990 | + align-items: center; | |
| 1991 | + justify-content: center; | |
| 1992 | + vertical-align: middle; | |
| 1993 | + position: relative; | |
| 1994 | + margin-inline-start: 6px; | |
| 1995 | + min-width: 14px !important; | |
| 1996 | + width: 14px !important; | |
| 1997 | + height: 14px !important; | |
| 1998 | + padding: 0 !important; | |
| 1999 | + border-radius: 50% !important; | |
| 2000 | + background: transparent !important; | |
| 2001 | + box-shadow: none !important; | |
| 2002 | + overflow: hidden; | |
| 2003 | + text-transform: none; | |
| 2004 | + letter-spacing: normal; | |
| 2005 | + cursor: var(--wpds-cursor-control, pointer); | |
| 2006 | +} | |
| 2007 | +.has-local-override-from-global-styles__reset:hover, .has-local-override-from-global-styles__reset:focus { | |
| 2008 | + background: transparent !important; | |
| 2009 | +} | |
| 2010 | +.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 { | |
| 2011 | + display: none; | |
| 2012 | +} | |
| 2013 | +.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 { | |
| 2014 | + display: block; | |
| 2015 | +} | |
| 2016 | +.has-local-override-from-global-styles__reset:focus-visible { | |
| 2017 | + outline: 1.5px solid var(--wp-admin-theme-color, #007cba); | |
| 2018 | + outline-offset: 1px; | |
| 2019 | +} | |
| 2020 | +.has-local-override-from-global-styles__reset.block-editor-panel-color-gradient-settings__reset { | |
| 2021 | + position: absolute; | |
| 2022 | + justify-content: center; | |
| 2023 | + top: 50%; | |
| 2024 | + transform: translateY(-50%); | |
| 2025 | + margin-block: 0; | |
| 2026 | + margin-inline-start: 0; | |
| 2027 | + opacity: 1; | |
| 2028 | +} | |
| 2029 | +.has-local-override-from-global-styles__reset.block-editor-global-styles__shadow-editor__remove-button { | |
| 2030 | + position: absolute; | |
| 2031 | + justify-content: center; | |
| 2032 | + inset-inline-end: 8px; | |
| 2033 | + top: 50%; | |
| 2034 | + transform: translateY(-50%); | |
| 2035 | + margin-block: 0; | |
| 2036 | + margin-inline-start: 0; | |
| 2037 | + opacity: 1; | |
| 2038 | +} | |
| 2039 | +.has-local-override-from-global-styles__reset.block-editor-panel-duotone-settings__reset { | |
| 2040 | + position: absolute; | |
| 2041 | + justify-content: center; | |
| 2042 | + inset-inline-end: 8px; | |
| 2043 | + top: 50%; | |
| 2044 | + transform: translateY(-50%); | |
| 2045 | + margin-block: 0; | |
| 2046 | + margin-inline-start: 0; | |
| 2047 | + opacity: 1; | |
| 2048 | +} | |
| 2049 | + | |
| 2050 | +.has-local-override-from-global-styles__dot { | |
| 2051 | + display: block; | |
| 2052 | + width: 8px; | |
| 2053 | + height: 8px; | |
| 2054 | + background-color: var(--wp-admin-theme-color, #007cba); | |
| 2055 | + border-radius: 50%; | |
| 2056 | +} | |
| 2057 | + | |
| 2058 | +.has-local-override-from-global-styles__reset-icon { | |
| 2059 | + display: none; | |
| 2060 | + position: absolute; | |
| 2061 | + top: 50%; | |
| 2062 | + left: 50%; | |
| 2063 | + transform: translate(-50%, -50%); | |
| 2064 | + color: var(--wp-admin-theme-color, #007cba); | |
| 2065 | +} | |
| 2066 | + | |
| 1745 | 2067 | .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer { |
| 1746 | 2068 | z-index: 30; |
| 1747 | 2069 | } |
| 1748 | 2070 | .block-editor-grid-visualizer.block-editor-grid-visualizer.block-editor-grid-visualizer .components-popover__content * { |
| @@ -1847,16 +2169,8 @@ | ||
| 1847 | 2169 | animation: components-button__appear-animation 0.1s ease; |
| 1848 | 2170 | animation-fill-mode: forwards; |
| 1849 | 2171 | } |
| 1850 | 2172 | } |
| 1851 | -.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 { | |
| 1852 | - box-shadow: none; | |
| 1853 | - outline: none; | |
| 1854 | -} | |
| 1855 | -.block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button:focus-visible::before { | |
| 1856 | - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 1857 | - outline: 2px solid transparent; | |
| 1858 | -} | |
| 1859 | 2173 | |
| 1860 | 2174 | .block-editor-grid-item-mover__move-vertical-button-container { |
| 1861 | 2175 | display: flex; |
| 1862 | 2176 | position: relative; |
| @@ -1970,8 +2284,27 @@ | ||
| 1970 | 2284 | position: absolute; |
| 1971 | 2285 | right: 0; |
| 1972 | 2286 | } |
| 1973 | 2287 | |
| 2288 | +.wp-block-image__crop-area { | |
| 2289 | + position: relative; | |
| 2290 | + max-width: 100%; | |
| 2291 | + width: 100%; | |
| 2292 | + overflow: hidden; | |
| 2293 | +} | |
| 2294 | +.wp-block-image__crop-area .reactEasyCrop_Container { | |
| 2295 | + pointer-events: auto; | |
| 2296 | +} | |
| 2297 | +.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image { | |
| 2298 | + border: none; | |
| 2299 | + border-radius: 0; | |
| 2300 | +} | |
| 2301 | + | |
| 2302 | +.wp-block-image__zoom .components-popover__content { | |
| 2303 | + min-width: 260px; | |
| 2304 | + overflow: visible !important; | |
| 2305 | +} | |
| 2306 | + | |
| 1974 | 2307 | .block-editor-block-types-list__list-item { |
| 1975 | 2308 | display: block; |
| 1976 | 2309 | width: 33.33%; |
| 1977 | 2310 | padding: 0; |
| @@ -2001,9 +2334,10 @@ | ||
| 2001 | 2334 | align-items: stretch; |
| 2002 | 2335 | justify-content: center; |
| 2003 | 2336 | cursor: var(--wpds-cursor-control, pointer); |
| 2004 | 2337 | background: transparent; |
| 2005 | - word-break: break-word; | |
| 2338 | + word-break: normal; | |
| 2339 | + overflow-wrap: break-word; | |
| 2006 | 2340 | } |
| 2007 | 2341 | @media not (prefers-reduced-motion) { |
| 2008 | 2342 | .components-button.block-editor-block-types-list__item { |
| 2009 | 2343 | transition: all 0.05s ease-in-out; |
| @@ -2035,17 +2369,8 @@ | ||
| 2035 | 2369 | opacity: 0.04; |
| 2036 | 2370 | background: var(--wp-admin-theme-color); |
| 2037 | 2371 | pointer-events: none; |
| 2038 | 2372 | } |
| 2039 | -.components-button.block-editor-block-types-list__item:not(:disabled, [aria-disabled=true]).is-active { | |
| 2040 | - color: #fff; | |
| 2041 | - background: #1e1e1e; | |
| 2042 | - outline: 2px solid transparent; | |
| 2043 | - outline-offset: -2px; | |
| 2044 | -} | |
| 2045 | -.components-button.block-editor-block-types-list__item:not(:disabled):focus { | |
| 2046 | - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 2047 | -} | |
| 2048 | 2373 | |
| 2049 | 2374 | .block-editor-block-types-list__item-icon { |
| 2050 | 2375 | padding: 12px 20px; |
| 2051 | 2376 | color: #1e1e1e; |
| @@ -2218,9 +2543,9 @@ | ||
| 2218 | 2543 | display: inline-block; |
| 2219 | 2544 | width: 100%; |
| 2220 | 2545 | } |
| 2221 | 2546 | .block-editor-link-control__search-item .components-menu-item__item mark { |
| 2222 | - font-weight: 600; | |
| 2547 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 2223 | 2548 | color: inherit; |
| 2224 | 2549 | background-color: transparent; |
| 2225 | 2550 | } |
| 2226 | 2551 | .block-editor-link-control__search-item .components-menu-item__shortcut { |
| @@ -2267,9 +2592,9 @@ | ||
| 2267 | 2592 | width: 32px; |
| 2268 | 2593 | max-height: 32px; |
| 2269 | 2594 | } |
| 2270 | 2595 | .block-editor-link-control__preview .block-editor-link-control__preview-title { |
| 2271 | - line-height: 1.1; | |
| 2596 | + line-height: var(--wpds-typography-line-height-sm, 20px); | |
| 2272 | 2597 | } |
| 2273 | 2598 | .block-editor-link-control__preview .block-editor-link-control__preview-title:focus { |
| 2274 | 2599 | box-shadow: none; |
| 2275 | 2600 | } |
| @@ -2278,14 +2603,14 @@ | ||
| 2278 | 2603 | outline: 2px solid transparent; |
| 2279 | 2604 | text-decoration: none; |
| 2280 | 2605 | } |
| 2281 | 2606 | .block-editor-link-control__preview .block-editor-link-control__preview-title mark { |
| 2282 | - font-weight: 600; | |
| 2607 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 2283 | 2608 | color: inherit; |
| 2284 | 2609 | background-color: transparent; |
| 2285 | 2610 | } |
| 2286 | 2611 | .block-editor-link-control__preview .block-editor-link-control__preview-title span { |
| 2287 | - font-weight: normal; | |
| 2612 | + font-weight: 400; | |
| 2288 | 2613 | } |
| 2289 | 2614 | .block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon { |
| 2290 | 2615 | position: absolute; |
| 2291 | 2616 | width: 1px; |
| @@ -2292,9 +2617,9 @@ | ||
| 2292 | 2617 | height: 1px; |
| 2293 | 2618 | padding: 0; |
| 2294 | 2619 | margin: -1px; |
| 2295 | 2620 | overflow: hidden; |
| 2296 | - clip: rect(0, 0, 0, 0); | |
| 2621 | + clip-path: inset(50%); | |
| 2297 | 2622 | border: 0; |
| 2298 | 2623 | } |
| 2299 | 2624 | |
| 2300 | 2625 | .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg, |
| @@ -2436,9 +2761,8 @@ | ||
| 2436 | 2761 | .link-preview-button.components-button { |
| 2437 | 2762 | width: 100%; |
| 2438 | 2763 | height: auto; |
| 2439 | 2764 | padding: 12px; |
| 2440 | - box-shadow: inset 0 0 0 1px #949494; | |
| 2441 | 2765 | border-color: #949494; |
| 2442 | 2766 | } |
| 2443 | 2767 | |
| 2444 | 2768 | .link-preview-button__image-container { |
| @@ -2476,9 +2800,9 @@ | ||
| 2476 | 2800 | } |
| 2477 | 2801 | |
| 2478 | 2802 | .link-preview-button__title { |
| 2479 | 2803 | margin-top: 4px; |
| 2480 | - font-weight: 500; | |
| 2804 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 2481 | 2805 | color: #1e1e1e; |
| 2482 | 2806 | display: block; |
| 2483 | 2807 | } |
| 2484 | 2808 | |
| @@ -2513,8 +2837,11 @@ | ||
| 2513 | 2837 | .block-editor-list-view-leaf { |
| 2514 | 2838 | position: relative; |
| 2515 | 2839 | transform: translateY(0); |
| 2516 | 2840 | } |
| 2841 | +.block-editor-list-view-leaf:focus-within, .block-editor-list-view-leaf.is-nesting { | |
| 2842 | + z-index: 1; | |
| 2843 | +} | |
| 2517 | 2844 | .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents { |
| 2518 | 2845 | cursor: grab; |
| 2519 | 2846 | } |
| 2520 | 2847 | .block-editor-list-view-leaf .block-editor-list-view-block-select-button[aria-expanded=true] { |
| @@ -2525,13 +2852,8 @@ | ||
| 2525 | 2852 | } |
| 2526 | 2853 | .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg { |
| 2527 | 2854 | fill: currentColor; |
| 2528 | 2855 | } |
| 2529 | -@media (forced-colors: active) { | |
| 2530 | - .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg { | |
| 2531 | - fill: CanvasText; | |
| 2532 | - } | |
| 2533 | -} | |
| 2534 | 2856 | .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover { |
| 2535 | 2857 | color: inherit; |
| 2536 | 2858 | } |
| 2537 | 2859 | .block-editor-list-view-leaf.is-selected td { |
| @@ -2543,23 +2865,45 @@ | ||
| 2543 | 2865 | .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, |
| 2544 | 2866 | .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon { |
| 2545 | 2867 | color: var(--wp-block-synced-color); |
| 2546 | 2868 | } |
| 2547 | -.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after { | |
| 2548 | - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color); | |
| 2869 | +.block-editor-list-view-leaf.is-synced .block-editor-list-view-block-contents:focus::after { | |
| 2870 | + --focus-color: var(--wp-block-synced-color); | |
| 2549 | 2871 | } |
| 2872 | +.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block__menu:focus { | |
| 2873 | + --focus-color: var(--wp-block-synced-color); | |
| 2874 | + 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))); | |
| 2875 | + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)); | |
| 2876 | +} | |
| 2550 | 2877 | .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon { |
| 2551 | 2878 | color: #fff; |
| 2552 | 2879 | } |
| 2553 | -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after { | |
| 2554 | - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 2880 | +.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus { | |
| 2881 | + --focus-color: var(--wpds-color-foreground-interactive-brand-strong, #fff); | |
| 2882 | + 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))); | |
| 2883 | + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)); | |
| 2884 | + outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))); | |
| 2555 | 2885 | } |
| 2556 | -.block-editor-list-view-leaf.is-selected.is-synced .block-editor-list-view-block-contents:focus::after { | |
| 2557 | - box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color); | |
| 2886 | +@media (forced-colors: active) { | |
| 2887 | + .block-editor-list-view-leaf.is-selected td, .block-editor-list-view-leaf.is-selected.is-synced td { | |
| 2888 | + background: SelectedItem; | |
| 2889 | + } | |
| 2890 | + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon { | |
| 2891 | + color: SelectedItemText; | |
| 2892 | + } | |
| 2893 | + .block-editor-list-view-leaf.is-selected svg, .block-editor-list-view-leaf.is-selected .block-editor-block-icon.has-colors svg { | |
| 2894 | + fill: SelectedItemText; | |
| 2895 | + } | |
| 2896 | + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__title { | |
| 2897 | + forced-color-adjust: none; | |
| 2898 | + } | |
| 2899 | + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents:focus::after { | |
| 2900 | + --focus-color: CanvasText; | |
| 2901 | + } | |
| 2902 | + .block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus { | |
| 2903 | + --focus-color: SelectedItemText; | |
| 2904 | + } | |
| 2558 | 2905 | } |
| 2559 | -.block-editor-list-view-leaf.is-selected .block-editor-list-view-block__menu:focus { | |
| 2560 | - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff; | |
| 2561 | -} | |
| 2562 | 2906 | .block-editor-list-view-leaf.is-first-selected td:first-child { |
| 2563 | 2907 | border-top-left-radius: 2px; |
| 2564 | 2908 | } |
| 2565 | 2909 | .block-editor-list-view-leaf.is-first-selected td:last-child { |
| @@ -2681,8 +3025,9 @@ | ||
| 2681 | 3025 | } |
| 2682 | 3026 | .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents, |
| 2683 | 3027 | .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus { |
| 2684 | 3028 | box-shadow: none; |
| 3029 | + outline: none; | |
| 2685 | 3030 | } |
| 2686 | 3031 | .block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after, |
| 2687 | 3032 | .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after { |
| 2688 | 3033 | content: ""; |
| @@ -2687,13 +3032,16 @@ | ||
| 2687 | 3032 | .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after { |
| 2688 | 3033 | content: ""; |
| 2689 | 3034 | position: absolute; |
| 2690 | 3035 | top: 0; |
| 2691 | - right: -29px; | |
| 3036 | + right: -28px; | |
| 2692 | 3037 | bottom: 0; |
| 2693 | 3038 | left: 0; |
| 2694 | 3039 | border-radius: inherit; |
| 2695 | - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 3040 | + 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))); | |
| 3041 | + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)); | |
| 3042 | + outline-offset: 1px; | |
| 3043 | + 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); | |
| 2696 | 3044 | z-index: 2; |
| 2697 | 3045 | pointer-events: none; |
| 2698 | 3046 | } |
| 2699 | 3047 | .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after { |
| @@ -2698,13 +3046,8 @@ | ||
| 2698 | 3046 | } |
| 2699 | 3047 | .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after { |
| 2700 | 3048 | right: 0; |
| 2701 | 3049 | } |
| 2702 | -.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu, | |
| 2703 | -.block-editor-list-view-leaf .block-editor-list-view-block__menu:focus { | |
| 2704 | - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 2705 | - z-index: 1; | |
| 2706 | -} | |
| 2707 | 3050 | .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents { |
| 2708 | 3051 | opacity: 1; |
| 2709 | 3052 | } |
| 2710 | 3053 | @keyframes __wp-base-styles-fade-in { |
| @@ -2774,14 +3117,8 @@ | ||
| 2774 | 3117 | } |
| 2775 | 3118 | .block-editor-list-view-leaf .block-editor-block-mover-button.is-down-button svg { |
| 2776 | 3119 | top: -4px; |
| 2777 | 3120 | } |
| 2778 | -.block-editor-list-view-leaf .block-editor-block-mover-button::before { | |
| 2779 | - height: 16px; | |
| 2780 | - min-width: 100%; | |
| 2781 | - left: 0; | |
| 2782 | - right: 0; | |
| 2783 | -} | |
| 2784 | 3121 | .block-editor-list-view-leaf .block-editor-inserter__toggle { |
| 2785 | 3122 | background: #1e1e1e; |
| 2786 | 3123 | color: #fff; |
| 2787 | 3124 | height: 24px; |
| @@ -2790,8 +3127,14 @@ | ||
| 2790 | 3127 | } |
| 2791 | 3128 | .block-editor-list-view-leaf .block-editor-inserter__toggle:active { |
| 2792 | 3129 | color: #fff; |
| 2793 | 3130 | } |
| 3131 | +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper { | |
| 3132 | + width: 100%; | |
| 3133 | +} | |
| 3134 | +.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper > * { | |
| 3135 | + min-width: 0; | |
| 3136 | +} | |
| 2794 | 3137 | .block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper svg { |
| 2795 | 3138 | left: 2px; |
| 2796 | 3139 | position: relative; |
| 2797 | 3140 | } |
| @@ -2812,8 +3155,19 @@ | ||
| 2812 | 3155 | .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor { |
| 2813 | 3156 | position: absolute; |
| 2814 | 3157 | right: 0; |
| 2815 | 3158 | transform: translateY(-50%); |
| 3159 | + box-sizing: border-box; | |
| 3160 | + max-width: 100%; | |
| 3161 | + padding: 2px 8px; | |
| 3162 | + border-radius: 2px; | |
| 3163 | + background: #f0f0f0; | |
| 3164 | + color: #2f2f2f; | |
| 3165 | + font-size: 12px; | |
| 3166 | + line-height: 20px; | |
| 3167 | + overflow: hidden; | |
| 3168 | + text-overflow: ellipsis; | |
| 3169 | + white-space: nowrap; | |
| 2816 | 3170 | } |
| 2817 | 3171 | .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor { |
| 2818 | 3172 | background: rgba(0, 0, 0, 0.3); |
| 2819 | 3173 | color: #fff; |
| @@ -2840,8 +3194,25 @@ | ||
| 2840 | 3194 | } |
| 2841 | 3195 | .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__image:not(:only-child) { |
| 2842 | 3196 | box-shadow: 0 0 0 2px var(--wp-admin-theme-color); |
| 2843 | 3197 | } |
| 3198 | +.block-editor-list-view-leaf.is-disabled { | |
| 3199 | + opacity: 0.2; | |
| 3200 | +} | |
| 3201 | +@media not (prefers-reduced-motion) { | |
| 3202 | + .block-editor-list-view-leaf.is-disabled { | |
| 3203 | + transition: opacity 0.1s linear; | |
| 3204 | + } | |
| 3205 | +} | |
| 3206 | +.block-editor-list-view-leaf.is-disabled:hover { | |
| 3207 | + opacity: 0.2; | |
| 3208 | +} | |
| 3209 | +.block-editor-list-view-leaf.is-disabled .block-editor-list-view__expander { | |
| 3210 | + cursor: default; | |
| 3211 | +} | |
| 3212 | +.block-editor-list-view-leaf.is-disabled .block-editor-list-view-block-select-button:hover { | |
| 3213 | + color: inherit; | |
| 3214 | +} | |
| 2844 | 3215 | |
| 2845 | 3216 | .block-editor-list-view-draggable-chip { |
| 2846 | 3217 | opacity: 0.8; |
| 2847 | 3218 | } |
| @@ -3034,32 +3405,20 @@ | ||
| 3034 | 3405 | .block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-actions { |
| 3035 | 3406 | padding: 8px 0 0; |
| 3036 | 3407 | } |
| 3037 | 3408 | |
| 3038 | -.block-editor-media-flow__error { | |
| 3039 | - padding: 0 20px 20px 20px; | |
| 3040 | - max-width: 255px; | |
| 3041 | -} | |
| 3042 | -.block-editor-media-flow__error .components-with-notices-ui { | |
| 3043 | - max-width: 255px; | |
| 3044 | -} | |
| 3045 | -.block-editor-media-flow__error .components-with-notices-ui .components-notice__content { | |
| 3046 | - overflow: hidden; | |
| 3047 | - word-wrap: break-word; | |
| 3048 | -} | |
| 3049 | -.block-editor-media-flow__error .components-with-notices-ui .components-notice__dismiss { | |
| 3050 | - position: absolute; | |
| 3051 | - right: 10px; | |
| 3052 | -} | |
| 3053 | - | |
| 3054 | 3409 | .block-editor-multi-selection-inspector__card { |
| 3055 | 3410 | padding: 16px; |
| 3056 | 3411 | } |
| 3057 | 3412 | |
| 3058 | 3413 | .block-editor-multi-selection-inspector__card-title { |
| 3059 | - font-weight: 499; | |
| 3414 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 3060 | 3415 | } |
| 3061 | 3416 | |
| 3417 | +.block-editor-multi-selection-inspector__card-description { | |
| 3418 | + color: #757575; | |
| 3419 | +} | |
| 3420 | + | |
| 3062 | 3421 | .block-editor-multi-selection-inspector__card .block-editor-block-icon { |
| 3063 | 3422 | margin-left: -2px; |
| 3064 | 3423 | padding: 0 3px; |
| 3065 | 3424 | width: 36px; |
| @@ -3065,8 +3424,13 @@ | ||
| 3065 | 3424 | width: 36px; |
| 3066 | 3425 | height: 24px; |
| 3067 | 3426 | } |
| 3068 | 3427 | |
| 3428 | +.block-editor-plain-text { | |
| 3429 | + width: 100%; | |
| 3430 | + field-sizing: content; | |
| 3431 | +} | |
| 3432 | + | |
| 3069 | 3433 | .block-editor-responsive-block-control { |
| 3070 | 3434 | margin-bottom: 28px; |
| 3071 | 3435 | border-bottom: 1px solid #ccc; |
| 3072 | 3436 | padding-bottom: 14px; |
| @@ -3082,9 +3446,9 @@ | ||
| 3082 | 3446 | margin-left: -3px; |
| 3083 | 3447 | } |
| 3084 | 3448 | |
| 3085 | 3449 | .block-editor-responsive-block-control__label { |
| 3086 | - font-weight: 600; | |
| 3450 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 3087 | 3451 | margin-bottom: 0.6em; |
| 3088 | 3452 | margin-left: -3px; |
| 3089 | 3453 | } |
| 3090 | 3454 | |
| @@ -3104,9 +3468,9 @@ | ||
| 3104 | 3468 | overflow: hidden; |
| 3105 | 3469 | padding: 0; |
| 3106 | 3470 | position: absolute; |
| 3107 | 3471 | width: 1px; |
| 3108 | - word-wrap: normal !important; | |
| 3472 | + overflow-wrap: normal !important; | |
| 3109 | 3473 | word-break: normal !important; |
| 3110 | 3474 | } |
| 3111 | 3475 | |
| 3112 | 3476 | .preset-input-control__wrapper > * { |
| @@ -3161,9 +3525,9 @@ | ||
| 3161 | 3525 | top: -9999em; |
| 3162 | 3526 | } |
| 3163 | 3527 | .block-editor-skip-to-selected-block:focus { |
| 3164 | 3528 | font-size: 14px; |
| 3165 | - font-weight: 600; | |
| 3529 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 3166 | 3530 | background: #f1f1f1; |
| 3167 | 3531 | z-index: 100000; |
| 3168 | 3532 | } |
| 3169 | 3533 | |
| @@ -3359,8 +3723,13 @@ | ||
| 3359 | 3723 | padding: 16px; |
| 3360 | 3724 | border-top: 1px solid #1e1e1e; |
| 3361 | 3725 | } |
| 3362 | 3726 | |
| 3727 | +.block-editor-url-popover__link-container-content { | |
| 3728 | + display: flex; | |
| 3729 | + align-items: center; | |
| 3730 | +} | |
| 3731 | + | |
| 3363 | 3732 | .block-editor-url-popover__link-editor, |
| 3364 | 3733 | .block-editor-url-popover__link-viewer { |
| 3365 | 3734 | display: flex; |
| 3366 | 3735 | } |
| @@ -3398,35 +3767,8 @@ | ||
| 3398 | 3767 | color: #757575; |
| 3399 | 3768 | font-size: 12px; |
| 3400 | 3769 | } |
| 3401 | 3770 | |
| 3402 | -/** | |
| 3403 | - * ItemGroup-like border styles for the background panel's ToolsPanelItems. | |
| 3404 | - * Replicates the separated border of the `ItemGroup` component while | |
| 3405 | - * allowing for hidden placeholder items (same approach as the color panel). | |
| 3406 | - */ | |
| 3407 | -.block-editor-background-panel__item { | |
| 3408 | - padding: 0; | |
| 3409 | - max-width: 100%; | |
| 3410 | - position: relative; | |
| 3411 | - border-left: 1px solid #ddd; | |
| 3412 | - border-right: 1px solid #ddd; | |
| 3413 | - border-bottom: 1px solid #ddd; | |
| 3414 | -} | |
| 3415 | -.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) { | |
| 3416 | - border-top-left-radius: 2px; | |
| 3417 | - border-top-right-radius: 2px; | |
| 3418 | - border-top: 1px solid #ddd; | |
| 3419 | -} | |
| 3420 | -.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) { | |
| 3421 | - border-bottom-left-radius: 2px; | |
| 3422 | - border-bottom-right-radius: 2px; | |
| 3423 | -} | |
| 3424 | -.block-editor-background-panel__item > div, | |
| 3425 | -.block-editor-background-panel__item > div > button { | |
| 3426 | - border-radius: inherit; | |
| 3427 | -} | |
| 3428 | - | |
| 3429 | 3771 | .background-block-support-panel { |
| 3430 | 3772 | /* Increased specificity required to remove the slot wrapper's row gap */ |
| 3431 | 3773 | } |
| 3432 | 3774 | .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper { |
| @@ -3432,173 +3774,8 @@ | ||
| 3432 | 3774 | .background-block-support-panel.background-block-support-panel .background-block-support-panel__inner-wrapper { |
| 3433 | 3775 | row-gap: 0; |
| 3434 | 3776 | } |
| 3435 | 3777 | |
| 3436 | -.block-editor-content-only-controls__link { | |
| 3437 | - width: 100%; | |
| 3438 | - box-shadow: inset 0 0 0 1px #ccc; | |
| 3439 | -} | |
| 3440 | -.block-editor-content-only-controls__link:focus:not(:disabled) { | |
| 3441 | - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 3442 | -} | |
| 3443 | - | |
| 3444 | -.block-editor-content-only-controls__link-row { | |
| 3445 | - align-items: center; | |
| 3446 | -} | |
| 3447 | - | |
| 3448 | -.block-editor-content-only-controls__link-title { | |
| 3449 | - width: 100%; | |
| 3450 | - white-space: nowrap; | |
| 3451 | - text-overflow: ellipsis; | |
| 3452 | - overflow: hidden; | |
| 3453 | -} | |
| 3454 | - | |
| 3455 | -.block-editor-content-only-controls__media { | |
| 3456 | - width: 100%; | |
| 3457 | - box-shadow: inset 0 0 0 1px #ccc; | |
| 3458 | - padding-right: 32px; | |
| 3459 | -} | |
| 3460 | -.block-editor-content-only-controls__media:focus:not(:disabled) { | |
| 3461 | - box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |
| 3462 | -} | |
| 3463 | - | |
| 3464 | -.block-editor-content-only-controls__media-replace-flow { | |
| 3465 | - display: block; | |
| 3466 | -} | |
| 3467 | - | |
| 3468 | -.block-editor-content-only-controls__media-row { | |
| 3469 | - align-items: center; | |
| 3470 | -} | |
| 3471 | - | |
| 3472 | -.block-editor-content-only-controls__media-placeholder { | |
| 3473 | - width: 24px; | |
| 3474 | - height: 24px; | |
| 3475 | - border-radius: 2px; | |
| 3476 | - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); | |
| 3477 | - display: inline-block; | |
| 3478 | - padding: 0; | |
| 3479 | - background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%); | |
| 3480 | -} | |
| 3481 | - | |
| 3482 | -.block-editor-content-only-controls__media-title { | |
| 3483 | - width: 100%; | |
| 3484 | - white-space: nowrap; | |
| 3485 | - text-overflow: ellipsis; | |
| 3486 | - overflow: hidden; | |
| 3487 | -} | |
| 3488 | - | |
| 3489 | -.block-editor-content-only-controls__media-thumbnail { | |
| 3490 | - width: 20px; | |
| 3491 | - height: 20px; | |
| 3492 | - border-radius: 2px; | |
| 3493 | - align-self: center; | |
| 3494 | - overflow: hidden; | |
| 3495 | -} | |
| 3496 | -.block-editor-content-only-controls__media-thumbnail img { | |
| 3497 | - width: 100% !important; | |
| 3498 | - height: 100% !important; | |
| 3499 | - object-fit: cover; | |
| 3500 | -} | |
| 3501 | - | |
| 3502 | -.block-editor-content-only-controls { | |
| 3503 | - position: relative; | |
| 3504 | -} | |
| 3505 | - | |
| 3506 | -.block-editor-content-only-controls__media-reset { | |
| 3507 | - position: absolute; | |
| 3508 | - right: 0; | |
| 3509 | - top: 8px; | |
| 3510 | - margin: auto 8px auto; | |
| 3511 | - opacity: 0; | |
| 3512 | - border-radius: 2px; | |
| 3513 | -} | |
| 3514 | -@media not (prefers-reduced-motion) { | |
| 3515 | - .block-editor-content-only-controls__media-reset { | |
| 3516 | - transition: opacity 0.1s ease-in-out; | |
| 3517 | - } | |
| 3518 | -} | |
| 3519 | -.block-editor-content-only-controls:hover .block-editor-content-only-controls__media-reset, .block-editor-content-only-controls__media-reset:focus, .block-editor-content-only-controls__media-reset:hover { | |
| 3520 | - opacity: 1; | |
| 3521 | -} | |
| 3522 | -@media (hover: none) { | |
| 3523 | - .block-editor-content-only-controls__media-reset { | |
| 3524 | - opacity: 1; | |
| 3525 | - } | |
| 3526 | -} | |
| 3527 | - | |
| 3528 | -.block-editor-content-only-controls__rich-text { | |
| 3529 | - width: 100%; | |
| 3530 | - margin: 0; | |
| 3531 | - background: #fff; | |
| 3532 | - color: #1e1e1e; | |
| 3533 | - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 3534 | - padding: 6px 8px; | |
| 3535 | - /* Fonts smaller than 16px causes mobile safari to zoom. */ | |
| 3536 | - font-size: 16px; | |
| 3537 | - /* Override core line-height. To be reviewed. */ | |
| 3538 | - line-height: normal; | |
| 3539 | - box-shadow: 0 0 0 transparent; | |
| 3540 | - border-radius: 2px; | |
| 3541 | - border: 1px solid #949494; | |
| 3542 | -} | |
| 3543 | -@media not (prefers-reduced-motion) { | |
| 3544 | - .block-editor-content-only-controls__rich-text { | |
| 3545 | - transition: box-shadow 0.1s linear; | |
| 3546 | - } | |
| 3547 | -} | |
| 3548 | -@media (min-width: 600px) { | |
| 3549 | - .block-editor-content-only-controls__rich-text { | |
| 3550 | - font-size: 13px; | |
| 3551 | - /* Override core line-height. To be reviewed. */ | |
| 3552 | - line-height: normal; | |
| 3553 | - } | |
| 3554 | -} | |
| 3555 | -.block-editor-content-only-controls__rich-text:focus { | |
| 3556 | - border-color: var(--wp-admin-theme-color, #3858e9); | |
| 3557 | - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9); | |
| 3558 | - outline: 2px solid transparent; | |
| 3559 | -} | |
| 3560 | -.block-editor-content-only-controls__rich-text::placeholder { | |
| 3561 | - color: rgba(30, 30, 30, 0.62); | |
| 3562 | -} | |
| 3563 | -.block-editor-content-only-controls__rich-text { | |
| 3564 | - border-color: #949494; | |
| 3565 | -} | |
| 3566 | -.block-editor-content-only-controls__rich-text::placeholder { | |
| 3567 | - color: color-mix(in srgb, #1e1e1e, transparent 38%); | |
| 3568 | -} | |
| 3569 | -.block-editor-content-only-controls__rich-text { | |
| 3570 | - min-height: 40px; | |
| 3571 | - padding: 12px; | |
| 3572 | -} | |
| 3573 | - | |
| 3574 | -.block-editor-block-fields__container { | |
| 3575 | - padding: 0 16px 16px; | |
| 3576 | -} | |
| 3577 | -.block-editor-block-fields__container:first-of-type { | |
| 3578 | - padding-block-start: 8px; | |
| 3579 | - /* | |
| 3580 | - * Add border for the entire content controls and remove the similar border | |
| 3581 | - * for tools panel. | |
| 3582 | - */ | |
| 3583 | - border-block-start: 1px solid #e0e0e0; | |
| 3584 | -} | |
| 3585 | - | |
| 3586 | -.block-editor-block-fields__header { | |
| 3587 | - padding: 8px 0; | |
| 3588 | - margin-bottom: 4px; | |
| 3589 | -} | |
| 3590 | - | |
| 3591 | -.block-editor-block-fields__header-icon { | |
| 3592 | - flex: 0 0 24px; | |
| 3593 | -} | |
| 3594 | - | |
| 3595 | -.block-editor-block-fields__header-title { | |
| 3596 | - flex: 1; | |
| 3597 | - /* Override the default margin on a h2 element. */ | |
| 3598 | - margin: 0 !important; | |
| 3599 | -} | |
| 3600 | - | |
| 3601 | 3778 | .block-editor-hooks__block-hooks { |
| 3602 | 3779 | /** |
| 3603 | 3780 | * Un-reverse the flex direction for the toggle's label. |
| 3604 | 3781 | */ |
| @@ -3632,17 +3809,14 @@ | ||
| 3632 | 3809 | } |
| 3633 | 3810 | .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper { |
| 3634 | 3811 | row-gap: 0; |
| 3635 | 3812 | } |
| 3636 | -.color-block-support-panel { | |
| 3637 | - /** | |
| 3638 | - * After converting PanelColorGradientSettings to render as a ToolsPanel | |
| 3639 | - * we need to remove the top margin when wrapping inner content due to | |
| 3640 | - * rendering via SlotFills. | |
| 3641 | - */ | |
| 3813 | + | |
| 3814 | +.elements-block-support-panel { | |
| 3815 | + /* Increased specificity required to remove the slot wrapper's row gap */ | |
| 3642 | 3816 | } |
| 3643 | -.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first { | |
| 3644 | - margin-top: 0; | |
| 3817 | +.elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper { | |
| 3818 | + row-gap: 0; | |
| 3645 | 3819 | } |
| 3646 | 3820 | |
| 3647 | 3821 | .dimensions-block-support-panel .single-column { |
| 3648 | 3822 | grid-column: span 1; |
| @@ -3657,8 +3831,12 @@ | ||
| 3657 | 3831 | font-size: 12px; |
| 3658 | 3832 | margin-bottom: 0; |
| 3659 | 3833 | } |
| 3660 | 3834 | |
| 3835 | +.layout-block-support-panel .block-editor-hooks__flex-layout-controls { | |
| 3836 | + grid-column: 1/-1; | |
| 3837 | +} | |
| 3838 | + | |
| 3661 | 3839 | .block-editor-hooks__flex-layout-justification-controls, |
| 3662 | 3840 | .block-editor-hooks__flex-layout-orientation-controls { |
| 3663 | 3841 | margin-bottom: 12px; |
| 3664 | 3842 | } |
| @@ -3931,9 +4109,9 @@ | ||
| 3931 | 4109 | } |
| 3932 | 4110 | .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list { |
| 3933 | 4111 | display: grid; |
| 3934 | 4112 | grid-template-columns: 1fr 1fr; |
| 3935 | - grid-gap: 12px; | |
| 4113 | + gap: 12px; | |
| 3936 | 4114 | } |
| 3937 | 4115 | .block-editor-block-toolbar-change-design-content-wrapper .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item { |
| 3938 | 4116 | margin-bottom: 0; |
| 3939 | 4117 | } |
| @@ -3945,9 +4123,9 @@ | ||
| 3945 | 4123 | display: inline-block; |
| 3946 | 4124 | background: none; |
| 3947 | 4125 | border: none; |
| 3948 | 4126 | padding: 0; |
| 3949 | - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 4127 | + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 3950 | 4128 | font-size: 13px; |
| 3951 | 4129 | line-height: 0; |
| 3952 | 4130 | } |
| 3953 | 4131 | @media (min-width: 782px) { |
| @@ -4042,10 +4220,23 @@ | ||
| 4042 | 4220 | z-index: 99999; |
| 4043 | 4221 | } |
| 4044 | 4222 | |
| 4045 | 4223 | .block-editor-inserter__search { |
| 4046 | - padding: 16px 16px 0 16px; | |
| 4224 | + padding: 16px; | |
| 4225 | + position: sticky; | |
| 4226 | + top: 0; | |
| 4227 | + z-index: 2; | |
| 4228 | + background-color: #fff; | |
| 4229 | + border-bottom: 1px solid transparent; | |
| 4047 | 4230 | } |
| 4231 | +@media not (prefers-reduced-motion) { | |
| 4232 | + .block-editor-inserter__search { | |
| 4233 | + transition: border-bottom-color 0.1s linear; | |
| 4234 | + } | |
| 4235 | +} | |
| 4236 | +.block-editor-inserter__search.is-scrolled { | |
| 4237 | + border-bottom-color: #e0e0e0; | |
| 4238 | +} | |
| 4048 | 4239 | |
| 4049 | 4240 | .block-editor-inserter__no-tab-container { |
| 4050 | 4241 | overflow-y: auto; |
| 4051 | 4242 | flex-grow: 1; |
| @@ -4055,9 +4246,9 @@ | ||
| 4055 | 4246 | .block-editor-inserter__panel-header { |
| 4056 | 4247 | position: relative; |
| 4057 | 4248 | display: inline-flex; |
| 4058 | 4249 | align-items: center; |
| 4059 | - padding: 16px 16px 0; | |
| 4250 | + padding: 0 16px; | |
| 4060 | 4251 | } |
| 4061 | 4252 | |
| 4062 | 4253 | .block-editor-inserter__panel-content { |
| 4063 | 4254 | padding: 16px; |
| @@ -4068,9 +4259,9 @@ | ||
| 4068 | 4259 | margin: 0 12px 0 0; |
| 4069 | 4260 | color: #757575; |
| 4070 | 4261 | text-transform: uppercase; |
| 4071 | 4262 | font-size: 11px; |
| 4072 | - font-weight: 499; | |
| 4263 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 4073 | 4264 | } |
| 4074 | 4265 | |
| 4075 | 4266 | .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input { |
| 4076 | 4267 | height: 36px; |
| @@ -4106,12 +4297,8 @@ | ||
| 4106 | 4297 | .block-editor-inserter__parent-block-header .block-editor-block-icon { |
| 4107 | 4298 | margin-right: 8px; |
| 4108 | 4299 | } |
| 4109 | 4300 | |
| 4110 | -.block-editor-inserter__preview-container__popover { | |
| 4111 | - top: 16px !important; | |
| 4112 | -} | |
| 4113 | - | |
| 4114 | 4301 | .block-editor-inserter__preview-container { |
| 4115 | 4302 | display: none; |
| 4116 | 4303 | width: 280px; |
| 4117 | 4304 | padding: 16px; |
| @@ -4138,14 +4325,18 @@ | ||
| 4138 | 4325 | |
| 4139 | 4326 | .block-editor-inserter__media-tabs-container, |
| 4140 | 4327 | .block-editor-inserter__block-patterns-tabs-container { |
| 4141 | 4328 | flex-grow: 1; |
| 4142 | - padding: 16px; | |
| 4329 | + padding: 0 16px 16px; | |
| 4143 | 4330 | display: flex; |
| 4144 | 4331 | flex-direction: column; |
| 4145 | 4332 | justify-content: space-between; |
| 4146 | 4333 | } |
| 4147 | 4334 | |
| 4335 | +.block-editor-inserter__media-tabs-container { | |
| 4336 | + padding-top: 16px; | |
| 4337 | +} | |
| 4338 | + | |
| 4148 | 4339 | .block-editor-inserter__category-tablist { |
| 4149 | 4340 | margin-bottom: 8px; |
| 4150 | 4341 | } |
| 4151 | 4342 | |
| @@ -4248,9 +4439,9 @@ | ||
| 4248 | 4439 | |
| 4249 | 4440 | .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list { |
| 4250 | 4441 | display: grid; |
| 4251 | 4442 | grid-template-columns: 1fr 1fr; |
| 4252 | - grid-gap: 8px; | |
| 4443 | + gap: 8px; | |
| 4253 | 4444 | } |
| 4254 | 4445 | .block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item { |
| 4255 | 4446 | margin-bottom: 0; |
| 4256 | 4447 | } |
| @@ -4265,59 +4456,54 @@ | ||
| 4265 | 4456 | .block-editor-inserter__popover.is-quick > .components-popover__content { |
| 4266 | 4457 | padding: 0; |
| 4267 | 4458 | } |
| 4268 | 4459 | |
| 4269 | -.block-editor-inserter__quick-inserter-expand.components-button { | |
| 4270 | - display: block; | |
| 4271 | - background: #1e1e1e; | |
| 4272 | - color: #fff; | |
| 4460 | +.block-editor-inserter__quick-inserter-expand { | |
| 4461 | + padding: 0 16px 16px; | |
| 4462 | +} | |
| 4463 | + | |
| 4464 | +.block-editor-inserter__quick-inserter-expand-toggle { | |
| 4273 | 4465 | width: 100%; |
| 4274 | - border-radius: 0; | |
| 4466 | + justify-content: center; | |
| 4275 | 4467 | } |
| 4276 | -.block-editor-inserter__quick-inserter-expand.components-button:hover { | |
| 4277 | - color: #fff; | |
| 4278 | -} | |
| 4279 | -.block-editor-inserter__quick-inserter-expand.components-button:active { | |
| 4280 | - color: #ccc; | |
| 4281 | -} | |
| 4282 | -.block-editor-inserter__quick-inserter-expand.components-button.components-button:focus:not(:disabled) { | |
| 4283 | - box-shadow: none; | |
| 4284 | - background: var(--wp-admin-theme-color); | |
| 4285 | - border-color: var(--wp-admin-theme-color); | |
| 4286 | -} | |
| 4287 | 4468 | |
| 4288 | 4469 | .block-editor-block-patterns-explorer__sidebar { |
| 4289 | - position: absolute; | |
| 4290 | - top: 72px; | |
| 4291 | - left: 0; | |
| 4292 | - bottom: 0; | |
| 4293 | - width: 280px; | |
| 4294 | - padding: 24px 24px 24px; | |
| 4295 | - overflow-x: visible; | |
| 4296 | - overflow-y: auto; | |
| 4470 | + padding-bottom: 24px; | |
| 4297 | 4471 | } |
| 4298 | -.block-editor-block-patterns-explorer__sidebar__categories-list__item { | |
| 4299 | - display: block; | |
| 4300 | - width: 100%; | |
| 4301 | - height: 48px; | |
| 4302 | - text-align: left; | |
| 4472 | +@media (min-width: 782px) { | |
| 4473 | + .block-editor-block-patterns-explorer__sidebar { | |
| 4474 | + position: absolute; | |
| 4475 | + top: 72px; | |
| 4476 | + left: 0; | |
| 4477 | + bottom: 0; | |
| 4478 | + width: 280px; | |
| 4479 | + padding: 24px; | |
| 4480 | + overflow-x: visible; | |
| 4481 | + overflow-y: auto; | |
| 4482 | + } | |
| 4303 | 4483 | } |
| 4304 | -.block-editor-block-patterns-explorer__search { | |
| 4305 | - margin-bottom: 32px; | |
| 4484 | + | |
| 4485 | +@media (min-width: 782px) { | |
| 4486 | + .block-editor-block-patterns-explorer__panel { | |
| 4487 | + margin-inline-start: 280px; | |
| 4488 | + } | |
| 4306 | 4489 | } |
| 4307 | -.block-editor-block-patterns-explorer__search-results-count { | |
| 4308 | - padding-bottom: 32px; | |
| 4490 | + | |
| 4491 | +.block-editor-block-patterns-explorer__no-results { | |
| 4492 | + padding: 32px; | |
| 4493 | + text-align: center; | |
| 4309 | 4494 | } |
| 4495 | + | |
| 4310 | 4496 | .block-editor-block-patterns-explorer__list { |
| 4311 | - margin-left: 280px; | |
| 4312 | 4497 | padding: 24px 0 32px; |
| 4313 | 4498 | } |
| 4314 | 4499 | .block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container { |
| 4315 | 4500 | width: 380px; |
| 4316 | 4501 | } |
| 4502 | + | |
| 4317 | 4503 | .block-editor-block-patterns-explorer .block-editor-block-patterns-list { |
| 4318 | 4504 | display: grid; |
| 4319 | - grid-gap: 32px; | |
| 4505 | + gap: 32px; | |
| 4320 | 4506 | grid-template-columns: repeat(1, 1fr); |
| 4321 | 4507 | margin-bottom: 16px; |
| 4322 | 4508 | } |
| 4323 | 4509 | @media (min-width: 1080px) { |
| @@ -4339,9 +4525,9 @@ | ||
| 4339 | 4525 | max-height: 800px; |
| 4340 | 4526 | } |
| 4341 | 4527 | |
| 4342 | 4528 | .components-heading.block-editor-inserter__patterns-category-panel-title { |
| 4343 | - font-weight: 499; | |
| 4529 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 4344 | 4530 | } |
| 4345 | 4531 | |
| 4346 | 4532 | .block-editor-inserter__patterns-explore-button.components-button, |
| 4347 | 4533 | .block-editor-inserter__media-library-button.components-button { |
| @@ -4350,17 +4536,26 @@ | ||
| 4350 | 4536 | margin-top: 16px; |
| 4351 | 4537 | width: 100%; |
| 4352 | 4538 | } |
| 4353 | 4539 | |
| 4540 | +.block-editor-inserter__media-mobile-screen { | |
| 4541 | + display: flex; | |
| 4542 | + flex-direction: column; | |
| 4543 | + align-self: stretch; | |
| 4544 | +} | |
| 4545 | + | |
| 4354 | 4546 | .block-editor-inserter__media-panel { |
| 4355 | - min-height: 100%; | |
| 4356 | 4547 | padding: 0 16px; |
| 4357 | 4548 | display: flex; |
| 4358 | 4549 | flex-direction: column; |
| 4550 | + flex: 1; | |
| 4551 | + min-height: 0; | |
| 4359 | 4552 | } |
| 4360 | 4553 | @media (min-width: 782px) { |
| 4361 | 4554 | .block-editor-inserter__media-panel { |
| 4362 | 4555 | padding: 0; |
| 4556 | + flex: 0 1 auto; | |
| 4557 | + min-height: 100%; | |
| 4363 | 4558 | } |
| 4364 | 4559 | } |
| 4365 | 4560 | .block-editor-inserter__media-panel .block-editor-inserter__media-panel-spinner { |
| 4366 | 4561 | height: 100%; |
| @@ -4377,9 +4572,68 @@ | ||
| 4377 | 4572 | margin-bottom: 0; |
| 4378 | 4573 | padding: 16px 24px 16px; |
| 4379 | 4574 | } |
| 4380 | 4575 | } |
| 4576 | +.block-editor-inserter__media-panel .block-editor-inserter__no-results { | |
| 4577 | + flex-grow: 1; | |
| 4578 | +} | |
| 4579 | +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer { | |
| 4580 | + flex-shrink: 0; | |
| 4581 | + padding-top: 16px; | |
| 4582 | + padding-bottom: 16px; | |
| 4583 | +} | |
| 4584 | +@media (min-width: 782px) { | |
| 4585 | + .block-editor-inserter__media-panel .block-editor-inserter__media-panel-footer { | |
| 4586 | + padding-left: 24px; | |
| 4587 | + padding-right: 24px; | |
| 4588 | + } | |
| 4589 | +} | |
| 4590 | +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-attach.components-button { | |
| 4591 | + justify-content: center; | |
| 4592 | + padding: 16px; | |
| 4593 | +} | |
| 4594 | +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-results { | |
| 4595 | + display: flex; | |
| 4596 | + flex-direction: column; | |
| 4597 | + flex-grow: 1; | |
| 4598 | + min-height: 0; | |
| 4599 | +} | |
| 4600 | +.block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list { | |
| 4601 | + opacity: 0.5; | |
| 4602 | + pointer-events: none; | |
| 4603 | +} | |
| 4604 | +@media not (prefers-reduced-motion) { | |
| 4605 | + .block-editor-inserter__media-panel .block-editor-inserter__media-panel-results.is-loading .block-editor-inserter__media-list { | |
| 4606 | + opacity: 1; | |
| 4607 | + animation: inserter-media-panel-pulse 1s ease-in-out infinite; | |
| 4608 | + } | |
| 4609 | +} | |
| 4610 | +.block-editor-inserter__media-panel.has-footer .block-editor-inserter__media-list { | |
| 4611 | + padding-bottom: 0; | |
| 4612 | +} | |
| 4381 | 4613 | |
| 4614 | +@keyframes inserter-media-panel-pulse { | |
| 4615 | + 0%, 100% { | |
| 4616 | + opacity: 1; | |
| 4617 | + } | |
| 4618 | + 50% { | |
| 4619 | + opacity: 0.5; | |
| 4620 | + } | |
| 4621 | +} | |
| 4622 | +.block-editor-inserter__media-panel-detach-modal { | |
| 4623 | + z-index: 1000001; | |
| 4624 | +} | |
| 4625 | +.block-editor-inserter__media-panel-detach-modal p { | |
| 4626 | + margin-top: 0; | |
| 4627 | +} | |
| 4628 | + | |
| 4629 | +.block-editor-inserter__media-panel-detach-actions { | |
| 4630 | + display: flex; | |
| 4631 | + justify-content: flex-end; | |
| 4632 | + gap: 8px; | |
| 4633 | + margin-top: 16px; | |
| 4634 | +} | |
| 4635 | + | |
| 4382 | 4636 | .block-editor-inserter__media-list__list-item { |
| 4383 | 4637 | position: relative; |
| 4384 | 4638 | cursor: var(--wpds-cursor-control, pointer); |
| 4385 | 4639 | margin-bottom: 24px; |
| @@ -4392,9 +4646,9 @@ | ||
| 4392 | 4646 | } |
| 4393 | 4647 | .block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview > * { |
| 4394 | 4648 | outline-color: rgba(0, 0, 0, 0.3); |
| 4395 | 4649 | } |
| 4396 | -.block-editor-inserter__media-list__list-item.is-hovered .block-editor-inserter__media-list__item-preview-options > button { | |
| 4650 | +.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 { | |
| 4397 | 4651 | display: block; |
| 4398 | 4652 | } |
| 4399 | 4653 | .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options { |
| 4400 | 4654 | position: absolute; |
| @@ -4576,12 +4830,12 @@ | ||
| 4576 | 4830 | flex-direction: column; |
| 4577 | 4831 | align-items: start; |
| 4578 | 4832 | } |
| 4579 | 4833 | .block-editor-block-visibility-modal__options-checkbox--everywhere { |
| 4580 | - font-weight: 600; | |
| 4834 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 4581 | 4835 | } |
| 4582 | 4836 | .block-editor-block-visibility-modal__options-icon--checked { |
| 4583 | - fill: #ddd; | |
| 4837 | + color: #ddd; | |
| 4584 | 4838 | } |
| 4585 | 4839 | .block-editor-block-visibility-modal__sub-options { |
| 4586 | 4840 | width: 100%; |
| 4587 | 4841 | padding-inline-start: 12px; |
| @@ -4591,11 +4845,52 @@ | ||
| 4591 | 4845 | color: #757575; |
| 4592 | 4846 | } |
| 4593 | 4847 | |
| 4594 | 4848 | .block-editor-block-visibility-info { |
| 4595 | - padding-top: 4px; | |
| 4596 | - padding-bottom: 4px; | |
| 4597 | 4849 | margin: 0 16px 16px; |
| 4598 | - display: flex; | |
| 4599 | - align-items: center; | |
| 4600 | - justify-content: start; | |
| 4850 | +} | |
| 4851 | + | |
| 4852 | +/* The stop element is invisible, so its focus indication is drawn around the | |
| 4853 | + canvas it stands for. For the iframed canvas it is an overlay instead of | |
| 4854 | + an outline, because Safari paints an outline on an iframe element | |
| 4855 | + underneath the iframe's content. */ | |
| 4856 | +.block-editor-iframe__scale-container > .block-editor-writing-flow__canvas-stop:focus::after { | |
| 4857 | + content: ""; | |
| 4858 | + position: absolute; | |
| 4859 | + inset: 0; | |
| 4860 | + z-index: 1; | |
| 4861 | + pointer-events: none; | |
| 4862 | + border: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color); | |
| 4863 | +} | |
| 4864 | + | |
| 4865 | +.block-editor-writing-flow__canvas-stop:focus + .block-editor-writing-flow { | |
| 4866 | + outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color); | |
| 4867 | + outline-offset: calc(-1 * var(--wp-admin-border-width-focus)); | |
| 4868 | +} | |
| 4869 | + | |
| 4870 | +/* Looks like a tooltip. Shown at the top of the canvas while the stop is | |
| 4871 | + focused. Sticky, because on the widgets screen the stop spans scrolling | |
| 4872 | + content and the hint must stay in view; anywhere else there is nothing | |
| 4873 | + to scroll and it stays at the top of the canvas. */ | |
| 4874 | +.block-editor-writing-flow__canvas-stop-hint { | |
| 4875 | + display: none; | |
| 4876 | + position: sticky; | |
| 4877 | + top: 16px; | |
| 4878 | + margin-inline: auto; | |
| 4879 | + width: fit-content; | |
| 4880 | + z-index: 2; | |
| 4881 | + background: #000; | |
| 4882 | + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 4883 | + border-radius: 4px; | |
| 4884 | + color: #f0f0f0; | |
| 4885 | + text-align: center; | |
| 4886 | + line-height: 1.4; | |
| 4887 | + font-size: 12px; | |
| 4888 | + padding: 4px 8px; | |
| 4889 | + 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); | |
| 4890 | + white-space: nowrap; | |
| 4891 | + pointer-events: none; | |
| 4892 | +} | |
| 4893 | + | |
| 4894 | +.block-editor-writing-flow__canvas-stop:focus > .block-editor-writing-flow__canvas-stop-hint { | |
| 4895 | + display: block; | |
| 4601 | 4896 | } |
