古腾堡编辑器区块插件 – Inline Posts

古腾堡编辑器区块插件 – Inline Posts

Gutenberg 不仅仅是一个编辑器。虽然编辑器现在是焦点,但项目最终将影响整个发布体验,包括定制(下一个焦点区域)。

By Gutenberg Team

在 WordPress 5.0 发布之前,我们如果想在编辑器中引入站内的动态内容,那么我们就会编写一个短代码,然后在页面引入 [shortcode attr=”…”][/shortcode] 这段短代码,那么等访客访问我们引入里短代码的相关页面,就会根据我们的短代码逻辑作出相应的处理。

但是短代码有几个很不友好的地方。

  • 如果在编辑器引入短代码后,编辑器反馈的给我们是一段代码,而不是渲染成视觉上更直观的方式(才疏学浅不知道官方的音频短代码里是做什么处理,可以直接渲染出来,更友好)。
  • 如果之前引入里短代码,但后来切换主题后和弃用里某个支持短代码但插件后,页面上的短代码就会原形毕露,不友好。

短代码原形毕露的这个问题前些年也写过一个函数解决这个问题,现在不知道丢哪去里,哈哈哈哈哈。

自 5.0 引入古腾堡编辑器后,这个问题很好的解决这些问题,我们可以把这些短代码做成古腾堡上的一个区块,编辑时,区块以渲染的方式视觉呈现出来,区块是以 <!– wp:namespace/block-name /–> HTML 注释的形式表现的,区块失效也不会出现暴露的问题。

在你的帖子中内链引用其他相关帖子吧 !

比如:我的做菜经历….

周末在家,来一道土豆咖喱鸡充实生活
昨日与一个女性朋友聊天,聊到做菜,无意地显(zhuāng)露(bī)了一下自己,结果竟然不相信,于是我得证明一下给它我并不是浪得虚名。 土豆不愧深受中外人民喜爱,从我学生时代就经常吃土豆,尤其饭店里十元的咖喱土豆牛肉饭,那简直就是道美食,浓香的咖喱酱汁配上土豆简直就是一流 ,尤其是当下秋天的季节~ 鸡是我阿姨养的,鸡种 …
阅读更多

视频演示

内链帖子区块操作演示

👉 npm install 安装依赖

👉 npm run dev 开发时监听文件更改

👉 npm run prod 打包构建线上资源

目录结构

|-- plugin
    |-- .gitignore // git 文件夹排除
    |-- .babelrc // babel 配置
    |-- .eslintignore // eslint 文件夹排除
    |-- .eslintrc // eslint 配置
    |-- .stylelintrc // 样式检查、排序配置
    |-- package.json // 项目依赖目录
    |-- plugin.php // 插件入口
    |-- config // Webpack 配置
    |   |-- paths.js // 目录配置
    |   |-- webpack.config.dev.js // Webpack 开发配置
    |   |-- webpack.config.prod.js // Webpack 构建配置
    |-- dist // 构建后插件实际使用的脚本样式
    |   |-- block.build.js
    |   |-- block.editor.build.css
    |   |-- block.style.build.css
    |-- core // 插件引入的 PHP 文件
    |   |-- init.php // 初始化
    |   |-- render.php // 块的渲染模板(保持与“编辑器中块的渲染组件”结构大致相同)
    |   |-- scripts-and-styles.php // 插件引入的样式脚本
    |-- scripts // node 脚本
    |   |-- prod.js
    |   |-- dev.js
    |-- src // 主要开发目录
        |-- block.js // 块入口
        |-- components // 组件
        |   |-- InlinePost.js // 编辑器中块的渲染组件
        |   |-- InlinePosts.js
        |   |-- PostSelector.js
        |-- styles
        |   |-- editor.scss // 编辑器中块的样式
        |   |-- render.scss // 渲染呈现的块样式
        |-- utils
            |-- api.js // api 方法
            |-- useful-funcs.js // 辅助函数
交流,但不求共鸣

    我要留言

    Tips: 支持匿名免邮留言。填写邮箱地址有利于对各位靓仔/女进行消息通知。留言头像服务来自Gravatar

    留言者基本信息 匿名訪客
    匿名訪客
    留言主要内容
    Sticker Heo on wordpress, Get !!!!
    再见呲牙笑微笑亲亲愤怒惊吓尴尬捂嘴笑捂脸生病绿帽鼓掌抠鼻感动吐血鬼脸擦汗惊讶恶心禁言睡觉笑哭思考疑问奋斗耍酷吵架眩晕哭泣开心害羞喜欢烦恼爆炸熬夜吃瓜阴险狗头滑稽被打哈士奇大笑加班唱歌纠结发红包送福牛年进宝狗头围脖狗头花狗头草头秃狗头胖次我看好你好的好奇偷偷看危险小丑引起不适滑稽喝水熊猫熊猫唱歌打牌哈士奇失去意识应援熊猫喜欢疼痛勉强笑看穿一切滑稽狂汗不好意思菜狗难以置信月饼滑稽被子倚墙笑出家人菜狗花黑线呦吼有没有搞错打咩扶额
    Kaomojis 颜字

    Σ(っ °Д °;)っ  惊吓w(゚Д゚)w  啊啊(°ཀ°)  吐血(⊙﹏⊙)  呃呃呃o(≧口≦)o  崩溃(´•︵•`)  难过(;´༎ຶД༎ຶ`)  哭死→_→  斜眼看( ̄_, ̄ )  不屑( *︾▽︾)  陶醉(* ̄3 ̄)╭  飞吻o( ̄┰ ̄*)ゞ  不好意思(。・_・。)ノ  对不起φ(≧ω≦*)♪  乐(*^▽^*)  开心(๑╹◡╹)ノ  高兴*´∀`)´∀`)*´∀`)*´∀`)  哈哈哈哈ヽ(✿゚▽゚)ノ  好耶(๑•̀ㅂ•́)و✧  棒Ψ( ̄∀ ̄)Ψ  美味

    BACK TO TOP