Gutenberg is an amazing WordPress built-in editor that allows users to create layouts using the drag-and-drop feature. Gutenberg editor replaces the WordPress WYSIWYG (What You See Is What You Get) editor. One of the most popular features of WordPress is the shortcode, and plugin developers have integrated a custom shortcode panel to generate and include the shortcode in the WSIWYG editor.
In this tutorial, I will describe the steps to generate and include shortcodes in the Gutenberg editor. For this example, I am using the BWL Knowledgebase Manager WordPress plugin shortcode editor.
Step 1
Go to any post or page in your WordPress admin panel.
Step 2
Click on the “+” icon in the top left corner.
![Click and Add Gutenberg Blocks Icon](https://bluewindlab.net/wp-content/uploads/2024/07/2_click_add_gutenberg_blocks_icon.png)
Step 3
Search for the classic block and click on it.
![Search For Classic Gutenberg Block](https://bluewindlab.net/wp-content/uploads/2024/07/3_search_for_classic_gutenberg_block.png)
Step 4
You will get a classic block layout like the following image, and click on the “BWL Knowledge Base Manager Shortcode Editor” icon.
![Click On The BWL Knowledge Base Manager Shortcode Editor Icon](https://bluewindlab.net/wp-content/uploads/2024/07/4_click_on_the_knowledge_base_shortcode_editor_icon.png)
Step 5
Now, add a shortcode according to your requirements and save the page.
![Add knoweldgebase shortcode](https://bluewindlab.net/wp-content/uploads/2024/07/5_add_shortcode.png)
I hope that helps.