The WordPress Editors

WordPress Editors – Table of Contents

Overview – paints the big picture of the current State of the  WordPress Editors
The Basic Editor – establishes  the key editing functions supported by all WordPress editors
WP Editor – duplicates the  Basic Editor’s Visual Editor with minimal changes but extends the Text Editor’s features broadly
Classic Editor & Classic Add-on – also duplicates the Visual and Text Editor. The Classic Editor really can be thought of as a control routine for the dual availability of the Basic Editor and the new Gutenberg Editor.
Gutenberg  and PageBuilder Comparison – definitely a long read

Overview

This is a chronology of 7 increasingly important WordPress editing capabilities.WordPress editors have gone through 3 transitions. First, page layout has gone  from a 1-dimensional mode  inserting content anywhere vertically on a page. Next, a 2 dimensional PageBuilding mode allows placing content anywhere on a page often with prebuilt and customizable  components. the 3rd dimension calls for popup content to appear  [and then disappear] as layers over a page. In WordPress the starting point in editing is the Basic Editor:

1. Basic Editor – provides a Visual Editor that allows point & click text and media alignment, indenting and basic typography. It has a separate Text Editor  tab that reveals the HTML and CSS that  controls the proper display of the page;
2. WP Editor retains all of the Visual Editor while significantly enhancing the Text Editor;
3. Classic Editor & Classic Add-on controls the choice of using the basic editor or the Gutenberg Editor;
4. Advanced TinyMCE  Editor and WP EDIT both  significantly enhance the Basic Editor while retaining all of its features;
5. PageBuilders provide 2 dimensional page layout with horizontal and vertical placing & sizing  of  prebuilt yet also  customizable blocks/components on a web page. PageBuilders use both point and click as well as drag and drop operations plus the magic of responsive layouts. This has been the breakthrough WordPress editing capability by easing and speeding up both page  layout and designing/styling;
6. Template Editors are now used to extend  PageBuilding with either prebuilt or  user created customizable components/blocks as reusable templates – Gutenberg Editor, Beaver Themer, Elementor Templates, Thrive Themes, Bricks Builder, Oxygen Theme, etc;
7. Popup Editors  provide 3 dimensional layered components/blocks with sophisticated popup/layer  creation tools, triggering options, event-driven entry/exit rules, plus transparency and inter popup layer controls – Elementor Popups, Popup Builder, Popup Maker,  and others;

Two things are of note about these WordPress editors. First, each of the above WordPress Editor is not only currently functional but actively deployed on millions of websites today. For example, the Advanced TinyMCE Editor is being used to  write this post.

Second, as WordPress worldwide market share accelerated to 40% in the past 2-3 years, more vendors are offering their enhanced plugins  into the more lucrative marketplace. One can see this in  the number of PageBuilders/Theme Builders, Program Frameworks, and now Gutenberg Block vendors that are all vying for a portion of the WordPress Editor marketplace.

The Basic Editor

Starting with a newly minted WordPress install and disabling the aggressive default Gutenberg editor [now in the WordPress Core] produces a capable combo – a point and click Visual Editor plus a competent Text Editor. To this add a Media Files library that has accumulated a lot of features over the past few years so the emphasis is on the original  image adding features.
Here is the Visual Editor with its basic edit features on display:
Using the Visual Editor, the most often used commands are Bold and/or Italic, Bulleted or Numbered lists and surprisingly Paste Clipboard Copy As Text-only. This is to allow for entering direct clipboard copies from other online sources as plain text.

The Text Editor, click the upper right tab, displays the Visual Editor content in the HTML+CSS code used by WordPress.  As well the Text Editor command menu changes to fewer command buttons on the top line:
Yes, if you are HTML and/or CSS savvy, the Text Editor  allows users to add their own HTML and/or CSS. This styling flexibility can be remarkably useful.

The Media Library has changed dramatically over the past 5 years and will be the subject of separate review. Here is the most common use, adding and inserting images or video. Yes, the Media library can contain audio files, PDFs, Excel files, PowerPoint presentations, Word documents, etc. But handling images is shown here:

And here is how the inserted image set to the full image size appears in the Visual Editor:

This ability to upload images to the image library and then place and size them  on a page has been a winning feature for WordPress as witnessed by the tripling in the use of images on WordPress pages in the past 4 years.. However, no  attempt is being made to describe all the Media Library features that have been added to WordPress in this same 4 year period. A special review of these WordPress Media Library features will appear in thePhotoFinishes.com
The other secret charm buried in the Basic Editor is Keyboard Shortcuts revealed by the keyboard sequence Shift + Alt + h .

