Wordpress 古腾堡块:如何将RichText添加到未排序的列表中
我正在尝试创建一个自定义的Gutenberg块,该块将包含多个RichText组件的无序列表 最终的结果是:Wordpress 古腾堡块:如何将RichText添加到未排序的列表中,wordpress,wordpress-gutenberg,gutenberg-blocks,Wordpress,Wordpress Gutenberg,Gutenberg Blocks,我正在尝试创建一个自定义的Gutenberg块,该块将包含多个RichText组件的无序列表 最终的结果是: 第一项 第二项 我一直在玩这个配方卡的例子 我可以看到RichText组件如何可以是多行的,以实现“li”作为标记来获取列表,但我不知道如何使用具有次RichText组件的多行 以下是我到目前为止的情况: ( function( blocks, editor, i18n, element, components, _ ) { var el = element.createElem
-
第一项
第二项
我一直在玩这个配方卡的例子
我可以看到RichText组件如何可以是多行的,以实现“li”作为标记来获取列表,但我不知道如何使用具有次RichText组件的多行
以下是我到目前为止的情况:
( function( blocks, editor, i18n, element, components, _ ) {
var el = element.createElement;
var RichText = editor.RichText;
var MediaUpload = editor.MediaUpload;
i18n.setLocaleData( window.gutenberg_examples_05.localeData, 'gutenberg-examples' );
blocks.registerBlockType( 'gutenberg-examples/example-05-recipe-card', {
title: i18n.__( 'Example: Recipe Card', 'gutenberg-examples' ),
icon: 'index-card',
category: 'layout',
attributes: {
ingredients: {
type: 'array',
source: 'children',
selector: '.ingredients',
},
ingredientname: {
type: 'array',
source: 'children',
selector: '.ingredientname',
},
},
edit: function( props ) {
var attributes = props.attributes;
return (
el( 'div', { className: props.className },
el( 'h3', {}, i18n.__( 'Ingredients', 'gutenberg-examples' ) ),
el( RichText, {
tagName: 'ul',
multiline: 'li',
value: attributes.ingredients,
className: 'ingredients'
},
el( RichText, {
tagName: 'span',
placeholder: i18n.__( 'ingredient name', 'gutenberg-examples' ),
value: attributes.ingredientname,
onChange: function( value ) {
props.setAttributes( { ingredientname: value } );
},
} ),
)
)
);
},
save: function( props ) {
var attributes = props.attributes;
return (
el( 'div', { className: props.className },
el( 'h3', {}, i18n.__( 'Ingredients', 'gutenberg-examples' ) ),
el( RichText.Content, {
tagName: 'ul',
className: 'ingredients'
},
el( RichText.Content, {
tagName: 'span',
className: 'ingredient-name',
value: attributes.ingredientname
}),
),
)
);
},
} );
} )
我认为问题在于,第一个RichText应该被切换为其他内容,但我不知道如何将其更改为仍然以列表形式显示所有内容的内容。我尝试删除第一个RichText并将其设置为仅带有“li”标记的“ul”,然后编辑器显示第二个RichText,但它不显示为列表
非常感谢您的帮助。据我所知,没有像“多行”这样的选项可以将RichText扩展到子组件中。现在可以做的是在块的开头声明两个额外的属性,然后在编辑函数中调用RichText。那么这个-
<ul>
<li>
<span class="class-one">First item</span>
<span class="class-two">Second item</span>
</li>
</ul>
-
第一项
第二项
变成-
<ul>
<RichText
fontSize={textSize}
tagName="li"
placeholder={ __( 'Nature', 'text-domain' ) }
value={ imgOneTxt }
onChange={ (onChangeImgOneTxt) => setAttributes({ imgOneTxt: onChangeImgOneTxt}) }
style={{ color: textColor, fontSize: textSize }}
isSelected={ isSelected }
keepPlaceholderOnFocus
/>
<RichText
fontSize={textSize}
tagName="li"
placeholder={ __( 'Nature', 'text-domain' ) }
value={ imgOneTxt }
onChange={ (onChangeImgOneTxt) => setAttributes({ imgOneTxt: onChangeImgOneTxt}) }
style={{ color: textColor, fontSize: textSize }}
isSelected={ isSelected }
keepPlaceholderOnFocus
/>
</ul>
setAttributes({imgOneTxt:onChangeImgOneTxt})}
style={{color:textColor,fontSize:textSize}}
isSelected={isSelected}
保持对焦
/>
setAttributes({imgOneTxt:onChangeImgOneTxt})}
style={{color:textColor,fontSize:textSize}}
isSelected={isSelected}
保持对焦
/>
我知道,这不符合枯燥的规则,但这就是我们现在在古腾堡的发展。我希望这能有所帮助也许这不是最新的答案,但对于其他将面临类似问题的人来说。我一直在尝试实现上面描述的东西,在失去了几天之后,我找到了davidyeiser的解决方案。我非常推荐本教程: (吉特回购:)
- 更易于管理/修改输入的数据,如您所愿
- 容易遵循的枯燥规则
- 不需要依赖于WP插件(也不需要ACF)