Meta Boxes: Don't hide disabled meta boxes by modifying DOM (#12628)

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.

packages/edit-post/src/components/meta-boxes/meta-box-visibility.js

@@ -17,9 +17,16 @@ class MetaBoxVisibility extends Component {
 
 	updateDOM() {
 		const { id, isVisible } = this.props;
+
 		const element = document.getElementById( id );
-		if ( element ) {
-			element.style.display = isVisible ? '' : 'none';
+		if ( ! element ) {
+			return;
+		}
+
+		if ( isVisible ) {
+			element.classList.remove( 'is-hidden' );
+		} else {
+			element.classList.add( 'is-hidden' );
 		}
 	}
 

packages/edit-post/src/components/meta-boxes/meta-boxes-area/style.scss

@@ -75,6 +75,12 @@
 		right: 20px;
 		z-index: z-index(".edit-post-meta-boxes-area .spinner");
 	}
+
+	// Hide disabled meta boxes using CSS so that we don't interfere with plugins
+	// that modify `element.style.display` on the meta box.
+	.is-hidden {
+		display: none;
+	}
 }
 
 .edit-post-meta-boxes-area__clear {