脚本宝典收集整理的这篇文章主要介绍了使用Vue.js构建Wordpress Gutenberg块，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

配置

npm install -g create-guten-block
npx create-guten-block vuetenberg

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>
    );
  },
} );

准备自定义配置

npm run eject

设置Vue和Vuera

npm install --save vuera vue vue-loader css-loader vue-template-compiler

1. 添加Vue Loader插件
2. 添加vue-loader引用规则

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  // ...
  plugins: [ blocksCSSPlugin, editBlocksCSSPlugin, new VueLoaderPlugin() ],
}

module.exports = {
  // ...
  rules: [
    // ...
    {
        test: /.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      }
  ]
}

最小值

<template>
  <p>{{message}}</p>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello from Vue',
    };
  },
}
</script>

import { VueInReact } from 'vuera'
import Editcomponent from './edit.vue';
const Edit = VueInReact(EditComponent);

registerBlockType( 'cgb/block-vuetenberg', {
  // ...
  edit: Edit
}

使用Gutenberg Builtin组件

registerBlockType( 'cgb/block-vuetenberg', {
  //...
  attributes: {
    align: {
      type: 'string',
      default: 'full',
    },
  },
  //...
}

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>

解决方法

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>
    );
  }
}

前进之路

脚本宝典总结

以上是脚本宝典为你收集整理的使用Vue.js构建Wordpress Gutenberg块全部内容，希望文章能够帮你解决使用Vue.js构建Wordpress Gutenberg块所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。