Inserter: Encapsulate styles for tablist and close button

[mattsherman]

What?

This PR moves the CSS for the tabllist and close button layout into the inserter itself.

Why?

In #61421, the close button was added, and the CSS styling was added to the InserterSidebar instead of the Inserter itself.

This broke the styling for consumers using the Inserter directly (or __experimentalLibrary), such as the new product editor in WooCommerce (see woocommerce/woocommerce#47561).

How?

The CSS is moved to the Inserter itself.

In addition, the CSS class names are changed to be more accurate to what they actually are, which will help with maintainability and also allow for a temporary workaround to be applied by those using Inserter/__experimentalLibrary directly while allowing them to automatically get future styling changes without having to remove the workaround.

Testing Instructions

1. Open the inserter
2. Verify styling is correct.

(Testing instructions for WooCommerce specifically will be part of woocommerce/woocommerce#47561)

Screenshots or screencast

Broken (in WooCommerce)

Fixed (no change in core Gutenberg styling)

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: mattsherman <[email protected]>
Co-authored-by: retrofox <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[retrofox]

LGTM.

It fixes the broken styles between old versions:

Product Editor - GB trunk	Product Editor - This PR

[mattsherman]

@retrofox There was a conflict in one of the files, so I pushed an update to resolve the conflict. Thanks for the initial review. Can you take another look at this when you get a chance?

Also, is there a way to re-run CI checks? I don't seem to be able to. The "Compressed Size / Check (pull_request)" is failed, but I don't think it is due to my changes.

@scruffian This PR moves some CSS that you recently touched, so I'd love to have your input as well, to make sure my change makes sense in the context of the work you've been doing. Thanks!

[draganescu]

This code LGTM!

[afercia]

I think this PR re-introduced a problem. In the Widgets page and in the Customiser-widgets, the Inserter should not show the Patterns and Media tabs. That was addressed in #61510, although with an approach that broke accessibility. Thre's an open issue for that at #61653

However, the point is that now in the Widgets page and in the Customiser-widgets panel, the Inserter does show again the Patterns and Media tabs, which are pointless because they are empty. Cc @youknowriad as I mentioned this issue during WCEU contributor day but could not figure out why the tabs were visible again.