脚本宝典收集整理的这篇文章主要介绍了使用Vue.js构建Wordpress Gutenberg块,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。WordPress的新Gutenberg编辑器是Web开发领域中一个非常热门的新主题。有了它,WordPRess完全采用React和现代JavaScript,将数百万开发人员带入现代前端世界,并为现有前端开发人员创建大量受众。 虽然React是Gutenberg支持的主要框架,但有迹象表明使用其他JavaScript框架(如Vue.js)实现Gutenberg块应该可以使用像vuera这样的库,所以我决定探索如何实现这一点以及它的工作原理。 @H_777_0@TL / DR:我们可以在Vue中实现基本块而不会有太多麻烦,但是如果我们尝试使用像Word
BlockControls
或类似的Wordpress内置,我们很快会遇到限制InnerContent
。
npm install -g create-guten-block
npx create-guten-block vuetenberg
这会创建一个支架,其中包含一个非常基本的初始块src/block/block.js
。一旦你activate
进入wordpress管理员,你就能看到它。
出于本篇博文的目的,我不打算对该块的功能进行太多改动,只需将其转换为使用Vue和Vue单文件组件(Sfc)
要做到这一点,了解古腾堡区块的核心结构是有帮助的。它由一个包含许多字段的纯JavaScript对象组成,包括两个 - 编辑和保存 - 这些是React组件。
registerBlockTyPE( 'cgb/block-vuetenberg', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
tITle: __( 'vuetenberg - CGB Block' ), // Block title.
icon: 'shield', // Block icon From Dashicons → https://developer.wordpress.org/resource/dashicons/.
category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
keywords: [
__( 'vuetenberg — CGB Block' ),
__( 'CGB Example' ),
__( 'create-guten-block' ),
],
edit: function( props ) {
// Creates a <div class='wp-block-cgb-block-vuetenberg'></div>.
return (
<div classname={ props.className }>
<p>— Hello from the backend.</p>
</div>
);
},
save: function( props ) {
return (
<div>
<p>— Hello from the frontend.</p>
</div>
);
},
} );
为了将Vue.js组件用于我们的核心块,我们将使用一个名为vuera的库,它允许我们在React组件中调用Vue组件。
然后我们将简单地替换edit
并将save
包装传递给我们的Vue组件。
create-guten-app
我们需要eject
构建脚本 - 否则它们是在插件内部管理的。我们通过在插件目录中运行以下命令:
npm run eject
scripts
目录中的一些webpack配置文件填充我们的config
目录。
vue-loader
。
使用vue-loader
也需要使用css-loader
和vue-template-compiler
,所以我们的最终NPM安装如下:
npm install --save vuera vue vue-loader css-loader vue-template-compiler
.babelrc
,但我无法在Gutenberg环境中使用它。相反,我们将使用一种使用VueinReact
更高阶组件包装Vue组件的替代方法。
首先,要编译我们的.vue
文件,我们需要配置要添加的webpack vue-loader
。有两个webpack配置create-guten-block
,config/webpack.config.dev.js
和config/webpack.config.prod.js
。
我们需要做出的改变是:
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
// ...
plugins: [ blocksCSSPlugin, editBlocksCSSPlugin, new VueLoaderPlugin() ],
}
并将此块添加到 rules
module.exports = {
// ...
rules: [
// ...
{
test: /.vue$/,
use: [
{
loader: 'vue-loader'
}
]
}
]
}
<template>
<p>{{message}}</p>
</template>
<script>
export default {
data() {
return {
message: 'Hello from Vue',
};
},
}
</script>
然后,要在我的块中包含它,我需要导入它,用VueInReact
更高阶的组件包装它vuera
,然后将它放入我的模板中。
import { VueInReact } from 'vuera'
import Editcomponent from './edit.vue';
const Edit = VueInReact(EditComponent);
registerBlockType( 'cgb/block-vuetenberg', {
// ...
edit: Edit
}
注意:一旦我们在包装我们的组件VueInReact
,它表现为一个阵营组成部分,让我们使用它JSX内或任何地方,需要一个组件返回。
道具的传递完全按照您的预期传递,因此我们的Edit
Vue组件可以引用任何Gutenberg特定属性。
ReactInvue
类似于我们如何在React中嵌入Vue 的包装器来实现它应该同样简单。
让我们尝试添加一些块控件来自定义对齐。首先,我们在块中设置一个对齐属性:
registerBlockType( 'cgb/block-vuetenberg', {
//...
attributes: {
align: {
type: 'string',
default: 'full',
},
},
//...
}
接下来,我们的组件,我们将利用BlockControls
并BlocKalignmentToolbar
从内置的组件wp.editor
。
在我们的脚本部分:
import { ReactInVue } from 'vuera';
const {
BlockControls,
BlockAlignmentToolbar,
} = wp.editor;
export default {
props: ['attributes', 'setattributes'],
components: {
'block-controls': ReactInVue(BlockControls),
'block-alignment-toolbar': ReactInVue(BlockAlignmentToolbar),
},
data() {
return {
message: 'Hello from Vue',
};
},
}
然后在我们的模板中:
<template>
<div>
<block-controls>
<block-alignment-toolbar :value="attributes.align"
:onChange="align => setAttributes( { align } )"
:controls="[ 'wide', 'full' ]"
/>
</block-controls>
<p>{{message}}</p>
</div>
</template>
看起来很简单,但在这里我们遇到了Gutenberg和Vuera当前状态的一些挑战和缺点。
BlockControls
只有在选择块时才能看到该组件 - 但在我们基于Vue的实现中它永远不会出现!
在进行了一些挖掘之后,我使用新的React Context API来追踪这一挑战。
虽然我们可以使用Vuera在Vue组件内部渲染React组件,但许多Gutenberg的内置组件利用React的Context API来根据是否选择了元素来改变行为,而Context似乎没有穿过React / Vue边界。
在这种情况下BlockControls
,这意味着元素永远不会出现。
BlockControls
或者InspectorControls
,它们绝对定位并且不需要存在于我们的核心块内。
我们可以通过使用纯React 将它们放在我们的Vue组件之外来解决这个限制,并继续在Vue中只使用我们组件的内容:
import { VueInReact } from 'vuera'
import EditComponent from './edit.vue';
const Edit = VueInReact(EditComponent);
const {
BlockControls,
BlockAlignmentToolbar,
} = wp.editor;
registerBlockType( 'cgb/block-vuetenberg', {
// ...
edit: function(props) {
return (
<div>
<BlockControls>
<BlockAlignmentToolbar />
</BlockControls>
<Edit {...props} />
</div>
);
}
}
但是,对于类似的事情InnerBlocks
,这种解决方法是不够的,因为它的性质不同,它嵌入在块中。
此时,我必须得出结论,只有使用Vue.js才能构建不依赖于内置且不嵌套内容的Gutenberg块。
isSelected
该道具是正确更新,而且可以把它传递到子组件。但是,现在这些组件没有设置为接收此prop,只查看Context。
然而,我们到达那里,我很乐观有一天,我们将能够使用Vue.js实现复杂的Gutenberg块,几乎就像我们在React中一样容易。我们还没有。
觉得可用,就经常来吧!vue教程 脚本宝典 欢迎评论哦!巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的使用Vue.js构建Wordpress Gutenberg块全部内容,希望文章能够帮你解决使用Vue.js构建Wordpress Gutenberg块所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。