The Keyboard Shortcuts are crammed with editing options which do not appear in the Basic Editor’s header bar. Many Ctrl + letter shortcuts are taken directly from browser defaults.

New options include underline, strikethrough, justify, header 1 to header 6, enter or leave distraction-free writing mode, and add media.

In summary thee are the starting WordPress editor features. It is important to note these features  are carried forward largely intact  within all 7 WordPress Editors.
When to use. You probably are using this editor now as it appears as an essential component in all of the other editors, PageBuilders and even the Gutenberg editor.

WP Editor

This is a plugin that available to WordPress users for the past 4-6 years. As seen in the screenshot below WP Editor retains all the basic Editor layout and icon commands:
However, WP Editor does not add any features to the Visual Editor. But it changes the Text Editor, as you can see from the screenshots below, WP Editor adds some very useful code editing extensions:
The Basic Editor’s button commands work just like before, But the edit screen has changed to the chagrin of coding newbies. However, developers and coders will be delighted  with line numbering, active line color code, line wrapping, separate syntax color highlighting, full screen editing, text search (CTF+F, CMD+F), plus a choice of 8 themes for styling the text edit screen. In sum, WP Editor makes direct editing WordPress code in HTML, CSS, JavaScript and  PHP much more approachable.
When to use. If you need to do a lot of HTML and CSS coding as a WordPress developer, add the WP Edtor plugin to your site  and it will help immensely in the coding.

Classic Editor Classic Add-on

The Classic Editor is a Fix until 2022 which allows plugins that require the Classic Editor and its core hooks to operate within WordPress. for core  edition 5.0 and beyond. The Classic Editor and Addon supports not just the Basic Editor but also WP Editor, WP Edit, the Advanced TinyMCE Editor plus Gutenberg, the full range of  Page Builders and most other WordPress plugins. Here is the Classic Editor used  with WP-Editor:
Because of the risk associated with losing Classic Editor, the WordPress clone, ClassicPress has been developed.

When to use: If you want to turnoff the Gutenberg editor for a specific page or post, go to the Classic Editor settings and make the Classic editor the default. Alternatively use the Disable Gutenberg plugin to banish Gutenberg from all edits.

Advanced TinyMCE Editor + WP Edit

Advanced TinyMCE and WP Edit  appeared about 8-10 years ago and have  competed in offering new editing feature that could be added to the Basic Editor while retaining its look and features. Among the many common new features were  font choice and font size, table creation and editing, emoticons, background text color settings, anchors, printing, preview, and find & replace.

WP Edit has some unique features that hint at the upcoming PageBuilder revolution. The columns shortcode allows users to divide a row into separate container blocks. The latex Equations tools allows adding complex math equations into table or column elements as seen in screenshot below. The Pro version [$20US/2 users/year ]adds template Snidgets components, Qr-code support, Google and other custom font uploads, basic CSS stylesheet editor, and top menu bar with user customized contents.
The Advanced TinyMCE Editor has one unique editing feature – its settings can be added to the Gutenberg Editor’s Classic Paragraph block  so a custom edit toolbar will be used when the block is loaded. Here is a screenshot with all of the Advanced TinyMCE toolbar command  shown:
A small advantage to the Advanced Editor is that Andrew Ozz , creator of the TinyMCE, s on the WordPress Solutions Board.
When to use: Both editors add very useful features to the Basic Editor. So for quick posts I find myself using one of these Advanced Editors fairly often. In contrast, for pages and custom posts a PageBuilder is preferred

Gutenberg  and PageBuilder Comparison

From the earliest days of the Web, as  browsers and search engines rapidly evolved, so too did smart editor and Web page builders delivering “No Coding Required “ creation of pages and  complete websites. By 1998  there were  dozens  of tools using C/C++,Java, PHP, Perl, Python, Lua and other  Web Application Frameworks scrambling to become the premier Web Page Builder. The ideal was to speed website design and delivery by  generating automatically the webpage’s required HTML, CSS, XML, JavaScript, PHP, etc.

During this  early phase of web app building  one can see the transition from 1-dimensional, insert new content  somewhere vertically on the evolving page  to 2-dimensional placement of content components anywhere on the page.. But to make this  “No coding required” web page building  work well required  7 web technologies that had to mature :

