如何解决解决:古腾堡编辑器中的浮动块
我正在尝试开发一个可以像块核心/图像、核心/音频一样以浮动方式左/右对齐的块......我的意思是古腾堡的 UI 适应那个位置,你可以有围绕对齐/浮动块的段落。所有这一切都非常自然/原生。
在第一个例子中,有一个带有 wp-block 类的段落。这是正常的组成。块的最外部元素获得所有古腾堡类。
在第二个例子中,有一个 div,只有类 wp-block 和 data-align 属性。这就是我想要复制的行为。
由核心/音频块创建的 HTML 结构:
如何显示核心/音频块:
这是我的代码,并直观地解释了问题。
代码与https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/audio/edit.js非常相似
const { useBlockProps } = wp.blockEditor;
const { BlockAlignmentToolbar,BlockControls } = wp.editor;
const { Component } = wp.element;
wp.blocks.registerBlockType( 'melange/test-aligns',{
category: 'melangeLayout',title: 'Test aligns',description: '',attributes: {
align: { type: 'string',default: null,},// supports: { align: true },edit: function({attributes,setAttributes}) {
const blockProps = useBlockProps();
return <>
<BlockControls>
<BlockAlignmentToolbar
value = { attributes.align }
onChange = { align => setAttributes({align}) }
/>
</BlockControls>
<p {...blockProps}>Hello World!</p>
</>
},getEditWrapperProps(attrs) {
return { ...attrs,'data-align': attrs.align };
},save: function() {
const blockProps = useBlockProps.save();
return <p {...blockProps}>Hello World!</p>;
},});
我的问题是浮动块有两个块控件,具体取决于鼠标悬停的位置。
原因是创建的 div 与它们在核心块中的结构不同。我不知道为什么,我的块被一个不需要的额外 div 包裹,实际上重复了 id。
解决方法
解决方案:
wp.blocks.registerBlockType( 'melange/test-aligns',{
apiVersion: 2,...
});
如https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/
但是,我不知道为什么,他们在 Gutenberg 源代码中不需要它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。