Question

我用guten块构建了一个简单的div块。

All会做应有的事情，但是如果我给div提供一个自定义类，那么它不会在后端呈现。

我该如何更改？

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

/**
 * BLOCK: bootstrap-blocks
 *
 * Registering a bootstrap container
 */

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/editor';
const { __ } = wp.i18n;

registerBlockType( 'div-block/main', {
  title: 'div',
  icon: 'index-card',
  category: 'bootstrap-blocks',
    edit( { attributes, className, setAttributes } ) {
        return (
            <div className={ 'container' }>
                <InnerBlocks />
            </div>
        );
    },
    save( { attributes } ) {
        return (
            <div className={ 'container' }>
                <InnerBlocks.Content />
            </div>
        );
    },
} );

Answer 1

WP Admin编辑器区域的样式是使用主题的editor-style.css文件-details。

使用古腾堡（Gutenburg）的管理员编辑器使用相同的文件，但有一些小的警告。即，它会自动将CSS中的body转换为.editor-styles-wrapper，因为不再在iframe中加载了编辑器区域（在iframe中已加载了经典编辑器）-details。

因此，请直接将add_theme_support('editor-styles');添加到您的functions.php文件中，然后在主题的editor-style.css文件中添加您的图块样式。

古登堡：后端中的简单块渲染

1 个答案: