PluginProbe
Gutenberg / trunk
Gutenberg vtrunk
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/block-library/editor.css +72 -144 23.6.2 → trunk View file →
@@ -338,9 +338,9 @@
338 338 font-size: 0.875em;
339 339 line-height: 1.5;
340 340 }
341 341 .wp-block-post-comments .comment-meta b, .wp-block-comments__legacy-placeholder .comment-meta b {
342 - font-weight: normal;
342 + font-weight: 400;
343 343 }
344 344 .wp-block-post-comments .comment-meta .comment-awaiting-moderation, .wp-block-comments__legacy-placeholder .comment-meta .comment-awaiting-moderation {
345 345 margin-top: 1em;
346 346 margin-bottom: 1em;
@@ -348,18 +348,8 @@
348 348 }
349 349 .wp-block-post-comments .comment-body .commentmetadata, .wp-block-comments__legacy-placeholder .comment-body .commentmetadata {
350 350 font-size: 0.875em;
351 351 }
352 -.wp-block-post-comments .comment-form-comment label, .wp-block-comments__legacy-placeholder .comment-form-comment label,
353 -.wp-block-post-comments .comment-form-author label,
354 -.wp-block-comments__legacy-placeholder .comment-form-author label,
355 -.wp-block-post-comments .comment-form-email label,
356 -.wp-block-comments__legacy-placeholder .comment-form-email label,
357 -.wp-block-post-comments .comment-form-url label,
358 -.wp-block-comments__legacy-placeholder .comment-form-url label {
359 - display: block;
360 - margin-bottom: 0.25em;
361 -}
362 352 .wp-block-post-comments .comment-form textarea, .wp-block-comments__legacy-placeholder .comment-form textarea,
363 353 .wp-block-post-comments .comment-form input:not([type=submit]):not([type=checkbox]),
364 354 .wp-block-comments__legacy-placeholder .comment-form input:not([type=submit]):not([type=checkbox]) {
365 355 display: block;
@@ -396,8 +386,16 @@
396 386 .wp-block-comments__legacy-placeholder input:not([type=submit]):not([type=checkbox]) {
397 387 padding: calc(0.667em + 2px);
398 388 }
399 389
390 +:where(.wp-block-post-comments .comment-form-comment label, .wp-block-comments__legacy-placeholder .comment-form-comment label),
391 +:where(.wp-block-post-comments .comment-form-author label, .wp-block-comments__legacy-placeholder .comment-form-author label),
392 +:where(.wp-block-post-comments .comment-form-email label, .wp-block-comments__legacy-placeholder .comment-form-email label),
393 +:where(.wp-block-post-comments .comment-form-url label, .wp-block-comments__legacy-placeholder .comment-form-url label) {
394 + display: block;
395 + margin-bottom: 0.25em;
396 +}
397 +
400 398 :where(.wp-block-post-comments input[type=submit], .wp-block-comments__legacy-placeholder input[type=submit]) {
401 399 border: none;
402 400 }
403 401
@@ -480,8 +478,11 @@
480 478 }
481 479 .wp-block-cover.is-transient .wp-block-cover__inner-container {
482 480 z-index: 2;
483 481 }
482 +.wp-block-cover.is-transient .components-spinner {
483 + z-index: 3;
484 +}
484 485 .wp-block-cover .components-spinner {
485 486 position: absolute;
486 487 top: 50%;
487 488 left: 50%;
@@ -553,9 +554,10 @@
553 554 .wp-block-embed .wp-block-embed__placeholder-input {
554 555 flex: 1 1 auto;
555 556 }
556 557 .wp-block-embed .components-placeholder__error {
557 - word-break: break-word;
558 + word-break: normal;
559 + overflow-wrap: break-word;
558 560 }
559 561
560 562 .wp-block-post-content .wp-block-embed__learn-more a {
561 563 color: var(--wp-admin-theme-color);
@@ -621,59 +623,8 @@
621 623 display: inline-block;
622 624 margin-left: 0.75em;
623 625 }
624 626
625 -.wp-block-form-input .is-input-hidden {
626 - display: flex;
627 - position: relative;
628 - font-size: 0.85em;
629 - opacity: 0.3;
630 - border: 1px dashed;
631 - padding: 0.5em;
632 - box-sizing: border-box;
633 - background: repeating-linear-gradient(45deg, transparent, transparent 5px, currentColor 5px, currentColor 6px);
634 - justify-content: center;
635 - align-items: center;
636 -}
637 -.wp-block-form-input .is-input-hidden::after {
638 - content: attr(data-message);
639 -}
640 -.wp-block-form-input.is-selected .is-input-hidden {
641 - opacity: 1;
642 - background: none;
643 -}
644 -
645 -.wp-block-form-submission-notification > * {
646 - opacity: 0.25;
647 - border: 1px dashed;
648 - box-sizing: border-box;
649 - background: repeating-linear-gradient(45deg, transparent, transparent 5px, currentColor 5px, currentColor 6px);
650 -}
651 -.wp-block-form-submission-notification.is-selected > *, .wp-block-form-submission-notification:has(.is-selected) > * {
652 - opacity: 1;
653 - background: none;
654 -}
655 -.wp-block-form-submission-notification.is-selected::after, .wp-block-form-submission-notification:has(.is-selected)::after {
656 - display: none !important;
657 -}
658 -.wp-block-form-submission-notification::after {
659 - display: flex;
660 - position: absolute;
661 - width: 100%;
662 - height: 100%;
663 - top: 0;
664 - left: 0;
665 - justify-content: center;
666 - align-items: center;
667 - font-size: 1.1em;
668 -}
669 -.wp-block-form-submission-notification.form-notification-type-success::after {
670 - content: attr(data-message-success);
671 -}
672 -.wp-block-form-submission-notification.form-notification-type-error::after {
673 - content: attr(data-message-error);
674 -}
675 -
676 627 .block-editor-freeform-modal .block-editor-freeform-modal__content .mce-edit-area iframe {
677 628 height: 50vh !important;
678 629 }
679 630 @media (min-width: 960px) {
@@ -705,14 +656,21 @@
705 656 .block-editor-freeform-modal__actions {
706 657 margin-top: 16px;
707 658 }
708 659
709 -:root :where(figure.wp-block-gallery) {
660 +:root :where(figure.wp-block-gallery.is-layout-flex) {
710 661 display: block;
711 662 }
712 -:root :where(figure.wp-block-gallery) > .blocks-gallery-caption {
663 +:root :where(figure.wp-block-gallery.is-layout-flex) > .blocks-gallery-caption {
713 664 flex: 0 0 100%;
714 665 }
666 +
667 +:root :where(.wp-block-gallery.is-layout-grid) > .blocks-gallery-caption,
668 +:root :where(.wp-block-gallery.is-layout-grid) > .components-placeholder,
669 +:root :where(.wp-block-gallery.is-layout-grid) > .block-editor-media-placeholder {
670 + grid-column: 1/-1;
671 +}
672 +
715 673 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label {
716 674 display: none;
717 675 }
718 676 :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .block-editor-media-placeholder__button {
@@ -1016,13 +974,13 @@
1016 974
1017 975 .wp-block-image {
1018 976 position: relative;
1019 977 }
1020 -.wp-block-image.is-transient:not(.alignwide):not(.alignfull) {
1021 - width: -moz-fit-content;
978 +.wp-block-image.is-transient:not(.alignwide):not(.alignfull), .wp-block-image:has(img.is-swapping-media):not(.alignwide):not(.alignfull) {
1022 979 width: fit-content;
1023 980 }
1024 -.wp-block-image .is-applying img, .wp-block-image.is-transient img {
981 +.wp-block-image .is-applying img, .wp-block-image.is-transient img,
982 +.wp-block-image img.is-swapping-media {
1025 983 opacity: 0.3;
1026 984 }
1027 985 .wp-block-image figcaption img {
1028 986 display: inline;
@@ -1033,8 +991,14 @@
1033 991 left: 50%;
1034 992 transform: translate(-50%, -50%);
1035 993 margin: 0;
1036 994 }
995 +.wp-block-image .components-resizable-box__container {
996 + pointer-events: none;
997 +}
998 +.wp-block-image .components-resizable-box__handle {
999 + pointer-events: auto;
1000 +}
1037 1001
1038 1002 .wp-block-image__placeholder {
1039 1003 aspect-ratio: 4/3;
1040 1004 }
@@ -1103,38 +1067,8 @@
1103 1067 .wp-block[data-align]:has(> .wp-block-image) {
1104 1068 position: relative;
1105 1069 }
1106 1070
1107 -.wp-block-image__crop-area {
1108 - position: relative;
1109 - max-width: 100%;
1110 - width: 100%;
1111 - overflow: hidden;
1112 -}
1113 -.wp-block-image__crop-area .reactEasyCrop_Container {
1114 - pointer-events: auto;
1115 -}
1116 -.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
1117 - border: none;
1118 - border-radius: 0;
1119 -}
1120 -
1121 -.wp-block-image__crop-icon {
1122 - padding: 0 8px;
1123 - min-width: 48px;
1124 - display: flex;
1125 - justify-content: center;
1126 - align-items: center;
1127 -}
1128 -.wp-block-image__crop-icon svg {
1129 - fill: currentColor;
1130 -}
1131 -
1132 -.wp-block-image__zoom .components-popover__content {
1133 - min-width: 260px;
1134 - overflow: visible !important;
1135 -}
1136 -
1137 1071 .wp-block-image__toolbar_content_textarea__container {
1138 1072 padding: 8px;
1139 1073 }
1140 1074
@@ -1164,8 +1098,13 @@
1164 1098 /*rtl:ignore*/
1165 1099 direction: ltr;
1166 1100 }
1167 1101
1102 +.wp-block-math__learn-more {
1103 + display: inline-block;
1104 + margin-top: var(--wpds-dimension-gap-sm, 8px);
1105 +}
1106 +
1168 1107 .wp-block-media-text__media {
1169 1108 position: relative;
1170 1109 }
1171 1110 .wp-block-media-text__media.is-transient img {
@@ -1278,8 +1217,12 @@
1278 1217 opacity: 1;
1279 1218 visibility: visible;
1280 1219 }
1281 1220
1221 +.wp-block-navigation__container.block-editor-block-list__layout {
1222 + flex-grow: 1;
1223 +}
1224 +
1282 1225 .is-editing > .wp-block-navigation__container {
1283 1226 visibility: visible;
1284 1227 opacity: 1;
1285 1228 display: flex;
@@ -1371,8 +1314,9 @@
1371 1314 .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender {
1372 1315 background-color: #1e1e1e;
1373 1316 color: #fff;
1374 1317 height: 24px;
1318 + width: 24px;
1375 1319 }
1376 1320 .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender.block-editor-button-block-appender.block-editor-button-block-appender {
1377 1321 padding: 0;
1378 1322 }
@@ -1786,8 +1730,12 @@
1786 1730 .wp-block-navigation__overlay-help-text-wrapper {
1787 1731 margin-top: 8px;
1788 1732 }
1789 1733
1734 +.wp-block-audio__autoplay-help-text {
1735 + grid-column: 1/-1;
1736 +}
1737 +
1790 1738 /**
1791 1739 * Appender
1792 1740 */
1793 1741 .wp-block-navigation .block-list-appender {
@@ -1808,13 +1756,15 @@
1808 1756 }
1809 1757 .wp-block-navigation .has-child.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child.has-child-selected > .wp-block-navigation__submenu-container {
1810 1758 visibility: visible !important;
1811 1759 opacity: 1 !important;
1812 - min-width: 200px !important;
1813 1760 height: auto !important;
1814 1761 width: auto !important;
1815 1762 overflow: visible !important;
1816 1763 }
1764 +.wp-block-navigation .has-child.is-selected:not(.open-always) > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child.has-child-selected:not(.open-always) > .wp-block-navigation__submenu-container {
1765 + min-width: 200px !important;
1766 +}
1817 1767
1818 1768 /**
1819 1769 * Navigation Items.
1820 1770 */
@@ -1922,9 +1872,8 @@
1922 1872 }
1923 1873 .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container {
1924 1874 visibility: visible !important;
1925 1875 opacity: 1 !important;
1926 - min-width: 200px !important;
1927 1876 height: auto !important;
1928 1877 width: auto !important;
1929 1878 position: absolute;
1930 1879 left: -1px;
@@ -1944,8 +1893,11 @@
1944 1893 width: 0.5em;
1945 1894 background: transparent;
1946 1895 }
1947 1896 }
1897 +.wp-block-navigation-submenu.is-selected:not(.open-always) > .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected:not(.open-always) > .wp-block-navigation__submenu-container {
1898 + min-width: 200px !important;
1899 +}
1948 1900
1949 1901 .block-editor-block-list__block[data-type="core/nextpage"] {
1950 1902 max-width: 100%;
1951 1903 text-align: center;
@@ -1995,20 +1947,8 @@
1995 1947 .wp-block-pages-list__item__link {
1996 1948 pointer-events: none;
1997 1949 }
1998 1950
1999 -@media (min-width: 600px) {
2000 - .wp-block-page-list-modal {
2001 - max-width: 480px;
2002 - }
2003 -}
2004 -
2005 -.wp-block-page-list-modal-buttons {
2006 - display: flex;
2007 - justify-content: flex-end;
2008 - gap: 12px;
2009 -}
2010 -
2011 1951 .wp-block-page-list .open-on-click:focus-within > .wp-block-navigation__submenu-container {
2012 1952 visibility: visible;
2013 1953 opacity: 1;
2014 1954 width: auto;
@@ -2074,8 +2014,12 @@
2074 2014 .wp-block-pullquote__citation {
2075 2015 color: inherit;
2076 2016 }
2077 2017
2018 +.wp-block-pullquote[style*=line-height] :where(p) {
2019 + line-height: inherit;
2020 +}
2021 +
2078 2022 .wp-block-rss li a > div {
2079 2023 display: inline;
2080 2024 }
2081 2025
@@ -2220,10 +2164,9 @@
2220 2164 .block-library-site-logo__inspector-media-replace-container .block-library-site-logo__inspector-media-replace-title {
2221 2165 word-break: break-all;
2222 2166 white-space: normal;
2223 2167 text-align: start;
2224 - -moz-text-align-last: center;
2225 - text-align-last: center;
2168 + text-align-last: center;
2226 2169 }
2227 2170 .block-library-site-logo__inspector-media-replace-container img {
2228 2171 width: 20px;
2229 2172 min-width: 20px;
@@ -2246,8 +2189,12 @@
2246 2189 padding: 1em 0;
2247 2190 border: 1px dashed;
2248 2191 }
2249 2192
2193 +.wp-block-site-title.has-fit-text > * {
2194 + white-space: inherit !important;
2195 +}
2196 +
2250 2197 .wp-block-social-links .wp-social-link {
2251 2198 line-height: 0;
2252 2199 }
2253 2200
@@ -2431,22 +2378,18 @@
2431 2378 .block-editor-template-part__selection-modal {
2432 2379 z-index: 1000001;
2433 2380 }
2434 2381 .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;
2382 + column-count: 2;
2383 + column-gap: 24px;
2439 2384 }
2440 2385 @media (min-width: 1280px) {
2441 2386 .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
2442 - -moz-column-count: 3;
2443 - column-count: 3;
2387 + column-count: 3;
2444 2388 }
2445 2389 }
2446 2390 .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;
2391 + break-inside: avoid-column;
2449 2392 }
2450 2393
2451 2394 .block-library-template-part__selection-search {
2452 2395 background: #fff;
@@ -2558,22 +2501,18 @@
2558 2501 margin-bottom: 0;
2559 2502 }
2560 2503
2561 2504 .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;
2505 + column-count: 2;
2506 + column-gap: 24px;
2566 2507 }
2567 2508 @media (min-width: 1280px) {
2568 2509 .block-library-query-pattern__selection-modal .block-editor-block-patterns-list {
2569 - -moz-column-count: 3;
2570 - column-count: 3;
2510 + column-count: 3;
2571 2511 }
2572 2512 }
2573 2513 .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;
2514 + break-inside: avoid-column;
2576 2515 }
2577 2516 .block-library-query-pattern__selection-modal .block-library-query-pattern__selection-search {
2578 2517 background: #fff;
2579 2518 position: sticky;
@@ -2583,14 +2522,8 @@
2583 2522 margin-bottom: -4px;
2584 2523 z-index: 2;
2585 2524 }
2586 2525
2587 -@media (min-width: 600px) {
2588 - .wp-block-query__enhanced-pagination-modal {
2589 - max-width: 480px;
2590 - }
2591 -}
2592 -
2593 2526 .block-editor-block-settings-menu__popover.is-expanded {
2594 2527 overflow-y: scroll;
2595 2528 }
2596 2529 .block-editor-block-settings-menu__popover .block-library-query-pattern__selection-content {
@@ -2605,9 +2538,9 @@
2605 2538 grid-template-columns: 1fr 1fr;
2606 2539 }
2607 2540 }
2608 2541 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
2609 - grid-gap: 12px;
2542 + gap: 12px;
2610 2543 min-width: 280px;
2611 2544 }
2612 2545 @media (min-width: 600px) {
2613 2546 .block-editor-block-settings-menu__popover .block-editor-block-patterns-list {
@@ -2628,11 +2561,8 @@
2628 2561
2629 2562 :where(.editor-styles-wrapper) .wp-block-query-pagination {
2630 2563 max-width: 100%;
2631 2564 }
2632 -:where(.editor-styles-wrapper) .wp-block-query-pagination.block-editor-block-list__layout {
2633 - margin: 0;
2634 -}
2635 2565
2636 2566 .wp-block-query-pagination-numbers a {
2637 2567 text-decoration: underline;
2638 2568 }
@@ -2824,13 +2754,11 @@
2824 2754 height: auto !important;
2825 2755 outline: 1px solid rgba(0, 0, 0, 0.1);
2826 2756 }
2827 2757 .block-library-poster-image__preview .block-library-poster-image__preview-image {
2828 - -o-object-fit: cover;
2829 - object-fit: cover;
2758 + object-fit: cover;
2830 2759 width: 100%;
2831 - -o-object-position: 50% 50%;
2832 - object-position: 50% 50%;
2760 + object-position: 50% 50%;
2833 2761 aspect-ratio: 2/1;
2834 2762 }
2835 2763
2836 2764 .block-library-poster-image__actions:not(.block-library-poster-image__actions-select) {