块编辑器开发文档

💡 云策文档标注

概述

本文档是 WordPress 块编辑器(Gutenberg)的核心术语词汇表,旨在为开发者提供关键概念的定义和解释。内容涵盖块编辑器的基础组件、API 接口、主题开发相关术语,以及编辑体验中的关键元素,帮助开发者深入理解块编辑器生态系统。

关键要点

  • Attribute sources:定义块属性提取策略的对象,键为属性名,值为从保存内容中提取值的函数。
  • Attributes:块在文章内容中的当前状态对象,由块类型的 attribute sources 确定,编辑时可变化并用于序列化。
  • Block:标记单元,组合形成网页内容或布局,统一了短代码、自定义 HTML 和嵌入发现的概念。
  • Block Styles:块的 CSS 样式,通过样式表或块标记实现,有时称为 Local Styles。
  • Block Supports:API 允许块声明支持的功能,自动添加属性和 UI 控件。
  • Block Theme:支持全站编辑的块主题,核心是块模板和块模板部件。
  • Block Templates:预定义的块排列,可作为文章类型模板或自定义块内部模板,基于 HTML 文件映射标准模板层次结构。
  • Block Template Parts:可重用的结构部件(如页眉、页脚),用于全站编辑,不与文章内容编辑器混合。
  • Dynamic block:内容动态变化的块类型,保存时不固定,由 PHP 实现运行时渲染。
  • Full Site Editing:允许用户使用块编辑整个网站的功能集合,包括块模式、全局样式等。
  • Global Styles:WordPress 生成的 CSS 样式,作为嵌入式样式表在前端加载,与块样式相对。
  • Static block:内容在保存时已知的块类型,直接以 HTML 标记保存在文章内容中。
  • RichText:支持富文本编辑的通用组件,包括粗体、斜体、超链接等。
  • Serialization:将块属性对象转换为 HTML 标记的过程,每次编辑块时发生。
  • Settings Sidebar:右侧面板,包含文档和块设置,通过齿轮图标切换。
  • Site Editor:直接编辑和导航模板、模板部件、样式选项等的统一体验。

📄 原文内容

Attribute sources

An object describing the attributes shape of a block. The keys can be named as most appropriate to describe the state of a block type. The value for each key is a function which describes the strategy by which the attribute value should be extracted from the content of a saved post’s content. When processed, a new object is created, taking the form of the keys defined in the attribute sources, where each value is the result of the attribute source function.

Attributes

The object representation of the current state of a block in post content. When loading a saved post, this is determined by the attribute sources for the block type. These values can change over time during an editing session when the user modifies a block, and are used when determining how to serialize the block.

Block

The abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.

Block Styles

The CSS styles that are part of the block, either via its stylesheet or via the block markup itself. For example, a class attached to the block markup is considered block styles.

Compare to Global Styles. In contraposition to Global Styles, block styles are sometimes referred to as Local Styles.

Learn more about Block Styles.

Block Supports

An API for blocks to declare what features they support. By declaring support for a feature, the API would add additional attributes to the block and matching UI controls for most of the existing block supports.

See Block Supports reference documentation for a deep dive into the API.

Block Theme

A theme built in block forward way that allows Full Site Editing to work. The core of a block theme are its block templates and block template parts. To date, block theme templates have been HTML files of block markup that map to templates from the standard WordPress template hierarchy.

Block categories

These are not a WordPress taxonomy, but instead used internally to sort blocks in the Block Library.

Block ~Inserter~ Library

Primary interface for selecting from the available blocks, triggered by plus icon buttons on Blocks or in the top-left of the editor interface.

Block name

A unique identifier for a block type, consisting of a plugin-specific namespace and a short label describing the block’s intent. e.g. core/image

Block Templates

A template is a pre-defined arrangement of blocks, possibly with predefined attributes or placeholder content. You can provide a template for a post type, to give users a starting point when creating a new piece of content, or inside a custom block with the InnerBlocks component. At their core, templates are simply HTML files of block markup that map to templates from the standard WordPress template hierarchy, for example index, single or archive. This helps control the front-end defaults of a site that are not edited via the Page Editor or the Post Editor. See the templates documentation for more information.

Block Template Parts

Building on Block Templates, these parts help set structure for reusable items like a Footer or Header that one typically sees in a WordPress site. They are primarily site structure and are never to be mixed with the post content editor. With Full Site Editing and block based themes, users can create their own arbitrary Template Parts, save those in the database for their site, and reuse them throughout their site. Template parts are equivalent – in blocks – of theme template parts. They are generally defined by a theme first, carry some semantic meaning (could be swapped between themes such as a header), and can only be inserted in the site editor context (within “templates”).

Block type

In contrast with the blocks composing a particular post, a block type describes the blueprint by which any block of that type should behave. So while there may be many images within a post, each behaves consistent with a unified image block type definition.

Classic block

A block which embeds the TinyMCE editor as a block, TinyMCE was the base of the previous core editor. Older content created prior to the block editor will be loaded in to a single Classic block.

Dynamic block

A type of block in which the content may change and cannot be determined at the time of saving a post, instead calculated any time the post is shown on the front of a site. These blocks may save fallback content or no content at all in their JavaScript implementation, instead deferring to a PHP block implementation for runtime rendering.

Full Site Editing

This refers to a collection of features that ultimately allows users to edit their entire website using blocks as the starting point. This feature set includes everything from block patterns to global styles to templates to design tools for blocks (and more). First released in WordPress 5.9.

Global Styles

The CSS styles generated by WordPress and enqueued as an embedded stylesheet in the front end of the site. The stylesheet ID is global-styles-inline-css. The contents of this stylesheet come from the default theme.json of WordPress, the theme’s theme.json, and the styles provided by the user via the global styles sidebar in the site editor.

See theme.json reference docs, the how to guide, and an introduction to styles in the block editor.

Compare to block styles.

Inspector

Deprecated term. See Settings Sidebar.

Local Styles

See Block Styles.

Navigation Block

A block that allows you to edit a site’s navigation menu, both in terms of structure and design.

Patterns

Patterns are predefined layouts of blocks that can be inserted as starter content that are meant to be changed by the user every time. Once inserted, they exist as a local save and are not global.

Post settings

A sidebar region containing metadata fields for the post, including scheduling, visibility, terms, and featured image.

Query Block

A block that replicates the classic WP_Query and allows for further customization with additional functionality.

Reusable block

A block that is saved and then can be shared as a reusable, repeatable piece of content.

RichText

A common component enabling rich content editing including bold, italics, hyperlinks, etc.

Serialization

The process of converting a block’s attributes object into HTML markup, which occurs each time a block is edited.

Settings Sidebar

The panel on the right that contains the document and block settings. The sidebar is toggled using the Settings gear icon. Block settings are shown when a block is selected, otherwise document settings are shown.

Site Editor

The cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more.

Static block

A type of block where the content of which is known at the time of saving a post. A static block will be saved with HTML markup directly in post content.

Template Editing Mode

A scaled down direct editing experience allowing you to edit/change/create the template a post/page uses.

Theme Blocks

Blocks that accomplish everything possible in traditional templates using template tags (ex: Post Author Block). A full list can be found here.

TinyMCE

TinyMCE is a web-based JavaScript WYSIWYG (What You See Is What You Get) editor.

Toolbar

A set of button controls. In the context of a block, usually referring to the toolbar of block controls shown above the selected block.