Gutenberg Block Editor Toolkit Shortcode

Below, you’ll find a detailed guide on how to add the Gutenberg Block Editor Toolkit Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Gutenberg Block Editor Toolkit Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Gutenberg Block Editor Toolkit Plugin and the shortcodes it provides:

Gutenberg Block Editor Toolkit – EditorsKit

"EditorsKit is a Gutenberg Block Editor Toolkit plugin that enhances your WordPress editing capabilities. It provides user-friendly options to manipulate Gutenberg blocks, boosting your site's functionality."

★★★★☆ (150) Active Installs: 30000+ Tested with: 6.3.2 PHP Version: 5.6

Included Shortcodes:

• [editorskit]

Gutenberg Block Editor Toolkit [editorskit] Shortcode

The EditorsKit shortcode is a versatile tool that allows for dynamic content display. It primarily checks the ‘display’ attribute and accordingly modifies the content. Depending on the ‘display’ value, it executes different functions. For instance, if ‘display’ is set to ‘wordcount’, it calculates the word count of the content. If no ‘display’ attribute is set, the original content is returned. The shortcode also allows for customizable HTML tags through the ‘tag’ attribute. By default, it uses the ‘div’ tag.

Shortcode: [editorskit]

Parameters

Here is a list of all possible editorskit shortcode parameters and attributes:

• display – determines what the shortcode outputs
• tag – changes the HTML tag surrounding the shortcode output

Examples and Usage

Basic example – A simple use of the ‘editorskit’ shortcode to display a word count.

[editorskit display="wordcount" /]

With the basic usage of the ‘editorskit’ shortcode, it is possible to display the word count of the content. The shortcode uses the ‘display’ attribute to determine what to display. In this case, ‘wordcount’ is specified, so the shortcode will return the word count.

Advanced examples

Using ‘editorskit’ shortcode with ‘tag’ attribute to display word count within a specific HTML tag.

[editorskit display="wordcount" tag="p" /]

In this advanced example, the ‘tag’ attribute is added. This attribute allows you to specify an HTML tag that will wrap the output. In this case, the word count will be wrapped in a paragraph tag (‘p’).

Using ‘editorskit’ shortcode with multiple attributes to display word count within a specific HTML tag and additional CSS class.

[editorskit display="wordcount" tag="p" class="custom-class" /]

This example demonstrates the use of multiple attributes. Along with ‘display’ and ‘tag’, the ‘class’ attribute is also used. This allows you to add a custom CSS class to the output. Here, the word count will be displayed within a paragraph tag with the CSS class ‘custom-class’.

PHP Function Code

In case you have difficulties debugging what causing issues with [editorskit] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'editorskit', array( $this, 'register_shortcode' ) );

Shortcode PHP function:

function register_shortcode( $atts, $content = '' ) {

		if ( ! isset( $atts['display'] ) ) {
			return $content;
		}
		$tag = 'div';

		if ( isset( $atts['tag'] ) ) {
			$tag = $atts['tag'];
		}

		$content = '<' . $tag . ' class="editorskit-shortcode">';

		switch ( $atts['display'] ) {
			case 'wordcount':
				$wordcount = $this->wordcount( $atts, $content );
				$content  .= $wordcount;

				if ( empty( $wordcount ) ) {
					return false;
				}

				break;

			default:
				// code...
				break;
		}

		$content .= '</' . $tag . '>';

		return $content;
	}

Code file location:

block-options/block-options/includes/class-editorskit-shortcodes.php

Conclusion

Now that you’ve learned how to embed the Gutenberg Block Editor Toolkit Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.