From 4eb910572b673fd76c401a5f20958ad09d4f3a55 Mon Sep 17 00:00:00 2001 From: madalingorbanescu Date: Tue, 6 Oct 2020 16:05:34 +0300 Subject: [PATCH] Accomodate Nova Blocks 1.6.0 release --- assets/scss/blocks/nova-blocks/_editor.scss | 3 + assets/scss/blocks/nova-blocks/_frontend.scss | 7 +- .../blocks/nova-blocks/header/_editor.scss | 66 +++++++++++++++++++ .../blocks/nova-blocks/header/_style.scss | 11 ++++ .../nova-blocks/navigation/_editor.scss | 9 +++ .../blocks/nova-blocks/navigation/_style.scss | 63 ++++++++++++++++++ assets/scss/components/site-header/_menu.scss | 2 +- blocks.css | 60 +++++++++++++++++ editor.css | 4 ++ functions.php | 2 +- inc/extras.php | 12 ++++ style-rtl.css | 62 ++++++++++++++++- style.css | 62 ++++++++++++++++- 13 files changed, 358 insertions(+), 5 deletions(-) create mode 100644 assets/scss/blocks/nova-blocks/header/_editor.scss create mode 100644 assets/scss/blocks/nova-blocks/header/_style.scss create mode 100644 assets/scss/blocks/nova-blocks/navigation/_editor.scss create mode 100644 assets/scss/blocks/nova-blocks/navigation/_style.scss diff --git a/assets/scss/blocks/nova-blocks/_editor.scss b/assets/scss/blocks/nova-blocks/_editor.scss index a8e8d37..b64b5cb 100644 --- a/assets/scss/blocks/nova-blocks/_editor.scss +++ b/assets/scss/blocks/nova-blocks/_editor.scss @@ -7,3 +7,6 @@ // Nova - Slideshow @import "slideshow/editor"; + +// Nova - Navigation +@import "navigation/editor"; diff --git a/assets/scss/blocks/nova-blocks/_frontend.scss b/assets/scss/blocks/nova-blocks/_frontend.scss index f82bcc7..f48f44d 100644 --- a/assets/scss/blocks/nova-blocks/_frontend.scss +++ b/assets/scss/blocks/nova-blocks/_frontend.scss @@ -80,6 +80,11 @@ // Nova - Media @import "media/style"; - // Nova - Slideshow @import "slideshow/style"; + +// Nova - Navigation +@import "navigation/style"; + +// Nova - Header +@import "header/style"; diff --git a/assets/scss/blocks/nova-blocks/header/_editor.scss b/assets/scss/blocks/nova-blocks/header/_editor.scss new file mode 100644 index 0000000..624c0fe --- /dev/null +++ b/assets/scss/blocks/nova-blocks/header/_editor.scss @@ -0,0 +1,66 @@ +[data-type="novablocks/header"][class] { + .editor-block-list__layout, + .block-editor-block-list__layout { + display: grid; + align-items: center; + grid-gap: 1em; + + .wp-block { + margin: 0; + max-width: 100%; + } + + > :last-child { + justify-content: flex-end; + } + + .wp-block { + margin-top: 0 !important; + } + } +} + +.site-header-logo-center { + .editor-block-list__layout, + .block-editor-block-list__layout { + grid-template-columns: 1fr auto 1fr; + } +} + +.site-header-logo-left { + .editor-block-list__layout, + .block-editor-block-list__layout { + grid-template-columns: auto 1fr; + } +} + + +.wp-block[data-type="novablocks/navigation"] { + display: flex; +} + +.wp-block[data-type="novablocks/logo"] { + a { + color: var(--current-dark-primary); + } + + .site-title, + .site-description { + margin-top: 0; + margin-bottom: 0; + } +} + +.c-logo__inverted { + display: none; +} + +.wp-block-novablocks-navigation ul.menu > li, +.wp-block-novablocks-navigation .menu > ul > li { + margin-left: 0; +} + +.site-header > div:first-child { + padding-left: var(--theme-header-sides-spacing); + padding-right: var(--theme-header-sides-spacing); +} diff --git a/assets/scss/blocks/nova-blocks/header/_style.scss b/assets/scss/blocks/nova-blocks/header/_style.scss new file mode 100644 index 0000000..75dac09 --- /dev/null +++ b/assets/scss/blocks/nova-blocks/header/_style.scss @@ -0,0 +1,11 @@ +@media only screen and (min-width: 1000px) { + + .site-header { + + ul.menu, + .menu > ul { + display: flex; + flex-wrap: wrap; + } + } +} diff --git a/assets/scss/blocks/nova-blocks/navigation/_editor.scss b/assets/scss/blocks/nova-blocks/navigation/_editor.scss new file mode 100644 index 0000000..7653eab --- /dev/null +++ b/assets/scss/blocks/nova-blocks/navigation/_editor.scss @@ -0,0 +1,9 @@ +.wp-block[data-type="novablocks/navigation"] { + ul.menu a { + display: flex; + } +} + +.menu { + padding-top: 0; +} diff --git a/assets/scss/blocks/nova-blocks/navigation/_style.scss b/assets/scss/blocks/nova-blocks/navigation/_style.scss new file mode 100644 index 0000000..1041bf6 --- /dev/null +++ b/assets/scss/blocks/nova-blocks/navigation/_style.scss @@ -0,0 +1,63 @@ +.wp-block-novablocks-navigation { + @include apply-font(navigation); +} + +.wp-block-novablocks-navigation[class] { + + @include above(lap) { + + --header-links-bottom-spacing: .5em; + + ul.menu, + .menu > ul { + + margin-left: calc( var(--theme-header-links-spacing) * -1 ); + + a { + display: block; + padding: 0.75em 0; + color: inherit; + text-decoration: none; + } + + > li { + margin-left: var(--theme-header-links-spacing); + } + + .customize-partial-edit-shortcut + > li:not(:first-child) { + margin-left: 0; + } + + > li > a { + padding-bottom: 0.25em; + margin-bottom: var(--header-links-bottom-spacing); + + &:after { + position: absolute; + right: 0; + } + } + + li:hover { + + > a { + border-color: currentColor; + + &:after { + opacity: 1; + } + } + } + } + + .sub-menu, + .children { + + li a { + border: 0; + padding-left: 1.25em; + padding-right: 1.25em; + } + } + } +} diff --git a/assets/scss/components/site-header/_menu.scss b/assets/scss/components/site-header/_menu.scss index 65db340..d7bfc6c 100644 --- a/assets/scss/components/site-header/_menu.scss +++ b/assets/scss/components/site-header/_menu.scss @@ -194,7 +194,7 @@ ul.menu, &:before { content: ''; position: absolute; - bottom: .5em; // Margin bottom applied on header links + bottom: .2em; // Margin bottom applied on header links height: 3px; background: currentColor; transition: transform .4s $ease; diff --git a/blocks.css b/blocks.css index 6fdb675..84e892e 100644 --- a/blocks.css +++ b/blocks.css @@ -1806,6 +1806,66 @@ html:root { -webkit-transform: none; transform: none; } +.wp-block-novablocks-navigation { + font-family: var(--current-font-family); + font-size: var(--current-font-size); + line-height: var(--current-line-height); + font-weight: var(--current-font-weight); + letter-spacing: var(--current-letter-spacing); + text-transform: var(--current-text-transform); + text-decoration: var(--current-text-decoration); + --current-font-family: var(--theme-navigation-font-family); + --current-font-size: var(--theme-navigation-final-font-size); + --current-line-height: var(--theme-navigation-line-height); + --current-font-weight: var(--theme-navigation-font-weight); + --current-letter-spacing: var(--theme-navigation-letter-spacing); + --current-text-transform: var(--theme-navigation-text-transform); + --current-text-decoration: var(--theme-navigation-text-decoration); } + +@media only screen and (min-width: 1000px) { + .wp-block-novablocks-navigation[class] { + --header-links-bottom-spacing: .5em; } + .wp-block-novablocks-navigation[class] ul.menu, + .wp-block-novablocks-navigation[class] .menu > ul { + margin-left: calc( var(--theme-header-links-spacing) * -1); } + .wp-block-novablocks-navigation[class] ul.menu a, + .wp-block-novablocks-navigation[class] .menu > ul a { + display: block; + padding: 0.75em 0; + color: inherit; + text-decoration: none; } + .wp-block-novablocks-navigation[class] ul.menu > li, + .wp-block-novablocks-navigation[class] .menu > ul > li { + margin-left: var(--theme-header-links-spacing); } + .wp-block-novablocks-navigation[class] ul.menu .customize-partial-edit-shortcut + > li:not(:first-child), + .wp-block-novablocks-navigation[class] .menu > ul .customize-partial-edit-shortcut + > li:not(:first-child) { + margin-left: 0; } + .wp-block-novablocks-navigation[class] ul.menu > li > a, + .wp-block-novablocks-navigation[class] .menu > ul > li > a { + padding-bottom: 0.25em; + margin-bottom: var(--header-links-bottom-spacing); } + .wp-block-novablocks-navigation[class] ul.menu > li > a:after, + .wp-block-novablocks-navigation[class] .menu > ul > li > a:after { + position: absolute; + right: 0; } + .wp-block-novablocks-navigation[class] ul.menu li:hover > a, + .wp-block-novablocks-navigation[class] .menu > ul li:hover > a { + border-color: currentColor; } + .wp-block-novablocks-navigation[class] ul.menu li:hover > a:after, + .wp-block-novablocks-navigation[class] .menu > ul li:hover > a:after { + opacity: 1; } + .wp-block-novablocks-navigation[class] .sub-menu li a, + .wp-block-novablocks-navigation[class] .children li a { + border: 0; + padding-left: 1.25em; + padding-right: 1.25em; } } + +@media only screen and (min-width: 1000px) { + .site-header ul.menu, + .site-header .menu > ul { + display: flex; + flex-wrap: wrap; } } + .wp-block-quote, .wp-block-pullquote { font-family: var(--current-font-family); diff --git a/editor.css b/editor.css index 9173064..f164f69 100644 --- a/editor.css +++ b/editor.css @@ -1577,6 +1577,10 @@ margin-top: 0; -webkit-transform: none; transform: none; } + .editor-styles-wrapper .wp-block[data-type="novablocks/navigation"] ul.menu a { + display: flex; } + .editor-styles-wrapper .menu { + padding-top: 0; } .editor-styles-wrapper .wp-block-quote, .editor-styles-wrapper .wp-block-pullquote { font-family: var(--current-font-family); diff --git a/functions.php b/functions.php index e7dd424..6c88b44 100644 --- a/functions.php +++ b/functions.php @@ -156,7 +156,7 @@ function rosa2_lite_scripts() { /* Default Google Fonts */ wp_enqueue_style( 'rosa2-lite-google-fonts', rosa2_lite_google_fonts_url() ); - if ( ! in_array( 'nova-blocks/nova-blocks.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { + if ( rosa2_lite_should_enqueue_novablocks_fallbacks() ) { wp_enqueue_style( 'rosa2-novablocks-fallback-style', get_template_directory_uri() . '/novablocks-fallback.css', array(), $theme->get( 'Version' ) ); } diff --git a/inc/extras.php b/inc/extras.php index 3757d39..93ddc85 100644 --- a/inc/extras.php +++ b/inc/extras.php @@ -196,3 +196,15 @@ function rosa2_lite_custom_gutenberg_settings() { } add_action( 'after_setup_theme', 'rosa2_lite_custom_gutenberg_settings', 10 ); + +function rosa2_lite_should_enqueue_novablocks_fallbacks() { + if ( ! in_array( 'nova-blocks/nova-blocks.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { + return true; + } + + if( is_home() && ! wp_style_is('novablocks/media-style', 'enqueued')) { + return true; + } + + return false; +} diff --git a/style-rtl.css b/style-rtl.css index 377850b..295fd3f 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -1504,7 +1504,7 @@ ul.menu, .site-header .site-header__menu > .menu > ul li a:before { content: ''; position: absolute; - bottom: .5em; + bottom: .2em; height: 3px; background: currentColor; transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); @@ -4671,6 +4671,66 @@ html:root { -webkit-transform: none; transform: none; } +.wp-block-novablocks-navigation { + font-family: var(--current-font-family); + font-size: var(--current-font-size); + line-height: var(--current-line-height); + font-weight: var(--current-font-weight); + letter-spacing: var(--current-letter-spacing); + text-transform: var(--current-text-transform); + text-decoration: var(--current-text-decoration); + --current-font-family: var(--theme-navigation-font-family); + --current-font-size: var(--theme-navigation-final-font-size); + --current-line-height: var(--theme-navigation-line-height); + --current-font-weight: var(--theme-navigation-font-weight); + --current-letter-spacing: var(--theme-navigation-letter-spacing); + --current-text-transform: var(--theme-navigation-text-transform); + --current-text-decoration: var(--theme-navigation-text-decoration); } + +@media only screen and (min-width: 1000px) { + .wp-block-novablocks-navigation[class] { + --header-links-bottom-spacing: .5em; } + .wp-block-novablocks-navigation[class] ul.menu, + .wp-block-novablocks-navigation[class] .menu > ul { + margin-right: calc( var(--theme-header-links-spacing) * -1); } + .wp-block-novablocks-navigation[class] ul.menu a, + .wp-block-novablocks-navigation[class] .menu > ul a { + display: block; + padding: 0.75em 0; + color: inherit; + text-decoration: none; } + .wp-block-novablocks-navigation[class] ul.menu > li, + .wp-block-novablocks-navigation[class] .menu > ul > li { + margin-right: var(--theme-header-links-spacing); } + .wp-block-novablocks-navigation[class] ul.menu .customize-partial-edit-shortcut + > li:not(:first-child), + .wp-block-novablocks-navigation[class] .menu > ul .customize-partial-edit-shortcut + > li:not(:first-child) { + margin-right: 0; } + .wp-block-novablocks-navigation[class] ul.menu > li > a, + .wp-block-novablocks-navigation[class] .menu > ul > li > a { + padding-bottom: 0.25em; + margin-bottom: var(--header-links-bottom-spacing); } + .wp-block-novablocks-navigation[class] ul.menu > li > a:after, + .wp-block-novablocks-navigation[class] .menu > ul > li > a:after { + position: absolute; + left: 0; } + .wp-block-novablocks-navigation[class] ul.menu li:hover > a, + .wp-block-novablocks-navigation[class] .menu > ul li:hover > a { + border-color: currentColor; } + .wp-block-novablocks-navigation[class] ul.menu li:hover > a:after, + .wp-block-novablocks-navigation[class] .menu > ul li:hover > a:after { + opacity: 1; } + .wp-block-novablocks-navigation[class] .sub-menu li a, + .wp-block-novablocks-navigation[class] .children li a { + border: 0; + padding-right: 1.25em; + padding-left: 1.25em; } } + +@media only screen and (min-width: 1000px) { + .site-header ul.menu, + .site-header .menu > ul { + display: flex; + flex-wrap: wrap; } } + .wp-block-quote, .wp-block-pullquote { font-family: var(--current-font-family); diff --git a/style.css b/style.css index 01c55e7..15cb206 100644 --- a/style.css +++ b/style.css @@ -1504,7 +1504,7 @@ ul.menu, .site-header .site-header__menu > .menu > ul li a:before { content: ''; position: absolute; - bottom: .5em; + bottom: .2em; height: 3px; background: currentColor; transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); @@ -4671,6 +4671,66 @@ html:root { -webkit-transform: none; transform: none; } +.wp-block-novablocks-navigation { + font-family: var(--current-font-family); + font-size: var(--current-font-size); + line-height: var(--current-line-height); + font-weight: var(--current-font-weight); + letter-spacing: var(--current-letter-spacing); + text-transform: var(--current-text-transform); + text-decoration: var(--current-text-decoration); + --current-font-family: var(--theme-navigation-font-family); + --current-font-size: var(--theme-navigation-final-font-size); + --current-line-height: var(--theme-navigation-line-height); + --current-font-weight: var(--theme-navigation-font-weight); + --current-letter-spacing: var(--theme-navigation-letter-spacing); + --current-text-transform: var(--theme-navigation-text-transform); + --current-text-decoration: var(--theme-navigation-text-decoration); } + +@media only screen and (min-width: 1000px) { + .wp-block-novablocks-navigation[class] { + --header-links-bottom-spacing: .5em; } + .wp-block-novablocks-navigation[class] ul.menu, + .wp-block-novablocks-navigation[class] .menu > ul { + margin-left: calc( var(--theme-header-links-spacing) * -1); } + .wp-block-novablocks-navigation[class] ul.menu a, + .wp-block-novablocks-navigation[class] .menu > ul a { + display: block; + padding: 0.75em 0; + color: inherit; + text-decoration: none; } + .wp-block-novablocks-navigation[class] ul.menu > li, + .wp-block-novablocks-navigation[class] .menu > ul > li { + margin-left: var(--theme-header-links-spacing); } + .wp-block-novablocks-navigation[class] ul.menu .customize-partial-edit-shortcut + > li:not(:first-child), + .wp-block-novablocks-navigation[class] .menu > ul .customize-partial-edit-shortcut + > li:not(:first-child) { + margin-left: 0; } + .wp-block-novablocks-navigation[class] ul.menu > li > a, + .wp-block-novablocks-navigation[class] .menu > ul > li > a { + padding-bottom: 0.25em; + margin-bottom: var(--header-links-bottom-spacing); } + .wp-block-novablocks-navigation[class] ul.menu > li > a:after, + .wp-block-novablocks-navigation[class] .menu > ul > li > a:after { + position: absolute; + right: 0; } + .wp-block-novablocks-navigation[class] ul.menu li:hover > a, + .wp-block-novablocks-navigation[class] .menu > ul li:hover > a { + border-color: currentColor; } + .wp-block-novablocks-navigation[class] ul.menu li:hover > a:after, + .wp-block-novablocks-navigation[class] .menu > ul li:hover > a:after { + opacity: 1; } + .wp-block-novablocks-navigation[class] .sub-menu li a, + .wp-block-novablocks-navigation[class] .children li a { + border: 0; + padding-left: 1.25em; + padding-right: 1.25em; } } + +@media only screen and (min-width: 1000px) { + .site-header ul.menu, + .site-header .menu > ul { + display: flex; + flex-wrap: wrap; } } + .wp-block-quote, .wp-block-pullquote { font-family: var(--current-font-family);