How to add new panel under "document" in Gutenberg

They've added the PluginDocumentSettingPanel SlotFill now.

const { registerPlugin } = wp.pluginsconst { PluginDocumentSettingPanel } = wp.editPost const PluginDocumentSettingPanelDemo = () => (    <PluginDocumentSettingPanel        name="custom-panel"        title="Custom Panel"        className="custom-panel"    >        Custom Panel Contents    </PluginDocumentSettingPanel>)registerPlugin('plugin-document-setting-panel-demo', {    render: PluginDocumentSettingPanelDemo})

add_meta_box will do the trick, but only if you add the context-argument with a value of 'side':

add_meta_box(    'box-id-here',    'Box Title Here',    'createBoxHtml',    'post',    'side' ); // <-- this is important

Arrrh, two days for nothing!

Old answer

According to this tutorial, we can add our custom sidebar and fill it with customized form inputs.

Here is a working example in a React JSX version. This adds a meta field country:

const { registerPlugin } = wp.plugins;const { PluginSidebar } = wp.editPost;const { TextControl } = wp.components;const { withSelect, withDispatch } = wp.data;// Customized TextControlconst CustomMetaField = withDispatch( ( dispatch, props ) => {    return {        updateMetaValue: ( v ) => {            dispatch( 'core/editor' ).editPost( {                meta: {                    [ props.metaFieldName ]: v                }            });        }    };})( withSelect( ( select, props ) => {    return {        [ props.metaFieldName ]: select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ props.metaFieldName ]    };} )( ( props ) => (    <TextControl        value={props[ props.metaFieldName ] }        label="Country"        onChange={( v ) => {            props.updateMetaValue( v );        }}    /> )) );// Our custom sidebarregisterPlugin( 'custom-sidebar', {    render() {        return (            <PluginSidebar                name="project-meta-sidebar"                title="Project Meta">                <div className="plugin-sidebar-content">                    <CustomMetaField metaFieldName="country" />                </div>            </PluginSidebar>        );    },} );

And in PHP, register the meta field in the init-hook:

register_meta( 'post', 'country', [    'show_in_rest' => TRUE,    'single' => TRUE,    'type' => 'string'] );

I know:

This is still not the required solution, but nearly.

You can add this code to your function.php. This code create new tab and add text field to this tab. Text field save to database like custom field in post_meta table and you can output this like default WP post meta.
1. Create tab Настройки UTM.
2. Create custom text field utm_post_class
3. To output in website use $utm = get_post_meta( $post->ID, 'utm_post_class', true );

//Article UTM Linkadd_action( 'load-post.php', 'utm_post_meta_boxes_setup' );add_action( 'load-post-new.php', 'utm_post_meta_boxes_setup' );function utm_post_meta_boxes_setup() {    add_action( 'add_meta_boxes', 'utm_add_post_meta_boxes' );    add_action( 'save_post', 'utm_save_post_class_meta', 10, 2 );}function utm_add_post_meta_boxes() {    add_meta_box(        'utm-post-class',        'Настройки UTM',        'utm_post_class_meta_box',        'post',        'side',        'default'    );}function utm_post_class_meta_box( $post ) {    wp_nonce_field( basename( __FILE__ ), 'utm_post_class_nonce' );?>    <div class="components-base-control editor-post-excerpt__textarea">        <div class="components-base-control__field">            <label class="components-base-control__label" for="utm-post-class">UTM ссылка (необязательно)</label>            <input type="text" name="utm-post-class" id="utm-post-class" class="edit-post-post-schedule" value="<?php echo esc_attr( get_post_meta( $post->ID, 'utm_post_class', true ) ); ?>">        </div>    </div><?php }function utm_save_post_class_meta( $post_id, $post ) {    if ( !isset( $_POST['utm_post_class_nonce'] ) || !wp_verify_nonce( $_POST['utm_post_class_nonce'], basename( __FILE__ ) ) )        return $post_id;    $post_type = get_post_type_object( $post->post_type );    if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )        return $post_id;    $new_meta_value = ( isset( $_POST['utm-post-class'] ) ? $_POST['utm-post-class'] : '' );    $meta_key = 'utm_post_class';    $meta_value = get_post_meta( $post_id, $meta_key, true );    if ( $new_meta_value && '' == $meta_value )        add_post_meta( $post_id, $meta_key, $new_meta_value, true );    elseif ( $new_meta_value && $new_meta_value != $meta_value )        update_post_meta( $post_id, $meta_key, $new_meta_value );    elseif ( '' == $new_meta_value && $meta_value )        delete_post_meta( $post_id, $meta_key, $meta_value );}