If you added content to your website before it was upgraded to WordPress 5.0, you now have the opportunity to edit your pages using the new block editor! This is great news if you were frustrated by the use of shortcodes for things like buttons, columns and icons. The block editor provides a much more visual and drag-and-drop experience with a ton of flexibility.
When your site was upgraded, the back end (or administrative side of your site) moved all of your page content into a single section called a Classic block. This helped ensure that everything continued to display normally for visitors to your site on the front end.
To get all of the benefits of using blocks, you’ll now need to convert the single Classic block into multiple blocks for each type of content on your page. For example, text should be in a Paragraph block, photos will be in an Image block, and so on.
- Shortcodes are small snippets of code that serve as simple shortcuts for adding objects or design features (like columns) to a page. Going forward, you’ll use blocks instead.
- You can add content like text and photos to your page using blocks. As the name implies, blocks stack on top of each other to build a page. Blocks can also be used to format text, add columns, create a button, embed a video and more!
- The Classic block is like a mini version of the original WordPress editor. All of the settings appear at the top of the block and you can edit content much like you would have in the past in a more manual way, including using HTML. Shortcodes still work within this block.
Switch Content to Blocks
WordPress has made it pretty easy to convert content that’s in a Classic block. This process generally works seamlessly for pages that are primarily text-based. Before you try this process on your site, be sure to read the rest of this article to determine the best approach for a page.
- Click the top of the Classic block to see your settings.
- Select the three-dot icon in the top right to access additional options.
- Choose “Convert to Blocks”.
You should now see that your content has been divided up into multiple blocks depending on the type of content. Even individual paragraphs will be in their own blocks.
TIP: If you ever convert a page to blocks and want to immediately undo it, simply use the Undo option at the top left of your page. Your content will be put back into the Classic block.
Convert Shortcodes Into Blocks
Using the “Convert to Blocks” option is quick and easy, but it isn’t fool-proof. Sometimes content isn’t matched up perfectly to the correct block (like turning a button shortcode into a Button block). If your existing page content uses columns, buttons, icons, tabs or accordions, then converting to blocks will take a few extra steps.
There are two approaches to dealing with shortcodes in your content, though we strongly recommend the first one to improve the longevity of your site.
Manually rebuild the content using blocks
With this option, you’ll start using non-Classic blocks for content that was previously formatted using shortcodes. We highly suggest taking this route so that you can take full advantage of all that blocks have to offer.
- Before you convert to blocks, identify the areas of the page using shortcodes that you’ll need to rebuild using blocks, such as icons.
- Convert to blocks as described above.
- Navigate to the block that contains the shortcode and needs to be rebuilt.
- Just above the Shortcode block, add the content using standard blocks instead. For example, you’ll replace a shortcode for a button with the Button block. Or if it was for an icon, you’ll use the Icon block.
- Be sure to preview your work occasionally to verify it looks correct.
- Once you’ve successfully replicated the content with blocks, delete the Shortcode block.
- Repeat this process as necessary to fully transition your page.
Example 1: Converting Button Shortcode to a Button Block
You might find that most text and image blocks are converted correctly while a section with a shortcode is added into a Shortcode block. Here’s what happens with a button.
While it might look OK on the front end, it will be confusing to edit the button going forward. Here’s an example of transitioning to the Button block instead of using the button shortcode.
Example 2: Converting Icon Shortcode to an Icon Block
Similar to the first example, shortcodes for icons don’t translate automatically into the Icon block. You might find that the icon shortcode is incorrectly put into a Paragraph or Heading block, as shown below.
If this happens, follow the same instructions for manually rebuilding your content. Luckily, the Icon block is a much easier and more visual way to add icons compared to shortcodes. You can also access a huge library of options. As you convert your content, you could decide to use a new icon you like better.
Here’s an example of transitioning to the Icon block instead of using the icon shortcode.
Types of blocks to use
Now’s a great time to think about the best way to organize your content and make changes to take advantage of the new editor. Don’t forget that there are many different types of blocks to use as you reformat your page!
Preserve shortcodes in a new Classic block
With this option, you’ll end up keeping all of your shortcodes in a Classic block while the rest of your page uses blocks as normal.
For example, the following page uses a Classic block to keep the existing column shortcodes. But instead of continuing to use shortcodes for tabbed content below it, which is often hard to edit, it’s been reformatted using the Tab block.
Use the Classic Editor
- Go ahead and convert to blocks as outlined above.
- Add a new Classic block just above the Shortcode block that’s full of code.
- Copy and paste the content of the Shortcode block into the Classic block.
- Delete the Shortcode block.
- Preview and save the change.
Still Have Questions?
Reach out to us within your Dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.