Lesson 3.2: Text blocks: Title, Text, Rich text, Markdown and HTML #

Most pages need words that are not a content item of their own: a section heading, an introduction, a short notice. The text blocks hold such words inside the layout. This lesson compares them and fills the most common ones.

At a glance #

Learning objectives #

After this lesson, learners can:

• choose between Title, Text, Rich text, Markdown, HTML snippet and Quote for a need;
• fill a Title block and set its heading level;
• format text in a Rich text block with its toolbar;
• write a short Markdown block;
• explain the risk of the HTML snippet block and who should use it.

Trainer's notes #

How to present it #

Sources: Layout types, zones and blocks and Exponential Layouts: Block catalogue.

1. The family (4 minutes):

   Block	Use it for
   Title	A heading, with its level
   Text	Plain text
   Rich text	Formatted text: paragraphs, headings, lists, links, tables
   Markdown	Text written in Markdown, rendered on the page
   HTML snippet	Raw markup, for trusted authors only
   Quote	A pull quote

2. Title (2 minutes). The title text and a heading level; keep headings in order on the page (Editors 201, lesson 8.2).

3. Rich text (3 minutes). Its toolbar offers Paragraph format (Paragraph, Heading 1 to Heading 3, Preformatted), Bold, Italic, Underline, Strikethrough, Remove formatting, Link, Bulleted list, Numbered list, indents, Block quote, alignment, Horizontal line, Insert table, Undo and Redo. A link address that cannot be used is refused: This address cannot be used as a link.

4. Markdown (2 minutes). # for headings, ** around bold words, - for list items, and links written as the text in square brackets followed by the address in round brackets.

5. HTML snippet (3 minutes). Prints raw markup. Give it only to trusted authors; a site's Content Security Policy blocks inline scripts in it. It is the block most likely to break a page.

Common questions #

Rich text block or an article? Words that belong to this page's arrangement (a section intro) go in a block; words that are content in their own right (news, a page text) belong in a content item, shown with a listing or Full view block.

Why does my heading look different on the site? The site's design styles headings; the block sets the level, not the look.

Can I paste from a word processor into Rich text? Yes; check the result and use Remove formatting if needed.

Pitfalls #

• Words lost in blocks. Text in blocks is not found by the site's content search the way articles are. Keep important content in content items.
• Translations. Block texts belong to the layout; on multilingual sites check how your installation handles translated layouts before promising them.
• HTML for styling. Use the Design tab's CSS class (lesson 3.3) instead of HTML.

Hands-on exercise #

Use the training installation and your course layout.

1. Open your course layout with Open. (If the editor asks what to do with an existing draft, choose to continue it.)

2. Select the Title block in POST_HEADER. In Content, type Welcome to <your first name>'s page and set the heading level to 1 if the block offers it.

3. Replace the Text block in MAIN with a Rich text block: add a Rich text block, then delete the Text block.

4. In the Rich text block, write two paragraphs, make one word Bold, add a Bulleted list with three points, and a Link to an https:// address the trainer gives.

5. Add a Markdown block below it with:

   ## Opening hours
   
   - Monday to Friday: 9 to 17
   - [Contact us](https://example.invalid/contact)

6. Look at both blocks in the middle of the editor.

7. Add an HTML snippet block, read its field, and delete it again without filling it.

8. Choose Save draft and close.

Expected result #

• The draft shows a heading block, a formatted rich text with a list and a link, and a Markdown block with a heading and a list.
• No HTML snippet block remains.
• The trainer checks by opening one learner's draft on the projector.

Quiz #

1. Which block do you use for formatted text with a table? A. Title B. Text C. Rich text D. Quote
2. Why should the HTML snippet block be used by trusted authors only?
3. Write the Markdown for a link with the text "Contact us".
4. Where should a news text live: in a block or in a content item? Why?
5. What does the message This address cannot be used as a link. mean?

Further reading #

• Layout types, zones and blocks: every block by purpose.
• Exponential Layouts: Block catalogue

Related pages #

• Module 3: Blocks
• Exponential Layouts: course overview
• Trainers: start here
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.