Introduction #

A web page in SiteWorks consists of three elements, header, 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 will determine:

• The web page header and footer style and content can be changed by the website Administrator.
• The range of colours available, for text and backgrounds. The SiteWorks palette is restricted to the u3a brand colours
• The font, in this case a web-compatible equivalent of the u3a brand-approved DS Sans font.

An individual web page consists of a header, text and footer:

When a web page or post is created (irrespective of whether you are an administrator, editor or author) you can only enter material into the content area, using the Gutenberg 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, hence the white space to either side of the above screenshot, which was captured from a standard desktop monitor.

Block Editor Concept #

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

• The contents entered into a block. For example, an image block will be resized as a function of the image 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 that of the constraints applied by the individual column width.

Controls are provided to allow the page 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.

Content Structure #

As noted above content is constructed by “stacking” block, as shown below:

In this example the following blocks are used:

• The page Heading (1) is always required and 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 to have a u3a yellow background.
• A white Spacer block that allows the content creator to customise the space between individual blocks, making the page or post easier to read, has been added at (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.

Using 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, termed the Block Inserter. The icon is present at:

• The top of the screen, A.
• When you hover your mouse between any two blocks, a blue line, with a + icon appears. The new block will be entered at this location, B.
• At the bottom of the current web page, C.

To select the list of available blocks, move the cursor over the +, in the case of A and B, the background will change to black. Once selected a subset of the block available is presented, either select the required block, enter the name of the required block then search, or Browse all.

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 blocks provided by WordPress, as discussed here.
• Media, access to the media library and royalty-free image resources, as discussed here.
• Search facility 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 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 design block. For example:

• A text block (paragraph, list, quote, etc) or image block into a column, is provided by the columns block.
• A paragraph, quote or list block into the text portion of a Media and Text or a Cover block.

Manipulating a Block #

When a block is selected, it can be configured, in this case, the Spacer has been selected, while other blocks may have different options, the concept is identical.

Using the Block Toolbox controls, the web page author can configure the space by:

• Change the size of the spacer, drag it up and down the web page, or move its position to above or below the adjacent block. Selecting the three vertical dots to the right gives other options including deleting or removing the block.
• To the right of the web page in the sidebar, two further options are available:
  • Settings – in the case of the Spacer, only the height can be adjusted. In other blocks, a large number of options and attributes are available.
  • Style – allows changes to the background colour, or text colour in the case of paragraphs, lists, etc.

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, the contents being the shaded area and their boundaries as the dotted line. The spacing can be controlled by:

• Margin: this is the distance between the two blocks’ boundaries. Effectively this can be considered as adding white space, in a similar fashion to the Spacer block, dimension M.
• Padding: This determines the amount of white space (or coloured space depending on the block’s settings) that surrounds the content, but within the boundary of the block, dimension P. The four padding values can either be set together or separately.

Editor Options #

From the right of the administrative toolbar, you can select:

:

The following edit options are available:

• 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.
  • Spotlight Mode greys out blocks not being edited
  • Full-Screen Mode
  • Distraction-free – removes all unwanted material.
• 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 further window that allows you to change the default settings. It is strongly recommended that you do not disable pre-publication checks, theme style and display block breadcrumbs.

Page Overview #

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

• The List view shows all the blocks on the page and their relative location, by selecting a block, the item can be edited or moved. In the case of a list or table, you can navigate directly to specific items or rows.
• The Outline shows the heading used, to allow correct positioning within the structure of the page. When an internal link is added, this is shown to the right of the block. The outline view requires the presence of an additional heading or link.

Breadcrumbs #

As web pages and posts become more complex, it is easy to lose sight of which block is being edited. To help, 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 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 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 over a range of devices including tablets and mobile phones, in addition to desktop monitors typically used for editing. WordPress has the capability, together with browser technology to reconfigure web pages to match screen size. For this reason, some Site Builder features (i.e. sidebars) are not available in SiteWorks, as they may get re-located to the bottom of the page when displayed on a mobile device.

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 that you want to emulate, in addition, you are able to rotate the view if 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 are shown below, for a tablet, computer monitor and table. 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 similar device.