Fix stylesheet loading order problem with Elementor. WIP #2684 @3

diff --git a/wp-content/themes/c6/app/setup.php b/wp-content/themes/c6/app/setup.php
index e28f182121393989ddfb01c197c78d8ffaebbc0c..4f3c8cf79a480d2d3d3452f6efd2505b66b3dae8 100644 (file)
--- a/wp-content/themes/c6/app/setup.php
+++ b/wp-content/themes/c6/app/setup.php
@@ -7,6 +7,40 @@ use Roots\Sage\Assets\JsonManifest;
 use Roots\Sage\Template\Blade;
 use Roots\Sage\Template\BladeProvider;
 
+/**
+ * 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;
+    $elementor_css_handle = 'elementor-post-'. get_the_ID();
+
+    if (isset($wp_styles->registered[$elementor_css_handle])) {
+        $wp_styles->registered[$elementor_css_handle]->deps[] = 'sage/main.css';
+    }
+});
+
 /**
  * Theme assets
  */