Block Supports 是允许块声明支持某些功能的 API。

启用这些功能中的任何一项都会在块上注册额外的属性,并提供用于操作该属性的用户界面。

为了使属性能够应用于块,生成的属性会被添加到块的包装元素中。它们被添加到从 useBlockProps 钩子返回的对象中。

BlockEdit 函数:

function BlockEdit() {
    const blockProps = useBlockProps();

    return <div { ...blockProps }>Hello World!</div>;
}

save 函数:

function BlockEdit() {
    const blockProps = useBlockProps.save();

    return <div { ...blockProps }>Hello World!</div>;
}

对于通过 PHP 中的 render_callback 渲染的动态块,您可以使用 get_block_wrapper_attributes() 函数。它返回一个包含所有生成属性的字符串,需要在包装块元素的起始标签中输出。

render_callback 函数:

function render_block() {
    $wrapper_attributes = get_block_wrapper_attributes();

    return sprintf(
        '<div %1$s>%2$s</div>',
        $wrapper_attributes,
        'Hello World!'
    );
}

allowedBlocks

注意:自 WordPress 6.9 起。

  • 类型:boolean
  • 默认值:false

此属性添加了用户界面控件,使用户能够选择块容器的允许子块。要使用此功能,请将 attributes.allowedBlocks 作为 useInnerBlocksProps 选项对象中的 allowedBlocks 属性传递。

supports: {
    allowedBlocks: true
}
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

function Edit( { attributes } ) {
    const { allowedBlocks } = attributes;
    const blockProps = useBlockProps();
    const innerBlocksProps = useInnerBlocksProps( blockProps, {
        allowedBlocks
    } );
    return <div { ...innerBlocksProps } />;
}

anchor

  • 类型:boolean
  • 默认值:false

锚点允许您直接链接到页面上的特定块。此属性添加了一个字段来定义块的 ID,并添加一个按钮以复制直接链接。

// 声明对锚点链接的支持。
supports: {
    anchor: true
}

autoRegister

  • 类型:boolean
  • 默认值:false

启用 仅 PHP 块 自动出现在块编辑器中,而无需 JavaScript 注册。当设置为 true 时,在服务器上通过 render_callback 注册的块将自动在编辑器中注册并使用 ServerSideRender。这些块的默认版本为块 API 3,如果它们使用旧版本,则会自动升级。

register_block_type( 'my-plugin/server-block', array(
    'render_callback' => function( $attributes ) {
        $wrapper_attributes = get_block_wrapper_attributes();

        return sprintf(
            '<div %1$s>Server content</div>',
            $wrapper_attributes
        );
    },
    'supports' => array(
        'autoRegister' => true,
    ),
) );

align

  • 类型:boolean 或 array
  • 默认值:false

此属性添加了块控件,使用户能够更改块的对齐方式。

supports: {
    // 声明对块对齐的支持。
    // 这添加了对所有选项的支持:
    // left, center, right, wide, and full.
    align: true
}
supports: {
    // 声明对特定对齐选项的支持。
    align: [ 'left', 'right', 'full' ]
}

当块声明支持 align 时,属性定义将扩展以包含一个类型为 string 的 align 属性。默认情况下,不分配任何对齐方式。块可以通过指定具有默认值的自己的 align 属性来应用默认对齐方式。例如:

attributes: {
    align: {
        type: 'string',
        default: 'right'
    }
}

alignWide

  • 类型:boolean
  • 默认值:true

此属性允许为您的主题启用 宽对齐。若要为单个块禁用此行为,请将此标志设置为 false。

supports: {
    // 移除对宽对齐的支持。
    alignWide: false
}

ariaLabel

  • 类型:boolean
  • 默认值:false

ARIA 标签允许您为元素定义可访问的标签。此属性允许启用块的 aria-label 定义,而无需暴露用户界面字段。

supports: {
    // 添加对 aria 标签的支持。
    ariaLabel: true
}

background

注意:自 WordPress 6.5 起。

  • 类型:Object
  • 默认值:null
  • 子属性
    • backgroundImage:类型 boolean,默认值 false
    • backgroundSize:类型 boolean,默认值 false

