# Abbreviation Button in the Block Toolbar

> Adds an "Abbreviation" option to the text formatting menu that wraps selected text such as "SEO" in an abbr tag with its full meaning, shown as a tooltip and read by screen readers.

- Type: PHP
- Runs: Admin only
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: block-editor, formatting, accessibility
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/abbreviation-format-button/

## Code

```php
add_action( 'enqueue_block_editor_assets', function () {
    wp_register_script( 'wpide-abbr-format', false, array( 'wp-rich-text', 'wp-element', 'wp-block-editor' ), '1.0', true );
    wp_enqueue_script( 'wpide-abbr-format' );
    wp_add_inline_script( 'wpide-abbr-format', <<<'JS'
( function ( wp ) {
    var el = wp.element.createElement;
    var name = 'wpide/abbr';

    wp.richText.registerFormatType( name, {
        title: 'Abbreviation',
        tagName: 'abbr',
        className: 'wpide-abbr',
        attributes: { title: 'title' },
        edit: function ( props ) {
            return el( wp.blockEditor.RichTextToolbarButton, {
                icon: 'editor-textcolor',
                title: 'Abbreviation',
                isActive: props.isActive,
                onClick: function () {
                    if ( props.isActive ) {
                        props.onChange( wp.richText.removeFormat( props.value, name ) );
                        return;
                    }
                    var meaning = window.prompt( 'What does this abbreviation stand for?' );
                    if ( meaning ) {
                        props.onChange( wp.richText.applyFormat( props.value, { type: name, attributes: { title: meaning } } ) );
                    }
                }
            } );
        }
    } );
} )( window.wp );
JS
    );
} );
```

## Notes

Select the abbreviation, open the dropdown arrow in the toolbar and choose Abbreviation; click it again on marked text to remove it.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Abbreviation Button in the Block Toolbar" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/