Wordpress Gutenberg:前端的React组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Wordpress Gutenberg:前端的React组件相关的知识,希望对你有一定的参考价值。

Gutenberg仍然很新,但我仍然希望有人遇到此问题并找到解决方案。

我已经使用create-guten-block来制作一个项目并创建一个测试块。我遇到的问题是,当我尝试使用React组件修改前端的状态时,什么都没有发生。组件可以通过save()很好地加载,但是当您尝试做一些简单的事情(如切换列表)时,前端仍然无法响应状态更改。我还要注意,create-guten-block不会加载任何前端JS,因此我交换了已编译的javascript以加载到前端,但仍然无法使其正常工作。

以下是我从Codecademy提取的一些代码,作为一个简单的示例进行测试。选择名称时,它将更改sibling.js中的文本以显示名称。该代码在create-react-app中工作正常,但在前端作为Gutenberg中的块没有任何作用:

block.js

import  Parent  from './parent';

// More code here 

save: function( props ) 
    return (
          <div>
              <Parent />
          </div>
     );
 ,

parent.js

import React from 'react';
import  Child  from './child';
import  Sibling  from './sibling';

export class Parent extends React.Component 
    constructor(props) 
        super(props);

        this.state =  name: 'Frarthur' ;

        this.changeName = this.changeName.bind(this);
    

    changeName(newName) 
        this.setState(
        name: newName
        );
    

    render() 
        return (
        <div>
            <Child onChange=this.changeName />
            <Sibling name=this.state.name />
        </div>
        );
    
;

child.js

import React from 'react';

export class Child extends React.Component 
    constructor(props) 
        super(props);

        this.handleChange = this.handleChange.bind(this);
    

    handleChange(e) 
        const name = e.target.value;
        this.props.onChange(name);
    

    render() 
        return (
        <div>
            <select
            id="great-names"
            onChange=this.handleChange>

                <option value="Frarthur">Frarthur</option>
                <option value="Gromulus">Gromulus</option>
                <option value="Thinkpiece">Thinkpiece</option>
            </select>
        </div>
        );
    

sibling.js

import React from 'react';

export class Sibling extends React.Component 
    render() 
        const name = this.props.name;
        return (
        <div>
            <h1>Hey, my name is name!</h1>
            <h2>Don't you think name is the prettiest name ever?</h2>
            <h2>Sure am glad that my parents picked name!</h2>
        </div>
        );
    

答案

古登堡(Gutenberg)非常棒,但其文档不能说相同的话。就像其他任何Wordpress文档一样,它过于冗长,组织混乱和健谈。我认为这与领土和目标消费者有关。

