PluginProbe
Gutenberg / 22.7.0
Gutenberg v22.7.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 12.6.0 All 403 releases
← All changes | build/styles/block-library/editor.css +87 -179 23.6.2 → 22.7.0 View file →
@@ -67,14 +67,8 @@
67 67 /**
68 68 * Focus styles.
69 69 */
70 70 /**
71 - * Standard focus rings for the WordPress Design System.
72 - *
73 - * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
74 - * e.g. `&:focus { @include outset-ring__focus(); }`.
75 - */
76 -/**
77 71 * Applies editor left position to the selector passed as argument
78 72 */
79 73 /**
80 74 * Styles that are reused verbatim in a few places
@@ -98,60 +92,31 @@
98 92 }
99 93 .block-library-utils__media-control .components-drop-zone__content-icon {
100 94 display: none;
101 95 }
102 -.block-library-utils__media-control .block-library-utils__media-control__replace-flow {
103 - display: block;
104 -}
105 -.block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button {
96 +.block-library-utils__media-control button.components-button {
106 97 color: #1e1e1e;
107 - border-color: #ccc;
98 + box-shadow: inset 0 0 0 1px #ccc;
108 99 width: 100%;
109 100 display: block;
110 101 height: 40px;
111 - padding-right: 32px;
112 102 }
113 -.block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button:hover {
103 +.block-library-utils__media-control button.components-button:hover {
114 104 color: var(--wp-admin-theme-color);
115 105 }
116 -
117 -.block-library-utils__media-control__inspector-media-replace-title {
118 - word-break: break-all;
119 - white-space: normal;
120 - text-align: start;
106 +.block-library-utils__media-control button.components-button:focus {
107 + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
121 108 }
122 -
123 -.block-library-utils__media-control__inspector-image-indicator {
109 +.block-library-utils__media-control .components-dropdown {
110 + display: block;
111 +}
112 +.block-library-utils__media-control img {
124 113 width: 20px;
125 - height: 20px;
126 - border-radius: 2px;
114 + min-width: 20px;
115 + aspect-ratio: 1;
127 116 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
128 - background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
129 - background-size: cover;
130 - outline: 1px solid transparent;
131 -}
132 -
133 -.block-library-utils__media-control__reset {
134 - position: absolute;
135 - right: 0;
136 - top: 8px;
137 - margin: auto 8px auto;
138 - opacity: 0;
139 117 border-radius: 2px;
140 118 }
141 -@media not (prefers-reduced-motion) {
142 - .block-library-utils__media-control__reset {
143 - transition: opacity 0.1s ease-in-out;
144 - }
145 -}
146 -.block-library-utils__media-control:hover .block-library-utils__media-control__reset, .block-library-utils__media-control__reset:focus, .block-library-utils__media-control__reset:hover {
147 - opacity: 1;
148 -}
149 -@media (hover: none) {
150 - .block-library-utils__media-control__reset {
151 - opacity: 1;
152 - }
153 -}
154 119
155 120 .wp-block-audio {
156 121 margin-left: 0;
157 122 margin-right: 0;
@@ -622,10 +587,8 @@
622 587 margin-left: 0.75em;
623 588 }
624 589
625 590 .wp-block-form-input .is-input-hidden {
626 - display: flex;
627 - position: relative;
628 591 font-size: 0.85em;
629 592 opacity: 0.3;
630 593 border: 1px dashed;
631 594 padding: 0.5em;
@@ -630,18 +593,19 @@
630 593 border: 1px dashed;
631 594 padding: 0.5em;
632 595 box-sizing: border-box;
633 596 background: repeating-linear-gradient(45deg, transparent, transparent 5px, currentColor 5px, currentColor 6px);
634 - justify-content: center;
635 - align-items: center;
636 597 }
637 -.wp-block-form-input .is-input-hidden::after {
638 - content: attr(data-message);
598 +.wp-block-form-input .is-input-hidden input[type=text] {
599 + background: transparent;
639 600 }
640 601 .wp-block-form-input.is-selected .is-input-hidden {
641 602 opacity: 1;
642 603 background: none;
643 604 }
605 +.wp-block-form-input.is-selected .is-input-hidden input[type=text] {
606 + background: unset;
607 +}
644 608
645 609 .wp-block-form-submission-notification > * {
646 610 opacity: 0.25;
647 611 border: 1px dashed;
@@ -711,8 +675,22 @@
711 675 }
712 676 :root :where(figure.wp-block-gallery) > .blocks-gallery-caption {
713 677 flex: 0 0 100%;
714 678 }
679 +:root :where(figure.wp-block-gallery) > .blocks-gallery-media-placeholder-wrapper {
680 + flex-basis: 100%;
681 +}
682 +:root :where(figure.wp-block-gallery) .wp-block-image .components-notice.is-error {
683 + display: block;
684 +}
685 +:root :where(figure.wp-block-gallery) .wp-block-image .components-notice__content {
686 + margin: 4px 0;
687 +}
688 +:root :where(figure.wp-block-gallery) .wp-block-image .components-notice__dismiss {
689 + position: absolute;
690 + top: 0;
691 + right: 5px;
692 +}
715 693 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
716 694 display: none;
717 695 }
718 696 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .block-editor-media-placeholder__button {
@@ -789,29 +767,8 @@
789 767 justify-content: flex-end;
790 768 gap: 12px;
791 769 }
792 770
793 -.wp-block-gallery__source-settings {
794 - grid-column: 1/-1;
795 - display: flex;
796 - flex-direction: column;
797 - gap: 8px;
798 -}
799 -.wp-block-gallery__source-settings .wp-block-gallery__source-description {
800 - margin: 0;
801 - color: #757575;
802 - font-size: 12px;
803 -}
804 -.wp-block-gallery__source-settings .components-button {
805 - justify-content: center;
806 - width: 100%;
807 -}
808 -
809 -.wp-block-gallery__source-notice {
810 - grid-column: 1/-1;
811 - margin: 0;
812 -}
813 -
814 771 /**
815 772 * Group: All Alignment Settings
816 773 */
817 774 .wp-block-group .block-editor-block-list__insertion-point {
@@ -862,30 +819,22 @@
862 819 top: 0;
863 820 left: 0;
864 821 }
865 822
866 -.block-library-html__edit-code {
867 - margin: 16px;
823 +.block-library-html__modal {
824 + height: 100%;
868 825 }
869 -.block-library-html__edit-code .block-library-html__edit-code-button {
870 - justify-content: center;
871 -}
872 -
873 -@media (min-width: 600px) {
874 - .block-library-html__modal:not(.is-full-screen) {
875 - height: 9999rem;
876 - }
877 -}
878 826 .block-library-html__modal .components-modal__children-container {
879 827 height: 100%;
880 828 }
881 829
882 830 .block-library-html__modal-tabs {
883 - flex: 1;
831 + overflow-y: auto;
884 832 }
885 833
886 834 .block-library-html__modal-content {
887 835 flex: 1;
836 + min-height: 0;
888 837 }
889 838
890 839 .block-library-html__modal-tab {
891 840 height: 100%;
@@ -924,48 +873,23 @@
924 873 .block-library-html__preview {
925 874 display: flex;
926 875 align-items: center;
927 876 justify-content: center;
877 + padding: 16px;
878 + flex: 1;
928 879 min-height: 0;
929 - overflow-y: auto;
930 - flex: 1;
931 880 }
932 -.block-library-html__preview iframe {
933 - height: 100%;
934 -}
935 881
936 -.wp-block[data-align=center] > .wp-block-icon {
937 - display: flex;
938 - justify-content: center;
882 +.wp-block-icon__inserter {
883 + padding: 0 24px;
884 + margin: 0 -24px;
939 885 }
940 886
941 -.wp-block-icon__inserter-sidebar {
942 - padding-bottom: 24px;
943 -}
944 -@media (min-width: 782px) {
945 - .wp-block-icon__inserter-sidebar {
946 - overflow-x: visible;
947 - overflow-y: auto;
948 - position: absolute;
949 - top: 72px;
950 - left: 0;
951 - bottom: 0;
952 - width: 280px;
953 - padding-top: 24px;
954 - padding-inline: 24px;
955 - }
956 -}
957 -
958 -@media (min-width: 782px) {
959 - .wp-block-icon__inserter-panel {
960 - margin-inline-start: 280px;
961 - }
962 -}
963 -
964 -.wp-block-icon__inserter-loading {
887 +.wp-block-icon__inserter-header {
888 + align-items: center;
965 889 display: flex;
966 - justify-content: center;
967 - padding: 24px;
890 + justify-content: space-between;
891 + margin-bottom: 16px;
968 892 }
969 893
970 894 .wp-block-icon__inserter-grid-icons-list {
971 895 display: grid;
@@ -985,18 +909,15 @@
985 909
986 910 .wp-block-icon__inserter-grid-icons-list-item-icon {
987 911 padding: 12px;
988 912 }
989 -.wp-block-icon__inserter-grid-icons-list-item-icon svg {
990 - display: block;
991 - width: 24px;
992 - height: 24px;
993 -}
994 913
995 914 .wp-block-icon__inserter-grid-icons-list-item-title {
996 915 font-size: 12px;
997 916 padding: 4px 4px 8px;
998 - overflow-wrap: break-word;
917 + overflow: hidden;
918 + text-overflow: ellipsis;
919 + white-space: nowrap;
999 920 }
1000 921
1001 922 .wp-block-icon__toolbar-content {
1002 923 width: 250px;
@@ -1016,12 +937,8 @@
1016 937
1017 938 .wp-block-image {
1018 939 position: relative;
1019 940 }
1020 -.wp-block-image.is-transient:not(.alignwide):not(.alignfull) {
1021 - width: -moz-fit-content;
1022 - width: fit-content;
1023 -}
1024 941 .wp-block-image .is-applying img, .wp-block-image.is-transient img {
1025 942 opacity: 0.3;
1026 943 }
1027 944 .wp-block-image figcaption img {
@@ -1045,12 +962,8 @@
1045 962 .wp-block-image__placeholder .components-placeholder__illustration {
1046 963 opacity: 0.1;
1047 964 }
1048 965
1049 -.wp-block-image.is-selected .block-editor-media-placeholder {
1050 - filter: none !important;
1051 -}
1052 -
1053 966 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
1054 967 position: absolute;
1055 968 left: 0;
1056 969 right: 0;
@@ -1219,10 +1132,10 @@
1219 1132 .wp-block-more .rich-text {
1220 1133 position: relative;
1221 1134 font-size: 13px;
1222 1135 text-transform: uppercase;
1223 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1224 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1136 + font-weight: 600;
1137 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1225 1138 color: #757575;
1226 1139 display: inline-flex;
1227 1140 white-space: nowrap;
1228 1141 text-align: center;
@@ -1420,9 +1333,9 @@
1420 1333 display: flex;
1421 1334 align-items: center;
1422 1335 min-width: 96px;
1423 1336 font-size: 13px;
1424 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1337 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1425 1338 }
1426 1339 .wp-block-navigation.is-selected .wp-block-navigation-placeholder__preview {
1427 1340 display: none;
1428 1341 }
@@ -1514,9 +1427,9 @@
1514 1427
1515 1428 .wp-block-navigation-placeholder__actions {
1516 1429 display: flex;
1517 1430 font-size: 13px;
1518 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1431 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1519 1432 gap: 6px;
1520 1433 align-items: center;
1521 1434 }
1522 1435 .wp-block-navigation-placeholder__actions .components-dropdown,
@@ -1654,9 +1567,10 @@
1654 1567 height: 64px !important;
1655 1568 grid-column: span 2;
1656 1569 }
1657 1570 .wp-block-navigation__overlay-menu-preview.open {
1658 - border-color: #e0e0e0;
1571 + box-shadow: inset 0 0 0 1px #e0e0e0;
1572 + outline: 1px solid transparent;
1659 1573 background-color: #fff;
1660 1574 }
1661 1575
1662 1576 .wp-block-navigation__toolbar-menu-selector.components-toolbar-group:empty {
@@ -1865,9 +1779,9 @@
1865 1779
1866 1780 .link-control-transform__subheading {
1867 1781 font-size: 11px;
1868 1782 text-transform: uppercase;
1869 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1783 + font-weight: 499;
1870 1784 color: #1e1e1e;
1871 1785 margin-bottom: 1.5em;
1872 1786 }
1873 1787
@@ -1961,10 +1875,10 @@
1961 1875 .wp-block-nextpage > span {
1962 1876 font-size: 13px;
1963 1877 position: relative;
1964 1878 text-transform: uppercase;
1965 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
1966 - font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1879 + font-weight: 600;
1880 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1967 1881 color: #757575;
1968 1882 border-radius: 4px;
1969 1883 background: #fff;
1970 1884 padding: 6px 8px;
@@ -2052,12 +1966,11 @@
2052 1966 margin: 16px;
2053 1967 padding: 16px;
2054 1968 }
2055 1969
2056 -.wp-block-playlist__waveform-color-controls {
2057 - display: grid;
2058 - grid-column: 1/-1;
2059 - row-gap: 0;
1970 +.wp-block-playlist li.block-list-appender.block-list-appender {
1971 + position: initial;
1972 + margin-top: var(--wp--preset--spacing--30, 1em);
2060 1973 }
2061 1974
2062 1975 .wp-block-post-excerpt .wp-block-post-excerpt__excerpt.is-inline {
2063 1976 display: inline;
@@ -2220,10 +2133,9 @@
2220 2133 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-media-replace-title {
2221 2134 word-break: break-all;
2222 2135 white-space: normal;
2223 2136 text-align: start;
2224 - -moz-text-align-last: center;
2225 - text-align-last: center;
2137 + text-align-last: center;
2226 2138 }
2227 2139 .block-library-site-logo__inspector-media-replace-container img {
2228 2140 width: 20px;
2229 2141 min-width: 20px;
@@ -2365,15 +2277,8 @@
2365 2277 margin-bottom: 0;
2366 2278 height: 100% !important;
2367 2279 }
2368 2280
2369 -@media (min-width: 600px) {
2370 - .wp-block-tab-list__mover-button {
2371 - width: 24px;
2372 - min-width: 0 !important;
2373 - }
2374 -}
2375 -
2376 2281 .wp-block[data-align=left] > .wp-block-table, .wp-block[data-align=right] > .wp-block-table, .wp-block[data-align=center] > .wp-block-table {
2377 2282 height: auto;
2378 2283 }
2379 2284 .wp-block[data-align=left] > .wp-block-table table, .wp-block[data-align=right] > .wp-block-table table, .wp-block[data-align=center] > .wp-block-table table {
@@ -2427,26 +2332,39 @@
2427 2332 .blocks-table__placeholder-input {
2428 2333 width: 112px;
2429 2334 }
2430 2335
2336 +.wp-block-tabs-menu .tabs__tab-label--placeholder {
2337 + opacity: 0.5;
2338 + font-style: italic;
2339 +}
2340 +
2341 +.wp-block-tabs-menu-item.is-selected {
2342 + outline-offset: 2px;
2343 +}
2344 +
2345 +.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item) {
2346 + flex-basis: inherit !important;
2347 + flex-grow: inherit !important;
2348 +}
2349 +.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item) .wp-block-tabs-menu-item {
2350 + flex-basis: 100% !important;
2351 +}
2352 +
2431 2353 .block-editor-template-part__selection-modal {
2432 2354 z-index: 1000001;
2433 2355 }
2434 2356 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2435 - -moz-column-count: 2;
2436 - column-count: 2;
2437 - -moz-column-gap: 24px;
2438 - column-gap: 24px;
2357 + column-count: 2;
2358 + column-gap: 24px;
2439 2359 }
2440 2360 @media (min-width: 1280px) {
2441 2361 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2442 - -moz-column-count: 3;
2443 - column-count: 3;
2362 + column-count: 3;
2444 2363 }
2445 2364 }
2446 2365 .block-editor-template-part__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2447 - -moz-column-break-inside: avoid;
2448 - break-inside: avoid-column;
2366 + break-inside: avoid-column;
2449 2367 }
2450 2368
2451 2369 .block-library-template-part__selection-search {
2452 2370 background: #fff;
@@ -2519,12 +2437,8 @@
2519 2437 .block-library-video-tracks-editor {
2520 2438 z-index: 159990;
2521 2439 }
2522 2440
2523 -.modal-open .block-library-video-tracks-editor {
2524 - z-index: 99999;
2525 -}
2526 -
2527 2441 .block-library-video-tracks-editor__track-list-track {
2528 2442 padding-left: 12px;
2529 2443 }
2530 2444
@@ -2537,9 +2451,9 @@
2537 2451 margin-top: 4px;
2538 2452 color: #757575;
2539 2453 text-transform: uppercase;
2540 2454 font-size: 11px;
2541 - font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2455 + font-weight: 499;
2542 2456 display: block;
2543 2457 }
2544 2458
2545 2459 .block-library-video-tracks-editor > .components-popover__content {
@@ -2558,22 +2472,18 @@
2558 2472 margin-bottom: 0;
2559 2473 }
2560 2474
2561 2475 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2562 - -moz-column-count: 2;
2563 - column-count: 2;
2564 - -moz-column-gap: 24px;
2565 - column-gap: 24px;
2476 + column-count: 2;
2477 + column-gap: 24px;
2566 2478 }
2567 2479 @media (min-width: 1280px) {
2568 2480 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2569 - -moz-column-count: 3;
2570 - column-count: 3;
2481 + column-count: 3;
2571 2482 }
2572 2483 }
2573 2484 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
2574 - -moz-column-break-inside: avoid;
2575 - break-inside: avoid-column;
2485 + break-inside: avoid-column;
2576 2486 }
2577 2487 .block-library-query-pattern__selection-modal .block-library-query-pattern__selection-search {
2578 2488 background: #fff;
2579 2489 position: sticky;
@@ -2824,13 +2734,11 @@
2824 2734 height: auto !important;
2825 2735 outline: 1px solid rgba(0, 0, 0, 0.1);
2826 2736 }
2827 2737 .block-library-poster-image__preview .block-library-poster-image__preview-image {
2828 - -o-object-fit: cover;
2829 - object-fit: cover;
2738 + object-fit: cover;
2830 2739 width: 100%;
2831 - -o-object-position: 50% 50%;
2832 - object-position: 50% 50%;
2740 + object-position: 50% 50%;
2833 2741 aspect-ratio: 2/1;
2834 2742 }
2835 2743
2836 2744 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) {