Formatting Text

When formatting text, stick to the setting and layout options available in the block editor, rather than coding custom colors, fonts and other styles. The predefined styles in the WashU Web Theme make it easy to format content consistently across your site, which in turns makes navigating your site smoother for visitors. It also keeps things on-brand and in compliance with accessibility standards, and it ensures that when the theme is updated, your formatting isn’t left behind.

---

Jump to a section below:

---

Avoid the Classic Block: If your site migrated into blocks from the older version of WordPress, you may be tempted to keep using the Classic Block, which resembles the former content editor. However, the Classic Block is not supported, and pages using it may eventually break.

Paragraph block

Newly added blocks always default to the paragraph block. This versatile block includes basic text formatting, links, disclaimers styles and more.

Using the paragraph block

1. Add a paragraph block to the page or post you’re working on (or simply begin typing on the page!).
2. Add basic styling (bold or italics) and alignment options by highlighting the text and selecting from the toolbar at the top of the block.

Special paragraph formats: Disclaimers and lead/intro text

Select Styles from the panel on the right to apply a special format to any paragraph block:

• Disclaimer:

  Used at the bottom of a page for legal text, disclaimers or footnotes, disclaimer text will appear in italics and smaller than the body copy.

• Lead:

  Use this at the top of priority pages to style two to three lines of intro text in a larger, gray typeface.

Pro Tip: Press Enter/Return to add a new paragraph block. For a soft return (line break within the same paragraph block), hold Shift + Enter/Return.

Links

Link text should be concise but descriptive. Avoid links that say “Click here” or “Learn more” and instead use descriptive text that indicates the destination and content. A visitor should be able to skim the links on a page and understand what they’re linking to without reading the full sentence.

1. Highlight the text to link.
2. Click the Link icon (looks like links of a chain) from the top toolbar, or use keyboard shortcut (PC: ctrl + k / Mac: cmd + k).
3. Add the link’s destination:
4. Page or post on your site: Start typing the page title and select from the options that appear below.
   • Page on another site: Insert the full web address in the URL field.
   • Email address: Type the full email, rather than hyperlinking generic text like “email us” (i.e., Email us at sites@wustl.edu). Then, highlight the email and click the Link icon. Your text will automatically generate a link for email.
   • File/document (pdf, xls, ppt, etc): See tutorial for linking to documents.
   • Subsection on a page (anchor links): See the tutorial for adding anchor links.
5. Do not set links to open in a new window/tab (this goes against best practice for accessibility).
6. Click the apply button ⏎ to save the link.

To remove links, select the link text and click the unlink icon (broken chain) from the top toolbar.

Heading block

Headings and subheadings establish a visual hierarchy for a page’s content. For those using screen readers, they also make navigating pages much easier, allowing site visitors to skip to the section they need.

Avoid using billboards, cards, or custom HTML to create de facto section headings, and stick instead with the heading block! If the headings on a page need extra oomph, see Step 3 below for adding the underline style.

Pro tip: Write effective headings and page titles »

Using the heading block

1. Add a heading block, or transform a paragraph block into a heading block.
2. Select the appropriate heading level (H2, H3, H4, etc.) from the dropdown in the block’s top toolbar, as shown in the screenshot below. The heading block defaults to H2.

3. Optionally, you can add an underline style to headings. On text-heavy pages or pages with headings at multiple levels (like this one!), the underline style helps establish relationships between those sections. Use underlines sparingly, especially for H3 through H6, since underlines can have the effect of visually separating content that you might prefer to hang together.
   
   To add underlines: Select the heading block; then in the settings panel on the right, change the style from Unstyled to Underline. H2s have the additional option to select an accent color (this page uses the red accent). We recommend using these colors consistently throughout the pages of your site.

How to use the right heading levels (H2, H3, H4)

Consider headings and subheadings as an outline that structure your content:

• The page title is automatically the Heading 1 (H1). The title is the only text on a page that should be an H1. This is a Google rule!
• Within the body content, start with Heading 2 (H2). If the content within the H2 section needs be further subdivided, use an H3. If that content needs to be subdivided, use the H4, and so on. For the next main section of the page, go back to an H2, like the levels of an outline.

For example, the heading levels so far on this page are:

1. H1 (the page title): Formatting text
   1. H2: Paragraph block
      1. H3: Using the paragraph block
      2. H3: Special paragraph formats: Disclaimers and lead/intro text
   2. H2: Links
   3. H2: Heading block
      1. H3: Using the heading block
      2. H3: About heading levels

List block: Bullet points and numbering

Lists are useful for organizing and summarizing key information or outlining a high-level ordered list with substeps (like this tutorial!).

Using the list block

1. Add the list block, or transform a paragraph block into a list block. Learn more about transforming blocks below.
2. In the right panel, select a list style. Style options are Regular or Unstyled.
   • Regular lists use styled icons (numbers or bullet points) to organize information.
   • Unstyled lists are indented and do not use styled icons.
3. Select unordered or ordered from the block settings in the top toolbar.
4. Create sublists by indenting an existing list item. Place the cursor in front of the list item you wish to indent and select Indent list item in the top toolbar. If you decide a sub-list belongs as a new list item, you can select Outdent list item.

Callout box block (green box)

Use a callout box to call out related or important content in a light green box. (You’ve seen several examples on this page!)

Transforming to a different block

You can easily change some blocks from one type to another — e.g., from a paragraph block into a list block and back — using the transform option.

1. Select the block you want to change.
2. Hover over the block icon (the first icon) in the top toolbar until you see the Change block type or style icon (looks like a pair of arrows). Click the icon.
3. Under Transform To, select a different block.

---

More on this topic