Skip to content

Instantly share code, notes, and snippets.

@avillegasn avillegasn/gutenberg.js
Last active Mar 8, 2019

Embed
What would you like to do?
Fragments of code to add a custom button to Gutenberg rich text blocks
import ElementIcon from '../images/logo.svg';
const { Fragment } = wp.element;
const { __ } = window.wp.i18n;
const { registerFormatType, unregisterFormatType } = window.wp.richText;
const { RichTextToolbarButton } = window.wp.editor;
unregisterFormatType( 'nelio/button' );
registerFormatType( 'nelio/button', {
title: __( 'Nelio', 'nelio-content' ),
tagName: 'span',
className: null,
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()
<?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
);
}
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 <info@neliosoftware.com>',
} );
// Uglify JS.
config.plugins.push( new webpack.optimize.UglifyJsPlugin( { sourceMap: true } ) );
}
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.