Moving BajanThings to the Ollie block theme

Short-term we have reverted back to our classic theme using Astra Pro. We like Ollie. It hasn’t been updated for a while and there are too many edge cases – some detailed below. 

We believe the future is Block themes. We will re-visit transitioning BajanThings to a block theme in March 2024 after the release of WordPress 6.5. 

We don’t think the exercise was in vain. For the next iteration of moving BajanThings to a block theme we are going to try Spectra One which is by Brainstorm Force who also make our current theme: Astra Pro.

Currently the ONE big deal breaker is the navigation block cannot be customised to highlight the active page nor can a hover be added as a visual cue as we do currently with Astra Pro.

Click here to see the BajanThings staging site using either: Ollie or Spectra One.

This is the second part of the BajanThings transition from WordPress classic theme to WordPress block theme. WordPress is working fast to catch up on innovators Wix and SquareSpace and have over the last few years been driving change. Block themes are the future. 

I was inspired by Jamie Marsland to have a go at transitioning one of my test sites (veg2table.com) which uses a WordPress classic theme (Astra Pro just like BajanThings) to the default WordPress block theme Twenty Twenty Four (TT4).

I’ve opted to transition BajanThings to Ollie. The developers behind Ollie, Mike McAlister and Patrick Posner have been investing a lot of time helping to educate early adopters like myself.  On the Ollie website Mike McAlister has been producing loads of videos and technical docs and a blog on how to use Block themes like Ollie.

WordPress block themes are the future. My first impression is that block themes are still a bit clunky compared to a classic theme. There are still too many edge case issues with Ollie. We have identified some. As state at the beginning of the post we have reverted to our trusty classic theme until until we can fix the edge case issues we are having.

The hardest thing I’ve found is when editing of templates is getting one’s-head around that to get what you want, you often need to use groups of group blocks!

BajanThings - block theme conversion
Groups within Groups to create block with Site logo, Site Title & Search and Site Tagline.

My aim with the transition to Ollie was to replicating the base look and feel of BajanThings based on what I had developed over the last few years using the Astra Pro. That way I have a like for like comparison.

The WordPress roll-out of their new block editor and new block themes is nearly there – and my hope is that following the release of WordPress 6.5 in mid March 2024 thing will get better. 

The use of block themes is not yet mainstream and is reliant on early adopters. When doing a direct comparison the Astra Pro classic theme is more polished. That said, block themes are the way forward, we want to embrace them and get ahead of the curve!

The other thing to mention. Back at the end of 2023 I spent a lot of my spare time looking how to optimise the mobile page speed of BajanThings. Prior to the this transition to a block theme driven site, the homepage of BajanThings was getting a mobile PageSpeed Insights score of about 90+. There appears to be little change with the Ollie block theme. That may be down to FlyingPress/FlyingCDN (Bunny) doing its thing.

Out of the box these are the things that are missing:

  • There are some key blocks that are missing (these two) require the loading of the Gutenberg plugin that adds pre-release (beta) functionality to WordPress:
    Comment count block for use in the meta of a post
    Time to read block for use in the meta for a post.
  • I love the the header font used on the Ollie website which I think is ITF Clash Grotesk Display. At the moment you need to be pretty hands on to add additional fonts to block themes. For the short-term I’ve opted to use the fonts that come pre-loaded with Ollie. This restriction is due to be fixed in March 2024 with the release of WordPress 6.5 so not too long to wait.
  • Out of the box the navigation block is pretty basic – you might say it sucks! The menu item for the current active page is not even underlined on the menu to give a visual cue of the page you are on. Nor is there a way to change the colour of the menu items. With Astra Pro for instance you could define the the Primary Menu and the Sub-menu menu colours and you could define a the default menu colour, the hover colour and the active page menu colour. These were the colours we previously use with Astra Pro:
    – Normal – #00000 (Black)
    – Hover – #CC0000 (Red – light)
    – Active – #990000 (Red – dark)

    Jamie Marsland suggested a partial work-around using the plugin: Twentig, that allows hovers to be added to blocks. I say its a partial work-round as it does not highlight the the Primary menu item as Active, when there is an Active sub-menu item – which is how Astra Pro works. See below image:
BajanThings - block theme conversion
Superior navigation menu using Astra Pro. Visual cue for HomePage. Hover is a different shade of red. Also sub-menu is also colour coded as a visual cue. Where there is a sub-menu item the Primary menu item also shows as Active as a visual cue.
BajanThings - block theme conversion
Very basic navigation menu using Ollie. Note no visual cue to identify this is the HomePage. HomePage is not even underlined as a link! This is not really an Ollie issue by a WordPress navigation block issue.

Before Astra Pro had this it was possible to do with some CSS:

