[Support request] Adding custom attributes to GenerateBlocks

[vast]

Hi there,

When a container is created and it includes a grid e.g. 2×2, it generates the below (sample excerpt).

<div class="inside-article">		
<div class="entry-content" itemprop="text">
<div class="gb-container gb-container-[alphanumeric_value_01]"><div class="gb-inside-container">
<div class="gb-grid-wrapper gb-grid-wrapper-[alphanumeric_value_02]">
<div class="gb-grid-column gb-grid-column-[alphanumeric_value_03]"><div class="gb-container gb-container-[alphanumeric_value_03] [custom_css_value]"><div class="gb-inside-container">
<figure class="wp-block-image size-large is-resized"><img /></figure>
</div></div></div>

Each descending/child div includes an alphanumeric value [alphanumeric_value_01] e.g. 4cc51234.

It seems that a custom class can only be added to the outermost or inner-most container e.g. [custom_css_value].

Is there an option to add a custom attribute e.g. ID, class, etc to the a preceding div parent e.g. <div class="gb-grid-column gb-grid-column-[alphanumeric_value_03]"> which generates CSS selector such as `@media (max-width: 768px)
.gb-grid-wrapper-[alphanumeric_value_03] > .gb-grid-column {`

The reason is to define/restrict the dimensions of the intended container to avoid large layout shifts.

[David]

Hi there,

currently thats not possible, we are looking at whether to add additional CSS fields for the ‘wrapper’ containers.

However the simple fix is to use the :nth-child CSS pseudo property. For example:

Give the Grid Container ( outer wrapper ) an Additional CSS Class in Settings > Advanced eg. restrict-grid-columns

Then this CSS:

.gb-grid-wrapper.restrict-grid-columns > .gb-grid-column:nth-child(1) {
	/* Your styles */
}
.gb-grid-wrapper.restrict-grid-columns > .gb-grid-column:nth-child(2) {
	/* Your styles */
}
.gb-grid-wrapper.restrict-grid-columns > .gb-grid-column:nth-child(3) {
	/* Your styles */
}

What i am unsure of is why the GB settings would cause a layout shit – this generally only happens if the CSS were deferred or the columns contain an element such as an image that has no Width / Height Attributes. If you have an example of the issue – i would be happy to take a look.

[vast]

Thanks David.

It would be great if the option to include the additional attributes was included in the next release. It would simplify the changes.

In the meanwhile, the issue seems to be native to most of the libraries. In the current example, we are using the Dev site library and layout shifts occur at various points of rendering.

You can test this using the rendering and layout shifts options in Google Chrome. Google Pagespeed Insights also reports it – https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgpsites.co%2Fdev%2F

[David]

The small amount of CLS i can see there looks to be related to the Font loading after First Content Paint, and some of the SVGs are slightly rescaling after load. But the CLS is minor and would be resolved with some optimization.

So whats the intention – that you can seet a max-width on the columns so they won’t rescale ?

[vast]

Thanks David. The intention is to set a maximum width and height (or other recommendations) so that resources such as fonts and images don’t result in a shift.

[David]

The problem with setting max dimensions especially height, is that you will run into possible overflow issues. It’s better to resolve the content reflow then try to contain it.

[vast]

Thanks David.

Any suggestions as to the improvements for the site libraries in general? They tend to have varying differences and it would be great to have a solution that is applicable for all of them.

[David]

The main issues are see ( the Read site being a prime example ) is the font loading. We should look at preloading those fonts on the Demo site to remove that…. however, you would have to apply the same to your site install.

[vast]

Thanks David.

As preloading can be achieved using link rel="preload", can this be built into the theme? It would allow for minimal change with the option to enable or disable preloading.

[David]

The typography module needs a thorough overhaul , i’ll add that to the wishlist

[vast]

Thanks David. Any ideas of when an update will be released for adding the additional attributes as well as the font module?

[vast]

Hi David,

Is there an update on the font attribute feature?

[David]

Other font attributions such as preloading are something still under consideration.
We intend to implement a localised font solution in a future GP Premium update, at the time we’ll revisit preloading.

[Author]

Posts