Site logo

Archived topic

CLS with block element generate_before_header

7 replies · Started by Rostyslav on June 14, 2022

Viewing posts 1–8 of 8

Hi Rostyslav,

How are you adding this CSS?:

.wp-container-1 {
                display: flex;
                gap: 0.5em;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: flex-end;
}

            .wp-container-1 > * {
                margin: 0;
}

It’s used in your Block Element and it seems to be loaded late. It maybe loading late because of Autoptimize.

How are you setting up Autoptimize? Can you try the settings here?: https://docs.generatepress.com/article/configuring-autoptimize/

Kindly let us know.

Hi there,

see this report:

https://www.webpagetest.org/video/compare.php?tests=220614_AiDc95_4K7-r:2-c:0&highlightCLS=1

The issue is the late loading styles for the core Social Icons block.
The issue with core blocks is the loading order of their CSS. Some CSS is inline, some is in the footer, some is in a stylesheet.

The issue here is the alignment CSS those icons uses is loaded by core in the Footer.

Personally i would replace the blocks with a GenerateBlocks Buttons block. Its CSS is dynamic and loaded in the head.

Hi,

So, you dont recomend me using any of the ´wordpress gutenberg blocks at all? So how can I add an Image block with generateblocks? (not a backround image)

Thank!

So, you dont recomend me using any of the ´wordpress gutenberg blocks at all?

No, thats not what i meant.
You can use any of the core blocks.
But for some designs i would recommend using GenerateBlocks instead, especially for above the fold content.

As a side note: GB 1.5 will introduce an Image Block. We don't recommend it as a replacement for the core image block, but when you need more styling controls.

Thank!

Are you planing to introduce a GB list block and table block?

Tables are a tricky one, so i doubt it.

Lists are something we are looking into :)

This archived topic is closed to new replies.