WordPress Cloud PaaS site updates to facilitate user research testing

[ty2k]

To enable our Service Design team to perform user testing on the BCGov Private Cloud Platform as a Service WordPress instance from GDX, code updates are required. March is the target for when user testing should begin.

Homepage wireframe:

Landing page for Our Services wireframe:

Below is a detailed list of changes required for the entire site. Because we are focused on user testing, work with Theresa Putkey to decide which of these might be able to be faked for testing within the context of this ticket, and then spun off into a more detailed ticket to be completed prior to the site launching.

• [x] Content page templates: Create a content page template that can be used as a starting point for all newly created pages, to avoid content editors having to re-create common layouts each time a new page is started. For example, a Topic Details page is required for items that are NOT case studies, how-to's, events, or news.
• [x] Content page layout: A three column layout should be used on content pages, but using the WordPress built-in page titles to do this means the <h1> tag will sit on top of the menu by default. We can disable this behaviour, but then we would have to add the <h1> manually to each page. The default behaviour can be disabled via: Customizer -> Disable "Enable H1 auto insertion". Check with Theresa if this is the desired behaviour.
• [x] Alerts: Alert banners like the one on the homepage should follow the Design System Alert Banner guidance.
  • For the purposes of the first round of testing, I've added a block of HTML and CSS styled like the "Warning" alert banner. Down the line, we should look into creating these as reusable components for re-use across the site.
• [x] Header: Items in the "Sub-Menu Pre-header" should be right-aligned. This can be found under Appearance -> Sub-Menu Pre-header. Check the CSS selector .menu-sub-menu-pre-header-container ul.
• [x] Footer: Copy the content and look and feel of the Engagement site's footer.
• [x] Global (Header) navigation versus left-hand navigation on content pages. Left-hand navigation menu items should be able to have sub-items which themselves have sub-items (three levels of navigation). It was determined with Steve Howard's help that the Header navigation should only use the included two levels of navigation due to accessibility concerns. Theresa indicated that this is okay.
• [x] Platform Status: The homepage should display a widget showing the platform status. Check and see what might be possible here using our Platform Status page. Something like the "All systems operational" message would be great if we can pull that from an API.
• [x] TaxoPress plugin: We want to create dynamically generated lists based on taxonomy data using the TaxoPress plugin.
• [x] Events list: We want to create a dynamically generated list of upcoming events based on items created using an event template.

Additional context The site is using a BC Gov look and feel using a template from the GDX division. Stay within the confines of this template to the extent possible to facilitate future updates to this site.

Admin access is required. Admin access can be granted by an existing admin (Justin, Olena, Tyler, Theresa, etc). Login using the "Login with KeyCloak" link near the footer on the homepage.

As we using a hosted WordPress instance as a service from the GDX division, any code updates we make (integrations, style fragments, etc) need to be documented and committed to one of our GitHub repositories. Check if we have an existing one that makes sense, or start a new one like wordpress-cloud-paas.

Definition of done

• [x] Changes are made to the test site
• [x] Changes have been verified with Theresa Putkey
• [x] Code is committed and documented in a repository for our WordPress Cloud PaaS docs site

[ty2k]

Content page templates Templates were added for two and three column content pages. This was done with the Duplicate Page plugin (vs a custom block pattern, for example). Content creators will duplicate these template pages and rename them accordingly.

Content page layout We played with two options for H1 headings: using the included auto-generated H1 heading that sits atop the content page, and disabling that heading in order to manually create the H1 heading at the top of the central content column. It was decided that we would use the auto-generated option because it was simpler and looked better at all screen sizes when there was a longer page title.

Alerts I've added an HTML block to the homepage to show a single "warning" alert. Ideally, this should become a custom block (via a plugin) if more than one instance is required across the site.

Header CSS was added via the Additional CSS menu to push the pre-header menu to the right.

Footer No action in this ticket as this was not a blocker for user testing.

Global header navigation vs left menu navigation In the header navigation, we stayed away from nesting child items past one level deep. For on-page left menu navigation, we went with custom List blocks and styling added to Additional CSS. The reusable blocks are named like Left Nav Menu - <Menu Name>. With this this structured, we are able to nest <ul> lists within <li> list items, giving us as many levels hierarchy as we want (though we are sticking with three). This is okay for testing purposes, but it's not ideal from an accessibility perspective, because we are not able to use semantic tags like <nav> to direct screen-readers to treat this list like a navigation block. We are also unable to collapse the menu with a hamburger icon button on mobile screen sizes. Functionality like this will need to be added with a custom plugin (if desired).

Platform status indicator I've added a static "All Systems Operational" indicator to the homepage, and created #2339 PaaS WordPress platform status indicator for future development.

Taxopress plugin No action taken as this was not a blocker for user testing.

Events list No action taken as this was not a blocker for user testing.

[ty2k]

Code repository for WordPress code snippets: https://github.com/bcgov/platform-services-wordpress