u3a SiteWorks

Introduction #

A web page in SiteWorks consists of three elements: a header, a footer and the main text or contents area.

The style and the contents of the header and footer are determined by the u3a SiteWorks theme to ensure that all u3as have a consistent look and feel. The theme determines:

• The web page header and footer style and content.
• The range of colours available for text and backgrounds. The SiteWorks palette is restricted to the u3a brand colours
• The font is a web-compatible equivalent of the u3a brand-approved DS Sans font.

When a web page or post is created (regardless of whether the content creator is logged in as an administrator, editor, or author), the content can only be entered into the content area via the Block Editor. This user guide covers the general principles of the Block Editor’s operations; specific blocks are discussed in other user guides. Details regarding the editing of Headers and Footers are provided here.

One point to note is that the u3a theme restricts the content’s width to 840 pixels on a standard computer monitor, hence the white space to either side of the content in the above screenshot.

The block editor puts the publishing control and formatting into the hands of the content creator without worrying about the underlying technologies. The concept is simple: text and media elements are contained within blocks stacked to form the web page. The size of a block is determined by:

• The contents are entered into a block. For example, an image block will be resized according to the image’s size.
• If a block (e.g. paragraph) is placed within a block (e.g. columns), its size will be constrained by the block higher in the hierarchy. In this case, the paragraph width will not exceed a constraint applied by the individual column width.

Controls allow the content creator to manipulate or modify the blocks to optimise the web page’s appearance. This allows individual u3a’s to have different design concepts, within the overall theme provided by SiteWorks.

Block Editor Administrative Toolbar #

When a page or post is placed in edit mode, the block editor administrative toolbar, shown below, appears, giving the content creator a wide range of options

On the left of the administrative toolbar

1. The WordPress (or user-set) icon returns the view WordPress Information.
2. Goes to the website.
3. Website name
4. Select to search the website.
5. Accesses any comments added by the page editors; if zero, returns to the dashboard.
6. Allows the editor to start another page, post, etc.
7. Views the webpage.
8. Returns to the list of webpages of the type being currently edited.
9. The blue + icon toggles the block inserter.
10. The conventional undo and redo icons.
11. Toggles the Document Overview in the left-hand sidebar.

At the centre, the page or post title is displayed.

On the right of the administrative toolbar, the content creator has several options; it should be noted that the options are dynamic and change depending on the state of the editing process:

13. The content creator can log out of the system or modify their profile.
14. Function depends on state:
    1. The draft can be saved during editing.
    2. When saved but not published, a tick will be visible indicating that the latest version is saved. The icon reverts to Save Draft once editing has resumed.
    3. The published version can be viewed by selecting the icon.
15. A preview of the page in edit mode, as it would appear on a desktop, tablet or smartphone. Using responsive editing, it is possible to configure the view to be device-dependent.
16. Select/deselect the right-hand sidebar that displays the Settings, Style or block-specific information panels. Publishes or saves the page or post depending on its state.
17. Either publish the webpage or, if published, save and hence update the view.
18. Select the editor Options for the following:
    • Set the view
      • It is recommended that you select Top Toolbar to lock the block and document tools to the top left of the screen.
      • Distraction-free – removes all unwanted material.
      • Spotlight Mode greys out blocks not being edited
      • Full-Screen Mode
    • Editor – should always be set to Visual Editor (unless you want to edit in HTML!)
    • Tools – including access to patterns and help documents.
    • Preferences opens a new window that allows you to change the default settings. It is strongly recommended that you do not disable pre-publication checks, theme style, or display block breadcrumbs.

Using the Block Inserter #

Content Structure #

A page or post is constructed by “stacking” blocks, as shown below:

In this example, the following blocks are used:

• The Title (1) is mandatory; WordPress uses this information to populate the site menu.
• A Media and Text block allows text in a paragraph block and an image to be placed alongside each other. An image (2) has been added to the right of the text. The text part (3) of the overall block contains a paragraph block and has been formatted with a u3a yellow background.
• A white Spacer block allows the content creator to customise the space between individual blocks, making the page or post easier to read has been added (4).
• A quote block (5) and a list block (6) have been added within a two-column columns block, with a 1:2 ratio between the column widths.

The Block Inserter #

By default, when you start a new page, you are given a standard paragraph block as a starting point; other blocks can be added by selecting the + icon, the Block Inserter. The icon will appear at:

1. The blue icon at the top of the screen, A.
2. When the content provider hovers the mouse between any two blocks, a blue line with a + icon appears. The new block will be entered at this location, B. If the content creator is using a tablet or mobile device, the block inserter may not appear between blocks; this may require a slight modification to the editing process as discussed here.
3. At the bottom of the current web page, C, when Type/to choose block is selected.