1. 1992 -editors like BBEdit and Hotmetal use full screen, point and click operations in dual Visual Editor/Text Editor split tasking that is used in today’s editors.
2. 1995  to 1997 – WYSIWYG page layout has a history stretching back to 1974 and the Bravo Editor at Xerox PARC.  Microsoft Front Page, Apple GoLive, NetObjects Fusion,  Macromedia Dreamweaver and Adobe Page Mill use WYSIWYG screens with drag and drop operations to show the complete web page  change during  development.  Also CSS, JavaScript, XML and PHP are launched allowing for interactive client/server and local  client interactions with styling.
3. 1996 – Liquid Layout with x% rather than fixed widths and Table Grid Hacks launch widespread use of 2-dimensional horizontal component placements on a web page.
4. 2003  – Slide-in CSS, CSS Sprites and Popup ads hint at the impact of 3-dimensional layering  and pop-ins on web page design. WordPress is launched.
5. 2004 & 2010 –  Resolution  Dependent Layout and Responsive Design paper spell out how to merge fluid grids, flexible images, and media queries to create layouts that respond to the width & height of  the client browser.
6. 2005 to 2007 –  AJAX uses  JavaScript to retrieve data from a server and display it on a page without a page refresh while HTML, CSS, & JavaScript file  minification and combination improve page response time. Clear  plugins from loading where not used on a post/page.
7. 2010 – Customizable Web Templates can be inserted as a complete page or section of a page.

See the timeline of these Web technologies here.

The PageBuilder Explosion

In 2010  the software technologies for WordPress “No Coding Required ” PageBuilders burst on the WordPress market with 3 pioneering  tools  from Headway Themes, SiteOrigin,Builder, and Visual Composer. These first PageBuilders provided drag and drop page layout and placementf rom a selection of  wireframe templates/components displayed as wirframes with point and click  styling and customization of  each component..  Here is some screenshots of the new PageBuilders:

Headway Themes delivers both user-chosen and/or template determined placement of all page components including headers, footers widgets – a precursor of FSE-Full Site Editing in 2010:!
The Headway Theme has been cloned and updated with many new components and style by Padma Unlimited.

Site Origins uses the wireframe model today along with the choice of a WYSIWYG Live Edit view.

SiteOrigin for a long time made its Page Builder free of charge. This strategy was followed by Elementor which made a substantial portion of Elementor free to users. Now both SiteOrigin and Elementor have major free versions and premium Pro versions.

As  PageBuilder downloads from the WordPress grew along with positive reviews about the tools, a whole new crop of PageBuilders began to appear in 2014 and continue to this  day. Here is a table of the major  tools:

⊗1

⊗2

⊗3

⊗4

WYSIWYG display while editing

WYSIWYG is about immediately seeing accurately what you will get while editing. It makes for easier and faster edits because designers don’t have to stop and click preview for each important edit change. Here is a sample of a WYSIWYG edit when using the free Beaver Builder Lite plugin:
There are 2 aspects to WYSIWYG – first, a faithful display of the edited component relative to other components is shown and second, the component is shown accurately in context of the full page. Most Gutenberg blocks fail both tests.

⊗5

⊗6

⊗7

⊗8

⊗9

Builder Conclusions or Why Gutenberg Editor is Disliked

Peering over the table of Builder Tools it is not hard to see that Guteberg Builder is in a pivotal position. As part of the WordPress Core it soon will be loaded on almost every WordPress website – literally millions. Also after a slow start, the number of  3rd party Gutenberg add-ons has reached the hundreds. And now these Gutenberg  are now immediately available in the blocks list directory listing active in every Gutenberg Editor session. And the question is when will the Classic Editor and the Disable Gutenberg plugin be disabled?

However, when Gutenberg Editor is measured against key UI Builder features, it still runs a distinct second . This
night help explain how the Gutenberg editor after 5 years still only gets a 2.1 rating in the WordPress plugin Registry:

This is after 3,440 user reviews. Here is our conjecture as to why:

• WordPress has become coercive. If you update to WordPress 5.7 or later you get Gutenberg as the default Editor. Unless your site has the Classic Editor or Disable Gutenberg plugin, you must come up to speed in Gutenberg quickly.
• Coming up to speed in Gutenberg was very difficult in the first 3 years because of missing and changing features.
• Coming up to speed in Gutenberg currently is still difficult because Gutenberg  tool names and features are still changing rapidly.
• With so many Gutenberg blocks and tools to choose from it easy to get lost trying to find the right edit tool. Also the lack of a comprehensive Gutenberg Users Guide from WordPress means searching for edit answers among. a variety of 3rd party resources.
• Gutenberg Editors lagging performance in Point and Click Styling and WYSIWYG editor display adds significant drawback to ease of use and speed of editing.

In sum Gutenberg has reached a crossroads. ts shortcomings and coercive approach to what heretofore has been an Open software. protecting their future, look what Beaver Builder, Bricks, Elementor, Oxygen, WP Manage and other vendors are investing in around the WordPress landscape. It is case of  survival strategies now.