古腾堡：后端的简单块渲染

Question

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

一切正常，但如果我给 div 自定义 class，那么它不会在后端呈现。

我该如何更改？

<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 管理编辑器区域的样式使用您主题的 editor-style.css 文件 - details.

使用 Gutenburg 的管理编辑器使用相同的文件，但有一些小注意事项。即，它会自动将 CSS 中的 body 转换为 .editor-styles-wrapper，因为编辑器区域不再加载到 iframe 中（经典编辑器 is/was 加载到 iframe 中）- details.

所以直截了当，将 add_theme_support('editor-styles'); 添加到您的 functions.php 文件中，然后将块的样式添加到主题的 editor-style.css 文件中。

古腾堡：后端的简单块渲染

Gutenberg: Simple block render in back-end

wordpress

reactjs

wordpress-gutenberg

gutenberg-blocks