Page Comparison

Platform Components

The platform has two primary components: WordPress and Next.js. WordPress is used for layout and content while Next.js serves up the content in a React.js single page application.

WordPress

1. WordPress instance - WordPress contains HTML contents that have been laid out in the Block Editor using custom blocks developed for digital.gov.bc.ca specific look and feel.

2. Custom WordPress plugin - the plugin contains custom blocks for the use in the block editor as well as other features in the following files:

   1. ./editor.js - this setups up the “Preview on digital.gov.bc.ca” button in the block editor for previewing the contents on digital.gov.bc.ca

   2. ./custom.php - this file performs a number of functions:

      1. Enqueues JavaScript files for the editor (jQuery - for setting up “Preview on digital.gov.bc.ca” button, editor.js, block_extensions.js)

      2. Creates custom roles for workflow management within WordPress

      3. Creates custom capabilities and adds those capabilities to custom roles

      4. Filters the list of blocks that appears in the block editor - this is done to restrict the degrees of freedom available to the content editors - to a few core blocks and custom blocks developed for digital.gov.bc.ca

      5. Sets up custom post types

      6. Sets up default templates for post types

   3. assets/block_extensions.js - this file contains extensions to core WordPress blocks:

      1. Sets up an ability to add aria-label to core/list block

      2. Adds custom style for the post title block to be styled in accordance with styling needs for digital.gov.bc.ca

3. Custom WordPress theme - the theme performs these functions:

   1. ./functions.php:

      1. Includes CSS file to display blocks correctly inside the editor. Similar CSS is mirrored on the front end as well.

      2. Removes support for default WordPress patterns - to restrict degrees of freedom available to content editors in an effort to keep look-and-feel consistent with design guidelines

   2. ./style.css - CSS to display blocks in a way that’s consistent with digital.gov.bc.ca in the block editor

The code for both custom WordPress theme and plugin are hosted on GitHub here: https://github.com/bcgov/wordpress-digimod

WordPress Deployment

WordPress deployment project is a fork of https://github.com/bcgov/wordpress and is available on GitHub here: https://github.com/bcgov/wordpress-deploy-digimod

NOTE: Currently OpenShift namespaces are not parameterized, and need to be manually replaced in case of deployment outside of Digimod. Search and replace 0cce6-tools and c0cce6 with variables for your OpenShift namespace.

To deploy WordPress to OpenShift follow these steps:

1. Follow instructions in openshift/templates/images/readme.md to create base images

2. To build images run builds manually through OpenShift Web UI or use GitHub actions (untested)

3. Rename image stream tags to test or prod, whichever is appropriate:

   Code Block
   oc -n c0cce6-tools tag wordpress-mariadb-run:dev wordpress-mariadb-run:test oc -n c0cce6-tools tag wordpress-nginx-run:dev wordpress-nginx-run:test oc -n c0cce6-tools tag wordpress-wordpress-run:dev wordpress-wordpress-run:test oc -n c0cce6-tools tag wordpress-sidecar-run:dev wordpress-sidecar-run:test

4. Run openshift/templates/site-builder.sh - this will setup config, mariaDB, nginx.

NOTE: side car may not deploy due to resource limits. May need to determine alternative way for doing automatic backups. Interim solution is to backup manually using a backup plugin, such as UpdaraftPlus

Next.JS

Next.JS is responsible for fetching the content from WordPress through the API, parsing the WordPress HTML into React components and serving resulting HTML to the client. On the client, React.js is responsible for re-hydrating any React components for interactive functionality. If the user disables JavaScript, the site is expected to run a standard website instead of a Single Page Application (SPA). Interactive elements, such as accordions should either work through CSS toggles or be accessible without interactive (for example leaving accordions expanded, or rendered differently).

Next.JS application is hosted on GitHub here: https://github.com/bcgov/nextjs-digimod

Next.JS Deployment

To deploy Next.JS application to OpenShift run following commands:

...