WP Rig 3.0.2 – minor release

We wanted to get WP Rig V3 released by Jan 1, and we did. However, as usual with software, there was still some unfinished business and some optimizations we noticed after release. Below is a summary.

Support for Dark Mode

The base starter theme now supports dark mode for users using the prefers-color-scheme: dark browser feature. So depending on how you have your OS (or browser) configured, you will see the starter theme either dark or light. You can find the majority of these concerns handled in the _custom-properties.css file towards the bottom of the file. If you do not wish to support these @media browser feature (not recommended), you can simply remove that whole section.

PHPUnit

PHPUnit has been updated and upgraded to work with PHP8+. Some of the base unit tests have also been updated accordingly to ensure all tests pass on a fresh WP Rig install.

PHP Code Quality

Rector PHP and PHP CS Fixer have both been added to the stack. Rector helps you modernize old/outdated/unnecessary code and PHP CS Fixer helps you bulk address certain issues the PHPCBF (PHP Code Beautifier and Fixer) does not (like Yoda conditionals) which may be pointed out by PHPCS (PHP Code Sniffer) using WPCS (WordPress Coding Standards). Because this new stack is a bit more complex, we added a new composer script for convenience:

composer run fix

This new composer script runs rector, then runs PHP CS Fixer, then runs PHPCBF all in that sequence.

Rector PHP -> PHP CS Fixer -> PHPCBF

We recommend always running phpcs (composer run run-phpcs) after this to ensure everything has been addressed as these tools do not automatically fix every single possible issue. It’s also a obviously a good idea to thoroughly test after running such automated code changes.

The combination of all of these tools should help developers to learn to write more modern, maintainable and cleaner PHP. A lot can be learned from reviewing the code that was changed from these, so be sure to dive into your git changes after running these before committing them.

Nav Accessibility

The nav was already very accessible by modern standards. However, we noticed issues in a scenario where you want to create a parent nav item that has a sub-menu where the parent nav item does not link anywhere (its only for the user to however over and control the open/close of the sub menu). In this scenario usually devs will make the parent nav item link either blank (an empty string / “”) or “#”. In this scenario, it is bad for accessibility to have the menu item contain an anchor tag (<a>).

We have actually secretly enhanced the default accessibility for this scenario over the past few versions (even before v3). We will make a new video outlining the specific nuances around this in the future, but just know that we have made it much more convenient to control the main navigation for users TABbing through the nav or using other assisted tech to navigate.

This was discovered using the Accessibility Checker plugin, which is one of our curated plugins that get installed when you run the new WP CLI command we added: wp rig dev_setup.

So, we added a filter that changes this anchor tag to a button element (<button>) as this is the recommended approach. We also added very specific styling to ensure that these buttons match the anchor tags in the main nav so there is no visible difference between these elements in the main nav to the user. This is important to note as this could have consequences in scenarios where devs do use CTA (or other) buttons in their main nav for whatever reason. In this scenario, you would want to override those CSS rules with more specific CSS selectors.

Other

A variety of other minor bug tweaks were made, all of which can be found in the commit history in the Github repo. We won’t list them all here, but one worth mentioning is that the command line output when running some npm scripts:

• npm run rig-init has been cleaned up and slimmed down a bit to be less busy (this can be undone by editing the script in composer.json if you prefer a more verbose output).
• npm run dev, build, and bundle have also been cleaned up a bit.