“Show Block Structure” Mode

Most HTML files contain a number of container elements — <div> elements, <section> elements, etc. — that are important to layout and styling but invisible by default. To make these elements visible and graspable, TypeMetal provides a “Show Block Structure” mode (a.k.a. “Block Mode”) that’s like X-ray vision for your HTML files and WordPress posts. Block Mode also makes it easy to put the insertion point between block-level elements (which isn’t possible in ordinary editing mode), and to select and operate on whole blocks of your content.

Activating Block Mode

To enter Block Mode:

• Press Command+Option+] or
• Choose View → Show Block Structure or
• Click the “Show Blocks” button in an HTML window’s toolbar

In Block Mode, TypeMetal temporarily overrides your document’s styling to show a border, background, padding, and “handle” for every block-level element:

This styling is entirely internal to TypeMetal, and has no effect on your document’s HTML source code. You can save an HTML file or WordPress post while working on it in Block Mode, without having to worry about its HTML markup being written out any differently.

Positioning the Insertion Point in Block Mode

In addition to letting you place the insertion point at character-level positions, Block Mode provides the means to put the insertion point between block-level elements. The gaps between block-highlighted elements facilitate this: Click in a gap to put the insertion point there. The HTML window’s path bar will indicate such an insertion point with a similar blue handle bar, as illustrated below:

In the example above, the insertion point is between the “Block Styling” third-level heading (<h3>) element, and the <section> element that immediately follows the <h3>.

If you paste, or begin typing, at such an insertion point, TypeMetal will insert your new content between the <h3> and the <section>. (If you type at such an insertion point, TypeMetal will also automatically wrap your typing in a paragraph (<p>) element.)

Once you have this kind of insertion point, you can step from one inter-block gap to another, using the ↑ and ↓ keys.

Selecting Block-Level Elements in Block Mode

Click on a block’s “handle” to select the block.

Shift+click on a block’s handle to extend your selection to a range of blocks. (The block you click, and the already selected block, must be siblings — they must reside at the same structural level in the document.)

Once made, a block-level selection works like any other selection. You can cut or copy it, copy its HTML source code to the pasteboard, wrap it in an element or snippet, and so on.

You can also select blocks by clicking segments in an HTML window’s path bar.

Collapsing and Expanding the Document Tree

If a block’s first child is a heading (<h1>-<h6>) element, you can temporarily collapse the block to show only its heading, by double-clicking the block’s “handle”. This can be useful when you’re dealing with a large document containing nested sections and subsections, and you want to hide some of its complexity to survey, and potentially rearrange, its high-level structure.

When you collapse a block, its handle toggles to a collapsed appearance, to indicate that the block contains more content than is shown.

You can drag-and-drop, cut, and copy collapsed blocks just the same as uncollapsed blocks.

To re-expand a block, double-click its handle again.

Exiting “Block Mode” also causes all blocks to re-expand.

Dragging Blocks and Ranges of Blocks

If you hold the mouse button down and begin dragging after you click on a block’s handle, or click-and-drag any handle of an already selected block or range of blocks, TypeMetal begins a dragging session. You can drop the dragged content wherever you like, either within the same document window, to another HTML document window, or to any other suitable destination outside TypeMetal.