Introduction #

As discussed in the Publishing a u3a Website user guide, before any text is entered, ensure that a plan and/or draft of the material to be added to the site is available.

In this user guide, it is assumed that the WordPress item (e.g. pages, group pages, event pages, contacts etc.) has been created, and the content creator wishes to add additional text-based elements, using the block editor. The creation of actual pages and posts is considered in the relevant user guides.

Text may be added to or modified with a page, using the following blocks:

• Headings
• Paragraph.
• Quotation or Verse
• Lists
• Tables
• Detail Block, typically used for FAQ
• Social Media Icon
• Symbols

Headings #

The WordPress block editor provides a range of headings from H2 to H6, in each case the font size is different. H1 is reserved for the page title. The Heading Block Toolbar is:

and gives the following options from left to right

• Change block from heading to paragraph etc.
• Drag the block handle to change the block position
• Move the block up or down one block
• Select the heading level
• Align the header text to the left, centre, or right, noting that consistency across the u3a site is required.
• Selected text to bold
• Selected text to italics.
• Insert hyperlink
• Additional text options
• Additional options, include removing the heading.

While the relationship between header font size and header level is fixed by the theme, it can be adjusted using the Typography settings. It is recommended that all heading sizes across a site remain consistent for usability.

Paragraph #

Adding a Paragraph #

From the Block browser select Paragraph and directly enter the required test by typing or copy and paste.

When a piece of text within a paragraph block is selected, using the Block Toolbar, a range of text and block formatting options can be applied.

With the Block Toolbar (A) you can:

• Change the block to a related block (e.g. Paragraph to Heading).
• A handle to change the block position.
• Move the block up or down by one block relative to its current position.
• Align the text to the left, centre, or right
• Make the highlighted text bold
• Make the highlighted text italic
• Insert a hyperlink
• Format the highlighted text, for example, highlight, super and subscript. In addition, a footnote can be added.
• More block options including, copy and remove.

The sidebar B allows further options for the complete block including text and background colours, changing the font size to a multiple of the normal size. An important point to note is the default background colour for a paragraph block is null or transparent. Unless the colour is explicitly selected, the block will show what is behind it, this is of particular importance if the block is used in conjunction with a Cover or Column block.

It is advised that content creators do not use a paragraph with bold text in place of a heading, as this will:

• Not be picked up as a heading by search engines.
• Will not show correctly in the document overview of the page.

Under the advanced settings, you can add an anchor name for the paragraph. This allows the paragraph to be used as an endpoint for a link as discussed here.

The standard line spacing between two paragraph blocks (i.e. margin) is by default two lines, however, this can be changed by adjusting the block’s margins.

If for some reason you require a section of text that has no line spacing between two “paragraphs”, but within the same Paragraph block, use Shift + Enter at the end of a sentence.

Coloured Border around a Paragraph #

To emphasise an important piece of text, it is common to use bold, coloured fonts or a coloured background. In some cases, this may cause readability issues, particularly if the reader has colour blindness or other issues, such as the contrast between text and background may reduce. The recommended solution is to place a coloured border around the paragraph:

This can be achieved by the use of a single column and paragraph block as follows:

