From 1cf6041573f325b00644b515706a1051cb3d75f7 Mon Sep 17 00:00:00 2001 From: madalingorbanescu Date: Fri, 11 Sep 2020 15:10:16 +0300 Subject: [PATCH] SCSS changes to accomodate WordPress 5.5 --- assets/scss/blocks/core/button/_style.scss | 52 +++++++++++------ assets/scss/elements/_headings.scss | 4 +- assets/scss/gutenberg-legacy-editor.scss | 18 ++++++ assets/scss/gutenberg-legacy-frontend.scss | 5 ++ assets/scss/setup/_mixins.scss | 1 + assets/scss/setup/mixins/_button.scss | 4 +- assets/scss/setup/mixins/_font-feature.scss | 7 +++ blocks.css | 46 +++++++++------ editor.css | 63 +++++++++++++-------- functions.php | 20 +++++++ gutenberg-legacy-editor.css | 7 +++ gutenberg-legacy-frontend.css | 2 + style-rtl.css | 63 +++++++++++++-------- style.css | 63 +++++++++++++-------- 14 files changed, 243 insertions(+), 112 deletions(-) create mode 100644 assets/scss/gutenberg-legacy-editor.scss create mode 100644 assets/scss/gutenberg-legacy-frontend.scss create mode 100644 assets/scss/setup/mixins/_font-feature.scss create mode 100644 gutenberg-legacy-editor.css create mode 100644 gutenberg-legacy-frontend.css diff --git a/assets/scss/blocks/core/button/_style.scss b/assets/scss/blocks/core/button/_style.scss index 7eef345..ea7e44d 100644 --- a/assets/scss/blocks/core/button/_style.scss +++ b/assets/scss/blocks/core/button/_style.scss @@ -27,50 +27,68 @@ $enable-button-block-styles: true !default; } .wp-block-button__link { - display: inline-block; @include button-base; @include button-box; @include apply-font(button); - - &:not(.has-text-color) { - @include button-color; - } + @include button-color; } - .wp-block-buttons[class] { + .wp-block-buttons[class][class][class] { + margin-top: var(--element-spacing); + display: flex; align-items: center; flex-wrap: wrap; - margin-left: calc(var(--theme-spacing) * -1); + &:first-child { + --block-top-spacing: 1; + @include element-spacing; + } + + + .wp-block, + .wp-block-button { + margin-top: 0 !important; + + &:not(:last-child), + &:not(:first-child):not(:last-child) { + margin-right: var(--element-spacing); + } + } .block-editor-block-list__layout { display: flex; align-items: center; flex-wrap: wrap; - * { + > * { margin-left: 0; margin-right: 0; } } - .wp-block, - .wp-block-button { - display: flex; - margin-left: var(--theme-spacing); - } - &.aligncenter { justify-content: center; - } - &.alignleft { - justify-content: flex-start; + .wp-block, + .wp-block-button { + margin-left: calc( var(--element-spacing) / 2 ); + margin-right: calc( var(--element-spacing) / 2 ); + } } &.alignright { justify-content: flex-end; + + .wp-block, + .wp-block-button { + margin-left: var(--element-spacing); + margin-right: 0; + } + } + + .wp-block-button__link[class] { + display: block; } } } diff --git a/assets/scss/elements/_headings.scss b/assets/scss/elements/_headings.scss index 2dfcbda..13f9cc4 100644 --- a/assets/scss/elements/_headings.scss +++ b/assets/scss/elements/_headings.scss @@ -1,8 +1,8 @@ -/* Headings */ h1, h2, h3, h4, h5, h6 { - margin: 0; + margin-bottom: 0; } + h1.has-larger-font-size { @include apply-font(display); } diff --git a/assets/scss/gutenberg-legacy-editor.scss b/assets/scss/gutenberg-legacy-editor.scss new file mode 100644 index 0000000..afae123 --- /dev/null +++ b/assets/scss/gutenberg-legacy-editor.scss @@ -0,0 +1,18 @@ +@import "setup"; + +.wp-block-buttons[class][class] { + + margin-top: 0; + + .block-editor-block-list__layout { + + > * { + margin-left: 0; + margin-right: 0; + } + } + + .wp-block-button { + margin: var(--element-spacing) var(--element-spacing) 0 0; + } +} diff --git a/assets/scss/gutenberg-legacy-frontend.scss b/assets/scss/gutenberg-legacy-frontend.scss new file mode 100644 index 0000000..26922cf --- /dev/null +++ b/assets/scss/gutenberg-legacy-frontend.scss @@ -0,0 +1,5 @@ +@import "setup"; + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} diff --git a/assets/scss/setup/_mixins.scss b/assets/scss/setup/_mixins.scss index 40da9fe..5282b9d 100644 --- a/assets/scss/setup/_mixins.scss +++ b/assets/scss/setup/_mixins.scss @@ -8,6 +8,7 @@ @import "mixins/close"; @import "mixins/cover"; @import "mixins/flex-grid"; +@import "mixins/font-feature"; @import "mixins/element-spacing"; @import "mixins/fluid"; @import "mixins/font"; diff --git a/assets/scss/setup/mixins/_button.scss b/assets/scss/setup/mixins/_button.scss index a17b300..6ac0045 100644 --- a/assets/scss/setup/mixins/_button.scss +++ b/assets/scss/setup/mixins/_button.scss @@ -196,7 +196,9 @@ transform: translate(0, -50%) scale(-1,1); } - &:hover { + &:not([disabled]):hover { + + color: var(--theme-button-text-color); &:before { transform: scale3d(0, 1, 1); diff --git a/assets/scss/setup/mixins/_font-feature.scss b/assets/scss/setup/mixins/_font-feature.scss new file mode 100644 index 0000000..ab3e2c2 --- /dev/null +++ b/assets/scss/setup/mixins/_font-feature.scss @@ -0,0 +1,7 @@ +// A mix-in for turning OpenType features on and off +// Demos of CSS OpenType features in CSS +// https://sparanoid.com/lab/opentype-features + +@mixin font-feature() { + --current-font-feature: "liga", "dlig", "onum"; +} \ No newline at end of file diff --git a/blocks.css b/blocks.css index b4b1e7a..6fdb675 100644 --- a/blocks.css +++ b/blocks.css @@ -640,7 +640,6 @@ text-align: right; } .wp-block-button__link { - display: inline-block; display: inline-block; text-decoration: none; cursor: pointer; @@ -680,37 +679,50 @@ --current-font-weight: var(--theme-button-font-weight); --current-letter-spacing: var(--theme-button-letter-spacing); --current-text-transform: var(--theme-button-text-transform); - --current-text-decoration: var(--theme-button-text-decoration); } + --current-text-decoration: var(--theme-button-text-decoration); + color: var(--current-button-text-color); } .wp-block-button__link:hover { --current-button-background-color: var(--theme-button-hover-background-color); --current-button-border-color: var(--theme-button-hover-border-color); --current-button-text-color: var(--theme-button-hover-text-color); --current-button-transition: var(--theme-button-hover-transition); } - .wp-block-button__link:not(.has-text-color) { - color: var(--current-button-text-color); } -.wp-block-buttons[class] { +.wp-block-buttons[class][class][class] { + margin-top: var(--element-spacing); display: flex; align-items: center; - flex-wrap: wrap; - margin-left: calc(var(--theme-spacing) * -1); } - .wp-block-buttons[class] .block-editor-block-list__layout { + flex-wrap: wrap; } + .wp-block-buttons[class][class][class]:first-child { + --block-top-spacing: 1; + --element-spacing: calc( var(--block-top-spacing, 1) * var(--theme-spacing-fluid-small) * var(--novablocks-element-spacing-multiplier, 1) ); } + .wp-block-buttons[class][class][class] .wp-block, + .wp-block-buttons[class][class][class] .wp-block-button { + margin-top: 0 !important; } + .wp-block-buttons[class][class][class] .wp-block:not(:last-child), .wp-block-buttons[class][class][class] .wp-block:not(:first-child):not(:last-child), + .wp-block-buttons[class][class][class] .wp-block-button:not(:last-child), + .wp-block-buttons[class][class][class] .wp-block-button:not(:first-child):not(:last-child) { + margin-right: var(--element-spacing); } + .wp-block-buttons[class][class][class] .block-editor-block-list__layout { display: flex; align-items: center; flex-wrap: wrap; } - .wp-block-buttons[class] .block-editor-block-list__layout * { + .wp-block-buttons[class][class][class] .block-editor-block-list__layout > * { margin-left: 0; margin-right: 0; } - .wp-block-buttons[class] .wp-block, - .wp-block-buttons[class] .wp-block-button { - display: flex; - margin-left: var(--theme-spacing); } - .wp-block-buttons[class].aligncenter { + .wp-block-buttons[class][class][class].aligncenter { justify-content: center; } - .wp-block-buttons[class].alignleft { - justify-content: flex-start; } - .wp-block-buttons[class].alignright { + .wp-block-buttons[class][class][class].aligncenter .wp-block, + .wp-block-buttons[class][class][class].aligncenter .wp-block-button { + margin-left: calc( var(--element-spacing) / 2); + margin-right: calc( var(--element-spacing) / 2); } + .wp-block-buttons[class][class][class].alignright { justify-content: flex-end; } + .wp-block-buttons[class][class][class].alignright .wp-block, + .wp-block-buttons[class][class][class].alignright .wp-block-button { + margin-left: var(--element-spacing); + margin-right: 0; } + .wp-block-buttons[class][class][class] .wp-block-button__link[class] { + display: block; } /* Categories Block */ .wp-block-categories { diff --git a/editor.css b/editor.css index 45e0904..6db7d1e 100644 --- a/editor.css +++ b/editor.css @@ -496,12 +496,14 @@ transform: translate(0, -50%) scale(-1, 1); transition: var(--theme-button-transition); transition-property: opacity, transform; } } - .editor-styles-wrapper .is-style-text .wp-block-button__link:hover:before { - transform: scale3d(0, 1, 1); - transform-origin: right; } - .editor-styles-wrapper .is-style-text .wp-block-button__link:hover:after { - opacity: 1; - transform: translate(0.4em, -50%) scale(-1, 1); } + .editor-styles-wrapper .is-style-text .wp-block-button__link:not([disabled]):hover { + color: var(--theme-button-text-color); } + .editor-styles-wrapper .is-style-text .wp-block-button__link:not([disabled]):hover:before { + transform: scale3d(0, 1, 1); + transform-origin: right; } + .editor-styles-wrapper .is-style-text .wp-block-button__link:not([disabled]):hover:after { + opacity: 1; + transform: translate(0.4em, -50%) scale(-1, 1); } .editor-styles-wrapper .c-headline { display: flex; @@ -720,7 +722,6 @@ .editor-styles-wrapper .wp-block-button.alignright { text-align: right; } .editor-styles-wrapper .wp-block-button__link { - display: inline-block; display: inline-block; text-decoration: none; cursor: pointer; @@ -760,36 +761,49 @@ --current-font-weight: var(--theme-button-font-weight); --current-letter-spacing: var(--theme-button-letter-spacing); --current-text-transform: var(--theme-button-text-transform); - --current-text-decoration: var(--theme-button-text-decoration); } + --current-text-decoration: var(--theme-button-text-decoration); + color: var(--current-button-text-color); } .editor-styles-wrapper .wp-block-button__link:hover { --current-button-background-color: var(--theme-button-hover-background-color); --current-button-border-color: var(--theme-button-hover-border-color); --current-button-text-color: var(--theme-button-hover-text-color); --current-button-transition: var(--theme-button-hover-transition); } - .editor-styles-wrapper .wp-block-button__link:not(.has-text-color) { - color: var(--current-button-text-color); } - .editor-styles-wrapper .wp-block-buttons[class] { + .editor-styles-wrapper .wp-block-buttons[class][class][class] { + margin-top: var(--element-spacing); display: flex; align-items: center; - flex-wrap: wrap; - margin-left: calc(var(--theme-spacing) * -1); } - .editor-styles-wrapper .wp-block-buttons[class] .block-editor-block-list__layout { + flex-wrap: wrap; } + .editor-styles-wrapper .wp-block-buttons[class][class][class]:first-child { + --block-top-spacing: 1; + --element-spacing: calc( var(--block-top-spacing, 1) * var(--theme-spacing-fluid-small) * var(--novablocks-element-spacing-multiplier, 1) ); } + .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block, + .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button { + margin-top: 0 !important; } + .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block:not(:last-child), .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block:not(:first-child):not(:last-child), + .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button:not(:last-child), + .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button:not(:first-child):not(:last-child) { + margin-right: var(--element-spacing); } + .editor-styles-wrapper .wp-block-buttons[class][class][class] .block-editor-block-list__layout { display: flex; align-items: center; flex-wrap: wrap; } - .editor-styles-wrapper .wp-block-buttons[class] .block-editor-block-list__layout * { + .editor-styles-wrapper .wp-block-buttons[class][class][class] .block-editor-block-list__layout > * { margin-left: 0; margin-right: 0; } - .editor-styles-wrapper .wp-block-buttons[class] .wp-block, - .editor-styles-wrapper .wp-block-buttons[class] .wp-block-button { - display: flex; - margin-left: var(--theme-spacing); } - .editor-styles-wrapper .wp-block-buttons[class].aligncenter { + .editor-styles-wrapper .wp-block-buttons[class][class][class].aligncenter { justify-content: center; } - .editor-styles-wrapper .wp-block-buttons[class].alignleft { - justify-content: flex-start; } - .editor-styles-wrapper .wp-block-buttons[class].alignright { + .editor-styles-wrapper .wp-block-buttons[class][class][class].aligncenter .wp-block, + .editor-styles-wrapper .wp-block-buttons[class][class][class].aligncenter .wp-block-button { + margin-left: calc( var(--element-spacing) / 2); + margin-right: calc( var(--element-spacing) / 2); } + .editor-styles-wrapper .wp-block-buttons[class][class][class].alignright { justify-content: flex-end; } + .editor-styles-wrapper .wp-block-buttons[class][class][class].alignright .wp-block, + .editor-styles-wrapper .wp-block-buttons[class][class][class].alignright .wp-block-button { + margin-left: var(--element-spacing); + margin-right: 0; } + .editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button__link[class] { + display: block; } .editor-styles-wrapper ul.wp-block-categories__list[class] { list-style: none; padding-left: 0; } @@ -1643,7 +1657,6 @@ --current-text-decoration: var(--theme-body-text-decoration); font-style: normal; } .editor-styles-wrapper[class] { - /* Headings */ /* Iframes */ /* Lists */ /* Nested unordered lists */ @@ -1667,7 +1680,7 @@ background-color: var(--current-light-primary); color: var(--current-dark-secondary); } .editor-styles-wrapper[class] h1, .editor-styles-wrapper[class] h2, .editor-styles-wrapper[class] h3, .editor-styles-wrapper[class] h4, .editor-styles-wrapper[class] h5, .editor-styles-wrapper[class] h6 { - margin: 0; } + margin-bottom: 0; } .editor-styles-wrapper[class] h1.has-larger-font-size { font-family: var(--current-font-family); font-size: var(--current-font-size); diff --git a/functions.php b/functions.php index 21ef696..e7dd424 100644 --- a/functions.php +++ b/functions.php @@ -114,6 +114,10 @@ function rosa2_lite_enqueue_theme_block_editor_assets() { $theme = wp_get_theme( get_template() ); $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min'; + global $wp_version; + $is_old_wp_version = version_compare( $wp_version, '5.5', '<' ); + $is_gutenberg_plugin_active = defined( 'GUTENBERG_VERSION' ); + /* Default Google Fonts */ wp_enqueue_style( 'rosa2-lite-google-fonts', rosa2_lite_google_fonts_url() ); @@ -126,6 +130,10 @@ function rosa2_lite_enqueue_theme_block_editor_assets() { $theme->get( 'Version' ), true ); + + if ( $is_old_wp_version && ! $is_gutenberg_plugin_active ) { + wp_enqueue_style( 'rosa2-gutenberg-legacy-editor' ); + } } add_action( 'enqueue_block_editor_assets', 'rosa2_lite_enqueue_theme_block_editor_assets', 10 ); @@ -141,6 +149,10 @@ function rosa2_lite_scripts() { $theme = wp_get_theme( get_template() ); $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min'; + global $wp_version; + $is_old_wp_version = version_compare( $wp_version, '5.5', '<' ); + $is_gutenberg_plugin_active = defined( 'GUTENBERG_VERSION' ); + /* Default Google Fonts */ wp_enqueue_style( 'rosa2-lite-google-fonts', rosa2_lite_google_fonts_url() ); @@ -148,6 +160,10 @@ function rosa2_lite_scripts() { wp_enqueue_style( 'rosa2-novablocks-fallback-style', get_template_directory_uri() . '/novablocks-fallback.css', array(), $theme->get( 'Version' ) ); } + wp_register_style( 'rosa2-lite-gutenberg-legacy-frontend', get_template_directory_uri() . '/dist/css/gutenberg-legacy-frontend.css', array(), $theme->get( 'Version' ) ); + + wp_register_style( 'rosa2-lite-gutenberg-legacy-editor', get_template_directory_uri() . '/dist/css/gutenberg-legacy-editor.css', array(), $theme->get( 'Version' ) ); + wp_enqueue_style( 'rosa2-style', get_template_directory_uri() . '/style.css', array(), $theme->get( 'Version' ) ); wp_style_add_data( 'rosa2-style', 'rtl', 'replace' ); @@ -160,6 +176,10 @@ function rosa2_lite_scripts() { if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); } + + if ( $is_old_wp_version && ! $is_gutenberg_plugin_active ) { + wp_enqueue_style( 'rosa2-gutenberg-legacy-frontend' ); + } } add_action( 'wp_enqueue_scripts', 'rosa2_lite_scripts', 10 ); diff --git a/gutenberg-legacy-editor.css b/gutenberg-legacy-editor.css new file mode 100644 index 0000000..b130aae --- /dev/null +++ b/gutenberg-legacy-editor.css @@ -0,0 +1,7 @@ +.wp-block-buttons[class][class] { + margin-top: 0; } + .wp-block-buttons[class][class] .block-editor-block-list__layout > * { + margin-left: 0; + margin-right: 0; } + .wp-block-buttons[class][class] .wp-block-button { + margin: var(--element-spacing) var(--element-spacing) 0 0; } diff --git a/gutenberg-legacy-frontend.css b/gutenberg-legacy-frontend.css new file mode 100644 index 0000000..6397f12 --- /dev/null +++ b/gutenberg-legacy-frontend.css @@ -0,0 +1,2 @@ +h1, h2, h3, h4, h5, h6 { + margin: 0; } diff --git a/style-rtl.css b/style-rtl.css index 237ebdf..933463c 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -994,9 +994,8 @@ fieldset { background-color: var(--current-color-primary); color: var(--current-dark-primary); } -/* Headings */ h1, h2, h3, h4, h5, h6 { - margin: 0; } + margin-bottom: 0; } h1.has-larger-font-size { font-family: var(--current-font-family); @@ -3506,7 +3505,6 @@ span.page-numbers { text-align: left; } .wp-block-button__link { - display: inline-block; display: inline-block; text-decoration: none; cursor: pointer; @@ -3546,37 +3544,50 @@ span.page-numbers { --current-font-weight: var(--theme-button-font-weight); --current-letter-spacing: var(--theme-button-letter-spacing); --current-text-transform: var(--theme-button-text-transform); - --current-text-decoration: var(--theme-button-text-decoration); } + --current-text-decoration: var(--theme-button-text-decoration); + color: var(--current-button-text-color); } .wp-block-button__link:hover { --current-button-background-color: var(--theme-button-hover-background-color); --current-button-border-color: var(--theme-button-hover-border-color); --current-button-text-color: var(--theme-button-hover-text-color); --current-button-transition: var(--theme-button-hover-transition); } - .wp-block-button__link:not(.has-text-color) { - color: var(--current-button-text-color); } -.wp-block-buttons[class] { +.wp-block-buttons[class][class][class] { + margin-top: var(--element-spacing); display: flex; align-items: center; - flex-wrap: wrap; - margin-right: calc(var(--theme-spacing) * -1); } - .wp-block-buttons[class] .block-editor-block-list__layout { + flex-wrap: wrap; } + .wp-block-buttons[class][class][class]:first-child { + --block-top-spacing: 1; + --element-spacing: calc( var(--block-top-spacing, 1) * var(--theme-spacing-fluid-small) * var(--novablocks-element-spacing-multiplier, 1) ); } + .wp-block-buttons[class][class][class] .wp-block, + .wp-block-buttons[class][class][class] .wp-block-button { + margin-top: 0 !important; } + .wp-block-buttons[class][class][class] .wp-block:not(:last-child), .wp-block-buttons[class][class][class] .wp-block:not(:first-child):not(:last-child), + .wp-block-buttons[class][class][class] .wp-block-button:not(:last-child), + .wp-block-buttons[class][class][class] .wp-block-button:not(:first-child):not(:last-child) { + margin-left: var(--element-spacing); } + .wp-block-buttons[class][class][class] .block-editor-block-list__layout { display: flex; align-items: center; flex-wrap: wrap; } - .wp-block-buttons[class] .block-editor-block-list__layout * { + .wp-block-buttons[class][class][class] .block-editor-block-list__layout > * { margin-right: 0; margin-left: 0; } - .wp-block-buttons[class] .wp-block, - .wp-block-buttons[class] .wp-block-button { - display: flex; - margin-right: var(--theme-spacing); } - .wp-block-buttons[class].aligncenter { + .wp-block-buttons[class][class][class].aligncenter { justify-content: center; } - .wp-block-buttons[class].alignleft { - justify-content: flex-start; } - .wp-block-buttons[class].alignright { + .wp-block-buttons[class][class][class].aligncenter .wp-block, + .wp-block-buttons[class][class][class].aligncenter .wp-block-button { + margin-right: calc( var(--element-spacing) / 2); + margin-left: calc( var(--element-spacing) / 2); } + .wp-block-buttons[class][class][class].alignright { justify-content: flex-end; } + .wp-block-buttons[class][class][class].alignright .wp-block, + .wp-block-buttons[class][class][class].alignright .wp-block-button { + margin-right: var(--element-spacing); + margin-left: 0; } + .wp-block-buttons[class][class][class] .wp-block-button__link[class] { + display: block; } /* Categories Block */ .wp-block-categories { @@ -5069,12 +5080,14 @@ body.archive, body.blog, body.search { transform: translate(0, -50%) scale(-1, 1); transition: var(--theme-button-transition); transition-property: opacity, transform; } } - .is-style-text .wp-block-button__link:hover:before { - transform: scale3d(0, 1, 1); - transform-origin: left; } - .is-style-text .wp-block-button__link:hover:after { - opacity: 1; - transform: translate(-0.4em, -50%) scale(-1, 1); } + .is-style-text .wp-block-button__link:not([disabled]):hover { + color: var(--theme-button-text-color); } + .is-style-text .wp-block-button__link:not([disabled]):hover:before { + transform: scale3d(0, 1, 1); + transform-origin: left; } + .is-style-text .wp-block-button__link:not([disabled]):hover:after { + opacity: 1; + transform: translate(-0.4em, -50%) scale(-1, 1); } .c-headline { display: flex; diff --git a/style.css b/style.css index f6bbed6..3639f0f 100644 --- a/style.css +++ b/style.css @@ -994,9 +994,8 @@ fieldset { background-color: var(--current-color-primary); color: var(--current-dark-primary); } -/* Headings */ h1, h2, h3, h4, h5, h6 { - margin: 0; } + margin-bottom: 0; } h1.has-larger-font-size { font-family: var(--current-font-family); @@ -3506,7 +3505,6 @@ span.page-numbers { text-align: right; } .wp-block-button__link { - display: inline-block; display: inline-block; text-decoration: none; cursor: pointer; @@ -3546,37 +3544,50 @@ span.page-numbers { --current-font-weight: var(--theme-button-font-weight); --current-letter-spacing: var(--theme-button-letter-spacing); --current-text-transform: var(--theme-button-text-transform); - --current-text-decoration: var(--theme-button-text-decoration); } + --current-text-decoration: var(--theme-button-text-decoration); + color: var(--current-button-text-color); } .wp-block-button__link:hover { --current-button-background-color: var(--theme-button-hover-background-color); --current-button-border-color: var(--theme-button-hover-border-color); --current-button-text-color: var(--theme-button-hover-text-color); --current-button-transition: var(--theme-button-hover-transition); } - .wp-block-button__link:not(.has-text-color) { - color: var(--current-button-text-color); } -.wp-block-buttons[class] { +.wp-block-buttons[class][class][class] { + margin-top: var(--element-spacing); display: flex; align-items: center; - flex-wrap: wrap; - margin-left: calc(var(--theme-spacing) * -1); } - .wp-block-buttons[class] .block-editor-block-list__layout { + flex-wrap: wrap; } + .wp-block-buttons[class][class][class]:first-child { + --block-top-spacing: 1; + --element-spacing: calc( var(--block-top-spacing, 1) * var(--theme-spacing-fluid-small) * var(--novablocks-element-spacing-multiplier, 1) ); } + .wp-block-buttons[class][class][class] .wp-block, + .wp-block-buttons[class][class][class] .wp-block-button { + margin-top: 0 !important; } + .wp-block-buttons[class][class][class] .wp-block:not(:last-child), .wp-block-buttons[class][class][class] .wp-block:not(:first-child):not(:last-child), + .wp-block-buttons[class][class][class] .wp-block-button:not(:last-child), + .wp-block-buttons[class][class][class] .wp-block-button:not(:first-child):not(:last-child) { + margin-right: var(--element-spacing); } + .wp-block-buttons[class][class][class] .block-editor-block-list__layout { display: flex; align-items: center; flex-wrap: wrap; } - .wp-block-buttons[class] .block-editor-block-list__layout * { + .wp-block-buttons[class][class][class] .block-editor-block-list__layout > * { margin-left: 0; margin-right: 0; } - .wp-block-buttons[class] .wp-block, - .wp-block-buttons[class] .wp-block-button { - display: flex; - margin-left: var(--theme-spacing); } - .wp-block-buttons[class].aligncenter { + .wp-block-buttons[class][class][class].aligncenter { justify-content: center; } - .wp-block-buttons[class].alignleft { - justify-content: flex-start; } - .wp-block-buttons[class].alignright { + .wp-block-buttons[class][class][class].aligncenter .wp-block, + .wp-block-buttons[class][class][class].aligncenter .wp-block-button { + margin-left: calc( var(--element-spacing) / 2); + margin-right: calc( var(--element-spacing) / 2); } + .wp-block-buttons[class][class][class].alignright { justify-content: flex-end; } + .wp-block-buttons[class][class][class].alignright .wp-block, + .wp-block-buttons[class][class][class].alignright .wp-block-button { + margin-left: var(--element-spacing); + margin-right: 0; } + .wp-block-buttons[class][class][class] .wp-block-button__link[class] { + display: block; } /* Categories Block */ .wp-block-categories { @@ -5069,12 +5080,14 @@ body.archive, body.blog, body.search { transform: translate(0, -50%) scale(-1, 1); transition: var(--theme-button-transition); transition-property: opacity, transform; } } - .is-style-text .wp-block-button__link:hover:before { - transform: scale3d(0, 1, 1); - transform-origin: right; } - .is-style-text .wp-block-button__link:hover:after { - opacity: 1; - transform: translate(0.4em, -50%) scale(-1, 1); } + .is-style-text .wp-block-button__link:not([disabled]):hover { + color: var(--theme-button-text-color); } + .is-style-text .wp-block-button__link:not([disabled]):hover:before { + transform: scale3d(0, 1, 1); + transform-origin: right; } + .is-style-text .wp-block-button__link:not([disabled]):hover:after { + opacity: 1; + transform: translate(0.4em, -50%) scale(-1, 1); } .c-headline { display: flex;