/* Highlight parent page link when on child page see https://stackoverflow.com/questions/15603950/wordpress-highlight-the-parent-menu-item-when-child-menu-item-page-is-selected  and https://www.wpexplorer.com/highlighting-wordpress-menu/ and https://wordpress.org/support/topic/change-colour-of-active-parent-item-in-navigation/  */
/* No longer needed Astra Pro allows Default colour, Active Colour and Hover Color */
/*
.current_page_parent >a, .current-page-ancestor >a, .current-post-ancestor >a, .current-menu-item >a {
    color: #990000 !important;
}

I am hoping this is fixed in WordPress 6.5. According to @zoonini a WordPress Support Moderator: in Full Site Editing / block themes .current-menu-parent or ancestor is not automatically assigned yet – the workaround is to use Parent ID…”

With the help of Brian Coords we have a fix! The new CSS ‘has:()’ selector:

/* Highlight parent page link when on child page see: https://stackoverflow.com/questions/15603950/wordpress-highlight-the-parent-menu-item-when-child-menu-item-page-is-selected  and https://www.wpexplorer.com/highlighting-wordpress-menu/ */
.current_page_parent >a, .current-page-ancestor >a, .current-post-ancestor >a, .current-menu-item >a {
    color: #990000 !important;
}

/* suggested by Brian Coords who suggested using the new CSS :has() selector - see: https://www.briancoords.com/fse-navigation-block-woes/ */
.wp-block-navigation-item:has(.current-menu-item)  {
   color: #990000 !important;
}

The above works for the desktop version. If a sub-menu item is chosen then the parent menu item is also highlighted in the desktop primary Nav location. It does not work, yet, with the the mobile and tablet hamburger menu. Where the hamburger icon is used, sub-menu is highlighted but parent menu item is not highlighted. Ummm…
See block navigation menu in action:
main site (Astra Pro)
– replication main site here is staging site (Ollie block theme).

  • we have an edge case issue with how Ollie handles 300px right aligned images on mobile devices.

    Failed to fix with CSS???
/* Issue with text wrapping with right aligned images on mobile.  On screens that are 480px wide or less, stack image instead of float */
@media screen and (max-width: 480px) {
.wp-block-image .alignleft,
.wp-block-image .alignright {
float: none;
}
}
  • we have an edge case issue with how Ollie overflows images within comments into the sidebar. In Astra Pro the image is constrained.
  • there is no “back to top button”. I’ve tried two plugin “To Top” and “Scroll to Top” both of which failed to work… Our readers like having a “back to top button”.
  • the author pages are missing the author bios
    Author page in Astra Pro
    – Same Author page in Ollie.

Having got to grips with the basics of TT4 – and having watched a lot of YouTube videos – the transition for BajanThings to Ollie was straight forward. Here is a summary of my transition:

  • make a back-up on SiteGround
  • make a staging site to experiment with first. I spent a day doing this. Then I spent another day doing it from scratch on the live site…. nothing like a bit of replication to learn.
  • the first thing that has to be done is the navigation menu needs to be created. Ollie got me started but the menu that it suggested was not the current menu (not sure where Ollie retrieved the menu from – where ever it was very OLD version – but it got me started!
  • next I tweaked a few of the templates. It was mainly repositioning title and feature images in query loops, and making the content block appear in a group so right aligned thumbnail images fitted in the content area.
  • I then altered the single post layout so that it had a sidebar.
  • that’s about it…

The things I need to get to grips over the next little while are:

  • width – Ollie uses website width of 1245px and content area of 740px. 
    (Astra Pro used website width of 1200px and content area of 780px or thereabouts)
  • the width setting with groups – the hardest piece of the transition was the header Groups that included the: Site logo, Site Title & Search and Site Tagline
  • padding between blocks and groups is a bit of a mystery still
  • display of Formidable form block on the contact us page which even within a group seems to be displaying wide on a desktop?
  • delving more into global styles
  • how to add CSS customisation. With the classic version of BajanThings I had 236 lines of Additional CSS to fix a few bugs and to amend the look and feel of some specifics elements… 
    It is much the same as before. Go to Appearance | Customise | Additional CSS. For instance I had some CSS that altered the overlay colours with Meow. I’ve added these back and they appear to work as before. (They are a straight copy and will need tweaking given the link colours with Ollie are different.)
/* CSS Notes */
/* CSS Below Here */

/* ========== */
/* MEOW FIXES */
/* ========== */

/* Meow Gallery this makes the background colour for mouse over of caption more transparent */
.mgl-item figcaption {
background-color: rgba(0,0,0,0.35) !important;
}

/* Meow Gallery makes link white - currently the theme default is black underline with hover of red.  This adjusts link colour */
.mgl-caption a {
color: WhiteSmoke !important;
}
.mgl-caption a:hover {
color: #CC0000 !important;
}

/* Meow Lightbox uses default link colour - currently the theme default is black underline with hover of red. This changes Meow Lightbox link to WhiteSmoke so it can be seen against Lightbox dark background */
.mwl a {
color: WhiteSmoke !important;
text-decoration: underline !important;
}
.mwl a:hover {
color: #CC0000 !important;
text-decoration: underline !important;
}

/* ========== */
/* END OF MEOW FIXES */
/* ========== *
  • Remember how I updated the Ollie Menu to a hamburger – it’s not very intuitive. Navigation mobile Hamburger icon (default is two line icon I wanted three line icon). This is how its done: 
    Go to Patterns | Header – click on left hand side on Navigation – in right panel top click cog, you’ll see Display showing default two line icon, click on the two line icon and you then have the option of either a two line icon or a three line icon. Click on the three line icon. Click on save and save again. Now the default menu is a typical hamburger icon. Not very intuitive!

Leave a Comment

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top