• At the required location enter a Columns block, and select the single column option (i.e., 100).
• With the column selected, use the Styles sidebar to select the required colour for the border.
• Using the + icon in the column, select a Paragraph from the block browser. Then from the Paragraph Style sidebar, select a White background (identified as u3a Background or #FFFFFF). Note at this stage the red column will effectively disappear.
• Enter the required text.
• With the Paragraph still selected, from the sidebar select Dimensions, then Margins, to give the desired effect. Both Top/Bottom and Left/Right margins need to be adjusted

During this formatting, reference should be made to the breadcrumbs in the lower left of the screen to ensure the correct block is selected.

Quotations #

To add quotations to your pages, WordPress has two options a Quote Verse or Pullquote. In all cases, the available options in the Toolbar are identical to that of a Paragraph. The Quote Block provides the following layout:

If you want to format your text in a verse format, you can either use the Verse or Pullquote block, in both examples below the text has been centred:

If the Pullquote Block is used the above text will appear as shown below, again there is an option to add an author or citation.

List #

Constructing a list #

Using the block selection, select List, this will place a bullet list on the page at the defined location. After entering a list item, and pressing return, the list entry will move to the next item. In WordPress, a row is considered the child of the parent list. The List Block Toolbar gives the following options: from left to right,

• Change block type.
• Drag the block.
• Move the block up or down.
• Unordered list.
• Ordered list.
• Outdent
• Indent.
• Selected text to Bold
• Selected text to italics
• Add a hyperlink.
• Additional formatting options include highlight, inline code, inline image, keyboard input, and other formatting options.
• More options, including removing the list item. If the parent is selected from this option, you can modify the complete list.

When a row is selected, the options allow the row to be indented or outdented from its current level.

The two types of lists available are shown below, the ordered (left) and unordered (right):

• It is possible to adjust both the start value of the numbered list and reverse the increment direction.
• If you require a blank line in a list, use Shift+Enter at the end of the preceding line.

Formatting a List #

When a basic list is entered into SiteWorks, the content creator will note that the text of the list aligns with the edge of the block or document as follows, with the dots or numbers effectively in the margin, e.g.

• Line 1
• Line 2

This will look ugly and poorly formatted, the solution is to add padding, from the List block dimension option, with a padding of 5, the list will appear as:

• Line 1
• Line2

In addition, by adjusting the padding it is possible to adjust the position of the indented items relative to the main list, carefully adjusting the values makes for a far more readable list and page.

Adding and Populating a Table #

It should be noted that the Table Block should only used to display tabulated data. A table should not be used as a general formatting design tool, other blocks such as the text and media block and columns should be used instead.

Setting up a table #

To add a table, from the block browser, select Table, then enter the required number of rows and columns, and select Create Table.

Once created the table can be populated and modified as required

The Toolbar options from left to right are:

• Change block type.
• Move the block up or down.
• Align the table in the page, none, left, centre or right.
• Align text with a column
• Selected text to bold
• Selected text to italics
• Selected text as a hyperlink
• Additional formatting options include highlight, inline code, inline image, keyboard input, and other formatting options.
• Adding and deleting rows and columns
• Additional options, include removing the table.

The Table Settings sidebar contains options to provide header and footer rows for the table, together with fixed or variable cell widths.

The Table Style sidebar allows a range of options to be selected:

• Default
  • Colour of the text and background.
  • Size of the type.
  • Border, padding and margin dimensions.
• Stripes (provides structured content by colouring alternate rows)
  • Colour of the text and alternate background
  • Border, padding and margin dimensions.

Adding an Image to a table #

An image can be added to a table cell, (only if it is relevant tabulated data), as follows:

• Select the cell
• From the Toolbar, select, More (inverted caret symbol to the right of adding a link) (A).
• Select Inline image, from the menu (B) this directly takes you to the Media Library to select the image.
• The size of the image is set to a default width of 150 px (i.e. a thumbnail), and the aspect ratio is not changed. If the image is selected its width can be adjusted, but the content creator needs to be aware of maintaining a constant aspect ratio for multiple images, or the display could look ragged.

To delete the image, select the image, then Del. take care not to delete the complete table, by referring to the Breadcrumbs in the bottom left of the screen.

Detail #

The Detail block allows a user to select, for example, a query, which reveals further information, this approach is widely used in applications such as FAQ. From the Block Browser, select Details, and enter the required information, the summary and then the hidden block, this can include images etc.

When displayed, only the summary text is visible, if the text or arrowhead is selected, the hidden text appears, in this case, Detail 3’s information is contained in a text and media block.

As each Detail block is independent, each must be entered separately.

In the above example, three columns of equal size are being edited, where:

• Column one contains an image above a Paragraph block.
• Column two contains a Paragraph block.
• Column three is currently being edited, on selecting + the block browser opens. The block Toolbar allows the editor to select the column block, interchange columns or align the contents of an individual column.

The options for a column include:

• Settings:
  • If blocks are nested with a column, the content width of the nested blocks can be controlled.
  • Adjust the width and justification.
• Style
  • Text and background colour
  • Padding and margin adjustment
  • Addition of a block border

The Column (i.e., child) Block Toolbar can be accessed from the Columns (I.e., parent) block toolbar as required.

Social Media Icon #

To engage visitors with other media channels, e.g. Facebook or Instagram, it is best practice to use an icon. This can be achieved by the use of the Social Media block as follows:

• Place the Block Inserter at the required location, and select Social Icons for those listed in Widgets.
• Click on Plus again to add the required icon, using Browse All may be required to find the icon.
• Select the Icon to add the required address. It should be noted that If an address is not entered, the icon will not appear.

Selecting the Social Icon block allows the content creator to configure the following:

• Settings
  • Layout and justification
• Styles
  • Default or Pill will add a border as opposed to Logo only.
  • Icon colour and background colour
  • Spacing

Symbols #

While editing a page or post, there may be a requirement to add a specific symbol, for example, the copyright symbol, ©. Symbols such as this have to be entered as an HTML code. Content creators can use one of two approaches:

Edit as HTML #

From the block option menu, select Edit as HTML, enter the required code at the correct location, and return to normal editing by selecting Edit visually. The symbol will be shown in the text. Care should be taken to ensure the existing HTML is not changed. or significant re-editing may be required.

Custom HTML block #

To insert a symbol or other HTML a Custom HTML block is provided in WordPress. To use, select the block and enter the required code, either as the HTML Entity (if it exists) or the HTML code in the Write HTML box. Two display options are available, either the HTML code view or the Preview that displays the resultant symbol or changes due to the code modification.

HTML Symbol Codes #

A selection of symbols is given below, however, many more including dingbats and Emojis are available on the WWW.

Name	Symbol	HTML	HTML Entity	Name	Symbol	HTML	HTML Entity
Copyright Symbol	©	©	©	Degree Celsius	℃	℃
Euro	€	€	€	Ballot box with check	☑	☑
Tick or Check	✓	✓		Telephone	☎	☎
Dagger	†	†	†	Double Dagger	‡	‡	‡
Division	÷	÷	÷	Multiplication	×	û	×
Spades	♠	♠	♠	Hearts	♥	♥	♥
Clubs	♣	♣	♣	Diamonds	♦	♦	♦