我是块编辑器自定义块开发的新手,遇到了一个问题,在任何地方都找不到答案。
当我使用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>
);
},
} );
我希望它在前端呈现,就像在后端一样。
最合适的回答,由SO网友:Tom J Nowell 整理而成
这个wp.components
库用于UI目的,例如后端的发布按钮、插入器模式等。它们不适用于前端使用。同样,您也不会在面向前端的UI上使用WP管理样式和HTML类。
例如core/button
块使用div
使用HTML类而不是<Button>
组成部分
当然,您可以选择在块中使用这些组件作为其编辑UI的一部分,但它们不应用于最终输出。
我希望它在前端呈现,就像在后端一样。
如果它确实是出于某种原因出现的,那么它可能会显示为一个完全没有样式的按钮,单击时什么也不做。编辑器中的React组件不会在前端使用React进行渲染。块保存为静态HTML。当然,您可以使用自己的React组件来生成要保存的输出,但不要使用WP核心组件库,这不是它的目的