In this post I’ll talk about the newest WordPress version (5, with the latest patch version 5.0.3. at the moment this article is written, January 2019.) and its default editor Gutenberg. Trying to put things into perspective and place all the info in one place for future reference. In the spirit of documenting and thinking out loud. So take it for what it is – all the additions and corrections are welcome. Planning to update this original post version as the time passes. Will write some basic info, history and explain what Gutenberg is, but the emphasis is on what it represents and where it is all going.
Contents:
- WordPress – introduction
- WordPress – “advanced use”
2.1. WordPress Themes
2.2. Plugins
2.3. Elementor and other drag and drop page builders - Gutenberg
3.1. History – previous “classic” editor
3.2. New editor: “Gutenberg” – first impressions
3.3. Basic attributes of Gutenberg – blocks
3.4. “More powerful” editor
3.5. Architecture changes
3.6. Flaws?
3.7. Do I like it? - Updates and patches
4.1. WordPress 5.1 version
4.2. WordPress 5.2 version
4.3. WordPress 5.3 version
4.4. WordPress 5.4. version
4.5. WordPress 5.5. version
1. WordPress – introduction
When, in now distant year 2015, I had decided to share all the info about bicycles on the Internet, I realized that it’s been over two decades that I’m “out of the game”. Many things have changed since the dial-up Internet and static .html websites (“Grandma, do you remember Dreamweaver?”).
I had to find a tool that would allow me to post all my knowledge on-line with relative ease, so that it doesn’t look too ugly and, if possible, for it to be easy to navigate on mobile phones as well (and tablets, of course). After some research, the list was down to… drum-roll… Joomla and WordPress.
Why have I chosen WordPress? Joomla seemed to have had a steeper learning curve – even though, at the time, I was certain that it offered a lot more customization in terms of design and functioning. Website look wasn’t too important to me, as long as it looked nice, readable and easy to navigate – which is what WordPress offered “out of the box” (without any coding, or “tweaking”). While starting with WordPress took no learning at all – it was easy and intuitive to, I think, anyone who’s ever used a text processor (like Ms Word for example).
2. WordPress – “advanced use”
In the introduction I talked about WordPress’s simplicity. What happens when you want to do more than just blog? Make a website with a company contact page and info. Perhaps a nicely designed one, with a “fancy” menu etc? With previous WordPress versions and, to a large degree, with the current (5.0.3.), that’s a bit problematic.
Of course, WordPress is a respectable CMS platform today so a way to overcome design limitations does exist. A few ways as well. More on that in the following chapters.
2.1. WordPress Themes
A theme is a set of structured PHP, HTML and CSS, written according to WordPress standards, that define the look and functionality of a WordPress website. In a less technical language, a theme is the base look of a website. Picture 1 tells more than words.
Picture 1
Real-world analogue model to a WordPress theme would be a car make/model. Most cars can have different colour paint, front seats can be moved fore-aft, tilted, etc, but when you buy a car, you’re stuck with its basic design – whether it’s a small car, a big one, a sports car, or a pickup truck – there’s a limited number of alterations you can make (that are functionally and economically sound, after a point it makes more sense to buy a different kind of car). It’s similar with themes – if you want a certain design/look, find a most matching theme to start with.
Themes can be free, or paid for. The paid ones often offer more customization at the click of a button. However, all the themes are more or less confined to their basic look/design.
Apart from that, website look can be changed with some coding. WordPress is open source, so each theme and WordPress itself can be altered (if a user knows what they are doing). For themes this is most easily done using a “child theme”. Details on this are beyond the scope of this post. Log in / log out and icons with links to bikegremlin Instagram and YouTube channel at the top of this page are a result of a little PHP code in the child theme I’ve made, since the free version of the theme I use doesn’t allow to place these with a click of a mouse.
2.2. Plugins
Other option for customization (that can complement the previous one) is the use of plugins. Analogue example from the real world: if a theme is like a car model, a plugin is like additional equipment. For example placing an alarm in a car is like installing a security plugin for WordPress. Except that in WordPress this is done by one click of a button (with very little setup) and many good plugins are free. 🙂
Picture 2
Picture 2 above shows a list of four plugins, with short descriptions of the design and functionality additions they provide.
2.3. Elementor and other drag and drop page builders
All the previously explained methods are limited with base design of the chosen theme. Page builders allow practically complete freedom in website design. Using drag and drop method – with very little coding (especially with the paid versions).
“Automobile” analogy used in previous examples would put this as: designing your own car as you like. With all the advantages (complete freedom to design the look, type, layout, function) and disadvantages that I’ll mention in this chapter.
They are installed like any other plugin, but are in fact “special plugins” – to call them that way. Two most famous such tools are Elementor and Beaver Builder.
Picture 3
Main disadvantage of these builders is you’re stuck with them. If support for one is ceased, or if you choose to uninstall these “special plugins”, your website content must be build from scratch practically.
Another problem is SEO – since the data made using these builders isn’t structured (see Schema.org structured data markup), nor easy for search engines to discern.
Who wants to know more, an article that explains in more detail the advantages and disadvantages of page builders.
3. Gutenberg
Named after Johannes Gutenberg, the man who introduced printing press in Europe. How to describe Gutenberg briefly and accurately? To say “it’s a new WordPress editor” is correct, but it doesn’t paint the whole picture so to say. Gutenberg is a completely new, you could say “radically different” approach to WordPress methodology and philosophy. I’ll explain what this all means, how it differs and where it is (and where it should/could be) going…
3.1. History – previous “classic” editor
Ever since its first launch and the 1.0 version, text/post/page editor has looked more-less the same: a simple blank page.
Picture 4
All the edits of appearance, links etc. had to be done either using plugins, or by editing page/post “source html” (“texd mode editor”, instead of the “visual” one). Writing a text, adding occasional picture here and there (which was the original use of WordPress as a blogging platform) is still technically done fastest using this classic editor. Again, for design changes, classic editor completely relied on themes, child themes, plugins and/or page builders.
3.2. New editor: “Gutenberg” – first impressions
Picture 5
Pictures 4 and 5 show the old and the new editor. I first tried Gutenberg as a plugin in WordPress version 4.9.8. Didn’t like it – it seemed somehow sluggish, with too much options and needlessly more complex. In spite of that, I had realised that it’s the way WordPress is going, whether I liked it or not. So, once WordPress version 5.0. came out, in December of 2018, I started experimenting and testing on a test website. I was waiting for a vast number of problems and bugs to be fixed before updating BikeGremlin to the new version. During that time I tried to get informed and up to date with the new editor. What did I learn so far?
3.3 Basic attributes of Gutenberg – blocks
Basic characteristic of Gutenberg are blocks. Each heading, paragraph, image, or gallery placeholder is placed using an appropriate block. Within that block, many characteristics can be defined and described. For example: code that allows linking a certain (sub)heading had to be entered using text html editor before, while now it is enough to select the desired heading and fill in the “HTML Anchor” field with the desired anchor text.
Blocks provide lots of flexibility when making content. They can be saved, reused, copied etc. Block to block navigation is possible. I’ll get back to this point later. Now I’ll add that options for editing each block look and function are rich and I don’t see any reason for not expanding them further, also adding new block types and groups.
Before (using classic editor) You were left to choose heading size and that was it. Now each heading and paragraph blocks have a lot more attribute options. Same goes for most other block types – some brand new, that had to be implemented using separate plugins before. From simpler things, to the more complex (tables for example, used in the Unior modular tools post – now can be entered using a block, not by editing HTML). If you want more details – see an article that explains all the Gutenberg blocks in great detail.
3.4. “More powerful” editor
New Gutenberg editor is starting to take the functionality of many plugins, even page builders. This is a step towards WordPress becoming an “all in one” CMS. Or at least a more complete one, relying less on various plugins and the likes of Elementor and other page builders.
It is said that a goal without a plan is just a wish. WordPress started with Gutenberg blocks as a first of several planned change stages towards a more complete CMS. The planned stages are:
- Blocks – since WordPress version 5.0.
- Block editor improvement and plugin and PHP error protection – version 5.1. planned for the end of February 2019.
- Next phase is making page and post templates.
- Finally, improving all the tools in order to provide functionality of current page builders, effectively replacing them all (or at least offering a very good alternative).
All the contents are nicely structured – everything is easy to find. It is also easy to alter most things that the editor provides to change – better than using (many) plugins.
Picture 6
3.5. Architecture changes
Article that explains what’s changed in WordPress architecture since version 5 (with explanations of what API and REST API are). In my opinion the changes are relatively radical. JavaScript is introduced as a custom block building tool – unlike previous relying (solely) on PHP. This enables “making websites” as SPA (Single Page Application) – so that most user interface is processed on the visitor’s browser, not on the host server using PHP applications.
Talking about PHP, support for the version 5.2. will cease by the first half of 2019 and the 5.6. will become the minimum supported one. Turning to 7 by the end of 2019. Hosts and developers can look forward to using a better, more stable PHP, although I’m sure some will curse the decision.
Using shortcodes to edit looks, or add functionality will gradually be abandoned. Divi themes and page builders rely heavily on shortcodes – which will worry their users.
Many plugins aren’t working perfectly with the new WordPress (some aren’t working at all), but that is being fixed from week to week.
Development was moved from WordPress Trac to GitHub.
3.6. Flaws?
In my opinion, if people smarter than me are to be trusted with their article on structured data, an opportunity to use structured editor format and translate it into what’s presented to visitors (and search engines) has been missed. Block editor format for making content seems perfect for implementing Schema.org content markup. However, page code generated by WordPress and presented to visitors does not resemble block design at all.
3.7. Do I like it?
Current version 5.0.3. For the first time ever, WordPress allows the cursor within the editor to remain where it was after making a save of the written content (that is it doesn’t go back to the beginning of the text).
Some have criticised Gutenberg block structure as complicated for writing long posts. It is true that adding a new block and defining everything to one’s liking does take a second longer, but after that it’s much easier to navigate, edit and continue writing. Much better “overview” of the content.
Flaws:
- Problem that hasn’t been solved with the current version (5.0.3.) is inserting new images into the library using editor. If images are imported that way, it is not possible to add all the attributes. In order to do so images must be edited from the media library, or “manually” inserted in the media library in the first place, before adding them to a post/page. This does take more time/hassle.
- Another problem with images is gallery image description. The description is now placed inside the picture frame, not beneath it. So when viewed on mobile phone, image description text covers over one half of the picture.
- It is not possible to make anchor links to paragraphs – only to (sub)headings. For paragraphs you still have to edit the html code. It’s easier to do and navigate, since you’re working withing the block, but I’d like to see it enabled from the Gutenberg block interface.
- Tables, at least with the theme I’m using (Generatepress) aren’t responsive (don’t look nice on mobile phones).
- Editing tables is painfully slow. A bit less painful since version 5.4.
Editor still works a bit slower than I’d like. A lot faster than in the first versions, but still not satisfactory.Fixed in version 5.4.Autosave runs every 10 seconds – yes, every 10 seconds… and again – and again. 🙂 It can be very annoying. When autosave is run and you’re making a list of tags for example, they might not be saved, so you must enter them again. With the tag list taking a lag to load and display the (currently) saved ones. You need to “cach” a “window” between two 10-second autosaves to save changes, or exit page you’re editing without being given a warning that not all the changes are saved. Or, when editing a page, you are very likely to be given a warning that “there is a newer autosave page version”.Update: fixed in version 5.2.2- Bold and italic text selection does not always go as planned and when showing it on webpages the words get divided into second raw mid-word. Exa
- mple of what it looks like.
- No way to customise ordered lists, like the “Contents” list at the beginning of this post – I have to do that by editing “ordered list” block in HTML edit mode. I usually use Online HTML Editor.
Copy/paste of plain text always adds an extra line break and one space before and after the pasted text. Not practical and can be annoying.Fixed in version 5.2.3.
After testing and confirming that new version 5.0.3. works fine with all the plugins I use (some needed fixing) on a test site, BikeGremlin started with Gutenberg as of 12. Januaray 2019. So far so good. 🙂
4. Updates and patches
Further updates and comments related to them will be written in the sub-headings below:
4.1. WordPress 5.1 version
February 21st 2019, WordPress 5.1 is released. What’s changed?
Lots of options to aid developers. And another step towards only PHP 7.0 and newer.
What about “ordinary” website authors? Of all the problems listed in chapter 3.7, only speed has been improved. It’s still not lightning fast (old editor was faster), but it’s much better, especially when working with tables. The rest of the problems are still here, including the annoying autosave.
4.2. WordPress 5.2 version
At the moment of writing this update, I’m already using WordPress version 5.2.2. What’s new?
- Option “Site Health”, within the “Tools” menu gives information of (potential) installation and website problems. It does various performance and security checks. Do check it out. It’s basic, rudimentary, but it is useful.
- PHP error protection. If WordPress detects a PHP problem, it will block that code execution and allow you to log into back-end and fix the problem.
- Abandoning support for PHP versions older than 5.6 leads to better performance. Ancient themes and plugins might see some compatibility problems.
- Annoying auto-save has apparently been fixed.
Version 5.2.3 finally fixes the funny behaviour of copy/paste option.
4.3. WordPress 5.3 version
At the time of writing this, I’m already running version 5.3.2. What’s new?
Basically, 5.3 is one more step towards making WordPress a proper page builder. With some new blocks, new options in old blocks, option to group several different blocks, set fixed column widths…
Backend speed, especially when saving, or updating posts/pages, is drastically improved. It finally works properly. Except the tables – they are still frustratingly sluggish.
Almost forgot: now, during the log-in, it often asks you to confirm whether the email you had entered is still valid.
Compatibility with PHP 7.4 is also mentioned. I wouldn’t rush with that PHP version, since it is still far from tried, tested and stable. Though I would definitely recommend switching to PHP 7.3 version, if you haven’t already. Themes and plugins that still don’t support PHP 7.3 are probably not very well written and it would be good to look for a replacement.
Nice and detailed overview of the changes in WordPress 5.3 is given on the website of Kinsta hosting provider.
4.4. WordPress 5.4 version
The greatest improvement is that converting old posts (classic) into Gutenberg blocks. It finally works properly. Before this version, there was a problem with photos added as a gallery – that would “break” when converting to Gutenberg blocks, so you had to create galleries from scratch, manually. Which is a great nuisance, especially if you have many of posts (and galleries). By galleries I mean as little as two photos placed side by side.
Apart from that, I haven’t noticed any radical changes – which is fine. Backend is further polished – it is my personal impression that it works even faster than 5.3 version
Some new blocks have been introduced (social network icons for example). For all the details it is best to see the official website announcement for WordPress version 5.4.
4.5. WordPress 5.5 version
I either hadn’t tested enough, or the problem with galleries, when converting classic blocks to Gutenberg ones, has returned?!
For the good stuff – anchor links can now be added for any paragraph, or image, not just for the headings. Easily, using the WordPress side menu. Though they haven’t changed the description text, which still says:
“Enter a word or two — without spaces — to make a unique web address just for this heading, called an “anchor.” Then, you’ll be able to link directly to this section of your page. Learn more about anchors (WP.org link)”
Another feature added is the option to enable automated updates for each plugin, and/or theme, by clicking “Enable auto-update” in plugin, or theme listing. I would not recommend enabling this for “live” (production) websites. Make a staging test environment (cloning your website to a subdomain, on the same server if possible), test any updates there first, before updating the production.