| @@ -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 |
| @@ -185,8 +191,14 @@ | ||
| 185 | 191 | /** |
| 186 | 192 | * Focus styles. |
| 187 | 193 | */ |
| 188 | 194 | /** |
| 195 | + * Standard focus rings for the WordPress Design System. | |
| 196 | + * | |
| 197 | + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, | |
| 198 | + * e.g. `&:focus { @include outset-ring__focus(); }`. | |
| 199 | + */ | |
| 200 | +/** | |
| 189 | 201 | * Applies editor left position to the selector passed as argument |
| 190 | 202 | */ |
| 191 | 203 | /** |
| 192 | 204 | * Styles that are reused verbatim in a few places |
| @@ -209,8 +221,9 @@ | ||
| 209 | 221 | background: #fff; |
| 210 | 222 | color: #1e1e1e; |
| 211 | 223 | height: 100%; |
| 212 | 224 | overflow: auto; |
| 225 | + width: 100vw; | |
| 213 | 226 | } |
| 214 | 227 | |
| 215 | 228 | @media (min-width: 782px) { |
| 216 | 229 | .interface-complementary-area { |
| @@ -238,9 +251,9 @@ | ||
| 238 | 251 | } |
| 239 | 252 | |
| 240 | 253 | .interface-complementary-area h2 { |
| 241 | 254 | font-size: 13px; |
| 242 | - font-weight: 499; | |
| 255 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 243 | 256 | color: #1e1e1e; |
| 244 | 257 | margin-bottom: 1.5em; |
| 245 | 258 | } |
| 246 | 259 | |
| @@ -246,9 +259,9 @@ | ||
| 246 | 259 | |
| 247 | 260 | .interface-complementary-area h3 { |
| 248 | 261 | font-size: 11px; |
| 249 | 262 | text-transform: uppercase; |
| 250 | - font-weight: 499; | |
| 263 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 251 | 264 | color: #1e1e1e; |
| 252 | 265 | margin-bottom: 1.5em; |
| 253 | 266 | } |
| 254 | 267 | |
| @@ -280,14 +293,9 @@ | ||
| 280 | 293 | height: 100%; |
| 281 | 294 | } |
| 282 | 295 | |
| 283 | 296 | @media (min-width: 782px) { |
| 284 | - body.js.is-fullscreen-mode { | |
| 285 | - margin-top: -32px; | |
| 286 | - height: calc(100% + 32px); | |
| 287 | - } | |
| 288 | - body.js.is-fullscreen-mode #adminmenumain, | |
| 289 | - body.js.is-fullscreen-mode #wpadminbar { | |
| 297 | + body.js.is-fullscreen-mode #adminmenumain { | |
| 290 | 298 | display: none; |
| 291 | 299 | } |
| 292 | 300 | body.js.is-fullscreen-mode #wpcontent, |
| 293 | 301 | body.js.is-fullscreen-mode #wpfooter { |
| @@ -321,9 +329,9 @@ | ||
| 321 | 329 | .interface-interface-skeleton { |
| 322 | 330 | top: 32px; |
| 323 | 331 | } |
| 324 | 332 | .is-fullscreen-mode .interface-interface-skeleton { |
| 325 | - top: 0; | |
| 333 | + top: var(--wp-admin--admin-bar--height, 0); | |
| 326 | 334 | } |
| 327 | 335 | } |
| 328 | 336 | .interface-interface-skeleton__editor { |
| 329 | 337 | display: flex; |
| @@ -376,9 +384,9 @@ | ||
| 376 | 384 | } |
| 377 | 385 | |
| 378 | 386 | @media (min-width: 782px) { |
| 379 | 387 | .has-footer .interface-interface-skeleton__body { |
| 380 | - padding-bottom: 25px; | |
| 388 | + padding-bottom: calc(var(--wpds-dimension-size-md, 32px) + 1px); | |
| 381 | 389 | } |
| 382 | 390 | } |
| 383 | 391 | .interface-interface-skeleton__content { |
| 384 | 392 | flex-grow: 1; |
| @@ -465,9 +473,9 @@ | ||
| 465 | 473 | .interface-interface-skeleton__footer .block-editor-block-breadcrumb { |
| 466 | 474 | z-index: 30; |
| 467 | 475 | display: flex; |
| 468 | 476 | background: #fff; |
| 469 | - height: 24px; | |
| 477 | + height: var(--wpds-dimension-size-md, 32px); | |
| 470 | 478 | align-items: center; |
| 471 | 479 | font-size: 13px; |
| 472 | 480 | padding: 0 18px; |
| 473 | 481 | } |
| @@ -503,9 +511,9 @@ | ||
| 503 | 511 | border-right: 1px solid #ddd; |
| 504 | 512 | top: 32px; |
| 505 | 513 | } |
| 506 | 514 | .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within { |
| 507 | - top: 0; | |
| 515 | + top: var(--wp-admin--admin-bar--height, 0); | |
| 508 | 516 | } |
| 509 | 517 | } |
| 510 | 518 | .interface-pinned-items { |
| 511 | 519 | display: flex; |
| @@ -539,9 +547,9 @@ | ||
| 539 | 547 | margin-right: auto; |
| 540 | 548 | margin-left: auto; |
| 541 | 549 | } |
| 542 | 550 | .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title { |
| 543 | - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 551 | + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 544 | 552 | margin: 0; |
| 545 | 553 | height: 48px; |
| 546 | 554 | position: relative; |
| 547 | 555 | z-index: 1; |
| @@ -581,15 +589,28 @@ | ||
| 581 | 589 | pointer-events: none; |
| 582 | 590 | } |
| 583 | 591 | |
| 584 | 592 | .edit-widgets-error-boundary { |
| 593 | + font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif); | |
| 585 | 594 | margin: auto; |
| 586 | - max-width: 780px; | |
| 587 | - padding: 20px; | |
| 595 | + width: 100%; | |
| 596 | + max-width: var(--wpds-dimension-surface-width-lg, 560px); | |
| 597 | + padding: var(--wpds-dimension-padding-xl, 20px); | |
| 588 | 598 | margin-top: 64px; |
| 589 | - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02); | |
| 590 | 599 | } |
| 591 | 600 | |
| 601 | +.edit-widgets-error-boundary__report { | |
| 602 | + max-height: 420px; | |
| 603 | + overflow: auto; | |
| 604 | + overflow-anchor: none; | |
| 605 | +} | |
| 606 | + | |
| 607 | +.edit-widgets-error-boundary__report-section { | |
| 608 | + margin: 0; | |
| 609 | + white-space: pre-wrap; | |
| 610 | + overflow-wrap: break-word; | |
| 611 | +} | |
| 612 | + | |
| 592 | 613 | .edit-widgets-header { |
| 593 | 614 | display: flex; |
| 594 | 615 | align-items: center; |
| 595 | 616 | justify-content: space-between; |
| @@ -691,12 +712,12 @@ | ||
| 691 | 712 | .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon.is-pressed, |
| 692 | 713 | .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon.is-pressed { |
| 693 | 714 | background: #1e1e1e; |
| 694 | 715 | } |
| 695 | -.edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon:focus:not(:disabled), | |
| 696 | -.edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon:focus:not(:disabled) { | |
| 697 | - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff; | |
| 698 | - outline: 1px solid transparent; | |
| 716 | +.edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon:focus:not(:active), | |
| 717 | +.edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon:focus:not(:active) { | |
| 718 | + 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))); | |
| 719 | + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)); | |
| 699 | 720 | } |
| 700 | 721 | .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon::before, |
| 701 | 722 | .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon::before { |
| 702 | 723 | display: none; |
| @@ -728,9 +749,9 @@ | ||
| 728 | 749 | margin: 0 0 2rem 0; |
| 729 | 750 | } |
| 730 | 751 | .edit-widgets-keyboard-shortcut-help-modal__section-title { |
| 731 | 752 | font-size: 0.9rem; |
| 732 | - font-weight: 600; | |
| 753 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 733 | 754 | } |
| 734 | 755 | .edit-widgets-keyboard-shortcut-help-modal__shortcut { |
| 735 | 756 | display: flex; |
| 736 | 757 | align-items: baseline; |
| @@ -744,9 +765,9 @@ | ||
| 744 | 765 | .edit-widgets-keyboard-shortcut-help-modal__shortcut:empty { |
| 745 | 766 | display: none; |
| 746 | 767 | } |
| 747 | 768 | .edit-widgets-keyboard-shortcut-help-modal__shortcut-term { |
| 748 | - font-weight: 600; | |
| 769 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 749 | 770 | margin: 0 1rem 0 0; |
| 750 | 771 | text-align: left; |
| 751 | 772 | } |
| 752 | 773 | .edit-widgets-keyboard-shortcut-help-modal__shortcut-description { |
| @@ -784,9 +805,9 @@ | ||
| 784 | 805 | } |
| 785 | 806 | |
| 786 | 807 | .edit-widgets-notices__snackbar { |
| 787 | 808 | position: fixed; |
| 788 | - bottom: 24px; | |
| 809 | + bottom: var(--wpds-dimension-size-md, 32px); | |
| 789 | 810 | right: 0; |
| 790 | 811 | left: 0; |
| 791 | 812 | padding-inline: 16px; |
| 792 | 813 | box-sizing: border-box; |
| @@ -797,8 +818,18 @@ | ||
| 797 | 818 | .edit-widgets-notices__snackbar .components-snackbar { |
| 798 | 819 | margin-inline: auto; |
| 799 | 820 | } |
| 800 | 821 | |
| 822 | +.edit-widgets-notices.notices-inline-notices-wrapper, | |
| 823 | +.edit-widgets-notices .components-notice-list { | |
| 824 | + gap: 0; | |
| 825 | +} | |
| 826 | + | |
| 827 | +.edit-widgets-notices .components-notice { | |
| 828 | + border-top-width: 0; | |
| 829 | + border-inline-width: 0; | |
| 830 | +} | |
| 831 | + | |
| 801 | 832 | .edit-widgets-layout__inserter-panel { |
| 802 | 833 | height: 100%; |
| 803 | 834 | display: flex; |
| 804 | 835 | flex-direction: column; |
| @@ -835,9 +866,9 @@ | ||
| 835 | 866 | max-width: 100%; |
| 836 | 867 | object-fit: cover; |
| 837 | 868 | } |
| 838 | 869 | .edit-widgets-welcome-guide__heading { |
| 839 | - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 870 | + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 840 | 871 | font-size: 24px; |
| 841 | 872 | line-height: 1.4; |
| 842 | 873 | margin: 16px 0 16px 0; |
| 843 | 874 | padding: 0 32px; |
| @@ -852,14 +883,14 @@ | ||
| 852 | 883 | margin: 0 4px; |
| 853 | 884 | vertical-align: text-top; |
| 854 | 885 | } |
| 855 | 886 | .edit-widgets-welcome-guide .components-button:hover svg { |
| 856 | - fill: #fff; | |
| 887 | + color: #fff; | |
| 857 | 888 | } |
| 858 | 889 | |
| 859 | 890 | .edit-widgets-block-editor { |
| 860 | 891 | position: relative; |
| 861 | - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 892 | + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 862 | 893 | display: flex; |
| 863 | 894 | flex-direction: column; |
| 864 | 895 | flex-grow: 1; |
| 865 | 896 | } |
| @@ -872,9 +903,9 @@ | ||
| 872 | 903 | .edit-widgets-block-editor .edit-widgets-main-block-list { |
| 873 | 904 | height: 100%; |
| 874 | 905 | } |
| 875 | 906 | .edit-widgets-block-editor .components-button { |
| 876 | - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 907 | + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; | |
| 877 | 908 | font-size: 13px; |
| 878 | 909 | } |
| 879 | 910 | .edit-widgets-block-editor .components-button.is-tertiary, .edit-widgets-block-editor .components-button.has-icon { |
| 880 | 911 | padding: 6px; |
