Moving BajanThings to the Ollie block theme

On 28th April 2024 BajanThings transitioned to using the Ollie block theme.
We have subsequently been doing a little bit of fine tuning to the look and feel. Mainly issues of padding in the wrong places! And the layout of the home page.

This is the third transition of BajanThings:

  • The first incarnation of BajanThings was launched in December 2014 using Bruce Wampler’s Weaver Xtreme theme using WordPress 4.0 (Benny) released in September 2016 which used what was referred to as the classic editor.
  • The second incarnation of BajanThings was launched in December 2020 using WordPress 5.1 (Betty) released in October 2020.  We revamped the look and feel of BajanThings using the Astra Pro theme from Brainstorm Force.  As a reference point WordPress 5.0 (Bebo) which was launched in December 2018 introduced the new default block-based editor “Gutenberg”. We put off the move for two years to allow this major code update to shake out and during the period from 2018 to 2020 continued using the legacy classic editor over what then was called the Gutenberg editor.
  • The third incarnation of BajanThings was launched in April 2024 to coincide with the launch of WordPress 6.5 (Regina). Block themes are the future, its where all the WordPress development work is focused. BajanThings has now made the jump from using (Astra Pro) the old WordPress standard which is now called a classic theme to the new WordPress standard which is a called a block theme (aka FSE theme – standing for Full Site Editing). This third incarnation of BajanThings is built using the Ollie block theme and what was called the Gutenberg editor has been renamed the block editor.

We are now eagerly awaiting the release of Ollie Pro. We like the idea of having some on-hand support via a paid block theme.

What a journey… 3 incarnations of BajanThings that follow the transformation of WordPress from WordPress 4.0 in December 2014 to WordPress 6.5 in April 2024.

Update 14th June 2024 – based on our success in transitioning BajanThings to Ollie we have moved nearly all our family and friends websites and our test websites to Ollie. We did this by copying across the BajanThings Ollie Style zip file. All we then had to do was:

  • delete and redo the navigation links otherwise the parent and child highlighting within the navigation links did not work.
  • edit the header, footer and sidebar patterns.
  • adjust the colours.

The sites that have been transitioned previously used: T15, T17, TT4 and Astra Pro.

The sites transitioned include: 2092009.com, 321321.com, Decimus.com, EldrichCapital.com, HairOfTheDogThatBitYou.com, GodsonAssociates.com, HenleyMBA9091.com, Lukenya.com, Veg2Table.com, and XraYZulu.com.

We have held back transitioning two sites, both of which need fixes to the navigation block: Art-Treasures-Gallery.com which is a dual language site using PolyLang and has dual language navigation bars, and Ringwood-Dogs.com where we need a fix for collapsible mobile menu navigation.

We are now eagerly awaiting the release of Ollie Pro. Our top feature request for Ollie Pro would be:

  • Collapsible mobile submenus where the hamburger is used. The current default on mobile is unwieldy full menus. This is one area we have had negative feedback on our transition from classic theme (Astra Pro) to FSE theme (Ollie).
  • Time to Read block – similar to the one in Astra Pro (a Time to Read block is available in the Gutenberg plugin but this plugin is often very buggy as it showcases bleeding-edge and experimental features that might or might not make it into the core WordPress).
  • Comments Count block – similar to the one in Astra Pro (a Comments Count block is available in the Gutenberg plugin but this plugin is often very buggy as it showcases bleeding-edge and experimental features that might or might not make it into the core WordPress).
  • Scroll to the top icon – similar to the one in Astra Pro. Most of our post are long form. We are currently using a snippet that provides this functionality, but, it is often hidden by Google AdSense footer anchor ads.
  • Show caption for Feature images on Posts and Pages. We currently use a plugin that has not been updated for 2 years which has a few bugs when uses with FSE themes.
  • Option to define default templates for Pages and Posts at settings. The WordPress default template for Post is “Single Posts” and the default template for Pages is “Pages”. If your default Posts and Pages have a sidebar, then you need to amend the “Pages” template and “Single Posts” template. If sometimes you have Pages and Posts with no sidebar you then need to set up these templates, say: “Pages no sidebar” template and “Single Post no sidebar” template! So much easier at settings to set the default Page and Posts template!

All in all we are very happy with the look and feel of Ollie.

In January 2024 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) to the default WordPress block theme Twenty Twenty Four (TT4). From TT4 I moved onto playing with Spectra One, Neve FSE and Ollie.

This is the second part of the BajanThings transition from WordPress classic theme to WordPress block theme. It is a summary of our journey of updating BajanThings from a WordPress classic theme to a WordPress block theme.

WordPress is working fast to catch up on innovators such as Wix and SquareSpace and have over the last few years been driving change. That can be an uphill task when you have 60+% market share of the content management system (CMS) – there is a lot of inherited legacy you have to cope with!