[花了我一些时间和几本手册,以了解什么是块。资源稀缺,人们通常将块与它们在编辑器中的屏幕视觉表示相混淆。

话虽这么说,让我们从古腾堡块开始。古腾堡块是这样的优美的短代码:

<!-- wp:paragraph "key": "value" -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->

这些短代码由编辑器呈现为react组件以进行可视化表示。

[在这里记住这样的短代码[gallery id="123" size="medium"],这些代码可以通过tinymce插件呈现为可视化表示,您将在编辑器窗口中看到功能完整的画廊。想法是一样的,只是这次古腾堡(Gutenberg)编辑器将略有不同的简码呈现为视觉表示。

现在,由于WordPress文档也将这些视觉表示也作为块来处理,因此引起了混乱。但是整个渲染-序列化-解析-重新渲染周期的真相是其中之一,那就是所谓的“优美的短代码”,其余的是这些短代码采用的不同形式和表示形式。说,在编辑器上下文中,它是一个呈现的react组件,在前端只是普通的html

这是edit函数的返回元素,它将确定块在编辑器窗口中的显示方式:

<!-- language: lang-js -->
registerBlockType(«NAMESPACE/BLOCK_NAME», 
    edit: function(props)
        // Should return a react element
    
)

了解块的生命周期以更好地理解它们至关重要。让我们从头开始:

当单击组件面板中的块图标时,将渲染save功能的返回并序列化并插入到页面中。

<!-- language: lang-js -->
registerBlockType("NAMESPACE/BLOCK_NAME", 
    save: function(props)
       // Should return a react element
    
)

save函数应返回一个react元素,该元素将由react渲染,并由块序列化器进行serialized,并作为block插入到发布内容中。您可以检查serializer.js,以了解React元素如何序列化为块1

<!-- wp:image -->
<figure class="wp-block-image"><img src="source.jpg" alt="" /></figure>
<!-- /wp:image -->

如果是动态块,则save函数将返回null,因此将没有内容。块看起来像这样:

<!-- wp:latest-posts "postsToShow":4,"displayPostDate":true /-->

注意自我结束评论:

blocks grammar中,第一个称为静态块(_Block_Balanced_),第二个称为动态块(_Block_Void _)。

重要的是要注意静态块包含渲染的内容和属性对象。对于动态块,应在块注册期间将render_callback提供给register_block_type功能。

因此,当请求the_content时,服务器会在响应请求之前获取the_content并将其传递给多个filters

在此阶段中,将从静态块中剥离属性,并且将返回内容,因为静态块本身已具有其内容。对于动态块,将调用render_callback并将其返回值作为块内容返回。这就是文档中以某种方式完全同构 3的意思。您可以在Wordpress核心中签出render_block功能。

[当您通过gutenberg的视觉元素编辑该图块时,该图块将再次进行重新序列化过程,并根据您所做的更改将新的视觉表示形式绘制到页面上。

render_block

一旦单击发布按钮,如文档所述,该序列化数据或行数据将保存到数据库。

假设您保存后关闭页面。下次打开它时,已保存的块将由块解析器解析,并且可视化表示将绘制到页面上。您可以看一下解析器<!-- wp:paragraph "key": "value" --> <p>Welcome to the world of blocks.</p> <!-- /wp:paragraph -->

在解析期间,将根据2功能验证块标记。如果在两次编辑之间更改了save功能的返回,则先前保存的块标记将无效或save。您可以通过在deprecated中的块设置中提供升级路径来更新不赞成使用的代码。但是,您无需更改即可更改registerBlockType功能,因为它控制块在编辑器屏幕上的显示方式。

升级路径只是具有功能和属性的对象的数组。该数组上的每个元素将根据优先级检查不赞成使用的块,如果块与新版本兼容,则将迁移该块;如果不兼容,则将返回旧版本。

现在出现您的问题,当请求前端服务器上的页面时,将向您发送格式完整的html。因此,在前面,您得到的是静态html,而不是react元素。

因此,实际上edit函数与前端无关,除了创建包裹在块注释save中的静态html之外,这是在编辑内容时发生的。在前端提供<!-- wp:image --><!-- /wp:image -->时,永远不会运行或使用它。

为了增加交互性,您必须像在Gutenberg之前一样专门针对前端编写代码。

您可以通过使用更多工具和选项按钮,在更新按钮旁边的垂直省略号切换到编辑器窗口中的代码编辑器,以纯文本格式查看the_content

从前端的角度来看,在创建the_content时是使用tinymce编辑器还是Gutenberg编辑器还是使用普通html都没有区别。

注册块时,由您决定是否排入另一个javascript文件或使用通过the_content入队的javascript文件。>>

要使用React,您必须使用ReactDOM将组件安装到文档上。不错的是,Wordpess已经在全局空间中提供了React和ReactDOM,但是您在排队脚本时需要指出依赖性。

据我了解,古腾堡仅支持等式的[[编辑]]侧的交互性。是的,您在React中定义了view

另一答案

据我了解,古腾堡仅支持等式的[[编辑]]侧的交互性。是的,您在React中定义了view

以上是关于Wordpress Gutenberg:前端的React组件的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Wordpress 中列出和重新排列或操作 Gutenberg 块类别

Wordpress Gutenberg 自定义列块

以编程方式触发 Wordpress Gutenberg “转换为块”

scss WordPress Gutenberg专栏SCSS样式

php WordPress - 禁用Gutenberg而不使用插件。

如何向 WordPress Gutenberg 块添加自定义块?