PluginProbe
Gutenberg / 23.3.2
Gutenberg v23.3.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.3.2, at build/styles/block-editor/content.css

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