如何在 view.js 中显示我的属性？ [@wordpress/create-block]

Question

我是 WordPress 新手，我尝试了生成 WordPress/块的命令

npx @wordpress/create-block wis-slider --no-plugin

在这个文件夹中我得到一个“view.js”，我可以加载像 swiper.js 这样的外部库

不幸的是，我不知道如何在view.js中显示块属性？

Answer 1

在 view.js 中获取属性的非常简单的方法是使用 JSON.stringnify() 在 save.js 中作为变量传递（代码行：{

var masterstudyTestimonialsSlides=${ JSON.stringify(slides) }

} ）：

export default function Save({ attributes }) {
const { title, slides } = attributes;

const {blockClassName, blockStyleObject } = useBlockStyle( 'testimonials', {
    color: attributes.color,
    bgColor: attributes.bgColor,
} );

const blockProps = useBlockProps.save({
    className: `${blockClassName} ${blockClassName}-${ attributes.clientId }`,
    style: blockStyleObject
});

return (
    <div {...blockProps}>
        <div className={`${blockClassName}__icon`}></div>
        <RichText.Content value={ title  } tagName="p" className={`${blockClassName}__title`} />

        <div className={`swiper ${blockClassName}__swiper`}>
            <div className="swiper-wrapper">
                {slides.map(( slide, index  ) => (
                    <div className={ `swiper-slide ${ index === 0 ? 'swiper-slide-active' : '' }` }>
                        <div  className="wp-block-masterstudy-testimonials__item">
                            <div className="wp-block-masterstudy-testimonials__rating">
                                <FontAwesomeIcon icon={faStar} />
                                <FontAwesomeIcon icon={faStar} />
                                <FontAwesomeIcon icon={faStar} />
                                <FontAwesomeIcon icon={faStar} />
                                <FontAwesomeIcon icon={faStar} />
                            </div>
                            <RichText.Content value={ slide.content } tagName="p" className={`${blockClassName}__review`} />
                        </div>
                    </div>
                ))}
            </div>
            <div className="swiper-pagination">
                {slides.map(( slide, index  ) => (
                    <span className={ `swiper-pagination-bullet ${ index === 0 ? 'swiper-pagination-bullet-active' : '' }` }>
                        { slide.imgUrl && <img src={ slide.imgUrl } alt={ `reviewer-avatar-${ index }` } />}
                        { ! slide.imgUrl && <FontAwesomeIcon icon={faUser} /> }
                    </span>
                ))}
            </div>
        </div>
        <script>{ `var masterstudyTestimonialsSlides=${ JSON.stringify(slides) }` }</script>
    </div>
);

}