WordPress区块开发中screen.width/innerWidth值异常求助

WordPress区块的save.js负责生成区块的静态HTML标记，这段代码的执行时机是在webpack编译阶段或者WordPress的服务器端渲染过程中，而非用户的浏览器前端环境。这意味着你在save.js中访问的screen.width、window.innerWidth，实际上是编译/服务器环境中的固定值（比如服务器的屏幕尺寸或者webpack编译时的模拟环境值），自然不会随用户设备变化。

而绑定在onclick事件中的alert()是在用户浏览器中触发执行的，此时访问的是当前设备的真实浏览器环境，所以能拿到正确的屏幕宽度值。

针对WordPress区块的响应式需求，正确的做法是将逻辑拆分到静态生成和前端交互两个层面：

• 优先用CSS媒体查询控制：如果只是简单的显示/隐藏或样式调整，直接在区块的样式文件中写媒体查询，这是最符合WordPress区块设计逻辑的方式——静态HTML统一输出，样式由浏览器根据设备自动适配：

  /* 示例：移动端隐藏指定元素 */
  @media (max-width: 768px) {
    .your-block-target-element {
      display: none;
    }
  }
  

• 前端JS动态处理（复杂逻辑场景）：如果必须用JS实现交互逻辑，不要在save.js中处理，而是将逻辑放到edit.js的组件生命周期中，或者单独编写前端脚本加载到前端：
  比如在edit.js中监听窗口尺寸变化，动态渲染内容：

  import { useEffect, useState } from '@wordpress/element';
  
  const YourBlockEdit = () => {
    const [screenWidth, setScreenWidth] = useState(window.innerWidth);
  
    useEffect(() => {
      const handleResize = () => setScreenWidth(window.innerWidth);
      window.addEventListener('resize', handleResize);
      // 组件卸载时移除监听
      return () => window.removeEventListener('resize', handleResize);
    }, []);
  
    return (
      <div className="your-block">
        {screenWidth < 768 ? <p>移动端专属内容</p> : <p>桌面端专属内容</p>}
      </div>
    );
  };
  
  export default YourBlockEdit;
  

  对应的save.js只输出基础静态容器即可：

  const YourBlockSave = () => {
    return <div className="your-block"></div>;
  };
  
  export default YourBlockSave;
  

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