Fragments of code to add a custom button to Gutenberg rich text blocks

gutenberg.js

import ElementIcon from '../images/logo.svg';

const { Fragment } = wp.element;
const { __ } = window.wp.i18n;
const { registerFormatType, unregisterFormatType } = window.wp.richText;
const { RichTextToolbarButton } = window.wp.blockEditor;


unregisterFormatType( 'nelio/button' );
registerFormatType( 'nelio/button', {
  title: __( 'Nelio', 'nelio-content' ),
  tagName: 'span',
  className: 'nelio',
  edit({ value }) {
    const onClick = () => doTheJob( value );

    return (
      <Fragment>
        <RichTextToolbarButton
          icon={ <ElementIcon /> }
          title={ __( 'Nelio', 'nelio-content' ) }
          onClick={ onClick }
      />
      </Fragment>
    );
  }
});

function doTheJob( value ) {

  let selectedText = value.text.substring( value.start, value.end );
  if ( 0 === selectedText.length ) {
    return;
  }//end if

  // Do things with the selected text here...
  console.log( selectedText );

}//end openDialogToCreateAMessage()

nelio-gutenberg-custom-button.php

<?php
/**
 * The plugin bootstrap file.
 *
 * Plugin Name: Nelio Gutenberg Custom Button
 * Plugin URI:  https://neliosoftware.com/
 * Description: Add custom button to Rich Text blocks in Gutenberg for WordPress.
 * Version:     1.0.0
 *
 * Author:      Nelio Software
 * Author URI:  https://neliosoftware.com
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 *
 * Text Domain: nelio
 * Domain Path: /languages
 */

! defined( 'ABSPATH' ) && exit;

add_action( 'enqueue_block_editor_assets', 'nelio_enqueue_block_editor_assets', 9 );
public function nelio_enqueue_block_editor_assets() {

  wp_enqueue_script(
    'nelio-gutenberg-custom-button',
    untrailingslashit( plugin_dir_url( __FILE__ ) ) . '/dist/js/gutenberg.js',
    [ 'wp-editor', 'wp-i18n', 'wp-element', 'wp-compose', 'wp-components' ],
    '1.0.0',
    true
  );

}

webpack.config.js

const path = require( 'path' );
const webpack = require( 'webpack' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
const ImageminPlugin = require( 'imagemin-webpack-plugin' ).default;
const CleanWebpackPlugin = require( 'clean-webpack-plugin' );
const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
const wpPot = require( 'wp-pot' );

const inProduction = ( 'production' === process.env.NODE_ENV );

const config = {

  // Ensure modules like magnific know jQuery is external (loaded via WP).
  externals: {
    $: 'jQuery',
    jquery: 'jQuery',
    lodash: 'lodash',
    react: 'React',
  },
  devtool: 'source-map',
  module: {
    rules: [

      // Use Babel to compile JS.
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'babel-loader',
        ],
      },

      // SVG files.
      {
        test: /.svg$/,
        use: [
          {
            loader: 'svg-react-loader',
          },
        ],
      },
    ],
  },

  // Plugins. Gotta have em'.
  plugins: [

    // Removes the "dist" folder before building.
    new CleanWebpackPlugin( [ 'dist' ] ),

    // Copy index.php to all dist directories.
    new CopyWebpackPlugin( [ { from: 'index.php', to: '.' } ] ),

  ],
};

module.exports = [

  Object.assign( {
    entry: {
      gutenberg: [ './src/js/gutenberg.js' ],
    },
    output: {
      path: path.join( __dirname, './dist/' ),
      filename: 'js/[name].js',
      library: 'NelioBlocks',
      libraryTarget: 'umd',
    },
  }, config ),

];

// inProd?
if ( inProduction ) {
  // POT file.
  wpPot( {
    package: 'Nelio',
    domain: 'nelio',
    destFile: 'languages/nelio.pot',
    relativeTo: './',
    team: 'Nelio Software <[email protected]>',
  } );

  // Uglify JS.
  config.plugins.push( new webpack.optimize.UglifyJsPlugin( { sourceMap: true } ) );

}