Hidden Content

Hi Christian,

Thanks for reaching out. We will look into this and follow up by tomorrow at the latest.

Best,
Nick

Hi Nick,

Thank you! I will be waiting for a response!

Thanks,
Christian

Hi Christian,

I apologize for the delay. In looking into this, we discovered that this issue originates with how WordPress handles block-based widgets. Normally, when a block is rendered on the frontend, only the block content is rendered. Block Visibility can control how the block is rendered, and that’s how it shows/hides the block.

With block-based widgets, the process is much the same, except that WordPress adds additional markup around the block content for top-level blocks.

So for example, if you added an Image block as a widget, the frontend markup would look like:

<div class="widget widget_block widget_media_image">
    <div class="widget-content">
        (Image block content) <-- Block Visibility can control
    </div>
</div>

As you discovered, if you hide the Image block in our example, the wrapper markup still exists. Furthermore, since your theme adds styling to elements with the class .widget, this extra markup is even more noticeable.

In this exploration, we discovered that this wrapper markup only occurs on top-level block widgets. So if you have a Group block that contains many other blocks, it would look something like this:

<div class="widget widget_block">
    <div class="widget-content">
        <div class="wp-block-group">
            <div class="wp-block-group__inner-container">
                (Other blocks inside the Group block)
             </div>
        </div>
    </div>
</div>

Long story short, WordPress does not provide a way for us to modify the widget wrapper markup based on the blocks that it contains. Since this is a larger WordPress issue, I am going to close out this ticket and have moved this discussion here. We will be reaching out to the WordPress/Gutenberg team to see if changes can be made in a future release.

Thank you again for reporting this issue and I apologize that there isn’t a solution yet given how new the block-based widget screen is. That said, if one comes available, we will definitely add it to the plugin.

Please let me know if I can be of further assistance.

Best,
Nick

Hello Nick,

Thank you for your very detailed explanation.

If I understand what your saying, your plugin only affects single widgets/blocks, and not grouped widgets/blocks. With that being said my widgets are all single and not grouped, so I’m not sure why it’s not working.

I did find that Jetpacks visibility settings hide the background of the widget, but I’m in need to hide the widgets based on user role. That is why I turned to your amazing plugin.

Here is the HTML of one of the widget/block:

<section id="block-23" class="widget widget_block masonry-brick" style="position: absolute; left: 0%; top: 0px;">
  <div class=" wp-block-grimlock-section grimlock-section--btn-link grimlock-section--product-lines region grimlock-region grimlock-region--mt-0 grimlock-region--mb-0 grimlock-region--pt-5 grimlock-region--pb-5 grimlock-region--12-cols-center region--12-cols-center grimlock-region--container-classic region--container-classic grimlock-section section" style="border-top-color:#eceeef;border-top-style:solid;border-top-width:0;border-bottom-color:#eceeef;border-bottom-style:solid;border-bottom-width:0;z-index:0;">
    <div class="region__inner" style="padding-top:5%;padding-bottom:5%;background-color:rgb(255, 255, 255);">
      <div class="region__container">
        <div class="region__row">
          <div class="region__col region__col--1">
            <div class="grimlock-reveal-element grimlock-reveal-element--thumbnail">
              <div class="grimlock-section__thumbnail section__thumbnail">
                <img src="https://905340.smushcdn.com/2218815/wp-content/uploads/sites/5/OBG-LOGO-1-150x150.jfif.jpg?lossy=1&strip=1&webp=1" alt="" class="grimlock-section__thumbnail-img section__thumbnail-img img-fluid no-lazyload">
              </div>
              <!-- .section__thumbnail -->
            </div>
          </div>
          <!-- .region__col -->
          <div class="region__col region__col--2">
            <div class="grimlock-reveal-element grimlock-reveal-element--content">
              <div class="grimlock-section__header section__header">
                <h2 class="grimlock-section__title section__title grimlock-display-3 display-3"> Product Lines </h2>
              </div>
              <!-- .section__header -->
              <div class="grimlock-section__footer section__footer">
                <a href="https://obagi.abcotest.com/product-category/obagi/product-lines/" class="grimlock-section__btn grimlock-section__btn--1 section__btn btn grimlock-btn-link btn-link"> Browse </a>
              </div>
              <!-- .section__footer -->
            </div>
          </div>
          <!-- .region__col -->
        </div>
        <!-- .region__row -->
      </div>
      <!-- .region__container -->
    </div>
    <!-- .region__inner -->
  </div>
  <!-- .grimlock-section -->
</section>

Hopefully this can help you find away to update your plugin to work for me.

Thanks,
Christian

• This reply was modified 2 years, 9 months ago by christianj40. Reason: typo

Hi Christian,

Thank you for the tip about Jetpack. It does look like they have come up with a way to hide the widget markup entirely. We will be investigating this and will see if we can include similar functionality in Block Visibility.

Best,
Nick

Nick,

I wanted to see if you have found a similar function?

Thanks,
Christian

Hi @christianj40,

Thank you for your patience! Version 2.3.1 has just been released with the fix. Let me know if you experience any further issues with block-based widgets.

Best,
Nick