Gutenberg Additional CSS Class输入框change事件触发及值保存问题

古腾堡（Gutenberg）是React驱动的状态化编辑器，直接操作DOM修改「附加CSS类」输入框的value、手动触发原生change/input事件，无法同步到React内部维护的块状态，编辑器自然感知不到值变更，也不会保存对应修改。
你之前尝试的代码无效的核心原因是调用了错误的store：acf/column不是古腾堡核心的块数据存储，执行updateBlockAttributes不会对块属性产生任何修改。

不要直接操作DOM修改输入框值，所有块属性修改必须走古腾堡官方的数据API，操作完成后输入框的值会自动同步，保存逻辑也会正常识别变更：

wp.domReady( function() {
  jQuery('body').on( 'change', '.acf-field[data-name=col_size] select', function() {
    // 获取当前选中块的ID，优先用官方接口比DOM抓取更稳定
    const clientId = wp.data.select('core/block-editor').getSelectedBlockClientId();
    if (!clientId) return;

    // 读取块现有属性，避免覆盖原有CSS类
    const currentAttrs = wp.data.select('core/block-editor').getBlockAttributes(clientId);
    const oldClassName = currentAttrs.className || '';
    // 类名处理：避免重复添加目标类，需要替换类名直接赋值即可
    const newClassName = oldClassName.includes('my-style') 
      ? oldClassName 
      : `${oldClassName} my-style`.trim();

    // 调用正确的核心块编辑器store执行更新
    wp.data.dispatch('core/block-editor').updateBlockAttributes(clientId, {
      className: newClassName
    });
  });
});

• 不需要手动操作「附加CSS类」对应的DOM输入框，只要通过上述API修改了块的className属性，编辑器面板的输入框会自动同步显示最新值，提交保存时也会正常携带修改后的值
• 如果你的触发场景不是在块选中时执行，不要用getSelectedBlockClientId获取块ID，需要根据业务逻辑拿到目标块的真实clientId再执行更新
• 如果是ACF嵌套块场景，注意确认事件监听的字段属于目标块本身，避免跨块触发错误更新

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