Gutenberg:为什么按钮核心组件不能在前端呈现

时间:2019-02-27 作者:Steve

我是块编辑器自定义块开发的新手,遇到了一个问题,在任何地方都找不到答案。

当我使用wp的组件时。组件(在我的情况下<Button /> 在我的自定义块中,我可以在后端看到它,但它不会在前端渲染。

import \'./style.scss\';
import \'./editor.scss\';


const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { Button } = wp.components;

registerBlockType( \'cgb/block-buttonblock\', {
    title: __( \'buttonblock - CGB Block\' ), // Block title.
    icon: \'shield\', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: \'common\', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( \'buttonblock — CGB Block\' ),
        __( \'CGB Example\' ),
        __( \'create-guten-block\' ),
    ],

    edit: function( props ) {
        return (
            <div className={ props.className }>
                <p>— Hello from the backend.</p>
                <p>
                    CGB BLOCK: <code>buttonblock</code> is a new Gutenberg block
                </p>
                <p>
                    It was created via{ \' \' }
                    <code>
                        <a href="https://github.com/ahmadawais/create-guten-block">
                            create-guten-block
                        </a>
                    </code>.
                </p>
                <Button isDefault>
                    Click me on the Backend!
                </Button>
            </div>
        );
    },

    save: function( props ) {
        return (
            <div>
                <Button>
                    Click me on the Frontend!
                </Button>
                <p>— Hello from the frontend.</p>
                <p>
                    CGB BLOCK: <code>buttonblock</code> is a new Gutenberg block.
                </p>
                <p>
                    It was created via{ \' \' }
                    <code>
                        <a href="https://github.com/ahmadawais/create-guten-block">
                            create-guten-block
                        </a>
                    </code>.
                </p>

                <p>
                    Check
                </p>

            </div>
        );
    },
} );
我希望它在前端呈现,就像在后端一样。

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

这个wp.components 库用于UI目的,例如后端的发布按钮、插入器模式等。它们不适用于前端使用。同样,您也不会在面向前端的UI上使用WP管理样式和HTML类。

例如core/button 块使用div 使用HTML类而不是<Button> 组成部分

当然,您可以选择在块中使用这些组件作为其编辑UI的一部分,但它们不应用于最终输出。

我希望它在前端呈现,就像在后端一样。

如果它确实是出于某种原因出现的,那么它可能会显示为一个完全没有样式的按钮,单击时什么也不做。编辑器中的React组件不会在前端使用React进行渲染。块保存为静态HTML。当然,您可以使用自己的React组件来生成要保存的输出,但不要使用WP核心组件库,这不是它的目的

相关推荐