New Developments

The inline formatting toolbar includes format options like bold, italic, inline code… The best part is you can add custom formats.

Why would I need custom formats?

In a recent project, I used custom formats for different bold formats. The client’s visual identity has two main colours, so in headings, you can use the common bold in the same colour of the heading — black-ish — or use one of the two brand colours. This adds some variety to content-dense pages.

You could also use it, for example:

• To have a different inline code format for examples of mistakes
• To have a second level of emphasis
• To use visual decoration without using semantic markup — ie. a different typeface which is not an emphasis but just a stylistic choice

What advantages do custom formats bring?

In old versions of format buttons, including WordPress classic editor, making several changes created unnecessary extra code.

Let’s say we write the phrase WordPress is awesome and then apply bold to WordPress. We would have something like WordPress is awesome, which will have this HTML:

<strong>WordPress</strong> is awesome

or even:

<b>WordPress</b> is awesome

If we later decide to include 6 after WordPress, and it is not bold, we could select it and apply bold — resulting in:

<strong>WordPress</strong> <strong>6</strong> is awesome

or select it together with WordPress and apply bold, resulting in:

<strong><strong>WordPress</strong> 6</strong> is awesome

We would only notice if we saw the code version, not the visual one.

The block editor toolbar is more sophisticated and prevents this type of error, and we can choose whatever output we want, like a span with one or multiple classes.

How to add a custom format?

In a block plugin, you only need two parts. We would use a different inline code for mistakes or bad practices.

First, we register the custom format:

registerFormatType( 'my-plugin/inline-bad-code', {
   title: 'Inline Bad Code',
   tagName: 'code',
   className: 'bad-code',
   edit: InlineBadCodeButton
} );

This will add a <code> tag around the selected text with a class bad-code.

And second, adding the button for the toolbar:

const InlineBadCodeButton = ( { isActive, onChange, value } ) => {
   const selectedBlock = useSelect( ( select ) => {
      return select( 'core/block-editor' ).getSelectedBlock();
   }, [] );
   return (
      <RichTextToolbarButton
         icon="editor-code"
         title="Inline Bad Code"
         onClick={ () => {
            onChange(
               toggleFormat( value, {
                  type: 'my-plugin/inline-bad-code',
               } )
            );
         } }
         isActive={ isActive }
      />
   );
};const InlineBadCodeButton = ( { isActive, onChange, value } ) => {
   const selectedBlock = useSelect( ( select ) => {
      return select( 'core/block-editor' ).getSelectedBlock();
   }, [] );
   return (
      <RichTextToolbarButton
         icon="editor-code"
         title="Inline Bad Code"
         onClick={ () => {
            onChange(
               toggleFormat( value, {
                  type: 'my-plugin/inline-bad-code',
               } )
            );
         } }
         isActive={ isActive }
      />
   );
};

We can now start using our new button on any site where we install the plugin.

We can take advantage of React and add some javascript to limit, for example, the type of blocks in which the button will be available. For example, only in paragraphs:

const InlineBadCodeButton = ( { isActive, onChange, value } ) => {
   const selectedBlock = useSelect( ( select ) => {
      return select( 'core/block-editor' ).getSelectedBlock();
   }, [] );
   if ( selectedBlock && selectedBlock.name !== 'core/paragraph' ) {
      return null;
   }
   return (
      <RichTextToolbarButton
         icon="editor-code"
         title="Inline Bad Code"
         onClick={ () => {
            onChange(
               toggleFormat( value, {
                  type: 'my-plugin/inline-bad-code',
               } )
            );
         } }
         isActive={ isActive }
      />
   );
};

Conclusion

Customising the block editor UI is as simple as it is powerful. Particularly for custom projects, this is awesome, because makes using styles outside the default ones very easy and convenient. Convenience is a great predictor of the use of any tool, especially unusual ones.