wordpress - 如何在 Gutenberg 段落中创建自定义 DropdownMenu 按钮
问题描述
我在为核心/段落开发下拉菜单时遇到了一些问题。我想添加一个下拉菜单来插入文本(如电子邮件服务上的个性化标签)。
我尝试在 Vanilla 中编写此代码来为 Core/Paragraph 实现 DropdownMenu,但没有成功。
我的代码是:
( function( blocks, element, components, editor ) {
const el = element.createElement;
const { __ } = wp.i18n;
const withSelect = wp.data.withSelect;
const ifCondition = wp.compose.ifCondition;
const compose = wp.compose.compose;
console.log(components);
const EmailTagsMenu = el(
components.Toolbar,
null,
el(
components.DropDownMenu,
{
icon: 'admin-customizer',
isActive: false,
label: __('Insert Tag', 'amauta'),
controls: function(){
return [
{
title: __('Firstname', 'amauta'),
icon: 'admin-customizer',
onClick: function(){
}
},
{
title: __('Lastname', 'amauta'),
icon: 'admin-customizer',
onClick: function(){
}
}
];
}
}
)
);
var EmailTagsButton = compose(
withSelect( function( select ) {
return {
selectedBlock: select( 'core/block-editor' ).getSelectedBlock()
}
} ),
ifCondition( function( props ) {
return (
props.selectedBlock &&
props.selectedBlock.name === 'core/paragraph'
);
} )
)( EmailTagsMenu );
wp.richText.registerFormatType(
'amauta/email_tags', {
title: __('Email Tags', 'amauta' ),
tagName: null,
className: null,
edit: EmailTagsButton,
}
);
}(
window.wp.blocks,
window.wp.element,
window.wp.components,
window.wp.blockEditor
));
拜托,你能帮帮我吗?谢谢!
解决方案
推荐阅读
- flutter - Flutter:函数返回null
- spring - 当“无法解析带有名称的视图”时如何隐藏打印信息?
- r - 如何在 r 中实现分数驱动的 Copula 模型
- python - 使用 utf-8 字符作为诅咒边框
- mysql - MySQL:查询以从同一个表中返回一些列+连接列值
- python - Python数组填充优化
- java - 我们如何创建一个算法来检查一个字符串是否是两个合并字符串的结果?
- c - 如何删除字符串中的第一个零?(不使用atoi)
- asp.net-mvc - 如何在 ASP.NET MVC 视图中显示图像?
- java - 新线程的 thread.start() 方法是否立即返回到当前线程?