古腾堡编辑器快速填充图像文本: Quick Image Alt

这个小插件我老早就想搞了，去年应该是试过一次，不过没有成功有不少 Bug，今儿早晨心血来潮想着用 AI 试试，没想到一条就过了，而且实现的非常简单、非常优雅——不得不说现在 AI 太🐂🍺了！

Quick Image Alt 是一个针对 WordPress 古腾堡编辑器的实用小工具，能够一键自动补齐文章中图片和相册图片的 alt 属性。无论是单张图片还是画廊内的多张图片，它都能智能判断当前 alt 是否为空，并根据图片说明、父级画廊标题或文章标题自动生成合适的替代文本，提高网站的可访问性和 SEO 表现。补齐规则为：

• 若图片已经设置了 Alt 信息，忽略
• 若图片没有设置 Alt 信息
  • 有图片说明，则按图片说明
  • 无图片说明，按标题设置

在编辑器中，插件提供两种触发方式：

1. 点击文章“更多选项”菜单中的 补齐图片 Alt 信息 按钮；
2. 使用快捷键 Alt + Shift + A 即可自动扫描当前文章块，补齐所有缺失的图片 alt
   执行完成后，插件会弹出提示，显示本次自动补齐了多少张图片，并提醒用户保存文章

本插件通过 WordPress 的 wp.data 和 wp.element API 深入古腾堡编辑器的区块系统，递归遍历文章中的所有块，判断每张图片是否缺少 alt 属性。对于画廊块，插件会优先使用画廊标题为子图片生成 alt，若无标题，则回退到文章标题，保证每张图片都有可用的替代文本。

插件下载见此，核心代码如下：

(function (wp) {
    if (!wp || !wp.plugins || !wp.editPost || !wp.data) {
        return;
    }

    const el = wp.element.createElement;
    const useEffect = wp.element.useEffect;
    const registerPlugin = wp.plugins.registerPlugin;
    const PluginMoreMenuItem = wp.editPost.PluginMoreMenuItem;

    const select = wp.data.select;
    const dispatch = wp.data.dispatch;

    function cleanText(text) {
        if (!text) {
            return '';
        }

        const div = document.createElement('div');
        div.innerHTML = text;

        return (div.textContent || div.innerText || '')
            .replace(/\s+/g, ' ')
            .trim();
    }

    function hasAlt(alt) {
        return typeof alt === 'string' && alt.trim() !== '';
    }

    function fillAlt(blocks, parentCaption, postTitle) {
        let count = 0;

        blocks.forEach(function (block) {
            if (!block || !block.name) {
                return;
            }

            let captionForChildren = parentCaption || '';

            if (block.name === 'core/gallery') {
                const galleryCaption = cleanText(block.attributes && block.attributes.caption);

                if (galleryCaption) {
                    captionForChildren = galleryCaption;
                }
            }

            if (block.name === 'core/image') {
                const attrs = block.attributes || {};
                const currentAlt = attrs.alt || '';

                if (!hasAlt(currentAlt)) {
                    const imageCaption = cleanText(attrs.caption);
                    const newAlt = imageCaption || captionForChildren || postTitle;

                    if (newAlt) {
                        dispatch('core/block-editor').updateBlockAttributes(block.clientId, {
                            alt: newAlt
                        });

                        count++;
                    }
                }
            }

            if (block.innerBlocks && block.innerBlocks.length) {
                count += fillAlt(block.innerBlocks, captionForChildren, postTitle);
            }
        });

        return count;
    }

    function runAutoAlt() {
        const blocks = select('core/block-editor').getBlocks();
        const rawTitle = select('core/editor').getEditedPostAttribute('title');
        const postTitle = cleanText(rawTitle) || '图片';

        const count = fillAlt(blocks, '', postTitle);

        dispatch('core/notices').createNotice(
            'success',
            count > 0
                ? '已补齐 ' + count + ' 张图片的 Alt，请保存文章。'
                : '没有需要补齐的图片。',
            {
                type: 'snackbar',
                isDismissible: true
            }
        );
    }

    function AutoImageAltMenu() {
        useEffect(function () {
            function handleKeyDown(event) {
                const key = String(event.key || '').toLowerCase();

                if (event.altKey && event.shiftKey && key === 'a') {
                    event.preventDefault();
                    runAutoAlt();
                }
            }

            document.addEventListener('keydown', handleKeyDown);

            return function () {
                document.removeEventListener('keydown', handleKeyDown);
            };
        }, []);

        return el(
            PluginMoreMenuItem,
            {
                icon: 'format-image',
                onClick: runAutoAlt
            },
            '补齐图片 Alt'
        );
    }

    registerPlugin('auto-image-alt', {
        render: AutoImageAltMenu
    });
})(window.wp);