Both the Block Editor Field and the WYSIWYG Field offer an interface to edit rich content that includes formatted text and images. These similarities prompt a more thorough comparison.
The Block Editor is a newer field under active development. While in the long run, it's reasonable to suppose that it will fully replace the WYSIWYG Field, for the short to medium term, this is unlikely, as there are features exclusive to each. It follows that there are cases where each may be preferable over the other.
Details
| Feature | Block Editor | WYSIWYG |
|---|---|---|
| Storage | JSON | HTML |
| Custom Rendering | Container-level | Content Type or Content-level |
| Text Formatting | ✅ | ✅ |
| Images | ✅ | ✅ |
| Tables | ✅ | ✅ |
| Nesting Contentlets | ✅ | ❌ |
| TinyMCE Property Config | ❌ | ✅ |
| Active Development | ✅ | ❌ |
Block Editor Field
A Block Editor Field is stored as JSON, in a discrete and portable fashion. Each block is stored as its own object, which makes them very tractable in a headless context.
Each block can likewise have custom rendering schemes defined at the Container level. Thus, all contentlets with a Block Editor appearing via the same Container will follow the same rendering rules.
A block can also contain a contentlet. The specifics of how this is rendered are likewise fully customizable in similar fashion to block customization. In other words, Block Editors have the unique power to act as a near-universal Container proxy in their own right.
Aside from rendering customization, Block Editors have configuration options handled mostly through field variables, including:
- Styling the input window via CSS
- Whitelisting blocks or contentlets
- Block whitelisting can now also be performed through an adjacent interface
- Setting Count Bar properties
As of 23.03, the Block Editor Field includes two kinds of video block functionality:
— The video block can display a video stored as a file
- The YouTube block can embed a video from an external service.
Likewise as of 23.03, Block Editors are capable of remote extensions — including the creation of new, custom block types.
Note: The Translate Content Workflow Sub-Action is not currently compatible with the Block Editor field.
WYSIWYG Field
A WYSIWYG Field is stored as HTML. While less tractable than Block Editor JSON, the tradeoff is content-level customization of presentation through direct HTML editing.
Rendering can be handled either through the direct editing of HTML in a given contentlet, or through defining a global rendering scheme and invoking it via field variables.
WYSIWYG Fields cannot contain contentlets.
The field has a significant number of mature configuration options available through TinyMCE properties. These include modifications to the toolbar and automatic behaviors, and loading external custom plugins.
For example, a WYSIWYG Field can be configured to disallow link inputs by removing the hyperlink button, preventing automatic creation of hyperlinks from plaintext, and even removing the option to edit as HTML directly.
Aside from both the global rendering configuration and TinyMCE properties above, the following options are configurable through field variables:
- Defining a default path for file dialogs
- Disabling drag-and-drop upload of images