Block themes are the future which is why I’ve opted to invest time now learning the new way.

“Change before you have to.”

Jack Welch, ex-CEO of General Electric.

I 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.  I am now eagerly awaiting the release of Ollie Pro.

With the release of WordPress 6.5 in early April 2024 there has a been a big improvement.

I think classic themes still have the edge and are more polished than block themes. Block themes are still a bit clunky compared to a classic theme and sometimes not very logical on how to change things…

Below are some of the things we have learnt transitioning from a WordPress classic theme to a WordPress block theme:

Getting your head around groups within groups – I found it takes a while to wrap your head around the concept of Groups within Groups which seems to be the way templates parts are put together. That was probably the biggest hurdle.

Content width, Wide width, Full widthJamie Marsland has an excellent video on this.

CSS Box Model: Margins and PaddingJamie Marsland has an excellent video on this.

Set up a staging site and experiment – you can blow away the site and play without impacting your production site. That is what we did.

Global Styles – before you jump into the templates adjusting typography on an case-by-case basis experiment with the global typography and block typography settings. I did it the other way around and had to go back and reset the templates to the default setting and re-start!

Navigation menu – I think the current incarnation of the navigation block is woefully inadequate. With Astra Pro for instance you could define the the Primary Menu and the Sub-menu menu colours and the hover colour and the active page menu colour. And you could define that when a sub menu was active the parent menu was highlighted. This makes it so much easier for visitors to know where they are by giving them a visual cue on the navigation bar. We have a temp fix on this using some CSS

/* Highlight current menu item as bold (uses child selector >a {...}) */
.current-menu-item >a {
    color: #4D34FA !important;
    font-weight: 600 !important;
}

/* Header Pattern - hover over-ride set to #4D34FA - Primary: Purple */
.wp-block-navigation-item a:hover {
    color: #4D34FA !important;
}

/* Highlight parent page link when on child page
Brian Coords 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: #4D34FA !important;
}

Mobile Menu – The mobile menu implementation is where we have had the most negative feedback having moved to a block theme. In the current implementation of the navigation block submenus on mobile cannot be collapses which leads to ungainly and hard to use mobile menus.

According to Kathryn Presner (@zoonini) a WordPress moderator “the Navigation block is designed to expand all submenu items in the mobile version, and there isn’t a built-in way to change that behaviour” – REALLY!

For mobile navigation having collapsed sub-menus was a built in feature of Astra Pro which BajanThings was previously built with! It makes navigation on a mobile device easier. @pareshsojitra has proposed a fix – hoping this will make it to WordPress core soon.

Padding – top/bottom , left/right – this takes a little getting used to, especially if you have a group with maybe a row block and column block….. each element has padding so it can be a bit hit and miss finding the correct padding!

Alignment – most high-level blocks have 3 options – None (which defaults to the content width), Wide width and Full width. Linked especially to Groups is the Layout setting and whether the inner block uses the content width (on or off switch). Getting to grips with these two issues was one of the biggest issues setting up the header group that included: Site logo, Site Title and Site Tagline. In many cases its knowing where to look for the setting! With practice it becomes intuitive.

Header – Site Title – the Site Title in the header appears with and underline. We had to add some CSS so that this is not underlined.

/* Remove link underline Site Title - Header */
.wp-block-site-title a, .wp-block-site-title a:focus, .wp-block-site-title a:hover, .wp-block-site-title a:visited {
    text-decoration: none !important;
}

300px wide right aligned images on mobile screens – we use a lot of 300px right aligned images within posts. On my mobile 300px wide images were appearing to float to the right but with 2 characters of wrapped copy down the left hand side of the image. This was fixed with some CSS:

/* Ollie Bug with 300px right aligned images on mobile devices. Use CSS Breakpoint.  On screens that are 480px or less do NOT float image */
@media screen and (max-width: 480px) {
    .wp-block-image.alignright {
    float: none !important;
    }
}

Additional CSS – with Astra Pro we had quite a lot of CSS to fine tune the site. With the Ollie theme under Appearance | Customise there are 3 settings: Site Identity, Homepage Setting and Additional CSS. Under Additional CSS we started by pasting in two pieces of CSS. Some CSS that: adjust the MEOW gallery translucence of the overlay background and some CSS that: allows Google maps to be displayed on mobile screens. We now also have included the header and the 300px fixes.

Edge cases – we still have a few edge cases we can live with:

  • 300px right aligned images – we still have some investigation to do with some older posts that used right aligned images…. a quick glance suggest in some case on our desktop the copy might not be wrapping around the right aligned image. Fixed on mobile but the fix is causing some issues when viewed on a desktop…
  • Google ads – appear to jump across the content and sidebar area.
  • Image attached in comments – are not constrained in a content area like in Astra Pro.

