* Breakpoints & Media Queries
* 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.
* Fonts & basic variables.
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
* These variables do not appear to be used anywhere else.
* Long content fade mixin
* Creates a fading overlay to signify that the content is longer
* 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.
* These are default block editor widths in case the theme doesn't provide them.
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-border-width-focus: 2px;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
--wp-admin-border-width-focus: 1.5px;
#start-resizable-editor-section {
.block-editor-autocompleters__block {
.block-editor-autocompleters__block .block-editor-block-icon {
.block-editor-block-alignment-matrix-toolbar__popover .components-popover__content {
.block-editor-block-alignment-matrix-toolbar__popover .components-popover__content > div {
.block-editor-block-icon {
.block-editor-block-icon.has-colors svg {
.block-editor-block-icon svg {
.block-editor-block-inspector .components-base-control {
.block-editor-block-inspector .components-base-control:last-child {
.block-editor-block-inspector .components-panel__body {
border-top: 1px solid #e0e0e0;
.block-editor-block-inspector .block-editor-block-card {
.block-editor-block-inspector__no-blocks {
.block-editor-block-styles .block-editor-block-list__block {
* Notices & Block Selected/Hover Styles.
.block-editor-block-list__layout .block-editor-block-list__block,
.block-editor-block-list__layout .block-list-appender {
.block-editor-block-list__layout .block-editor-block-list__block.is-drop-target::before,
.block-editor-block-list__layout .block-list-appender.is-drop-target::before {
transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
border-top: 4px solid #007cba;
border-top: 4px solid var(--wp-admin-theme-color);
.block-editor-block-list__layout .block-editor-block-list__block.is-drop-target.is-dropping-horizontally::before,
.block-editor-block-list__layout .block-list-appender.is-drop-target.is-dropping-horizontally::before {
border-left: 4px solid #007cba;
border-left: 4px solid var(--wp-admin-theme-color);
.block-editor-block-list__layout {
.is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-selected::after, .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-hovered::after,
.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after {
box-shadow: 0 0 0 2px #007cba;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
outline: 2px solid transparent;
.is-dark-theme .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-selected::after, .is-dark-theme .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-hovered::after,
.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected::after {
box-shadow: 0 0 0 2px #fff;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
.is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-selected .components-placeholder ::selection, .is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected .components-placeholder ::selection {
.is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block.is-hovered:not(.is-selected)::after {
box-shadow: 0 0 0 1px #949494;
.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
box-shadow: 0 0 0 2px #007cba;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
outline: 2px solid transparent;
outline: var(--wp-admin-border-width-focus) solid transparent;
.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::before {
transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
border-top: 4px solid #ccc;
.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
.block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::before {
border-color: var(--wp-admin-theme-color);
.is-block-moving-mode.block-editor-block-list__block-selection-button {
.block-editor-block-list__layout .block-editor-block-list__block {
overflow-wrap: break-word;
* Block styles and alignments
.block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
.block-editor-block-list__layout .block-editor-block-list__block .components-placeholder .components-with-notices-ui {
.block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui {
.block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice {
.block-editor-block-list__layout .block-editor-block-list__block .components-with-notices-ui .components-notice .components-notice__content {
.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus {
.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
box-shadow: 0 0 0 2px #007cba;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
box-shadow: 0 0 0 2px #fff;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
.block-editor-block-list__layout .block-editor-block-list__block.is-outline-mode.is-selected:not(.is-typing)::after {
box-shadow: 0 0 0 1px #1e1e1e;
.block-editor-block-list__layout .block-editor-block-list__block.is-outline-mode.is-selected:not(.is-typing):focus::after {
box-shadow: 0 0 0 2px #007cba;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
.block-editor-block-list__layout .block-editor-block-list__block.is-outline-mode.is-hovered:not(.is-typing) {
.block-editor-block-list__layout .block-editor-block-list__block.is-outline-mode.is-hovered:not(.is-typing)::after {
box-shadow: 0 0 0 1px #007cba;
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
.block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) {
transition: opacity 0.1s linear;
@media (prefers-reduced-motion: reduce) {
.block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) {
.block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected):not(.is-focused) .block-editor-block-list__block, .block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected).is-focused {
.block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode) {
transition: opacity 0.1s linear;
@media (prefers-reduced-motion: reduce) {
.block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode) {
.block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode).is-active-entity, .block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode).has-child-selected, .block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode):not(.has-child-selected) .block-editor-block-list__block, .block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode).is-active-entity .block-editor-block-list__block,
.block-editor-block-list__layout .block-editor-block-list__block.has-active-entity:not(.is-focus-mode) .is-active-entity .block-editor-block-list__block {
.block-editor-block-list__layout .block-editor-block-list__block::after {
box-shadow: 0 0 0 2px transparent;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
.block-editor-block-list__layout .block-editor-block-list__block.has-warning {
.block-editor-block-list__layout .block-editor-block-list__block.has-warning > * {
-webkit-user-select: none;
.block-editor-block-list__layout .block-editor-block-list__block.has-warning .block-editor-warning {
.block-editor-block-list__layout .block-editor-block-list__block.has-warning::after {
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 > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay::after {
.block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay .block-editor-block-list__layout.has-overlay::after {
.block-editor-block-list__layout .block-editor-block-list__block.is-reusable.has-child-selected::after {
box-shadow: 0 0 0 1px #007cba;
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
.is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block {
.block-editor-block-list__layout .block-editor-block-list__block[data-clear=true] {
.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__layout .block-editor-default-block-appender .block-editor-inserter {
.block-editor-block-list__layout .wp-block {
.wp-block[data-align=left], .wp-block[data-align=right] {
.wp-block[data-align=left]::before, .wp-block[data-align=right]::before {
.wp-block[data-align=left] > *, .wp-block[data-align=right] > * {
.wp-block[data-align=left] > * {
.wp-block[data-align=right] > * {
.wp-block[data-align=full], .wp-block[data-align=wide] {
.block-editor-block-list .block-editor-inserter {
.block-editor-block-list__insertion-point {
.block-editor-block-list__insertion-point-indicator {
background: var(--wp-admin-theme-color);
animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease;
animation-fill-mode: forwards;
@media (prefers-reduced-motion: reduce) {
.block-editor-block-list__insertion-point-indicator {
.block-editor-block-list__insertion-point.is-vertical > .block-editor-block-list__insertion-point-indicator {
.block-editor-block-list__insertion-point.is-horizontal > .block-editor-block-list__insertion-point-indicator {
.block-editor-block-list__insertion-point-inserter {
@media (min-width: 480px) {
.block-editor-block-list__insertion-point-inserter {
.block-editor-block-list__block-popover-inserter {
.block-editor-block-list__block-popover-inserter.is-visible {
.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
.block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon,
.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon,
.block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon {