Update! As of WordPress 5.0.1 tables convert MUCH better. If it is a table with CSS styles embedded, it falls back to an HTML block. If it is a table without the CSS, it converts to a Table block. There was a big rewrite of the Table block not too long before release and that seems to have fixed the conversion. It doesn’t solve all of my problems, however.
Gutenberg is the new editor in WordPress. It’s been out for months in a plugin
and is scheduled for release in the WordPress 5.0 update the end of November 2018. It is out as of December 5th!
Rather than one big spot where we put our content in WordPress, now we are going to have a bunch of blocks. Each paragraph, image, headline, etc is a block. It’s more fun in some ways.
Because I build websites for small businesses, including fellow horse breeders, I need to stay ahead of big changes as well as I can. For that reason, my own ranch site, where I advertise and sell my own horses, became the guinea pig. This fall I converted both AusRanch.com and this site to Gutenberg. This one was pretty boring to convert. The horse site was an adventure.
Why does pedigree layout matter?
Pedigrees are critical to selling horses. Well, at least I think so. And I know that over the years I have had people buy horses they found on my site from a Google search of famous horses that are in my horses’ pedigrees.
Pedigree tables have been, well, doable, in WordPress. That was only because you could switch from the “visual” editor to a code page where you would type in whatever you wanted in html. That let us paste in code for a table with CSS styles.
Mostly, we all rely on a heavy use of the Duplicate Post plugin and hope for full siblings every year. No, that’s not a good way to operate. But it was working well enough.
This is how my pedigree tables must look. I want three generations which is pretty common, but I also want vertical lines grouping horses, and I want small italic type describing individual horses’ accomplishments right under the names.
Some of my clients prefer a less cluttered table without lines and/or descriptions. However, the placement of the horse names is convention and the layout must be exactly like above. If you enjoy thinking about web design, you’ll recognize this as a legitimate use of tables.
The table block is getting better in recent versions of Gutenberg and before long it might work for people that do not like the vertical lines or the description text. But it may never work for those of us who want formatting like in the image above.
And yes, pasting a table from Word into Gutenberg works pretty well. Of course, you still can’t have the CSS to make those lines and small italic description text.
Converting to Blocks
So, to see what happened, I converted a page with a pedigree to Blocks. Images and text went fine of course. But the pedigree tables were a disaster. I could see no way to fix them
What happens when you convert pedigree tables to blocks
Here is a quick and dirty video of what happened when I converted content that contained a pedigree table to Gutenberg Blocks. You’ll also see my “solution” which was to paste the code into an html block. Even that works oddly, but it did give me the result I needed.
By the way, when inserting this I learned I needed a YouTube block. I didn’t need a Video block. Hmmm. Could we make that less confusing please?
What is the solution? Please!
Normal WordPress users are not going to feel comfortable editing that html code to make a new pedigree for a future horse. After all, spring brings new ones every year! Even if you start with a copy of a previous post, a user must be able to edit the pedigree. Anything else is NOT acceptable.
I am not even going to find it reasonably easy to make a new pedigree in that html code. Can I? Yes. But it will be unnecessarily inefficient and I hate that!
My “solution” in the video is not a real solution because it is too complex and too slow. We need a solution that allows the following:
- Quickly reusing either the top half or the bottom half of a pedigree.
- Formatting like the tables in my examples.
- Reformatting responsively.
- Easy to edit for regular, normal, not-html type users.
I’ve open to using 3rd party blocks and page builders. I think Elementor is my choice for a page builder once Gutenberg drops, but I’m open to others.
Or, maybe I need a totally different solution. But somehow, there has to be a way to make this easier! What are your thoughts?