• Lithosphere: a theme seed

    I took some time over the holidays to plant a seed and create a new theme for this and a few sites. I had a few objectives this time around that I wanted to achieve and the biggest of these was to create a foundation I could experiment from over the coming year.

    • Keep it simple but with readability.
    • Where possible have everything from the block editor, including navigation.
    • A minimal base to build upon.
    • Share my journey (starting with this post).

    I began with a simple sketch, starting to think about what I would like this theme to be.

    Forming Lithosphere

    Commons Wikimedia image

    The lithosphere is the solid, outer part of the Earth. The lithosphere includes the brittle upper portion of the mantle and the crust, the outermost layers of Earth’s structure. This theme is a foundation which will be built on by the editor. With the functionality below and styling above.

    I began by using the Gutenberg starter theme as my base. It’s a terrific boost to any theme project. I didn’t have to reinvent any wheels and was already off to a great start.

    I picked ‘Libre Franklin’ as the font; it balanced readability with the larger, crisp font sizes I wanted. I decided to make the typography scale bigger than have in the past on themes to improve readability. Colours, again I went for blue with a brighter variation on hover.

    The most prominent styling element was a top strip which had the title. I choose to use emojis for titles. I was pretty happy to discover you could do that in the Customizer. I then added a little background to it to create a logo.

    Navigating

    I didn’t want to have traditional navigation. Previously, I was using a reusable block made from a list and styling for navigation. Now with the new navigation block, I could use that to create my own.

    I wanted to link my sites through this navigation, having each going to a type of content. By doing this, it was a way for me to bring in some different sites I use and over have them separate to titles, link to what they are specifically about. I also linked in my reading list and speaking page. As a final point, I tied in a contact email using a plane emoji.

    One cool thing I found was the ability to copy and paste blocks even across sites. I have rolled this theme out onto various sites to tie in with the navigation and each one I could add the navigation and social links block by copying – so cool!

    Layout using blocks

    For the front page, I wanted to create a summary layout. The latest posts block was just perfect for this. I added it and set to a grid layout. You can adjust the excerpt length, so I did that. It’s a great way to create a starting page to content.

    I also added in a search block to the top of the page and a quote block to frame the latest posts. Building layout using the blocks gives me the flexibility to change what I want effortlessly.

    Block styles

    Along the way, I brought in some styles to particular blocks. For example, the search block got a wide style using the following code:

    .wp-block-search{
  background: var(--border-color);
  padding: 20px;
}

.wp-block-search .wp-block-search__input{
  background: var(--bg-color);
  max-width: 780px;
}

    I also styled the ‘read more’ link:

    ul.wp-block-latest-posts .wp-block-latest-posts__post-excerpt a{
  font-size: 80%;
  font-weight: 400;
  color: #888;
}

    I also brought in some adjustments for the navigation block, and social links as the default Gutenberg starter theme has some margins I didn’t want for those list styles.

    Adding dark mode switch

    The foundation of my theme was in place, but I wanted to add a few extras. I have only got around to one of those so far, and that’s adding dark mode. I remember having one on my blog that would change the season and having lots of others – they were such a part of sites for a while. I wanted to simplify back to a light and dark mode as for me often dark mode is easier to read, but it’s personal so having the option makes sense.

    My searching for a solution took me down the path of using CSS variables. I ended up finding a tutorial by Ananya Neogi ‘Create A Dark/Light Mode Switch with CSS Variables’. After some adjusting to suit my styling, I ended up with the switch that is here. It’s an exciting solution using:

    [data-theme=“dark”]

    Here are the variables I settled on for now:

    :root {
  --primary-color: #046b99;
  --secondary-color: #00cfff;
  --font-color: #191e23;
  --bg-color: #fff;
  --heading-color: #191e23;
  --border-color: #ddd;
}

[data-theme="dark"] {
  --primary-color: #046b99;
  --secondary-color: #00cfff;
  --font-color: #eee;
  --bg-color: #161616;
  --heading-color: #aaa;
  --border-color: #444;
}

    Always something to do

    I on purpose am ok with the theme being pretty rough and ready at this point. I want to see it as a work in progress over the coming months. As more features get added to the block editor, I want a space where I can explore them. I’ll try and share those as I do.

    Here is a list of a few things I want to do coming up:

    • Create some editor layout templates for the portfolio, reading list, speaking and front page.
    • Improve dark mode styling for blocks and form elements.
    • Iterate on smaller device styles.
    • Find a way to change quotes. Maybe a quotation block could be my next block to make.
    • Editor styles to reflect front: some don’t now so want to tie back.
    • Add a day/night option to the header. Possibly, also add weather to it.

    I also have a fair bit of styling to polish for things like comments and forms. As a bonus to doing this, I also got a few bugs and ideas for enhancements.

    If you’d like to see the work so far, it’s all up on GitHub, and I’ll be updating there.

    Block boost

    There is no doubt, creating a theme and the layouts were faster because I use blocks. I do recognise the considerable push forward that the Gutenberg starter theme gave me. It’s incredible how you can create almost a full layout using just blocks, a taste of amazing things to come with site-building this year.

    I am looking forward to from this base theme exploring as the months unfold.

  • Gutenberg design basics

    Have you ever wondered what something is called within Gutenberg? This guide is meant to help by giving the names and the expected behaviour of some of the basic design elements. If you want to build blocks and extend Gutenberg, knowing what to use or not is important. This is meant as a starting point, not a full description of all design elements.

    Toolbars:

    There are two toolbars:

    • The Editor toolbar: This controls document tools like undo and information. Also within this toolbar are preview, publishing and saved state.
    • The Block toolbar: This controls block specific behaviour, for example in a paragraph block bold/italic and adding a link. As a guide, place common settings that a user would want for every version of that block in the block toolbar.

    Settings:

    These are also referred to as 'advanced settings' when linked from the block toolbar.

    There are two settings:

    • Document: This gives you global settings for the entire document like visibility and reviewing. Think of this like your settings panel for your content.
    • Format: This is per block and changes depending on the block and if it even has settings. These differ from the toolbar as are secondary block settings, for example adding a CSS class (in most blocks) and doing styling that isn’t as common. 

    More menus:

    These come in 2 locations:

    • Document: These contain document settings such as switching display modes, position of toolbar. Anything that is not specific to a block or the document would go here, for example display modes or something like a spell check.
    • Block: When beside the block there are commonalities found in all blocks:
      • Hide Advanced Settings (if visible) or Show (if hidden)
      • Edit as HTML
      • Remove
      • Convert to Reusable Block
      • Convert to another Block and a list of those blocks.

    As a guide you’d not be adding to these menus in a custom block. You’d ideally use something like the advanced settings here.

    Add:

    It's worth noting that insert is changing to add potentially. There are multiple ways to add a block in Gutenberg to content:

    • Toolbar (although this may be removed)
    • Above a block: a ‘+’ appears on hover
    • Below the block: a ‘+’ shows all the time to interact with

    Library:

    The library appears when you click to add and then you see all blocks available. You can also search for the block by name. Blocks are in sections both through tabs and in within each section there are categories.

    Recent blocks

    Recent blocks also shows all the blocks a user has been using frequently.

    Document outline:

    You can view information about a block by clicking ‘i’. This contains helpful document information like number or words written.