/*! Friendly Business Editor Styles */ /** === Includes === */ @import "sass/variables-site/variables-site"; @import "sass/mixins/mixins-master"; @import "sass/site/header/site-header"; @import "sass/navigation/menu-main-navigation"; @import "sass/typography/headings"; /** === Helper Functions === */ /** Given a string, $alignment, returns the nested FSE block selectors required for Full Site Editing to look correct. If $alignment is given, we use it to target wp-blocks with a matching data-align attribute. If no alignment is given, we target the base wp-block class. In both of these scenarios, we target top level blocks, and any top level blocks inside one of the FSE template blocks. */ @function get-block-selector($alignment) { $main-block-selector: ".wp-block"; @if $alignment != "" { $main-block-selector: ".wp-block[data-align=\"#{$alignment}\"]"; } @return " #{$main-block-selector}, .wp-block.post-content__block #{$main-block-selector}"; } /** === Editor Frame === */ body { background: $color__background-body; .wp-block[data-align="full"] { width: 100%; } @include media(mobile) { #{get-block-selector("full")} { width: calc( 100% + 90px ); max-width: calc( 100% + 90px ); } } @include media(tablet) { .editor-writing-flow { max-width: 80%; margin: 0 10%; } .editor-post-title__block, .editor-default-block-appender, .editor-block-list__block { margin-left: 0; margin-right: 0; } #{get-block-selector("wide")} { width: 100%; } #{get-block-selector("full")} { position: relative; left: calc( -12.5% - 14px ); width: calc( 125% + 116px ); max-width: calc( 125% + 115px ); // Subtract 1px here to avoid the rounding errors that happen due to the usage of percentages. } #{get-block-selector("right")} { max-width: 125%; } } } /** === Content Width === */ .wp-block { margin-left: auto; margin-right: auto; } #{get-block-selector("")} { width: calc(100vw - (2 * #{$size__spacing-unit})); max-width: 100%; @include media(tablet) { width: calc(8 * (100vw / 12)); } @include media(desktop) { width: calc(6 * (100vw / 12 )); } // Only the top level blocks need specific widths, therefore override for every nested block. .wp-block { width: 100%; } } /** === FSE Template Blocks === */ .wp-block.post-content__block { width: 100%; } /** === Base Typography === */ body { font-size: $font__size_base; font-family: $font__body; line-height: $font__line-height-body; color: $color__text-main; } p { font-size: $font__size_base; //! Font Sizes &.has-small-font-size { font-size: $font__size-sm; } &.has-normal-font-size { font-size: $font__size-md; } &.has-large-font-size { font-size: $font__size-lg; } &.has-huge-font-size { font-size: $font__size-xl; } } h1, h2, h3, h4, h5, h6 { font-family: $font__heading; font-weight: 700; text-align: center; line-height: $font__line-height-heading; margin-top: $size__vertical-spacing-unit; margin-bottom: $size__vertical-spacing-unit; .editor-inner-blocks & { margin-top: 1.375rem; margin-bottom: 1.375rem; } } h1 { font-size: $font__size-lg; @include media(tablet) { font-size: $font__size-xxl; } } h2 { font-size: $font__size-md; @include media(tablet) { font-size: $font__size-xl; } } h3 { font-size: $font__size_base; @include media(tablet) { font-size: $font__size-lg; } } h4 { font-size: $font__size-sm; @include media(tablet) { font-size: $font__size-md; } } h5 { font-size: $font__size-xs; @include media(tablet) { font-size: $font__size_base; } } h6 { font-size: $font__size-xxs; @include media(tablet) { font-size: $font__size-sm; } } a { @include link-transition; color: $color__link; *:visited { } &:hover, &:active { color: $color__link-hover; outline: 0; text-decoration: none; } &:focus { outline: 0; text-decoration: underline; } } // Use white text against these backgrounds by default. .has-primary-background-color, .has-secondary-background-color, .has-dark-gray-background-color, .has-light-gray-background-color { color: $color__background-body; p, h1, h2, h3, h4, h5, h6, a { color: $color__background-body; } } // Use dark gray text against this background by default. .has-white-background-color { color: $color__text-main; p, h1, h2, h3, h4, h5, h6, a { color: $color__text-main; } } figcaption, .gallery-caption { font-family: $font__heading; font-size: $font__size-xs; line-height: 1.6; color: $color__text-dark; } /** === Post Title === */ .editor-post-title__block { font-size: $font__size_base; &:before { width: $font__size-xxl; margin-top: 0; margin-bottom: 0; margin-left: 1em; position: relative; top: 0.5em; } .editor-post-title__input { font-family: $font__heading; font-size: $font__size-lg; @include media(tablet) { font-size: $font__size-xl; } font-weight: 700; text-align: center; } } /** === Default Appender === */ .editor-default-block-appender .editor-default-block-appender__content { font-family: $font__body; font-size: $font__size_base; } /** === Heading === */ .wp-block-heading { strong { font-weight: bolder; } } /** === Paragraph === */ .wp-block-paragraph { &.has-drop-cap:not(:focus)::first-letter { font-family: $font__heading; font-size: $font__size-xxxl; line-height: 1; font-weight: bold; margin: 0 0.25em 0 0; } } /** === Table === */ .wp-block-table { font-family: $font__heading; } /** === Cover === */ .wp-block-cover { strong { font-weight: bolder; } h1, h2, h3, h4, h5, h6 { text-align: inherit; &.has-text-align-left { text-align: left; } &.has-text-align-center { text-align: center; } &.has-text-align-right { text-align: right; } } h1 { font-size: $font__size-xl; @include media(tablet) { font-size: $font__size-xxl; } } h2, .wp-block-cover-text { font-family: $font__heading; font-size: $font__size-lg; font-weight: bold; line-height: 1.4; padding: 0; @include media(tablet) { font-size: $font__size-xl; margin-left: auto; margin-right: auto; padding: 0; } } h3 { font-size: $font__size-md; @include media(tablet) { font-size: $font__size-lg; } } h4 { font-size: $font__size_base; @include media(tablet) { font-size: $font__size-md; } } h5 { font-size: $font__size-xs; @include media(tablet) { font-size: $font__size_base; } } h6 { font-size: $font__size-xs; @include media(tablet) { font-size: $font__size-sm; } } .wp-block-cover__inner-container a { color: inherit; } @include media(tablet) { padding-left: 10%; padding-right: 10%; h2, .wp-block-cover-text { font-size: $font__size-xl; } } } .wp-block[data-type="core/cover"][data-align="left"], .wp-block[data-type="core/cover"][data-align="right"] { .editor-block-list__block-edit { width: calc(4 * (100vw / 12)); } .wp-block-cover { width: 100%; max-width: 100%; padding: calc(1.375 * #{$size__spacing-unit}); p { padding-left: 0; padding-right: 0; } @include media(tablet) { padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit}); } } } .wp-block[data-type="core/cover"][data-align="wide"], .wp-block[data-type="core/cover"][data-align="full"] { @include media(tablet) { h2, .wp-block-cover-text { max-width: 100%; } } @include media(desktop) { h2, .wp-block-cover-text { max-width: 100%; } } } .wp-block[data-type="core/cover"][data-align="full"] { @include media(tablet) { .wp-block-cover { padding-left: calc(10% + 64px); padding-right: calc(10% + 64px); } } } /** === Gallery === */ .wp-block-gallery { .blocks-gallery-image figcaption, .blocks-gallery-item figcaption, .gallery-item .gallery-caption { font-size: $font__size-xs; line-height: 1.6; } } /** === Button === */ .wp-block-button { .wp-block-button__link { line-height: 1.8; font-family: $font__heading; font-size: $font__size-sm; font-weight: bold; } &:not(.is-style-outline) .wp-block-button__link { background: $color__background-button; } &:not(.is-style-squared) .wp-block-button__link { border-radius: 5px; } &.is-style-outline, &.is-style-outline:hover, &.is-style-outline:focus, &.is-style-outline:active { background: transparent; color: $color__background-button; .wp-block-button__link { background: transparent; &:not(.has-text-color) { color: $color__background-button; } } } } /** === Blockquote === */ .wp-block-quote { &:not(.is-large):not(.is-style-large) { border-color: $color__link; border-width: 2px; } &.is-large, &.is-style-large { margin-top: $font__size-xxl; margin-bottom: $font__size-xxl; } &.is-large p, &.is-style-large p { font-size: $font__size-lg; line-height: 1.3; margin-bottom: 0.5em; margin-top: 0.5em; } cite, footer, .wp-block-quote__citation { font-family: $font__heading; font-size: $font__size-xs; line-height: 1.6; color: $color__text-dark; } } /** === Pullquote === */ .wp-block-pullquote { border-color: transparent; border-width: 2px; color: #000; blockquote { margin-top: calc(3 * #{ $size__spacing-unit}); margin-bottom: calc(3.33 * #{ $size__spacing-unit}); hyphens: auto; word-break: break-word; } &:not(.is-style-solid-color) .wp-block-pullquote__citation { color: $color__text-dark; } &.is-style-solid-color { blockquote { width: calc(100% - (2 * #{ $size__spacing-unit})); max-width: calc( 100% - (2 * #{ $size__spacing-unit})); a, &.has-text-color p, &.has-text-color a { color: inherit; } &:not(.has-text-color) { color: $color__background-body; } @include media(tablet) { max-width: 80%; } } &:not(.has-background-color) { background-color: $color__link; } } } .wp-block[data-type="core/pullquote"], .wp-block[data-type="core/pullquote"][data-align="left"], .wp-block[data-type="core/pullquote"][data-align="right"] { blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, blockquote > .editor-rich-text p, p { font-size: $font__size-lg; font-style: italic; line-height: 1.3; margin-bottom: 0.5em; margin-top: 0.5em; @include media(tablet) { font-size: $font__size-xl; } } .wp-block-pullquote__citation { font-family: $font__heading; font-size: $font__size-xs; line-height: 1.6; text-transform: none; } em { font-style: normal; } } .wp-block[data-type="core/pullquote"][data-align="left"], .wp-block[data-type="core/pullquote"][data-align="right"] { .editor-block-list__block-edit { width: calc(4 * (100vw / 12)); max-width: 50%; .wp-block-pullquote { margin-top: 0; margin-bottom: 0; } .wp-block-pullquote { padding: 0; } .wp-block-pullquote.is-style-solid-color { blockquote { width: 100%; max-width: 100%; padding: calc(1.375 * #{$size__spacing-unit}); @include media(tablet) { padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit}); } } } } blockquote { margin: $size__spacing-unit 0; p:first-child { margin-top: 0; } } blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, blockquote > .editor-rich-text p, p, .wp-block-pullquote__citation { text-align: left; } } .wp-block[data-type="core/pullquote"][data-align="full"] { @include media(tablet) { .wp-block-pullquote blockquote { max-width: calc(80% - 128px); } } } /** === File === */ .wp-block-file { font-family: $font__heading; .wp-block-file__textlink { text-decoration: underline; color: $color__link; &:hover { color: $color__link-hover; text-decoration: none; } } .wp-block-file__button { display: table; line-height: 1.8; font-size: $font__size-sm; font-weight: bold; background-color: $color__link; border-radius: 5px; } .wp-block-file__button-richtext-wrapper { display: block; margin-top: calc(0.75 * #{$size__spacing-unit}); margin-left: 0; } } /** === Verse === */ .wp-block-verse, .wp-block-verse pre { padding: 0; } /** === Code === */ .wp-block-code { border-radius: 0; } /** === Media & Text === */ .wp-block[data-type="core/media-text"] { .wp-block-media-text { background: $color__background-screen; border-radius: 4px; overflow: hidden; } &[data-align="full"] { .wp-block-media-text { border-radius: 0; } } .wp-block-heading { h1, h2, h3, h4, h5, h6 { text-align: inherit; } } a { color: inherit; } } /** === Table === */ .wp-block-table { td, th { border-color: $color__text-dark; } } /** === Separator === */ .wp-block-separator { &:not(.is-style-dots) { background-color: $color__text-main; border: 0; height: 3px; } &:not(.is-style-wide):not(.is-style-dots) { margin: (2 * $size__spacing-unit) auto; max-width: 10rem; } &.is-style-dots:before { color: $color__text-dark; font-size: $font__size-lg; letter-spacing: calc(2 * #{$size__spacing-unit}); padding-left: calc(2 * #{$size__spacing-unit}); } } /* Remove duplicate rule-line when a separator * is followed by an H1, or H2 */ .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] { h1, h2 { &:before { display: none; } } } /** === Latest Posts, Archives, Categories === */ ul.wp-block-archives, .wp-block-categories, .wp-block-latest-posts { padding: 0; list-style-type: none; ul { padding: 0; list-style-type: none; } li { color: $color__text-dark; font-family: $font__heading; font-size: calc(#{$font__size_base} * #{$font__size-ratio}); font-weight: bold; line-height: $font__line-height-heading; padding-bottom: ( .75 * $size__spacing-unit ); &.menu-item-has-children, &:last-child { padding-bottom: 0; } a { text-decoration: none; } ul { padding-left: $size__spacing-unit; } } } .wp-block-categories { ul { padding-top: ( .75 * $size__spacing-unit ); @include nestedSubMenuPadding(); } li ul { list-style: none; padding-left: 0; margin-bottom: ( -.75 * $size__spacing-unit ); } } /** === Latest Posts grid view === */ .wp-block-latest-posts.is-grid { li { border-top: 2px solid $color__border; padding-top: (1 * $size__spacing-unit); margin-bottom: (2 * $size__spacing-unit); a { &:after { content: ''; } } &:last-child { margin-bottom: auto; a:after { content: ''; } } } } /** === Latest Comments === */ .wp-block-latest-comments { .wp-block-latest-comments__comment-meta { font-family: $font__heading; font-weight: bold; .wp-block-latest-comments__comment-date { font-weight: normal; } } .wp-block-latest-comments__comment, .wp-block-latest-comments__comment-date, .wp-block-latest-comments__comment-excerpt p { font-size: inherit; } .wp-block-latest-comments__comment-date { font-size: $font__size-xs; } } /** === Site Header Block == **/ .wp-block-columns.site-branding { .editor-inner-blocks { width: 100%; } } /** === Classic Editor === */ /* Properly center-align captions in the classic-editor block */ .wp-caption { dd { color: $color__text-dark; font-size: $font__size-xs; font-family: $font__heading; line-height: $font__line-height-pre; margin: 0; padding: ( $size__spacing-unit * .5 ); text-align: left; text-align: center; -webkit-margin-start: 0px; margin-inline-start: 0px; } } .wp-block-freeform { /* Add style for galleries in classic-editor block */ blockquote { border-left: 2px solid $color__link; cite { font-family: $font__heading; font-size: $font__size-xs; font-style: normal; line-height: 1.6; color: $color__text-dark; } } } /* Make sure our non-latin font overrides don't overwrite the iconfont used in the classic editor toolbar */ .wp-block[data-type="core/freeform"] .mce-btn i { font-family: dashicons !important; } /** === Mailchimp Block - Temp Fix === */ .wp-block-jetpack-mailchimp { p { font-size: $font__size-xs; } } /** === Business Hours Block - Temp Fix === */ .wp-block-jetpack-business-hours { dt, dd { float: left; } dt { clear: both; font-weight: bold; margin-right: ( $size__spacing-unit * .5 ); } dd { margin: 0; } }