* 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.
#start-resizable-editor-section {
.wp-block-audio figcaption {
background-color: #32373c;
padding: 0.667em 1.333em;
overflow-wrap: break-word;
.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link:active, .wp-block-button__link:visited {
.wp-block-button__link.aligncenter {
.wp-block-button__link.alignright {
.wp-block-buttons > .wp-block-button.has-custom-width {
.wp-block-buttons > .wp-block-button.has-custom-width .wp-block-button__link {
.wp-block-buttons > .wp-block-button.wp-block-button__width-25 {
width: calc(25% - 0.5em);
.wp-block-buttons > .wp-block-button.wp-block-button__width-50 {
width: calc(50% - 0.5em);
.wp-block-buttons > .wp-block-button.wp-block-button__width-75 {
width: calc(75% - 0.5em);
.wp-block-buttons > .wp-block-button.wp-block-button__width-100 {
.wp-block-button.is-style-squared,
.wp-block-button__link.wp-block-button.is-style-squared {
.wp-block-button.no-border-radius,
.wp-block-button__link.no-border-radius {
border-radius: 0 !important;
.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
.is-style-outline > .wp-block-button__link:not(.has-text-color),
.wp-block-button__link.is-style-outline:not(.has-text-color) {
.is-style-outline > .wp-block-button__link:not(.has-background),
.wp-block-button__link.is-style-outline:not(.has-background) {
background-color: transparent;
/* stylelint-disable indentation */
.wp-block-buttons.is-vertical {
.wp-block-buttons.is-vertical > .wp-block-button {
.wp-block-buttons.is-vertical > .wp-block-button:last-child {
.wp-block-buttons > .wp-block-button {
.wp-block-buttons > .wp-block-button:last-child {
.wp-block-buttons.is-content-justification-left {
justify-content: flex-start;
.wp-block-buttons.is-content-justification-left.is-vertical {
.wp-block-buttons.is-content-justification-center {
.wp-block-buttons.is-content-justification-center.is-vertical {
.wp-block-buttons.is-content-justification-right {
justify-content: flex-end;
.wp-block-buttons.is-content-justification-right > .wp-block-button {
.wp-block-buttons.is-content-justification-right > .wp-block-button:first-child {
.wp-block-buttons.is-content-justification-right.is-vertical {
.wp-block-buttons.is-content-justification-space-between {
justify-content: space-between;
.wp-block-buttons.aligncenter {
.wp-block-buttons.alignleft .wp-block-button {
.wp-block-buttons.alignleft .wp-block-button:last-child {
.wp-block-buttons.alignright .wp-block-button {
.wp-block-buttons.alignright .wp-block-button:first-child {
.wp-block-buttons:not(.is-content-justification-space-between,
.is-content-justification-right,
.is-content-justification-left,
.is-content-justification-center) .wp-block-button.aligncenter {
/* stylelint-enable indentation */
.wp-block-calendar tbody td {
.wp-block-calendar tfoot td {
.wp-block-calendar table {
border-collapse: collapse;
.wp-block-calendar table th {
text-decoration: underline;
.wp-block-calendar table tbody,
.wp-block-calendar table caption {
.wp-block-categories.alignleft {
.wp-block-categories.alignright {
overflow-wrap: break-word;
@media (min-width: 782px) {
.wp-block-columns.has-background {
.wp-block-columns.are-vertically-aligned-top {
.wp-block-columns.are-vertically-aligned-center {
.wp-block-columns.are-vertically-aligned-bottom {
overflow-wrap: break-word;
* Individual Column Alignment
@media (max-width: 599px) {
flex-basis: 100% !important;
@media (min-width: 600px) and (max-width: 781px) {
.wp-block-column:not(:only-child) {
flex-basis: calc(50% - 1em) !important;
.wp-block-column:nth-child(even) {
@media (min-width: 782px) {
.wp-block-column[style*=flex-basis] {
.wp-block-column:not(:first-child) {
.wp-block-column.is-vertically-aligned-top {
.wp-block-column.is-vertically-aligned-center {
-ms-grid-row-align: center;
.wp-block-column.is-vertically-aligned-bottom {
.wp-block-column.is-vertically-aligned-top, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-bottom {
background-position: center center;
* Set a default background color for has-background-dim _unless_ it includes another
* background-color class (e.g. has-green-background-color). The presence of another
* background-color class implies that another style will provide the background color
* - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545
* - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545
.wp-block-cover-image.has-parallax,
.wp-block-cover.has-parallax {
background-attachment: fixed;
@supports (-webkit-overflow-scrolling: touch) {
.wp-block-cover-image.has-parallax,
.wp-block-cover.has-parallax {
background-attachment: scroll;
@media (prefers-reduced-motion: reduce) {
.wp-block-cover-image.has-parallax,
.wp-block-cover.has-parallax {
background-attachment: scroll;
.wp-block-cover-image.is-repeated,
.wp-block-cover.is-repeated {
background-repeat: repeat;
.wp-block-cover-image.has-background-dim:not([class*=-background-color]),
.wp-block-cover.has-background-dim:not([class*=-background-color]) {
.wp-block-cover-image.has-background-dim::before,
.wp-block-cover.has-background-dim::before {
background-color: inherit;
.wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before,
.wp-block-cover-image .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim:not(.has-background-gradient)::before,
.wp-block-cover .wp-block-cover__gradient-background {
.wp-block-cover-image.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,
.wp-block-cover-image.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim.has-background-dim-10:not(.has-background-gradient)::before,
.wp-block-cover.has-background-dim.has-background-dim-10 .wp-block-cover__gradient-background {
.wp-block-cover-image.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before,
.wp-block-cover-image.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim.has-background-dim-20:not(.has-background-gradient)::before,
.wp-block-cover.has-background-dim.has-background-dim-20 .wp-block-cover__gradient-background {
.wp-block-cover-image.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before,
.wp-block-cover-image.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim.has-background-dim-30:not(.has-background-gradient)::before,
.wp-block-cover.has-background-dim.has-background-dim-30 .wp-block-cover__gradient-background {
.wp-block-cover-image.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before,
.wp-block-cover-image.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim.has-background-dim-40:not(.has-background-gradient)::before,
.wp-block-cover.has-background-dim.has-background-dim-40 .wp-block-cover__gradient-background {
.wp-block-cover-image.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before,
.wp-block-cover-image.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim.has-background-dim-50:not(.has-background-gradient)::before,
.wp-block-cover.has-background-dim.has-background-dim-50 .wp-block-cover__gradient-background {
.wp-block-cover-image.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before,
.wp-block-cover-image.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim.has-background-dim-60:not(.has-background-gradient)::before,
.wp-block-cover.has-background-dim.has-background-dim-60 .wp-block-cover__gradient-background {
.wp-block-cover-image.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before,
.wp-block-cover-image.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim.has-background-dim-70:not(.has-background-gradient)::before,
.wp-block-cover.has-background-dim.has-background-dim-70 .wp-block-cover__gradient-background {
.wp-block-cover-image.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before,
.wp-block-cover-image.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim.has-background-dim-80:not(.has-background-gradient)::before,
.wp-block-cover.has-background-dim.has-background-dim-80 .wp-block-cover__gradient-background {
.wp-block-cover-image.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before,
.wp-block-cover-image.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim.has-background-dim-90:not(.has-background-gradient)::before,
.wp-block-cover.has-background-dim.has-background-dim-90 .wp-block-cover__gradient-background {
.wp-block-cover-image.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before,
.wp-block-cover-image.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background,
.wp-block-cover.has-background-dim.has-background-dim-100:not(.has-background-gradient)::before,
.wp-block-cover.has-background-dim.has-background-dim-100 .wp-block-cover__gradient-background {
.wp-block-cover-image.alignleft, .wp-block-cover-image.alignright,
.wp-block-cover.alignleft,
.wp-block-cover.alignright {
.wp-block-cover-image::after,