Develop the Written theme to replace Genesis-HM on herbmiller.me

bobbingwide commented 3 years ago

I started developing the Genesis child theme genesis-hm in November 2015. It replaced the Artisteer based theme that I'd been using since 2012.

I very recently wrote a short poem entitled "My Favourite Theme". It's going to be published on/around the 12th July. The last verse is.

So I think you'll agree,
it's a pretty safe bet
that my favourite theme...

Well, it's not written yet!

I knew it wouldn't be long before I replaced another Genesis child theme with an FSE theme.
I've decided to call this new theme Written.

I've made the assumption that sometime in the future "Written" may become my favourite theme, if only for a fleeting moment. Then either the last line of the poem will have to change, or I'll have to write an addendum.

I now have my favourite, 
I think I am smitten.
I didn't have a while ago,
but, right now, it's "Written".

Requirements

An experimental Full Site Editing ( block based theme ) to replace Genesis-HM.

Implementation plan

Develop to use with the latest version of Gutenberg
But also attempt to test with WordPress 5.8.
Try to do as much of the CSS using Global Styles
Thereby satisfying Call #8: Thrive with theme.json
Activate on/before the 7th, to discuss during the hallway hangout
Which needs to be completed by 14th July.

bobbingwide commented 3 years ago

Proposed solution

[ ] Header unchanged
[ ] Colour palette and background colours unchanged
[ ] Sidebar "widgets" unchanged
[ ] Consider changing the posts display to show a 2 column grid with shorter excerpts
[ ] Which may mean increasing the width and wide width
[x] Continue to support images which adjust in size when hovered over.

bobbingwide commented 3 years ago

I've been struggling to redevelop the header just using Global Styles and theme.json.

I can't get the site-title block to accept a custom font size unless I allow the custom font size to be changed globally.
I also have difficulty knowing what "Default" means when shown in a select list.
I want to be able to see exactly how each setting is defined.
Perhaps, for my themes, I should make the label the same as the actual value.

There's also the fact that in the original theme the following CSS is being used.

html {
    font-size: 62.5%; /* 10px browser default */
}

I have to allow for this when setting fontSizes using rem; so 62.5% of 4.1 is 2.25.

Then there's the question of removing the text decoration on the site title.

bobbingwide commented 3 years ago

The metadates.html template part isn't quite how it was in genesis-hm.

The Categories and Tags lines need prefixes
The Tags separator is a vertical bar rather than a comma
There's no | in the metadates line
I don't know how to style the is-style-griddled to make it left justified
The horizontal separators are the wrong colour and width

bobbingwide commented 3 years ago

Try to do as much of the CSS using Global Styles

During the Hallway Hangout I mentioned some of the problems I had with attempting to use Global Styles in theme.json to do all the styling. It was explained that the idea of theme.json is to define some settings, bit that style.css and other style files would be needed to implement some of the CSS required by the theme.

The challenge is knowing when to use theme.json and when to use CSS.

I've had to implement CSS solutions using is-style- prefixed CSS class names for a number of components. For metadates.html I used display: grid. For the Categories and Tags parts I think CSS flexbox is better. I think I'll be changing metdates to display: flex as well.

bobbingwide commented 3 years ago

It's not possible using theme.json or Global Styles to style the query pagination to be anything like what I had in genesis-hm.

and what you see in the Site Editor is different from the front end

bobbingwide commented 2 years ago

written v0.2.1 is now installed on herbmiller.me I may not have implemented all of the Proposed solution. Well not much at all really...

Proposed solution	What I actually did
Header unchanged	menu isn't styled as before
Colour palette and background colours unchanged	Similar except for sidebar
Sidebar "widgets" unchanged	Yes but odd even background not implemented
Consider changing the posts display to show a 2 column grid with shorter excerpts	Not done
Which may mean increasing the width and wide width	Not done

Closing anyway

bobbingwide / written