PluginProbe
Gutenberg / 24.1.0
Gutenberg v24.1.0
24.1.0 24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 All 404 releases
← All changes | build/styles/edit-site/style.css +380 -627 23.5.2 → 24.1.0 View file →
@@ -1,5 +1,4 @@
1 -@charset "UTF-8";
2 1 /**
3 2 * Typography
4 3 */
5 4 /**
@@ -68,8 +67,14 @@
68 67 /**
69 68 * Focus styles.
70 69 */
71 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 +/**
72 77 * Applies editor left position to the selector passed as argument
73 78 */
74 79 /**
75 80 * Styles that are reused verbatim in a few places
@@ -176,8 +181,14 @@
176 181 /**
177 182 * Focus styles.
178 183 */
179 184 /**
185 + * Standard focus rings for the WordPress Design System.
186 + *
187 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
188 + * e.g. `&:focus { @include outset-ring__focus(); }`.
189 + */
190 +/**
180 191 * Applies editor left position to the selector passed as argument
181 192 */
182 193 /**
183 194 * Styles that are reused verbatim in a few places
@@ -202,9 +213,8 @@
202 213 flex-grow: 1;
203 214 min-height: 0;
204 215 box-sizing: border-box;
205 216 scroll-padding-bottom: 64px;
206 - /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
207 217 container: dataviews-wrapper/inline-size;
208 218 display: flex;
209 219 flex-direction: column;
210 220 font-size: var(--wpds-typography-font-size-md, 13px);
@@ -227,8 +237,16 @@
227 237 .dataviews-filters__container {
228 238 transition: padding ease-out 0.1s;
229 239 }
230 240 }
241 +.dataviews__search {
242 + flex-grow: 1;
243 +}
244 +
245 +.dataviews__search .dataviews-search {
246 + flex-basis: 210px;
247 +}
248 +
231 249 .dataviews-no-results,
232 250 .dataviews-loading {
233 251 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
234 252 flex-grow: 1;
@@ -265,8 +283,12 @@
265 283 .dataviews-loading-more {
266 284 text-align: center;
267 285 }
268 286
287 +.dataviews-loading-more[aria-hidden=true] {
288 + visibility: hidden;
289 +}
290 +
269 291 @container (max-width: 430px) {
270 292 .dataviews__view-actions,
271 293 .dataviews-filters__container {
272 294 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
@@ -273,9 +295,9 @@
273 295 }
274 296 }
275 297 .dataviews-title-field {
276 298 font-size: var(--wpds-typography-font-size-md, 13px);
277 - font-weight: var(--wpds-typography-font-weight-medium, 499);
299 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
278 300 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
279 301 text-overflow: ellipsis;
280 302 white-space: nowrap;
281 303 width: 100%;
@@ -419,10 +441,10 @@
419 441 }
420 442
421 443 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
422 444 width: 100%;
445 + min-width: 0;
423 446 white-space: nowrap;
424 - overflow: hidden;
425 447 }
426 448
427 449 .dataviews-filters__summary-chip-container {
428 450 position: relative;
@@ -473,9 +495,9 @@
473 495 box-shadow: 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
474 496 }
475 497
476 498 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip .dataviews-filters-__summary-filter-text-name {
477 - font-weight: var(--wpds-typography-font-weight-medium, 499);
499 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
478 500 }
479 501
480 502 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove {
481 503 width: var(--wpds-dimension-size-sm, 24px);
@@ -494,9 +516,9 @@
494 516 cursor: var(--wpds-cursor-control, pointer);
495 517 }
496 518
497 519 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
498 - fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
520 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
499 521 }
500 522
501 523 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
502 524 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
@@ -502,13 +524,13 @@
502 524 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
503 525 }
504 526
505 527 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
506 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
528 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
507 529 }
508 530
509 531 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
510 - fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
532 + color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
511 533 }
512 534
513 535 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
514 536 background: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
@@ -526,9 +548,9 @@
526 548 border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
527 549 }
528 550
529 551 .dataviews-filters__search-widget-filter-combobox-list .dataviews-filters__search-widget-filter-combobox-item-value [data-user-value] {
530 - font-weight: 600;
552 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
531 553 }
532 554
533 555 .dataviews-filters__search-widget-listbox {
534 556 padding: var(--wpds-dimension-padding-xs, 4px);
@@ -543,12 +565,13 @@
543 565 box-sizing: border-box;
544 566 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-md, 12px);
545 567 cursor: default;
546 568 min-height: var(--wpds-dimension-size-md, 32px);
547 - font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
548 - font-weight: 400;
569 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
570 + font-weight: var(--wpds-typography-font-weight-default, 400);
549 571 font-size: 13px;
550 572 line-height: 20px;
573 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
551 574 }
552 575
553 576 .dataviews-filters__search-widget-listitem:last-child {
554 577 margin-block-end: 0;
@@ -555,8 +578,9 @@
555 578 }
556 579
557 580 .dataviews-filters__search-widget-listitem:hover, .dataviews-filters__search-widget-listitem[data-active-item], .dataviews-filters__search-widget-listitem:focus {
558 581 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
582 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
559 583 }
560 584
561 585 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection {
562 586 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
@@ -568,10 +592,11 @@
568 592 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
569 593 }
570 594
571 595 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
596 + /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
597 + background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
572 598 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
573 - background: var(--wpds-color-background-surface-neutral-strong, #fff);
574 599 }
575 600
576 601 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
577 602 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
@@ -577,8 +602,12 @@
577 602 border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
578 603 background: var(--wpds-color-background-interactive-brand-strong-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 93%, black));
579 604 }
580 605
606 +.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-description {
607 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
608 +}
609 +
581 610 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-value {
582 611 overflow: hidden;
583 612 text-overflow: ellipsis;
584 613 white-space: nowrap;
@@ -590,9 +619,9 @@
590 619 overflow: hidden;
591 620 text-overflow: ellipsis;
592 621 font-size: var(--wpds-typography-font-size-sm, 12px);
593 622 line-height: 16px;
594 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
623 + color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
595 624 }
596 625
597 626 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
598 627 border: 1px solid #1e1e1e;
@@ -681,28 +710,22 @@
681 710 }
682 711 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
683 712 --checkbox-size: 24px;
684 713 flex-shrink: 0;
685 - border: 1px solid #1e1e1e;
714 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
686 715 margin-right: 12px;
687 716 transition: none;
688 717 border-radius: 2px;
689 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
718 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
690 719 padding: 6px 8px;
691 720 /* Fonts smaller than 16px causes mobile safari to zoom. */
692 721 font-size: 16px;
693 722 /* Override core line-height. To be reviewed. */
694 723 line-height: normal;
695 - box-shadow: 0 0 0 transparent;
696 - border-radius: 2px;
697 - border: 1px solid #949494;
724 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
725 + border-radius: var(--wpds-border-radius-sm, 2px);
698 726 }
699 727
700 -@media not (prefers-reduced-motion) {
701 - .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
702 - transition: box-shadow 0.1s linear;
703 - }
704 -}
705 728 @media (min-width: 600px) {
706 729 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
707 730 font-size: 13px;
708 731 /* Override core line-height. To be reviewed. */
@@ -708,20 +731,25 @@
708 731 /* Override core line-height. To be reviewed. */
709 732 line-height: normal;
710 733 }
711 734 }
735 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
736 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
737 +}
738 +
712 739 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
713 - border-color: var(--wp-admin-theme-color);
714 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
715 - outline: 2px solid transparent;
740 + 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)));
741 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
742 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
743 + box-shadow: none;
716 744 }
717 745
718 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
746 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
719 747 color: rgba(30, 30, 30, 0.62);
720 748 }
721 749
722 -.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
723 - color: rgba(30, 30, 30, 0.62);
750 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:hover:not(:disabled, [aria-disabled=true]) {
751 + background: var(--wpds-color-background-interactive-neutral-active, #fff);
724 752 }
725 753
726 754 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
727 755 box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
@@ -754,9 +782,9 @@
754 782 display: inline-block;
755 783 vertical-align: middle;
756 784 width: 16px;
757 785 /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
758 - font: normal 30px/1 dashicons;
786 + font: 400 30px/1 dashicons;
759 787 speak: none;
760 788 -webkit-font-smoothing: antialiased;
761 789 -moz-osx-font-smoothing: grayscale;
762 790 }
@@ -767,17 +795,23 @@
767 795 font-size: 21px;
768 796 }
769 797 }
770 798 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled {
771 - background: #f0f0f0;
772 - border-color: #ddd;
799 + background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
800 + border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
801 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
773 802 cursor: default;
774 803 opacity: 1;
775 804 }
776 805
806 +.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true]:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true][aria-checked=mixed]::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled[aria-checked=mixed]::before {
807 + color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
808 +}
809 +
777 810 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
778 811 position: relative;
779 - background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
812 + /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
813 + background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
780 814 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
781 815 margin: 0;
782 816 padding: 0;
783 817 width: var(--checkbox-size);
@@ -800,9 +834,9 @@
800 834 }
801 835
802 836 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
803 837 --checkmark-size: var(--checkbox-size);
804 - fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
838 + color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
805 839 position: absolute;
806 840 left: 50%;
807 841 top: 50%;
808 842 transform: translate(-50%, -50%);
@@ -820,24 +854,18 @@
820 854 padding: var(--wpds-dimension-padding-sm, 8px);
821 855 }
822 856
823 857 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
824 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
858 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
825 859 padding: 6px 8px;
826 860 /* Fonts smaller than 16px causes mobile safari to zoom. */
827 861 font-size: 16px;
828 862 /* Override core line-height. To be reviewed. */
829 863 line-height: normal;
830 - box-shadow: 0 0 0 transparent;
831 - border-radius: 2px;
832 - border: 1px solid #949494;
864 + border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
865 + border-radius: var(--wpds-border-radius-sm, 2px);
833 866 }
834 867
835 -@media not (prefers-reduced-motion) {
836 - .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
837 - transition: box-shadow 0.1s linear;
838 - }
839 -}
840 868 @media (min-width: 600px) {
841 869 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
842 870 font-size: 13px;
843 871 /* Override core line-height. To be reviewed. */
@@ -843,16 +871,17 @@
843 871 /* Override core line-height. To be reviewed. */
844 872 line-height: normal;
845 873 }
846 874 }
847 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
848 - border-color: var(--wp-admin-theme-color);
849 - box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
850 - outline: 2px solid transparent;
875 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:hover:not(:disabled, [aria-disabled=true]) {
876 + border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
851 877 }
852 878
853 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
854 - color: rgba(30, 30, 30, 0.62);
879 +.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
880 + 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)));
881 + outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
882 + border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
883 + box-shadow: none;
855 884 }
856 885
857 886 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
858 887 color: rgba(30, 30, 30, 0.62);
@@ -875,15 +904,10 @@
875 904 }
876 905 }
877 906 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:focus {
878 907 background: var(--wpds-color-background-surface-neutral-strong, #fff);
879 - box-shadow: inset 0 0 0 var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
880 908 }
881 909
882 -.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
883 - color: var(--wpds-color-foreground-content-neutral-weak, #707070);
884 -}
885 -
886 910 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
887 911 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
888 912 }
889 913
@@ -928,13 +952,8 @@
928 952 color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
929 953 box-sizing: border-box;
930 954 }
931 955
932 -.dataviews-search {
933 - width: -moz-fit-content;
934 - width: fit-content;
935 -}
936 -
937 956 .dataviews-filters__user-input-widget {
938 957 padding: var(--wpds-dimension-padding-lg, 16px);
939 958 }
940 959
@@ -995,9 +1014,9 @@
995 1014 }
996 1015 }
997 1016 .dataviews-pagination__page-select {
998 1017 font-size: 11px;
999 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1018 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1000 1019 text-transform: uppercase;
1001 1020 }
1002 1021
1003 1022 @media (min-width: 600px) {
@@ -1002,9 +1021,9 @@
1002 1021
1003 1022 @media (min-width: 600px) {
1004 1023 .dataviews-pagination__page-select .components-select-control__input {
1005 1024 font-size: 11px !important;
1006 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1025 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1007 1026 }
1008 1027 }
1009 1028 .dataviews-action-modal {
1010 1029 z-index: 1000001;
@@ -1033,9 +1052,8 @@
1033 1052 }
1034 1053
1035 1054 .dataviews-view-config {
1036 1055 width: 320px;
1037 - /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
1038 1056 container-type: inline-size;
1039 1057 font-size: var(--wpds-typography-font-size-md, 13px);
1040 1058 line-height: var(--wpds-typography-line-height-sm, 20px);
1041 1059 }
@@ -1212,9 +1230,8 @@
1212 1230 }
1213 1231
1214 1232 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
1215 1233 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
1216 - width: -moz-fit-content;
1217 1234 width: fit-content;
1218 1235 }
1219 1236
1220 1237 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value,
@@ -1234,9 +1251,9 @@
1234 1251
1235 1252 .dataviews-view-grid .dataviews-view-grid__media,
1236 1253 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media {
1237 1254 width: 100%;
1238 - aspect-ratio: 1/1;
1255 + aspect-ratio: var(--wp-dataviews-media-aspect-ratio, 1/1);
1239 1256 background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
1240 1257 border-radius: var(--wpds-border-radius-md, 4px);
1241 1258 overflow: hidden;
1242 1259 position: relative;
@@ -1248,9 +1265,8 @@
1248 1265 }
1249 1266
1250 1267 .dataviews-view-grid .dataviews-view-grid__media img,
1251 1268 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
1252 - -o-object-fit: cover;
1253 1269 object-fit: cover;
1254 1270 width: 100%;
1255 1271 height: 100%;
1256 1272 }
@@ -1277,8 +1293,18 @@
1277 1293 box-shadow: none;
1278 1294 background: var(--wpds-color-background-surface-neutral, #fcfcfc);
1279 1295 }
1280 1296
1297 +.dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media,
1298 +.dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media {
1299 + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
1300 +}
1301 +
1302 +.dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
1303 +.dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
1304 + object-fit: contain;
1305 +}
1306 +
1281 1307 .dataviews-view-grid .dataviews-view-grid__fields,
1282 1308 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__fields {
1283 1309 position: relative;
1284 1310 font-size: 12px;
@@ -1408,9 +1434,9 @@
1408 1434 }
1409 1435
1410 1436 .dataviews-view-grid__group-header {
1411 1437 font-size: var(--wpds-typography-font-size-lg, 15px);
1412 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1438 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1413 1439 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1414 1440 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1415 1441 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1416 1442 container-type: inline-size;
@@ -1439,9 +1465,8 @@
1439 1465
1440 1466 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
1441 1467 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
1442 1468 display: flex;
1443 - width: -moz-max-content;
1444 1469 width: max-content;
1445 1470 flex: 0 0 auto;
1446 1471 gap: var(--wpds-dimension-gap-xs, 4px);
1447 1472 white-space: nowrap;
@@ -1494,10 +1519,9 @@
1494 1519 .dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within,
1495 1520 .dataviews-view-list div[role=article]:not(.is-selected):hover,
1496 1521 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered,
1497 1522 .dataviews-view-list div[role=article]:not(.is-selected):focus-within {
1498 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1499 - background-color: var(--wpds-color-background-interactive-brand-weak, rgba(0, 0, 0, 0));
1523 + background-color: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
1500 1524 }
1501 1525
1502 1526 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-title-field,
1503 1527 .dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__field, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-title-field,
@@ -1508,9 +1532,9 @@
1508 1532 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-title-field,
1509 1533 .dataviews-view-list div[role=article]:not(.is-selected).is-hovered .dataviews-view-list__field,
1510 1534 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-title-field,
1511 1535 .dataviews-view-list div[role=article]:not(.is-selected):focus-within .dataviews-view-list__field {
1512 - color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1536 + color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1513 1537 }
1514 1538
1515 1539 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
1516 1540 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
@@ -1516,9 +1540,9 @@
1516 1540 .dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper,
1517 1541 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper,
1518 1542 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper {
1519 1543 background-color: var(--wpds-color-background-interactive-brand-weak-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 12%, white));
1520 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
1544 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1521 1545 }
1522 1546
1523 1547 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1524 1548 .dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
@@ -1527,9 +1551,9 @@
1527 1551 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-title-field,
1528 1552 .dataviews-view-list div[role=article].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__field,
1529 1553 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-title-field,
1530 1554 .dataviews-view-list div[role=article].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__field {
1531 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
1555 + color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1532 1556 }
1533 1557
1534 1558 .dataviews-view-list .dataviews-view-list__item {
1535 1559 position: absolute;
@@ -1535,10 +1559,8 @@
1535 1559 position: absolute;
1536 1560 z-index: 1;
1537 1561 inset: 0;
1538 1562 scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
1539 - -webkit-appearance: none;
1540 - -moz-appearance: none;
1541 1563 appearance: none;
1542 1564 border: none;
1543 1565 background: none;
1544 1566 padding: 0;
@@ -1581,9 +1603,8 @@
1581 1603
1582 1604 .dataviews-view-list .dataviews-view-list__media-wrapper img {
1583 1605 width: 100%;
1584 1606 height: 100%;
1585 - -o-object-fit: cover;
1586 1607 object-fit: cover;
1587 1608 }
1588 1609
1589 1610 .dataviews-view-list .dataviews-view-list__media-wrapper::after {
@@ -1603,9 +1624,9 @@
1603 1624 min-width: 0;
1604 1625 }
1605 1626
1606 1627 .dataviews-view-list .dataviews-view-list__field {
1607 - color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
1628 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
1608 1629 }
1609 1630
1610 1631 .dataviews-view-list .dataviews-view-list__fields {
1611 1632 display: flex;
@@ -1702,11 +1723,11 @@
1702 1723 }
1703 1724 }
1704 1725 .dataviews-view-list__group-header {
1705 1726 font-size: var(--wpds-typography-font-size-lg, 15px);
1706 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1727 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1707 1728 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1708 - margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
1729 + margin: 0 0 var(--wpds-dimension-gap-lg, 16px) 0;
1709 1730 padding: 0 var(--wpds-dimension-padding-2xl, 24px);
1710 1731 }
1711 1732
1712 1733 .dataviews-view-table {
@@ -1722,9 +1743,9 @@
1722 1743
1723 1744 .dataviews-view-table th {
1724 1745 text-align: left;
1725 1746 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1726 - font-weight: normal;
1747 + font-weight: 400;
1727 1748 font-size: var(--wpds-typography-font-size-md, 13px);
1728 1749 }
1729 1750
1730 1751 .dataviews-view-table td,
@@ -1752,9 +1773,9 @@
1752 1773 top: 0;
1753 1774 bottom: 0;
1754 1775 left: 0;
1755 1776 width: 1px;
1756 - background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
1777 + background-color: var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
1757 1778 }
1758 1779
1759 1780 .dataviews-view-table td.dataviews-view-table__checkbox-column,
1760 1781 .dataviews-view-table th.dataviews-view-table__checkbox-column {
@@ -1847,9 +1868,9 @@
1847 1868 padding-top: var(--wpds-dimension-padding-sm, 8px);
1848 1869 padding-bottom: var(--wpds-dimension-padding-sm, 8px);
1849 1870 font-size: 11px;
1850 1871 text-transform: uppercase;
1851 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1872 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1852 1873 }
1853 1874
1854 1875 .dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
1855 1876 padding-left: var(--wpds-dimension-padding-xs, 4px);
@@ -1895,9 +1916,9 @@
1895 1916 .dataviews-view-table .dataviews-view-table-header-button {
1896 1917 padding: var(--wpds-dimension-padding-xs, 4px) var(--wpds-dimension-padding-sm, 8px);
1897 1918 font-size: 11px;
1898 1919 text-transform: uppercase;
1899 - font-weight: var(--wpds-typography-font-weight-medium, 499);
1920 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1900 1921 }
1901 1922
1902 1923 .dataviews-view-table .dataviews-view-table-header-button:not(:hover) {
1903 1924 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
@@ -1966,9 +1987,8 @@
1966 1987
1967 1988 .dataviews-column-primary__media img {
1968 1989 width: var(--wpds-dimension-size-md, 32px);
1969 1990 height: var(--wpds-dimension-size-md, 32px);
1970 - -o-object-fit: cover;
1971 1991 object-fit: cover;
1972 1992 }
1973 1993
1974 1994 .dataviews-column-primary__media::after {
@@ -1981,8 +2001,19 @@
1981 2001 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) rgba(0, 0, 0, 0.1);
1982 2002 border-radius: var(--wpds-border-radius-md, 4px);
1983 2003 }
1984 2004
2005 +.dataviews-view-table.has-media-aspect-ratio .dataviews-column-primary__media {
2006 + height: var(--wpds-dimension-size-md, 32px);
2007 + aspect-ratio: var(--wp-dataviews-media-aspect-ratio, 1/1);
2008 + min-width: 0;
2009 +}
2010 +
2011 +.dataviews-view-table.has-media-aspect-ratio .dataviews-column-primary__media img {
2012 + width: 100%;
2013 + height: 100%;
2014 +}
2015 +
1985 2016 .dataviews-view-table__cell-content-wrapper:not(.dataviews-column-primary__media),
1986 2017 .dataviews-view-table__primary-column-content:not(.dataviews-column-primary__media) {
1987 2018 min-width: 15ch;
1988 2019 max-width: 80ch;
@@ -1988,9 +2019,9 @@
1988 2019 max-width: 80ch;
1989 2020 }
1990 2021
1991 2022 .dataviews-view-table__group-header-row .dataviews-view-table__group-header-cell {
1992 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2023 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1993 2024 padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
1994 2025 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
1995 2026 }
1996 2027
@@ -2036,9 +2067,8 @@
2036 2067 text-align: start;
2037 2068 }
2038 2069
2039 2070 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
2040 - width: -moz-fit-content;
2041 2071 width: fit-content;
2042 2072 }
2043 2073
2044 2074 .dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
@@ -2074,13 +2104,13 @@
2074 2104 aspect-ratio: 1/1;
2075 2105 min-height: 0;
2076 2106 background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
2077 2107 border-radius: var(--wpds-border-radius-md, 4px);
2108 + overflow: hidden;
2078 2109 position: relative;
2079 2110 }
2080 2111
2081 2112 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
2082 - -o-object-fit: cover;
2083 2113 object-fit: cover;
2084 2114 width: 100%;
2085 2115 height: 100%;
2086 2116 }
@@ -2096,8 +2126,16 @@
2096 2126 border-radius: var(--wpds-border-radius-md, 4px);
2097 2127 pointer-events: none;
2098 2128 }
2099 2129
2130 +.dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media {
2131 + background-color: var(--wpds-color-background-surface-neutral, #fcfcfc);
2132 +}
2133 +
2134 +.dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
2135 + object-fit: contain;
2136 +}
2137 +
2100 2138 .dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
2101 2139 position: relative;
2102 2140 font-size: 12px;
2103 2141 line-height: 16px;
@@ -2169,9 +2207,9 @@
2169 2207 }
2170 2208
2171 2209 .dataviews-view-picker-grid-group__header {
2172 2210 font-size: var(--wpds-typography-font-size-lg, 15px);
2173 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2211 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2174 2212 color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
2175 2213 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2176 2214 padding: 0 48px;
2177 2215 }
@@ -2219,9 +2257,9 @@
2219 2257 }
2220 2258
2221 2259 .dataviews-view-activity .dataviews-view-activity__group-header {
2222 2260 font-size: var(--wpds-typography-font-size-lg, 15px);
2223 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2261 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2224 2262 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2225 2263 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2226 2264 padding: 0;
2227 2265 }
@@ -2259,9 +2297,8 @@
2259 2297 }
2260 2298
2261 2299 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
2262 2300 display: flex;
2263 - width: -moz-max-content;
2264 2301 width: max-content;
2265 2302 flex: 0 0 auto;
2266 2303 }
2267 2304
@@ -2393,9 +2430,8 @@
2393 2430 display: block;
2394 2431 width: 100%;
2395 2432 height: 100%;
2396 2433 margin: 0 auto;
2397 - -o-object-fit: cover;
2398 2434 object-fit: cover;
2399 2435 border-radius: 50%;
2400 2436 box-sizing: border-box;
2401 2437 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -2590,9 +2626,9 @@
2590 2626 }
2591 2627
2592 2628 .dataviews-view-picker-activity .dataviews-view-picker-activity-group__header {
2593 2629 font-size: var(--wpds-typography-font-size-lg, 15px);
2594 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2630 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2595 2631 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2596 2632 margin: 0 0 var(--wpds-dimension-gap-sm, 8px) 0;
2597 2633 padding: 0;
2598 2634 padding-inline-start: var(--wpds-dimension-padding-2xl, 24px);
@@ -2610,9 +2646,8 @@
2610 2646 display: block;
2611 2647 width: 100%;
2612 2648 height: 100%;
2613 2649 margin: 0 auto;
2614 - -o-object-fit: cover;
2615 2650 object-fit: cover;
2616 2651 border-radius: 50%;
2617 2652 box-sizing: border-box;
2618 2653 box-shadow: inset 0 0 0 var(--wpds-border-width-xs, 1px) var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -2666,8 +2701,29 @@
2666 2701 .dataviews-controls__date-preset:active {
2667 2702 background-color: var(--wpds-color-background-interactive-neutral-strong-active, #1e1e1e);
2668 2703 }
2669 2704
2705 +.dataviews-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]), .dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2706 + --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2707 +}
2708 +
2709 +.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
2710 + border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
2711 +}
2712 +
2713 +.dataviews-validated-control__wrapper-with-error-delegate {
2714 + position: relative;
2715 +}
2716 +
2717 +.dataviews-validated-control__error-delegate {
2718 + position: absolute;
2719 + top: 0;
2720 + height: 100%;
2721 + width: 100%;
2722 + opacity: 0;
2723 + pointer-events: none;
2724 +}
2725 +
2670 2726 .dataforms-layouts-panel__field-trigger {
2671 2727 position: relative;
2672 2728 color: inherit;
2673 2729 display: flex;
@@ -2710,9 +2766,9 @@
2710 2766 }
2711 2767
2712 2768 .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
2713 2769 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
2714 - font-weight: var(--wpds-typography-font-weight-regular, 400);
2770 + font-weight: var(--wpds-typography-font-weight-default, 400);
2715 2771 }
2716 2772
2717 2773 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon {
2718 2774 opacity: 1;
@@ -2730,8 +2786,14 @@
2730 2786 opacity: 0;
2731 2787 border-radius: var(--wpds-border-radius-xs, 1px);
2732 2788 }
2733 2789
2790 +.dataforms-layouts-panel__field-trigger-icon::after {
2791 + content: "";
2792 + position: absolute;
2793 + inset: 0;
2794 +}
2795 +
2734 2796 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
2735 2797 opacity: 1;
2736 2798 outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
2737 2799 }
@@ -2765,11 +2827,9 @@
2765 2827 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2766 2828 }
2767 2829
2768 2830 .dataforms-layouts-panel__field-label-error-content {
2769 - position: relative;
2770 - z-index: 1;
2771 - cursor: help;
2831 + pointer-events: none;
2772 2832 color: var(--wpds-color-foreground-content-error-weak, #cc1818);
2773 2833 display: inline-flex;
2774 2834 flex-direction: row;
2775 2835 align-items: center;
@@ -2785,12 +2845,17 @@
2785 2845 align-items: center;
2786 2846 overflow: clip;
2787 2847 padding-inline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
2788 2848 margin-inline: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
2789 - word-break: break-word;
2790 - font-weight: var(--wpds-typography-font-weight-medium, 499);
2849 + word-break: normal;
2850 + overflow-wrap: anywhere;
2851 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2791 2852 }
2792 2853
2854 +.dataforms-layouts-panel__field-control:has(a, button) {
2855 + z-index: 1;
2856 +}
2857 +
2793 2858 .dataforms-layouts-panel__field-control > * {
2794 2859 min-width: 0;
2795 2860 }
2796 2861
@@ -2823,12 +2888,8 @@
2823 2888 .components-popover.components-dropdown__content.dataforms-layouts-panel__field-dropdown {
2824 2889 z-index: 159990;
2825 2890 }
2826 2891
2827 -.dataforms-layouts-panel__summary-button:empty {
2828 - min-width: 160px;
2829 -}
2830 -
2831 2892 .dataforms-layouts-regular__field {
2832 2893 width: 100%;
2833 2894 min-height: var(--wpds-dimension-size-md, 32px);
2834 2895 justify-content: flex-start !important;
@@ -2905,10 +2966,10 @@
2905 2966 width: 100%;
2906 2967 }
2907 2968
2908 2969 .dataforms-layouts__wrapper {
2909 - font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2910 - font-weight: 400;
2970 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2971 + font-weight: var(--wpds-typography-font-weight-default, 400);
2911 2972 font-size: 13px;
2912 2973 line-height: 20px;
2913 2974 }
2914 2975
@@ -2981,8 +3042,14 @@
2981 3042 /**
2982 3043 * Focus styles.
2983 3044 */
2984 3045 /**
3046 + * Standard focus rings for the WordPress Design System.
3047 + *
3048 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
3049 + * e.g. `&:focus { @include outset-ring__focus(); }`.
3050 + */
3051 +/**
2985 3052 * Applies editor left position to the selector passed as argument
2986 3053 */
2987 3054 /**
2988 3055 * Styles that are reused verbatim in a few places
@@ -3040,9 +3107,9 @@
3040 3107 padding: 12px;
3041 3108 display: grid;
3042 3109 align-items: center;
3043 3110 grid-template-columns: min-content 1fr min-content;
3044 - grid-gap: 4px 8px;
3111 + gap: 4px 8px;
3045 3112 color: #1e1e1e;
3046 3113 }
3047 3114
3048 3115 .fields-create-template-part-modal__area-radio-wrapper + .fields-create-template-part-modal__area-radio-wrapper {
@@ -3119,9 +3186,8 @@
3119 3186 line-height: 1.5;
3120 3187 }
3121 3188
3122 3189 fieldset.fields__media-edit {
3123 - /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
3124 3190 container-type: inline-size;
3125 3191 }
3126 3192
3127 3193 fieldset.fields__media-edit .fields__media-edit-compact-group {
@@ -3326,11 +3392,9 @@
3326 3392
3327 3393 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
3328 3394 width: 100%;
3329 3395 height: 100%;
3330 - -o-object-fit: cover;
3331 3396 object-fit: cover;
3332 - -o-object-position: 50% 50%;
3333 3397 object-position: 50% 50%;
3334 3398 }
3335 3399
3336 3400 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-filename {
@@ -3359,9 +3423,8 @@
3359 3423 }
3360 3424
3361 3425 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
3362 3426 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
3363 - /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
3364 3427 }
3365 3428
3366 3429 @container (max-width: 500px) {
3367 3430 fieldset.fields__media-edit .fields__media-edit-expanded.is-multiple:not(.is-empty) {
@@ -3391,9 +3454,8 @@
3391 3454
3392 3455 .fields-controls__author-avatar img {
3393 3456 width: 16px;
3394 3457 height: 16px;
3395 - -o-object-fit: cover;
3396 3458 object-fit: cover;
3397 3459 opacity: 0;
3398 3460 border-radius: 100%;
3399 3461 }
@@ -3429,18 +3491,15 @@
3429 3491 padding: 0;
3430 3492 margin: 0;
3431 3493 }
3432 3494
3433 -.fields-controls__slug .fields-controls__slug-external-icon {
3434 - margin-left: 5ch;
3435 -}
3436 -
3437 3495 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
3438 3496 padding-inline-start: 0 !important;
3439 3497 }
3440 3498
3441 3499 .fields-controls__slug .fields-controls__slug-help-link {
3442 - word-break: break-word;
3500 + word-break: normal;
3501 + overflow-wrap: anywhere;
3443 3502 }
3444 3503
3445 3504 .fields-controls__slug .fields-controls__slug-help {
3446 3505 display: flex;
@@ -3447,9 +3506,9 @@
3447 3506 flex-direction: column;
3448 3507 }
3449 3508
3450 3509 .fields-controls__slug .fields-controls__slug-help .fields-controls__slug-help-slug {
3451 - font-weight: 600;
3510 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3452 3511 }
3453 3512
3454 3513 .fields-controls__featured-image-image,
3455 3514 .fields-controls__featured-image-placeholder {
@@ -3568,8 +3627,14 @@
3568 3627 /**
3569 3628 * Focus styles.
3570 3629 */
3571 3630 /**
3631 + * Standard focus rings for the WordPress Design System.
3632 + *
3633 + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
3634 + * e.g. `&:focus { @include outset-ring__focus(); }`.
3635 + */
3636 +/**
3572 3637 * Applies editor left position to the selector passed as argument
3573 3638 */
3574 3639 /**
3575 3640 * Styles that are reused verbatim in a few places
@@ -3603,9 +3668,9 @@
3603 3668 }
3604 3669
3605 3670 .font-library-modal .font-library__subtitle {
3606 3671 text-transform: uppercase;
3607 - font-weight: 499;
3672 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3608 3673 font-size: 11px;
3609 3674 }
3610 3675
3611 3676 .font-library-modal__tab-panel {
@@ -3643,9 +3708,9 @@
3643 3708 .font-library__footer {
3644 3709 position: absolute;
3645 3710 width: 100%;
3646 3711 bottom: 0;
3647 - border-top: 1px solid #ddd;
3712 + border-top: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3648 3713 padding: 24px;
3649 3714 background-color: #fff;
3650 3715 box-sizing: border-box;
3651 3716 flex-grow: 0 !important;
@@ -3654,22 +3719,26 @@
3654 3719 }
3655 3720
3656 3721 .font-library__page-selection {
3657 3722 font-size: 11px;
3658 - font-weight: 499;
3723 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3659 3724 text-transform: uppercase;
3660 3725 }
3661 3726
3662 3727 @media (min-width: 600px) {
3663 - .font-library__page-selection .font-library__page-selection-trigger {
3728 + .font-library__page-selection .components-select-control__input {
3664 3729 font-size: 11px !important;
3665 - font-weight: 499;
3730 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3666 3731 }
3667 3732 }
3733 +.font-library__search {
3734 + width: 240px;
3735 +}
3736 +
3668 3737 .font-library__fonts-title {
3669 3738 text-transform: uppercase;
3670 3739 font-size: 11px;
3671 - font-weight: 600;
3740 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3672 3741 margin-top: 0;
3673 3742 margin-bottom: 0;
3674 3743 }
3675 3744
@@ -3683,11 +3752,15 @@
3683 3752 .font-library__fonts-list-item {
3684 3753 margin-bottom: 0;
3685 3754 }
3686 3755
3756 +.font-library__font-demo {
3757 + position: relative;
3758 +}
3759 +
3687 3760 .font-library__font-card {
3688 3761 box-sizing: border-box;
3689 - border: 1px solid #ddd;
3762 + border: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3690 3763 width: 100%;
3691 3764 height: auto !important;
3692 3765 padding: 16px;
3693 3766 margin-top: -1px; /* To collapse the margin with the previous element */
@@ -3701,13 +3774,13 @@
3701 3774 position: relative;
3702 3775 }
3703 3776
3704 3777 .font-library__font-card .font-library__font-card__name {
3705 - font-weight: bold;
3778 + font-weight: 700;
3706 3779 }
3707 3780
3708 3781 .font-library__font-card .font-library__font-card__count {
3709 - color: #757575;
3782 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3710 3783 }
3711 3784
3712 3785 .font-library__font-card .font-library__font-variant_demo-image {
3713 3786 display: block;
@@ -3714,8 +3787,25 @@
3714 3787 height: 24px;
3715 3788 width: auto;
3716 3789 }
3717 3790
3791 +@media not (prefers-reduced-motion) {
3792 + .font-library__font-card .font-library__font-variant_demo-image {
3793 + transition: opacity var(--wpds-motion-duration-lg, 300ms) var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
3794 + }
3795 +}
3796 +.font-library__font-card .font-library__font-variant_demo-image.is-loading {
3797 + position: absolute;
3798 + top: 0;
3799 + left: 0;
3800 + opacity: 0;
3801 +}
3802 +
3803 +.font-library__font-card .font-library__font-variant-demo-skeleton {
3804 + height: 24px;
3805 + border-radius: var(--wpds-border-radius-sm, 2px);
3806 +}
3807 +
3718 3808 .font-library__font-card .font-library__font-variant_demo-text {
3719 3809 white-space: nowrap;
3720 3810 flex-shrink: 0;
3721 3811 }
@@ -3727,9 +3817,9 @@
3727 3817 }
3728 3818 .font-library-modal__tablist-container {
3729 3819 position: sticky;
3730 3820 top: 0;
3731 - border-bottom: 1px solid #ddd;
3821 + border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3732 3822 background: #fff;
3733 3823 z-index: 1;
3734 3824 }
3735 3825
@@ -3750,9 +3840,9 @@
3750 3840 width: 80%;
3751 3841 }
3752 3842
3753 3843 .font-library__local-fonts .font-library__upload-area__text {
3754 - color: #757575;
3844 + color: var(--wpds-color-foreground-content-neutral-weak, #707070);
3755 3845 }
3756 3846
3757 3847 .font-library__google-fonts-confirm {
3758 3848 display: flex;
@@ -3787,113 +3877,22 @@
3787 3877 .font-library__select-all .components-checkbox-control__label {
3788 3878 padding-left: 16px;
3789 3879 }
3790 3880
3791 -.global-styles-ui-pagination .components-button.is-tertiary {
3792 - width: 32px;
3793 - height: 32px;
3794 - justify-content: center;
3795 -}
3796 -
3797 -.global-styles-ui-screen-revisions__revisions-list {
3798 - list-style: none;
3799 - margin: 0 16px 16px 16px;
3800 - flex-grow: 1;
3801 -}
3802 -
3803 -.global-styles-ui-screen-revisions__revisions-list li {
3804 - margin-bottom: 0;
3805 -}
3806 -
3807 -.global-styles-ui-screen-revisions__revision-item {
3808 - position: relative;
3809 - cursor: var(--wpds-cursor-control, pointer);
3881 +.global-styles-ui-screen-revisions {
3810 3882 display: flex;
3811 3883 flex-direction: column;
3884 + flex-grow: 1;
3885 + min-height: 0;
3812 3886 }
3813 3887
3814 -.global-styles-ui-screen-revisions__revision-item[role=option]:active, .global-styles-ui-screen-revisions__revision-item[role=option]:focus {
3815 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
3816 - outline: 2px solid transparent;
3888 +.global-styles-ui-screen-revisions__actions {
3889 + margin-inline-start: auto;
3817 3890 }
3818 3891
3819 -.global-styles-ui-screen-revisions__revision-item:hover {
3820 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3821 -}
3822 -
3823 -.global-styles-ui-screen-revisions__revision-item:hover .global-styles-ui-screen-revisions__date {
3824 - color: var(--wp-admin-theme-color);
3825 -}
3826 -
3827 -.global-styles-ui-screen-revisions__revision-item::before, .global-styles-ui-screen-revisions__revision-item::after {
3828 - position: absolute;
3829 - content: "\a";
3830 - display: block;
3831 -}
3832 -
3833 -.global-styles-ui-screen-revisions__revision-item::before {
3834 - background: #ddd;
3835 - border-radius: 50%;
3836 - height: 8px;
3837 - width: 8px;
3838 - top: 18px;
3839 - left: 17px;
3840 - transform: translate(-50%, -50%);
3841 - z-index: 1;
3842 - border: 4px solid transparent;
3843 -}
3844 -
3845 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] {
3846 - border-radius: 2px;
3847 - outline: 3px solid transparent;
3848 - outline-offset: -2px;
3849 - color: var(--wp-admin-theme-color);
3850 - background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
3851 -}
3852 -
3853 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__date {
3854 - color: var(--wp-admin-theme-color);
3855 -}
3856 -
3857 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true]::before {
3858 - background: var(--wp-admin-theme-color);
3859 -}
3860 -
3861 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__changes > li,
3862 -.global-styles-ui-screen-revisions__revision-item[aria-selected=true] .global-styles-ui-screen-revisions__meta {
3863 - color: #1e1e1e;
3864 -}
3865 -
3866 -.global-styles-ui-screen-revisions__revision-item::after {
3867 - height: 100%;
3868 - left: 16px;
3869 - top: 0;
3870 - width: 0;
3871 - border: 0.5px solid #ddd;
3872 -}
3873 -
3874 -.global-styles-ui-screen-revisions__revision-item:first-child::after {
3875 - top: 18px;
3876 -}
3877 -
3878 -.global-styles-ui-screen-revisions__revision-item:last-child::after {
3879 - height: 18px;
3880 -}
3881 -
3882 -.global-styles-ui-screen-revisions__revision-item-wrapper {
3883 - display: block;
3884 - padding: 12px 12px 4px 40px;
3885 -}
3886 -
3887 -.global-styles-ui-screen-revisions__apply-button.is-primary,
3888 -.global-styles-ui-screen-revisions__active-badge {
3889 - align-self: flex-start;
3890 - margin: 0 12px 12px 40px;
3891 -}
3892 -
3893 -.global-styles-ui-screen-revisions__changes,
3894 -.global-styles-ui-screen-revisions__meta {
3895 - color: #757575;
3892 +.global-styles-ui-screen-revisions__date {
3893 + text-transform: uppercase;
3894 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3896 3895 font-size: 12px;
3897 3896 }
3898 3897
3899 3898 .global-styles-ui-screen-revisions__description {
@@ -3902,11 +3901,11 @@
3902 3901 align-items: flex-start;
3903 3902 gap: 8px;
3904 3903 }
3905 3904
3906 -.global-styles-ui-screen-revisions__description .global-styles-ui-screen-revisions__date {
3907 - text-transform: uppercase;
3908 - font-weight: 600;
3905 +.global-styles-ui-screen-revisions__changes,
3906 +.global-styles-ui-screen-revisions__meta {
3907 + color: #2f2f2f;
3909 3908 font-size: 12px;
3910 3909 }
3911 3910
3912 3911 .global-styles-ui-screen-revisions__meta {
@@ -3912,11 +3911,10 @@
3912 3911 .global-styles-ui-screen-revisions__meta {
3913 3912 display: flex;
3914 3913 justify-content: start;
3915 3914 width: 100%;
3916 - align-items: flex-start;
3915 + align-items: center;
3917 3916 text-align: left;
3918 - margin-bottom: 4px;
3919 3917 }
3920 3918
3921 3919 .global-styles-ui-screen-revisions__meta img {
3922 3920 width: 16px;
@@ -3924,16 +3922,12 @@
3924 3922 border-radius: 100%;
3925 3923 margin-right: 8px;
3926 3924 }
3927 3925
3928 -.global-styles-ui-screen-revisions__loading {
3929 - margin: 24px auto !important;
3930 -}
3931 -
3932 3926 .global-styles-ui-screen-revisions__changes {
3933 3927 text-align: left;
3934 3928 line-height: 1.4;
3935 - margin-left: 12px;
3929 + margin: 0 0 0 12px;
3936 3930 list-style: disc;
3937 3931 }
3938 3932
3939 3933 .global-styles-ui-screen-revisions__changes li {
@@ -3939,47 +3933,8 @@
3939 3933 .global-styles-ui-screen-revisions__changes li {
3940 3934 margin-bottom: 4px;
3941 3935 }
3942 3936
3943 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination {
3944 - justify-content: space-between;
3945 - gap: 2px;
3946 -}
3947 -
3948 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .edit-site-pagination__total {
3949 - position: absolute;
3950 - left: -1000px;
3951 - height: 1px;
3952 - margin: -1px;
3953 - overflow: hidden;
3954 -}
3955 -
3956 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-text {
3957 - font-size: 12px;
3958 - will-change: opacity;
3959 -}
3960 -
3961 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary {
3962 - color: #1e1e1e;
3963 -}
3964 -
3965 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary:disabled,
3966 -.global-styles-ui-screen-revisions__pagination.global-styles-ui-screen-revisions__pagination .components-button.is-tertiary[aria-disabled=true] {
3967 - color: #949494;
3968 -}
3969 -
3970 -.global-styles-ui-screen-revisions__footer {
3971 - height: 56px;
3972 - z-index: 1;
3973 - position: sticky;
3974 - min-width: 100%;
3975 - bottom: 0;
3976 - background: #fff;
3977 - padding: 12px;
3978 - border-top: 1px solid #ddd;
3979 - box-sizing: border-box;
3980 -}
3981 -
3982 3937 .global-styles-ui-variations_item {
3983 3938 box-sizing: border-box;
3984 3939 cursor: var(--wpds-cursor-control, pointer);
3985 3940 }
@@ -4060,13 +4015,34 @@
4060 4015 justify-content: center;
4061 4016 border-radius: 2px;
4062 4017 }
4063 4018
4019 +.global-styles-ui-block-types-filter {
4020 + margin-bottom: 12px;
4021 + padding: 0 16px;
4022 +}
4023 +
4064 4024 .global-styles-ui-block-types-search {
4065 - margin-bottom: 10px;
4066 - padding: 0 16px;
4025 + flex-grow: 1;
4067 4026 }
4068 4027
4028 +.global-styles-ui-block-types-item-list .global-styles-ui-block-types-item__icon {
4029 + min-width: 24px;
4030 +}
4031 +
4032 +.global-styles-ui-block-types-item-list__no-results {
4033 + padding-top: 16px;
4034 +}
4035 +
4036 +.global-styles-ui-block-types-item__indicator {
4037 + background: var(--wp-admin-theme-color);
4038 + border-radius: 50%;
4039 + flex: none;
4040 + height: 6px;
4041 + margin-left: auto;
4042 + width: 6px;
4043 +}
4044 +
4069 4045 .global-styles-ui-screen-typography__font-variants-count {
4070 4046 color: #757575;
4071 4047 }
4072 4048
@@ -4089,15 +4065,15 @@
4089 4065
4090 4066 .global-styles-ui-subtitle {
4091 4067 margin-bottom: 0 !important;
4092 4068 text-transform: uppercase;
4093 - font-weight: 499 !important;
4069 + font-weight: var(--wpds-typography-font-weight-emphasis, 600) !important;
4094 4070 font-size: 11px !important;
4095 4071 }
4096 4072
4097 4073 .global-styles-ui-section-title {
4098 4074 color: #2f2f2f;
4099 - font-weight: 600;
4075 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
4100 4076 line-height: 1.2;
4101 4077 padding: 16px 16px 0;
4102 4078 margin: 0;
4103 4079 }
@@ -4108,10 +4084,20 @@
4108 4084
4109 4085 .global-styles-ui__color-indicator-wrapper {
4110 4086 height: 24px;
4111 4087 flex-shrink: 0;
4088 + display: flex;
4089 + align-items: center;
4112 4090 }
4113 4091
4092 +.global-styles-ui__palette-preview {
4093 + display: inline-flex;
4094 +}
4095 +
4096 +.global-styles-ui__palette-preview > * + * {
4097 + margin-inline-start: -8px;
4098 +}
4099 +
4114 4100 .global-styles-ui__shadows-panel__options-container,
4115 4101 .global-styles-ui__typography-panel__options-container {
4116 4102 height: 24px;
4117 4103 }
@@ -4123,9 +4109,10 @@
4123 4109 border-radius: 2px;
4124 4110 overflow: hidden;
4125 4111 }
4126 4112
4127 -.global-styles-ui__shadow-preview-panel {
4113 +.global-styles-ui__shadow-preview-panel,
4114 +.global-styles-ui__text-shadow-preview-panel {
4128 4115 height: 144px;
4129 4116 border: #ddd 1px solid;
4130 4117 border-radius: 2px;
4131 4118 overflow: auto;
@@ -4135,9 +4122,9 @@
4135 4122 /*rtl:end:ignore*/
4136 4123 background-size: 16px 16px;
4137 4124 }
4138 4125
4139 -.global-styles-ui__shadow-preview-panel .global-styles-ui__shadow-preview-block {
4126 +.global-styles-ui__shadow-preview-block {
4140 4127 border: #ddd 1px solid;
4141 4128 border-radius: 2px;
4142 4129 background-color: #fff;
4143 4130 width: 60%;
@@ -4143,22 +4130,44 @@
4143 4130 width: 60%;
4144 4131 height: 60px;
4145 4132 }
4146 4133
4147 -.global-styles-ui__shadow-editor__dropdown-content {
4134 +.global-styles-ui__text-shadow-preview-panel {
4135 + margin-block: -8px 16px;
4136 +}
4137 +
4138 +.global-styles-ui__text-shadow-preview-text {
4139 + font-size: 24px;
4140 +}
4141 +
4142 +.global-styles-ui__text-shadow-editor__header {
4143 + margin-block-end: 8px;
4144 +}
4145 +
4146 +.global-styles-ui__text-shadow-editor__inputs {
4147 + display: grid;
4148 + grid-template-columns: repeat(2, 1fr);
4149 + gap: 16px;
4150 +}
4151 +
4152 +.global-styles-ui__shadow-editor__dropdown-content,
4153 +.global-styles-ui__text-shadow-editor__dropdown-content {
4148 4154 width: 280px;
4149 4155 }
4150 4156
4151 -.global-styles-ui__shadow-editor-panel {
4157 +.global-styles-ui__shadow-editor-panel,
4158 +.global-styles-ui__text-shadow-editor-panel {
4152 4159 margin-bottom: 4px;
4153 4160 }
4154 4161
4155 -.global-styles-ui__shadow-editor__dropdown {
4162 +.global-styles-ui__shadow-editor__dropdown,
4163 +.global-styles-ui__text-shadow-editor__dropdown {
4156 4164 width: 100%;
4157 4165 position: relative;
4158 4166 }
4159 4167
4160 -.global-styles-ui__shadow-editor__dropdown-toggle {
4168 +.global-styles-ui__shadow-editor__dropdown-toggle,
4169 +.global-styles-ui__text-shadow-editor__dropdown-toggle {
4161 4170 width: 100%;
4162 4171 height: auto;
4163 4172 padding-top: 8px;
4164 4173 padding-bottom: 8px;
@@ -4165,14 +4174,16 @@
4165 4174 text-align: left;
4166 4175 border-radius: inherit;
4167 4176 }
4168 4177
4169 -.global-styles-ui__shadow-editor__dropdown-toggle.is-open {
4178 +.global-styles-ui__shadow-editor__dropdown-toggle.is-open,
4179 +.global-styles-ui__text-shadow-editor__dropdown-toggle.is-open {
4170 4180 background: #f0f0f0;
4171 4181 color: var(--wp-admin-theme-color);
4172 4182 }
4173 4183
4174 -.global-styles-ui__shadow-editor__remove-button {
4184 +.global-styles-ui__shadow-editor__remove-button,
4185 +.global-styles-ui__text-shadow-editor__remove-button {
4175 4186 position: absolute;
4176 4187 right: 8px;
4177 4188 top: 8px;
4178 4189 opacity: 0;
@@ -4177,18 +4188,19 @@
4177 4188 top: 8px;
4178 4189 opacity: 0;
4179 4190 }
4180 4191
4181 -.global-styles-ui__shadow-editor__remove-button.global-styles-ui__shadow-editor__remove-button {
4182 - border: none;
4183 -}
4184 -
4185 -.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover {
4192 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__shadow-editor__remove-button, .global-styles-ui__shadow-editor__remove-button:focus, .global-styles-ui__shadow-editor__remove-button:hover,
4193 +.global-styles-ui__shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4194 +.global-styles-ui__text-shadow-editor__dropdown-toggle:hover + .global-styles-ui__text-shadow-editor__remove-button,
4195 +.global-styles-ui__text-shadow-editor__remove-button:focus,
4196 +.global-styles-ui__text-shadow-editor__remove-button:hover {
4186 4197 opacity: 1;
4187 4198 }
4188 4199
4189 4200 @media (hover: none) {
4190 - .global-styles-ui__shadow-editor__remove-button {
4201 + .global-styles-ui__shadow-editor__remove-button,
4202 + .global-styles-ui__text-shadow-editor__remove-button {
4191 4203 opacity: 1;
4192 4204 }
4193 4205 }
4194 4206 .global-styles-ui-screen-css {
@@ -4241,8 +4253,16 @@
4241 4253 flex-direction: column;
4242 4254 height: 100%;
4243 4255 }
4244 4256
4257 +.global-styles-ui-color-palette__tablist-container {
4258 + border-bottom: 1px solid #ddd;
4259 +}
4260 +
4261 +.global-styles-ui-color-palette__tablist {
4262 + margin-bottom: -1px;
4263 +}
4264 +
4245 4265 .global-styles-ui-sidebar__navigator-screen .single-column {
4246 4266 grid-column: span 1;
4247 4267 }
4248 4268
@@ -4264,9 +4284,10 @@
4264 4284 clip-path: border-box;
4265 4285 }
4266 4286
4267 4287 .global-styles-ui-color-palette-panel,
4268 -.global-styles-ui-gradient-palette-panel {
4288 +.global-styles-ui-gradient-palette-panel,
4289 +.global-styles-ui-duotone-palette-panel {
4269 4290 padding: 16px;
4270 4291 }
4271 4292
4272 4293 .edit-site-custom-template-modal__contents-wrapper {
@@ -4275,13 +4296,8 @@
4275 4296 }
4276 4297 .edit-site-custom-template-modal__contents-wrapper > * {
4277 4298 width: 100%;
4278 4299 }
4279 -.edit-site-custom-template-modal__contents-wrapper__suggestions_list {
4280 - margin-left: -12px;
4281 - margin-right: -12px;
4282 - width: calc(100% + 24px);
4283 -}
4284 4300 .edit-site-custom-template-modal__contents > .components-button {
4285 4301 height: auto;
4286 4302 justify-content: center;
4287 4303 }
@@ -4291,10 +4307,14 @@
4291 4307 }
4292 4308 }
4293 4309 @media (min-width: 600px) {
4294 4310 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
4295 - max-height: 224px;
4296 4311 overflow-y: auto;
4312 + max-height: calc(224px + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4313 + padding: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4314 + margin-inline: calc(-2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4315 + width: calc(100% + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4316 + scroll-padding-block: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
4297 4317 }
4298 4318 }
4299 4319 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
4300 4320 display: block;
@@ -4320,11 +4340,8 @@
4320 4340 }
4321 4341 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
4322 4342 background-color: #f0f0f0;
4323 4343 }
4324 -.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
4325 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
4326 -}
4327 4344 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
4328 4345 overflow: hidden;
4329 4346 text-overflow: ellipsis;
4330 4347 display: block;
@@ -4356,14 +4373,10 @@
4356 4373 }
4357 4374 }
4358 4375 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
4359 4376 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
4360 - fill: var(--wp-admin-theme-color);
4377 + color: var(--wp-admin-theme-color);
4361 4378 }
4362 -.edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
4363 - flex-grow: 1;
4364 - align-items: flex-start;
4365 -}
4366 4379 .edit-site-add-new-template__modal .edit-site-add-new-template__template-icon {
4367 4380 padding: 8px;
4368 4381 background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
4369 4382 border-radius: 100%;
@@ -4377,9 +4390,8 @@
4377 4390 display: flex;
4378 4391 flex-direction: column;
4379 4392 border: 1px solid #ddd;
4380 4393 justify-content: center;
4381 - outline: 1px solid transparent;
4382 4394 }
4383 4395 .edit-site-custom-template-modal__contents > .components-button span:first-child,
4384 4396 .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
4385 4397 color: #1e1e1e;
@@ -4397,14 +4409,8 @@
4397 4409 .edit-site-custom-template-modal__contents > .components-button:hover span,
4398 4410 .edit-site-add-new-template__template-list__contents > .components-button:hover span {
4399 4411 color: var(--wp-admin-theme-color);
4400 4412 }
4401 -.edit-site-custom-template-modal__contents > .components-button:focus,
4402 -.edit-site-add-new-template__template-list__contents > .components-button:focus {
4403 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
4404 - border-color: transparent;
4405 - outline: 3px solid transparent;
4406 -}
4407 4413 .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
4408 4414 .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
4409 4415 color: var(--wp-admin-theme-color);
4410 4416 }
@@ -4416,10 +4422,12 @@
4416 4422 }
4417 4423
4418 4424 .edit-site-add-new-template__template-list__contents > .components-button {
4419 4425 height: 100%;
4426 + padding: 16px;
4420 4427 text-align: start;
4421 4428 align-items: flex-start;
4429 + justify-content: flex-start;
4422 4430 }
4423 4431
4424 4432 .edit-site-visual-editor__editor-canvas.is-focused {
4425 4433 outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
@@ -4426,8 +4434,9 @@
4426 4434 outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
4427 4435 }
4428 4436
4429 4437 .edit-site-canvas-loader {
4438 + --wp-components-color-foreground: var(--color);
4430 4439 width: 100%;
4431 4440 height: 100%;
4432 4441 display: flex;
4433 4442 position: absolute;
@@ -4442,11 +4451,8 @@
4442 4451 animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
4443 4452 animation-fill-mode: forwards;
4444 4453 }
4445 4454 }
4446 -.edit-site-canvas-loader > div {
4447 - width: 160px;
4448 -}
4449 4455
4450 4456 @keyframes edit-site-canvas-loader__fade-in-animation {
4451 4457 from {
4452 4458 opacity: 0;
@@ -4510,11 +4516,12 @@
4510 4516 .edit-site-patterns__section-header .screen-reader-shortcut:focus {
4511 4517 top: 0;
4512 4518 }
4513 4519
4514 -.edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
4520 +.edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.fields-field__pattern-sync-status-fully) {
4515 4521 background: rgba(var(--wp-block-synced-color--rgb), 0.04);
4516 4522 color: var(--wp-block-synced-color);
4523 + border-color: currentColor;
4517 4524 }
4518 4525
4519 4526 .dataviews-action-modal__duplicate-pattern [role=dialog] > [role=document] {
4520 4527 width: 350px;
@@ -4609,61 +4616,8 @@
4609 4616 display: flex;
4610 4617 justify-content: center;
4611 4618 }
4612 4619
4613 -.edit-site-editor__view-mode-toggle {
4614 - /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4615 - view-transition-name: toggle;
4616 - /* stylelint-enable */
4617 - top: 0;
4618 - left: 0;
4619 - height: 64px;
4620 - width: 64px;
4621 - z-index: 100;
4622 -}
4623 -.edit-site-editor__view-mode-toggle .components-button {
4624 - color: #fff;
4625 - height: 100%;
4626 - width: 100%;
4627 - border-radius: 0;
4628 - overflow: hidden;
4629 - padding: 0;
4630 - display: flex;
4631 - align-items: center;
4632 - justify-content: center;
4633 -}
4634 -.edit-site-editor__view-mode-toggle .components-button:hover, .edit-site-editor__view-mode-toggle .components-button:active {
4635 - color: #fff;
4636 -}
4637 -.edit-site-editor__view-mode-toggle .components-button:focus {
4638 - box-shadow: none;
4639 -}
4640 -.edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon svg,
4641 -.edit-site-editor__view-mode-toggle .edit-site-editor__view-mode-toggle-icon img {
4642 - background: #1e1e1e;
4643 - display: block;
4644 -}
4645 -
4646 -.edit-site-editor__back-icon {
4647 - position: absolute;
4648 - top: 0;
4649 - left: 0;
4650 - width: 64px;
4651 - height: 64px;
4652 - display: flex;
4653 - align-items: center;
4654 - justify-content: center;
4655 - background-color: hsl(0, 0%, 80%);
4656 - pointer-events: none;
4657 -}
4658 -.edit-site-editor__back-icon svg {
4659 - fill: currentColor;
4660 -}
4661 -.edit-site-editor__back-icon.has-site-icon {
4662 - background-color: hsla(0, 0%, 100%, 0.6);
4663 - backdrop-filter: saturate(180%) blur(15px);
4664 -}
4665 -
4666 4620 .edit-site-welcome-guide {
4667 4621 width: 312px;
4668 4622 }
4669 4623 .edit-site-welcome-guide.guide-editor .edit-site-welcome-guide__image {
@@ -4682,13 +4636,12 @@
4682 4636 }
4683 4637 .edit-site-welcome-guide__image > img {
4684 4638 display: block;
4685 4639 max-width: 100%;
4686 - -o-object-fit: cover;
4687 - object-fit: cover;
4640 + object-fit: cover;
4688 4641 }
4689 4642 .edit-site-welcome-guide__heading {
4690 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4643 + font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4691 4644 font-size: 24px;
4692 4645 line-height: 1.4;
4693 4646 margin: 16px 0 16px 0;
4694 4647 padding: 0 32px;
@@ -4706,9 +4659,9 @@
4706 4659 margin: 0 4px;
4707 4660 vertical-align: text-top;
4708 4661 }
4709 4662 .edit-site-welcome-guide .components-button:hover svg {
4710 - fill: #fff;
4663 + color: #fff;
4711 4664 }
4712 4665
4713 4666 .edit-site-layout {
4714 4667 height: 100%;
@@ -4722,8 +4675,9 @@
4722 4675 }
4723 4676
4724 4677 .edit-site-layout__content {
4725 4678 height: 100%;
4679 + min-height: 0;
4726 4680 flex-grow: 1;
4727 4681 display: flex;
4728 4682 }
4729 4683
@@ -4738,16 +4692,17 @@
4738 4692 }
4739 4693 }
4740 4694 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
4741 4695 position: fixed !important;
4742 - height: 100vh;
4696 + height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
4743 4697 left: 0;
4744 - top: 0;
4698 + top: var(--wp-admin--admin-bar--height, 0);
4745 4699 }
4746 4700 .edit-site-layout__sidebar-region .edit-site-layout__sidebar {
4747 4701 display: flex;
4748 4702 flex-direction: column;
4749 4703 height: 100%;
4704 + min-height: 0;
4750 4705 }
4751 4706 .edit-site-layout__sidebar-region .resizable-editor__drag-handle {
4752 4707 right: 0;
4753 4708 }
@@ -4854,9 +4809,8 @@
4854 4809 .edit-site-template-pages-preview {
4855 4810 height: 100%;
4856 4811 }
4857 4812
4858 -/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4859 4813 html.canvas-mode-edit-transition::view-transition-group(toggle) {
4860 4814 animation-delay: 255ms;
4861 4815 }
4862 4816
@@ -4866,61 +4820,8 @@
4866 4820 ::view-transition-new(*) {
4867 4821 animation: none !important;
4868 4822 }
4869 4823 }
4870 -/* stylelint-enable */
4871 -.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
4872 - display: none;
4873 -}
4874 -
4875 -.edit-site-layout__view-mode-toggle.components-button {
4876 - /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
4877 - view-transition-name: toggle;
4878 - /* stylelint-enable */
4879 - position: relative;
4880 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
4881 - height: 64px;
4882 - width: 64px;
4883 - overflow: hidden;
4884 - padding: 0;
4885 - display: flex;
4886 - align-items: center;
4887 - justify-content: center;
4888 - background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
4889 - border-radius: 0;
4890 -}
4891 -.edit-site-layout__view-mode-toggle.components-button:hover, .edit-site-layout__view-mode-toggle.components-button:active {
4892 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
4893 -}
4894 -.edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout__view-mode-toggle.components-button:focus {
4895 - box-shadow: 0 0 0 3px #1e1e1e, 0 0 0 6px var(--wp-admin-theme-color);
4896 - outline: 4px solid rgba(0, 0, 0, 0);
4897 - outline-offset: 4px;
4898 -}
4899 -.edit-site-layout__view-mode-toggle.components-button::before {
4900 - content: "";
4901 - display: block;
4902 - position: absolute;
4903 - top: 9px;
4904 - right: 9px;
4905 - bottom: 9px;
4906 - left: 17px;
4907 - border-radius: 4px;
4908 - box-shadow: none;
4909 -}
4910 -@media not (prefers-reduced-motion) {
4911 - .edit-site-layout__view-mode-toggle.components-button::before {
4912 - transition: box-shadow 0.1s ease;
4913 - }
4914 -}
4915 -.edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
4916 - display: flex;
4917 - height: 64px;
4918 - width: 64px;
4919 - justify-content: center;
4920 - align-items: center;
4921 -}
4922 -
4923 4824 .edit-site-layout__actions {
4924 4825 z-index: 100000;
4925 4826 position: fixed !important;
4926 4827 top: -9999em;
@@ -4935,9 +4836,9 @@
4935 4836 top: auto;
4936 4837 bottom: 0;
4937 4838 }
4938 4839 .edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
4939 - top: 0;
4840 + top: var(--wp-admin--admin-bar--height, 0);
4940 4841 }
4941 4842 @media (min-width: 782px) {
4942 4843 .edit-site-layout__actions {
4943 4844 border-left: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
@@ -4958,9 +4859,9 @@
4958 4859 }
4959 4860
4960 4861 .edit-site-layout__snackbar {
4961 4862 position: fixed;
4962 - bottom: 24px;
4863 + bottom: var(--wpds-dimension-size-md, 32px);
4963 4864 left: 0;
4964 4865 right: 0;
4965 4866 padding-inline: 16px;
4966 4867 box-sizing: border-box;
@@ -5002,8 +4903,10 @@
5002 4903 }
5003 4904
5004 4905 .edit-site-sidebar__content {
5005 4906 flex-grow: 1;
4907 + flex-basis: 0;
4908 + min-height: 0;
5006 4909 overflow-y: auto;
5007 4910 overflow-x: hidden;
5008 4911 contain: content;
5009 4912 }
@@ -5089,16 +4992,11 @@
5089 4992 .edit-site-sidebar-button {
5090 4993 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5091 4994 flex-shrink: 0;
5092 4995 }
5093 -.edit-site-sidebar-button:focus:not(:disabled) {
5094 - box-shadow: none;
4996 +.edit-site-sidebar-button:focus:not(:focus-visible) {
5095 4997 outline: none;
5096 4998 }
5097 -.edit-site-sidebar-button:focus-visible:not(:disabled) {
5098 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
5099 - outline: 3px solid transparent;
5100 -}
5101 4999 .edit-site-sidebar-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not(:disabled, [aria-disabled=true]):active, .edit-site-sidebar-button[aria-expanded=true] {
5102 5000 color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5103 5001 }
5104 5002
@@ -5107,25 +5005,20 @@
5107 5005 padding: 8px 6px 8px 16px;
5108 5006 border: none;
5109 5007 min-height: 40px;
5110 5008 }
5111 -.edit-site-sidebar-navigation-item.components-item:hover, .edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5112 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5009 +.edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current=true], .edit-site-sidebar-navigation-item.components-item.edit-site-sidebar-navigation-item.components-item:hover {
5010 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5113 5011 }
5114 -.edit-site-sidebar-navigation-item.components-item:hover .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item:focus .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item[aria-current=true] .edit-site-sidebar-navigation-item__drilldown-indicator {
5115 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5116 -}
5117 5012 .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
5118 5013 background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
5119 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5120 - font-weight: 499;
5014 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5015 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5121 5016 }
5122 5017 .edit-site-sidebar-navigation-item.components-item:focus-visible {
5018 + --wp-components-color-accent: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
5123 5019 transform: translateZ(0);
5124 5020 }
5125 -.edit-site-sidebar-navigation-item.components-item .edit-site-sidebar-navigation-item__drilldown-indicator {
5126 - fill: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5127 -}
5128 5021 .edit-site-sidebar-navigation-item.components-item.with-suffix {
5129 5022 padding-right: 16px;
5130 5023 }
5131 5024
@@ -5162,9 +5055,9 @@
5162 5055 .edit-site-sidebar-navigation-screen__title-icon {
5163 5056 position: sticky;
5164 5057 top: 0;
5165 5058 background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5166 - padding-top: 48px;
5059 + padding-top: 32px;
5167 5060 margin-bottom: 8px;
5168 5061 padding-bottom: 8px;
5169 5062 z-index: 1;
5170 5063 }
@@ -5272,9 +5165,9 @@
5272 5165 color: var(--wpds-color-foreground-content-neutral-weak, #707070);
5273 5166 }
5274 5167 .edit-site-sidebar-navigation-screen-patterns__group-header h2 {
5275 5168 font-size: 11px;
5276 - font-weight: 499;
5169 + font-weight: var(--wpds-typography-font-weight-emphasis, 600);
5277 5170 text-transform: uppercase;
5278 5171 }
5279 5172
5280 5173 .edit-site-sidebar-navigation-screen-patterns__divider {
@@ -5303,15 +5196,15 @@
5303 5196 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button {
5304 5197 color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5305 5198 }
5306 5199 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button:focus, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block-select-button[aria-current] {
5307 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5200 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5308 5201 }
5309 5202 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu {
5310 5203 color: var(--wpds-color-foreground-interactive-neutral-weak, #707070);
5311 5204 }
5312 5205 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:hover, .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-list-view-block__menu:focus {
5313 - color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5206 + color: var(--wpds-color-foreground-interactive-neutral-weak-active, #1e1e1e);
5314 5207 }
5315 5208 .edit-site-sidebar-navigation-screen-navigation-menus__content .block-editor-inserter__toggle {
5316 5209 background: var(--wpds-color-background-interactive-brand-strong, var(--wp-admin-theme-color, #3858e9));
5317 5210 color: var(--wpds-color-foreground-interactive-brand-strong, #fff);
@@ -5335,13 +5228,8 @@
5335 5228 margin-left: -16px;
5336 5229 margin-right: -16px;
5337 5230 }
5338 5231
5339 -.edit-site-sidebar-navigation-screen-templates-browse {
5340 - margin-left: -16px;
5341 - margin-right: -16px;
5342 -}
5343 -
5344 5232 .edit-site-sidebar-dataviews {
5345 5233 margin-left: -16px;
5346 5234 margin-right: -16px;
5347 5235 }
@@ -5348,112 +5236,16 @@
5348 5236
5349 5237 .edit-site-site-hub {
5350 5238 display: flex;
5351 5239 align-items: center;
5352 - justify-content: space-between;
5353 - gap: 8px;
5354 - margin-right: 12px;
5240 + padding-left: 16px;
5355 5241 height: 64px;
5356 5242 }
5357 5243
5358 -.edit-site-site-hub__actions {
5359 - flex-shrink: 0;
5244 +.edit-site-site-hub__back-button:hover:not(:disabled, [aria-disabled=true]), .edit-site-site-hub__back-button:active:not(:disabled, [aria-disabled=true]) {
5245 + color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5360 5246 }
5361 5247
5362 -.edit-site-site-hub__view-mode-toggle-container {
5363 - height: 64px;
5364 - width: 64px;
5365 - flex-shrink: 0;
5366 -}
5367 -.edit-site-site-hub__view-mode-toggle-container.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
5368 - background: transparent;
5369 -}
5370 -
5371 -.edit-site-site-hub__title .components-button {
5372 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5373 - display: block;
5374 - flex-grow: 1;
5375 - font-size: 15px;
5376 - font-weight: 499;
5377 - overflow: hidden;
5378 - padding-right: 16px;
5379 - margin-left: -4px;
5380 - position: relative;
5381 - text-decoration: none;
5382 - text-overflow: ellipsis;
5383 - white-space: nowrap;
5384 -}
5385 -.edit-site-site-hub__title .components-button:hover, .edit-site-site-hub__title .components-button:focus, .edit-site-site-hub__title .components-button:active {
5386 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5387 -}
5388 -.edit-site-site-hub__title .components-button:focus {
5389 - box-shadow: none;
5390 - outline: none;
5391 -}
5392 -.edit-site-site-hub__title .components-button:focus-visible {
5393 - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-background-surface-neutral-weak, #f4f4f4), 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
5394 - outline: 2px solid transparent;
5395 - outline-offset: 2px;
5396 -}
5397 -.edit-site-site-hub__title .components-button::after {
5398 - content: "↗";
5399 - font-weight: 400;
5400 - opacity: 0;
5401 - position: absolute;
5402 - right: 0;
5403 -}
5404 -@media not (prefers-reduced-motion) {
5405 - .edit-site-site-hub__title .components-button::after {
5406 - transition: opacity 0.1s linear;
5407 - }
5408 -}
5409 -.edit-site-site-hub__title .components-button:hover::after, .edit-site-site-hub__title .components-button:focus::after, .edit-site-site-hub__title .components-button:active::after {
5410 - opacity: 1;
5411 -}
5412 -
5413 -.edit-site-site-hub_toggle-command-center {
5414 - color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5415 -}
5416 -.edit-site-site-hub_toggle-command-center:hover svg, .edit-site-site-hub_toggle-command-center:active svg {
5417 - fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
5418 -}
5419 -
5420 -.edit-site-site-icon__icon {
5421 - fill: currentColor;
5422 - width: 100%;
5423 - height: 100%;
5424 -}
5425 -.edit-site-layout.is-full-canvas .edit-site-site-icon__icon {
5426 - padding: 12px;
5427 -}
5428 -
5429 -.edit-site-site-icon__image {
5430 - width: 100%;
5431 - height: 100%;
5432 - -o-object-fit: cover;
5433 - object-fit: cover;
5434 - background: #333;
5435 - aspect-ratio: 1/1;
5436 -}
5437 -.edit-site-layout.is-full-canvas .edit-site-site-icon__image {
5438 - border-radius: 0;
5439 -}
5440 -
5441 -.edit-site-editor__view-mode-toggle button:focus {
5442 - position: relative;
5443 -}
5444 -.edit-site-editor__view-mode-toggle button:focus::before {
5445 - content: "";
5446 - display: block;
5447 - position: absolute;
5448 - z-index: 1;
5449 - top: 0;
5450 - right: 0;
5451 - bottom: 0;
5452 - left: 0;
5453 - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(1px + var(--wp-admin-border-width-focus)) #fff;
5454 -}
5455 -
5456 5248 .fields-controls__password {
5457 5249 border-top: 1px solid #e0e0e0;
5458 5250 padding-top: 16px;
5459 5251 }
@@ -5545,9 +5337,8 @@
5545 5337 }
5546 5338 body:has(.edit-site-resizable-frame__inner.is-resizing) {
5547 5339 cursor: col-resize;
5548 5340 -webkit-user-select: none;
5549 - -moz-user-select: none;
5550 5341 user-select: none;
5551 5342 }
5552 5343
5553 5344 .edit-site-resizable-frame__inner.is-resizing::before {
@@ -5619,18 +5410,26 @@
5619 5410 padding-left: 0;
5620 5411 padding-right: 0;
5621 5412 }
5622 5413 .edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen {
5623 - padding-top: 12px;
5624 - padding-left: 12px;
5625 - padding-right: 12px;
5626 - padding-bottom: 12px;
5414 + padding: 12px;
5627 5415 outline: none;
5628 5416 }
5417 +.edit-site-styles .global-styles-ui-sidebar__navigator-provider .global-styles-ui-sidebar__navigator-screen .global-styles-ui-color-palette__tablist-container {
5418 + margin-inline: -12px;
5419 + width: calc(100% + 24px);
5420 + padding-inline: 12px;
5421 +}
5629 5422 .edit-site-styles .edit-site-sidebar-button {
5630 5423 color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
5631 5424 }
5632 5425
5426 +.edit-site-styles__content {
5427 + flex-grow: 1;
5428 + min-height: 0;
5429 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5430 +}
5431 +
5633 5432 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
5634 5433 width: auto;
5635 5434 padding: 0 var(--wpds-dimension-padding-xs, 4px);
5636 5435 }
@@ -5641,68 +5440,16 @@
5641 5440 content: attr(aria-label);
5642 5441 font-size: var(--wpds-typography-font-size-sm, 12px);
5643 5442 }
5644 5443
5645 -body.has-admin-bar-in-editor {
5646 - margin-top: 0;
5647 - height: 100%;
5648 -}
5649 -body.has-admin-bar-in-editor:has(.editor-editor-interface.is-distraction-free) {
5650 - --wp-admin--admin-bar--height: 0;
5651 -}
5652 -body.has-admin-bar-in-editor .edit-site-site-hub__title,
5653 -body.has-admin-bar-in-editor .edit-site-site-hub__actions {
5654 - display: none;
5655 -}
5656 -body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle .edit-site-editor__back-icon {
5657 - background: transparent;
5658 -}
5659 -body.has-admin-bar-in-editor .edit-site-editor__view-mode-toggle:hover .edit-site-editor__back-icon {
5660 - color: var(--wp-admin-theme-color);
5661 -}
5662 -body.has-admin-bar-in-editor .edit-site-sidebar-navigation-screen__title-icon {
5663 - padding-top: 32px;
5664 -}
5665 -body.has-admin-bar-in-editor .edit-site-layout__content,
5666 -body.has-admin-bar-in-editor .edit-site-layout__sidebar {
5444 +.edit-site-sidebar-identity__form {
5445 + flex-grow: 1;
5667 5446 min-height: 0;
5447 + overflow: auto;
5448 + background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
5449 + padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
5668 5450 }
5669 -body.has-admin-bar-in-editor .edit-site-sidebar__content {
5670 - flex-basis: 0;
5671 - min-height: 0;
5672 -}
5673 -body.has-admin-bar-in-editor .edit-site {
5674 - box-sizing: border-box;
5675 - padding-top: var(--wp-admin--admin-bar--height, 0);
5676 - height: 100vh;
5677 - min-height: 100vh;
5678 -}
5679 -@media (min-width: 600px) {
5680 - body.has-admin-bar-in-editor .edit-site {
5681 - padding-top: 0;
5682 - top: var(--wp-admin--admin-bar--height, 0);
5683 - height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5684 - min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5685 - }
5686 -}
5687 -body.has-admin-bar-in-editor .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region {
5688 - top: var(--wp-admin--admin-bar--height, 0);
5689 - height: calc(100vh - var(--wp-admin--admin-bar--height, 0));
5690 -}
5691 -body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus,
5692 -body.has-admin-bar-in-editor.is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within,
5693 -body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus,
5694 -body.has-admin-bar-in-editor.is-fullscreen-mode .edit-site-layout__actions.is-entity-save-view-open:focus-within {
5695 - top: var(--wp-admin--admin-bar--height, 0);
5696 -}
5697 -body.has-admin-bar-in-editor.is-fullscreen-mode #wpadminbar {
5698 - display: block;
5699 -}
5700 -body.has-admin-bar-in-editor.is-fullscreen-mode:has(.editor-editor-interface.is-distraction-free) #wpadminbar {
5701 - display: none;
5702 -}
5703 5451
5704 -/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
5705 5452 ::view-transition-image-pair(root) {
5706 5453 isolation: auto;
5707 5454 }
5708 5455
@@ -5712,13 +5459,8 @@
5712 5459 mix-blend-mode: normal;
5713 5460 display: block;
5714 5461 }
5715 5462
5716 -/* stylelint-enable */
5717 -body.js #wpadminbar {
5718 - display: none;
5719 -}
5720 -
5721 5463 body.js #wpbody {
5722 5464 padding-top: 0;
5723 5465 }
5724 5466
@@ -5766,8 +5508,17 @@
5766 5508
5767 5509 body.js.site-editor-php {
5768 5510 background: var(--wpds-color-background-surface-neutral-weak, #f4f4f4);
5769 5511 }
5512 +@media (min-width: 782px) {
5513 + body.js.site-editor-php:has(.editor-editor-interface.is-distraction-free) {
5514 + --wp-admin--admin-bar--height: 0px;
5515 + --wp-editor-admin-bar-display: none;
5516 + }
5517 + body.js.site-editor-php #wpadminbar {
5518 + display: var(--wp-editor-admin-bar-display, block);
5519 + }
5520 +}
5770 5521
5771 5522 .edit-site {
5772 5523 box-sizing: border-box;
5773 5524 }
@@ -5776,8 +5527,9 @@
5776 5527 .edit-site *::after {
5777 5528 box-sizing: inherit;
5778 5529 }
5779 5530 .edit-site {
5531 + padding-top: var(--wp-admin--admin-bar--height, 0);
5780 5532 height: 100vh;
5781 5533 }
5782 5534 @media (min-width: 600px) {
5783 5535 .edit-site {
@@ -5782,12 +5534,13 @@
5782 5534 @media (min-width: 600px) {
5783 5535 .edit-site {
5784 5536 bottom: 0;
5785 5537 left: 0;
5786 - min-height: 100vh;
5538 + height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
5539 + padding-top: 0;
5787 5540 position: fixed;
5788 5541 right: 0;
5789 - top: 0;
5542 + top: var(--wp-admin--admin-bar--height, 0);
5790 5543 }
5791 5544 }
5792 5545 .no-js .edit-site {
5793 5546 min-height: 0;