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/block-library/editor.css +72 -144 23.6.0 → 24.1.0 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) {