WordPress主题theme.json设置contentSize后编辑器宽度自动恢复问题

• 补全theme.json的布局样式配置
  当前配置仅在settings中定义了contentSize，需在styles区块同步指定布局规则，确保编辑器和前端都能应用：

  {
    "version": 2,
    "settings": {
      "layout": {
        "contentSize": "840px",
        "wideSize": "1200px"
      }
    },
    "styles": {
      "layout": {
        "contentSize": "840px",
        "margin": "0 auto"
      }
    }
  }
  

• 手动调用CSS变量
  既然editor-styles-wrapper已生成正确的--wp--style--global--content-size变量，可在主题的editor-style.css中强制给区块应用该宽度：

  .editor-styles-wrapper .wp-block {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
  }
  /* 按需保留全宽区块，比如封面 */
  .editor-styles-wrapper .wp-block-cover {
    max-width: 100%;
  }
  

• 重置区块默认布局继承
  部分区块可能默认脱离全局布局，需在theme.json中指定区块继承全局设置：

  {
    "version": 2,
    "settings": {
      "layout": {
        "contentSize": "840px",
        "wideSize": "1200px"
      },
      "blocks": {
        "core/paragraph": {"layout": {"inherit": true}},
        "core/image": {"layout": {"inherit": true}},
        "core/list": {"layout": {"inherit": true}}
      }
    }
  }
  

• 清除编辑器缓存
  刷新浏览器页面、清除缓存，或禁用编辑器相关缓存插件，确保新配置生效。

• 确认主题基础支持
  在functions.php中确保主题开启区块编辑器支持：

  add_action('after_setup_theme', function() {
    add_theme_support('block-editor-styles');
    add_theme_support('editor-styles');
    add_editor_style('editor-style.css');
  });
  

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