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-editor/content.css +33 -46 23.6.2 → 24.1.0 View file →
@@ -121,13 +121,8 @@
121 121 }
122 122 .block-editor-block-icon.has-colors svg {
123 123 fill: currentColor;
124 124 }
125 -@media (forced-colors: active) {
126 - .block-editor-block-icon.has-colors svg {
127 - fill: CanvasText;
128 - }
129 -}
130 125 .block-editor-block-icon svg {
131 126 min-width: 20px;
132 127 min-height: 20px;
133 128 max-width: 24px;
@@ -158,11 +153,8 @@
158 153 /* stylelint-enable */
159 154 .block-editor-block-list__layout {
160 155 position: relative;
161 156 }
162 -.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::-moz-selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::-moz-selection {
163 - background: transparent;
164 -}
165 157 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
166 158 background: transparent;
167 159 }
168 160 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
@@ -190,13 +182,17 @@
190 182 outline-color: transparent;
191 183 }
192 184 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
193 185 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
186 +.block-editor-block-list__layout .block-editor-block-list__block.is-hovered-draggable[draggable=true]:not(.is-multi-selected),
187 +.block-editor-block-list__layout .block-editor-block-list__block.is-hovered-draggable[data-draggable=true]:not(.is-multi-selected),
194 188 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus {
195 189 outline: none;
196 190 }
197 191 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
198 192 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after,
193 +.block-editor-block-list__layout .block-editor-block-list__block.is-hovered-draggable[draggable=true]:not(.is-multi-selected)::after,
194 +.block-editor-block-list__layout .block-editor-block-list__block.is-hovered-draggable[data-draggable=true]:not(.is-multi-selected)::after,
199 195 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
200 196 content: "";
201 197 position: absolute;
202 198 pointer-events: none;
@@ -230,9 +226,8 @@
230 226 margin-right: 0 !important;
231 227 }
232 228 .block-editor-block-list__layout [class^=components-] {
233 229 -webkit-user-select: text;
234 - -moz-user-select: text;
235 230 user-select: text;
236 231 }
237 232
238 233 .block-editor-block-list__layout .block-editor-block-list__block {
@@ -263,9 +258,8 @@
263 258 }
264 259 .block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
265 260 pointer-events: none;
266 261 -webkit-user-select: none;
267 - -moz-user-select: none;
268 262 user-select: none;
269 263 }
270 264 .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
271 265 pointer-events: all;
@@ -372,9 +366,9 @@
372 366 .wp-block[data-align=left] > *,
373 367 .wp-block[data-align=right] > *,
374 368 .wp-block.alignleft,
375 369 .wp-block.alignright {
376 - z-index: 21;
370 + z-index: 9;
377 371 }
378 372
379 373 .wp-site-blocks > [data-align=left] {
380 374 float: left;
@@ -415,16 +409,8 @@
415 409 animation-fill-mode: forwards;
416 410 }
417 411 }
418 412
419 -.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
420 - display: none;
421 -}
422 -.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender .block-editor-inserter__toggle {
423 - opacity: 0;
424 - transform: scale(0);
425 -}
426 -
427 413 .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
428 414 display: block;
429 415 margin: 0;
430 416 padding: 12px;
@@ -434,9 +420,10 @@
434 420 border-radius: 2px;
435 421 box-sizing: border-box;
436 422 box-shadow: inset 0 0 0 1px #1e1e1e;
437 423 resize: none;
438 - overflow: hidden;
424 + field-sizing: content;
425 + overflow: auto;
439 426 font-family: Menlo, Consolas, monaco, monospace;
440 427 font-size: 15px;
441 428 line-height: 1.5;
442 429 /*rtl:ignore*/
@@ -469,9 +456,9 @@
469 456 overflow: hidden;
470 457 font-size: 13px;
471 458 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
472 459 color: #000;
473 - font-weight: normal;
460 + font-weight: 400;
474 461 }
475 462 .is-zoomed-out .block-editor-block-list__zoom-out-separator {
476 463 font-size: calc(13px / var(--wp-block-editor-iframe-zoom-out-scale));
477 464 }
@@ -532,11 +519,8 @@
532 519 }
533 520 .block-editor-block-list__layout .is-dragging iframe {
534 521 pointer-events: none;
535 522 }
536 -.block-editor-block-list__layout .is-dragging::-moz-selection {
537 - background: transparent !important;
538 -}
539 523 .block-editor-block-list__layout .is-dragging::selection {
540 524 background: transparent !important;
541 525 }
542 526 .block-editor-block-list__layout .is-dragging::after {
@@ -542,13 +526,8 @@
542 526 .block-editor-block-list__layout .is-dragging::after {
543 527 content: none !important;
544 528 }
545 529
546 -.wp-block img:not([draggable]),
547 -.wp-block svg:not([draggable]) {
548 - pointer-events: none;
549 -}
550 -
551 530 .block-editor-block-preview__content-iframe .block-list-appender {
552 531 display: none;
553 532 }
554 533
@@ -582,9 +561,10 @@
582 561 }
583 562 .block-editor-block-variation-picker__variations svg,
584 563 .block-editor-block-variation-picker__skip svg,
585 564 .wp-block-group-placeholder__variations svg {
586 - fill: #949494 !important;
565 + fill: #949494;
566 + color: #949494 !important;
587 567 }
588 568 .block-editor-block-variation-picker__variations .components-button,
589 569 .block-editor-block-variation-picker__skip .components-button,
590 570 .wp-block-group-placeholder__variations .components-button {
@@ -597,9 +577,10 @@
597 577 }
598 578 .block-editor-block-variation-picker__variations .components-button:hover svg,
599 579 .block-editor-block-variation-picker__skip .components-button:hover svg,
600 580 .wp-block-group-placeholder__variations .components-button:hover svg {
601 - fill: var(--wp-admin-theme-color) !important;
581 + fill: var(--wp-admin-theme-color);
582 + color: var(--wp-admin-theme-color) !important;
602 583 }
603 584 .block-editor-block-variation-picker__variations > li,
604 585 .block-editor-block-variation-picker__skip > li,
605 586 .wp-block-group-placeholder__variations > li {
@@ -629,12 +610,12 @@
629 610 .block-editor-button-block-appender:active {
630 611 color: #000;
631 612 }
632 613
633 -.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child {
614 +.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender), .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender), .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender), .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender) {
634 615 pointer-events: none;
635 616 }
636 -.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child::after {
617 +.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender)::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender)::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender)::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender)::after {
637 618 content: "";
638 619 position: absolute;
639 620 top: 0;
640 621 right: 0;
@@ -642,30 +623,30 @@
642 623 left: 0;
643 624 pointer-events: none;
644 625 border: 1px dashed currentColor;
645 626 }
646 -.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
627 +.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender) .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender) .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender) .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender) .block-editor-inserter {
647 628 opacity: 0;
648 629 }
649 -.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter:focus-within, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter:focus-within, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter:focus-within, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter:focus-within {
630 +.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender) .block-editor-inserter:focus-within, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender) .block-editor-inserter:focus-within, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender) .block-editor-inserter:focus-within, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender) .block-editor-inserter:focus-within {
650 631 opacity: 1;
651 632 }
652 -.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over::after {
633 +.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over::after, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over::after {
653 634 border: none;
654 635 }
655 -.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child.is-drag-over .block-editor-inserter {
656 - visibility: visible;
636 +.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over .block-editor-inserter {
637 + opacity: 1;
657 638 }
658 -.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child::after {
639 +.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child:has(.block-editor-button-block-appender)::after {
659 640 border: none;
660 641 }
661 -.block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
642 +.block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over .block-editor-button-block-appender {
662 643 background-color: var(--wp-admin-theme-color);
663 644 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
664 645 color: rgba(255, 255, 255, 0.65);
665 646 }
666 647 @media not (prefers-reduced-motion) {
667 - .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
648 + .block-list-appender:only-child:has(.block-editor-button-block-appender).is-drag-over .block-editor-button-block-appender {
668 649 transition: background-color 0.2s ease-in-out;
669 650 }
670 651 }
671 652
@@ -782,9 +763,9 @@
782 763 }
783 764 .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content {
784 765 display: none;
785 766 }
786 -.block-editor-block-list__block .block-list-appender:only-child {
767 +.block-editor-block-list__block .block-list-appender:first-child {
787 768 position: relative;
788 769 right: auto;
789 770 align-self: center;
790 771 list-style: none;
@@ -789,9 +770,9 @@
789 770 align-self: center;
790 771 list-style: none;
791 772 line-height: inherit;
792 773 }
793 -.block-editor-block-list__block .block-list-appender:only-child .block-editor-default-block-appender__content {
774 +.block-editor-block-list__block .block-list-appender:first-child .block-editor-default-block-appender__content {
794 775 display: block;
795 776 }
796 777
797 778 .block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
@@ -870,9 +851,13 @@
870 851 line-height: inherit;
871 852 border: none;
872 853 padding: 0;
873 854 margin: 0;
855 +}
856 +
857 +.block-editor-plain-text {
874 858 width: 100%;
859 + field-sizing: content;
875 860 }
876 861
877 862 .rich-text [data-rich-text-placeholder] {
878 863 pointer-events: none;
@@ -911,14 +896,16 @@
911 896 color: currentColor;
912 897 padding: 0 2px;
913 898 }
914 899
915 -.rich-text [contenteditable=false]::-moz-selection {
900 +.rich-text [contenteditable=false]::selection {
916 901 background-color: transparent;
917 902 }
918 903
919 -.rich-text [contenteditable=false]::selection {
920 - background-color: transparent;
904 +.is-selected .non-breaking-space {
905 + outline: 1px solid currentColor;
906 + outline-offset: -1px;
907 + opacity: 0.8;
921 908 }
922 909
923 910 .block-editor-warning {
924 911 align-items: center;