How do I create a custom block in the WordPress editor?

by

To create a custom block in the WordPress Gutenberg editor, you’ll need to create a custom plugin or add the code to your theme’s functions.php file. In this example, I’ll guide you through creating a simple custom block that displays a quote with an author’s name.

Here are the steps:

  1. Create a Plugin or Use functions.php:
    You can either create a new WordPress plugin or add the code to your theme’s functions.php file. Using a plugin is recommended, as it keeps your custom functionality separate from your theme’s code.
  2. Create the Block JavaScript File:
    Inside your plugin directory or theme folder, create a directory named custom-quote-block. Inside that directory, create a JavaScript file named custom-quote-block.js. Add the following code to custom-quote-block.js:
(function (blocks, editor, i18n, element) {
  var el = element.createElement;
  var registerBlockType = blocks.registerBlockType;
  var RichText = editor.RichText;

  registerBlockType('custom-quote-block/quote', {
    title: 'Custom Quote',
    icon: 'quote',
    category: 'common',
    attributes: {
      quote: {
        type: 'string',
        source: 'html',
        selector: 'blockquote',
      },
      author: {
        type: 'string',
        source: 'html',
        selector: 'cite',
      },
    },
    edit: function (props) {
      var attributes = props.attributes;

      function updateQuote(value) {
        props.setAttributes({ quote: value });
      }

      function updateAuthor(value) {
        props.setAttributes({ author: value });
      }

      return el(
        'div',
        {},
        el(RichText, {
          tagName: 'blockquote',
          value: attributes.quote,
          onChange: updateQuote,
          placeholder: 'Enter quote here...',
        }),
        el(RichText, {
          tagName: 'cite',
          value: attributes.author,
          onChange: updateAuthor,
          placeholder: 'Enter author name...',
        })
      );
    },
    save: function (props) {
      var attributes = props.attributes;

      return el(
        'blockquote',
        {},
        attributes.quote,
        el('cite', {}, attributes.author)
      );
    },
  });
})(window.wp.blocks, window.wp.editor, window.wp.i18n, window.wp.element);
  1. Enqueue the Block JavaScript:
    In your plugin or functions.php, enqueue the block JavaScript file. Add the following code:
function enqueue_custom_quote_block() {
  wp_enqueue_script(
    'custom-quote-block',
    plugins_url('custom-quote-block/custom-quote-block.js'),
    array('wp-blocks', 'wp-editor', 'wp-i18n', 'wp-element')
  );
}

add_action('enqueue_block_editor_assets', 'enqueue_custom_quote_block');
  1. Activate the Block:
    Activate the plugin (if you created one) or make sure your theme’s functions.php is updated.
  2. Test the Block:
    Open the Gutenberg editor and create a new post or page. You should see your custom block labeled “Custom Quote” under the “Common” category. Add the block and start typing your quote and author’s name.
  3. Save and Publish:
    Once you’re satisfied with the block’s content, save or publish your post or page.

That’s it! You’ve created a custom block for the WordPress Gutenberg editor. You can further customize this block, add more attributes, and style it using CSS to match your design.

Leave a Comment