Website (editor) in Quirks mode because “var WPTB_CFG” before

  • Resolved Jan Weiss

    (@rumpel2116)


    9 months, 3 weeks ago

    Hi there,

    version 2.0.7., both regular and PRO version. WordPress 6.8.1, Chrome, Windows 11. Sent you a message through your contact form on your website with the URL to the website on May, 22nd, didn’t get a reply though.

    I believe as a follow-up to the “headers already sent error” topic, we now get a notice in the console (when in any editor), that Quirks mode is in effect, because the HTML does not start with <!DOCTYPE html> (instead, the <script> holding the var WPTB_CFG is there, before). Ends up bringing up possible rendering issues.

    Following the fix you and @ac2a worked out there, I checked the file as well and saw you still add the code for the var WPTB_CFG with a simple echo.
    I would suggest adding it with proper WordPress functions like wp_add_inline_script(), that solves the problem for me:

    In the function public static function enqueue() (line 24) you call both functions
    self::enqueue_config(); and self::enqueue_i18n(); after each other, right at the beginning. The first one echoes the JS-global, the second does some i18n. They are both always called, no dependencies.
    So the easiest way to use wp_add_inline_script() for me was to swap the order of the two functions (call enqueue_i18n() first), and then in the second one, enqueue_config(), do not echo the global but add it as inline script at the beginning of the i18n JS file, that was added just before in the enqueue_i18n():

    // old direct echo, remove.
    // echo '<script type="text/javascript">var WPTB_CFG = ' . json_encode($data) . ';</script>';

    // new way to add JS global at the beginning of i18n file (inline).
    // needs the i18n to be enqueued already, therefore swap enqueue-order in enqueue().
    wp_add_inline_script(
    	'wptb-i18n',
    	'var WPTB_CFG = ' . json_encode($data) . ';',
    	'before'
    );

    Follows the code example below the wp_add_inline_script() docs.

    If you have another script that you always enqueue on the admin, you could maybe prepend it there instead of misusing the i18n file for holding the data. But still, this way no more quirks-mode and save as you always enqueue those two together.

    • This topic was modified 9 months, 3 weeks ago by Jan Weiss.
Viewing 8 replies - 1 through 8 (of 8 total)
  • BlogLogistics

    (@ac2a)

    9 months, 3 weeks ago

    If I understand correctly (I’m still learning), the old approach that @rumpel2116 pointed out results in the script being output immediately, often before WordPress has started sending the <html> tag or <!DOCTYPE> which can trigger rendering issues due to Quirks mode.

    The updated method works better because WordPress waits until the appropriate point in the page load to output the <script>, after the <!DOCTYPE> and <html> have already been sent, preventing quirks mode from being triggered.

    Any chance @protibimbok might be able to apply these changes to the plugin?

    Thread Starter Jan Weiss

    (@rumpel2116)

    9 months, 3 weeks ago

    Yes, you understood that correctly: The issue with the present code, and how the new code suggestion improves that. Thanks for clarifying!

    Plugin Contributor Zahin Azmayeen

    (@permafrost06)

    9 months, 3 weeks ago

    Hi @rumpel2116 and @ac2a

    I didn’t have a chance to look into the headers already sent issue. For some reason, I can’t recreate the quirks mode issue either. I’m looking into both issues and I’ll post an update here when I find something to share.

    In the meantime, if you have some more info about your server environment, please share with us. I ask this because I saw @protibimbok mentioning that this issue doesn’t occur to everyone.

    Thank you for your patience and cooperation.

    • This reply was modified 9 months, 3 weeks ago by Zahin Azmayeen. Reason: clarification
    BlogLogistics

    (@ac2a)

    9 months, 3 weeks ago

    @permafrost06 You asked for my input, that you’re looking at both issues. I’m replying here as you requested.

    WordPress 6.8.1
    PHP 8.3.22
    WPTB plugin: 2.0.7

    For caching (don’t think this is of issue, but just in case):
    SQLite: 3.34.1
    APCu 5.1.24
    igbinary 3.2.16
    SQLite Object Cache plugin 1.5.6

    Note: WPTB Plugin has edited code that still does not match repository. As per this thread: https://wordpress.org/support/topic/assets-php-causes-headers-already-sent-error/ these were the peritinent instructions:

    “…Can you please replace the content of the file: /wp-content/plugins/wp-table-builder/v2/inc/Utils/Assets.php with WP Table builder v2.0.7 headers already sent fix – Pastebin.com…” (https://pastebin.com/vGCdVWqU)

    The input from @rumpel2116 makes a lot of sense. I’ve not had the time to edit and test at my end just yet, to see fix in action, but looking forward to doing that.

    Plugin Contributor Zahin Azmayeen

    (@permafrost06)

    9 months, 3 weeks ago

    Thank you @ac2a I might still require more info from you. This is turning out to be quite the issue to debug.

    Thread Starter Jan Weiss

    (@rumpel2116)

    9 months, 3 weeks ago

    I see that with version 2.0.8 or 2.0.9 you solved the problem, although it does not appear in the changelog. The script-line is still echoed instead of using proper WP-functions but echoed in the footer now, which prevents it from being output too early.

    Thanks for fixing this issue!

    Plugin Contributor Zahin Azmayeen

    (@permafrost06)

    9 months, 3 weeks ago

    @rumpel2116 in that case, it seems like @protibimbok figured everything out and adapted the fix as needed. If you’re happy with the current code and behaviour, I’d like to stop my investigation into this.

    Thread Starter Jan Weiss

    (@rumpel2116)

    9 months, 2 weeks ago

    Thanks @permafrost06. Not perfect, but good enough

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Website (editor) in Quirks mode because “var WPTB_CFG” before’ is closed to new replies.