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

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

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