In your example, Discussion is not a meta box. Meta boxes are not a native part of the block editor, and are only supported for backwards compatibility. They are not the correct modern way to add these settings boxes to the block editor. This is why they have different styles.
In the block editor, these sections are "Panels", that fit inside a "Sidebar", and are React components, like the rest of the block editor.
A full guide on creating these is beyond the scope of a single answer on this site, but essentially you need to:
- Use
register_meta()
to register the fields that your panel will be working with.
- Creating a React component to manage the custom fields. Some documentation for this is available in the guide for creating a custom sidebar in the editor, which starts here, and CSS-Tricks has a useful article covering this in more detail here.
- If you want to add your panel to the existing "Document" sidebar, and not a custom sidebar, you'll need to use a SlotFill, specifically
PluginDocumentSettingPanel
, to output your component as a panel in the existing sidebar (SlotFills are a bit like hooks, and allow you to add components to sections of the editor).
You can continue to use meta boxes, but they will not visually match the native components that are the new correct way to add fields to the editor.
It's also worth considering whether or not the field you intend to add would work better as a regular block anyway. The documentation for creating those is available here.