To select the list of available blocks, move the cursor over the block inserter. In the case of A and B, the background will change to black. Once selected, a subset of the available blocks is shown, then:

1. Select the required block from the visible options.
2. Enter the full or part name of the required block, then click the search icon.
3. Select Browse all to show all available blocks.

On selecting Browse all, all the available blocks are made available, under four separate types, identified by the text and an icon, from left to right:

• Blocks: as discussed in this user guide.
• Patterns: predefined sets of designs provided by WordPress, as discussed here.
• Media: provides a range of blocks to contain media, mainly images, as discussed here. In addition, access to the media library and royalty-free image resources (Openverse) is provided.
• Search: across all available blocks, including their explanatory text.

The blocks available are extensive and are divided into categories:

• Text, including paragraphs, headings, and quotes.
• Media, including images, the gallery, etc.
• Design, including buttons and columns
• Widgets, including u3a-specific functions (group and event details), shortcodes, etc.
• Theme, for configuring query loops, etc.
• Embeds, to embed a link to an external provider.

The use and configuration of individual blocks are fully discussed in the relevant user guide.

One key feature of WordPress is the ability to insert one or more text or image blocks into an existing block to form a block hierarchy. For example:

• Adding a text block (paragraph, list, quote, etc) or image block in a column.
• Adding a paragraph, quote or list block into the text area of a Media and Text or a Cover block.

Block Inserter Icon on tablets #

Several content creators have reported that the block inserter icon is not selectable between blocks on a tablet or mobile device; hence:

• Select the block selector in the block inserter administrative toolbar or at the bottom of the page.
• Create the content.
• Reposition the block as required by dragging or using the up/down position icons.

Configuring a Block #

When you select a block, you can configure it. In the example below, the List block can be configured as follows:

• The Block toolbar. Available options include transforming to another block type, dragging the spacer up or down the web page, or moving it above or below adjacent blocks. Selecting the three vertical dots to the right gives other options, including deleting, copying or duplicating the block. The selected block will be outlined in blue.
• For the right-hand sidebar, the option to configure the page or block is available. Depending on the block, several of the following options will be available:
  • List View: Overview of the list.
  • Settings – provides options for the block configuration. In the case of the List, only an anchor or additional CSS can be added. In other blocks, a large number of options and attributes are available.
  • Style – provides options on how the block is displayed, and allows the typography, background and text colour, etc to be configured.

Setting and Style options available for the main blocks are summarised in the table below:

Block	Text & Background Colour	Text Size	Margin and padding	Border	Drop Shadow
Title1	–	–	–	–	–
Heading2	Yes	Yes	Yes	Yes	No
Paragraph2	Yes	Yes	Yes	No	No
List	Yes	Yes	Yes	Yes	Yes
Image3	N/A	N/A	No	Yes	Yes
Media and Text	Yes	Yes	Yes	No	No
Columns4	Yes	Yes	Yes	Yes	Yes
Group4	Yes	Yes	Yes	Yes	No

Margins and Padding #

With WordPress, two variables, Margins and Padding, can be set to help determine the overall presentation, as shown below:

The diagram shows two blocks containing content in the shaded area and their boundaries as the dotted line. The spacing can be controlled by:

• Margin: the distance between the two blocks’ boundaries, dimension M. Note this can be set to a negative value as discussed here.
• Padding: This determines the amount of white space (or coloured space, depending on the block’s settings) that surrounds the content, but within the block’s boundary, dimension P.

The four margin and padding values (top, bottom, left, right) can be set as a group or separately. To set the margin or padding, select Dimensions and then Padding or Margins as shown below:

Negative Margins #

A negative margin extends the content creator’s options when designing pages. Consider the following layout: a two-column block, with an image on the right-hand side and text on the left.

By setting the text to white and its background to black and the paragraph margin to -12 rem, a more dynamic image results.

Block Visability #

This feature allows content providers to:

• Prepare content or experiment with design changes without displaying them to visitors. This could be used when testing sections, staging content, or temporarily removing parts of a page without deleting them.
• The ability to hide the content on a specific type of device, i.e. desktop, tablet or mobile device.

To hide a block, select the block, then select Hide from the block’s option list. This displays the Hide block option box (noting that the rest of the screen is greyed out):

The content creator can then select one or more of the four available options, and then click Apply.

Once any of the options is selected, the paragraph is hidden from view, but remains in the list view. A hidden block will have the hidden icon appended (A). To restore, select the block in the list view, which will show the block’s option bar; then, select either the hidden icon (B) or Show in block’s option list. The Hide Block option box will appear, allowing the content creator to cancel the required hidden option.

Adding a note to a block #

