Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Create custom Underline rich text format for Gutenberg editor. Learn more at https://jeffreycarandang.com/
/**
* WordPress dependencies
*/
const { __ } = wp.i18n;
const { Fragment } = wp.element;
const { toggleFormat } = wp.richText;
const { RichTextToolbarButton, RichTextShortcut } = wp.editor;
const { registerFormatType } = wp.richText;
/**
* Block constants
*/
const name = 'editorskit/underline';
export const underline = {
name,
title: __( 'Underline' ),
tagName: 'span',
className: null,
attributes: {
style: 'style',
},
edit( { isActive, value, onChange } ) {
const onToggle = () => {
onChange(
toggleFormat( value, {
type: name,
attributes: {
style: 'text-decoration: underline;',
},
} )
);
};
return (
<Fragment>
<RichTextShortcut
type="primary"
character="u"
onUse={ onToggle }
/>
<RichTextToolbarButton
icon="editor-underline"
title={ __( 'Underline' ) }
onClick={ onToggle }
isActive={ isActive }
shortcutType="primary"
shortcutCharacter="u"
/>
</Fragment>
);
},
};
function registerFormats () {
[
underline,
].forEach( ( { name, ...settings } ) => registerFormatType( name, settings ) );
};
registerFormats();
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.