I have added a button to the Block Editor. Currently it adds a <span class="lqdnotes-blank-it"> before the selected text and </span> after it like so:

<span class="lqdnotes-blank-it">Selected Text.</span>

Here is the current code:

(function ( wp ) {
    var lqdNotesButton = function( props ) {
        return wp.element.createElement(
            wp.blockEditor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Blank It',
                onClick: function () {
                    props.onChange( wp.richText.toggleFormat(
                        { type: 'lqdnotes/blankit' }

        'lqdnotes/blankit', {
            title: 'Blank It',
            tagName: 'span',
            className: 'lqdnotes-blank-it',
            edit: lqdNotesButton,
} )( window.wp );

I'd like to change how this functions. Instead of adding a class around it I'd like it to replace the selected text with an input textbox. The desired result would look like:

<input type="text" class="lqdnotes-blanked" id="FirstFifteenCharsOfSelectedTextUniqueID">

Thus one might have post content like:

"The American Civil War commenced in 1861 and concluded in 1865."

If the individual toggled on the button on 1861 and 1865 the output might look like:

"The American Civil War commenced in <input type="text" class="lqdnotes-blanked" id="1861lqd0001"> and concluded in <input type="text" class="lqdnotes-blanked" id="1865lqd0002">."

What I've been unable to figure out thus far is how I get the value of the selected text and how I return it as part of the input's id.


You get the selected content with getTextContent(). So you should add your HTML before and after this content.

A small code example that will not work because I added variables without values, only for understanding. To see how I define the variables, and add many more filters for validation of the content, see my playing code inside a GitHub repo.

    registerFormatType(type, {
        edit({isActive, value, onChange}) {
            // Get the selected string.
            const text = getTextContent(slice(value));
            const toInsert = tagName + text + tagEnd;
            //const onClick = () => onChange( insert( value, toInsert ) );
            const onClick = () => {
                element = create({
                    'html' : toInsert
                if( element.formats.length === 0 ) {
                for ( let i = element.formats[0].length - 1; i >= 0; i-- ) {
                    value = toggleFormat(value, element.formats[0][i]);

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

You should also see this code from the core of this topic. https://github.com/WordPress/gutenberg/blob/4741104c2e035a6b80ab7e01031a9d4086b3f75d/packages/rich-text/src/register-format-type.js#L17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.