| @@ -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 |
| @@ -105,147 +111,12 @@ | ||
| 105 | 111 | --wp-admin-border-width-focus: 1.5px; |
| 106 | 112 | } |
| 107 | 113 | } |
| 108 | 114 | |
| 109 | -.admin-ui-page { | |
| 110 | - display: flex; | |
| 111 | - height: 100%; | |
| 112 | - background-color: var(--wpds-color-bg-surface-neutral, #fcfcfc); | |
| 113 | - color: var(--wpds-color-fg-content-neutral, #1e1e1e); | |
| 114 | - position: relative; | |
| 115 | - z-index: 1; | |
| 116 | - flex-flow: column; | |
| 117 | - text-wrap: pretty; | |
| 118 | -} | |
| 119 | - | |
| 120 | -.admin-ui-page__header { | |
| 121 | - padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px); | |
| 122 | - border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e4e4e4); | |
| 123 | - background: var(--wpds-color-bg-surface-neutral-strong, #ffffff); | |
| 124 | - position: sticky; | |
| 125 | - top: 0; | |
| 126 | - z-index: 1; | |
| 127 | -} | |
| 128 | - | |
| 129 | -.admin-ui-page__header-title { | |
| 130 | - font-family: var(--wpds-typography-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif); | |
| 131 | - font-size: var(--wpds-typography-font-size-lg, 15px); | |
| 132 | - font-weight: var(--wpds-typography-font-weight-medium, 499); | |
| 133 | - line-height: var(--wpds-typography-line-height-lg, 28px); | |
| 134 | - margin: 0; | |
| 135 | - overflow: hidden; | |
| 136 | - text-overflow: ellipsis; | |
| 137 | - white-space: nowrap; | |
| 138 | -} | |
| 139 | - | |
| 140 | -.admin-ui-page__sidebar-toggle-slot:empty { | |
| 141 | - display: none; | |
| 142 | -} | |
| 143 | - | |
| 144 | -.admin-ui-page__header-subtitle { | |
| 145 | - padding-block-end: var(--wpds-dimension-padding-xs, 4px); | |
| 146 | - color: var(--wpds-color-fg-content-neutral-weak, #707070); | |
| 147 | - font-size: var(--wpds-typography-font-size-md, 13px); | |
| 148 | - line-height: var(--wpds-typography-line-height-md, 24px); | |
| 149 | - margin: 0; | |
| 150 | -} | |
| 151 | - | |
| 152 | -.admin-ui-page__content { | |
| 153 | - flex-grow: 1; | |
| 154 | - overflow: auto; | |
| 155 | - display: flex; | |
| 156 | - flex-direction: column; | |
| 157 | -} | |
| 158 | - | |
| 159 | -.admin-ui-page__content.has-padding { | |
| 160 | - padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px); | |
| 161 | -} | |
| 162 | - | |
| 163 | -.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon { | |
| 164 | - width: auto; | |
| 165 | - padding: 0 var(--wpds-dimension-padding-xs, 4px); | |
| 166 | -} | |
| 167 | - | |
| 168 | -.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg { | |
| 169 | - display: none; | |
| 170 | -} | |
| 171 | - | |
| 172 | -.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after { | |
| 173 | - content: attr(aria-label); | |
| 174 | - font-size: var(--wpds-typography-font-size-sm, 12px); | |
| 175 | -} | |
| 176 | - | |
| 177 | 115 | /** |
| 178 | - * SCSS Variables. | |
| 179 | - * | |
| 180 | - * Please use variables from this sheet to ensure consistency across the UI. | |
| 181 | - * Don't add to this sheet unless you're pretty sure the value will be reused in many places. | |
| 182 | - * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. | |
| 183 | - */ | |
| 184 | -/** | |
| 185 | 116 | * Colors |
| 186 | 117 | */ |
| 187 | 118 | /** |
| 188 | - * Fonts & basic variables. | |
| 189 | - */ | |
| 190 | -/** | |
| 191 | - * Typography | |
| 192 | - */ | |
| 193 | -/** | |
| 194 | - * Grid System. | |
| 195 | - * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ | |
| 196 | - */ | |
| 197 | -/** | |
| 198 | - * Radius scale. | |
| 199 | - */ | |
| 200 | -/** | |
| 201 | - * Elevation scale. | |
| 202 | - */ | |
| 203 | -/** | |
| 204 | - * Dimensions. | |
| 205 | - */ | |
| 206 | -/** | |
| 207 | - * Mobile specific styles | |
| 208 | - */ | |
| 209 | -/** | |
| 210 | - * Editor styles. | |
| 211 | - */ | |
| 212 | -/** | |
| 213 | - * Block & Editor UI. | |
| 214 | - */ | |
| 215 | -/** | |
| 216 | - * Block paddings. | |
| 217 | - */ | |
| 218 | -/** | |
| 219 | - * React Native specific. | |
| 220 | - * These variables do not appear to be used anywhere else. | |
| 221 | - */ | |
| 222 | -.admin-ui-breadcrumbs__list { | |
| 223 | - font-family: var(--wpds-typography-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif); | |
| 224 | - font-size: var(--wpds-typography-font-size-lg, 15px); | |
| 225 | - font-weight: var(--wpds-typography-font-weight-medium, 499); | |
| 226 | - line-height: var(--wpds-typography-line-height-lg, 28px); | |
| 227 | - list-style: none; | |
| 228 | - padding: 0; | |
| 229 | - margin: 0; | |
| 230 | - gap: 0; | |
| 231 | - min-height: 32px; | |
| 232 | -} | |
| 233 | - | |
| 234 | -.admin-ui-breadcrumbs__list li:not(:last-child)::after { | |
| 235 | - content: "/"; | |
| 236 | - margin: 0 8px; | |
| 237 | -} | |
| 238 | - | |
| 239 | -.admin-ui-breadcrumbs__list h1 { | |
| 240 | - font-size: inherit; | |
| 241 | - line-height: inherit; | |
| 242 | -} | |
| 243 | - | |
| 244 | -/** | |
| 245 | - * Colors | |
| 246 | - */ | |
| 247 | -/** | |
| 248 | 119 | * SCSS Variables. |
| 249 | 120 | * |
| 250 | 121 | * Please use variables from this sheet to ensure consistency across the UI. |
| 251 | 122 | * Don't add to this sheet unless you're pretty sure the value will be reused in many places. |
| @@ -320,8 +191,14 @@ | ||
| 320 | 191 | /** |
| 321 | 192 | * Focus styles. |
| 322 | 193 | */ |
| 323 | 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 | +/** | |
| 324 | 201 | * Applies editor left position to the selector passed as argument |
| 325 | 202 | */ |
| 326 | 203 | /** |
| 327 | 204 | * Styles that are reused verbatim in a few places |
| @@ -344,8 +221,9 @@ | ||
| 344 | 221 | background: #fff; |
| 345 | 222 | color: #1e1e1e; |
| 346 | 223 | height: 100%; |
| 347 | 224 | overflow: auto; |
| 225 | + width: 100vw; | |
| 348 | 226 | } |
| 349 | 227 | |
| 350 | 228 | @media (min-width: 782px) { |
| 351 | 229 | .interface-complementary-area { |
| @@ -373,9 +251,9 @@ | ||
| 373 | 251 | } |
| 374 | 252 | |
| 375 | 253 | .interface-complementary-area h2 { |
| 376 | 254 | font-size: 13px; |
| 377 | - font-weight: 499; | |
| 255 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 378 | 256 | color: #1e1e1e; |
| 379 | 257 | margin-bottom: 1.5em; |
| 380 | 258 | } |
| 381 | 259 | |
| @@ -381,9 +259,9 @@ | ||
| 381 | 259 | |
| 382 | 260 | .interface-complementary-area h3 { |
| 383 | 261 | font-size: 11px; |
| 384 | 262 | text-transform: uppercase; |
| 385 | - font-weight: 499; | |
| 263 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 386 | 264 | color: #1e1e1e; |
| 387 | 265 | margin-bottom: 1.5em; |
| 388 | 266 | } |
| 389 | 267 | |
| @@ -415,14 +293,9 @@ | ||
| 415 | 293 | height: 100%; |
| 416 | 294 | } |
| 417 | 295 | |
| 418 | 296 | @media (min-width: 782px) { |
| 419 | - body.js.is-fullscreen-mode { | |
| 420 | - margin-top: -32px; | |
| 421 | - height: calc(100% + 32px); | |
| 422 | - } | |
| 423 | - body.js.is-fullscreen-mode #adminmenumain, | |
| 424 | - body.js.is-fullscreen-mode #wpadminbar { | |
| 297 | + body.js.is-fullscreen-mode #adminmenumain { | |
| 425 | 298 | display: none; |
| 426 | 299 | } |
| 427 | 300 | body.js.is-fullscreen-mode #wpcontent, |
| 428 | 301 | body.js.is-fullscreen-mode #wpfooter { |
| @@ -456,9 +329,9 @@ | ||
| 456 | 329 | .interface-interface-skeleton { |
| 457 | 330 | top: 32px; |
| 458 | 331 | } |
| 459 | 332 | .is-fullscreen-mode .interface-interface-skeleton { |
| 460 | - top: 0; | |
| 333 | + top: var(--wp-admin--admin-bar--height, 0); | |
| 461 | 334 | } |
| 462 | 335 | } |
| 463 | 336 | .interface-interface-skeleton__editor { |
| 464 | 337 | display: flex; |
| @@ -511,9 +384,9 @@ | ||
| 511 | 384 | } |
| 512 | 385 | |
| 513 | 386 | @media (min-width: 782px) { |
| 514 | 387 | .has-footer .interface-interface-skeleton__body { |
| 515 | - padding-bottom: 25px; | |
| 388 | + padding-bottom: calc(var(--wpds-dimension-size-md, 32px) + 1px); | |
| 516 | 389 | } |
| 517 | 390 | } |
| 518 | 391 | .interface-interface-skeleton__content { |
| 519 | 392 | flex-grow: 1; |
| @@ -600,9 +473,9 @@ | ||
| 600 | 473 | .interface-interface-skeleton__footer .block-editor-block-breadcrumb { |
| 601 | 474 | z-index: 30; |
| 602 | 475 | display: flex; |
| 603 | 476 | background: #fff; |
| 604 | - height: 24px; | |
| 477 | + height: var(--wpds-dimension-size-md, 32px); | |
| 605 | 478 | align-items: center; |
| 606 | 479 | font-size: 13px; |
| 607 | 480 | padding: 0 18px; |
| 608 | 481 | } |
| @@ -638,9 +511,9 @@ | ||
| 638 | 511 | border-left: 1px solid #ddd; |
| 639 | 512 | top: 32px; |
| 640 | 513 | } |
| 641 | 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 { |
| 642 | - top: 0; | |
| 515 | + top: var(--wp-admin--admin-bar--height, 0); | |
| 643 | 516 | } |
| 644 | 517 | } |
| 645 | 518 | .interface-pinned-items { |
| 646 | 519 | display: flex; |
| @@ -674,9 +547,9 @@ | ||
| 674 | 547 | margin-left: auto; |
| 675 | 548 | margin-right: auto; |
| 676 | 549 | } |
| 677 | 550 | .wp-block[data-type="core/widget-area"] .components-panel__body > .components-panel__body-title { |
| 678 | - 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; | |
| 679 | 552 | margin: 0; |
| 680 | 553 | height: 48px; |
| 681 | 554 | position: relative; |
| 682 | 555 | z-index: 1; |
| @@ -716,15 +589,28 @@ | ||
| 716 | 589 | pointer-events: none; |
| 717 | 590 | } |
| 718 | 591 | |
| 719 | 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); | |
| 720 | 594 | margin: auto; |
| 721 | - max-width: 780px; | |
| 722 | - padding: 20px; | |
| 595 | + width: 100%; | |
| 596 | + max-width: var(--wpds-dimension-surface-width-lg, 560px); | |
| 597 | + padding: var(--wpds-dimension-padding-xl, 20px); | |
| 723 | 598 | margin-top: 64px; |
| 724 | - 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); | |
| 725 | 599 | } |
| 726 | 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 | + | |
| 727 | 613 | .edit-widgets-header { |
| 728 | 614 | display: flex; |
| 729 | 615 | align-items: center; |
| 730 | 616 | justify-content: space-between; |
| @@ -826,12 +712,12 @@ | ||
| 826 | 712 | .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon.is-pressed, |
| 827 | 713 | .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon.is-pressed { |
| 828 | 714 | background: #1e1e1e; |
| 829 | 715 | } |
| 830 | -.edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon:focus:not(:disabled), | |
| 831 | -.edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon:focus:not(:disabled) { | |
| 832 | - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 1px #fff; | |
| 833 | - 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)); | |
| 834 | 720 | } |
| 835 | 721 | .edit-widgets-header-toolbar > .components-button.has-icon.has-icon.has-icon::before, |
| 836 | 722 | .edit-widgets-header-toolbar > .components-dropdown > .components-button.has-icon.has-icon::before { |
| 837 | 723 | display: none; |
| @@ -863,9 +749,9 @@ | ||
| 863 | 749 | margin: 0 0 2rem 0; |
| 864 | 750 | } |
| 865 | 751 | .edit-widgets-keyboard-shortcut-help-modal__section-title { |
| 866 | 752 | font-size: 0.9rem; |
| 867 | - font-weight: 600; | |
| 753 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 868 | 754 | } |
| 869 | 755 | .edit-widgets-keyboard-shortcut-help-modal__shortcut { |
| 870 | 756 | display: flex; |
| 871 | 757 | align-items: baseline; |
| @@ -879,9 +765,9 @@ | ||
| 879 | 765 | .edit-widgets-keyboard-shortcut-help-modal__shortcut:empty { |
| 880 | 766 | display: none; |
| 881 | 767 | } |
| 882 | 768 | .edit-widgets-keyboard-shortcut-help-modal__shortcut-term { |
| 883 | - font-weight: 600; | |
| 769 | + font-weight: var(--wpds-typography-font-weight-emphasis, 600); | |
| 884 | 770 | margin: 0 0 0 1rem; |
| 885 | 771 | text-align: right; |
| 886 | 772 | } |
| 887 | 773 | .edit-widgets-keyboard-shortcut-help-modal__shortcut-description { |
| @@ -919,9 +805,9 @@ | ||
| 919 | 805 | } |
| 920 | 806 | |
| 921 | 807 | .edit-widgets-notices__snackbar { |
| 922 | 808 | position: fixed; |
| 923 | - bottom: 24px; | |
| 809 | + bottom: var(--wpds-dimension-size-md, 32px); | |
| 924 | 810 | left: 0; |
| 925 | 811 | right: 0; |
| 926 | 812 | padding-inline: 16px; |
| 927 | 813 | box-sizing: border-box; |
| @@ -932,8 +818,18 @@ | ||
| 932 | 818 | .edit-widgets-notices__snackbar .components-snackbar { |
| 933 | 819 | margin-inline: auto; |
| 934 | 820 | } |
| 935 | 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 | + | |
| 936 | 832 | .edit-widgets-layout__inserter-panel { |
| 937 | 833 | height: 100%; |
| 938 | 834 | display: flex; |
| 939 | 835 | flex-direction: column; |
| @@ -970,9 +866,9 @@ | ||
| 970 | 866 | max-width: 100%; |
| 971 | 867 | object-fit: cover; |
| 972 | 868 | } |
| 973 | 869 | .edit-widgets-welcome-guide__heading { |
| 974 | - 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; | |
| 975 | 871 | font-size: 24px; |
| 976 | 872 | line-height: 1.4; |
| 977 | 873 | margin: 16px 0 16px 0; |
| 978 | 874 | padding: 0 32px; |
| @@ -987,14 +883,14 @@ | ||
| 987 | 883 | margin: 0 4px; |
| 988 | 884 | vertical-align: text-top; |
| 989 | 885 | } |
| 990 | 886 | .edit-widgets-welcome-guide .components-button:hover svg { |
| 991 | - fill: #fff; | |
| 887 | + color: #fff; | |
| 992 | 888 | } |
| 993 | 889 | |
| 994 | 890 | .edit-widgets-block-editor { |
| 995 | 891 | position: relative; |
| 996 | - 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; | |
| 997 | 893 | display: flex; |
| 998 | 894 | flex-direction: column; |
| 999 | 895 | flex-grow: 1; |
| 1000 | 896 | } |
| @@ -1007,9 +903,9 @@ | ||
| 1007 | 903 | .edit-widgets-block-editor .edit-widgets-main-block-list { |
| 1008 | 904 | height: 100%; |
| 1009 | 905 | } |
| 1010 | 906 | .edit-widgets-block-editor .components-button { |
| 1011 | - 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; | |
| 1012 | 908 | font-size: 13px; |
| 1013 | 909 | } |
| 1014 | 910 | .edit-widgets-block-editor .components-button.is-tertiary, .edit-widgets-block-editor .components-button.has-icon { |
| 1015 | 911 | padding: 6px; |
