block editor - Style Gutenberg metaboxes like they belong on the site

admin管理员组

文章数量:1301611

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.

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!");
}

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.

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!");
}

• block-editor

Share Improve this question edited Nov 7, 2019 at 1:19 John Dee asked Nov 7, 2019 at 1:03 John DeeJohn Dee 51355 silver badges1414 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.

本文标签： block editorStyle Gutenberg metaboxes like they belong on the site