@wordpress/block-editor
Version:
1,052 lines (993 loc) • 36.7 kB
CSS
/**
* Typography
*/
/**
* SCSS Variables.
*
* Please use variables from this sheet to ensure consistency across the UI.
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
*/
/**
* Colors
*/
/**
* Fonts & basic variables.
*/
/**
* Typography
*/
/**
* Grid System.
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
*/
/**
* Radius scale.
*/
/**
* Elevation scale.
*/
/**
* Dimensions.
*/
/**
* Mobile specific styles
*/
/**
* Editor styles.
*/
/**
* Block & Editor UI.
*/
/**
* Block paddings.
*/
/**
* React Native specific.
* These variables do not appear to be used anywhere else.
*/
/**
* Breakpoints & Media Queries
*/
/**
* Converts a hex value into the rgb equivalent.
*
* @param {string} hex - the hexadecimal value to convert
* @return {string} comma separated rgb values
*/
/**
* Long content fade mixin
*
* Creates a fading overlay to signify that the content is longer
* than the space allows.
*/
/**
* Breakpoint mixins
*/
/**
* Focus styles.
*/
/**
* Applies editor left position to the selector passed as argument
*/
/**
* Styles that are reused verbatim in a few places
*/
/**
* Allows users to opt-out of animations via OS-level preferences.
*/
/**
* Reset default styles for JavaScript UI based pages.
* This is a WP-admin agnostic reset
*/
/**
* Reset the WP Admin page styles for Gutenberg-like pages.
*/
:root {
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122, 0, 223;
--wp-bound-block-color: var(--wp-block-synced-color);
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0, 124, 186;
--wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
--wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
--wp-admin-border-width-focus: 2px;
}
@media (min-resolution: 192dpi) {
:root {
--wp-admin-border-width-focus: 1.5px;
}
}
.block-editor-block-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.block-editor-block-icon.has-colors svg {
fill: currentColor;
}
@media (forced-colors: active) {
.block-editor-block-icon.has-colors svg {
fill: CanvasText;
}
}
.block-editor-block-icon svg {
min-width: 20px;
min-height: 20px;
max-width: 24px;
max-height: 24px;
}
.block-editor-block-styles .block-editor-block-list__block {
margin: 0;
}
/**
* Cross-Block Selection
*/
@keyframes selection-overlay__fade-in-animation {
from {
opacity: 0;
}
to {
opacity: 0.4;
}
}
/* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
_::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
_::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .block-editor-block-list__layout::selection {
background-color: transparent;
}
/* stylelint-enable */
.block-editor-block-list__layout {
position: relative;
}
.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 {
background: transparent;
}
.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
content: "";
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--wp-admin-theme-color);
opacity: 0.4;
}
@media not (prefers-reduced-motion) {
.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
animation: selection-overlay__fade-in-animation 0.1s ease-out;
animation-fill-mode: forwards;
}
}
.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after {
outline: 2px solid transparent;
}
.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected).is-highlighted::after {
outline-color: transparent;
}
.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus {
outline: none;
}
.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after,
.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
content: "";
position: absolute;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
outline-color: var(--wp-admin-theme-color);
outline-style: solid;
outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
z-index: 1;
}
.block-editor-block-list__layout .block-editor-block-list__block.is-block-hidden {
visibility: hidden;
overflow: hidden;
height: 0;
border: none ;
padding: 0 ;
}
.block-editor-block-list__layout.is-layout-flex:not(.is-vertical) > .is-block-hidden {
width: 0;
height: auto;
align-self: stretch;
white-space: nowrap ;
}
.block-editor-block-list__layout [class^=components-] {
-webkit-user-select: text;
user-select: text;
}
.block-editor-block-list__layout .block-editor-block-list__block {
position: relative;
overflow-wrap: break-word;
pointer-events: auto;
}
.block-editor-block-list__layout .block-editor-block-list__block.is-editing-disabled {
pointer-events: none;
}
.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 {
z-index: 20;
}
.block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
z-index: 1;
}
.block-editor-block-list__layout .block-editor-block-list__block {
/**
* Notices
*/
}
.block-editor-block-list__layout .block-editor-block-list__block .components-placeholder .components-with-notices-ui {
margin: -10px 0 12px 0;
}
.block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui {
margin: 0 0 12px 0;
width: 100%;
}
.block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
font-size: 13px;
}
.block-editor-block-list__layout .block-editor-block-list__block.has-warning {
min-height: 48px;
}
.block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
pointer-events: all;
}
.block-editor-block-list__layout .block-editor-block-list__block.has-warning::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.4);
}
.block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-multi-selected::after {
background-color: transparent;
}
.block-editor-block-list__layout .block-editor-block-list__block.is-reusable.has-child-selected::after {
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
}
.block-editor-block-list__layout .block-editor-block-list__block[data-clear=true] {
float: none;
}
.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]) {
cursor: default;
}
.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] {
cursor: grab;
}
.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected {
cursor: default;
}
.block-editor-block-list__layout .block-editor-block-list__block[contenteditable],
.block-editor-block-list__layout .block-editor-block-list__block [contenteditable] {
cursor: text;
}
.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 {
content: "";
position: absolute;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
outline-color: var(--wp-admin-theme-color);
outline-style: solid;
outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
}
.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,
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-hovered::after,
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after,
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after {
outline-color: var(--wp-block-synced-color);
}
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
outline-color: var(--wp-block-synced-color);
}
@keyframes block-editor-is-editable__animation {
from {
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
}
to {
background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
}
}
@keyframes block-editor-is-editable__animation_reduce-motion {
0% {
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
}
99% {
background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
}
100% {
background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
}
}
.is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
animation-name: block-editor-is-editable__animation;
animation-duration: 0.8s;
animation-timing-function: ease-out;
animation-delay: 0.1s;
animation-fill-mode: backwards;
bottom: 0;
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
@media (prefers-reduced-motion: reduce) {
.is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
animation-name: block-editor-is-editable__animation_reduce-motion;
animation-delay: 0s;
}
}
.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
opacity: 0.2;
}
@media not (prefers-reduced-motion) {
.is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
transition: opacity 0.1s linear;
}
}
.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 {
opacity: 1;
}
.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 {
opacity: 1;
}
.wp-block[data-align=left] > *,
.wp-block[data-align=right] > *,
.wp-block.alignleft,
.wp-block.alignright {
z-index: 21;
}
.wp-site-blocks > [data-align=left] {
float: left;
margin-right: 2em;
}
.wp-site-blocks > [data-align=right] {
float: right;
margin-left: 2em;
}
.wp-site-blocks > [data-align=center] {
justify-content: center;
margin-left: auto;
margin-right: auto;
}
/**
* In-Canvas Inserter
*/
.block-editor-block-list .block-editor-inserter {
margin: 8px;
cursor: move;
cursor: grab;
}
@keyframes block-editor-inserter__toggle__fade-in-animation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media not (prefers-reduced-motion) {
.wp-block .block-list-appender .block-editor-inserter__toggle {
animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
animation-fill-mode: forwards;
}
}
.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender {
display: none;
}
.block-editor-block-list__block:not(.is-selected):not(.has-child-selected) .block-editor-default-block-appender .block-editor-inserter__toggle {
opacity: 0;
transform: scale(0);
}
.block-editor-block-list__block .block-editor-block-list__block-html-textarea {
display: block;
margin: 0;
padding: 12px;
width: 100%;
border: none;
outline: none;
border-radius: 2px;
box-sizing: border-box;
box-shadow: inset 0 0 0 1px #1e1e1e;
resize: none;
overflow: hidden;
font-family: Menlo, Consolas, monaco, monospace;
font-size: 15px;
line-height: 1.5;
}
@media not (prefers-reduced-motion) {
.block-editor-block-list__block .block-editor-block-list__block-html-textarea {
transition: padding 0.2s linear;
}
}
.block-editor-block-list__block .block-editor-block-list__block-html-textarea:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
/**
* Warnings.
*/
.block-editor-block-list__block .block-editor-warning {
z-index: 5;
position: relative;
}
.block-editor-block-list__block .block-editor-warning.block-editor-block-list__block-crash-warning {
margin-bottom: auto;
}
.block-editor-block-list__zoom-out-separator {
/* same color as the iframe's background */
background: #ddd;
margin-left: -1px;
margin-right: -1px;
}
@media not (prefers-reduced-motion) {
.block-editor-block-list__zoom-out-separator {
transition: background-color 0.3s ease;
}
}
.block-editor-block-list__zoom-out-separator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 13px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
color: #000;
font-weight: normal;
}
.is-zoomed-out .block-editor-block-list__zoom-out-separator {
font-size: calc(13px / var(--wp-block-editor-iframe-zoom-out-scale));
}
.block-editor-block-list__zoom-out-separator.is-dragged-over {
background: #ccc;
}
.has-global-padding > .block-editor-block-list__zoom-out-separator,
.block-editor-block-list__layout.is-root-container.has-global-padding > .block-editor-block-list__zoom-out-separator {
max-width: none;
margin: 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) ;
}
.is-dragging {
cursor: grabbing;
}
.is-vertical .block-list-appender {
width: 24px;
margin-right: auto;
margin-top: 12px;
margin-left: 12px;
}
.block-list-appender > .block-editor-inserter {
display: block;
}
.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 {
opacity: 0;
transform: scale(0);
}
.block-editor-block-list__block.has-block-overlay {
cursor: default;
}
.block-editor-block-list__block.has-block-overlay .block-editor-block-list__block {
pointer-events: none;
}
.block-editor-block-list__block.has-block-overlay .block-editor-block-list__block.has-block-overlay::before {
left: 0;
right: 0;
width: auto;
}
.block-editor-block-list__layout .is-dragging {
opacity: 0.1;
}
.block-editor-block-list__layout .is-dragging iframe {
pointer-events: none;
}
.block-editor-block-list__layout .is-dragging::selection {
background: transparent ;
}
.block-editor-block-list__layout .is-dragging::after {
content: none ;
}
.wp-block img:not([draggable]),
.wp-block svg:not([draggable]) {
pointer-events: none;
}
.block-editor-block-preview__content-iframe .block-list-appender {
display: none;
}
.block-editor-block-preview__live-content * {
pointer-events: none;
}
.block-editor-block-preview__live-content .block-list-appender {
display: none;
}
.block-editor-block-preview__live-content .components-button:disabled {
opacity: initial;
}
.block-editor-block-preview__live-content .components-placeholder,
.block-editor-block-preview__live-content .block-editor-block-list__block[data-empty=true] {
display: none;
}
.block-editor-block-variation-picker__variations,
.block-editor-block-variation-picker__skip,
.wp-block-group-placeholder__variations {
list-style: none;
display: flex;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
padding: 0;
margin: 0;
gap: 8px;
font-size: 12px;
}
.block-editor-block-variation-picker__variations svg,
.block-editor-block-variation-picker__skip svg,
.wp-block-group-placeholder__variations svg {
fill: #949494 ;
}
.block-editor-block-variation-picker__variations .components-button,
.block-editor-block-variation-picker__skip .components-button,
.wp-block-group-placeholder__variations .components-button {
padding: 4px;
}
.block-editor-block-variation-picker__variations .components-button:hover,
.block-editor-block-variation-picker__skip .components-button:hover,
.wp-block-group-placeholder__variations .components-button:hover {
background: none ;
}
.block-editor-block-variation-picker__variations .components-button:hover svg,
.block-editor-block-variation-picker__skip .components-button:hover svg,
.wp-block-group-placeholder__variations .components-button:hover svg {
fill: var(--wp-admin-theme-color) ;
}
.block-editor-block-variation-picker__variations > li,
.block-editor-block-variation-picker__skip > li,
.wp-block-group-placeholder__variations > li {
width: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.block-editor-button-block-appender {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
color: #1e1e1e;
box-shadow: inset 0 0 0 1px #1e1e1e;
}
.is-dark-theme .block-editor-button-block-appender {
color: rgba(255, 255, 255, 0.65);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
.block-editor-button-block-appender:hover {
color: var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
}
.block-editor-button-block-appender:focus {
box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
}
.block-editor-button-block-appender:active {
color: #000;
}
.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 {
pointer-events: none;
}
.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 {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
border: 1px dashed currentColor;
}
.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 {
opacity: 0;
}
.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 {
opacity: 1;
}
.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 {
border: none;
}
.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 {
visibility: visible;
}
.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block > .block-list-appender:only-child::after {
border: none;
}
.block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
background-color: var(--wp-admin-theme-color);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
color: rgba(255, 255, 255, 0.65);
}
@media not (prefers-reduced-motion) {
.block-list-appender:only-child.is-drag-over .block-editor-button-block-appender {
transition: background-color 0.2s ease-in-out;
}
}
/**
* Default block appender.
*
* This component shows up in 3 places:
* - the black plus that sits at the end of the canvas, if the last block isn't a paragraph
* - on the right, inside empty paragraphs
* - absolute positioned and blue inside nesting containers
*/
.block-editor-default-block-appender {
clear: both;
margin-left: auto;
margin-right: auto;
position: relative;
}
.block-editor-default-block-appender[data-root-client-id=""] .block-editor-default-block-appender__content:hover {
outline: 1px solid transparent;
}
.block-editor-default-block-appender .block-editor-default-block-appender__content {
opacity: 0.62;
margin-block-start: 0;
margin-block-end: 0;
}
.block-editor-default-block-appender .components-drop-zone__content-icon {
display: none;
}
.block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon {
background: #1e1e1e;
color: #fff;
padding: 0;
min-width: 24px;
height: 24px;
}
.block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover {
color: #fff;
background: var(--wp-admin-theme-color);
}
.block-editor-default-block-appender .block-editor-inserter {
position: absolute;
top: 0;
right: 0;
line-height: 0;
}
.block-editor-default-block-appender .block-editor-inserter:disabled {
display: none;
}
/**
* Fixed position appender (right bottom corner).
*
* These styles apply to all in-canvas inserters. All in-canvas inserters always
* exist within a block.
*/
.block-editor-block-list__block .block-list-appender {
position: absolute;
list-style: none;
padding: 0;
z-index: 2;
bottom: 0;
right: 0;
}
.block-editor-block-list__block .block-list-appender.block-list-appender {
margin: 0;
line-height: 0;
}
.block-editor-block-list__block .block-list-appender .block-editor-inserter:disabled {
display: none;
}
.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender {
height: 24px;
}
.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
.block-editor-block-list__block .block-list-appender .block-list-appender__toggle {
flex-direction: row;
box-shadow: none;
height: 24px;
width: 24px;
min-width: 24px;
display: none;
padding: 0 ;
background: #1e1e1e;
color: #fff;
}
.block-editor-block-list__block .block-list-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
.block-editor-block-list__block .block-list-appender .block-list-appender__toggle:hover {
color: #fff;
background: var(--wp-admin-theme-color);
}
.block-editor-block-list__block .block-list-appender .block-editor-default-block-appender__content {
display: none;
}
.block-editor-block-list__block .block-list-appender:only-child {
position: relative;
right: auto;
align-self: center;
list-style: none;
line-height: inherit;
}
.block-editor-block-list__block .block-list-appender:only-child .block-editor-default-block-appender__content {
display: block;
}
.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
.block-editor-block-list__block.is-selected .block-editor-block-list__layout > .block-list-appender .block-list-appender__toggle,
.block-editor-block-list__block.is-selected > .block-list-appender .block-editor-inserter__toggle.components-button.has-icon,
.block-editor-block-list__block.is-selected > .block-list-appender .block-list-appender__toggle {
display: flex;
}
.block-editor-default-block-appender__content {
cursor: text;
}
.block-editor-iframe__body {
position: relative;
}
.block-editor-iframe__html {
transform-origin: top center;
}
@media not (prefers-reduced-motion) {
.block-editor-iframe__html {
transition: background-color 400ms;
}
}
.block-editor-iframe__html.zoom-out-animation {
position: fixed;
left: 0;
right: 0;
top: calc(-1 * var(--wp-block-editor-iframe-zoom-out-scroll-top, 0));
bottom: 0;
overflow-y: var(--wp-block-editor-iframe-zoom-out-overflow-behavior, scroll);
}
.block-editor-iframe__html.is-zoomed-out {
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)));
scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
background-color: var(--wp-editor-canvas-background);
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));
padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size, 0) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
}
.block-editor-iframe__html.is-zoomed-out body {
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));
}
.block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
flex: 1;
display: flex;
flex-direction: column;
height: 100%;
}
.block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) > main {
flex: 1;
}
.block-editor-iframe__html.is-zoomed-out .wp-block[draggable] {
cursor: grab;
}
.block-editor-media-placeholder__cancel-button.is-link {
margin: 1em;
display: block;
}
.block-editor-media-placeholder.is-appender {
min-height: 0;
}
.block-editor-media-placeholder.is-appender:hover {
cursor: pointer;
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
}
.block-editor-plain-text {
box-shadow: none;
font-family: inherit;
font-size: inherit;
color: inherit;
line-height: inherit;
border: none;
padding: 0;
margin: 0;
width: 100%;
}
.rich-text [data-rich-text-placeholder] {
pointer-events: none;
}
.rich-text [data-rich-text-placeholder]::after {
content: attr(data-rich-text-placeholder);
opacity: 0.62;
}
.rich-text:focus {
outline: none;
}
figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
opacity: 0.8;
}
[data-rich-text-script] {
display: inline;
}
[data-rich-text-script]::before {
content: "</>";
background: rgb(255, 255, 0);
}
[data-rich-text-comment],
[data-rich-text-format-boundary] {
border-radius: 2px;
}
[data-rich-text-comment] {
background-color: currentColor;
}
[data-rich-text-comment] span {
filter: invert(100%);
color: currentColor;
padding: 0 2px;
}
.rich-text [contenteditable=false]::selection {
background-color: transparent;
}
.block-editor-warning {
align-items: center;
display: flex;
flex-wrap: wrap;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
padding: 1em;
border: 1px solid #1e1e1e;
border-radius: 2px;
background-color: #fff;
}
.block-editor-warning .block-editor-warning__message {
line-height: 1.4;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
color: #1e1e1e;
margin: 0;
}
.block-editor-warning p.block-editor-warning__message.block-editor-warning__message {
min-height: auto;
}
.block-editor-warning .block-editor-warning__contents {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: baseline;
width: 100%;
gap: 12px;
}
.block-editor-warning .block-editor-warning__actions {
align-items: center;
display: flex;
gap: 8px;
}
.components-popover.block-editor-warning__dropdown {
z-index: 99998;
}
body.admin-color-light {
--wp-admin-theme-color: #0085ba;
--wp-admin-theme-color--rgb: 0, 133, 186;
--wp-admin-theme-color-darker-10: rgb(0, 114.7661290323, 160.5);
--wp-admin-theme-color-darker-10--rgb: 0, 114.7661290323, 160.5;
--wp-admin-theme-color-darker-20: rgb(0, 96.5322580645, 135);
--wp-admin-theme-color-darker-20--rgb: 0, 96.5322580645, 135;
--wp-admin-border-width-focus: 2px;
}
@media (min-resolution: 192dpi) {
body.admin-color-light {
--wp-admin-border-width-focus: 1.5px;
}
}
body.admin-color-modern {
--wp-admin-theme-color: #3858e9;
--wp-admin-theme-color--rgb: 56, 88, 233;
--wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
--wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
--wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
--wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
--wp-admin-border-width-focus: 2px;
}
@media (min-resolution: 192dpi) {
body.admin-color-modern {
--wp-admin-border-width-focus: 1.5px;
}
}
body.admin-color-blue {
--wp-admin-theme-color: #096484;
--wp-admin-theme-color--rgb: 9, 100, 132;
--wp-admin-theme-color-darker-10: rgb(7.3723404255, 81.914893617, 108.1276595745);
--wp-admin-theme-color-darker-10--rgb: 7.3723404255, 81.914893617, 108.1276595745;
--wp-admin-theme-color-darker-20: rgb(5.7446808511, 63.829787234, 84.2553191489);
--wp-admin-theme-color-darker-20--rgb: 5.7446808511, 63.829787234, 84.2553191489;
--wp-admin-border-width-focus: 2px;
}
@media (min-resolution: 192dpi) {
body.admin-color-blue {
--wp-admin-border-width-focus: 1.5px;
}
}
body.admin-color-coffee {
--wp-admin-theme-color: #46403c;
--wp-admin-theme-color--rgb: 70, 64, 60;
--wp-admin-theme-color-darker-10: rgb(56.2692307692, 51.4461538462, 48.2307692308);
--wp-admin-theme-color-darker-10--rgb: 56.2692307692, 51.4461538462, 48.2307692308;
--wp-admin-theme-color-darker-20: rgb(42.5384615385, 38.8923076923, 36.4615384615);
--wp-admin-theme-color-darker-20--rgb: 42.5384615385, 38.8923076923, 36.4615384615;
--wp-admin-border-width-focus: 2px;
}
@media (min-resolution: 192dpi) {
body.admin-color-coffee {
--wp-admin-border-width-focus: 1.5px;
}
}
body.admin-color-ectoplasm {
--wp-admin-theme-color: #523f6d;
--wp-admin-theme-color--rgb: 82, 63, 109;
--wp-admin-theme-color-darker-10: rgb(69.8430232558, 53.6598837209, 92.8401162791);
--wp-admin-theme-color-darker-10--rgb: 69.8430232558, 53.6598837209, 92.8401162791;
--wp-admin-theme-color-darker-20: rgb(57.6860465116, 44.3197674419, 76.6802325581);
--wp-admin-theme-color-darker-20--rgb: 57.6860465116, 44.3197674419, 76.6802325581;
--wp-admin-border-width-focus: 2px;
}
@media (min-resolution: 192dpi) {
body.admin-color-ectoplasm {
--wp-admin-border-width-focus: 1.5px;
}
}
body.admin-color-midnight {
--wp-admin-theme-color: #e14d43;
--wp-admin-theme-color--rgb: 225, 77, 67;
--wp-admin-theme-color-darker-10: rgb(221.4908256881, 56.1788990826, 45.0091743119);
--wp-admin-theme-color-darker-10--rgb: 221.4908256881, 56.1788990826, 45.0091743119;
--wp-admin-theme-color-darker-20: rgb(207.8348623853, 44.2201834862, 33.1651376147);
--wp-admin-theme-color-darker-20--rgb: 207.8348623853, 44.2201834862, 33.1651376147;
--wp-admin-border-width-focus: 2px;
}
@media (min-resolution: 192dpi) {
body.admin-color-midnight {
--wp-admin-border-width-focus: 1.5px;
}
}
body.admin-color-ocean {
--wp-admin-theme-color: #627c83;
--wp-admin-theme-color--rgb: 98, 124, 131;
--wp-admin-theme-color-darker-10: rgb(87.0873362445, 110.192139738, 116.4126637555);
--wp-admin-theme-color-darker-10--rgb: 87.0873362445, 110.192139738, 116.4126637555;
--wp-admin-theme-color-darker-20: rgb(76.1746724891, 96.384279476, 101.8253275109);
--wp-admin-theme-color-darker-20--rgb: 76.1746724891, 96.384279476, 101.8253275109;
--wp-admin-border-width-focus: 2px;
}
@media (min-resolution: 192dpi) {
body.admin-color-ocean {
--wp-admin-border-width-focus: 1.5px;
}
}
body.admin-color-sunrise {
--wp-admin-theme-color: #dd823b;
--wp-admin-theme-color--rgb: 221, 130, 59;
--wp-admin-theme-color-darker-10: rgb(216.8782608696, 116.1847826087, 37.6217391304);
--wp-admin-theme-color-darker-10--rgb: 216.8782608696, 116.1847826087, 37.6217391304;
--wp-admin-theme-color-darker-20: rgb(195.147826087, 104.5434782609, 33.852173913);
--wp-admin-theme-color-darker-20--rgb: 195.147826087, 104.5434782609, 33.852173913;
--wp-admin-border-width-focus: 2px;
}
@media (min-resolution: 192dpi) {
body.admin-color-sunrise {
--wp-admin-border-width-focus: 1.5px;
}
}