From: Stephen Cameron Date: Thu, 12 Dec 2019 19:36:08 +0000 (+0100) Subject: WIP #3053 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e0c0dd8961da0b3ad53d5f49f68d294564c3832e;p=ccv-wordpress.git WIP #3053 --- diff --git a/wp-content/mu-plugins/cube/src/Common/Setup.php b/wp-content/mu-plugins/cube/src/Common/Setup.php index 5f5ff09..155790d 100644 --- a/wp-content/mu-plugins/cube/src/Common/Setup.php +++ b/wp-content/mu-plugins/cube/src/Common/Setup.php @@ -2,8 +2,6 @@ namespace Cube\Common; -use Carbon_Fields\Carbon_Fields; - class Setup { /** diff --git a/wp-content/themes/CCV/app/setup.php b/wp-content/themes/CCV/app/setup.php index 0d590eb..7b35087 100755 --- a/wp-content/themes/CCV/app/setup.php +++ b/wp-content/themes/CCV/app/setup.php @@ -6,6 +6,52 @@ use function Roots\asset; use function Roots\config; use function Roots\view; +/** + * Override Elementor CSS order + * Normally, the Sage CSS is the last to load but we need Elementor's post specific CSS + * to load after the theme so it can override things like the padding. Elementor's default + * frontend CSS contains 10px padding on all populated elements, which messes with our + * designs so we override this in our theme. However, to override it, we are forced to use a + * CSS selector with high specificity in our theme's CSS: + * .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated + * When Elementor generates its post-xx.css files for custom styling set on a page, the specificity + * of this CSS rule is the same as ours so it can never override ours unless it is the last stylesheet + * to load. The desired loading order is: + * 1) Elementor Global / Frontend CSS + * 2) Sage Main CSS (Theme CSS) + * 3) Elementor post specific CSS (post-xx.css) + * + * Elementor has a hook when registering CSS files - https://code.elementor.com/hooks/elementor-css-file-name-enqueue/ + * However, I couldn't get this to work properly with add_action and we need to use the post ID (get_the_ID()), which + * doesn't always seem to be available. I need to figure out where this hook should be added so that it is ready... + * + * For now, the solution is quite low-level and we inject a dependency of our theme's 'sage/main.css' CSS file into + * Elementor's post specific CSS file just before the stylesheets are printed. By having our theme as a dependency, + * Elementor's post-xx.css file is forced to load after the theme's CSS... + * + * TODO: revisit this and see if there's a better solution. See issue here: https://github.com/elementor/elementor/issues/7658 + */ +add_action('wp_print_styles', function() { + global $wp_styles; + $sage_css_handle = 'sage/app.css'; + $elementor_css_handle = 'elementor-post-'. get_the_ID(); + + // First, check if Elementor styles are loaded yet and if not, load them because we need to be able + // to make them a dependency of the main theme styles in order to have the correct CSS order... + // If we don't do this, on some pages that load Elementor late (eg. index.blade.php), the Elementor CSS + // will be loaded when fetching the builder content but it will be in the footer due to the late call. + // Although not perfect, it's easiest to always load the Elementor frontend CSS even if it's not strictly needed. + if (!isset($wp_styles->registered['elementor-frontend'])) { + \Elementor\Plugin::instance()->frontend->enqueue_styles(); + } + + if (isset($wp_styles->registered[$elementor_css_handle])) { + $wp_styles->registered[$elementor_css_handle]->deps = [$sage_css_handle]; + } + +}); + + /** * Theme assets */ @@ -23,7 +69,7 @@ add_action('wp_enqueue_scripts', function () { foreach ($styles as $stylesheet) { if (asset($stylesheet)->exists()) { - wp_enqueue_style('sage/' . basename($stylesheet, '.css'), asset($stylesheet)->uri(), false, null); + wp_enqueue_style('sage/' . basename($stylesheet, '.css'), asset($stylesheet)->uri(), ['elementor-frontend'], null); } } }, 100); diff --git a/wp-content/themes/CCV/resources/assets/styles/components/news.styl b/wp-content/themes/CCV/resources/assets/styles/components/news.styl index f1b9654..7cad486 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/news.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/news.styl @@ -7,6 +7,7 @@ constrain(margin-right, 5vw) constrain(margin-bottom, 5vw) max-width: 336px + min-width: 150px &-sizer padding-bottom: 100% diff --git a/wp-content/themes/CCV/resources/views/index.blade.php b/wp-content/themes/CCV/resources/views/index.blade.php index e87293b..9e865ea 100644 --- a/wp-content/themes/CCV/resources/views/index.blade.php +++ b/wp-content/themes/CCV/resources/views/index.blade.php @@ -2,11 +2,23 @@ @section('content') + @php + // Insert the content from 'news-index-header' Elementor page + $page = get_page_by_path('news-index-header'); + $translatedID = $page ? pll_get_post($page->ID) : null; + + if ($translatedID) { + echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display($translatedID); + } + + @endphp + +

{!! get_the_title(get_option('page_for_posts', true)) !!}

-
+
@if (! have_posts()) @alert(['type' => 'warning']) diff --git a/wp-content/themes/CCV/resources/views/partials/content-single.blade.php b/wp-content/themes/CCV/resources/views/partials/content-single.blade.php index e2ffd23..f22c4b9 100644 --- a/wp-content/themes/CCV/resources/views/partials/content-single.blade.php +++ b/wp-content/themes/CCV/resources/views/partials/content-single.blade.php @@ -1,5 +1,5 @@
-
+
{{-- Just here as a proportional sizer thanks to the padding --}}
diff --git a/wp-content/themes/CCV/resources/views/partials/content.blade.php b/wp-content/themes/CCV/resources/views/partials/content.blade.php index ce62e9f..35e2b2c 100644 --- a/wp-content/themes/CCV/resources/views/partials/content.blade.php +++ b/wp-content/themes/CCV/resources/views/partials/content.blade.php @@ -1,7 +1,9 @@ -