1

When you add a meta box to Gutenberg, it looks different than the other items in the editor. There is a HR, and the fonts are different.

enter image description here

Does anyone know how to fix this so it looks like a natural part of the site, and not "some junk Automattic didn't add".

Example code:

function myMetaBox() {
    add_meta_box(
        'MyMetaBox',
        "Why the odd font?",
        'myBoxOutputCallback',
        'post',
        'side'
    );
}

add_action( 'add_meta_boxes', 'myMetaBox' );

function myBoxOutputCallback(){
    echo ("Gutenberg is a great addition! NOT!");
}
0

2 Answers 2

1

Bottom border (HR) can be removed using CSS:

#__BLOCK_ID__.postbox:not(.closed) .postbox-header{
    border-bottom: none;
}

p.s. change __BLOCK_ID__ to first parameter used in add_meta_box() function.

3

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:

  1. Use register_meta() to register the fields that your panel will be working with.
  2. 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.
  3. 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.

4
  • In other words, it's an INTENTIONAL style bug created by the core team to punish us for not using React. Typical.
    – John Dee
    Mar 22, 2021 at 18:59
  • That's not remotely correct. The old components will not match the new components for obvious backwards compatibility reasons. Mar 23, 2021 at 2:53
  • You know what they say about opinions! I think my explanations fits the facts better. Why would the end user want to see visually mis-matched UI components that behave in an identical way? So you're saying this is some kind of signal to the end user, of what? That the component was coded in PHP, and the way to tell the user that is to slightly bold the font? Come on. It's just another example of shinanagins.
    – John Dee
    Mar 23, 2021 at 3:31
  • 1
    What on earth are you on about? It's not a "signal". It's the same styling that's used on the metaboxes in the classic editor. These meta boxes were included into the block editor for backwards compatibility reasons, and their styling hasn't been changed also for backwards compatibility reasons. Mar 23, 2021 at 4:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.