1、在主题内新建一个文件夹，这个文件夹可以放置到任何位置，例如我在pandastudio_plugins目录下新建了一个sample_gutenberg_sidebar
2、打开这个文件夹，按住Shift右键单击空百处，选择打开Powershell（Win10以前的系统应该是命令行）。Mac系统手动打开系统自带Shell，输入cd空格，将文件夹拖入到Shell窗口回车即可
3、输入npm init来创建一个项目，回车后，会让你输入包名称、项目名称、版本号等，全部按回车即可。大致效果如下：
如果安装一次等了很久屏幕都没有动静，可以连续按下几次Ctrl+C来终止，然后继续输入前面的命令来重新安装
8、在刚才的PowerShell命令行中输入下面的命令来开始开发：
3、刚才注册的边栏直接取消固定并关闭（取消星星的填充，然后点击右侧的叉叉）后，就再也无法打开了，因此需要在Gutenberg的选项中增加一个边栏的打开菜单，我们在<Fragment>里面增加一个<PluginSidebarMoreMenuItem>并通过target属性指向到边栏
这样，哪怕边栏被取消固定并关闭后，也可以有再次打开的方法：
4、现在，边栏的内容都是完全空的，我们来增加一个Input输入框来编辑刚才注册的sample_meta1数据。这一部分的原理在Gutenberg开发手册上有详细的描述我就不再多说了，主要使用了withSelect和withDispatch来实现数据的读取和更新。考虑到如果注册的meta字段比较多，这一部分就会重复写很多次而且比较繁琐，因此我将它封装成了一个构建meta模块的函数，后面的新增meta模块都用这个方法来进行：
我上面封装的构建模块方法第一个参数是Function类型：它接收一个参数（参数中包含meta数据和设置meta数据的方法），返回需要传入的组件；第二个参数是String类型，内容是meta字段的名称。将上面的代码加入到我们的脚本中后，现在我们用我刚才封装的方法来添加sample_meta1的编辑框
如果有更多的数据字段如sample_meta2，只需要在PluginSidebar中添加更多的metaBolck方法即可。编辑器中效果如下：
5、至此，Gutenberg边栏的编写就完成了。发布时，先删除build文件夹，然后在PowerShell中使用下面的命令来进行代码打包和代码压缩
Gutenberg Sidebar 边栏开发时都是使用基础的PluginSidebar组件进行开发，只需掌握使用方法即可。唯一需要注意不要被坑的是要记得添加边栏菜单的另一个入口，防止被关闭后无法再次打开。
Meta数据的读取和写入本身是一个难点，不过在本文中我已经将它封装成一个方便重用的方法了，若需了解详情，建议参考本文末尾的官方教程学习原理即可。
Panda 刘
扫码打开当前页
之前
WordPress大学创建于2012年10月，专注于 WordPress建站教学和WordPress资源分享。我们希望通过努力，让更多人了解WordPress这个全世界最流行的建站程序，让每个人都能用好WordPress！