如何为wordpress插件中的每个文本组件设置不同的文本对齐?

Question

在这个例子中，每个文本组件都应该有自己的text-align样式设置，但是<AlignmentToolbar>似乎只提供一个对齐值。是否有办法在同一插件内获得多个对齐设置?

<div {...blockProps}>
<BlockControls>
<AlignmentToolbar
value={attributes.title_align}
onChange={(val) => setAttributes({ title_align: val })}
/>
</BlockControls>
<article>
<TextControl
className="title"
allowedFormats={['core/bold', 'core/italic']}
style={{ textAlign: attributes.title_align }}
onChange={(val) => setAttributes({ title: val })}
value={attributes.title}
placeholder={ __( 'Title...' ) }
/>
</article>
<article>
<RichText
tagName="div"
className="message"
allowedFormats={['core/bold', 'core/italic', 'core/link']}
style={{ textAlign: attributes.title_align }}
value={attributes.message}
onChange={(val) => setAttributes({ message: val })}
placeholder={ __( 'Message...' ) }
/>
</article>
</div>

Answer 1

<alignmentToolbar>(alignmentControl)的工作方式是通过为每个块提供对齐选项，因此不幸的是，每个块不能有多个对齐选项。另一种可能的替代方法是使用InnerBlocks，它可以独立地控制每个支持的块对齐，例如:

import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
registerBlockType('my-plugin/plugin-name', {
edit: () => {
const blockProps = useBlockProps();
// Create a template of InnerBlocks with predefined attributes
const MY_TEMPLATE = [
['core/heading', // Heading Block already implements RichText component
{
placeholder: 'Title...',
level: 3,
className: 'title'
}
],
['core/paragraph', // Paragraph allows multiple lines to be created
{
placeholder: 'Message...',
className: 'message',
}
]
];
return (
<div {...blockProps}>
<InnerBlocks
template={MY_TEMPLATE}
templateLock="insert"
/>
</div>
);
},
save: () => {
const blockProps = useBlockProps.save();
return (
<div {...blockProps}>
<InnerBlocks.Content />
</div>
);
},
});

通过使用已经实现RichText组件的现有核心块，样式/对齐已经为你完成了。在此基础上进行扩展，如果您的块需要包装在<article>中，您可以创建另一个自定义块，它只包含一个<RichText>组件来保存您的自定义标记。接下来，在InnerBlock模板中使用额外的自定义块来启用每个块的自定义文本对齐。