Post css makes duplicated and outdated css

  • Emmanuel Atsé

    (@eatse)


    1 year, 2 months ago

    Hi,

    Troubleshooting the rendering of some of my page a was editing, I noticed that some of my local classes were duplicated in the browser dev tools.

    I checked the raw html of the page, and indeed, there was a “greenshift-post-css-inline-css” style tag, with many classes already defined in “greenshift-global-css-inline-css”, sometimes with outdated properties from previous edits.

    So, I wondered where this could come from as those old css rules (some times conflicting) are not present in the raw page code in the editor, and it fact it was in a post metadata called “_gspb_post_css”.

    I deleted this meta, and resaved the page (that regenerated the meta), and now it seems that everything is ok and not duplicated with some old css anymore.

    I don’t know how to reproduce this issue though…

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support Illia Sanz

    (@illiagreen)

    1 year, 2 months ago

    Hi. Please select local classes in new elements from class selector. You don’t need to duplicate blocks with registered class to use local classes

    Plugin Support Illia Sanz

    (@illiagreen)

    1 year ago

    closing, this should be fixed in previous updates

    Thread Starter Emmanuel Atsé

    (@eatse)

    10 months, 3 weeks ago

    Hi @illiagreen

    I think I finally found the answer to this problem in another topic you answered:

    If I edit a page via Site Editor, and not Page Editor, GS will add an “inlineCssStyles” attributes to blocks.
    And what I maybe did, is to sometimes edit my page via page editor, and some other times via Site Editor

    This is a minimal to reproduce example to the problem:

    1. Create a page via classic WordPress admin > Pages > Add page
    2. Add a div element, add it some width and height, with red background color, then save.
    3. Now go to site editor to edit this page, and make the div blue then save.
    4. Come back to classic page editor and make the div green.

    The div will appear green in the editor, but when you save and check the rendered page, it will be blue, with the gspb-xxx class duplicated, and the CSS rules from inlineCssStyles overriding the others:

    Duplicated css

    Is there any setting to disable this behavior? (the creation of inlineCssStyles attributes)
    Also because just browsing through pages on the Site Editor triggers those attribute changes (even without entering into the block editor)

    Screencast: https://drive.google.com/file/d/1AHbuFHIgtMB9rL3ziG-wDgCM1Phk-b9h/view?usp=sharing

    Thanks!

    Plugin Support Illia Sanz

    (@illiagreen)

    10 months, 3 weeks ago

    GS settings – css management and enable inline style saving and merging styles

    Thread Starter Emmanuel Atsé

    (@eatse)

    10 months, 3 weeks ago

    Yes, I retried by checking the settings:

    • Css location : Inline in Head
    • On-Fly Inline Merged CSS : Checked (Greenshift theme)

    Site editor keeps adding this inline attribute on blocks, like I mentionned, even just viewing the page (blue button “Review 1 Change” appearing like in the screencast)

    Plugin Support Illia Sanz

    (@illiagreen)

    10 months, 2 weeks ago

    It must be Inline In block (not inline in head)

    Thread Starter Emmanuel Atsé

    (@eatse)

    10 months, 2 weeks ago

    We should be able to use Site Editor with inline in head, which is the default setting in GS, because as it is said, it’s a bit problematic setting…

    Use Inline in block only if you have some issues with not updating styles of blocks or cache. Once saved as inline in block, styles can be overwritten only when you update post with blocks

    Take a new Greenshift user:

    1. Installs Greenshift plugin & theme
    2. Adds some pages from the admin Pages menu, which he styles with GS blocks
    3. At some point he goes in the Site Editor and edit some pages
    4. Another time he reconnects to admin, and goes to normal Pages menu
    5. When he edits this time, everything is great when styling GS blocks in editor, but it renders weird things on frontend (head styles fighting with inline styles from previous edits in site editor)
    6. Now he is lost and struggles many hours understanding whats happening

    In the FSE tutorials, the “inline in block” is not set if I’m correct, so this should work normally

    Plugin Support Illia Sanz

    (@illiagreen)

    10 months, 2 weeks ago

    Inline css in editor because editor do not have post meta to save css

    if you enabled Merging css option, styles will be always in head. Please enable it first

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

The topic ‘Post css makes duplicated and outdated css’ is closed to new replies.