Styling Content in the Block Editor

Styling Content with the Block Editor

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Page and Post content styling in the block editor is no fun

Drilling-down

It’s time for me to drill down into styling content. An area I find particularly annoying in the block editor. Last month I started this series with my thoughts about the block editor. Feel free to read Part 1: Biting the Bullet and Learning to use the Block Editor.

I’m still not spending a lot of time with it, but I’m paying attention when I use it, looking for ways to make my life easier, and attempting to learn as much as possible, but I’m not going to force it. I find I learn when there is a natural and logical reason for me to use a new product or feature.

What I am finding annoying now is the number of tools I use that have the WordPress editor embedded, but for some reason refuse to switch to using blocks.

In the Classic editor, I used TinyMCE Advanced (now Advanced Editor Tools) to help format content. As I use Elementor and Beaver Builder more I had little need for TinyMCE Advanced and have removed it. I thought as I transitioned to using blocks, I wouldn’t need it either. Sadly, replacing it has not been easy, but I’m adamant about learning blocks. [NOTE: since I’ve made that decision they’ve upgraded the plugin and it now supports blocks]

What’s built-in

I’ve been taking an assessment of the tools I need to create a post, I’ve no plans to use the block editor for pages, so my assessments are focused on the editing of posts and less so on the layouts I might use when supporting pages. This is what I’ve been able to determine so far:

Typography

The block editor is different, styling is different. Because you’re not using a single editor window you have to remember the styling tools are in different places. For a long while, I thought there was no formatting available.

block formatting I was wrong, it was just moved to a different place. Formatting is available mostly to text blocks, like the paragraph and header blocks. As you type in the paragraph block (for instance,) you’re given some basic capability to bold and italicize the text.

This is far less extensive than the capabilities of the Classic editor where you could bold, italicize, underline, change fonts, and a lot more. The Advanced Editor Tools add more, but I’m not sure I like what it does in the block editor.

What I have to remember is these are blocks, not a Word-like editor. Formatting applies to the block for the most part. At least that is similar to formatting with a page builder.

Margins, Rows and Columns

There is nothing for padding or setting margins on paragraphs. Unless of course I still have not found it yet, which is likely.

Since I’m a big Microsoft Word user and have been for years, I found it comforting to use tables to format content and layout (relative to the page) in the Classic editor, Beaver Builder, and Elementor.

At least you can use tables to do some layout. Adding content into a table cell and dragging the left or right border of a column gives me some control over row margins and alignment, but it is still not as flexible as I would like.

It would really be nice if you could indent a block every now and then.

I miss that in the block editor. If it exists, I must be missing it.

At least the basic blocks support rows and columns, you don’t have the level of control that you would with a page builder, but there is some capability.

Colors

You can add styling to blocks, but the problem I’ve seen is applying colors to a block apply to the whole block not to elements within the block unless you use the classic paragraph block.

Navigation

IMHO, its not as easy to move around in the block editor. The formatting tool either floats above the block and obscures the block above it or sits in the toolbar at the top where you forget about it, unsure of the block you’re working on.

Yes, you do have the ability to make the current block showing active while the others appear as shadowed version of themselves, but that’s not easily seen.

Moving blocks around is also counterintuitive. There is no real drag and drop capabilities. Some of the icons just don’t make sense. Deleting blocks is not always intuitive either. Certain blocks, the layout blocks in Kadence are not selectable, but to delete them you have to select them.

At least WordPress made Page Navigation available. Selecting that you can determine the block you want to go to and delete it.

There are plugins for that?

WordPress is an open-source CMS and people expect new capabilities to be introduced. There is clearly a need to improve styling in the block editor and developers, seeing the opportunity have released block plugins to fill the gaps left. The first one I found to work in the Block Editor (and Elementor) was Tiny MCE Advanced. The developer, updated the plugin to be more block-oriented and renamed it.

Let’s take a look at some of the blocks I’m using and how they’ll fit in with my plans.

Typography

I’m still searching for what I consider to be my “go-to” replacement for typography support in the block editor. I have found a couple that seems promising.

  • Gutenberg Block Editor Toolkit – Editor Kit
  • Gutenberg Library Toolkit – Editor Plus
  • Advanced Editor Tools – The old Tiny MCE Advanced

The first 2 seem promising. I’m still not comfortable with the features of Advanced Editor Tools, they confuse the editing experience by replacing some default blocks

Text colors

Text colors are supported in the block editor, but unless you’re using the classic block those colors apply to all text in the block. Advanced Editor Tools allow you to add color to words and groups of Words in the block.

Formatting

For people moving from the Classic Editor and Page Builders, layout, line-spacing, and formatting is not as robust and might be considered lacking; however, block add-ons such as Ultimate Addons for Gutenberg and Kadence Blocks for Gutenberg add row layout functionality that let you better define how you layout a row using containers. A feature is common in page builders.

Conclusion (for now)

I’m still not as comfortable with styling in the block editor as I would like, but I’m slowly finding the block addons that ease some of the angst I feel when trying to move around.

Kadence Blocks for Gutenberg and Ultimate Addons for Gutenberg, another library of blocks I’m impressed with both provide some needed functionality. Improving the overall capability of the block editor. Choosing between the two has been hard. I’m looking for others to ease the pain.

I do need to be careful, I do most of the work on my site in a page builder with supporting plugins. Using the block editor clearly means extending it to get the types of controls I’m used to having with my other editors/page-builders. It appears for the moment that means having a dual editor environment complete with supporting plugins/blocks.

Is that a bad thing? That remains to be seen.

More To Explore

Optimizing Images
Tips

Optimizing Images Doesn’t Have To Be Hard. Read These 5 Tips

Why optimize images Optimizing Images in WordPress can be an art, but it’s not one that everyone understands.  When you optimize an image, you’re really improving your website performance, making the user experience for your visitors much more pleasant. There is no simple formula to optimizing an image. Depending on the quality, size, and your

Scroll to Top
Malcare WordPress Security