Highlight (Marker) Button in the Block Toolbar
Adds a "Highlight" button to the text formatting toolbar that wraps selected words in a <mark> tag with a marker-pen look, for emphasis in posts.
Opens WPIDE on
Code
add_action( 'enqueue_block_editor_assets', function () {
wp_register_script( 'wpide-highlight-format', false, array( 'wp-rich-text', 'wp-block-editor', 'wp-element' ), '1.0', true );
wp_enqueue_script( 'wpide-highlight-format' );
wp_add_inline_script( 'wpide-highlight-format', <<<'JS'
( function ( wp ) {
var el = wp.element.createElement;
wp.richText.registerFormatType( 'wpide/highlight', {
title: 'Highlight',
tagName: 'mark',
className: 'wpide-highlight',
edit: function ( props ) {
return el( wp.blockEditor.RichTextToolbarButton, {
icon: 'admin-customizer',
title: 'Highlight',
isActive: props.isActive,
onClick: function () {
props.onChange( wp.richText.toggleFormat( props.value, { type: 'wpide/highlight' } ) );
}
} );
}
} );
} )( window.wp );
JS
);
} );
$wpide_highlight_css = 'mark.wpide-highlight{background:linear-gradient(transparent 55%,#fde68a 55%);color:inherit;padding:0 .1em;}';
add_action( 'wp_enqueue_scripts', function () use ( $wpide_highlight_css ) {
wp_register_style( 'wpide-highlight', false, array(), '1.0' );
wp_enqueue_style( 'wpide-highlight' );
wp_add_inline_style( 'wpide-highlight', $wpide_highlight_css );
} );
add_action( 'enqueue_block_assets', function () use ( $wpide_highlight_css ) {
if ( is_admin() ) {
wp_register_style( 'wpide-highlight-editor', false, array(), '1.0' );
wp_enqueue_style( 'wpide-highlight-editor' );
wp_add_inline_style( 'wpide-highlight-editor', $wpide_highlight_css );
}
} );
Notes
Find it in the toolbar's "More" (chevron) menu. Change the color in the inline CSS.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.