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-editor/content.css +33 -46 23.6.0 → trunk 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;