主题编辑器预览检查器最佳实践

theme editor preview inspector 允许你在预览中直接导航区块和块，使查找对应设置更加直观。

主题编辑器预览检查器通过绘制区块和块的轮廓来区分它们。但是，预览检查器依赖浏览器的 Element.getBoundingClientRect() 方法返回的坐标来绘制这些轮廓，这可能会突出显示主题基础中通常不可见的部分。

请考虑以下设计指南，以确保区块或块的轮廓在预览检查器中正确显示：

避免使用负边距

你不应使用负边距来定位块内的区块，因为区块可能会超出区块轮廓显示。

要添加块之间的间距，你应该使用 margin 或 gap，而不是 padding。如果你使用 padding，块轮廓可能不会按预期显示。

要隐藏一个元素，你应该从 DOM 中移除它，或使用 display: none，而不是视觉上隐藏它。视觉上隐藏一个元素可能会导致一个没有可交互元素的轮廓。

当预览检查器启用时，你应该禁用固定位置元素（例如粘性标题）。如果不禁用这些元素，可能会导致令人困惑的体验。

要了解更多关于检测主题编辑器预览检查器的内容，请参阅将区块与主题编辑器集成。

如果你需要复制一个区块或块，则应确保主题编辑器识别的元素是唯一包含 data-shopify-editor 属性的元素。主题编辑器依赖 data-shopify-editor 属性来识别区块和块，因此复制它们可能导致识别正确元素时出现冲突。

区块使用 data-shopify-editor-section 属性，块使用 data-shopify-editor-blocks 属性。