WordPress 保存功能在前端不起作用

Question

我正在 WordPress Gutenberg 上创建一个自定义块（主题），并且我正在使用 React，该功能适用于 WP 管理区域的编辑功能（这让我相信代码很好），但不适用于前端（网站），我不知道发生了什么。这是一个画廊部分，当您点击它时，每个视频都会播放 我的代码如下

  save: ({ attributes }) => {
      const { src, poster, text, thumbVideos} = attributes;
      const blockProps = useBlockProps.save( {
         className: 'pd-block pd-inline media-container',
     } );
      return (
         <section { ...blockProps }>
            <div className="display-con display">
               <div className="full-img" >
                  <video className="displayed-video" controls src={src} poster={poster}></video>
                  <p className="text">{text}</p> 
                  <div className="overlay"></div> 
               </div>
               <div className="thumb-bar-video">
                  {thumbVideos.map((thumbVideo, index) => (
                     <div className="thumb-video-item" key={index}>
                        <video src={thumbVideo.src} poster={thumbVideo.poster} text={thumbVideo.text}></video>
                     </div>
                  ))}
               </div>
            </div>
         </section>
      );
   },

我尝试过查找古腾堡块，但不幸的是我无法把手放在某些东西上

Answer 1

您的 WordPress Gutenberg 块无法在前端工作的原因是 WordPress 仅使用 React 作为后端编辑器，而前端接收纯 HTML 输出，您需要创建一个单独的 JavaScript 文件（如 front.js）来以前端的元素为目标并实现功能。另外，请确保新文件已排入主题或插件的 PHP 文件中，以确保其在前端正确加载。