WordPress Block Mode
WordPress 5 introduced a whole new way to author content, with special, comment-delimited “blocks” mostly replacing plain HTML elements as the component set you build from. TypeMetal has been updated to fully support block-mode WordPress content authoring, while retaining the ability to edit and produce “classic mode” (plain HTML) content for WordPress when desired.
TypeMetal defaults to creating new WordPress posts and pages in block mode, but if you prefer to continue using classic mode by default, you can configure that choice in a WordPress project’s “Settings” popover.
WordPress’ “Block Mode” has similar aims to TypeMetal’s similarly named “Show Block Structure” mode, but they are two distinct features that can be used separately or together if desired.
WordPress Block Mode prescribes a special set of components that content must be built from, as described below.
TypeMetal’s “Show Block Structure” mode is a special viewing mode that displays graspable boxes around top-level constructs. The highlighted constructs can be WordPress “blocks”, or they can be “block”-level elements in plain HTML, such as <h1>-<h6>, <p>, <section>, and <div>. “Show Block Structure” mode can be toggled on and off, and does not affect your content or the set of components that you build your content from. This viewing mode offers special selection and navigation behaviors that can make it easier to operate on otherwise invisible or difficult-to-grasp components and position inserted or dropped content at desired inter-block or inter-element boundaries. See the “Show Block Structure” mode documentation for more details.
Differences vs. Plain HTML Editing
A block-mode post or page is primarily composed of WordPress blocks, with a few inline HTML styling elements allowed within the blocks’ text content (<a>, <code>, <em>, <kbd>, <strong>, <s>, <sub>, <sup>). WordPress offers a set of standard blocks that you can use to structure your content, including paragraphs, block quotes, lists, headings, images, and other such basic elements, as well as dynamic-content blocks that you can use to embed content from your own site and others. The available block types appear in TypeMetal’s Structure menu, context (right-click) menu, and completion UI, alongside the allowed inline HTML styling elements. All of those facilities for creating HTML elements can be used to create blocks and elements alike.
Markup Differences
If you use TypeMetal’s Source Loupe to inspect the markup underlying a block-mode post or page, you’ll notice that WordPress brackets blocks with special delimiter comments. Even an ordinary paragraph gets a block start comment before it and a block end comment after it:
<!-- wp:paragraph -->
<p>Welcome to my site!</p>
<!-- /wp:paragraph -->The delimiter comments distinguish this as a WordPress “Paragraph” block, as distinct from an ordinary <p> element.
Sometimes the block start comment will contain block properties, like this “Heading” block specifying its heading level:
<!-- wp:heading {"level":1} -->
<h1>Adventures in Publishing</h1>
<!-- /wp:heading -->TypeMetal’s editing engine has been updated to accommodate these block delimiter comments, and it takes care to maintain them as required through all editing operations.
Editing Block Properties
When you’re editing block-mode content, TypeMetal provides specialized, block-mode counterparts to its standard HTML editing tools. To inspect and edit the properties of a WordPress block, you’ll use TypeMetal’s block properties editor in place of the attribute editor for general HTML elements. The block properties editor mirrors the native WordPress block settings UI you’re used to, and focuses the set of possible edits to those WordPress allows for. The set of editable properties it presents varies according to the selected block’s type.
Block Mode Themes
WordPress themes that are designed for block mode typically use different attachment point conventions than older WordPress themes. See “Using Your WordPress Site’s Theme with TypeMetal” for tips on customizing TypeMetal’s attachment point settings to work with your theme templates if necessary.
Transforming and Unwrapping Blocks
Sometimes you want to transform a WordPress block into a block of a different kind, or “unwrap” a block to leave its content in its place. TypeMetal can perform certain block transformations for you. You can access the available WordPress block transformations from the Path Bar’s context menu.
To see the transformations available for a given block, select the block exactly by clicking its segment in the Path Bar, then right-click its Path Bar segment to bring up the context menu.
In the example pictured below, a Quote Block’s segment in the Path Bar has been right-clicked, and we can see that the Quote can be unwrapped, or transformed into a Preformatted or Verse block.
Not all WordPress block types can be transformed. The Path Bar’s context menu currently supports transforming among Paragraph, Preformatted, Quote, and Verse blocks. You can also use the same keyboard shortcuts as in plain HTML to transform between paragraphs and headings of various levels, and between paragraphs and list items in WordPress block mode content.