Skip to content

Commit 1cf6041

Browse files
author
madalingorbanescu
committed
SCSS changes to accomodate WordPress 5.5
1 parent e53034d commit 1cf6041

14 files changed

+243
-112
lines changed

‎assets/scss/blocks/core/button/_style.scss

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,50 +27,68 @@ $enable-button-block-styles: true !default;
2727
}
2828

2929
.wp-block-button__link {
30-
display: inline-block;
3130
@include button-base;
3231
@include button-box;
3332
@include apply-font(button);
34-
35-
&:not(.has-text-color) {
36-
@include button-color;
37-
}
33+
@include button-color;
3834
}
3935

40-
.wp-block-buttons[class] {
36+
.wp-block-buttons[class][class][class] {
37+
margin-top: var(--element-spacing);
38+
4139
display: flex;
4240
align-items: center;
4341
flex-wrap: wrap;
4442

45-
margin-left: calc(var(--theme-spacing) * -1);
43+
&:first-child {
44+
--block-top-spacing: 1;
45+
@include element-spacing;
46+
}
47+
48+
49+
.wp-block,
50+
.wp-block-button {
51+
margin-top: 0 !important;
52+
53+
&:not(:last-child),
54+
&:not(:first-child):not(:last-child) {
55+
margin-right: var(--element-spacing);
56+
}
57+
}
4658

4759
.block-editor-block-list__layout {
4860
display: flex;
4961
align-items: center;
5062
flex-wrap: wrap;
5163

52-
* {
64+
> * {
5365
margin-left: 0;
5466
margin-right: 0;
5567
}
5668
}
5769

58-
.wp-block,
59-
.wp-block-button {
60-
display: flex;
61-
margin-left: var(--theme-spacing);
62-
}
63-
6470
&.aligncenter {
6571
justify-content: center;
66-
}
6772

68-
&.alignleft {
69-
justify-content: flex-start;
73+
.wp-block,
74+
.wp-block-button {
75+
margin-left: calc( var(--element-spacing) / 2 );
76+
margin-right: calc( var(--element-spacing) / 2 );
77+
}
7078
}
7179

7280
&.alignright {
7381
justify-content: flex-end;
82+
83+
.wp-block,
84+
.wp-block-button {
85+
margin-left: var(--element-spacing);
86+
margin-right: 0;
87+
}
88+
}
89+
90+
.wp-block-button__link[class] {
91+
display: block;
7492
}
7593
}
7694
}

‎assets/scss/elements/_headings.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
/* Headings */
21
h1, h2, h3, h4, h5, h6 {
3-
margin: 0;
2+
margin-bottom: 0;
43
}
54

5+
66
h1.has-larger-font-size {
77
@include apply-font(display);
88
}

‎assets/scss/gutenberg-legacy-editor.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@import "setup";
2+
3+
.wp-block-buttons[class][class] {
4+
5+
margin-top: 0;
6+
7+
.block-editor-block-list__layout {
8+
9+
> * {
10+
margin-left: 0;
11+
margin-right: 0;
12+
}
13+
}
14+
15+
.wp-block-button {
16+
margin: var(--element-spacing) var(--element-spacing) 0 0;
17+
}
18+
}

‎assets/scss/gutenberg-legacy-frontend.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "setup";
2+
3+
h1, h2, h3, h4, h5, h6 {
4+
margin: 0;
5+
}

‎assets/scss/setup/_mixins.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import "mixins/close";
99
@import "mixins/cover";
1010
@import "mixins/flex-grid";
11+
@import "mixins/font-feature";
1112
@import "mixins/element-spacing";
1213
@import "mixins/fluid";
1314
@import "mixins/font";

‎assets/scss/setup/mixins/_button.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,9 @@
196196
transform: translate(0, -50%) scale(-1,1);
197197
}
198198

