在古腾堡前端使用React

Question

所以这是一个非常简单的问题，我在互联网上搜索了很多。我发现很多人仍然想知道为什么这样的功能还没有可用。

我需要在我的古腾堡块的前端（通常是 save.js 文件）使用 React。有人找到解决这个问题的方法了吗？古腾堡开发团队是否正在研究该产品的解决方案或可能的新功能？

Answer 1

我之前也有过同样的问题，所以想在这里分享我的答案，以防万一有人需要。

基本上，

save

函数只是返回一个html字符串，该字符串将被保存到数据库并在前端呈现，所以不要指望它会处理其中的任何逻辑函数。

这个问题的一个解决方案是你需要在前端附加一个 js 文件，一旦在前端渲染了 dom 元素，它将把反应事件水合到 dom 元素上。 对于附加到块的任何属性，您还需要获取所有它们并将其放入反应元素的道具中。

这是一个例子，你可以看一下 https://github.com/trykoszko/gutenberg-block-Hydration-example

Answer 2

如果我正确理解这个问题，Woocommerce 团队不久前想出了一个非常酷的灵魂。

您可以在此处阅读基本说明：https://developer.woo.com/2021/11/15/how-does-woocommerce-blocks-render-interactive-blocks-in-the-frontend/

这个想法是你必须修改通常的 WP 块设置以包含一个 frontend.js 文件，该文件用你的 React 文件替换 gutenberg 块：

import Block from './block';
import {render, Suspense} from "@wordpress/element";

window.addEventListener('DOMContentLoaded', () => {
    const customBlocks = document.querySelectorAll('.block-class-selector');

    if (customBlocks.length) {
        customBlocks.forEach(customBlock => {
            const attributes = {...customBlock.dataset};

            render(
                <Suspense fallback={<div className="wp-block-placeholder"/>}>
                    <Block {...attributes} />
                </Suspense>,
                customBlock
            );
        })
    }
});

使用 PHP，您需要收集所有块属性/设置并将它们作为容器 div 内的数据集输出，这允许您在 React 代码中作为属性访问它们。在这里解释可能太多了，但我建议您下载 Woocommerce 插件并查看他们的代码。他们有一些很棒的课程可以完成所有繁重的工作。

我希望这有帮助。