I must say I’m one of the people who were not happy when Gutenberg was first introduced. As someone who likes writing in classic editors and also with Markdown sometimes, Gutenberg felt inflexible. I like having total control of the contents of HTML. It’s also a lot of work to transition to another workflow. For tech and non-tech people alike.

TinyMCE in WordPress still has flaws. If content with some custom HTML is switched back to the visual editor it will often break the HTML. Which makes it a pain to create custom-designed long reads posts.

(I’m currently looking for a coded way to lock certain posts in the code editor mode to avoid the custom HTML from breaking. I try to avoid using plugins as much as possible.)

Gutenberg on the other hand is not fully accessible yet. However aside from accessibility issues, Gutenberg has improved a lot since its release and I don’t want to keep being attached to the Classic Editor when obviously Auttomatic put all its eggs in Gutenberg basket. I decided it was time to with a magazine/news website over to Gutenberg while still keeping the choice to use the Classic Editor.

Switching over to Gutenberg

The first thing I did was create an editor-style.css for Gutenberg. Trying to mimic the front-end as much as possible. That’s where I started hitting bumps in the road.

In TinyMCE, I had created post formats that worked flawlessly. Headings with their own CSS classes, div blocks and blockquotes. They were easy to make. But Gutenberg has in comparison a more complicated way. I didn’t want to create a block just to have an h3 tag with its own classes. And the only native way to create a div block with content is by using the HTML block. Using inner blocks creates a child div and if there is one thing I like to avoid is divitis or an unnecessary tag soup.

After a lot of reading, trying out solutions with the ACF Pro plugin and a suggestion from e fellow WordPress person, I decided that Block Styles is the ideal solution to different styled headings and block quotes. You ask, why not just use the CSS class option in Gutenberg? If it was just me I would. But this is for a team of journalists that sometimes need to create long articles and it’s just easier to have the class added automatically.

Block Styles

First thing, what is it with so many blogs that create posts about WordPress tutorials but in fact just copy-paste the basic examples from WordPress official website. It’s just SEO farming. More than 80% of the top search result are not original content. Which is what motivated me to do my best and write about how I do things. Even if it is super basic, it might help someone and it’s good documentation for me. On to the block styles.

The Block Styles solved my problem, almost. I can’t add my own class. It has to be my-styles-awesomeheading instead of just awesomeheading. Not the most practical if it is a 15 years old website and now I have to add another class to the technical debt.

I “solved” it by using a CSS wildcard class selector. Not the most ideal, but I prefer that to using my-styles.

Heading block styles:

If you were wondering like me because you only dabble in the back-end of WordPress when needed with being a front-end dev and all. Block styles need to be loaded through functions.php. You can store the Javascript files in whatever folder in your theme and add them. I did it like this:

In this block style example, I added attributes ClassName, but it doesn’t work. I found it used in another tutorial and people claim it works. But it does not for me. Another comment I came across suggested adding a space before name, which would look like this name: ' awesomeheading'. This would then create to classes, my-style and awesomeheading. But if you switch between styles it just keeps adding classes instead of clearing first and then adding the new one.

Of course, there might be an easier solution to all this, but I haven’t come across it. For now, this works. It would be so much easier if there was an option to create Reusable Blocks with dynamic content. It would make it so much easier than going the block styles way.

If you have suggestions or tips, send them at darice [at] darice.org and I’ll include them to this post.

This was the first post from hopefully more on how I try to make things work for me. I’ll try to write these blogs without being a perfectionist and to just write and publish without overthinking ‘should I or shouldn’t I post this’.