我对 PHP 和 Wordpress 主题相当有经验,但现在在新的古腾堡编辑器上遇到了困难。我创建了一个自定义 block 插件,其中涉及大量JS(React)。对于后者我有点陌生。
该 block 正在创建一个简单的包装 div,并根据选择器的输入为其分配 html lang 属性。以下代码工作正常,但仅当选择器更改时才有效。默认情况下,langCode 变量保持为空。知道出了什么问题吗?
registerBlockType( 'lang-group-block/lang-group', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'Language group', 'lang-group-block' ), // Block title.
icon: 'flag', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'layout', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
__( 'Language', 'lang-group-block' ),
__( 'Group', 'lang-group-block' ),
],
attributes: {
// Register langCode attribute to save the chosen language
langCode: {
type: 'string',
},
},
edit( { attributes, setAttributes, className } ) {
const {
langCode = 'en',
} = attributes;
const groupIndicatorStyle = {
fontSize: 14,
color: "#ff0000",
textAlign: "center",
paddingTop: "40px",
}
return (
<Fragment>
<InspectorControls>
<PanelBody
title={ __( 'Language', 'rapp2020-lang-group-block' ) }
initialOpen={ true }
>
<SelectControl
label={ __( 'Language', 'rapp2020-lang-group-block' ) }
value={ langCode }
options={ [
{
value: 'en',
label: __( 'EN', 'rapp2020-lang-group-block' ),
},
{
value: 'nl',
label: __( 'NL', 'rapp2020-lang-group-block' ),
},
{
value: 'de',
label: __( 'DE', 'rapp2020-lang-group-block' ),
},
] }
onChange={ ( selectedOption ) => setAttributes( { langCode: selectedOption } ) }
/>
</PanelBody>
</InspectorControls>
<div style={ groupIndicatorStyle }>
language group: { langCode }
</div>
<div
className={ className }
lang={ langCode }
>
<InnerBlocks />
</div>
</Fragment>
);
},
save( { attributes, className } ) {
const {
langCode = '',
} = attributes;
let classes = className;
if ( '' == langCode ) {
{ langCode: 'en' }
}
return (
<div
className={ classes }
lang={ langCode }
>
<InnerBlocks.Content />
</div>
);
},
} );
最佳答案
这应该有效:
save( { attributes, className } ) {
const { langCode } = attributes;
let classes = className;
return (
<div
className={ classes }
lang={ langCode || 'en' }
>
<InnerBlocks.Content />
</div>
);
},
编辑:无法重现仍然存在的错误。这是带有 createElements 的完整 block 。另一个建议:您设置使用“en”作为默认值。为什么不这样设置呢?
;( function ( wp ) {
const el = wp.element.createElement;
const __ = wp.i18n.__;
const { Fragment } = wp.element;
const { InspectorControls , InnerBlocks } = wp.blockEditor;
const { PanelBody , SelectControl } = wp.components;
wp.blocks.registerBlockType( 'lang-group-block/lang-group', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
title: __( 'Language group', 'lang-group-block' ), // Block title.
icon: 'flag', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'layout', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
__( 'Language', 'lang-group-block' ),
__( 'Group', 'lang-group-block' ),
],
attributes: {
// Register langCode attribute to save the chosen language
langCode: {
type: 'string',
default : 'en'
},
},
edit( { attributes, setAttributes, className } ) {
const groupIndicatorStyle = {
fontSize: 14,
color: '#ff0000',
textAlign: 'center',
paddingTop: '40px',
}
return el( Fragment, null ,
el( InspectorControls, null,
el( PanelBody,
{ title: __('Language', 'rapp2020-lang-group-block'), initialOpen: true },
el(SelectControl, {
label: __('Language', 'rapp2020-lang-group-block'),
value: attributes.langCode,
options: [
{ value: 'en', label: __('EN', 'rapp2020-lang-group-block') },
{ value: 'nl', label: __('NL', 'rapp2020-lang-group-block') },
{ value: 'de', label: __('DE', 'rapp2020-lang-group-block') }
],
onChange: function onChange(selectedOption) { return setAttributes({ langCode: selectedOption }); }
})
)
),
el( 'div', { style: groupIndicatorStyle }, 'language group: ', attributes.langCode ),
el( 'div', { className: className, lang: attributes.langCode }, el(InnerBlocks, null) )
);
},
save( { attributes, className } ) {
return el( 'div', { className: className, lang: attributes.langCode || 'en' }, el(InnerBlocks.Content, null) );
},
} );
} )( window.wp );
关于javascript - 如何在 JSX 中为带有选择器的 const 设置默认变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60213504/