TinyMCE Advanced in WP 5.x and Gutenberg

The TinyMCE Advanced plugin expands the capabilities of the WordPress text editor.

It has been updated to work on WordPress 5.x no matter what editor you are using (Blocks or Classic Editor).

See how to configure TinyMCE Advanced to max out on all that it offers.

UPDATED 1/13/19 for TinyMCE Advanced version 5.0.0 new interface

I’ve enjoyed using it for years and am delighted that it can now either:

• take the place of the Classic Editor plugin, for those who do not wish to use Gutenberg at this time,
• or expand and enhance creating content inside a Gutenberg block.

The 2 main reasons I will continue to use TinyMCE Advanced with Gutenberg:

• It has an option to write well formatted code for a browser to read. In my opinion, this should have always been in WordPress core. After all, that is THE primary function of any site editor.
• It has an option for a far superior link dialogue box that allows you to add nofollow, create anchor (jump) links, and select to open in a new window/tab or not.

FYI: TinyMCE is a brand of text editor. Its code was added to the WordPress core over a decade ago. TinyMCE Advanced is the name of a plugin that extends the functionality of the TinyMCE editor. So, be sure you use the proper brand names when you reference each.

Quick Links to post sections

• Using TinyMCE Advanced or Classic Editor Plugins
• Select Your Editor in TinyMCE Advanced
• Settings for Gutenberg Block Editor
• Settings for Classic Editor
• Options
• Advanced Options
• Administration
• Arrange Tools in TinyMCE Advanced

Here’s a quick video update from 1/13/19 to help you make sense of the recent changes

Using TinyMCE Advanced or Classic Editor Plugins

You don’t need to use both of these plugins.

TinyMCE Advanced can take the place of the Classic Editor plugin.

Following are quick tips for the best order for installing/uninstalling editor plugins.

If you don’t plan to use Gutenberg:

• If you have both plugins installed and active – delete the Classic editor plugin and do the settings below for using TinyMCE Advanced as its replacement.
• If you only have the Classic Editor plugin active – install and activate TinyMCE Advanced. Then delete the Classic editor plugin and do the settings below for using TinyMCE Advanced as its replacement.
• NOTE: You will want to restore to defaults on TinyMCE Advanced before configuring it with the settings below, as it may have tried to guess at best settings when you installed the Classic Editor plugin. You’ll see how to do this in a moment.

If you plan to use the Gutenberg block editor

• Assuming you did not install the Classic Editor, nor TinyMCE Advanced prior, then install and activate TinyMCE Advanced and follow the steps below to set it up.

Where to find the Settings

You can get to the plugin settings in 2 ways:

• Go to Settings > TinyMCE Advanced.
• Go to Plugins. Locate TinyMCE Advanced, and click Settings in its description.

Select Your Editor

There are two tabs at the top for which editor you want to use.

You will need to configure both tabs, no matter which one you ultimately use.

If you don’t plan to use Gutenberg:

• On the Block Editor (Gutenberg) tab, scroll down to the Toolbars for the Classic Paragraph and Classic Blocks section and uncheck the box for Enable the editor menu.
• Click on the Classic Editor tab at the top and skip down to the Settings for the Classic Editor (TinyMCE) in this tutorial.

If you do plan to use Gutenberg – then read the next section on settings for the Block Editor.

Settings for the Block Editor (Gutenberg)

This can be a little confusing at first, as there are 3 places where the default Gutenberg Block tools can display, depending on your settings.

You can elect to have Block tools pop up for each block or have them only display in the top left of the editor.

Additional tools will display in the sidebar.

If you choose to have your tool pop up on each block, then the following settings in TinyMCE Advanced will apply for what is displayed there, and in the sidebar.

If you click the ? at the end of the Main toolbar line, you will see the tools you can change/rearrange, and those you can’t.

The next section allows you to enable the text and background color options.

If set to Yes, these will be available in the right sidebar under Block.

The TinyMCE Advanced plugin provides an additional Classic Paragraph Block.

It allows you to use the full array of TinyMCE Advanced tools and behaves just like a standard Classic Editor.

In other words, if you used TinyMCE Advanced prior to Gutenberg, this will be exactly what you are used to.

Clarity on the 2 classic block types:

• The Classic Paragraph Block is the new block provided by TinyMCE Advanced.
• The Classic Block is a default block provided by WordPress that all of your previous post/page content will be placed in when you switch to the Gutenberg editor.

All of the TinyMCE Advanced tools will be available in both of these blocks.

Turn Off the Classic Editor

Click the classic Editor (TinyMCE) tab at the top.

In Toolbars for the Classic Editor (TinyMCE) section at the top, uncheck the box for Enable the editor menu.

Now read the following sections in this tutorial:

• Options
• Advanced Options
• Use TinyMCE Advanced with Gutenberg Blocks
• Arrange Tools in TinyMCE Advanced

Settings for the Classic Editor (TinyMCE)

If you don’t want to use Gutenberg follow these settings to use TinyMCE Advanced instead of the Classic Editor plugin.

In the Block Editor (Gutenberg) tab, scroll down to the Toolbars for the Classic Paragraph and Classic blocks section.

Check the box off for Enable the editor menu.

In the Classic Editor (TinyMCE) tab, in the Toolbars for the Classic Editor (TinyMCE) checkbox is set to Enable.

Now read the following sections in this tutorial:

• Options
• Advanced Options
• Use TinyMCE Advanced with Gutenberg Blocks
• Arrange Tools in TinyMCE Advanced

