云策 WordPress 开发者社区

块编辑器开发文档

@wordpress/global-styles-ui

查看官方原文 ↗
💡 云策文档标注

概述

@wordpress/global-styles-ui 是一个 WordPress 模块，提供用于管理全局样式的 UI 组件。它允许开发者通过 React 组件集成全局样式编辑器界面，支持自定义样式、主题默认样式和回调函数。

关键要点

  • 安装方式：通过 npm install @wordpress/global-styles-ui --save 安装模块。
  • 核心组件：GlobalStylesUI 是主要的全局样式编辑器界面组件。
  • 主要属性：包括 value（用户自定义全局样式）、baseValue（主题默认全局样式）、onChange（样式变化回调函数）、path（当前导航路径）、onPathChange（路径变化回调函数）、fontLibraryEnabled（启用字体库功能）、serverCSS（服务器 CSS 样式）和 serverSettings（服务器设置）。
  • 使用示例：在 React 组件中导入 GlobalStylesUI，并传递相关属性如 value、baseValue 和 onChange。

代码示例

import { GlobalStylesUI } from '@wordpress/global-styles-ui';

function MyComponent() {
    return (
        <GlobalStylesUI
            value={ userStyles }
            baseValue={ themeStyles }
            onChange={ handleChange }
        />
    );
}
📄 原文内容

UI components for managing WordPress Global Styles.

Installation

Install the module:

npm install @wordpress/global-styles-ui --save

Usage

import { GlobalStylesUI } from '@wordpress/global-styles-ui';

function MyComponent() {
    return (
        <GlobalStylesUI
            value={ userStyles }
            baseValue={ themeStyles }
            onChange={ handleChange }
        />
    );
}

API

GlobalStylesUI

Main component for the Global Styles editor interface.

Props:

  • value (GlobalStylesConfig): User’s custom global styles
  • baseValue (GlobalStylesConfig): Theme’s default global styles
  • onChange (Function): Callback when styles change
  • path (string, optional): Current navigation path
  • onPathChange (Function, optional): Callback when path changes
  • fontLibraryEnabled (boolean, optional): Enable font library features
  • serverCSS (array, optional): Server CSS styles
  • serverSettings (object, optional): Server settings

Contributing

See CONTRIBUTING.md for details.