对于古腾堡的“核心/图像”块,它们有不同的对齐选项,特别是两个显示“完整”和“宽”。当您单击这些选项之一时,您将看到数据属性“data-align”被添加到块编辑器的包装组件中,其值为“full”或“wide”。
我正在尝试创建一个具有与上述类似功能的自定义块。但是我很难弄清楚如何将该自定义属性添加到我组件的块编辑器包装器中。
我尝试过的一些事情是:
使用块过滤器 editor.BlockListBlock 但我可以用我自己的知识做的最多的是调整props和类名。添加一个 data-align="full" 只是意味着在这里添加一个名为 data-alignment 的props。
https://developer.wordpress.org/block-editor/developers/filters/block-filters/#editor-blocklistblock
我也试过用 jQuery 来做这件事。即使这有效,我也绝对不想将其用作永久解决方案,我只是想看看它是否有效。所以我向我的一个按钮添加了一个 on('click') 事件,以便它定位包装器组件并修改节点,但这也不起作用。可能是因为块元素是一个动态元素,它甚至无法被选中。
这是我尝试向其添加自定义属性的包装器,
<div id="block-388288fa-ff20-459e-bce7-543b94fd77c4" class="wp-block editor-block-list__block block-editor-block-list__block is-selected" data-type="cgb/block-ee-hero-slider" tabindex="0" aria-label="Block: Hero Slider">