Version 2.0/2.0.1 Missing Critical CSS

  • Resolved gewagner

    (@gewagner)


    4 years, 3 months ago

    After upgrading from version 1.75 to version 2.0/2.0.1, the following CSS is missing from the files enqueued by Otter Blocks.

    .wp-block-themeisle-blocks-font-awesome-icons
    .wp-block-themeisle-blocks-font-awesome-icons-container

    A reusable block containing imbedded (hand-coded) HTML relies on these selectors to work properly.

    Previously these selectors appeared in /otter-blocks/build/blocks/style.css. Now they do not appear in any CSS file Otter Blocks enqueues.

    The link above is still running version 1.75. Inspect “Get Directions” at the bottom of the page and remove either of the selectors/classes mentioned above and the page gets distorted.

    Any ideas appreciated. Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Hardeep Asrani

    (@hardeepasrani)

    4 years, 2 months ago

    Hey @gewagner,

    We modified the code to make sure the CSS is only enqueued if the block is used on the page. If the block is not used on that page then we don’t enqueue the CSS to prevent loading extra code on the page which can slow down your website.

    Let me know if you have any follow up questions.

    Thread Starter gewagner

    (@gewagner)

    4 years, 2 months ago

    Based on my testing, I agree that the CSS is only enqueued if the block is used on the page. Unfortunately, if the block is used inside a reusable block on the page, the CSS is not enqueued. Any thoughts?

    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    4 years, 2 months ago

    > Unfortunately, if the block is used inside a reusable block on the page, the CSS is not enqueued.

    It was an issue with Otter 2.0 but we fixed it yesterday on Otter 2.0.1, so if the reusable block has a block, the scripts will be enqueued.

    Is it not working properly for you?

    Thread Starter gewagner

    (@gewagner)

    4 years, 2 months ago

    If I insert an “icon block” before my code, all of the CSS is enqueued and my code works.

    If I remove that “icon block, the CSS is not enqueued. Please keep in mind the fact that my code is within an “html block” that is highly customized to meet my needs.

    A copy of my “html block” follows. If you have time to analyze why otter blocks 2.0.1 will not parse this code, please let me know. Thanks in advance.

    <p class=”wp-block-themeisle-blocks-font-awesome-icons has-nv-site-bg-color has-text-color” id=”hcpt-get-directions” style=”font-size: 1.5em; padding: 2px 2px 2px; margin: 10px 0px 10px; text-align: center;”>
    <span class=”wp-block-themeisle-blocks-font-awesome-icons-container” style=”vertical-align: middle; padding: 5px 10px 5px; background: var(–nv-primary-accent); border: 1px solid #ffffff;”>

    <span style=”color: var(–nv-site-bg); float: left !important; padding-right: 10px;”>
    <i class=”far fa-map”></i>
    </span>
    <span style=”float: right !important; text-decoration: none; color: var(–nv-site-bg);”> Get Directions</span>

    </span>
    </p>

    Thread Starter gewagner

    (@gewagner)

    4 years, 2 months ago

    Thanks for your help. There is no need to look into this further since I rewrote the “html block” so that it no longer relies on Otter Blocks. As I see it, Otter Blocks will not visit any “html block” when parsing. It only looks for “themeisle” blocks.

    Plugin Author Hardeep Asrani

    (@hardeepasrani)

    4 years, 2 months ago

    @gewagner Yea, that will make users very unhappy if we enqueue assets where they are not needed. 🙂

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

The topic ‘Version 2.0/2.0.1 Missing Critical CSS’ is closed to new replies.