块编辑器开发文档

@wordpress/primitives

💡 云策文档标注

概述

@wordpress/primitives 是一个跨平台使用的 WordPress 包,提供 SVG 和 Path 等基础组件,用于在 Gutenberg 项目中构建用户界面元素。

关键要点

  • 安装方式:通过 npm install @wordpress/primitives --save 安装。
  • 使用方法:从包中导入 SVG 和 Path 组件,用于创建 SVG 图形元素。
  • 环境要求:需要 ES2015+ 环境,否则需包含 @wordpress/babel-preset-default 中的 polyfill。
  • 项目背景:作为 Gutenberg 项目 monorepo 的一部分,用于 WordPress 和其他软件项目。

代码示例

import { SVG, Path } from '@wordpress/primitives';

const myElement = (
    <SVG
        width="18"
        height="18"
        viewBox="0 0 18 18"
        xmlns="http://www.w3.org/2000/svg"
    >
        <Path d="M4.5 9l5.6-5.7 1.4 1.5L7.3 9l4.2 4.2-1.4 1.5L4.5 9z" />
    </SVG>
);

注意事项

确保代码运行环境支持 ES2015+ 特性,否则需添加 polyfill。


📄 原文内容

Primitives to be used cross-platform.

Installation

Install the module

npm install @wordpress/primitives --save

Usage

import { SVG, Path } from '@wordpress/primitives';

const myElement = (
    <SVG
        width="18"
        height="18"
        viewBox="0 0 18 18"
        xmlns="http://www.w3.org/2000/svg"
    >
        <Path d="M4.5 9l5.6-5.7 1.4 1.5L7.3 9l4.2 4.2-1.4 1.5L4.5 9z" />
    </SVG>
);

This package assumes that your code will run in an ES2015+ environment. If you’re using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default in your code.

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.