Add Shortcode inline inside Gutenberg block

In the legacy (classic editor) it was possible to add buttons to the editor toolbar via tinymce API, that will add shortcode at cursor.

seems like this is not supported anymore from the tinymce FQA and this Gutenberg migration guide

Seems like it would be possible with the plugin tinymce advanced but I wonder what is today the best practice to add add a button to a tiny mce button to the the simple text editor of paragraph block.

The format API allows to add a custom format with tag and class around text, but does not to support adding string after text

Also, seems like this in the roadmap of the format API, but its not clear id its possible or not.

What is the best practice to add a button to tinymce editor tollbar in a simple paragraph block which will add text (shortcode for example) at cursor?

I added screenshot to clarify to which toolbar I refer.

Topic block-editor plugin-tinymce editor tinymce visual-editor Wordpress

Category Web

1
answered at

They have actually fixed it so you can just add the shortcode within the paragraph content and it works.

As simple as

...However, when [expand tag="span" title="this trigger" targtag="span"]hidden content[/expand] is clicked…

That would be the contents of a paragraph block with inline shortcode. See this for more information.

1
answered at

you can do this with this filter :

function do_shortcode_in_gut($block_content, $block) {
    return do_shortcode($block_content);
}
add_filter( 'render_block', 'do_shortcode_in_gut', 99, 2 );

This filtering your block render and do shortcode.

This is my exemple with Date shortcode

You can see in this screenshot I use a date shortcode with attributes. And the result : enter image description here

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.