Options

Append all buttons to the top tollbar in the classic and Classic Paragraph blocks

• Turned on by default.
• Only affects buttons added by 3^rd party plugins. They will be appended to the end of the first row of tools, instead of creating secondary toolbars.
• Leave this checked so that you’ll see those buttons.

List Style Options

• Turned on by default.
• Offers more style options for unordered (bullet point) and ordered (numbered) lists. If you use the standard ones that are styled by your theme, you can uncheck this.

Context menu

• Turned off by default.
• Replaces the browser context (right-click) menu.

Alternative link dialog

• Turned off by default.
  • I love this link dialog box and suggest turning it on!!!
• Provides a more robust set of link options

• Rel options includes nofollow
• Target options include new window

Font Sizes

• Turned off by default.
• I would ­ allowing your theme styles to control the fonts, and leave this off.

Advanced Options

Hybrid Block Editor Mode

• Turned on by default.
• Used by Gutenberg blocks to give a richer editor experience by making TinyMCE Advanced tools more prominent.

Add Classic Paragraph Block

• Turned on by default.
• Provides a new block type that works perfectly with TinyMCE Advanced, compared to using the standard Paragraph block that ships with Gutenberg.

Replace the Block Editor with the Classic Editor

• Turned off by default.
• Provides the Classic Editor without the use of a plugin. Used instead of Gutenberg blocks

Here’s how it TinyMCE Advanced Classic Paragraph Block Appears in the Gutenberg Editor

With these settings, your paragraph block should appear as shown below:

When you click in it, you’ll see the TinyMCE Advanced toolbar, similar to the one shown below, but with the tools as you arranged them.

The icon at the end of the tool row (little camera and music notes) is the Add Media tool. It will appear by default and there is no way to arrange it to any other position, as it is not a selection choice in the TinyMCE Advanced settings.

It places the media in the Classic Paragraph block.

So, if you want to use the regular Gutenberg Image block with it’s extra features instead, do not add media this way when uploading images.

The two icons in the top right are for changing the block type and More Options, just like other Gutenberg blocks have.

You may not see these until you click in the block.

Keep paragraph tags setting

• Turned off by default.
• Definitely turn this on (check). This writes well-formatted HTML code and helps ensure consistency across all browsers. It also allows you to embed iframes and such better too.
• FYI: Some recipe plugins that use shortcode might have an issue with this setting, as their shortcode cannot function inside a <p> paragraph tag.

Create CSS classes menu

• Turned off by default.
• Whether this setting works or not is determined by your theme. If it has the capacity to load it’s style sheet into the editor, then what you see while editing is exactly how it will appear on your page/post as the visitor sees it. Most Genesis themes do not have this extra stylesheet, yet.

Enable pasting of image source

• Turned off by default.
• Only supported by Firefox and Safari, not Chrome. Would allow direct pasting of an image into the editor without first having to save the file.
• Not recommended for normal images, only super small ones, like icons.
• The images are not stored in the Media Library.

Administration

Export / Import Settings buttons – perhaps from other editors?

Enable editor enhancements for:

• The main editor
• Other editors in wp-admin – like Text Widgets and such
• Editors on the front end of the site

All of these are on by default and you should leave them on so that the TinyMCE Advanced editor is available everywhere.

Restore Default Settings

• Allows you to get a fresh start on the settings. This is important if you already had the plugin installed and active.

Save Changes

• There is a button in the top right and bottom right to save your plugin settings. You must save settings to see those changes in your editor (when you create a page/post).

Optional Settings for Customizing TinyMCE Advanced with Gutenberg Blocks

There are two Advanced Options settings that are on by default:

• Hybrid Block Editor Mode
• Add Classic Paragraph Block

Hybrid Block Editor – I turned this off but could not see a difference in the way TinyMCE Advanced worked with the block. It says it provides improvements and fixes, so I would leave it on as it may affect non-text elements you add in the Classic Paragraph block instead of using default Gutenberg blocks for things like shortcodes, iframes, etc.

Add Classic Paragraph Block – when I turned this off, below is what I saw in place of the Classic Paragraph block.

I was using the TwentyNineteen theme, which has full Gutenberg support. So, this option must be checked on if you want to use TinyMCE Advanced with Gutenberg.

When using the Classic Paragraph Block – when you hit Enter, a new paragraph block is not created. It’s basically a block that acts like the Classic Editor and you can add anything you want to it, just like you do now.

Also, when you create a new block, it will be the standard Gutenberg paragraph block, you’ll need to type in /classic to select the Classic Paragraph Block with the TinyMCE Advanced tools.

Arrange Tools in TinyMCE Advanced

Since the Gutenberg toolbar only displays one row well, below I’ve included a quick and dirty GIF on how to arrange the tools, and the ones I would use most often.

(This works the same if you are using the classic editor too.)

Just click and drag them from the toolbar to the Unused Tools area.

Some of the tools that I’m grabbing for inclusion are a bit off screen, but you get the idea.

Wrap up

The developer of the TinyMCE Advanced plugin, Andrew Ozz, has been a lead WordPress core developer for, well, as long as I can remember. If there are any changes to TinyMCE in WP, you can rest assured that he is in the middle of it and ensuring that it all works well for us.

I’ve always believed that his plugin should have been the default editor all these years.

I am greatful to Andrew for his tireless help and superior plugin that helps us create content with ease, no matter what editor we are using.

I hope you enjoy it as much as I do!!!