Building Gutenberg Block Collections with Vue

Building Powerful Gutenberg Block Collections with Vue: A Comprehensive Guide

WordPress’s Gutenberg editor revolutionized content creation, but managing a large collection of custom blocks can become cumbersome. This guide demonstrates how to leverage the power of Vue.js to streamline the development, organization, and maintenance of your Gutenberg block collections. We’ll explore building a reusable component system, managing block dependencies, and enhancing developer experience with Vue’s features.

Why Vue for Gutenberg Blocks?

While React is often the go-to choice for Gutenberg development, Vue offers compelling advantages:

• Simplicity and Ease of Learning: Vue’s gentle learning curve makes it accessible to developers with varying JavaScript experience. Its concise syntax and clear documentation reduce development time and complexity.
• Lightweight and Performant: Vue’s small bundle size contributes to faster loading times, crucial for a smooth user experience in the WordPress editor.
• Component-Based Architecture: Vue’s component system facilitates the creation of reusable and maintainable blocks, reducing code duplication and improving organization.
• Excellent Tooling: The Vue ecosystem offers tools like Vue CLI and Vue Devtools, enhancing developer productivity and debugging capabilities.

Project Setup:

We’ll begin by creating a new WordPress plugin. For this example, we’ll assume you have Node.js and npm (or yarn) installed. Create a directory for your plugin (e.g., vue-gutenberg-blocks), and inside, create the following files:

• gutenberg-blocks.php (main plugin file)
• src/ (directory for Vue components)
• webpack.config.js (Webpack configuration)
• package.json (project dependencies)

1. gutenberg-blocks.php:

<?php
/**
 * Plugin Name: Vue Gutenberg Blocks
 * Plugin URI:  https://yourwebsite.com/
 * Description: A collection of Gutenberg blocks built with Vue.js.
 * Version:     1.0.0
 * Author:      Your Name
 * Author URI:  https://yourwebsite.com/
 * License:     GPL2
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: vue-gutenberg-blocks
 */

// Enqueue scripts and styles
function vue_gutenberg_blocks_enqueue_scripts() {
    wp_enqueue_script(
        'vue-gutenberg-blocks-script',
        plugins_url( 'dist/main.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-i18n' ),
        '1.0.0',
        true
    );
    wp_enqueue_style(
        'vue-gutenberg-blocks-style',
        plugins_url( 'dist/main.css', __FILE__ ),
        array(),
        '1.0.0'
    );
}
add_action( 'enqueue_block_editor_assets', 'vue_gutenberg_blocks_enqueue_scripts' );

// Register Vue components as Gutenberg blocks (this will be done dynamically in the Vue code)

?>

2. package.json:

{
  "name": "vue-gutenberg-blocks",
  "version": "1.0.0",
  "description": "Gutenberg blocks built with Vue.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^6.7.3",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "vue-loader": "^17.0.0",
    "vue-template-compiler": "^2.7.14",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "vue": "^2.7.14"
  }
}

3. webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
              }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // Use the ES module build of Vue for Gutenberg
        },
        extensions: ['.js', '.vue']
    },
    mode: process.env.NODE_ENV || 'development'

};

4. src/main.js:

import Vue from 'vue';
import ExampleBlock from './components/ExampleBlock.vue';

Vue.component('example-block', ExampleBlock);

// Registering the blocks dynamically.  This would be expanded to register all blocks.
wp.blocks.registerBlockType('my-plugin/example-block', {
    edit: function(props) {
        return <div><example-block /></div>;
    },
    save: function(props) {
        return <div>Saved content</div>; // Replace with actual saved content
    },
});

5. src/components/ExampleBlock.vue:

<template>
  <div>
    <h1>My Example Block!</h1>
    <p>This is a simple example block built with Vue.</p>
    <input v-model="myInput" placeholder="Enter some text">
    <p>{{ myInput }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myInput: ''
    }
  }
}
</script>

6. src/index.html (create this file): This file is a placeholder, primarily used by webpack. It’s not directly rendered in the browser.

Building and Using the Plugin:

1. Run npm install in your plugin directory.
2. Run npm run build to compile your Vue components.
3. Activate the vue-gutenberg-blocks.php plugin in your WordPress installation.
4. You should now see your "Example Block" in the Gutenberg block editor.

Expanding the Block Collection:

This foundation allows you to create more complex blocks. Add more .vue files to the src/components directory. Update the src/main.js file to import and register each new component as a Gutenberg block using wp.blocks.registerBlockType.

Advanced Features:

• Block Attributes: Pass data from the Gutenberg editor to your Vue components as attributes in the registerBlockType definition.
• Data Persistence: Use the WordPress API (e.g., wp.data) to handle data saving and loading.
• Server-Side Rendering (SSR): Explore techniques like using a headless CMS (like Strapi or Headless WordPress) and fetching data server-side.
• Advanced Vue Features: Leverage Vuex for state management, Vue Router for navigation within the block (if needed), and Vuetify or Element UI for UI components.
• Testing: Use Jest or Cypress to test your Vue components in isolation and within the Gutenberg editor.

Example of a more complex block with attributes and data persistence:

// src/components/AdvancedBlock.vue
<template>
  <div>
    <input v-model="title" placeholder="Enter title" />
    <textarea v-model="content" placeholder="Enter content"></textarea>
    <p>Title: {{ title }}</p>
    <p>Content: {{ content }}</p>
  </div>
</template>

<script>
export default {
  props: {
    attributes: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      title: this.attributes.title || '',
      content: this.attributes.content || ''
    }
  },
  watch: {
    title(newTitle) {
      this.$emit('updateAttributes', {title: newTitle});
    },
    content(newContent) {
      this.$emit('updateAttributes', {content: newContent});
    }
  }
}
</script>

// src/main.js (updated)
import Vue from 'vue';
import ExampleBlock from './components/ExampleBlock.vue';
import AdvancedBlock from './components/AdvancedBlock.vue';

Vue.component('example-block', ExampleBlock);
Vue.component('advanced-block', AdvancedBlock);

wp.blocks.registerBlockType('my-plugin/example-block', {
  // ...
});

wp.blocks.registerBlockType('my-plugin/advanced-block', {
  edit: ({attributes, setAttributes}) => {
    return <div><advanced-block :attributes="attributes" @updateAttributes="setAttributes"/></div>;
  },
  save: (props) => {
    return <div>
      <h2>{props.attributes.title}</h2>
      <p>{props.attributes.content}</p>
    </div>;
  },
  attributes: {
    title: {type: 'string'},
    content: {type: 'string'}
  }
});

This comprehensive guide provides a solid foundation for building powerful and maintainable Gutenberg block collections using Vue.js. Remember to adapt and expand upon these examples to suit your specific needs and explore the vast possibilities offered by the combination of WordPress, Gutenberg, and Vue.js. Remember to thoroughly test your blocks and handle potential errors gracefully for a robust user experience.