More HTML elements variety in visual editor

Question

Our HTML based website uses a lot of formats for styling text / pages.

We're now transitioning to Wordpress so the our employees can also create and edit pages, but it seems like the Wordpress editor is quite limiting in terms of control over the design of the text.

There are 3 main limitations:

1. Text styling: basic things like underlining a single word in a headline or paragraph, changing color of a single word, etc.

2. More design control over single words, like adding <em>, <i>, etc to allow more than the basic styling of bold/underline/italic/strikethrough.

3. Extension of the previous: adding something like <span class="red"></span> to a single word within a headline, to allow more control via the sites' default CSS.

4. Adding elements other than headlines, paragraphs, list, blockquote and the other default elements. IE, I'd like to allow my employees to add items to a page like "warning alert" (which would be a <div class="alert alert-warning"></div>).

What's the best way to achieve this?

Answer 1

It sounds like you may be using the Block Editor, the latest editor available for WP. If so, you'll want to explore plugins. Some plugins create new blocks - i.e. elements other than the basic headings, paragraphs, etc. that come with WP Core. Other plugins extend existing blocks.

Text styling and single words - it's possible to add additional formatting buttons, but it takes quite a bit of code. Depending on what particular styling options you need, and whether you want the styles to apply to the whole block or just part of the text, you may want to look for either a plugin that adds toolbar buttons to add styling, or just make use of the "Additional CSS Class" you can specify on whole blocks.

Extension - with most blocks you can edit in HTML mode, which allows you to add whatever CSS classes you need. If you are diving into CSS classes you'll also want to look into building a child theme, which will apply your CSS without changing the theme itself, allowing you to keep the theme up to date without it overwriting your changes.

Other elements - you can either look through the many block plugins available, or decide to create your own custom blocks.