Emmanuel Atsé

Oh ok, it’s nice to know that there is a workaround by changing the browser for now

Thanks

Oh, well, at least it’s supported by Gutenberg custom html/css block, either in html tab by putting a style tag, or directly in css tab

View post on imgur.com

So for now I use it as a workaround but this could work on GS side I suppose

Yes because for this syntax attribute, you don’t specify a number here like 22, but literally the text <number>, (or other accepted names for this attribute depending on what you need MDN documentation) and I think the <> thing and anything in there is stripped out because it look like an html tag, but not in this case

Here is a screencast

I think I found the issue, here:

"selectors": [
                {
                    "value": " h3",
                    "attributes": {
                        "styleAttributes": {
                            "marginBottom": [
                                "0px"
                            ]
                        }
                    },
                    "css": ".card-item h3{margin-bottom:0px;}"
                },
                {
                    "value": " .icon-container",
                    "attributes": [],
                    "css": ".card-item .icon-container{width:200px;}"
                }
            ]

The “attributes” of ” .icon-container” is set to [], this is why it’s buggy

If I manually replace it by the basic value of {}, it then works normally

There may be somewhere in GS code that set it to array instead of object then

Hi,

Why? because if there’s a copy/paste feature, this should work, otherwise there is a buggy feature pending in GS for which one’s need to find and know a workaround. There’s just times where you might copy a class, I’m not explaining here many workflows that could use this feature, just simply reporting the problem.

And for your workaround, this is how it goes:

https://drive.google.com/file/d/1Vny5PJ8jI3QEkHJswPZoJ_TE6EM0zwE0/view?usp=sharing

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

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!

Hi, thanks, but I tested on Version 11.8.1 and the label element is still the same?