使用WordPress Blocks过滤器添加z-index时样式被覆盖的问题排查及替代方案咨询

你的问题出在直接替换了extraProps中的style对象，而不是合并原有样式。

你当前的代码里，Object.assign(extraProps, { style: gutrsstyles })会把extraProps里的style属性完全替换成新的gutrsstyles对象——不管原有style里有没有其他样式（比如间隔块自带的高度样式），这样自然就覆盖了子块的原有样式props。

Object.assign的工作逻辑是：如果目标对象和源对象有相同的属性名，源对象的属性会覆盖目标对象的。你这里把style作为一个整体属性赋值，相当于直接替换了整个style对象，而不是合并对象内部的属性。

修复后的代码 #

你需要先保留原有style的内容，再把z-index合并进去，而不是直接替换。这里有两种简洁的实现方式：

方式1：使用对象展开语法 #

const positionzStyles = (extraProps, blockType, attributes) => { 
  const { gutrszIndex } = attributes; 

  // 保留原有样式，没有则用空对象
  const updatedStyles = { ...extraProps.style };
  
  if (typeof gutrszIndex !== 'undefined' && gutrszIndex) { 
    updatedStyles['z-index'] = gutrszIndex; 
  } 

  // 将合并后的样式赋值回extraProps
  extraProps.style = updatedStyles;
  return extraProps; 
} 
wp.hooks.addFilter( 'blocks.getSaveContent.extraProps', 'gutrs/position-z-styles', positionzStyles );

方式2：使用Object.assign合并内部属性 #

const positionzStyles = (extraProps, blockType, attributes) => { 
  const { gutrszIndex } = attributes; 

  if (typeof gutrszIndex !== 'undefined' && gutrszIndex) { 
    // 合并现有style和新的z-index属性：
    // 先创建空对象，再合并原有style（如果存在），最后添加z-index
    extraProps.style = Object.assign({}, extraProps.style || {}, { 'z-index': gutrszIndex });
  } 

  return extraProps; 
} 
wp.hooks.addFilter( 'blocks.getSaveContent.extraProps', 'gutrs/position-z-styles', positionzStyles );

其他可行方法 #

如果你想为现有块添加内联样式，除了blocks.getSaveContent.extraProps过滤器，还有一种思路是使用wp.blockEditor.useBlockProps钩子，但这个更适合在自定义块的编辑组件中使用。对于批量给现有块添加样式，你当前用的过滤器是最直接的方案，只要保证样式合并的逻辑正确即可。

另外，如果你需要更复杂的样式管理，也可以考虑通过添加自定义CSS类，然后在主题样式表中定义对应的z-index样式，但这种方式不如内联样式灵活，适合固定值的场景。

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