Meta Boxes: Don't hide disabled meta boxes by modifying DOM

[noisysocks]

Fixes #12571.

Hiding disabled meta boxes by setting element.style.display = 'none' interferes with plugins like ACF which rely on being able to show and hide meta boxes using $.hide() and $.show().

Hiding the meta box using a new .edit-post-meta-boxes-area .is-hidden class ensures that we don't interfere with third party code.

Testing

1. Register a meta box which hides itself using JavaScript:

<?php

add_action( 'add_meta_boxes', 'test_add_meta_boxes' );

function test_add_meta_boxes() {
	add_meta_box( 'test-meta-box', 'Test Meta Box', 'test_render_meta_box' );
}

function test_render_meta_box() {
	?>
	This should be hidden!
	<script>
	( function( $ ) {
		$( '#test-meta-box' ).hide();
	} )( jQuery );	
	</script>
	<?php
}

2. Create a new post. The meta box should be hidden.

3. Open Show more tools & options and select Options.

4. Toggle the meta box off and on. The meta box should remain hidden.

I've also tested this by repeating the steps above with an additional non-hidden meta box registered, and by installing ACF and attempting to recreate the scenario described in #12571.

[aduth]

One thing I notice is that there's still a box, albeit empty, where the meta box lives in the page:

[noisysocks]

@aduth: Hm, that's tough to address. Any ideas?

We already have styling which will remove the border and padding on the container when there is no content. But in this case there is content—it's just that it's hidden by third party JavaScript.

The empty container is correctly not shown when meta boxes are hidden using removeEditorPanel(), toggleEditorPanel(), or remove_meta_box(). I think that, going forward, third parties should use these APIs instead of manually $.show()ing and $.hide()ing meta boxes.

[mtias]

I am not sure this can be made 100% smooth considering the ad hoc effect of directly hiding from the DOM will clash with the state → view model.

[aduth]

I was curious, and so checked how it appeared prior to #10676 (git co cbf425b~1), which is identical to how it appears now in this branch:

I am not sure this can be made 100% smooth considering the ad hoc effect of directly hiding from the DOM will clash with the state → view model.

I'd tend to agree. Even with these changes, there's going to be the potential for conflicts if a plugin manipulates the DOM directly. In that sense, it'd be more about getting it into the "expected" state from what had prompted #12571 to be raised as a regression.

Hm, that's tough to address. Any ideas?

My initial thought would be to reorient the styling to apply to the individual meta boxes, such that if they were hidden, there'd be no lingering artifacts. This is mostly possible, but the border in particular is hard to recreate. I'd thought applying it in a :first-child selector, but if the first child is the hidden meta box, the border wouldn't be shown at all (notably, even if other visible meta boxes are present).

There's more options if we implement it in JavaScript, iterating children to verify the presence of a visible meta box. This becomes more difficult to implement well, and as such even if intended for support, should probably be done in a follow-up pull request.

[elliotcondon]

@noisysocks Thanks for opening this ticket.

I think that, going forward, third parties should use these APIs instead of manually $.show()ing and $.hide()ing meta boxes.

Definitely. I'm good with this.

The empty container is correctly not shown when meta boxes are hidden using removeEditorPanel(), toggleEditorPanel(), or remove_meta_box().

This is good to know. One question: If we hide a metabox via remove_meta_box(), can we add the same metabox later via a similar add_meta_box() function?

[noisysocks]

This is good to know. One question: If we hide a metabox via remove_meta_box(), can we add the same metabox later via a similar add_meta_box() function?

I think that that's supported, but I'd test it to make sure 🙂