WordPress Gutenberg 从 useBlockProps 获取块样式

Question

我在注册我的块时添加样式：

styles: [
   { name: "my-style-1", label: "Style Name" }
   { name: "my-style-2", label: "Style Name 2" }
],

在 edit() 和 save() 函数中，如何查看选择了哪个 style/classname？

我试过例如：

edit( { attributes, setAttributes, styles } ) {
    const blockProps = useBlockProps();
    const { quote, name, title } = attributes;

    console.log(styles);
    console.log(blockProps.styles);

    ...

但它 returns 未定义。

例如，我需要使用条件样式...

if (style == 'my-style-1') {
   // do something if style 1 was selected
}

Answer 1

我建议您使用 Block Variations 而不是块样式。创建变体时，您可以分配属性值。

例如：

index.php

registerBlockType('xy/yourBlock', {
  title: 'xy',
  description: 'xy',
  attributes: {
    quote: {
      type: 'string'
    },
    name: {
      type: 'string'
    },
    title: {
      type: 'string'
    },
    style: {
      type: 'string'
    }
  },
  variations: [
    {
        name: 'my-style-1',
        isDefault: true,
        title: 'Style Name',
        attributes: { style: 'my-style-1' },
        scope: 'transform',
    },
    {
        name: 'my-style-2',
        title: 'Style Name 2',
        attributes: { style: 'my-style-2' },
        scope: 'transform',
    },
  ],
})

范围：'transform' 您可以 select 在右侧的块设置中进行更改。 select 编辑变体后，您可以在编辑中访问它并像其他任何属性一样保存文件。

edit( { attributes, setAttributes } ) {
    const { quote, name, title, style } = attributes;

    console.log(style);

    if (style == 'my-style-1') {
      // do something if style 1 was selected
    }

Answer 2

在 样式 [{...}] 中定义的选定块样式名称在 edit() 函数中可用 className:

edit({ attributes, setAttributes, className}) {
    console.log(className);
    ...
}

如果您想根据元素的样式重新排序元素，我建议您创建块样式并使用 CSS flexbox 来管理重新排序，例如 display:flex 用于包装 div order: ... 用于子元素（如 <img> 和 <p>）。通过使用样式，当内容被保存时，底层 HTML 标记不会改变，因此得到可怕的 'block validation' 错误的变化更少（另外您可以在编辑器中预览样式）。确保将 blockProps 保存在 save() 中，以便应用选定的 class，例如：

edit({ attributes, setAttributes, className }) {
    const blockProps = useBlockProps();
    console.log(className);

    return (
        <div {...blockProps}>
            <h2>Hello</h2><img />
        </div>
    );
},
save({ attributes }) {
    const blockProps = useBlockProps.save();
    return (<div {...blockProps}><h2>Hello</h2><img /></div>)
}

生成的 class 应用到 <div> 将是 .wp-block-myblock-name .is-style-my-style-1

WordPress Gutenberg 从 useBlockProps 获取块样式

WordPress Gutenberg get block styles from useBlockProps

javascript

reactjs

wordpress

wordpress-gutenberg