此值表示块支持某些与背景相关的 CSS 样式属性。当如此时,如果 主题声明支持,块编辑器将显示用户设置其值的用户界面控件。

backgroundImage 添加用户界面控件,允许用户选择背景图像。
backgroundSize 添加焦点点选择器以选择背景图像的位置,并允许用户选择背景大小(覆盖、包含、固定)。

supports: {
    background: {
        backgroundImage: true // 启用背景图像控件。
        backgroundSize: true // 启用背景图像 + 大小控件。
    }
}

当块声明支持特定背景属性时,其属性定义将扩展以包含 style 属性。

当选择背景图像时,图像数据存储在 style.background.backgroundImage 中。

当选择背景图像并更改其位置或大小时,背景位置存储在 style.background.backgroundPosition 中,其背景大小存储在 style.background.backgroundSize 属性中。

  • style:一个类型为 object 的属性,未分配默认值。这是在声明 backgroundImage 或 backgroundSize 支持时添加的。它存储用户设置的自定义值。
    • background:一个类型为 object 的属性。
      • backgroundImage:一个类型为 object 的属性,包含所选图像的信息
        • url:类型 string,图像的 URL
        • id:类型 int,媒体附件 ID
        • source:类型 string,目前唯一的值是 file
        • title:类型 string,媒体附件的标题
      • backgroundPosition:一个类型为 string 的属性,定义背景图像的位置,由焦点点选择器选择并在 CSS 中用作 background-position 值。
      • backgroundSize:一个类型为 string 的属性,定义 CSS background-size 值。

块可以通过指定具有默认值的自己的属性来应用默认背景图像、位置和大小。例如:

attributes: {
    style: {
        background: {
            backgroundImage: {
                "url":"IMAGE_URL"
            }
            backgroundPosition:"50% 50%",
            backgroundSize: "cover"
        }
    }
}

className

  • 类型:boolean
  • 默认值:true

默认情况下,类 .wp-block-your-block-name 会添加到您保存的标记的根元素中。这有助于为块提供一致的样式机制,主题和插件可以依赖此机制。如果出于某种原因不希望标记上有类,则可以禁用此功能。

supports: {
    // 移除对生成的 className 的支持。
    className: false
}

