Welcome everyone to another InMotion Hosting video, today we're going to be talking about using
the shortcode blocks in your Gutenberg editor. If you're not familiar with shortcodes, or you
may be needing to use a short code in your site, and you're wanting to see how to do it in the
new editor, it's really pretty simple, it works very similarly to how short codes worked in the
previous classic editor, basically a shortcode is a snippet of text that you
put into a post or a page and it expands some code to do some additional things and bring
in some outside elements, some dynamic elements more specifically, into a post or page
and then bring it to the front end as well, so basically we're going to use as an example here,
the Contact Form 7 plugin, which uses a shortcode to generate a contact form in a post or page,
and so we'll go ahead and open a post here that I have ready.
And for this example you'll notice I've already set up a classic editor block here, and I have
some basic paragraph text here, followed by the the shortcode, which is still within a regular
paragraph element, and let's actually open this up on the front end so you can see what it does.
So you see here there's my paragraph text, here's the contact form and that little shortcode we put
in expands this dynamic content, or contact form acceptance field here with a name, email subject,
and an optional message, so let's do this in the block editor this time, let's go back, and let's
actually delete this classic editor block here, and before I do that I better copy that shortcode.
All right we've got our shortcode copied so here pretty simply you can create a new
block and call it a shortcode and actually just put in your short code right there.
And if you go ahead and update the post, we'll refresh it,
you'll see when it loads that nothing has changed here except my paragraph text is gone,
but the shortcode expands just as we would expect it to in this in this block here,
and then there's an even easier way to do this you can actually just paste in the shortcode
without even creating the block, and it actually has an extra nice feature here in the contact form
7 plugin, where it'll detect that you're using a contact form 7 shortcode and you can actually
choose which contact form you want to use from a drop down menu, here I only have one contact
form currently so there's only one option but, that's another convenient way to do it,
you can actually just paste in your short code, and before we go I actually wanted to
to just show you really quick, that short codes actually work inline as well, so
I put some text in here in this paragraph and I put in my shortcode there when we update the post,
this actually still works as well so it's going to reload it, you see there's the paragraph text,
and it knows that that was a shortcode because it's inside the brackets, and it expands just as
we expected it to so there you go that's a few different ways to use shortcodes,
nothing to worry about they work pretty much similarly to the way that they did in the classic
editor, so you can enjoy putting in different short codes for different purposes in your site
so go ahead and if you have any questions or comments feel free to leave them below and give
the video a like and be sure to subscribe to other videos here at InMotion Hosting.