脚本宝典收集整理的这篇文章主要介绍了使用Vue.js构建Wordpress Gutenberg块，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。WordPress的新Gutenberg编辑器是Web开发领域中一个非常热门的新主题。有了它，WordPRess完全采用React和现代JavaScript，将数百万开发人员带入现代前端世界，并为现有前端开发人员创建大量受众。 虽然React是Gutenberg支持的主要框架，但有迹象表明使用其他JavaScript框架（如Vue.js）实现Gutenberg块应该可以使用像vuera这样的库，所以我决定探索如何实现这一点以及它的工作原理。 TL / DR：我们可以在Vue中实现基本块而不会有太多麻烦，但是如果我们尝试使用像Word
BlockControls或类似的Wordpress内置，我们很快会遇到限制InnerContent。
npm install -g create-guten-block
npx create-guten-block vuetenbergsrc/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>
);
},
} );edit并将save包装传递给我们的Vue组件。
create-guten-app我们需要eject构建脚本 - 否则它们是在插件内部管理的。我们通过在插件目录中运行以下命令：
npm run ejectscripts目录中的一些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内或任何地方，需要一个组件返回。
道具的传递完全按照您的预期传递，因此我们的EditVue组件可以引用任何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>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，请注明来意。