Skip to content

Instantly share code, notes, and snippets.

@bueltge bueltge/plugin.php
Created Nov 15, 2018

Embed
What would you like to do?
<?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
);
}
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}`
})
)
)
}
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.