Create a Full Site Editing version of the genesis-SB theme

[bobbingwide]

Requirements

• Replicate the functionality of the genesis-SB theme as used on https://seriously-bonkers.com

Approach

• Implement using Full Site Editing ( FSE )
• Attempt to create most of the theme using the Site Editor ( beta ).
• Attempt to style using the Site Editor ( beta ).
• Incorporate the react-SB page as a block
• Use modern CSS to style the grids
• Implement with a side bar
• Improve performance of both server and front end
• Dont worry too much about i18n
• Develop blocks which are missing as blocks in the theme or single block plugins.
• Allow server side rendering overrides a la Fizzie.

Proposed solution

• Clone live site and develop locally in s.b/bigram
• Start with an empty theme - just enough to be able to use FSE
• Develop a home page with template parts suitable for other pages
• Develop a 404 page early on ... for the #fse-outreach-experiment
• Develop a singular template with post-author, metadates, etc

[bobbingwide]

I cloned the live site on 19th March. The most recent post ( a bigram ) was Seize Bees, in Category: Sound Bound, s-word: seize, b-word: bees.

The heading and main menu is

The first half of the first post on the home page is

The bottom of the post is

The next block of posts displays thumbnails in up to 4 complete rows of 4 posts.

The final block are the posts that don't have images followed by pagination.

• There's a sidebar with 4 widgets
• and a full width footer area with 3 widgets
• then another centralised widget with site and copyright info.

[bobbingwide]

Attempt to style using the Site Editor ( beta ).

I tried to style the header using the Site Editor but had to resort to using style.css for a few reasons

1. I had major problems with WordPress ( well PHP ) rejecting my experimental-theme.json due to a syntax error that PhpStorm wasn't reporting.
2. I needed to use CSS that Gutenberg isn't designed to work with.
3. The assets/alignments-front.css, generated by new-empty-theme.php was more of a hindrance than a help. Alignment of blocks is still a mystery. I'm not at all sure how much success I'm going to have with the sidebar.

[bobbingwide]

Styling the menu was the next challenge.

• I copied the CSS from the genesis-SB theme.
• I changed some of the selectors from .nav-primary to nav and .genesis-nav-menu to .wp-block-navigation or .wp-block-navigation__container
• then had to add a few more bits to override the default settings for the navigation menu.

I haven't yet managed to:

• been able to align the menu in the center, as shown here from the original.
• style the sub-menu items

The other challenge with the sub menus is that they're created using the menu-in-menu plugin, which loads up submenus from another menu. The first 4 items have submenu items which are defined in other menus. The last item ( SB ) doesn't have submenu items.

I haven't yet tried to achieve the correct menu highlighting, as done for Fizzie.

[bobbingwide]

Re: creating the first post on the home page... I think I'll create the problems I had as a separate issue.

[bobbingwide]

After I accidentally deleted the database version of index.html, while attempting to develop 404.html for #FSE-outreach-experiment call #3, I reinstated the menu and found the button to center align it.

[bobbingwide]

But then I updated to Gutenberg-WordPress-source and the menu styling changed

Some extra padding or margin has appeared.
Note: I had fixed the problem where the right padding was less than the left padding when the menu item wasn't selected, but that's gone wrong again, except for the last item ( SB ) which doesn't have a submenu.

[bobbingwide]

It also appears that the padding in the header has changed a bit. Either the search box is lower or the site logo and site title are higher.

[bobbingwide]

Develop a singular template with post-author, metadates, etc

Raised a separate issue. #20

[bobbingwide]

Develop a 404 page early on ... for the #fse-outreach-experiment

Well, that was the plan in 2021. It's time to raise a new issue to Develop a 404 page.
Raised a separate issue #22

[bobbingwide]

Incorporate the react-SB page as a block

Raised a separate issue #25

[bobbingwide]

Sb v0.2.1 was installed on seriouslybonkers.com on 11th May 2022 with the latest version of:

• bigram ( v0.4.1 )
• Gutenberg ( v 13.1.0 )
• other plugins that deliver required functionality

I've updated a number of pages to match the local changes in s.b/bigram.

It's working as expected, with some minor styling issues on my iPhone 13 mini:

• metadates wrapping
• no margins
• drop down menu styling for Sulphurous Brewmasters and Some Background
• font for tables could be smaller and/or horizontal scrolling supported
• Site Building menu minimises to hamburger

[bobbingwide]

It's working as expected, with some minor styling issues on my iPhone 13 mini:

I've raised #33 to address this. Closing the original issue