Technology

How to Create a Custom Genesis Block in WordPress

gotihitesh

To create a custom Genesis block, you’ll need to create a custom block plugin. This plugin will register a new block in the WordPress block editor (Gutenberg) and define its settings, attributes, and rendering function. Here’s a step-by-step guide to creating a custom Genesis block:

Step 1: Set Up Your Plugin File Structure

Create a new folder for your custom block plugin in the WordPress plugins directory. Inside the folder, create the main plugin file (e.g., custom-genesis-block.php). This file will contain the plugin metadata and initialization code.

Step 2: Define the Plugin Metadata

Open custom-genesis-block.php and add the plugin metadata. At a minimum, it should include the plugin name, version, author, and description:

<?php
/*
Plugin Name: Custom Genesis Block
Version: 1.0
Author: Your Name
Description: A custom block for the Genesis Framework.
*/

Step 3: Enqueue the Block Assets

In the same custom-genesis-block.php file, enqueue the necessary JavaScript and CSS files for your custom block:

<?php
function custom_genesis_block_enqueue_assets() {
    // Enqueue the block's JavaScript file
    wp_enqueue_script(
        'custom-genesis-block',
        plugin_dir_url(__FILE__) . 'js/custom-genesis-block.js',
        array('wp-blocks', 'wp-element')
    );

    // Enqueue the block's CSS file
    wp_enqueue_style(
        'custom-genesis-block-style',
        plugin_dir_url(__FILE__) . 'css/custom-genesis-block.css'
    );
}
add_action('enqueue_block_editor_assets', 'custom_genesis_block_enqueue_assets');

Step 4: Create Block JavaScript and CSS Files

Inside your plugin folder, create a js and css directory. In the js directory, create a file named custom-genesis-block.js. In this file, define your block settings, attributes, and rendering function:

(function (blocks, element) {
    var el = element.createElement;

    blocks.registerBlockType('custom-genesis-block/custom-block', {
        title: 'Custom Genesis Block',
        icon: 'smiley', // Replace with a relevant Dashicon or custom SVG icon
        category: 'genesis', // Categorize the block under 'Genesis' category
        attributes: {
            // Define your block attributes here
        },
        edit: function (props) {
            // Block edit mode UI
            return el('div', { className: 'custom-genesis-block-edit' },
                'Custom Genesis Block Edit Mode'
            );
        },
        save: function (props) {
            // Block output on the frontend
            return el('div', { className: 'custom-genesis-block-save' },
                'Custom Genesis Block Save Mode'
            );
        },
    });
})(
    window.wp.blocks,
    window.wp.element
);

In the css directory, create a file named custom-genesis-block.css to style your block:

/* Add your custom block styles here */
.custom-genesis-block-edit {
    /* Styles for the block in the editor */
}

.custom-genesis-block-save {
    /* Styles for the block on the frontend */
}

Step 5: Register the Block

Finally, in the custom-genesis-block.php file, register the block using the register_block_type function:

<?php
function custom_genesis_block_register_block() {
    register_block_type(
        'custom-genesis-block/custom-block',
        array(
            'editor_script' => 'custom-genesis-block',
            'editor_style'  => 'custom-genesis-block-style',
        )
    );
}
add_action('init', 'custom_genesis_block_register_block');

Now, your custom Genesis block is registered, and you can find it in the block editor under the “Genesis” category. Customize the block’s JavaScript and CSS to suit your specific needs, and you can extend its functionality further if required.

Exit mobile version