Gutenberg开发：如何实时获取文章特色图像更新后的alt_text属性

这不是Gutenberg的已知Bug，是core数据存储的默认缓存策略导致的：getMedia作为普通选择器默认读取本地缓存，特色图像修改（包括替换、修改alt文本）后，本地缓存不会自动刷新，只有刷新页面后缓存会重新拉取，所以你拿到的一直是旧数据。

分两种开发场景选择对应方案：

• 如果你在React函数组件中开发，直接用useSelect做响应式监听即可自动同步最新数据：

import { useSelect } from '@wordpress/data';

function YourCustomComponent() {
  const featuredAlt = useSelect( ( select ) => {
    const featuredId = select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
    if ( !featuredId ) return 'no media';
    const media = select( 'core' ).getMedia( featuredId );
    return media?.alt_text || 'no alt text';
  }, [] );

  // 直接使用featuredAlt变量，会自动随特色图像更新
  return <p>{ featuredAlt }</p>;
}

• 如果你在非组件的普通JS逻辑中开发，用subscribe监听特色图ID变化，配合resolveSelect强制拉取最新数据：

import { subscribe, select, resolveSelect, dispatch } from '@wordpress/data';

let preFeaturedId = null;
const unsubscribe = subscribe( () => {
  const currentFeaturedId = select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );
  // ID未变化时跳过执行，减少性能消耗
  if ( currentFeaturedId === preFeaturedId ) return;
  preFeaturedId = currentFeaturedId;

  if ( !currentFeaturedId ) {
    console.log( 'no media' );
    return;
  }
  // 强制拉取最新媒体数据，跳过本地旧缓存
  resolveSelect( 'core' ).getMedia( currentFeaturedId ).then( media => {
    console.log( media.alt_text || 'no alt text' );
    // 此处拿到的就是修改后的最新数据
  } );
} );

// 不需要监听时执行unsubscribe()销毁监听避免内存泄漏

如果只是修改已设置的特色图的替代文本，没有替换图片、特色图ID不变的场景，需要先手动清空对应媒体ID的缓存，再拉取数据：

// 清空指定ID的媒体数据缓存
dispatch( 'core' ).invalidateResolution( 'getMedia', [ currentFeaturedId ] );

之后再调用getMedia或resolveSelect.getMedia就会返回最新的媒体数据。

内容的提问来源于stack exchange，提问作者mpdoctor