如何在view.js中显示WordPress自定义区块的属性？[@wordpress/create-block]

核心原理 #

WordPress会自动将区块的属性序列化为JSON字符串，挂载到区块根元素的data-block-attributes属性上，我们只需要解析这个属性就能拿到所有配置好的区块属性。

具体实现步骤 #

1. 获取并解析区块属性
   首先定位到你的区块根元素（类名一般是wp-block-加上你的区块名称，这里是wp-block-wis-slider），然后解析data-block-attributes里的JSON数据：

   // 获取当前区块的DOM元素
   const blockElement = document.querySelector('.wp-block-wis-slider');
   // 解析属性数据
   const blockAttributes = JSON.parse(blockElement.dataset.blockAttributes);
   

2. 使用属性渲染页面内容
   拿到属性后，就可以直接用它来更新页面上的元素。比如假设你在区块编辑器里定义了sliderTitle和sliderCount两个属性，要把它们显示出来：

   // 更新标题
   const titleEl = blockElement.querySelector('.slider-header');
   if (titleEl && blockAttributes.sliderTitle) {
       titleEl.textContent = blockAttributes.sliderTitle;
   }
   
   // 更新滑块数量提示
   const countEl = blockElement.querySelector('.slider-count');
   if (countEl && blockAttributes.sliderCount) {
       countEl.textContent = `共 ${blockAttributes.sliderCount} 个滑块`;
   }
   

3. 结合Swiper使用属性配置（可选）
   如果你的属性是用来配置Swiper的参数（比如切换速度、自动播放），直接把属性值传入Swiper初始化配置即可：

   import Swiper from 'swiper';
   import 'swiper/css';
   
   const blockElement = document.querySelector('.wp-block-wis-slider');
   const blockAttributes = JSON.parse(blockElement.dataset.blockAttributes);
   
   // 用区块属性配置Swiper
   const swiper = new Swiper(blockElement.querySelector('.swiper'), {
       speed: blockAttributes.sliderSpeed || 500, // 默认500ms
       autoplay: blockAttributes.enableAutoplay ? { delay: blockAttributes.autoplayDelay || 3000 } : false,
       loop: blockAttributes.enableLoop || false,
       // 其他Swiper配置项...
   });
   

注意点 #

• 确保你在block.json或edit.js中正确定义了区块属性，并且设置了合理的默认值，避免出现undefined导致的报错。
• 如果你的区块根元素类名不是wp-block-wis-slider，可以在生成的block.json里找到style字段对应的类名，或者直接在浏览器开发者工具里查看元素的类名。

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