立即注册 找回密码

QQ登录

只需一步,快速开始

Gutenberg Sidebar边栏开发心得的案例

发布者: quanshiyinian | 发布时间: 2020-1-9 16:57| 查看数: 71| 评论数: 0|帖子模式

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
文章目录[隐藏]
  • 安装Node
  • 准备开发环境
  • PHP引入脚本
  • 开始编写Gutenberg边栏
    • 注册Meta元数据
    • 其他优化
    • 总结
  • 关于本文的其它说明
  • 参考文献

这是一篇手把手教你开发wordpress Gutenberg Sidebar的文章。虽然之前也写了很多关于Gutenberg的开发心得,不过都直接忽略了环境的安装和配置,以至于很多新手对于ES Next的编译仍然无法下手。因此本文在写Gutenberg Sidebar开发心得的时候,加上了环境配置的部分。
安装Node
Node官方网站下载符合你系统版本的Node进行安装,过程就是下一步下一步完成一类的。App安装过程省略。
准备开发环境
1、在主题内新建一个文件夹,这个文件夹可以放置到任何位置,例如我在pandastudio_plugins目录下新建了一个sample_gutenberg_sidebar
2、打开这个文件夹,按住Shift右键单击空百处,选择打开Powershell(Win10以前的系统应该是命令行)。Mac系统手动打开系统自带Shell,输入cd空格,将文件夹拖入到Shell窗口回车即可
3、输入npm init来创建一个项目,回车后,会让你输入包名称、项目名称、版本号等,全部按回车即可。大致效果如下:
  1. PS D:\apps\xampp\htdocs\wordpress\wp-content\themes\reVival\pandastudio_plugins\sample_gutenberg_sidebar> npm init
  2. This utility will walk you through creating a package.json file.
  3. It only covers the most common items, and tries to guess sensible defaults.


  4. See `npm help json` for definitive documentation on these fields
  5. and exactly what they do.


  6. Use `npm install <pkg>` afterwards to install a package and
  7. save it as a dependency in the package.json file.


  8. Press ^C at any time to quit.
  9. package name: (sample_gutenberg_sidebar)
  10. version: (1.0.0)
  11. description:
  12. entry point: (index.js)
  13. test command:
  14. git repository:
  15. keywords:
  16. author:
  17. license: (ISC)
  18. About to write to D:\apps\xampp\htdocs\wordpress\wp-content\themes\reVival\pandastudio_plugins\sample_gutenberg_sidebar\package.json:


  19. {
  20.   "name": "sample_gutenberg_sidebar",
  21.   "version": "1.0.0",
  22.   "description": "",
  23.   "main": "index.js",
  24.   "scripts": {
  25.     "test": "echo \"Error: no test specified\" && exit 1"
  26.   },
  27.   "author": "",
  28.   "license": "ISC"
  29. }




  30. Is this OK? (yes)
  31. PS D:\apps\xampp\htdocs\wordpress\wp-content\themes\reVival\pandastudio_plugins\sample_gutenberg_sidebar>
复制代码
4、可以看到,目录下已经出现了一个package.json文件。现在先不管它,我们继续在这个目录安装开发需要的 @wordpress/scripts 依赖,继续在刚才的命令行中输入
  1. npm install @wordpress/scripts -D
复制代码
5、根据网络情况,可能需要下载一段时间,然后自动安装。此过程中可以看到一个进度条以及下载的包名称,效果如下
  1. [  ................] \ fetchMetadata: sill XXXXXXX
复制代码
如果安装一次等了很久屏幕都没有动静,可以连续按下几次Ctrl+C来终止,然后继续输入前面的命令来重新安装
6、安装完依赖之后,在刚才的文件夹下新建src文件夹,然后在里面新建index.js文件作为未编译的原始文件
7、打开package.json,将scripts里面的内容修改为下面的内容, 保存后关闭
  1. "scripts": {
  2.     "dev": "wp-scripts start",
  3.     "build": "wp-scripts build"
  4.   },
复制代码
8、在刚才的PowerShell命令行中输入下面的命令来开始开发:
  1. npm run dev
