Insert Special Characters

A Special Character inserter for the WordPress block editor (Gutenberg).

Overview

Ever wanted to add a special character while working within Gutenberg and suddenly find yourself longing for the days of the Classic Editor and the Special Character inserter? Well long no more, the Insert Special Characters plugin is here to ease your publishing woes!

Note: you can display the popover via the ctrl/cmd + o keyboard shortcut.

Extending

To control the available tabs and characters, developers can filter the data set using the insertspecialcharacters-characters JavaScript (wp.hooks) filter.

For example, to create a character inserter that only provides currency symbols:

wp.hooks.addFilter(
	'insertspecialcharacters-characters',  // The filter name.
	'mycallback', // Our callback namespace.
	function( component ) { // The callback function.

		// Return the categories/characters to display.
		// The data structure is: { category: [ character data ], category2: ... }
		return {
			"Currency": [
				{ "entity": "$", "hex": "", "name": "Dollar Sign", "char": "$" },
				{ "entity": "€", "hex": "&#20AC;", "name": "Euro Sign", "char": "€" },
				{ "entity": "¢", "hex": "&#00A2;", "name": "Cent Sign", "char": "¢" },
				{ "entity": "£", "hex": "&#00A3;", "name": "Pound Sign", "char": "£" },
				{ "entity": "¥", "hex": "&#00A5;", "name": "Yen Sign", "char": "¥" },
			]
		};
	}
);

Requirements

• PHP 7.4+
• WordPress 6.5+

Installation

1. Install the plugin via the plugin installer, either by searching for it or uploading a .zip file.
2. Activate the plugin.
3. Use Insert Special Characters!

Development

1. Clone this repo into your wp-content/plugins folder: git clone https://github.com/10up/insert-special-characters.git
2. Build the plugin by running the following NPM commands in the plugin folder.
   • npm install && composer install
   • npm run build
3. Activate the Insert Special Characters plugin.

Frequently Asked Questions

How come I do not see all the special characters?

When a character is displayed using a font that doesn't support that character, a default "not defined" glyph from that font is used. The "not defined" glyph in most fonts has the appearance of a rectangular box, or some variation of that.

One example of a font with support for wide range of glyphs is the Noto family by Google Fonts, which can be loaded by the theme to render the missing characters.

Support Level

Stable: 10up is not planning to develop any new features for this, but will still respond to bug reports and security concerns. We welcome PRs, but any that include new features should be small and easy to integrate and should not include breaking changes. We otherwise intend to keep this tested up to the most recent version of WordPress.

Changelog

A complete listing of all notable changes to Insert Special Characters are documented in CHANGELOG.md.

Contributing

Please read CODE_OF_CONDUCT.md for details on our code of conduct, CONTRIBUTING.md for details on the process for submitting pull requests to us, and CREDITS.md for a listing of maintainers of, contributors to, and libraries used by Insert Special Characters.

Like what you see?