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

959 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 text-shadow: none;
691 margin-block-start: 0;
692 margin-block-end: 0;
693 }
694 .block-editor-default-block-appender .components-drop-zone__content-icon {
695 display: none;
696 }
697 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon {
698 background: #1e1e1e;
699 color: #fff;
700 padding: 0;
701 min-width: 24px;
702 height: 24px;
703 }
704 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover {
705 color: #fff;
706 background: var(--wp-admin-theme-color);
707 }
708 @media not (prefers-reduced-motion) {
709 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon svg {
710 transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
711 }
712 }
713 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg {
714 transform: rotate(45deg);
715 }
716
717 .block-editor-default-block-appender .block-editor-inserter {
718 position: absolute;
719 top: 0;
720 right: 0;
721 line-height: 0;
722 }
723 .block-editor-default-block-appender .block-editor-inserter:disabled {
724 display: none;
725 }
726
727 /**
728 * Fixed position appender (right bottom corner).
729 *
730 * These styles apply to all in-canvas inserters. All in-canvas inserters always
731 * exist within a block.
732 */
733 .block-editor-block-list__block .block-list-appender {
734 position: absolute;
735 list-style: none;
736 padding: 0;
737 z-index: 2;
738 bottom: 0;
739 right: 0;
740 }
741 .block-editor-block-list__block .block-list-appender.block-list-appender {
742 margin: 0;
743 line-height: 0;
744 }
745 .block-editor-block-list__block .block-list-appender .block-editor-inserter:disabled {
746 display: none;
747 }
748 .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
749 height: 24px;
750 }
751 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
752 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
753 background: #1e1e1e;
754 color: #fff;
755 padding: 0;
756 min-width: 24px;
757 height: 24px;
758 }
759 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
760 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle:hover {
761 color: #fff;
762 background: var(--wp-admin-theme-color);
763 }
764 @media not (prefers-reduced-motion) {
765 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon svg,
766 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle svg {
767 transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
768 }
769 }
770 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon.is-pressed svg,
771 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle.is-pressed svg {
772 transform: rotate(45deg);
773 }
774 .block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
775 .block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
776 flex-direction: row;
777 box-shadow: none;
778 width: 24px;
779 display: none;
780 padding: 0 !important;
781 }
782 .block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content {
783 display: none;
784 }
785 .block-editor-block-list__block .block-list-appender:only-child {
786 position: relative;
787 right: auto;
788 align-self: center;
789 list-style: none;
790 line-height: inherit;
791 }
792 .block-editor-block-list__block .block-list-appender:only-child .block-editor-default-block-appender__content {
793 display: block;
794 }
795
796 .block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
797 .block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle,
798 .block-editor-block-list__block.is-selected > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
799 .block-editor-block-list__block.is-selected > .block-list-appender .block-list-appender__toggle {
800 display: flex;
801 }
802
803 .block-editor-default-block-appender__content {
804 cursor: text;
805 }
806
807 .block-editor-iframe__body {
808 position: relative;
809 }
810
811 .block-editor-iframe__html {
812 transform-origin: top center;
813 }
814 @media not (prefers-reduced-motion) {
815 .block-editor-iframe__html {
816 transition: background-color 400ms;
817 }
818 }
819 .block-editor-iframe__html.zoom-out-animation {
820 position: fixed;
821 left: 0;
822 right: 0;
823 top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
824 bottom: 0;
825 overflow-y: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
826 }
827 .block-editor-iframe__html.is-zoomed-out {
828 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)));
829 scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
830 background-color: var(--wp-editor-canvas-background);
831 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));
832 padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
833 padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
834 }
835 .block-editor-iframe__html.is-zoomed-out body {
836 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));
837 }
838 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
839 flex: 1;
840 display: flex;
841 flex-direction: column;
842 height: 100%;
843 }
844 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) > main {
845 flex: 1;
846 }
847 .block-editor-iframe__html.is-zoomed-out .wp-block[draggable] {
848 cursor: grab;
849 }
850
851 .block-editor-media-placeholder__cancel-button.is-link {
852 margin: 1em;
853 display: block;
854 }
855
856 .block-editor-media-placeholder.is-appender {
857 min-height: 0;
858 }
859 .block-editor-media-placeholder.is-appender:hover {
860 cursor: var(--wpds-cursor-control, pointer);
861 box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
862 }
863
864 .block-editor-plain-text {
865 box-shadow: none;
866 font-family: inherit;
867 font-size: inherit;
868 color: inherit;
869 line-height: inherit;
870 border: none;
871 padding: 0;
872 margin: 0;
873 width: 100%;
874 }
875
876 .rich-text [data-rich-text-placeholder] {
877 pointer-events: none;
878 }
879 .rich-text [data-rich-text-placeholder]::after {
880 content: attr(data-rich-text-placeholder);
881 opacity: 0.62;
882 text-shadow: none;
883 }
884 .rich-text:focus {
885 outline: none;
886 }
887
888 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
889 opacity: 0.8;
890 }
891
892 [data-rich-text-script] {
893 display: inline;
894 }
895 [data-rich-text-script]::before {
896 content: "</>";
897 background: rgb(255, 255, 0);
898 }
899
900 [data-rich-text-comment],
901 [data-rich-text-format-boundary] {
902 border-radius: 2px;
903 }
904
905 [data-rich-text-comment] {
906 background-color: currentColor;
907 }
908 [data-rich-text-comment] span {
909 filter: invert(100%);
910 color: currentColor;
911 padding: 0 2px;
912 }
913
914 .rich-text [contenteditable=false]::-moz-selection {
915 background-color: transparent;
916 }
917
918 .rich-text [contenteditable=false]::selection {
919 background-color: transparent;
920 }
921
922 .block-editor-warning {
923 align-items: center;
924 display: flex;
925 flex-wrap: wrap;
926 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
927 padding: 1em;
928 border: 1px solid #1e1e1e;
929 border-radius: 2px;
930 background-color: #fff;
931 }
932 .block-editor-warning .block-editor-warning__message {
933 line-height: 1.4;
934 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
935 font-size: 13px;
936 color: #1e1e1e;
937 margin: 0;
938 }
939 .block-editor-warning p.block-editor-warning__message.block-editor-warning__message {
940 min-height: auto;
941 }
942 .block-editor-warning .block-editor-warning__contents {
943 display: flex;
944 flex-direction: row;
945 justify-content: space-between;
946 flex-wrap: wrap;
947 align-items: baseline;
948 width: 100%;
949 gap: 12px;
950 }
951 .block-editor-warning .block-editor-warning__actions {
952 align-items: center;
953 display: flex;
954 gap: 8px;
955 }
956
957 .components-popover.block-editor-warning__dropdown {
958 z-index: 99998;
959 }