古腾堡编辑器开发参考

wp.data 类型

https://developer.wordpress.org/block-editor/reference-guides/data/

• core
• core/annotations
• core/blocks
• core/block-editor
• core/editor
• core/edit-post
• core/edit-site
• core/notices
• core/nux
• core/viewport

core

网站的全局配置

• getMedia()

core/blocks

所有已注册的块的内容

core/block-editor

当前所编辑页面中的块的内容

• getSettings()

core/editor

当前所编辑页面的其他属性

• getEditedPostAttribute()

core/eidt-post

当前所编辑页面的界面相关内容

core/notices

提示内容

@wordpress/element

@wordpress/block-editor

• getBlockAttributes( clientID ) 获取指定的块属性值

@wordpress/components

• Button 按钮
• Icon 图标(dashicon)
• PanelBody 侧边栏手风琴
• SelectControl
• TextareaControl
• TextControl
• ToolbarButton
• Tooltip 鼠标划过时的提示标签

@wordpress/compose

• usePrevious (指定一个值，判断当前值与前一状态是否相同)

@wordpress/data

• dispatch
• select
• useDispatch
• useSelect

wp.data.select

浏览器控制台查看

// 使用示例
wp.data.select('core/editor').getBlocks()

获取当前正在编辑的文章的数据

• getBlockCount() 获取块数量
• getEditedPostContent() 获取文章 HTML 内容
• getBlocks() 获取块数据

wp.data.dispatch

wp.data.dispatch

// 使用示例
wp.blocks.parse(wp.data.select('core/editor').getEditedPostContent())

parse()

serialize()

registerBlockType()

教程目录

Gutenberg Blocks for WordPress and React Developers (by Ali Alaa)

教程来源： udemy

第四节：

• 25 – 自定义块图标 (重要)
• 26 – 文字输入组件 RichText (重要)
• 27 – 28 – 悬浮工具栏 BlockControls (重要)
• 29 – 右侧边栏 InspectorControls / PanelBody / TextControl / TextareaControl / ToggleControl / AnglePickerControl / ColorPicker / ColorPalette (重要)
• 31 – withColors
• 36 – 块列表中显示预览样本 (重要)
• 37 – 块类型转换 (重要)
• 38 – 39 (待定)

第五节

• 43 – InnerBlocks 创建嵌套块组件 (重要)
• 45 – reuseable 禁用, html 编辑禁用，在 block.json 文件中 supports 中配置 (重要)
• 46 – 块 template templateLock (重要)
• 50 – MediaPlaceholder
• 51 – 60 处理图片上传功能
  (51) 处理 blob , @wordpress/blob (重要)
  (53) 错误反馈 (特别重要)
  (55) 上传图片BLOB 优化 (重要)
  (56) 图片替换 Toolbar 按钮 MediaReplaceFlow
  (59) 图片尺寸选择 getMedia() (特别重要)
• 60 – 更换图片后自动聚焦输入框
• 62 – Tooltip 组件
• 64 – usePrevious
• 67 – attribute属性为数组时，对值进行 source 设置
  socialLinks: {
  “type”: “array”,
  “default”: [
  { “link”: “https://puji.design”, “icon”: “puji”},
  { “link”: “https://puji.design”, “icon”: “design”}
  “source”: “query”,
  “selector”: “li”,
  “query”: {
  “icon”: { “source”: “attribute”, “attribute”:”data-icon” }
  “link”: { “selector”:”a”, “source”: “attribute”, “attribute”:”href” }
  }
  ]
  }
• 69 – attribute 属性修改（复杂数据类型）(特别重要)
  const theArrayCopy = [ …theArray ];
  theArrayCopy[ index ][ key ] = newValue;
  setAttributes( { theArray: theArrayCopy } );
• 73 – 添加预览功能
• 74 – 添加块转换功能 createBlock , isMultiBlock

第八节

• 89 – 通用数据（介绍不同库的相关功能）

第十节

• 106 – 父模块传递参数到子模块 useContext (特别重要)

待研究

• usePrevious

参考链接

官方 Github: https://github.com/WordPress/gutenberg/

Block editor组件： gutenberg/packages/block-editor/src/components