PluginProbe
Gutenberg / 23.6.2
Gutenberg v23.6.2
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 7.4.0 All 402 releases
gutenberg / build / styles / block-editor / content.css

content.css in Gutenberg 23.6.2, at build/styles/block-editor/content.css

960 lines 32.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Typography
3 */
4 /**
5 * SCSS Variables.
6 *
7 * Please use variables from this sheet to ensure consistency across the UI.
8 * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
9 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
10 */
11 /**
12 * Colors
13 */
14 /**
15 * Fonts & basic variables.
16 */
17 /**
18 * Typography
19 */
20 /**
21 * Grid System.
22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
23 */
24 /**
25 * Radius scale.
26 */
27 /**
28 * Elevation scale.
29 */
30 /**
31 * Dimensions.
32 */
33 /**
34 * Mobile specific styles
35 */
36 /**
37 * Editor styles.
38 */
39 /**
40 * Block & Editor UI.
41 */
42 /**
43 * Block paddings.
44 */
45 /**
46 * React Native specific.
47 * These variables do not appear to be used anywhere else.
48 */
49 /**
50 * Breakpoints & Media Queries
51 */
52 /**
53 * Converts a hex value into the rgb equivalent.
54 *
55 * @param {string} hex - the hexadecimal value to convert
56 * @return {string} comma separated rgb values
57 */
58 /**
59 * Long content fade mixin
60 *
61 * Creates a fading overlay to signify that the content is longer
62 * than the space allows.
63 */
64 /**
65 * Breakpoint mixins
66 */
67 /**
68 * Focus styles.
69 */
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 * Applies editor left position to the selector passed as argument
78 */
79 /**
80 * Styles that are reused verbatim in a few places
81 */
82 /**
83 * Allows users to opt-out of animations via OS-level preferences.
84 */
85 /**
86 * Reset default styles for JavaScript UI based pages.
87 * This is a WP-admin agnostic reset
88 */
89 /**
90 * Reset the WP Admin page styles for Gutenberg-like pages.
91 */
92 /**
93 * Creates a checkerboard pattern background to indicate transparency.
94 * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
95 */
96 :root {
97 --wp-block-synced-color: #7a00df;
98 --wp-block-synced-color--rgb: 122, 0, 223;
99 --wp-bound-block-color: var(--wp-block-synced-color);
100 --wp-editor-canvas-background: #ddd;
101 --wp-admin-theme-color: #007cba;
102 --wp-admin-theme-color--rgb: 0, 124, 186;
103 --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
104 --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
105 --wp-admin-theme-color-darker-20: #005a87;
106 --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
107 --wp-admin-border-width-focus: 2px;
108 }
109 @media (min-resolution: 192dpi) {
110 :root {
111 --wp-admin-border-width-focus: 1.5px;
112 }
113 }
114
115 .block-editor-block-icon {
116 display: flex;
117 align-items: center;
118 justify-content: center;
119 width: 24px;
120 height: 24px;
121 }
122 .block-editor-block-icon.has-colors svg {
123 fill: currentColor;
124 }
125 @media (forced-colors: active) {
126 .block-editor-block-icon.has-colors svg {
127 fill: CanvasText;
128 }
129 }
130 .block-editor-block-icon svg {
131 min-width: 20px;
132 min-height: 20px;
133 max-width: 24px;
134 max-height: 24px;
135 }
136
137 .block-editor-block-styles .block-editor-block-list__block {
138 margin: 0;
139 }
140
141 /**
142 * Cross-Block Selection
143 */
144 @keyframes selection-overlay__fade-in-animation {
145 from {
146 opacity: 0;
147 }
148 to {
149 opacity: 0.4;
150 }
151 }
152 /* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
153 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
154 _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .block-editor-block-list__layout::selection {
155 background-color: transparent;
156 }
157
158 /* stylelint-enable */
159 .block-editor-block-list__layout {
160 position: relative;
161 }
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 .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 background: transparent;
167 }
168 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
169 content: "";
170 position: absolute;
171 z-index: 1;
172 pointer-events: none;
173 top: 0;
174 right: 0;
175 bottom: 0;
176 left: 0;
177 background: var(--wp-admin-theme-color);
178 opacity: 0.4;
179 }
180 @media not (prefers-reduced-motion) {
181 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
182 animation: selection-overlay__fade-in-animation 0.1s ease-out;
183 animation-fill-mode: forwards;
184 }
185 }
186 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
187 outline: 2px solid transparent;
188 }
189 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected).is-highlighted::after {
190 outline-color: transparent;
191 }
192 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
193 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
194 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus {
195 outline: none;
196 }
197 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
198 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after,
199 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
200 content: "";
201 position: absolute;
202 pointer-events: none;
203 top: 0;
204 right: 0;
205 bottom: 0;
206 left: 0;
207 outline-color: var(--wp-admin-theme-color);
208 outline-style: solid;
209 outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
210 outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
211 box-shadow: inset 0 0 0 calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
212 z-index: 1;
213 }
214 .block-editor-block-list__layout .block-editor-block-list__block.is-block-hidden {
215 visibility: hidden;
216 overflow: hidden;
217 height: 0;
218 border: none !important;
219 padding: 0 !important;
220 opacity: 0;
221 margin-top: 0 !important;
222 margin-bottom: 0 !important;
223 }
224 .block-editor-block-list__layout.is-layout-flex:not(.is-vertical) > .is-block-hidden {
225 width: 0;
226 height: auto;
227 align-self: stretch;
228 white-space: nowrap !important;
229 margin-left: 0 !important;
230 margin-right: 0 !important;
231 }
232 .block-editor-block-list__layout [class^=components-] {
233 -webkit-user-select: text;
234 -moz-user-select: text;
235 user-select: text;
236 }
237
238 .block-editor-block-list__layout .block-editor-block-list__block {
239 position: relative;
240 overflow-wrap: break-word;
241 pointer-events: auto;
242 }
243 .block-editor-block-list__layout .block-editor-block-list__block.is-editing-disabled {
244 pointer-events: none;
245 }
246 .block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.is-selected, .block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.has-child-selected {
247 z-index: 20;
248 }
249 .block-editor-block-list__layout .block-editor-block-list__block {
250 /**
251 * Notices
252 */
253 }
254 .block-editor-block-list__layout .block-editor-block-list__block .components-placeholder .components-with-notices-ui {
255 margin: -10px 0 12px 0;
256 }
257 .block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui {
258 margin: 0 0 12px 0;
259 width: 100%;
260 }
261 .block-editor-block-list__layout .block-editor-block-list__block.has-warning {
262 min-height: 48px;
263 }
264 .block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
265 pointer-events: none;
266 -webkit-user-select: none;
267 -moz-user-select: none;
268 user-select: none;
269 }
270 .block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
271 pointer-events: all;
272 }
273 .block-editor-block-list__layout .block-editor-block-list__block[data-clear=true] {
274 float: none;
275 }
276 .block-editor-block-list__layout .block-editor-block-list__block:not([draggable=true]), .block-editor-block-list__layout .block-editor-block-list__block:not([data-draggable=true]) {
277 cursor: default;
278 }
279 .block-editor-block-list__layout .block-editor-block-list__block[draggable=true], .block-editor-block-list__layout .block-editor-block-list__block[data-draggable=true] {
280 cursor: grab;
281 }
282 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected {
283 cursor: default;
284 }
285 .block-editor-block-list__layout .block-editor-block-list__block[contenteditable],
286 .block-editor-block-list__layout .block-editor-block-list__block [contenteditable] {
287 cursor: text;
288 }
289
290 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected)::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.rich-text):not([contenteditable=true]).is-selected::after {
291 content: "";
292 position: absolute;
293 pointer-events: none;
294 top: 0;
295 right: 0;
296 bottom: 0;
297 left: 0;
298 outline-color: var(--wp-admin-theme-color);
299 outline-style: solid;
300 outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
301 outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
302 box-shadow: inset 0 0 0 calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
303 }
304
305 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after,
306 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-hovered::after,
307 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after,
308 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after {
309 outline-color: var(--wp-block-synced-color);
310 }
311 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
312 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
313 outline-color: var(--wp-block-synced-color);
314 }
315
316 @keyframes block-editor-is-editable__animation {
317 from {
318 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
319 }
320 to {
321 background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
322 }
323 }
324 @keyframes block-editor-is-editable__animation_reduce-motion {
325 0% {
326 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
327 }
328 99% {
329 background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
330 }
331 100% {
332 background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
333 }
334 }
335 .is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
336 animation-name: block-editor-is-editable__animation;
337 animation-duration: 0.8s;
338 animation-timing-function: ease-out;
339 animation-delay: 0.1s;
340 animation-fill-mode: backwards;
341 bottom: 0;
342 content: "";
343 left: 0;
344 pointer-events: none;
345 position: absolute;
346 right: 0;
347 top: 0;
348 }
349 @media (prefers-reduced-motion: reduce) {
350 .is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
351 animation-name: block-editor-is-editable__animation_reduce-motion;
352 animation-delay: 0s;
353 }
354 }
355
356 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
357 opacity: 0.2;
358 }
359 @media not (prefers-reduced-motion) {
360 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
361 transition: opacity 0.1s linear;
362 }
363 }
364 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) .block-editor-block-list__block, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-selected, .is-focus-mode .block-editor-block-list__block:not(.has-child-selected).is-multi-selected {
365 opacity: 1;
366 }
367
368 .is-focus-mode .block-editor-block-list__block.is-editing-content-only-section.has-child-selected, .is-focus-mode .block-editor-block-list__block.is-editing-content-only-section.has-child-selected .block-editor-block-list__block {
369 opacity: 1;
370 }
371
372 .wp-block[data-align=left] > *,
373 .wp-block[data-align=right] > *,
374 .wp-block.alignleft,
375 .wp-block.alignright {
376 z-index: 21;
377 }
378
379 .wp-site-blocks > [data-align=left] {
380 float: left;
381 margin-right: 2em;
382 }
383
384 .wp-site-blocks > [data-align=right] {
385 float: right;
386 margin-left: 2em;
387 }
388
389 .wp-site-blocks > [data-align=center] {
390 justify-content: center;
391 margin-left: auto;
392 margin-right: auto;
393 }
394
395 /**
396 * In-Canvas Inserter
397 */
398 .block-editor-block-list .block-editor-inserter {
399 margin: 8px;
400 cursor: move;
401 cursor: grab;
402 }
403
404 @keyframes block-editor-inserter__toggle__fade-in-animation {
405 from {
406 opacity: 0;
407 }
408 to {
409 opacity: 1;
410 }
411 }
412 @media not (prefers-reduced-motion) {
413 .wp-block .block-list-appender .block-editor-inserter__toggle {
414 animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
415 animation-fill-mode: forwards;
416 }
417 }
418
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 .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
428 display: block;
429 margin: 0;
430 padding: 12px;
431 width: 100%;
432 border: none;
433 outline: none;
434 border-radius: 2px;
435 box-sizing: border-box;
436 box-shadow: inset 0 0 0 1px #1e1e1e;
437 resize: none;
438 overflow: hidden;
439 font-family: Menlo, Consolas, monaco, monospace;
440 font-size: 15px;
441 line-height: 1.5;
442 /*rtl:ignore*/
443 direction: ltr;
444 }
445 @media not (prefers-reduced-motion) {
446 .block-editor-block-list__block .block-editor-block-list__block-html-textarea {
447 transition: padding 0.2s linear;
448 }
449 }
450 .block-editor-block-list__block .block-editor-block-list__block-html-textarea:focus {
451 box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
452 }
453
454 .block-editor-block-list__zoom-out-separator {
455 /* same color as the iframe's background */
456 background: #ddd;
457 margin-left: -1px;
458 margin-right: -1px;
459 }
460 @media not (prefers-reduced-motion) {
461 .block-editor-block-list__zoom-out-separator {
462 transition: background-color 0.3s ease;
463 }
464 }
465 .block-editor-block-list__zoom-out-separator {
466 display: flex;
467 align-items: center;
468 justify-content: center;
469 overflow: hidden;
470 font-size: 13px;
471 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
472 color: #000;
473 font-weight: normal;
474 }
475 .is-zoomed-out .block-editor-block-list__zoom-out-separator {
476 font-size: calc(13px / var(--wp-block-editor-iframe-zoom-out-scale));
477 }
478 .block-editor-block-list__zoom-out-separator.is-dragged-over {
479 background: #ccc;
480 }
481
482 .has-global-padding > .block-editor-block-list__zoom-out-separator,
483 .block-editor-block-list__layout.is-root-container.has-global-padding > .block-editor-block-list__zoom-out-separator {
484 max-width: none;
485 margin: 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) !important;
486 }
487
488 .is-dragging {
489 cursor: grabbing;
490 }
491
492 .is-preview-mode {
493 pointer-events: none;
494 }
495 .is-preview-mode .block-editor-block-list__block {
496 pointer-events: auto;
497 }
498 .is-preview-mode .block-editor-block-list__block > *:not(.block-editor-block-list__block) {
499 pointer-events: none;
500 }
501
502 .is-vertical .block-list-appender {
503 width: 24px;
504 margin-right: auto;
505 margin-top: 12px;
506 margin-left: 12px;
507 }
508
509 .block-list-appender > .block-editor-inserter {
510 display: block;
511 }
512
513 .block-editor-block-list__block:not(.is-selected):not(.has-child-selected):not(.block-editor-block-list__layout) .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle {
514 opacity: 0;
515 transform: scale(0);
516 }
517
518 .block-editor-block-list__block.has-block-overlay {
519 cursor: default;
520 }
521 .block-editor-block-list__block.has-block-overlay .block-editor-block-list__block {
522 pointer-events: none;
523 }
524 .block-editor-block-list__block.has-block-overlay .block-editor-block-list__block.has-block-overlay::before {
525 left: 0;
526 right: 0;
527 width: auto;
528 }
529
530 .block-editor-block-list__layout .is-dragging {
531 opacity: 0.1;
532 }
533 .block-editor-block-list__layout .is-dragging iframe {
534 pointer-events: none;
535 }
536 .block-editor-block-list__layout .is-dragging::-moz-selection {
537 background: transparent !important;
538 }
539 .block-editor-block-list__layout .is-dragging::selection {
540 background: transparent !important;
541 }
542 .block-editor-block-list__layout .is-dragging::after {
543 content: none !important;
544 }
545
546 .wp-block img:not([draggable]),
547 .wp-block svg:not([draggable]) {
548 pointer-events: none;
549 }
550
551 .block-editor-block-preview__content-iframe .block-list-appender {
552 display: none;
553 }
554
555 .block-editor-block-preview__live-content * {
556 pointer-events: none;
557 }
558 .block-editor-block-preview__live-content .block-list-appender {
559 display: none;
560 }
561 .block-editor-block-preview__live-content .components-button:disabled {
562 opacity: initial;
563 }
564 .block-editor-block-preview__live-content .components-placeholder,
565 .block-editor-block-preview__live-content .block-editor-block-list__block[data-empty=true] {
566 display: none;
567 }
568
569 .block-editor-block-variation-picker__variations,
570 .block-editor-block-variation-picker__skip,
571 .wp-block-group-placeholder__variations {
572 list-style: none;
573 display: flex;
574 justify-content: flex-start;
575 flex-direction: row;
576 flex-wrap: wrap;
577 width: 100%;
578 padding: 0;
579 margin: 0;
580 gap: 8px;
581 font-size: 12px;
582 }
583 .block-editor-block-variation-picker__variations svg,
584 .block-editor-block-variation-picker__skip svg,
585 .wp-block-group-placeholder__variations svg {
586 fill: #949494 !important;
587 }
588 .block-editor-block-variation-picker__variations .components-button,
589 .block-editor-block-variation-picker__skip .components-button,
590 .wp-block-group-placeholder__variations .components-button {
591 padding: 4px;
592 }
593 .block-editor-block-variation-picker__variations .components-button:hover,
594 .block-editor-block-variation-picker__skip .components-button:hover,
595 .wp-block-group-placeholder__variations .components-button:hover {
596 background: none !important;
597 }
598 .block-editor-block-variation-picker__variations .components-button:hover svg,
599 .block-editor-block-variation-picker__skip .components-button:hover svg,
600 .wp-block-group-placeholder__variations .components-button:hover svg {
601 fill: var(--wp-admin-theme-color) !important;
602 }
603 .block-editor-block-variation-picker__variations > li,
604 .block-editor-block-variation-picker__skip > li,
605 .wp-block-group-placeholder__variations > li {
606 width: auto;
607 display: flex;
608 flex-direction: column;
609 align-items: center;
610 gap: 4px;
611 }
612
613 .block-editor-button-block-appender {
614 display: flex;
615 flex-direction: column;
616 align-items: center;
617 justify-content: center;
618 width: 100%;
619 height: auto;
620 color: #1e1e1e;
621 border-color: currentColor;
622 }
623 .is-dark-theme .block-editor-button-block-appender {
624 color: rgba(255, 255, 255, 0.65);
625 }
626 .block-editor-button-block-appender:hover {
627 color: var(--wp-admin-theme-color);
628 }
629 .block-editor-button-block-appender:active {
630 color: #000;
631 }
632
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 {
634 pointer-events: none;
635 }
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 {
637 content: "";
638 position: absolute;
639 top: 0;
640 right: 0;
641 bottom: 0;
642 left: 0;
643 pointer-events: none;
644 border: 1px dashed currentColor;
645 }
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 {
647 opacity: 0;
648 }
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 {
650 opacity: 1;
651 }
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 {
653 border: none;
654 }
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;
657 }
658 .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child::after {
659 border: none;
660 }
661 .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
662 background-color: var(--wp-admin-theme-color);
663 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
664 color: rgba(255, 255, 255, 0.65);
665 }
666 @media not (prefers-reduced-motion) {
667 .block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
668 transition: background-color 0.2s ease-in-out;
669 }
670 }
671
672 /**
673 * Default block appender.
674 *
675 * This component shows up in 3 places:
676 * - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
677 * - on the right, inside empty paragraphs
678 * - absolute positioned and blue inside nesting containers
679 */
680 .block-editor-default-block-appender {
681 clear: both;
682 margin-left: auto;
683 margin-right: auto;
684 position: relative;
685 }
686 .block-editor-default-block-appender[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
687 outline: 1px solid transparent;
688 }
689 .block-editor-default-block-appender .block-editor-default-block-appender__content {
690 opacity: 0.62;
691 text-shadow: none;
692 margin-block-start: 0;
693 margin-block-end: 0;
694 }
695 .block-editor-default-block-appender .components-drop-zone__content-icon {
696 display: none;
697 }
698 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon {
699 background: #1e1e1e;
700 color: #fff;
701 padding: 0;
702 min-width: 24px;
703 height: 24px;
704 }
705 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover {
706 color: #fff;
707 background: var(--wp-admin-theme-color);
708 }
709 @media not (prefers-reduced-motion) {
710 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon svg {
711 transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
712 }
713 }
714 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg {
715 transform: rotate(45deg);
716 }
717
718 .block-editor-default-block-appender .block-editor-inserter {
719 position: absolute;
720 top: 0;
721 right: 0;
722 line-height: 0;
723 }
724 .block-editor-default-block-appender .block-editor-inserter:disabled {
725 display: none;
726 }
727
728 /**
729 * Fixed position appender (right bottom corner).
730 *
731 * These styles apply to all in-canvas inserters. All in-canvas inserters always
732 * exist within a block.
733 */
734 .block-editor-block-list__block .block-list-appender {
735 position: absolute;
736 list-style: none;
737 padding: 0;
738 z-index: 2;
739 bottom: 0;
740 right: 0;
741 }
742 .block-editor-block-list__block .block-list-appender.block-list-appender {
743 margin: 0;
744 line-height: 0;
745 }
746 .block-editor-block-list__block .block-list-appender .block-editor-inserter:disabled {
747 display: none;
748 }
749 .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
750 height: 24px;
751 }
752 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
753 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
754 background: #1e1e1e;
755 color: #fff;
756 padding: 0;
757 min-width: 24px;
758 height: 24px;
759 }
760 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
761 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle:hover {
762 color: #fff;
763 background: var(--wp-admin-theme-color);
764 }
765 @media not (prefers-reduced-motion) {
766 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon svg,
767 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle svg {
768 transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
769 }
770 }
771 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg,
772 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle.is-pressed svg {
773 transform: rotate(45deg);
774 }
775 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
776 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
777 flex-direction: row;
778 box-shadow: none;
779 width: 24px;
780 display: none;
781 padding: 0 !important;
782 }
783 .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content {
784 display: none;
785 }
786 .block-editor-block-list__block .block-list-appender:only-child {
787 position: relative;
788 right: auto;
789 align-self: center;
790 list-style: none;
791 line-height: inherit;
792 }
793 .block-editor-block-list__block .block-list-appender:only-child .block-editor-default-block-appender__content {
794 display: block;
795 }
796
797 .block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
798 .block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle,
799 .block-editor-block-list__block.is-selected > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
800 .block-editor-block-list__block.is-selected > .block-list-appender .block-list-appender__toggle {
801 display: flex;
802 }
803
804 .block-editor-default-block-appender__content {
805 cursor: text;
806 }
807
808 .block-editor-iframe__body {
809 position: relative;
810 }
811
812 .block-editor-iframe__html {
813 transform-origin: top center;
814 }
815 @media not (prefers-reduced-motion) {
816 .block-editor-iframe__html {
817 transition: background-color 400ms;
818 }
819 }
820 .block-editor-iframe__html.zoom-out-animation {
821 position: fixed;
822 left: 0;
823 right: 0;
824 top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0px));
825 bottom: 0;
826 overflow-y: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
827 }
828 .block-editor-iframe__html.is-zoomed-out {
829 transform: translateX(calc((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
830 scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
831 background-color: var(--wp-editor-canvas-background);
832 margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale, 1))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1)) + 2px));
833 padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
834 padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
835 }
836 .block-editor-iframe__html.is-zoomed-out body {
837 min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size, 0px) / var(--wp-block-editor-iframe-zoom-out-scale, 1))) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
838 }
839 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
840 flex: 1;
841 display: flex;
842 flex-direction: column;
843 height: 100%;
844 }
845 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) > main {
846 flex: 1;
847 }
848 .block-editor-iframe__html.is-zoomed-out .wp-block[draggable] {
849 cursor: grab;
850 }
851
852 .block-editor-media-placeholder__cancel-button.is-link {
853 margin: 1em;
854 display: block;
855 }
856
857 .block-editor-media-placeholder.is-appender {
858 min-height: 0;
859 }
860 .block-editor-media-placeholder.is-appender:hover {
861 cursor: var(--wpds-cursor-control, pointer);
862 box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
863 }
864
865 .block-editor-plain-text {
866 box-shadow: none;
867 font-family: inherit;
868 font-size: inherit;
869 color: inherit;
870 line-height: inherit;
871 border: none;
872 padding: 0;
873 margin: 0;
874 width: 100%;
875 }
876
877 .rich-text [data-rich-text-placeholder] {
878 pointer-events: none;
879 }
880 .rich-text [data-rich-text-placeholder]::after {
881 content: attr(data-rich-text-placeholder);
882 opacity: 0.62;
883 text-shadow: none;
884 }
885 .rich-text:focus {
886 outline: none;
887 }
888
889 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
890 opacity: 0.8;
891 }
892
893 [data-rich-text-script] {
894 display: inline;
895 }
896 [data-rich-text-script]::before {
897 content: "</>";
898 background: rgb(255, 255, 0);
899 }
900
901 [data-rich-text-comment],
902 [data-rich-text-format-boundary] {
903 border-radius: 2px;
904 }
905
906 [data-rich-text-comment] {
907 background-color: currentColor;
908 }
909 [data-rich-text-comment] span {
910 filter: invert(100%);
911 color: currentColor;
912 padding: 0 2px;
913 }
914
915 .rich-text [contenteditable=false]::-moz-selection {
916 background-color: transparent;
917 }
918
919 .rich-text [contenteditable=false]::selection {
920 background-color: transparent;
921 }
922
923 .block-editor-warning {
924 align-items: center;
925 display: flex;
926 flex-wrap: wrap;
927 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
928 padding: 1em;
929 border: 1px solid #1e1e1e;
930 border-radius: 2px;
931 background-color: #fff;
932 }
933 .block-editor-warning .block-editor-warning__message {
934 line-height: 1.4;
935 font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
936 font-size: 13px;
937 color: #1e1e1e;
938 margin: 0;
939 }
940 .block-editor-warning p.block-editor-warning__message.block-editor-warning__message {
941 min-height: auto;
942 }
943 .block-editor-warning .block-editor-warning__contents {
944 display: flex;
945 flex-direction: row;
946 justify-content: space-between;
947 flex-wrap: wrap;
948 align-items: baseline;
949 width: 100%;
950 gap: 12px;
951 }
952 .block-editor-warning .block-editor-warning__actions {
953 align-items: center;
954 display: flex;
955 gap: 8px;
956 }
957
958 .components-popover.block-editor-warning__dropdown {
959 z-index: 99998;
960 }