扩展Gutenberg核心/图像

基础概念：

Gutenberg 是 WordPress 的一个核心功能，它引入了一种全新的编辑器界面，允许用户通过“块”（blocks）的方式来构建内容。这些块可以是文本、图像、视频、列表等。图像块是其中之一，用于插入和编辑图片。

扩展 Gutenberg 核心/图像的优势：

灵活性：用户可以根据需要自定义图像的显示方式，如大小、对齐、链接等。
易用性：直观的拖放界面使得内容创建变得简单快捷。
可访问性：提供了辅助功能支持，确保所有用户都能无障碍地使用。
集成性：与其他 Gutenberg 块和插件无缝集成，提供一致的用户体验。

类型与应用场景：

基本图像块：用于简单地插入图片。
封面图像块：用于设置文章或页面的封面。
画廊块：允许用户创建一个图片画廊。

应用场景包括但不限于博客文章、产品展示、新闻报道、社交媒体帖子等。

常见问题及解决方法：

图像加载缓慢：
- 原因：图像文件过大或服务器带宽不足。
- 解决方法：优化图像大小，使用 CDN 加速，或升级服务器带宽。

图像显示不正确：
- 原因：可能是图像路径错误、文件损坏或插件冲突。
- 解决方法：检查图像路径，重新上传图像，或禁用最近安装的插件进行排查。
无法插入图像：
- 原因：权限问题或媒体库为空。
- 解决方法：确保用户有足够的权限上传和编辑图像，或在媒体库中添加图像。
图像样式丢失：
- 原因：CSS 样式未正确加载或覆盖。
- 解决方法：检查主题和插件的 CSS 文件，确保图像样式被正确应用。

扩展 Gutenberg 图像的具体操作：

如果你想扩展 Gutenberg 的图像功能，可以通过以下步骤进行：

创建自定义块：使用 registerBlockType 函数创建一个新的块类型，并定义其属性和编辑器界面。

const { registerBlockType } = wp.blocks;
const { MediaUpload, InspectorControls } = wp.editor;
const { Button, PanelBody, RangeControl } = wp.components;

registerBlockType('my-plugin/custom-image-block', {
    title: 'Custom Image Block',
    icon: 'format-image',
    category: 'media',
    attributes: {
        imageId: { type: 'number' },
        imageSize: { type: 'string', default: 'medium' },
    },
    edit: (props) => {
        const { attributes, setAttributes } = props;
        const onSelectImage = (media) => {
            setAttributes({ imageId: media.id });
        };
        return (
            <>
                <InspectorControls>
                    <PanelBody title="Image Settings">
                        <RangeControl
                            label="Image Size"
                            value={attributes.imageSize}
                            onChange={(value) => setAttributes({ imageSize: value })}
                            min="thumbnail"
                            max="full"
                        />
                    </PanelBody>
                </InspectorControls>
                <MediaUpload
                    onSelect={onSelectImage}
                    type="image"
                    value={attributes.imageId}
                    render={({ open }) => (
                        <Button onClick={open}>Upload Image</Button>
                    )}
                />
            </>
        );
    },
    save: (props) => {
        const { attributes } = props;
        return (
            <img src={wp.getAttachmentImageSrc(attributes.imageId, attributes.imageSize)[0]} alt="Custom Image" />
        );
    },
});

添加自定义样式：在主题的 functions.php 文件中添加自定义 CSS 样式。

function my_custom_image_block_styles() {
    wp_enqueue_style('my-custom-image-block-styles', get_template_directory_uri() . '/css/custom-image-block.css');
}
add_action('enqueue_block_editor_assets', 'my_custom_image_block_styles');