199-
&:hover {
199+
&:not([disabled]):hover {
200+
201+
color: var(--theme-button-text-color);
200202

201203
&:before {
202204
transform: scale3d(0, 1, 1);

‎assets/scss/setup/mixins/_font-feature.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// A mix-in for turning OpenType features on and off
2+
// Demos of CSS OpenType features in CSS
3+
// https://sparanoid.com/lab/opentype-features
4+
5+
@mixin font-feature() {
6+
--current-font-feature: "liga", "dlig", "onum";
7+
}

‎blocks.css

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -640,7 +640,6 @@
640640
text-align: right; }
641641

642642
.wp-block-button__link {
643-
display: inline-block;
644643
display: inline-block;
645644
text-decoration: none;
646645
cursor: pointer;
@@ -680,37 +679,50 @@
680679
--current-font-weight: var(--theme-button-font-weight);
681680
--current-letter-spacing: var(--theme-button-letter-spacing);
682681
--current-text-transform: var(--theme-button-text-transform);
683-
--current-text-decoration: var(--theme-button-text-decoration); }
682+
--current-text-decoration: var(--theme-button-text-decoration);
683+
color: var(--current-button-text-color); }
684684
.wp-block-button__link:hover {
685685
--current-button-background-color: var(--theme-button-hover-background-color);
686686
--current-button-border-color: var(--theme-button-hover-border-color);
687687
--current-button-text-color: var(--theme-button-hover-text-color);
688688
--current-button-transition: var(--theme-button-hover-transition); }
689-
.wp-block-button__link:not(.has-text-color) {
690-
color: var(--current-button-text-color); }
691689

692-
.wp-block-buttons[class] {
690+
.wp-block-buttons[class][class][class] {
691+
margin-top: var(--element-spacing);
693692
display: flex;
694693
align-items: center;
695-
flex-wrap: wrap;
696-
margin-left: calc(var(--theme-spacing) * -1); }
697-
.wp-block-buttons[class] .block-editor-block-list__layout {
694+
flex-wrap: wrap; }
695+
.wp-block-buttons[class][class][class]:first-child {
696+
--block-top-spacing: 1;
697+
--element-spacing: calc( var(--block-top-spacing, 1) * var(--theme-spacing-fluid-small) * var(--novablocks-element-spacing-multiplier, 1) ); }
698+
.wp-block-buttons[class][class][class] .wp-block,
699+
.wp-block-buttons[class][class][class] .wp-block-button {
700+
margin-top: 0 !important; }
701+
.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),
702+
.wp-block-buttons[class][class][class] .wp-block-button:not(:last-child),
703+
.wp-block-buttons[class][class][class] .wp-block-button:not(:first-child):not(:last-child) {
704+
margin-right: var(--element-spacing); }
705+
.wp-block-buttons[class][class][class] .block-editor-block-list__layout {
698706
display: flex;
699707
align-items: center;
700708
flex-wrap: wrap; }
701-
.wp-block-buttons[class] .block-editor-block-list__layout * {
709+
.wp-block-buttons[class][class][class] .block-editor-block-list__layout > * {
702710
margin-left: 0;
703711
margin-right: 0; }
704-
.wp-block-buttons[class] .wp-block,
705-
.wp-block-buttons[class] .wp-block-button {
706-
display: flex;
707-
margin-left: var(--theme-spacing); }
708-
.wp-block-buttons[class].aligncenter {
712+
.wp-block-buttons[class][class][class].aligncenter {
709713
justify-content: center; }
710-
.wp-block-buttons[class].alignleft {
711-
justify-content: flex-start; }
712-
.wp-block-buttons[class].alignright {
714+
.wp-block-buttons[class][class][class].aligncenter .wp-block,
715+
.wp-block-buttons[class][class][class].aligncenter .wp-block-button {
716+
margin-left: calc( var(--element-spacing) / 2);
717+
margin-right: calc( var(--element-spacing) / 2); }
718+
.wp-block-buttons[class][class][class].alignright {
713719
justify-content: flex-end; }
720+
.wp-block-buttons[class][class][class].alignright .wp-block,
721+
.wp-block-buttons[class][class][class].alignright .wp-block-button {
722+
margin-left: var(--element-spacing);
723+
margin-right: 0; }
724+
.wp-block-buttons[class][class][class] .wp-block-button__link[class] {
725+
display: block; }
714726

715727
/* Categories Block */
716728
.wp-block-categories {

‎editor.css

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -496,12 +496,14 @@
496496
transform: translate(0, -50%) scale(-1, 1);
497497
transition: var(--theme-button-transition);
498498
transition-property: opacity, transform; } }
499-
.editor-styles-wrapper .is-style-text .wp-block-button__link:hover:before {
500-
transform: scale3d(0, 1, 1);
501-
transform-origin: right; }
502-
.editor-styles-wrapper .is-style-text .wp-block-button__link:hover:after {
503-
opacity: 1;
504-
transform: translate(0.4em, -50%) scale(-1, 1); }
499+
.editor-styles-wrapper .is-style-text .wp-block-button__link:not([disabled]):hover {
500+
color: var(--theme-button-text-color); }
501+
.editor-styles-wrapper .is-style-text .wp-block-button__link:not([disabled]):hover:before {
502+
transform: scale3d(0, 1, 1);
503+
transform-origin: right; }
504+
.editor-styles-wrapper .is-style-text .wp-block-button__link:not([disabled]):hover:after {
505+
opacity: 1;
506+
transform: translate(0.4em, -50%) scale(-1, 1); }
505507

506508
.editor-styles-wrapper .c-headline {
507509
display: flex;
@@ -720,7 +722,6 @@
720722
.editor-styles-wrapper .wp-block-button.alignright {
721723
text-align: right; }
722724
.editor-styles-wrapper .wp-block-button__link {
723-
display: inline-block;
724725
display: inline-block;
725726
text-decoration: none;
726727
cursor: pointer;
@@ -760,36 +761,49 @@
760761
--current-font-weight: var(--theme-button-font-weight);
761762
--current-letter-spacing: var(--theme-button-letter-spacing);
762763
--current-text-transform: var(--theme-button-text-transform);
763-
--current-text-decoration: var(--theme-button-text-decoration); }
764+
--current-text-decoration: var(--theme-button-text-decoration);
765+
color: var(--current-button-text-color); }
764766
.editor-styles-wrapper .wp-block-button__link:hover {
765767
--current-button-background-color: var(--theme-button-hover-background-color);
766768
--current-button-border-color: var(--theme-button-hover-border-color);
767769
--current-button-text-color: var(--theme-button-hover-text-color);
768770
--current-button-transition: var(--theme-button-hover-transition); }
769-
.editor-styles-wrapper .wp-block-button__link:not(.has-text-color) {
770-
color: var(--current-button-text-color); }
771-
.editor-styles-wrapper .wp-block-buttons[class] {
771+
.editor-styles-wrapper .wp-block-buttons[class][class][class] {
772+
margin-top: var(--element-spacing);
772773
display: flex;
773774
align-items: center;
774-
flex-wrap: wrap;
775-
margin-left: calc(var(--theme-spacing) * -1); }
776-
.editor-styles-wrapper .wp-block-buttons[class] .block-editor-block-list__layout {
775+
flex-wrap: wrap; }
776+
.editor-styles-wrapper .wp-block-buttons[class][class][class]:first-child {
777+
--block-top-spacing: 1;
778+
--element-spacing: calc( var(--block-top-spacing, 1) * var(--theme-spacing-fluid-small) * var(--novablocks-element-spacing-multiplier, 1) ); }
779+
.editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block,
780+
.editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button {
781+
margin-top: 0 !important; }
782+
.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),
783+
.editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button:not(:last-child),
784+
.editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button:not(:first-child):not(:last-child) {
785+
margin-right: var(--element-spacing); }
786+
.editor-styles-wrapper .wp-block-buttons[class][class][class] .block-editor-block-list__layout {
777787
display: flex;
778788
align-items: center;
779789
flex-wrap: wrap; }
780-
.editor-styles-wrapper .wp-block-buttons[class] .block-editor-block-list__layout * {
790+
.editor-styles-wrapper .wp-block-buttons[class][class][class] .block-editor-block-list__layout > * {
781791
margin-left: 0;
782792
margin-right: 0; }
783-
.editor-styles-wrapper .wp-block-buttons[class] .wp-block,
784-
.editor-styles-wrapper .wp-block-buttons[class] .wp-block-button {
785-
display: flex;
786-
margin-left: var(--theme-spacing); }
787-
.editor-styles-wrapper .wp-block-buttons[class].aligncenter {
793+
.editor-styles-wrapper .wp-block-buttons[class][class][class].aligncenter {
788794
justify-content: center; }
789-
.editor-styles-wrapper .wp-block-buttons[class].alignleft {
790-
justify-content: flex-start; }
791-
.editor-styles-wrapper .wp-block-buttons[class].alignright {
795+
.editor-styles-wrapper .wp-block-buttons[class][class][class].aligncenter .wp-block,
796+
.editor-styles-wrapper .wp-block-buttons[class][class][class].aligncenter .wp-block-button {
797+
margin-left: calc( var(--element-spacing) / 2);
798+
margin-right: calc( var(--element-spacing) / 2); }
799+
.editor-styles-wrapper .wp-block-buttons[class][class][class].alignright {
792800
justify-content: flex-end; }
801+
.editor-styles-wrapper .wp-block-buttons[class][class][class].alignright .wp-block,
802+
.editor-styles-wrapper .wp-block-buttons[class][class][class].alignright .wp-block-button {
803+
margin-left: var(--element-spacing);
804+
margin-right: 0; }
805+
.editor-styles-wrapper .wp-block-buttons[class][class][class] .wp-block-button__link[class] {
806+
display: block; }
793807
.editor-styles-wrapper ul.wp-block-categories__list[class] {
794808
list-style: none;
795809
padding-left: 0; }
@@ -1643,7 +1657,6 @@
16431657
--current-text-decoration: var(--theme-body-text-decoration);
16441658
font-style: normal; }
16451659
.editor-styles-wrapper[class] {
1646-
/* Headings */
16471660
/* Iframes */
16481661
/* Lists */
16491662
/* Nested unordered lists */
@@ -1667,7 +1680,7 @@
16671680
background-color: var(--current-light-primary);
16681681
color: var(--current-dark-secondary); }
16691682
.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 {
1670-
margin: 0; }
1683+
margin-bottom: 0; }
16711684
.editor-styles-wrapper[class] h1.has-larger-font-size {
16721685
font-family: var(--current-font-family);
16731686
font-size: var(--current-font-size);

‎functions.php

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,10 @@ function rosa2_lite_enqueue_theme_block_editor_assets() {
114114
$theme = wp_get_theme( get_template() );
115115
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
116116

117+
global $wp_version;
118+
$is_old_wp_version = version_compare( $wp_version, '5.5', '<' );
119+
$is_gutenberg_plugin_active = defined( 'GUTENBERG_VERSION' );
120+
117121
/* Default Google Fonts */
118122
wp_enqueue_style( 'rosa2-lite-google-fonts', rosa2_lite_google_fonts_url() );
119123

@@ -126,6 +130,10 @@ function rosa2_lite_enqueue_theme_block_editor_assets() {
126130
$theme->get( 'Version' ),
127131
true
128132
);
133+
134+
if ( $is_old_wp_version && ! $is_gutenberg_plugin_active ) {
135+
wp_enqueue_style( 'rosa2-gutenberg-legacy-editor' );
136+
}
129137
}
130138
add_action( 'enqueue_block_editor_assets', 'rosa2_lite_enqueue_theme_block_editor_assets', 10 );
131139

@@ -141,13 +149,21 @@ function rosa2_lite_scripts() {
141149
$theme = wp_get_theme( get_template() );
142150
$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
143151

152+
global $wp_version;
153+
$is_old_wp_version = version_compare( $wp_version, '5.5', '<' );
154+
$is_gutenberg_plugin_active = defined( 'GUTENBERG_VERSION' );
155+
144156
/* Default Google Fonts */
145157
wp_enqueue_style( 'rosa2-lite-google-fonts', rosa2_lite_google_fonts_url() );
146158

147159
if ( ! in_array( 'nova-blocks/nova-blocks.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
148160
wp_enqueue_style( 'rosa2-novablocks-fallback-style', get_template_directory_uri() . '/novablocks-fallback.css', array(), $theme->get( 'Version' ) );
149161
}
150162

163+
wp_register_style( 'rosa2-lite-gutenberg-legacy-frontend', get_template_directory_uri() . '/dist/css/gutenberg-legacy-frontend.css', array(), $theme->get( 'Version' ) );
164+
165+
wp_register_style( 'rosa2-lite-gutenberg-legacy-editor', get_template_directory_uri() . '/dist/css/gutenberg-legacy-editor.css', array(), $theme->get( 'Version' ) );
166+
151167
wp_enqueue_style( 'rosa2-style', get_template_directory_uri() . '/style.css', array(), $theme->get( 'Version' ) );
152168
wp_style_add_data( 'rosa2-style', 'rtl', 'replace' );
153169

@@ -160,6 +176,10 @@ function rosa2_lite_scripts() {
160176
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
161177
wp_enqueue_script( 'comment-reply' );
162178
}
179+
180+
if ( $is_old_wp_version && ! $is_gutenberg_plugin_active ) {
181+
wp_enqueue_style( 'rosa2-gutenberg-legacy-frontend' );
182+
}
163183
}
164184
add_action( 'wp_enqueue_scripts', 'rosa2_lite_scripts', 10 );
165185

‎gutenberg-legacy-editor.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.wp-block-buttons[class][class] {
2+
margin-top: 0; }
3+
.wp-block-buttons[class][class] .block-editor-block-list__layout > * {
4+
margin-left: 0;
5+
margin-right: 0; }
6+
.wp-block-buttons[class][class] .wp-block-button {
7+
margin: var(--element-spacing) var(--element-spacing) 0 0; }

0 commit comments

Comments
 (0)