Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Adding custom attributes to GenerateBlocks

Home Forums Support Adding custom attributes to GenerateBlocks

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1540711
    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.

    #1540894
    David
    Staff
    Customer Support

    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.

    #1541414
    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

    #1542514
    David
    Staff
    Customer Support

    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 ?

    #1542743
    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.

    #1544850
    David
    Staff
    Customer Support

    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.

    #1544902
    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.

    #1545796
    David
    Staff
    Customer Support

    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.

    #1546745
    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.

    #1549071
    David
    Staff
    Customer Support

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

    #1549981
    vast

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.