Hi Nikko,

It didn’t work. Now both colored buttons are Pink. :(

Check it out. :(

Ismael,

This is not my code and I did not add padding. These are the pre-coded Blocks from Gutenberg. All I did was change the text.

I had to rebuild them. Went back to the Block Editor, picked the two columns with Background and that’s exactly what it is. I did not touch the code or add any padding.

That fixed the problem on Desktop. That particular Block with Background has changed (by WordPress – not by me) they’ve created one large block split in two, they added another block into each half. Again, that’s what I noticed. I did not modify Gutenberg’s padding code. I noticed the exact same behavior on your sandbox. When you see the block on Mobile, the two columns lose all right/left padding.

I have not updated the theme to the latest version. That’s why I asked for an ETA. So, if you guys developed functionality to address this all you had to say is, we fixed it and it’s on the latest release.

When you say you added a config file, can you explain what that means? Is is accessible via the Enfold Settings? Do I have to adjust anything there? Or will it fix the issue by itself?

Do I have to go back to the original Gutenberg Block with Background (2 columns)?

I don’t have much time for this. My surgery has been scheduled and I am supposed to work towards staying alive and getting support for my post-op. Then get ready for the second surgery. Plus this is not all I do. So, please make things simple for me. I have given you every little detail already.

Thank you for understanding.

Havi

And here is the reply from the WordPress forum – even though I did mention I came to you first and shared all the troubleshooting I did to show you it was a theme compatibility issue.

Since you use a commercial theme and need support, please go to their official support channel. In order to be good stewards of the WordPress community, and encourage innovation and progress, we feel it’s important to direct people to those official locations.

https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990

Forum volunteers are also not given access to commercial products, so they would not know why your commercial theme or plugin is not working properly. This is one other reason why volunteers forward you to the commercial product’s vendors. The vendors are responsible for supporting their commercial product.

Commercial products are not supported in these forums.

Hi Rikard,

No way I am going to ask WordPress about this. It’s way beyond my paygrade.

How did you add the padding to the column inside the Block Editor? Did you create a class? I only see two elements I can change, and that’s background and text colors. But your style shows as:

padding-top:40px;padding-right:20px;padding-bottom:40px;padding-left:20px; background-color: #36a8c7; border-color: #36a8c7;

Where did you set this padding?

Thanks,

Havi

Ok. Enabled 2021 and the padding is not being overriden.

So, the padding override is an Enfold problem with WordPress 6.0. You should be able to replicate this. Also, it’s easy.

Add a Column Block. Two columns (50% each). Add text to both, change the background color and the text color. That’s it.

Help!

Maybe when you fixed: background image set in theme options->”General Styling” overrides Color Section custom background color on 4.9.1, this happened?

But this does NOT happen on Enfold 4.9. That’s on the Live site.

Note: I will refresh staging and see if updating WordPress and not Enfold avoids this issue. At least I will be able to update WordPress.

Refreshed Staging, Enfold 4.9 and WordPress 6.0 and the problem of padding being overriden happens again.

Does not happen with other themes. Happens to Enfold.

>> Something changed with WordPress 6.0 that broke Enfold. :(
Pls help!

• This reply was modified 1 year, 11 months ago by havi. Reason: Something changed with Wordpress 6.0 that broke Enfold. :( Shared Staging refreshed, Enfold version 4.9 updated to Wordpress 6.0

Hi Rikard,

The reason they are different is because the versions of WordPress and of Enfold are different.

Nothing changed on the website design itself.

I can switch to a different theme on Staging, and if the same thing happens, it’s a WordPress issue. If it doesn’t, it’s an Enfold issue. The version of Enfold on the Live site is 4.9 (as stated earlier) but on Staging it’s the latest version.

The other way to do this, is that you test adding a two column with background to your own testing sites and see if you can replicate it. This would be greatly appreciated as I am currently fighting cancer and extremely short on time (needless to say, scared) as I get ready for surgery.

Thank you in advance!

Havi

Hi Rikard,

Yes. I see it on my older Macs. But on the M1 processor, it blocks it on Safari. I have checked on a Private Safari window and I get the same error. I Empty Caches with the Develop option enabled – of course, and nothing.

This leads me to think it’s the M1 processor as other things that were cached, do clear up.

Is there a solution? Or maybe not use it as everything from Apple is coming up with the M1 and now the M2 chip. No more Intel.

Best regards,

Havi

Hi Mike!

No. But that’s interesting.

Here’s how I do it:

I create a Widget on the WordPress Admin with the TOC selecting both H2 and H3.

Then on the Block editor I add a Shortccode Block, and inside I add the Enfold Shortcode [av_sidebar widget_area='TOCWidget' av_uid='av-h6k48'] I sent you a link to how it looks with H2s only in the Private content.

But if you change the WordPress Widget to select H3s, it will pick up the Widget Title.

And yes, the Block Editor has useless dual background blocks but no way to add a WordPress Widget. I wish I would have stayed with the Classic Editor for this site but I decided to go with the flow.

Best regards,

Havi

Hi Ismael,

Answering your question:

Do you see the same behavior when you update WordPress to the latest version?

Yes.

I see the same behavior. Both wordpress and Enfold are fully updated on other sites and the behavior is identical.

1- If Lazy Loading is enabled on Enfold Performance settings >> loading=”lazy” displays on the HTML for the image
2- If Lazy Loading is disabled on Enfold Performance settings >> there is no loading=”lazy” displaying on the HTML for the image

I can use my workaround with the Block Editor for an image Block. I cannot use my workaround with the Classic Editor on a Blog Post image.

I can use Enfold’s ALB feature if I use the ALB Editor to lazy load or not an image. Maybe this could be a feature to consider in the near future to help with Core Web Vitals? ;) Adding the same Enable Lazy Loading to the image itself but on the Classic and Block Editors? Maybe it’s not feasible but maybe it is.

It would be great. Also, maybe other people have come up with a solution to disable Lazy Loading of a single image (above the fold) on WordPress. But it’s definitely enabled/disabled from Enfold (it is possible that it’s a WordPress feature that Enfold manages. Actually, I’m sure that’s the case. It would be great if it would manage it a wee bit more and that would be awesome.)

Any help or ideas or hope on this matter would be greatly appreciated.

I have no clue why you don’t see it though.

TIA!!

Havi

Ismael,

This is a wordpress/theme topic.

Check this out: https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/#highlighter_892127

Copying certain interesting paragraphs:
By default, WordPress will add loading=”lazy” to all img tags that have width and height attributes present. Technically this is handled on page output, similar to how responsive images are facilitated in WordPress by adding srcset and sizes attributes. To improve server-side performance of the two features, a new wp_filter_content_tags() function has been introduced so that img tags only need to be parsed once while then deferring the modifications to more specific functions related to the feature.

By default, WordPress will add a loading=”lazy” attribute to the following images:

images within post content (the_content)
images within post excerpts (the_excerpt)
images within text widgets (widget_text_content)
avatar images (get_avatar)
template images using wp_get_attachment_image() (wp_get_attachment_image)
Developers can customize this behavior through various filters, the most foundational one being wp_lazy_loading_enabled, which receives the following parameters:

$default: The boolean default of true to filter.
$tag_name: An HTML tag name. While per current WordPress behavior this will always be img, it should be noted that the loading attribute is a generic attribute and may be expanded to support further elements, e.g. iframes, in the future.
$context: A context string as additional parameters, indicating where the image technically comes from, usually a WordPress hook name. Based on how WordPress itself uses lazy-loading, the context can be one of the five values in parentheses in the list above.

And it gives you what the Enfold switch does. Which is great. But then it goes on:

In order to modify the loading attribute for very specific images, there are two different approaches, depending on the type of images:

For images that appear within a content blob (e.g. the_content, the_excerpt, widget_text_content), another new filter wp_img_tag_add_loading_attr can be used, which receives the following parameters:

$value: The loading attribute value, either “lazy” (default), “eager”, or false. If you want to disable lazy-loading for an image, it is strongly recommended to specify false so that the attribute is omitted altogether.
$image: The entire image HTML tag with its attributes.
$context: The context, similar as described for the other filter above.
For example, if you would like to disable lazy-loading for a specific attachment image with ID 42 in size “large” within post content, you could use the following code snippet:

And it gives you the snippet – but doing this is similar to my workaround for a specific image (taking the HTML that is the output and changing lazy to eager)

Theme developers are recommended to granularly handle loading attributes for images anytime they rely on wp_get_attachment_image() or another function based on it (such as the_post_thumbnail() or get_custom_logo()), depending on where they are used within templates. For example, if an image is placed within the header.php template and is very likely to be in the initial viewport, it is advisable to skip the loading attribute for that image.

And the Core Web Vitals issue was actually identified by them but it seems that on their experiment they didn’t consider all the 3rd party calls and javascript running times that can delay the LCP image from being loaded, so they write:
“Experiments using Chrome for Android have shown that the impact of such loading=”lazy” images in the initial viewport on the Largest Contentful Paint metric is fairly small, with a regression of <1% at the 75th and 99th percentiles compared to non lazy-loaded images – yet it is a consideration to make where theme developers can apply some fine tuning for even better user experience.”

So, maybe this could be a good new feature for Enfold? Allowing to Disable Lazy Loading on certain images from inside the Block Editor?

What concerns me is that you don’t see this on your installation. As it seems to solve mine with my HTML insertion/loading eager workaround. And Enfold is amazing when it comes to the ALB as it allows you to Enable/Disable Loading Lazy on an single image basis. All that’s missing is applying the same to a native or non-ALB image.

Please, let me know if my understanding of what is going on is correct. And if so, maybe this can help others who would like to implement my workaround or the one on functions.php that wordpress offers.

Thank you so much!

Havi

Yes, it disappears when I disable Enfold’s option.

<figure class="aligncenter size-full"><img width="900" height="180" src="https://mindcrowd/wp-content/uploads/2021/12/mindcrowd-contributors-faq.jpg" alt="MindCrowd Contributors: University of Arizona, TGen, City of Hope National Medical Center, University of Miami Miller School of Medicine, Johns Hopkins School of Medicine, Georgia Institute of Technology, Emory University, Alzheimer's Prevention Initiative." class="wp-image-1049" title="MindCrowd " srcset="https://mindcrowd/wp-content/uploads/2021/12/mindcrowd-contributors-faq.jpg 900w, https://mindcrowd/wp-content/uploads/2021/12/mindcrowd-contributors-faq-300x60.jpg 300w, https://mindcrowd/wp-content/uploads/2021/12/mindcrowd-contributors-faq-768x154.jpg 768w, https://mindcrowd/wp-content/uploads/2021/12/mindcrowd-contributors-faq-705x141.jpg 705w" sizes="(max-width: 900px) 100vw, 900px"></figure>

I am using my workaround on the same page on staging (and on the live site).

So on the staging page you can see two images. The one on top has been manually inserted via HTML (cannot edit the block editor – it throws an error) and the one on the bottom is the regular image added with the block editor on the page: https://staging-mindcrowd.kinsta.cloud/faq/

I disabled Lazy Loading on Enfold Performance settings and you can see, loading lazy does not show on the code.

Look forward to the solution. This is not a good workaround.

Best regards,

Havi

Hi Ismael!

Thank you for the reply.

My goal is to stop the 1st image that renders above the fold from being Lazy loaded. The rest of the images on any page/post, should be lazy loaded.

So, my Enfold settings under Performance are set to Enable Lazy Loading.

How do I disable Lazy Loading on the first image that displays on the page? The Page is built with the block editor and not the ALB (which makes it harder to control if it should be Lazy Loaded or not) But I can use this workaround for those Posts that render an image above the fold as well.

Here’s the page: https://staging-mindcrowd.kinsta.cloud/faq/

Is there a CSS class I can create and add to the Image Block Advanced settings?

Please, let me know if you need admin access or if this was maybe fixed on the new version of Enfold that came out today?

Havi

Re: The Featured Image Block is displayed under Blocks > Theme > I see Query Loop, Post Title, Post Content, Post Date, Post Excerpt, Post Featured Image, Login/out and Posts List (as Enfold is the only theme I have installed, I assumed these were Enfold’s – but never mind, This is not important as what I tried didn’t work as Adding a Featured image makes it display at the top of the page and there is no way to hide it from the page)

Hi Rikard,

Tested it and works on the footer but it is also affecting all other mailchimp messages not on footer and not with #163248 background so now those cannot be seen. It just shows a blue box.

How do we limit this to the footer only?

Thank you!

Havi

Hi Nikko,

Thank you! I always disable both CSS and JS merging and compression before updating the theme (and many plugins), Staging is not a Cached environment but I always clear caches and browser caches as well.

Thank goodness it didn’t go so badly but I see two issues.

1- On the Magazine Tags is not selected to eb displayed but they are rendered now. If you see the Live site, Tags do not show. I checked the element Magazine and Tags is not checked. Tried checking and unchecking but didn’t work. How do I get rid of those?

2- This happens on the previous live version. On the Footer, for the Mailchimp Widget, when you enter an email, the background for the message changes to #fff7f7 – which needs to be used as the background for the Email Address field. As the text on the Footer is also #fff7f7, you cannot read the message unless you highlight it. Tried to tinker with the code on Chrome dev but could not change the background to dark blue. I only want to change it for the Footer. Or, basically, the message should not affect the background. The color should match the footer color. How do I do this? Feel free to use emails ending in @testing.com so I can then removed them from Mailchimp. The email will end up on the Mailchimp database.

Thank you in advance!

Havi

PS: I am sooooo relieved to see that the other issue was related to the Staging environment itself.