复制代码
9、命令运行后,将监听src/index.js文件的变化来自动编译,大致效果如下:
  1. PS D:\apps\xampp\htdocs\wordpress\wp-content\themes\reVival\pandastudio_plugins\sample_gutenberg_sidebar> npm run dev


  2. > sample_gutenberg_sidebar@1.0.0 dev D:\apps\xampp\htdocs\wordpress\wp-content\themes\reVival\pandastudio_plugins\sample_gutenberg_sidebar
  3. > wp-scripts start




  4. webpack is watching the files…


  5. Live Reload listening on port 35729


  6. Hash: f06cbcda0a4aad106cd6
  7. Version: webpack 4.8.3
  8. Time: 1495ms
  9. Built at: 2019-08-16 09:41:56
  10.           Asset      Size  Chunks             Chunk Names
  11.        index.js  2.79 KiB   index  [emitted]  index
  12.    index.js.map  2.52 KiB   index  [emitted]  index
  13. index.deps.json  15 bytes   index  [emitted]  index
  14. Entrypoint index = index.js index.js.map index.deps.json
  15. [./src/index.js] 0 bytes {index} [built]
复制代码
10、此时可以看到在原来的文件夹下生成了一个build的文件夹,里面的index.js就是编译后的脚本了。这样,一个Gutenberg的脚本开发环境就搭建好了。
PHP引入脚本
1、PHP引入脚本的方法都是一样的:使用钩子来进行引入。在主题的function.php文件中添加一个enqueue_block_editor_assets的动作,然后在执行此动作的时候注册和引入脚本即可
  1. <?php
  2. add_action( 'enqueue_block_editor_assets', function(){
  3.     wp_register_script(
  4.         'sample_gutenberg_sidebar',
  5.         get_stylesheet_directory_uri()."https://static.wpdaxue.com/pandastudio_plugins/sample_gutenberg_sidebar/build/index.js",
  6.         array( 'wp-plugins', 'wp-edit-post', 'wp-element' )
  7.     );
  8.     wp_enqueue_script( 'sample_gutenberg_sidebar' );
  9. });
复制代码
2、要验证是否成功引入了,可以在src/index.js里面输入下面的内容来测试(保证在开发状态,已经运行了npm run dev)
  1. alert('已成功引入!');
复制代码
3、接下来在开发环境中用浏览器打开Gutenberg编辑器,刷新后即可看到“已成功引入”的弹窗。下面就可以开始正式编写Gutenberg的边栏脚本了。
开始编写Gutenberg边栏注册Meta元数据
1、我们的边栏数据都是存储在Post的Meta里面的,因此需要先注册Meta然后才可以使用,假设现在需要注册一个叫做sample_meta1的字符串数据,我们在function.php里面这样写
  1. register_post_meta( 'post', 'sample_meta1', array(
  2.     'show_in_rest' => true,
  3.     'single' => true,
  4.     'type' => 'string'
  5. ));
复制代码
2、在src/index.js里面编写边栏的前端部分
  1. //引入需要的模块const {    registerPlugin} = wp.plugins;const {    PluginSidebar,    PluginSidebarMoreMenuItem} = wp.editPost;const {    withSelect,    withDispatch} = wp.data;const {    Fragment} = wp.element;const {    TextControl,} = wp.components; //注册边栏registerPlugin( 'sample-gutenberg-sidebar', {    render() {        return (            <Fragment>                <PluginSidebar                name="sample-gutenberg-sidebar"                icon="admin-post"                title="边栏示例"                >                示例内容                </PluginSidebar>            </Fragment>        )    },} );
复制代码


打开编辑器,看到效果如下

Gutenberg Sidebar边栏开发心得的案例

Gutenberg Sidebar边栏开发心得的案例

3、刚才注册的边栏直接取消固定并关闭(取消星星的填充,然后点击右侧的叉叉)后,就再也无法打开了,因此需要在Gutenberg的选项中增加一个边栏的打开菜单,我们在<Fragment>里面增加一个<PluginSidebarMoreMenuItem>并通过target属性指向到边栏
  1. <PluginSidebarMoreMenuItem target="sample-gutenberg-sidebar">
  2. 边栏菜单
  3. </PluginSidebarMoreMenuItem>
复制代码
这样,哪怕边栏被取消固定并关闭后,也可以有再次打开的方法:

Gutenberg Sidebar边栏开发心得的案例

Gutenberg Sidebar边栏开发心得的案例

