There are times when I wonder how WordPress, in either self-hosted or .com versions, got to run over one-third of the world’s websites.
It is, I admit, great if you just want a blog or a single page site. You can even let wordpress.com do the heavy lifting for you if you don’t have your own web space. Pick a standard, popular template and you’re away. But if you want to do anything more in-depth, anything more customised or personalised… well, you’re in for a lot of work.
And that’s even before we get to the Gutenberg block editor changes of the last couple of years.
Eyes front
One issue for me has been the WordPress habit of introducing new things but then leaving it to other people to document or exploit. Or, sometimes forgetting about them altogether.
Static (undated, uncategorised, untagged) Pages were introduced early on, but there was no easy way to re-order them. There used to be a notice on the Pages edit screen saying that they software authors knew this was a bit clunky but that they were working on it. Some time around 2009 or 2010 the notice was removed. The clunkiness remains, unless you use a plugin or limit the number of Pages you create.
Images and other uploads… well, you can upload them into year and month subfolders but you can’t search using those subfolders. And they are uploaded to the subfolder of the day you’re doing the upload, which might not be the same month or year of the post it’s attached to. And even though attachments are treated the same as other content with title, excerpt and content fields, there’s no way to use them and create sortable, searchable attachments by default. You need a plugin.
Remember those two issues next time someone describes WordPress as a “content management system”.
In 2011 we got Post Formats, an in-built custom taxonomy with a standard set of descriptors for content types: video, image, gallery, that sort of thing. There was going to be better interface… but Post Formats have been left to wither on the vine.
If you want to output valid HTML5 or remove the superfluous “text/css” and “text/javascript” attributes you have to do that by amending your functions.php file. Code that passes the various w3.org tests isn’t delivered as standard (except tables – see later).
Always looking to the new things and not properly delivering the existing ones. Ho hum.
Brave New World
And now there’s the block editor.
I’m wholly agnostic about the block editor -v- classic editor argument. This post, for example, was mostly written in Word, then copied and pasted in. But all of those blocks need formatting in your template and, well, there’s no help from WordPress on that score.
My old template was fine for the old way of doing things but once I wholly embraced the block editor nothing quite worked as it should. That’s because the underlying code and styles are different. The first thing to do is search the Internet for examples and equivalences; the second thing to do is make your own list when you realise there isn’t one out there already. If you want to know what’s happening under the hood you’ll need to use the inspector in your favourite browser.
In an attempt to be positive, therefore, I’ve written up some of the things I discovered and present them below. Hopefully they will be of use; more hopefully, someone else will pick up the baton and use this as a starting point for something more whizz-bang.
NOTE This all related to WordPress 5.4 and will probably be different again by the end of the year. Such is Gutenberg.
Stylist
In this table I’ve listed some of the common things you might want to insert into a post, how they are coded and styled in the Old Method and how they work now with the block editor. There will be other classes attached to items, such as the id number or post type; I’m just looking at the relevant ones here. As usual, caveat emptor; this is what appears on my sites as I write.
| Old-style css and structure | Gutenberg css and structure | Note | |
|---|---|---|---|
| Image | figure.alignleft > img.size-large | figure.wp-block-image.size-large > img | Some blocks – possibly because of the plugin – are structured: div.wp-block-image > figure.size-large > img |
| Gallery | div.gallery > figure.gallery-item > div.gallery-icon | figure.wp-block-gallery > ul.blocks-gallery-grid > li.blocks-gallery-item > figure | |
| Gallery Caption | figcaption.gallery-caption | figcaption.blocks-gallery-caption | Other <figcaption> elements are enclosed by the parent <figure> element with no styling. |
| Blockquote | blockquote > p | blockquote.wp-block-quote > p | My old site also shows citations as <p><cite> whereas this one shows just <cite> |
| Video | div.wp-video > video.wp-video-shortcode | figure.wp-block-video > video | |
| Table | Ah. Couldn’t find a table on my old site. | figure.wp-block-table > table | <table> is wrapped by a <figure> presumably for floating and formatting. Also, how do you add nowrap and vertical aligns?? |
| Verse | – | pre.wp-block-verse | Do not use this block, it’s silly. Preformatted text is not verse text. |
I did try and make the table rows vertically align to the top but there’s no option for that. You can align columns vertically to the top (or bottom), but not tables. The valign attribute isn’t valid HTML5, which means you can’t edit the block using the code editor – an error is generated. You need to create a set of styles, but a default style and button combination would be helpful here as you won’t always want your table rows vertically aligned one way or another.
Interestingly, when running Theme Check (a plugin) I get an error as I don’t have a style declaration for .gallery-caption. But no error for not having .gallery at all.
One other thing I did was dequeue the block editor styles. This is because I ended up rewriting so much of them it made more sense to me to copy the styles I knew I would need and paste them into my theme’s styles.css instead of loading in a file I wasn’t going to use. If you want to do the same you’ll need to add this code to your functions.php file:
function remove_block_css() {
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );Code language: PHP (php)Convert-a-block
One good thing about blocks is that you can convert (“transform”) them into other blocks. However, it isn’t consistent, and I often find it easier to format my text beforehand in Word or similar. Or even write it by hand in HTML, if constructing a table. Have a look at the following table1 (again, accurate for WordPress 5.4):
| This block | Can be converted into |
|---|---|
| Paragraph | Heading, Group, Quote, List, Preformatted, Verse |
| Heading | Paragraph, Quote, Group |
| Quote | Paragraph, Heading, Group, Pullquote, List |
| List | Paragraph, Quote, Group |
| Preformatted | Paragraph, Group, Code1 |
| Pullquote | Group, Quote |
| Verse | Paragraph, Group |
| Image | Group, Cover, Gallery, Media & Text, File |
| Cover | Image, Group, Video |
| Gallery | Image, Group |
| Media & Text | Image, Group, Video |
| File | Group |
| Video | Cover, Media & Text, Group, File |
| Audio | Group, File |
| HTML | Group |
| Code | Preformatted, Group |
| Table | Group |
| Any embedded content block | Paragraph, Group |
| Shortcode | Group |
| Separator | Group |
| Columns | Group |
| Spacer | Group |
| Classic | Group |
| Buttons | Group |
| Group | Nothing. Can only be ungrouped using the ⋮ menu option in the editing toolbar |
Notes
- Quote is the only textual block that you can’t apply alignwide and alignfull to using toolbar buttons; you need to add those style manually using the Advanced tab on the bottom-right.
- Not unreasonably, you also can’t apply them to Shortcode; if you want the contents of a shortcode to alignwide or alignfull you need to put it into a Group block.
- You can select two or more adjacent single Image blocks to convert them into a Gallery.
- You can select any two or more adjacent blocks and convert them into a Group.
- Start a List block. Add two or three items. Convert to Paragraph blocks. Now try and convert them back into a single list (hint: see previous bullet point. It’s not obvious).
- Columns are two or more; you can’t have one column. If you have three columns and reduce them to two the content in the third column is deleted – it doesn’t drop down into one of the other columns.
Moving on
On the one hand it’s easy to criticise software that isn’t finished. On the other, it’s been in use for 18 months, so you would expect some of the issues to have been fixed or some of the inconsistencies regularised by now. If I want to convert a Preformatted block into a Code block, how can I do that? And as noted earlier, I can’t easily align table cells to the top of rows, or use colspan and rowspan.
Or, when you insert a Heading block you get buttons for styles H2, H3 and H4 in the toolbar but styles H1 to H6 in the side (admin) bar. I want to hide those extra options, so a comprehensive set of php calls to add to hide that, the colo(u)r picker, text sizer and anything else that clutters up my edit screen and which I wouldn’t want anyone to use in a site I’d built or was managing, would be welcome. There are snippets but they don’t always work as Gutenberg evolves further.
With a bit of luck (and a lot more judgment) things such as style names will have settled down before we get full-site editing, which will bring its own set of issues no doubt.
All I can say is that having spent months trying to get a handle on what we have now, I’m really not looking forward to spending more months adapting my template again. I’m glad I’m not trying to make a business out of this!
- This table was updated on 1 July as I’d missed out some of the core blocks, which I have switched off for this site [↩]