When Editing, Container Block Settings Fields Are Oddly Huge

This is an odd problem that is hard to describe. See the attached picture. The controls for the container block have a bunch of space in them. It happens to the Container field and Tag name field.

It only happens on pages where we also have a reusable block container, that has a shortcode in it for an Ivory search box.

If I remove that reusable Ivory search block, the issue goes away. So it could be an Ivory problem or a GB problem.

We have this filter that replaces WP search with Ivory. Otherwise it is just the standard Ivory search box, with no other CSS added.

add_filter( 'generate_navigation_search_output', function() {
    return sprintf(
        '<div class="navigation-search">%s</div>',
        do_shortcode( '[ivory-search id="14078" title="Default Search Form"]' )
    );
} );

Suggestions?

Thank you.

@gnwebpub what browser are you in?

Trying to replicate the issue:

  • Enable Ivory search plugin
  • Add the filter to generate_navigation_search_output
  • Create a reusable block (Anything specific here?)
  • Add a container block, should see the error?

I am using Firefox. But the same issue also happens in MS Edge.

Based on your suggestions I created a test page.

I put a container with a headline in it.

Then below that I added the resuasable block that is a container, a standard headline, and a shortcode block for the Ivory search.

It does replicate the problem, but the issue does not appear until you have built the page, left the edit page, and come back to the edit page. Then the weird spacing issue happens. Remove the Ivory search reusable block and the problem is fixed.

I also just found some custom CSS that is in the Ivory plugin:.

form.is-form-style span.is-search-icon,
form.is-form-style input.is-search-input,
form.is-form-style button.is-search-submit {
    height: 50px; 
}

@media (min-width: 769px)
{
form.is-form-style input.is-search-input {
width: 40%; float: right;
}
}

.on-page-search-box form.is-form-style input.is-search-input {
width: 100%; float: left;
}

In additional CSS, this class is applied to the reusable Ivory search container:

on-page-search-box

But that CSS does not seem to be causing the issue. I tested by first removing the custom CSS in the Plugin settings. Same issue. I then removed the additional CSS class on the reusable block as a test, and that also did not solve the issue. Each time I rebuilt the page, left the edge page, and then returned to it.

Thanks again for the help.

I just tried another test without using a resusable block. I just put the Ivory search on the test page in a standard shortcode block. It caused the same issue. So the reusable block does not seem to factor in. And I tried a different shortcode from another forms plugin, and it does not cause the issue.

The folks at Ivory Search checked on one of their sites with GB, and cold not duplicate the issue.

On another site, where I also have Generate Press and GB (not GP Pro), I could not duplicate the problem, even after adding in the same custom CSS to Ivory and the filter.

So I seem to be narrowing it down to Generate Blocks Pro, having a conflict with Ivory search.

Any more suggestion for a solution?

Tonight I was able to deactivate GB pro, and it that did not solve the issue. I am stumped.

Big fields in the editor like this means there are PHP notices/warnings happening in the background.

I don’t believe do_shortcode can be run in a return like this.

Could try this:

add_filter( 'generate_navigation_search_output', function() {
    ob_start();
    do_shortcode( '[ivory-search id="14078" title="Default Search Form"]' );
    $shortcode = ob_get_clean();

    return sprintf(
        '<div class="navigation-search">%s</div>',
        $shortcode
    );
} );

Thanks Tom.

The original filter did seem to be working. I tried the new filter you suggested, but when I click on the search icon I just get an X, and no search box pops up.

This is where I got the original filter code on the GP site.