Through inline formatting in the block editor, you can change the format of content within a block. It’s usually meant to add HTML before and after a text selection. But since I needed to add and remove content inline, I wanted to achieve something different. So following, I describe how you can properly add and remove content via the block editor’s inline formatting.

First of all, the inline formatting is heavily dependent on the @wordpress/rich-text React package. If you didn’t work with it yet, please make sure to read the documentation and – ideally – create your own inline formatting first.

In my example, the goal was to add soft hyphenations, so that the user can control where word breaks are done, without requiring to edit the block via HTML. Since this requires to insert a new character while using inline formatting, I looked for a way to implement this.

If you register an inline format via registerFormatType, one parameter your edit function for your format type receives the value, a RichTextValue object, which contains the start and end of a selection, the selected text as well as an array with already applied formats.

Check selection

Since I want to add a character at the caret’s position, I first check via the method isCollapsed in my click function of my RichTextToolbarButton, whether there is a caret in the current block, but no text is selected. This is the position I want to add my soft hyphen.

if ( ! isCollapsed( value ) ) {
	return;
}
Code language: JavaScript (javascript)

Then, depending on whether the formatting is already active (a property, which is returned in the edit function of your registerFormatType), I then need to add or remove the soft hyphen. In practice, I don’t add a UTF-8 character for a soft hyphen, since the RichTextValue object won’t work properly with such characters and thus won’t count them. So, I just add a regular hyphen (or dash, or minus) - for now. In my registerFormatType, I use a custom className and use span as tagName, so that the hyphen is surrounded by a span element with my custom class.

registerFormatType( 'my-plugin-soft-hyphens/soft-hyphens', {
	className: 'my-plugin__soft-hyphen',
	edit: ToolbarButton,
	tagName: 'span',
	title: __( 'Soft Hyphen', 'my-plugin-soft-hyphens' ),
} );
Code language: JavaScript (javascript)

Add content

To add content, I found the insert method in @wordpress/rich-text, which is exactly what we need here. As first parameter, we pass the RichTextValue object, as second parameter the text we want to add (a -) and as third parameter, the position we want to add it (the start index of our RichTextValue object).

value = insert( value, '-', value.start );Code language: JavaScript (javascript)

Now we’ve added a - successfully, but didn’t yet add the text formatting. To do this, we need to first make sure that the added - is part of the RichTextValue object, so we programmatically alter the selection by substract 1 from the start index, since we added a single character before:

value.start -= 1;Code language: JavaScript (javascript)

Then, we toggle the format regularly:

onChange(
	toggleFormat( value, {
		type: 'my-plugin/soft-hyphens',
	} )
);
Code language: JavaScript (javascript)

Remove content

To remove the format and hyphen again, we need to substract 1 from the start and end index, since this is the target position we want to remove the formatting from. For this, we have something similar to the insert method, the remove method in @wordpress/rich-text to remove the - again. This is done by also passing the RichTextValue object as first parameter, the value.start as second and the value.end + 1 as third, since we added a single character before:

value = remove( value, value.start, value.end + 1 );Code language: JavaScript (javascript)

Then, we remove the format regularly:

onChange(
	removeFormat(
		value,
		'my-class/soft-hyphens'
	)
);
Code language: JavaScript (javascript)

Replacing - with a proper soft hyphen

If we applied the format, we now have the following content in the source code:

<code><span class="my-plugin__soft-hyphen">-</span></code>Code language: HTML, XML (xml)

As you can see, this is not a real soft hyphen, yet. To replace it, we need a little bit of PHP and filter the blocks via the render_block filter:

/**
 * Replace hyphens with soft hyphens.
 * 
 * @param	string	$block_content Block content
 * @return	string Block content with replacements
 */
function my_plugin_replace_hyphens( string $block_content ): string {
	return \str_replace( '<span class="my-plugin__soft-hyphens">-</span>', '&shy;', $block_content );
}

\add_filter( 'render_block', 'my_plugin_replace_hyphens' );
Code language: PHP (php)

Leave a Reply

Your email address will not be published. Required fields are marked *