Gutenberg Blocks 开发笔记

2024.8.6 #

今天开发一个类似Instagram故事的一个图片+链接的功能，当用户添加这个模块到编辑器中时，会默认添加一个初始故事。

需求要点：

• 拖拽功能
• 选择page或者post链接
• 如果是标准的page或者post链接，则自动提取featured image。
• 同时支持自定义链接，当添加的是自定义链接时，需要有一个新选项来上传链接图片。

编写过程遇到的难点：

• 拖拽组件中添加单独故事链接，使用到WordPress React ServerSideRendering，但是这个是将整个php组件渲染到当前位于items.map()子组件中，不是想要的效果。
• 自动提取featured image，用户添加页面链接我们给的是WordPress标准组件URLInput，但是当选中链接时，这个组件仅提供链接url和id，所以需要发一个新的服务器请求，拿到当前post id所对应的post type，然后再通过useSelect勾子拿到featured image的链接，这中间需要用到两个useEffect, 以及追踪一个isFetchingImage的变量。

2024.8.26 #

有时候可以通过添加标准组件的一个variation来实现需求，比如将标准table组件的`haxFixedLayout`默认值从true修改成false。Variations文档。

2024.9.1 #

突然发现如果写成php组件，则无法在Gutenberg中使用，如果写成block，则可以同时在Gutenberg和php模版中使用。

get_template_part(
    'partials/author-box',
    null,
    [
        'author_id'       => $_author_id,
        'render_location' => 'author-page',
    ]
);

// 在php模版中重复使用author组件。
echo wp_kses_post( render_block(
    [
        'blockName' => 'rgbc/author',
        'attrs'     => [
	        'authorId'       => $_author_id,
	        'renderLocation' => 'author-page',
        ],
    ]
) );

2024.9.3 #

今天尝试给标准grid组件增加一个block variation：https://github.com/heybran/gutenberg-blocks/blob/main/block-variations/block-variations.js#L21

/**
 * @see https://developer.wordpress.org/block-editor/reference-guides/core-blocks/#group
 * @see https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/group/variations.js
 */
registerBlockVariation('core/group', {
	name: 'product-hero-grid',
	title: __('Product Hero Grid'),
	attributes: {
		// tagName: 'div', // Default to `div`
		layout: {
			type: 'grid',
			columnCount: 2,
		},
		// Use this custom class to override the default layout.
		className: 'product-hero-grid',
	},
	// TODO: how to remove transform option at the toolbar level and sidebar level?
	// TODO: how to remove the align option, as we're using custom css class?
	// TODO: how to hide the Layout option at the sidebar?
});

有待解决的是：

• 如何隐藏Transform功能，因为这个是通过CSS实现一个特定的排版，并不需要提供Transform功能给用户。
• 如何隐藏位于sidebar区域的layout和transform功能，因为这些也没必要给到用户。
• 如果隐藏align功能，这个也没有必要支持。