plugin.php

<?php # -*- coding: utf-8 -*-
/**
 * Plugin Name: Gutenberg Add Formatting
 * Description: Add formatting button in Gutenberg.
 * Plugin URI:  
 * Version:     0.0.1
 * Author:       
 * Author URI:  
 * Licence:     MIT
 * Text Domain: 
 */
 
namespace Bueltge\GutenbergAddFormatting;

if (! function_exists('add_filter')) {
    return;
}

add_action('init', __NAMESPACE__.'\initialize');
function initialize()
{

    wp_enqueue_script(
        'advanced-formatting-button',
        plugins_url( '/script.js', __FILE__ ),
        array(
            'wp-element',
            'wp-rich-text',
            'wp-format-library',
            'wp-i18n',
            'wp-editor',
            'wp-compose',
            'wp-components',
        ),
        filemtime( dirname( __FILE__ ) . '/script.js' ),
        true
    );
}

script.js

const { createElement, Fragment } = window.wp.element
const { registerFormatType, unregisterFormatType, toggleFormat } = window.wp.richText
const { __ } = window.wp.i18n
const { RichTextToolbarButton, RichTextShortcut } = window.wp.editor;

[
  {
    name: 'heart',
    tagName: 'hearttag',
    className: 'heart',
    title: 'Heart',
    character: '.',
    icon: 'heart'
  },
  {
    name: 'sub',
    tagName: 'subtest',
    className: null,
    title: 'Subscript',
    character: ',',
    icon: 'hammer'
  }
].forEach(({
	name,
	tagName,
	className,
	title,
	character,
	icon
	}) => {
  const type = `advanced/${name}`

  registerFormatType(type, {
    title,
    tagName,
    className,
    edit ({ isActive, value, onChange }) {
      const onToggle = () => onChange(toggleFormat(value, { type }))

      return (
        createElement(Fragment, null,
          createElement(RichTextShortcut, {
            type: 'primary',
            character,
            onUse: onToggle
          }),
          createElement(RichTextToolbarButton, {
          	icon,
            title,
            onClick: onToggle,
            isActive,
            shortcutType: 'primary',
            shortcutCharacter: character,
            className: `toolbar-button-with-text toolbar-button__advanced-${name}`
          })
        )
      )
    }
  })
})