Bugs – during the process of the move we were able to confirm with the Yoast support team a Yoast bug. The Yoast Time-to-Read block only works if it is inserted directly into a Post. If the Yoast Time-to-Read block is used within a Template – then it does NOT work and displays 0 minutes to read!

With a lot of playing and watching lots of YouTube videos I mainly mastered blocks especially padding. The one block where the top and bottom padding is eluding me is the Separator Line block – especially if you add one to the bottom of a header and the top of a footer… that’s one to still investigate.


Below is the Summary written during the second week of April 2024 when the staging site matched about 95% of the production site

In summary we are nearly there – but not quite there. The staging environment is 95% there. We have a version nearly ready to go on the production site using an export of the Ollie theme from the staging site. With this version we have a little bit of editing still to do on the size of Global heading sizes to match what we already have using Astra Pro…

BajanThings - block theme conversion
BajanThings home page: Ollie vs Astra Pro. A pretty good match (mid April 2024).
BajanThings - block theme conversion
BajanThings posts page: Ollie vs Astra Pro. A pretty good match (mid April 2024).
  1. Navigation – adding visual cues to identify both the primary page and sub page (detailed in the original post with some work-arounds using the :has() selector)…
    Short-term fix: we can live with this and have a partial work-around suggested by Brian Coords using the :has() selector)
  2. Author page – out of the box the Author page has no Author bio. This is as the Author page uses the default All Archives Template.
    Fixed: It’s such a simple fix – however – I was VERY very slow in discovering this! In Templates click Add New Template – one of the options is for an Author Archives template. Having set-up this template all you need to do edit the template and add in Author Biography block. Now that Group includes 3 blocks: Archive Title (Author: Name), Term Description and Author BiographyET VOILÀ fixed. Now when an author page is requested the, author name, the author bio and a list of their posts now display!
  3. Posts Page meta – the current release of WordPress 6.5 does not include the Time to Read block or the Number of Comments block.
    Short-term fix: we will use the Gutenberg plugin to give us the Time to Read block and the Number of Comments block.
  4. Right aligned 300px wide images – With right aligned images that are 300px wide there are two issues:
    – With a300px right aligned image block the image tends to float to the right unless the section of the page is put into a group to constrain the container edges (dealt with in original post). Putting the whole content area into a Group does not seem to work.
    – On mobile – 300px images are not positioned nicely with wrap-around text two characters wide appearing (dealt with in original post).
  5. Formatting issue with meta – Where for instance we add the text “Post Categories:” in front of the Categories block we’ve not been able to get the list of Post Categories to wrap after the addition of “Post Categories:” in a para block… it appears on a separate line or is truncated in what appears as a mini column?
    Fixed – with the Post Categories block there is the ability to add a prefix or a suffix. Also within the row block as your are merging a number of blocks you need to adjust the block spacing…. SIMPLE when you know how!
  6. Global Styling – we have a little tidying up of typography still to do for the Base text and Headings and then for a few blocks such as Quote, Pull Quote and Title.
    TIP: – jump into adjusting the Global typography first. I started off by fixing them one by one in the templates which meant that if your changed the Global setting they did not transfer across. DUMB mistake!
  7. Search within Navigation – contrary to WP6.5 notes it appears you cannot add a search block to the navigation bar.
    Short-term fix: you can add a button so we have added a button with link to a new search page. A bit of a work-around!
  8. Scroll to the top icon – Our readers for long form posts like the scroll to top icon that is part of Astra Pro. We tried some plugins that provided this functionality but none were very successful. We have implemented a back-to-top svg icon via a Snippet which works.
    Ollie feature request: include a scroll to top icon block.

These are the additional template pages that come built into Ollie…

BajanThings - block theme conversion
Ollie built-in Add Templates

Below is the original post from Jan 2024:

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.

Here is the homepage of BajanThings built using Astra Pro:

BajanThings - block theme conversion
BajanThings home page – created using Astra Pro theme (January 2014).

Here is the homepage of BajanThings built using Ollie. 

BajanThings - block theme conversion
BajanThings home page – created using Ollie theme (January 2014).

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 it is 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 initially to fix with CSS – in April incarnation we did!
  • 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 “Scroll 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 */
/* ========== *
  • I remember now 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!

BajanThings home page in January 2024: left is Ollie version, right is Astra Pro version.





Leave a Reply

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.



Search BajanThings


Subscribe to BajanThings

If you would like to be kept informed when there are updates to BajanThings please click here to subscribe to the BajanThings e-mail update notification. Whenever there is new content added to BajanThings you will receive an e-mail telling you of the update.


Advertisment
SOLV Technology - Find . Inform . Engage.

A BajanThings Recommendation
Barbados Island life: photographs and stories by Craig Burleigh that celebrate Barbados island life in the 1970s

Notice Board




Contact BajanThings