对于添加文本输入以向页面/帖子添加正文类（如有必要，还可以为帖子类添加第二个字段）的非常基本的实现，您可以执行以下操作：

使用注册自定义字段register_post_meta - 我将使用空字符串作为第一个参数，post_type 所以它适用于所有人。还要注意，我们希望使用REST API，因此该值在Gutenberg中可以通过传递true 到show_in_rest:

// File: themeslug/functions.php
// Register the \'themeslug_add_body_class\' post meta.
add_action( \'after_setup_theme\', function() {
    register_post_meta( \'\', \'themeslug_add_body_class\', array(
        \'show_in_rest\' => true,
        \'single\' => true,
        \'type\' => \'string\',
    ) );
} );

<添加一个名为Layout Settings 使用文本输入控件，该控件链接到themeslug_add_body_class. 我们将此添加到Document Settings 在古腾堡。为此，我们将使用名为PluginDocumentSettingPanel. 我将使用块编辑器手册中的基本示例，因此请参考Tutorials 第节更深入地解释了JS代码中的所有内容都在做什么

// File: themeslug/assets/js/editor.js
( function( wp ) {
    var { registerPlugin } = wp.plugins;
    var { PluginDocumentSettingPanel } = wp.editPost;
    var el = wp.element.createElement;
    var Text = wp.components.TextControl;
    var withSelect = wp.data.withSelect;
    var withDispatch = wp.data.withDispatch;

    var mapSelectToProps = function( select ) {
        return {
            metaFieldValue: select( \'core/editor\' )
                .getEditedPostAttribute( \'meta\' )
                [ \'themeslug_add_body_class\' ],
        }
    }

    var mapDispatchToProps = function( dispatch ) {
        return {
            setMetaFieldValue: function( value ) {
                dispatch( \'core/editor\' ).editPost(
                    { meta: { themeslug_add_body_class: value } }
                );
            }
        }
    }

    var MetaBlockField = function( props ) {
        return el( Text, {
            label: \'Custom Body Classes\',
            value: props.metaFieldValue,
            onChange: function( content ) {
                props.setMetaFieldValue( content );
            },
        } );
    }

    var MetaBlockFieldWithData = withSelect( mapSelectToProps )( MetaBlockField );
    var MetaBlockFieldWithDataAndActions = withDispatch( mapDispatchToProps )( MetaBlockFieldWithData );

    registerPlugin( \'theme-slug-add-body-class\', {
        render: function() {
            return el( PluginDocumentSettingPanel,
                {
                    name: \'theme-slug-add-body-class\',
                    title: \'Layout Settings\',
                    className: "theme-slug-custom-body-class",
                    icon: \'\',
                },
                el( \'div\',
                    { className: \'theme-slug-add-body-class-content\' },
                    el( MetaBlockFieldWithDataAndActions )
                )
            );
        }
    } );
} )( window.wp );

<将JS脚本排队-为此，我们将enqueue_block_editor_assets, 和使用wp_enqueue_script 与任何其他JS文件一样。对于脚本部门，为了简单起见，我将手动列出它们：

// File: themeslug/functions.php
// Enqueue the JS for gutenberg.
add_action( \'enqueue_block_editor_assets\', function() {
    wp_enqueue_script(
        \'themeslug-editor-add-body-class\',
        get_theme_file_uri( \'/assets/js/editor.js\' ),
        [ \'wp-plugins\', \'wp-data\', \'wp-components\', \'wp-edit-post\', \'wp-element\', \'wp-compose\' ],
        \'1.0.0\',
        true
    );
} );

<现在我们已经注册了元，自定义控件/脚本已排队并加载到Gutenberg中，因此在访问编辑器时，我们应该看到Layout Settings 面板已添加到Document Settings 在下面添加了文本字段：

最后一部分是过滤body_class 使用保存在元中的用户输入：

// File: themeslug/functions.php
// Dynamically add body class based on post meta saved.
add_filter( \'body_class\', function( $classes ) {
    $body_classes = get_post_meta( get_the_ID(), \'themeslug_add_body_class\', true );
    if ( \'\' !== $body_classes ) {
        $body_classes = array_map( \'esc_attr\', explode( \' \', $body_classes ) );
        $classes = array_merge( $classes, $body_classes );
    }
    return $classes;
} );

这允许将多个类添加到正文中，这些类是空间分隔的，但您可以根据需要处理逻辑。您可以对此进行扩展，为要添加的自定义类添加第二个字段。而不是过滤body_class 你可以使用post_class 为此。