Interface: remove no longer necessary complementary area small header

[afercia]

Description

The ComplementaryAreaHeder component renders a small header that is only shown on small screens.

The small header only contains:

• A smallScreenTitle, if provided.
• The X close toggleButton.

To my understanding, the original intent was to hide the normal header on small screens and show the small header instead.

However, this appears to be broken as both headers are shown at the same time.

As far as I can tell, a smallScreenTitle is passed only in two places:

1
In the Styles panel, where the small header just repeats the title of the normal header. Screenshot:

Same happens in WordPress 6.5, 6.4 so this appers to be a long standing issue. In 6.3 there's no smallScreenTitle passed. Screenshots:

WordPress 6.5

WordPress 6.4

WordPress 6.3

2
The other instance where smallScreenTitle is passed is in the plugin sidebar header of the Post editor. Install a plugin that adds its own sidebar to the editor e.g. Yoast SEO to see it.

In this case, the small header shows the post title. However, the post title is now already shown in the editor top bar so this appears to be useless now. Screenshot:

Unless I'm missing something, this 'small header' appears to be unnecessary now. Instead of fixing the layout that shows both headers, the small header should be removed.

Additional considerations

On small screens, some buttons of the normal header are hidden with CSS display: none. As such, there is no access to some important editor features.

In the Styles panel, the buttons highlighted in the screenshot below are hidden. Users can't access the Style Book, the Revisions, and the More button. I'd think only the Style Book should be hidden.

In the Post editor plugin panel, the Pin / Unpin button is hidden. Users can't pin or unping a plugin sidebar. Screenshot:

Lastly, the controls in the header should also take into account the 'Show button text labels' preference. When the buttons show visible text they take much more horizontal space. In this case, it would be worth considering to render the buttons in a 'subheader' as proposed on #61761 (comment)

Step-by-step reproduction instructions

• Emulate a viewport with smaller than 782 pixels via your browser dev tools, e.g. for an iPad Mini.
• Go to the Site Editor > Styles
• Observe the Styles panel shows two headers with the same title 'Styles'.
• Observe the Style Book, Revisions, and More buttons are not shown.
• Install a plugin that adds its own sidebar to the Post editor e.g. Yoast SEO.
• Go to the Post Editor > Options > Plugins > click Yoast SEO
• Observe the Yoast SEO sidebar shows two headers:
  • The 'small header' shows the post title and the close button. However, the post title is already shown in the editor top bar.
  • The normal header shows the Plugin name.
  • Observ ethe pin / unpin button is hidden so that users can't pin or unpin the plugin sidebar.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

Looking back into this old issue, it appears it's still on latest trunk. Screenshots of the current situation:

I see there's a PR that aims to solve this issue at #62067 and some conversation there on whether to remove the smallScreenTitle prop without deprecation. I'd vote for just removing it.

See also #64095 for other panel headers.

@t-hamano how can I help #64474 move on? Would you need any help?

[afercia]

One more example of the duplication, when editing a template. Notice the small header doesn't provide the edited object type label added to the DocumentBar in #65170 which is one more good reason to remove it IMHO.

[t-hamano]

how can I help #64474 move on? Would you need any help?

I have resolved the conflict in #64474. Could you test this PR?