To aid collaboration, content providers can write notes and reply directly at the individual block level, providing tracking changes and feedback during the editing process. Notes can be resolved, edited, and deleted; email notifications are sent to the post’s author when a new one is left. To add a note, from the block’s toolbar, select Add Note (A). This will grey out all the other blocks except the one the note is attached to, and a panel will appear on the right-hand side of the screen where the note can be added. When completed, confirm by selecting Add Note in the note box.

Once a note has been added, it can be edited or deleted. If a note has been added, an icon will appear on the block editor’s administrative toolbar (C) and the block toolbar (D), identifying the note’s creator. On selecting either they notes(s) will appear (B).

The following viewing rights apply to notes:

• Administrators and Editors can view all notes on all posts.
• Authors and Contributors can view all notes for posts that they have authored.
• Subscribers cannot view any notes.

View Dependent on Device: Responsive Styles #

WordPress can provide a user experience depending on the device being used to view the WebSite; this ability has several advantages, including:

• Better User Experience
  • Easy reading: Text stays large enough to read without zooming in.
  • Simple tapping: Buttons and links have enough space so fingers do not hit the wrong one.
  • Less scrolling: Content fits the screen width so users do not scroll sideways.
• Faster Speed
  • Smaller files: Mobile devices load smaller images and lighter code.
  • Quick loading: Pages open faster on mobile data networks.
• Higher Search Rankings
  • Google preference: Search engines rank mobile-friendly sites higher.
  • More visitors: People stay longer on sites that work well on their phones.

Displaying or hiding a block dependent on the device being used is discussed in block visibility.

To change the formatting of a webpage using responsive styles, in the edit view:

When you select the required viewport, the screen will resize, then modify the style as required and save. In the example below, the font for a mobile phone view has been increased in size and placed on a light blue background, giving the user experience as shown on the right.

Document Overview #

If you select the document overview icon (or shift+alt+o) to the left of the administrative toolbar, the content creator can view the overview in a list or outline format.

• The List view (left) shows all the blocks on the page and their relative locations. Select a block to edit or move it; in this example, the H3 block is selected. In a list or table, you can navigate directly to specific items or rows. The view also shows a thumbnail of any image and available links (the link link-to-here is attached to the paragraph block in the Media and Text block.
• The Outline shows the heading used to allow correct positioning within the page structure, together with information on the content.

Breadcrumbs #

As web pages and posts become more complex, it is easy to lose sight of which block is being edited. To help with the editing process, apart from the document overview, WordPress has a Breadcrumb feature, which is found at the lower left of the editing screen.

The breadcrumb trail will expand as the page or post content creator adds blocks within blocks. For example, when editing a list row within a Media and Text block, the trail will appear as:

Page > Media and Text > List > List Item

As shown below, the trail shows that the page creator is editing a row within a list. If you want to select the complete list, select List.

Preview Before Publication #

As Web Managers will be aware, a website can be viewed on devices including tablets and mobile phones, in addition to desktop monitors typically used for editing. WordPress, together with browser technology, can reconfigure web pages to match screen size.

Two approaches are available to preview content before publication: either using the WordPress function or those offered by the web browser.

WordPress #

To preview a document, select Preview from the administrative toolbar. This gives three options: Desktop, Tablet and Mobile. Select the view required, and then select Preview in new tab to display the page or post in a separate tab.

Chrome or Edge #

• Use the F12 key to access the Developer Tools. In Chrome, a considerable amount of information about the website may be shown, but this can be ignored.
• Press Ctrl + Shift + M on the keyboard or select the Toggle Device Emulation icon on the DevTools top ribbon to open the device toolbar:
• Click the browser’s refresh button to reload the page and make sure you’re seeing the mobile view of the page
• Click on the device toolbar and choose the mobile device to be emulated. The view can be rotated as required.

Firefox #

• Press Ctrl + Shift + M on your keyboard to open the device toolbar
• Click the browser’s refresh button to reload the page and make sure you’re seeing the mobile view of the page
• Click on the device toolbar and choose the mobile device that you want to emulate

Safari #

• Make sure the ‘Develop’ option is visible in the menu (if ‘Develop’ isn’t visible, go to Safari ⇒ Preferences ⇒ Advanced; tick the ‘Show Develop menu in menu bar’ box)
• Press Ctrl (^) + Cmd (⌘) + R to open Responsive Design Mode
• Click the browser’s refresh button to reload the page and make sure you’re seeing the mobile view of the page
• Choose the mobile device that you want to emulate

A selection of views of a single page is shown below, for a tablet, computer monitor and tablet. It should be noted that these views are simulations and should be treated as indicative – it is always advisable to check the actual display on the actual or a similar device.