WIP: Custom Elements: Styles Enqeued after footer instead of head

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.

When creating custom Elements and using the public function enqueue_scripts() {} -Function, styles are enqeued at the end of the body, instead of inside the head-tag.
I disabled all my plugins and have noticed this bug on two different wordpress installations.

code
code1466×393 66.3 KB

links-in-footer

Edit: sry I the accordion-element is not to be seen inside that screenshot but the bug exists for all elements i created so far.

Best Regards
Suat

2

Bump:
After reading this about the optimized CSS file loading order to prevent CLS & FOUC, I was hoping this bug would be fixed
[Bricks 1.12 Changelog – Bricks]
I’m bumping this because <link> Tags are still being loaded outside of the <head> Tag.

This function is a temporary fix, but would be nice if it wasn’t necessary

add_action('template_redirect', function () {
  ob_start(
    function ($buffer) {
      // Extract content from the footer or main (if footer is doesn't exist)
      $footer_start_pos = strpos($buffer, '<footer');

      if (!$footer_start_pos) {
        $footer_start_pos = strpos($buffer, '<main');
      }

      if ($footer_start_pos === false) return $buffer;

      $footer_content = substr($buffer, $footer_start_pos);

      // Extract <link> tags for stylesheets within the footer
      preg_match_all('/<link[^>]+rel=[\'"]stylesheet[\'"][^>]*>/', $footer_content, $matches);
      $link_tags = isset($matches[0]) ? implode("\n", $matches[0]) : '';

      // Remove the <link> tags from the footer content
      $footer_content = preg_replace('/<link[^>]+rel=[\'"]stylesheet[\'"][^>]*>/', '', $footer_content);

      // Replace the original footer content with the modified one
      $buffer = substr_replace($buffer, $footer_content, $footer_start_pos);

      // Insert the extracted <link> tags into the head section
      if (!empty($link_tags)) {
        $buffer = preg_replace('/<\/head>/', $link_tags . "\n</head>", $buffer, 1);
      }

      return $buffer;
    }
  );
});
3

Hi @UserfreundSuat,

It seems I missed replying to your original thread earlier, apologies for that! I just wanted to let you know that we’re aware of the issue, and it’s already on our development log as something we plan to explore and improve.

Regarding the changelog item you mentioned (about styles loading in the footer), while it’s similar, that fix was specifically for templates, not custom elements. Custom elements will likely require a different approach to resolve.

1 Like