color

  • 类型:Object
  • 默认值:null
  • 子属性:
    • background:类型 boolean,默认值 true
      • button: 类型 boolean,默认值 false
      • enableContrastChecker: 类型 boolean,默认值 true
      • gradients: 类型 boolean,默认值 false
      • heading: 类型 boolean,默认值 false
      • link: 类型 boolean,默认值 false
      • text: 类型 boolean,默认值 true

      此值表示该块支持某些与颜色相关的属性。当存在此值时,区块编辑器将向用户显示 UI 控件以设置其值。

      请注意,background和text键的默认值为true,因此如果存在color属性,它们也将被视为已启用:

    supports: {
        color: {
            // 这也启用了文本和背景 UI 控件。
            gradients: true // 启用渐变 UI 控件。
        }
    }
    

    可以单独禁用它们:

    supports: {
        color: { // 启用文本 UI 控件。
            background: false, // 禁用背景 UI 控件。
            gradients: true // 启用渐变 UI 控件。
        }
    }
    

    color.background

    此属性添加 UI 控件,允许用户为块应用纯色背景。

    当声明颜色支持时,此属性默认启用(连同文本),因此只需设置 color 即可启用背景颜色。

    supports: {
        color: true // 启用背景和文本颜色支持。
    }
    

    若要禁用背景支持但保留其他颜色支持,设置为 false。

    supports: {
        color: {
            // 禁用背景支持。文本颜色支持仍然启用。
            background: false
        }
    }
    

    当块声明支持color.background时,属性定义扩展以包含两个新属性:backgroundColor和style:

    • backgroundColor:类型为 string 的属性,未分配默认值。

      当用户从预设背景颜色列表中选择时,预设 slug 存储在 backgroundColor 属性中。

      背景颜色预设源自editor-color-palette 主题支持。

      块可以通过指定具有默认值的自有属性来应用默认预设背景颜色。例如:

      attributes: {
          backgroundColor: {
              type: 'string',
              default: 'some-preset-background-slug',
          }
      }
      
    • style:类型为 object 的属性,未分配默认值。

      当选择自定义背景颜色时(即使用自定义颜色选择器),自定义颜色值存储在 style.color.background 属性中。

      块可以通过指定具有默认值的自有属性来应用默认自定义背景颜色。例如:

      attributes: {
          style: {
              type: 'object',
              default: {
                  color: {
                      background: '#aabbcc',
                  }
              }
          }
      }
      

    color.button

    注意:自 WordPress 6.5 起。

    此属性添加块控件,允许用户设置块中的按钮颜色(文本、背景)。按钮颜色默认禁用。

    要启用按钮颜色支持,将 color.button 设置为 true。

    supports: {
        color: {
            button: true
        }
    }
    

    按钮颜色预设源自editor-color-palette 主题支持。

    当块声明支持color.button时,属性定义扩展以包含 style 属性:

    • style:类型为 object 的属性,未分配默认值。

      当选择按钮颜色时,颜色值存储在 style.elements.button.color.text和style.elements.button.color.background属性中。

      块可以通过指定具有默认值的自有属性来应用默认按钮颜色。例如:

      attributes: {
          style: {
              type: 'object',
              default: {
                  elements: {
                      button: {
                          color: {
                              text: 'var:preset|color|contrast',
                              background: '#000000',
                          }
                      }
                  }
              }
          }
      }
      

    color.enableContrastChecker

    注意:自 WordPress 6.5 起。

    确定对比度检查器小部件是否在区块编辑器 UI 中显示。

    对比度检查器仅在块声明支持颜色时出现。它测试颜色组合的可读性,并在存在潜在问题时发出警告。此属性默认启用。设置为 false 以显式禁用:

    supports: {
        color: {
            enableContrastChecker: false
        }
    }
    

    color.__experimentalDuotone

    注意:自 WordPress 6.3 起已弃用。

    此属性已被 filter.duotone 取代。

    color.gradients

    此属性添加 UI 控件,允许用户为块应用渐变背景。

    supports: {
        color: {
            gradients: true,
            // 如果您不想与渐变一起使用它们,则必须禁用默认值。
            background: false,
            text: false
        }
    }
    

    渐变预设源自editor-gradient-presets 主题支持。

    当块声明支持color.gradient时,属性定义扩展以包含两个新属性:gradient和style:

    • gradient:类型为 string 的属性,未分配默认值。

      当用户从预设渐变列表中选择时,预设 slug 存储在 gradient 属性中。

      块可以通过指定具有默认值的自有属性来应用默认预设渐变。例如:

      attributes: {
          gradient: {
              type: 'string',
              default: 'some-preset-gradient-slug',
          }
      }
      
    • style:类型为 object 的属性,未分配默认值。

      当选择自定义渐变时(即使用自定义渐变选择器),自定义渐变值存储在 style.color.gradient 属性中。

      块可以通过指定具有默认值的自有属性来应用默认自定义渐变。例如:

      attributes: {
          style: {
              type: 'object',
              default: {
                  color: {
                      gradient: 'linear-gradient(135deg,rgb(170,187,204) 0%,rgb(17,34,51) 100%)',
                  }
              }
          }
      }
      

    color.heading

    注意:自 WordPress 6.5 起。

    此属性添加块控件,允许用户设置块中的标题颜色。标题颜色默认禁用。

    要启用标题颜色支持,将 color.heading 设置为 true。

    supports: {
        color: {
            // 启用标题颜色支持。
            heading: true
        }
    }
    

    标题颜色预设源自editor-color-palette 主题支持。

    当块声明支持color.heading时,属性定义扩展以包含 style 属性:

    • style:类型为 object 的属性,未分配默认值。

      当选择标题颜色时,颜色值存储在 style.elements.heading.color.text和style.elements.heading.color.background属性中。

      块可以通过指定具有默认值的自有属性来应用默认标题颜色。例如:

      attributes: {
          style: {
              type: 'object',
              default: {
                  elements: {
                      heading: {
                          color: {
                              text: 'var:preset|color|contrast',
                              background: '#000000',
                          }
                      }
                  }
              }
          }
      }
      

    color.link

    此属性添加块控件,允许用户设置块中的链接颜色。链接颜色默认禁用。

    要启用链接颜色支持,将 color.link 设置为 true。

    supports: {
        color: {
            link: true
        }
    }
    

    链接颜色预设源自editor-color-palette 主题支持。

    当区块声明支持 color.link 时,属性定义会扩展以包含 style 属性:

    • style:一个 object 类型的属性,未分配默认值。

      当选择链接颜色时,颜色值存储在 style.elements.link.color.text 和 style.elements.link.:hover.color.text 属性中。

      区块可以通过指定具有默认值的自身属性来应用默认的链接颜色。例如:

      attributes: {
          style: {
              type: 'object',
              default: {
                  elements: {
                      link: {
                          color: {
                              text: 'var:preset|color|contrast',
                          },
                          ":hover": {
                              color: {
                                  text: "#000000"
                              }
                          }
                      }
                  }
              }
          }
      }
      

    color.text

    此属性添加区块控件,允许用户设置区块中的文本颜色。

    当声明颜色支持时,默认启用此属性(连同背景色),因此只需设置颜色即可启用文本颜色。

    supports: {
        color: true // 启用背景和文本,但不启用链接。
    }
    

    若要禁用文本颜色支持但保留其他颜色支持,将 color.text 设置为 false。

    supports: {
        color: {
            // 禁用文本颜色支持。
            text: false
        }
    }
    

    文本颜色预设源自 editor-color-palette 主题支持。

    当区块声明支持 color.text 时,属性定义会扩展以包含两个新属性:textColor 和 style:

    • textColor:一个 string 类型的属性,未分配默认值。

      当用户从预设文本颜色列表中选择时,预设标识符存储在 textColor 属性中。

      区块可以通过指定具有默认值的自身属性来应用默认的预设文本颜色。例如:

      attributes: {
          textColor: {
              type: 'string',
              default: 'some-preset-text-color-slug',
          }
      }
      
    • style:一个 object 类型的属性,未分配默认值。

      当选择自定义文本颜色(即使用自定义颜色选择器)时,自定义颜色值存储在 style.color.text 属性中。

      区块可以通过指定具有默认值的自身属性来应用默认的自定义文本颜色。例如:

      attributes: {
          style: {
              type: 'object',
              default: {
                  color: {
                      text: '#aabbcc',
                  }
              }
          }
      }
      

    contentRole

    注意: 自 WordPress 6.9 起。

    • 类型:boolean
    • 默认值:false

    将区块本身标记为内容。它主要用于未声明 content 属性,或其内容仅通过其内部区块表达的区块。启用后,仅内容的编辑模式仍可编辑这些区块,并允许添加或删除内部区块。

    supports: {
        contentRole: true
    }
    

    customClassName

    • 类型:boolean
    • 默认值:true

    此属性添加一个字段,用于定义区块包装器的自定义 className。

    supports: {
        // 移除对自定义 className 的支持。
        customClassName: false
    }
    

    dimensions

    注意: 自 WordPress 6.2 起。

    • 类型:Object
    • 默认值:null
    • 子属性:
      • aspectRatio:类型 boolean,默认值 false
      • height:类型 boolean,默认值 false
      • minHeight:类型 boolean,默认值 false
      • minWidth:类型 boolean,默认值 false
      • width:类型 boolean,默认值 false

    此值表示区块支持某些与尺寸相关的 CSS 样式属性。当声明时,如果 主题声明支持,区块编辑器将显示 UI 控件供用户设置其值。

    supports: {
        dimensions: {
            aspectRatio: true, // 启用宽高比控件。
            height: true, // 启用高度控件。
            minHeight: true, // 启用最小高度控件。
            minWidth: true, // 启用最小宽度控件。
            width: true, // 启用宽度控件。
        }
    }
    

    当区块声明支持特定尺寸属性时,其属性定义会扩展以包含 style 属性。

    • style:一个 object 类型的属性,未分配默认值。这是在声明 aspectRatio、height、minHeight、minWidth 或 width 支持时添加的。它存储用户设置的自定义值。例如:
    attributes: {
        style: {
            dimensions: {
                aspectRatio: "16/9",
                height: "40vh",
                minHeight: "50vh",
                minWidth: "200px",
                width: "400px",
            }
        }
    }
    

    editableRoot

    • 类型:boolean
    • 默认值:false

    当设置为 true 时,区块声明其在祖先元素(编辑器画布)是 contenteditable 编辑主机、焦点和原生选择位于该处而不是在区块自身的可编辑元素上时仍能正常工作。编辑器使用此功能在选中此类区块时保持画布可编辑,从而启用跨区块的原生部分选择。依赖 event.target 或 DOM 焦点指向其自身元素的区块不应声明此支持。

    filter

    • 类型:Object
    • 默认值:null
    • 子属性:
      • duotone:类型 boolean,默认值 false

    此值表示区块支持某些与滤镜相关的属性。当声明时,区块编辑器将显示 UI 控件供用户设置其值。

    filter.duotone

    此属性添加 UI 控件,允许用户对区块或区块的一部分应用双色滤镜。

    supports: {
        filter: {
            // 启用双色支持
            duotone: true
        }
    },
    selectors: {
        filter: {
            // 将滤镜应用于图像块内的 img 元素
            duotone: '.wp-block-image img'
        }
    }
    

    可以通过设置 selectors.filter.duotone 选择器将滤镜应用于区块内的元素。

    双色预设源自 theme.json 中的 color.duotone。

    当区块声明支持 filter.duotone 时,属性定义会扩展以包含属性 style:

    • style:一个 object 类型的属性,未分配默认值。

      区块可以通过指定具有默认值的自身属性来应用默认的双色颜色。例如:

      attributes: {
          style: {
              type: 'object',
              default: {
                  color: {
                      duotone: [
                          '#FFF',
                          '#000'
                      ]
                  }
              }
          }
      }
      

    html

    • 类型:boolean
    • 默认值:true

    默认情况下,区块的标记可以单独编辑。要禁用此行为,将 html 设置为 false。

    supports: {
        // 移除对 HTML 模式的支持。
        html: false
    }
    

    inserter

    • 类型:boolean
    • 默认值:true

    默认情况下,所有区块都会出现在插入器、区块转换菜单、样式指南等中。要将区块从用户界面的所有部分隐藏,以便只能通过编程方式插入,将 inserter 设置为 false。

    supports: {
        // 将此区块从插入器中隐藏。
        inserter: false
    }
    

    interactivity

    • 类型:boolean 或 object
    • 默认值:false
    • 子属性:
      • clientNavigation:类型 boolean,默认值 false
      • interactive:类型 boolean,默认值 false

    指示区块是否使用交互性 API 功能。

    clientNavigation 子属性指示块是否与交互性 API 客户端导航兼容。有关详细信息,请参阅客户端导航兼容性指南。

    interactive 子属性指示块是否使用交互性 API 指令。

    如果您将 supports.interactivity 设置为 true,则相当于同时将 supports.interactivity.clientNavigation 和 supports.interactivity.interactive 也设置为 true。

    layout

    • 类型:boolean 或 Object
    • 默认值:null
    • 子属性:
      • default:类型 Object,默认值 null
      • allowSwitching:类型 boolean,默认值 false
      • allowEditing:类型 boolean,默认值 true
      • allowInheriting:类型 boolean,默认值 true
      • allowSizingOnChildren:类型 boolean,默认值 false
      • allowVerticalAlignment:类型 boolean,默认值 true
      • allowJustification:类型 boolean,默认值 true
      • allowOrientation:类型 boolean,默认值 true
      • allowWrap:类型 boolean,默认值 true
      • allowCustomContentAndWideSize:类型 boolean,默认值 true

    此值仅适用于作为内部块容器的块。如果设置为 true,布局类型将为 flow。对于其他布局类型,必须在 default 对象内显式设置 type。

    请注意,为了使布局正常工作,其适用的块应具有类名作为选择器。该类名将拼接为布局类型字符串以形成布局选择器。

    layout.default

    • 类型:Object
    • 默认值:null

    允许设置 type 属性以定义块的默认布局类型,以及该布局类型固有属性的默认值。例如,对于 flex 布局,可以为 flexWrap 设置默认值。

    layout.allowSwitching

    • 类型:boolean
    • 默认值:false

    暴露一个切换器控件,允许在所有现有布局类型之间进行切换。

    layout.allowEditing

    • 类型:boolean
    • 默认值:true

    确定块侧边栏中布局控件的显示情况。如果设置为 false,将隐藏布局控件。

    layout.allowInheriting

    • 类型:boolean
    • 默认值:true

    仅针对 flow 布局类型,确定“内部块使用内容宽度”切换器的显示情况。

    layout.allowSizingOnChildren

    • 类型:boolean
    • 默认值:false

    仅针对 flex 布局类型,确定 flex 块的所有子块的尺寸控件(适配/增长/最大宽度/固定)的显示情况。

    layout.allowVerticalAlignment

    • 类型:boolean
    • 默认值:true

    仅针对 flex 布局类型,确定块工具栏中垂直对齐控件的显示情况。

    layout.allowJustification

    • 类型:boolean
    • 默认值:true

    针对 flex 布局类型,确定块工具栏和块侧边栏中对齐控件的显示情况。针对 constrained 布局类型,确定块侧边栏中对齐控件的显示情况。

    layout.allowOrientation

    • 类型:boolean
    • 默认值:true

    仅针对 flex 布局类型,确定块工具栏中方向控件的显示情况。

    layout.allowWrap

    • 类型:boolean
    • 默认值:true

    仅针对 flex 布局类型,确定块侧边栏中“允许换行”切换器的显示情况。当设置为 false 时,换行行为由 layout.default 中的 flexWrap 值控制。

    layout.allowCustomContentAndWideSize

    • 类型:boolean
    • 默认值:true

    仅针对 constrained 布局类型,确定块侧边栏中自定义内容和宽尺寸控件的显示情况。

    listView

    注意:自 WordPress 7.0 起。

    • 类型:boolean
    • 默认值:false

    为块的内部块在块检查器中启用列表视图面板。

    当启用此支持时,检查器将显示一个列表视图树,允许用户从侧边栏而不是仅使用全局文档列表视图来检查和管理工作块的内部块。

    supports: {
        listView: true
    }
    

    listView 支持仅影响编辑器 UI,不会为块添加任何属性。

    lock

    • 类型:boolean
    • 默认值:true

    块可能希望禁用切换锁定状态的能力。默认情况下,用户可以通过块“选项”下拉菜单对其进行锁定/解锁。要禁用此行为,请将 lock 设置为 false。

    supports: {
        // Remove support for locking UI.
        lock: false
    }
    

    multiple

    • 类型:boolean
    • 默认值:true

    非多重块可以插入到每个帖子中,且仅一次。例如,如果已编辑的帖子中已存在内置的“更多”块,则无法再次插入该块。非多重块的图标会自动变暗(不可点击)以防止出现多个实例。

    supports: {
        // Use the block just once per post
        multiple: false
    }
    

    position

    注意:自 WordPress 6.2 起。

    • 类型:Object
    • 默认值:null
    • 子属性:
      • sticky:类型 boolean,默认值 false

    此值表示块支持某些与位置相关的 CSS 样式属性。当支持时,如果主题声明了支持,块编辑器将显示 UI 控件供用户设置其值。

    请注意,粘性位置控件目前仅适用于设置在文档根级别的块。将块设置为 sticky 位置时,当用户滚动页面时,该块将粘附于其最直接的父级。

    supports: {
        position: {
            sticky: true // Enable selecting sticky position.
        }
    }
    

    当块声明支持特定位置属性时,其属性定义将扩展以包含 style 属性。

    • style:无默认值分配的 object 类型的属性。这是在声明 sticky 支持时添加的。它存储用户设置的自定义值。例如:
    attributes: {
        style: {
            position: {
                type: "sticky",
                top: "0px"
            }
        }
    }
    

    renaming

    注意:自 WordPress 6.5 起。

    • 类型:boolean
    • 默认值:true

    默认情况下,用户可以通过块“选项”下拉菜单或“高级”面板重命名块。要禁用此行为,请将 renaming 设置为 false。

    supports: {
        // Don't allow the block to be renamed in the editor.
        renaming: false,
    }
    

    reusable

    • 类型:boolean
    • 默认值:true

    块可能希望禁用转换为可复用块的能力。默认情况下,所有块都可以转换为可复用块。如果 supports reusable 设置为 false,则不会显示将块转换为可复用块的选项。

    supports: {
        // Don't allow the block to be converted into a reusable block.
        reusable: false,
    }
    

    shadow

    注意:自 WordPress 6.5 起。

    • 类型:boolean
    • 默认值:false

    此属性添加块控件,允许用户为块设置框阴影。默认情况下禁用阴影。

    supports: {
        shadow: true // Enable the box-shadow picker.
    }
    

    阴影预设源自 theme.json 中定义的阴影预设。

    当块声明支持 shadow 时,属性定义将扩展以包含 style 属性:

    • style: 一个没有默认值的 object 类型属性。

      当选择阴影时,颜色值存储在 style.shadow 中。

      块可以通过指定具有默认值的自身属性来应用默认阴影。例如:

      attributes: {
          style: {
              type: 'object',
              default: {
                  shadow: "var:preset|shadow|deep"
              }
          }
      }
      

    spacing

    • Type: Object
    • Default value: null
    • Subproperties:
      • margin: 类型 boolean 或 array,默认值 false
      • padding: 类型 boolean 或 array,默认值 false
      • blockGap: 类型 boolean 或 array,默认值 false

    此值表示块支持某些与间距相关的 CSS 样式属性。当支持时,如果主题声明了支持,区块编辑器将显示 UI 控件供用户设置其值。

    supports: {
        spacing: {
            margin: true,  // Enable margin UI control.
            padding: true, // Enable padding UI control.
            blockGap: true,  // Enables block spacing UI control for blocks that also use `layout`.
        }
    }
    

    当块声明支持特定的间距属性时,其属性定义将扩展以包含 style 属性。

    • style: 一个没有默认值的 object 类型属性。这是在声明 margin 或 padding 支持时添加的。它存储用户设置的自定义值。例如:
    attributes: {
        style: {
            margin: 'value',
            padding: {
                top: 'value',
            }
        }
    }
    

    间距属性可以定义允许侧面的数组——“top”、“right”、“bottom”、“left”——可以进行配置。当定义了此类任意侧面时,仅显示这些侧面的 UI 控件。

    轴向侧面使用 vertical 和 horizontal 术语定义,并为每个轴向对显示单个 UI 控件(例如,vertical 同时控制顶部和底部侧面)。间距属性可以支持任意单独侧面 **或** 轴向侧面,但不能混合两者。

    注意:blockGap 接受 vertical 和 horizontal 轴向侧面,用于调整间隙列和行值。blockGap 不支持任意侧面。

    supports: {
        spacing: {
            margin: [ 'top', 'bottom' ],             // Enable margin for arbitrary sides.
            padding: true,                           // Enable padding for all sides.
            blockGap: [ 'horizontal', 'vertical' ],  // Enables axial (column/row) block spacing controls
        }
    }
    

    typography

    • Type: Object
    • Default value: null
    • Subproperties:
      • fontSize: 类型 boolean,默认值 false
      • lineHeight: 类型 boolean,默认值 false
      • textAlign: 类型 boolean 或 array,默认值 false
      • textShadow: 类型 boolean,默认值 false

    此对象的存在表示块支持某些与排版相关的属性。当支持时,区块编辑器将显示排版 UI,允许用户控制其值。

    supports: {
        typography: {
            // Enable support and UI control for font-size.
            fontSize: true,
            // Enable support and UI control for line-height.
            lineHeight: true,
            // Enable support and UI control for text alignment.
            textAlign: true,
        },
    }
    

    typography.fontSize

    • Type: boolean
    • Default value: false

    此值表示块支持字体大小 CSS 样式属性。当支持时,区块编辑器将显示 UI 控件供用户设置其值。

    此控件中显示的值为通过 editor-font-sizes 主题支持 声明的值,如果没有提供则使用默认值。

    supports: {
        typography: {
            // Enable support and UI control for font-size.
            fontSize: true,
        },
    }
    

    当块声明支持 fontSize 时,属性定义将扩展以包含两个新属性:fontSize 和 style:

    • fontSize: 一个没有默认值的 string 类型属性。它存储用户选择的任何预设值。块可以通过指定具有默认值的自身 fontSize 属性来应用默认字体大小。例如:
    attributes: {
        fontSize: {
            type: 'string',
            default: 'some-value',
        }
    }
    
    • style: 一个没有默认值的 object 类型属性。它存储用户设置的自定义值,并与其他块支持(如颜色)共享。块可以通过指定具有默认值的自身 style 属性来应用默认样式。例如:
    attributes: {
        style: {
            type: 'object',
            default: {
                typography: {
                    fontSize: 'value'
                }
            }
        }
    }
    

    typography.lineHeight

    • Type: boolean
    • Default value: false

    此值表示块支持行高 CSS 样式属性。当支持时,如果主题声明了支持,区块编辑器将显示 UI 控件供用户设置其值。

    supports: {
        typography: {
            // Enable support and UI control for line-height.
            lineHeight: true,
        },
    }
    

    当块声明支持 lineHeight 时,属性定义将扩展以包含一个新的没有默认值的 object 类型属性 style。它存储用户设置的自定义值。块可以通过指定具有默认值的自身 style 属性来应用默认样式。例如:

    attributes: {
        style: {
            type: 'object',
            default: {
                typography: {
                    lineHeight: 'value'
                }
            }
        }
    }
    

    typography.textAlign

    注意:自 WordPress 6.6 起。

    • Type: boolean 或 array
    • Default value: false

    此属性添加块工具栏控件,允许更改块的文本对齐方式。

    supports: {
        typography: {
            // Declare support for block's text alignment.
            // This adds support for all the options:
            // left, center, right.
            textAlign: true
        }
    }
    
    supports: {
        typography: {
            // Declare support for specific text alignment options.
            textAlign: [ 'left', 'right' ]
        }
    }
    

    当块声明支持 textAlign 时,属性定义将扩展以包含一个新的没有默认值的 object 类型属性 style。它存储用户设置的自定义值。块可以通过指定具有默认值的自身 style 属性来应用默认样式。例如:

    attributes: {
        style: {
            type: 'object',
            default: {
                typography: {
                    textAlign: 'value'
                }
            }
        }
    }
    

    typography.textShadow

    • Type: boolean
    • Default value: false

    此值表示块支持文本阴影 CSS 样式属性。当支持时,如果主题声明了支持,区块编辑器将显示 UI 控件供用户设置其值。

    supports: {
        typography: {
            // Enable support and UI control for text-shadow.
            textShadow: true,
        },
    }
    

    当块声明支持 textShadow 时,属性定义将扩展以包含两个新属性:textShadow 和 style:

    • textShadow: 一个没有默认值的 string 类型属性。它存储用户选择的任何预设值。块可以通过指定具有默认值的自身 textShadow 属性来应用默认预设文本阴影。例如:
    attributes: {
        textShadow: {
            type: 'string',
            default: 'some-value',
        }
    }
    
    • style: 一个没有默认值的 object 类型属性。它存储用户设置的自定义值,并与其他块支持(如颜色)共享。块可以通过指定具有默认值的自身 style 属性来应用默认样式。例如:
    attributes: {
        style: {
            type: 'object',
            default: {
                typography: {
                    textShadow: 'value'
                }
            }
        }
    }
    

    splitting

    当设置为 true 时,Enter 会将块拆分为两个块。请注意,此功能仅适用于简单的文本块,例如带有单个 RichText 字段的段落和标题。在 edit 函数中的 RichText 必须 拥有一个与文本属性键匹配的 identifier prop,以便正确更新选择并知道在哪里拆分。

    visibility

    注意:自 WordPress 6.9 起。

    • Type: boolean
    • 默认值:true

    默认情况下,用户可以从块的“选项”下拉菜单中隐藏块。要禁用此行为,请将 visibility 设置为 false。

    supports: {
        visibility: false,
    }