遇到问题：古腾堡编辑器样式和，前端显示样式不一致，图片前端显示没有居中，调试网页时，发现没有引入wp-block-styles样式

解决方案：

functions.php添加下面代码，让主题默认支持古腾堡块样式加载

// 确保主题支持块编辑器样式
add_action('after_setup_theme', 'mytheme_setup_block_styles'); 
function mytheme_setup_block_styles() {
    // 必须添加这行来启用块样式
    add_theme_support('wp-block-styles');
    
    // 同时启用这些相关功能
    add_theme_support('align-wide');//对齐方式增加Wide width和Full width两项
    add_theme_support('responsive-embeds');//视频响应移动端时，自动调整容器，不会出现视频上下黑边
    
    // 启用编辑器样式
    add_theme_support('editor-styles');
    
    // 将主题的style.css也应用到编辑器
    add_editor_style('style.css');
    add_editor_style('assets/css/editor.css'); // 如果有单独的编辑器样式文件
}

function theme_enqueue_assets() {

    // 确保WordPress块库样式被加载
    wp_enqueue_style('wp-block-library');
    wp_enqueue_style('wp-block-library-theme');
    
}
add_action('wp_enqueue_scripts', 'theme_enqueue_assets');

上面代码详细解释如下

1. add_theme_support('wp-block-styles');

—— 开启核心块的“视觉补丁”

• 底层原理： 默认情况下，古腾堡块在前端只输出最基础的 HTML 结构（用于定位）。开启此项后，WordPress 会额外加载 theme.min.css。
• 具体影响： * 引用块 (Quote)： 会出现那条经典的侧边边框。
  • 按钮块 (Button)： 会出现填充色、圆角等视觉细节。
  • 文件下载块： 会出现下载按钮的样式。
• 业务意义： 如果不加这一行，你的文章内容会看起来像 90 年代的纯文本网页，缺乏现代 B2B 站点的专业质感。

---

2. add_theme_support('align-wide');

—— 解锁“全宽”与“宽屏”布局权限

• 底层原理： 传统的 WP 主题容器宽度是固定的（比如 1200px）。开启此项后，古腾堡的工具栏会多出两个选项：Wide width（宽屏）和 Full width（全宽）。
• 技术细节： * 它会在 HTML 标签上增加 .alignwide 或 .alignfull 类名。
  • 注意： 你还需要在 CSS 中配合编写对应的样式（例如 margin-left: calc(50% - 50vw)）来让内容真正突破容器限制。
• 业务意义： 制作产品详情页或 Certifications 页面时，你可以插入一张横跨全屏的大图，视觉冲击力极强。

---

3. add_theme_support('responsive-embeds');

—— 视频/多媒体的“自适应”救星

• 底层原理： 默认的 YouTube 或 Vimeo 嵌入通常是固定长宽比的。开启此项后，WordPress 会在嵌入的 <iframe> 外层包裹一个名为 .wp-block-embed__wrapper 的容器。
• 具体影响： 它会自动计算 16:9 或 4:3 的比例，确保在手机端访问时，视频不会超出屏幕宽度或出现黑边。
• 业务意义： 你的宣传片在手机和电脑上都能完美播放，不会导致页面横向滚动条的出现（这对 SEO 和 Google Ads 评分非常重要）。

---

4. add_theme_support('editor-styles'); 和 add_editor_style();

—— 实现“所见即所得 (WYSIWYG)”的核心

• 底层原理：
  • add_theme_support('editor-styles')：告诉 WP，“我要自定义后台编辑器的外观”。
  • add_editor_style()：将指定的 CSS 文件“注入”到古腾堡编辑器的 iframe 内部。
• 技术细节： WordPress 会自动将你 CSS 里的 body 替换为 .editor-styles-wrapper。这意味着你在 style.css 里写的字体、颜色、行高，会直接反应在后台编辑器里。
• 业务意义： 业务员在后台发文章时，看到的排版、字体、颜色与前台一模一样。这能减少沟通成本，避免发出去后才发现文字太小或间距太丑。