使用Reaction而不是php进行动态古登堡拦截

时间：2019-08-18 作者：ws-templates

我正在基于wordpress rest api构建wordpress主题，因此前端的所有内容都是使用react构建的。但我想建立一个古腾堡自定义块，显示最受欢迎的帖子。是否有一种方法可以使用react而不是PHP构建动态部分（保存部分）。如果没有，我如何将“阅读更多”链接bahave设置为React router Navlink，而不是HTML标记，这样当用户单击它时，浏览器不会刷新，新路由将被推送到道具历史记录中。非常感谢。

update : 当我们构建一个gutenberg块时，“edit：（props）”functon是基于react的，但是save函数返回静态html，或者使用php可以是动态的。但是我正在用react而不是php构建我的主题，所以内容是用react呈现的，所以如何才能手动使用“save：（props）”函数来读取块属性并使块与javascript集成，所以我可能使用react路由器而不是刷新浏览器的链接标记。。。

<Link to={route}>link</link> instead of <a href="hrefto">link</a>

1 个回复

SO网友:User Rebo

古腾堡并不打算在前端做动态反应。

然而，有一种方法可以绕过这个问题：

我假设在使用npm init @wordpress/block my-block 到init your block.

您必须在中注册自己的客户端脚本my-block.php 在前端执行；一个缺点是：它被加载到每个页面上。

function create_block_my_block_init()
{
    $client_js = \'build/client.js\';
    wp_register_script(
        \'create-block-my-block-client\',
        plugins_url($client_js, __FILE__),
        $script_asset[\'dependencies\'],
        $script_asset[\'version\']
    );

    $client_css = \'build/client.css\';
    wp_register_style(
        \'create-block-my-block-client\',
        plugins_url($client_css, __FILE__),
        array(),
        filemtime("$dir/$client_css")
    );

    ...

    register_block_type(\'create-block/my-block\', array(
        ...
        \'script\' => \'create-block-my-block-client\',
        \'style\'  => \'create-block-my-block-client\', // Override default and import custom scss file.
    ));
}

请注意，您不能使用build/style-index.css / style.scss 不再使用或使用register_block_style 为此目的。但最好通过import \'./custom.scss\'; 在您的React组件中（此处：MyComponent).

添加webpack.config.js 要加载脚本，请访问根文件夹：

const defaultConfig = require( \'@wordpress/scripts/config/webpack.config\' );

module.exports = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry,
        client: \'./src/client.js\',
    },
};

在中为前端添加HTML包装器src/save.js 因此，您可以引用脚本：

export default function save() { return (
    <div className="my-block-wrapper"></div>
);}

请注意，不应将包装器添加到src/edit.js 由于React组件是动态加载的，因此直接使用那里的自定义组件。

import MyComponent from \'@path_to_node_modules/MyComponent\';

export default function Edit( { className } ) { return (
     <MyComponent/>
);}

将前端react代码添加到src/client.js:

import { render } from \'@wordpress/element\';
import MyComponent from \'@path_to_node_modules/MyComponent\';

window.addEventListener(\'DOMContentLoaded\', (event) => {
    const wrappers = document.getElementsByClassName(`my-block-wrapper`);
    for(let wrapper of wrappers) {
        render(<MyComponent/>, wrapper);
    }
});

查看我的full example here.

来源1：https://javascriptforwp.com/adding-react-to-a-wordpress-theme-tutorial/

资料来源2：https://stackoverflow.com/questions/51771125/wordpress-gutenberg-react-components-on-front-end

资料来源3：https://www.youtube.com/watch?v=jauZCeLrGFA

如果您有反馈或改进，请随时编辑。

小码农CODE

使用Reaction而不是php进行动态古登堡拦截

相关推荐