4、现在,边栏的内容都是完全空的,我们来增加一个Input输入框来编辑刚才注册的sample_meta1数据。这一部分的原理在Gutenberg开发手册上有详细的描述我就不再多说了,主要使用了withSelect和withDispatch来实现数据的读取和更新。考虑到如果注册的meta字段比较多,这一部分就会重复写很多次而且比较繁琐,因此我将它封装成了一个构建meta模块的函数,后面的新增meta模块都用这个方法来进行:
  1. const createMetaBlock = (metaBlockField,metaName) => {
  2.     const MetaBlockFieldWithDataAndActions = withDispatch((dispatch) => {
  3.             return {
  4.                 setMetaFieldValue(value) {
  5.                     let meta = {};
  6.                     meta[metaName] = value;
  7.                     dispatch('core/editor').editPost({meta});
  8.                 }
  9.             }
  10.         })(withSelect((select) => {
  11.             return {
  12.                 metaFieldValue: select('core/editor').getEditedPostAttribute('meta')[metaName]
  13.             }
  14.         })(metaBlockField));
  15.     return (<MetaBlockFieldWithDataAndActions />);
  16. }
复制代码


我上面封装的构建模块方法第一个参数是Function类型:它接收一个参数(参数中包含meta数据和设置meta数据的方法),返回需要传入的组件;第二个参数是String类型,内容是meta字段的名称。将上面的代码加入到我们的脚本中后,现在我们用我刚才封装的方法来添加sample_meta1的编辑框
  1. <PluginSidebar
  2. name="sample-gutenberg-sidebar"
  3. icon="admin-post"
  4. title="边栏示例"
  5. >
  6. {
  7.     createMetaBlock(({metaFieldValue,setMetaFieldValue})=>{return (
  8.         <TextControl
  9.         label="示例数据1"
  10.         value={metaFieldValue}
  11.         onChange={ (content) => {setMetaFieldValue(content)} }
  12.         />
  13.     )},'sample_meta1')
  14. }
  15. </PluginSidebar>
复制代码
如果有更多的数据字段如sample_meta2,只需要在PluginSidebar中添加更多的metaBolck方法即可。编辑器中效果如下

Gutenberg Sidebar边栏开发心得的案例

Gutenberg Sidebar边栏开发心得的案例

5、至此,Gutenberg边栏的编写就完成了。发布时,先删除build文件夹,然后在PowerShell中使用下面的命令来进行代码打包和代码压缩
  1. npm run build
复制代码


开发文件夹下的package.json、src、node_modules、package-lock.json都不需要发布到正式环境中,只有build文件夹才需要
其他优化
  • 我们可以看到,上面的样式不算太好看。因此可以用类似引入脚本的方法,一样用钩子去引入样式。这里我就不再做示例了。发挥自己的想象去完成它吧
  • 根据实际的需求,可能不止input输入框一种,因此还可以根据需要增加更多的组件进去
  • 如果不想使用边栏,也可以将PluginSidebar换成PluginDocumentSettingPanel(具体用法参考Gutenberg开发文档),就可以将设置选项直接集成到文章设置页里面了
  • 最终,我完成了一个包含“图片上传”、“色彩选择”、“多图上传”、“单选”、“下拉”等功能为一体的主题文章设置工具,如下所示:
  • Gutenberg Sidebar边栏开发心得的案例

    Gutenberg Sidebar边栏开发心得的案例
  • 总结
    Gutenberg Sidebar 边栏开发时都是使用基础的PluginSidebar组件进行开发,只需掌握使用方法即可。唯一需要注意不要被坑的是要记得添加边栏菜单的另一个入口,防止被关闭后无法再次打开。
    Meta数据的读取和写入本身是一个难点,不过在本文中我已经将它封装成一个方便重用的方法了,若需了解详情,建议参考本文末尾的官方教程学习原理即可。
    关于本文的其它说明
    本文特色图在设计时考虑了Node的Logo外形和Gutenberg的G进行融合,文章头图也致敬了Node的颜色和风格。头图使用了“多边形”生成工具辅助进行设计。




道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、15056962695免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!

最新评论

关闭

道勤网- 推荐内容!上一条 /2 下一条



 
 
技术支持
在线客服
点击这里给我发消息
点击这里给我发消息
道勤建站群:
3群建站-美工交流-道勤
道勤美工群:
3群建站-美工交流-道勤
工作时间:
8:00-18:00
客服热线:
15056962695
官方微信扫一扫
发布主题 上个主题 下个主题 快速回复 返回列表 联系我们 官方QQ群

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号|赞助我们  

GMT+8, 2020-1-22 05:41

Powered by DaoQin! X3.2 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表