Title for the section still renders when editor panels are removed from UI

[gziolo]

Discovered when working on #11802.

When you remove all panels programmatically, the section title in the Options dialog is still there.

You can reproduce by pasting the following code and executing in JS console:

wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'taxonomy-panel-category' ) ;
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'taxonomy-panel-post_tag' );
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'featured-image' );
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'post-excerpt' );
wp.data.dispatch( 'core/edit-post').removeEditorPanel( 'discussion-panel' );

and opening Options modal from the More Menu.

@noisysocks shared some ideas how this could be fixed:

It's a shame that there's no way to ask React if props.children will render as empty...

I had a similar problem with <MetaBoxSection> and ending up having to add logic to the section rather than keeping it in each option.

I'm struggling to think of a nice way around this. Perhaps need to bite the bullet and move away from having <OptionsModal> implemented with nested components. Instead, we can have a function generate the options data which a dumb <OptionModal> component then renders a UI for.

[gziolo]

It looks like it is also the case for Advanced Panels, I noticed in the screenshot shared by @imath in #12394:

[paaljoachim]

Is this issue still valid @gziolo Greg?

[gziolo]

@ntsekouras, is it something that can be closed after the most recent refactoring applied in #28329?

[ntsekouras]

Problem is still there 😞 - I hadn't checked that.

[Mamaduka]

I can confirm this is still an issue in 6.0.

Snippet for testing.

const panels = ['post-link', 'template', 'taxonomy-panel-category', 'taxonomy-panel-post_tag', 'featured-image', 'post-excerpt', 'discussion-panel', 'page-attributes'];

panels.forEach( (panel) => wp.data.dispatch('core/edit-post').removeEditorPanel(panel) );

Screenshot

[Mamaduka]

Removing the "Good First Issue" label, as we found out that this isn't an easy fix 😅

[fabiankaegy]

Following up from the comment here: https://github.com/WordPress/gutenberg/pull/29207/files#r581002056

I think this should now be possible using the CSS :has selector. has has shipped in most browsers. And even for the ones that don't this doesn't cause more harm. It at least solves the issue for a good majority of users.

[ntsekouras]

It seems the css solution has been implemented already, so I'm closing this issue.