How To Create a WP Plugin That Adds Gutenberg block into WordPress editor?

how to create a wordpress plugin that adds gutenberg blocks into editor

Creating a WordPress plugin is a great way to add custom functionality to your website. Here is a step-by-step tutorial on how to create a basic WordPress plugin:

  1. Create a new folder in the wp-content/plugins directory. This folder will contain all of the files for your plugin. Give it a unique and descriptive name, such as “my-custom-plugin”.
  2. Inside the new folder, create a new PHP file with the same name as the folder (e.g. “my-custom-plugin.php”). This file will be the main plugin file and it should contain the plugin’s header information. The header information is a set of comments at the top of the file that tells WordPress about the plugin, such as the name, version, and author.
<?php
/*
Plugin Name: My Custom Plugin
Plugin URI: https://loreleiweb.com/my-custom-plugin
Description: A custom plugin that adds new functionality to my website.
Version: 1.0
Author: Your Name
Author URI: https://loreleiweb.com
*/
  1. Next, you’ll need to create a function that will run when the plugin is activated. This function will perform any necessary setup, such as creating database tables or adding options to the WordPress database.
function my_custom_plugin_activate() {
    // Perform setup here
}
register_activation_hook( __FILE__, 'my_custom_plugin_activate' );
  1. Create a function that will run when the plugin is deactivated. This function will be used to clean up any resources that were created when the plugin was activated.
function my_custom_plugin_deactivate() {
    // Perform cleanup here
}
register_deactivation_hook( __FILE__, 'my_custom_plugin_deactivate' );
  1. Now that you have the basic structure of your plugin set up, you can start adding custom functionality. This can be done using WordPress’s built-in functions, action hooks, and filter hooks, or by creating your own custom functions. For example, you can add a shortcode, a widget, a custom post type, or a custom REST API endpoint.
  2. Finally, you can test your plugin by activating it in the WordPress plugins screen. If everything is working as expected, you can distribute your plugin to other WordPress users so they can use it on their own sites.

Insert Block into Gutenberg

To create a WordPress plugin that will insert a block into the Gutenberg editor, you will need to use the WordPress Blocks API. This API allows you to register new blocks for use in the editor. Here are the general steps you’ll need to follow:

  1. Create a new plugin by creating a new folder in the wp-content/plugins directory and adding a .php file with the plugin’s header information.
  2. Enqueue the necessary scripts and styles for your block using the wp_enqueue_script and wp_enqueue_style functions.
  3. Use the register_block_type function to register your block. This function takes an object that defines the block’s properties, including the name, title, and description of the block, as well as the scripts and styles that should be loaded when the block is used.
  4. Create the PHP and JavaScript files for your block. The PHP file should define the markup for the block, and the JavaScript file should handle any interactivity or dynamic behavior.
  5. Use the render_callback parameter to reference the PHP function that renders the block and it’s content.
  6. Test your block in the Gutenberg editor to ensure it works as expected.
  7. Once you are satisfied with your block, you can distribute your plugin to other WordPress users so they can use it on their own sites.

Add Gutenberg Block Into WordPress Editor

To add a Gutenberg block in the WordPress editor, you can use the registerBlockType function provided by the WordPress JavaScript API. Here is an example of how you can use this function to create a custom block:

// Import the registerBlockType function from the WordPress JavaScript API
import { registerBlockType } from '@wordpress/blocks';

// Import the block editor components
import { RichText, MediaUpload } from '@wordpress/block-editor';

// Register the custom block
registerBlockType( 'my-plugin/custom-block', {
    title: 'Custom Block',
    icon: 'smiley',
    category: 'common',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: 'h2',
        },
        mediaID: {
            type: 'number',
        },
        mediaURL: {
            type: 'string',
            source: 'attribute',
            selector: 'img',
            attribute: 'src',
        },
    },
    edit: ( props ) => {
        const { attributes, setAttributes } = props;
        const { title, mediaID, mediaURL } = attributes;

        return (
            <div className={ props.className }>
                <RichText
                    tagName="h2"
                    value={ title }
                    onChange={ ( newTitle ) => setAttributes( { title: newTitle } ) }
                />
                <MediaUpload
                    onSelect={ ( media ) => setAttributes( { mediaURL: media.url, mediaID: media.id } ) }
                    type="image"
                    value={ mediaID }
                    render={ ( { open } ) => (
                        <button onClick={ open }>
                            { ! mediaID ? 'Upload Image' : <img src={ mediaURL } /> }
                        </button>
                    ) }
                />
            </div>
        );
    },
    save: ( props ) => {
        const { attributes } = props;
        const { title, mediaURL } = attributes;

        return (
            <div>
                <h2>{ title }</h2>
                <img src={ mediaURL } />
            </div>
        );
    },
} );

This code will create a custom block that allows you to add a title and an image. The block will appear in the “common” category in the WordPress editor, and will have a “smiley” icon.

Please note that this is just a sample code and you’ll need to adjust the code to match your use case and also make sure that you place it in the right file and location in your WordPress plugin or theme.

Note: This is a general overview, and there are a lot of details to consider when creating a WordPress plugin, it is recommended to follow a tutorial or a guide to understand the process better.

  1. Pingback:How To Create a WP Plugin That Adds Gutenberg block in into WordPress editor? – Lorelei Web

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.