Customizing Quadrat – A Blockbase Child Theme

Note: This post is part of leaning efforts to understand and use full site editing (FSE) and block-based themes. This learning post is still in active development and updated regularly.

In the previous learning note post, I explored Blockbase theme to familiarize its file file structures, template-parts, block templates and other files including some styling. Blockbase is only a bare-boned theme with some very basic styling examples provided via its global theme.json file. In this learning post, I attempted to modify its styling and added customization to make it a more functional theme.

At the time of this writing, there are only eight block-based experimental themes in WordPress theme directory including the TT1 Blocks developed and maintained by WordPress theme team. However, I reached to Automattic theme team‘s work-in-progress experimental block-theme projects (seedlet-blocks, mayland-blocks and quadrat) for styling inspirations.

This post is part of my multi-part learning post to customize Quadrat child theme for my own personal project site, which I plan to tweak for a while but for starting, I am modifying the most basic fonts, typography, link color control etc.

Learning Goals
Part 1: Modifying Fonts & Basic Typography (this post)
Part 2: Adding Custom Block Patterns
Part 3: Creating a RSS Blog Feed page using RSS Block
Setup and Workflows

For this project, I install a local test WordPress site with Flywheel Local and imported theme test data. I also added the latest TT1 Blocks (v0.4.7) and Blackbase (v1.0.1) experimental block-based themes from the theme directory. Gutenberg plugin is in active development iterations and I used the latest version (v11.0.0) in the project.

Side Note: At the time of writing, the Blockbase theme is in active development at GitHub by Automattic theme team and occasionally I sneak peak the latest development versions at GitHub and added into my project. Likewise, I also took a styling and development inspirations from others block-based experimental themes at GitHub including mayland-blocks, seedlet-blocks and quadrat (a universal theme).

Child Theme in Block-based Theme

In Blockbase, currently a child theme can be created with a child-theme.json and following these instructions from theme readme file:

  • Add a package.json, style.css and empty index.php files to your theme.
  • Your child theme’s theme.json file will be built by combining Blockbase’s original theme.json file and your child’s child-theme.json. That is the file where your configuration values live (you only want the values for variables that are different from the parent there). To generate the combined file, run npm run build from inside your theme’s folder or run npm run build:child child-theme-slug from inside Blockbase’s folder.
  • Extend the parent’s templates that you want to customize or add new ones where needed following the template hierarchy.
  • Using npm run start will both watch changes inside the sass and assets folder and changes to the child-theme.json file.

Note: For this project, I wanted use just an editor without build process and worked directly on its original theme.json file to make any modification using good ol’ VS Code editor.

Modifying Layout

The Blockbase custom layout width properties for contentSize and wideSize are set to 620px and 1000px respectively. I wanted to have slightly wider width of both and set as follows using clamp() function.

"layout": {
	"contentSize": "clamp(16rem, 90vw, 52rem)",
	"wideSize": "clamp(16rem, 90vw, 80rem)"
	},

The above container width inspired by this post (and many others) is set at 90vw (90% of view port width) with 52rem as maximum width value.

After WordPress 5.8 updates, the clamp() function as container value for layout width does not work and had to revert back to only rem or px value.

Adding Google Fonts

The Blockbase theme uses ‘Segoe UI’ system fonts but I wanted to learn to add new Google fonts. Looking at its function.php file, it uses a blockbase_fonts_url() function to register Google webfonts and pluck out font-family name register in its theme.json file.

With this function in place, any new google fonts can be directly in theme.json file as shown below in Quadrat theme.

// source: Quadrat theme
"fontsToLoadFromGoogle": 
       [
	"family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700",
        "family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700"
	],

In the above example from Quadrat theme, DM Sans Google fonts are registered in its theme.json file and defined as shown below. Then the fonts slug ‘dm-sans‘ is used to define this new google font through out the theme. In the example, I also added Google Public Sans fonts and defined similarly.

"fontFamilies": [
		{
		"fontFamily": "\"DM Sans\", sans-serif",
		"slug": "dm-sans",
		"name": "DM Sans"
		},
                {
		"fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 
                    'Helvetica Neue', Helvetica, sans-serif",
		"slug": "public-sans",
		"name": "Public Sans"
		},
],

In my project, I wanted to use Google Public Sans for all heading and DM Sans for the body and defined my theme.json‘s Custom properties as follows:

"custom": {
   ...
   ...
   "body": {
		
         "typography": {
	     "fontFamily": "var(--wp--preset--font-family--dm-sans)",
	     "lineHeight": 1.7
		}
	    },
    "heading": {
	  "typography": {
	     "fontFamily": "var(--wp--preset--font-family--public-sans)",
	     "fontWeight": "400",
	     "lineHeight": 1.125
	   },
	     "h1": {
	        "fontSize": "clamp(1.8rem, 2rem + 7vw, 5.5rem)",
                "fontWeight": "700" 
	        },
	    "h3": {
	        "fontSize": "clamp(1.65rem, 1.65rem + 5vw, 2.5rem)",
              	"fontWeight": "500"
	      }
	   },
       }
      ...
      ...

For styling post headings, I borrowed defining h1 and h3 heading from quadrant blocks and plan to style post title of index and archive template with h3 (smaller font size) whereas single post title with h1 (much larger fonts)

Defining Body Font Size

The Quadrat theme uses 6 levels of front sizes from tiny (15px), normal (18px) to huge (48px) and didn’t changed at this stage but usually I like to play with font size often when I start using the theme on daily basis.

Defining Element Font Sizes

Recently I have become a fan of fluid typography and have been using clamp() function to define my fonts in my recent projects. Using clamp() function, I defined h1-h6 elements as follows:

"elements": {
    "h1": {
	"typography": {
			"fontSize": "clamp(1.9rem, 2rem + 7vw, 5.5rem)",
			"fontWeight": "700",
			"lineHeight": 1.2
		}
	},
    "h2": {
	"typography": {
			"fontSize": "clamp(1.7rem, 1.8rem + 6vw, 4rem)",
			"lineHeight": 1.2
		}
	},
	"h3": {
		"typography": {
			"fontSize": "clamp(1.65rem, 1.65rem + 5vw, 2.5rem)",
			"fontWeight": "400",
			"lineHeight": 1.2
		}
	},
	"h4": {
		"typography": {
			"fontSize": "clamp(1.5rem, 1.5rem + .75vw, 2rem)",
			"lineHeight": 1.4
		}
	},
	"h5": {
		"typography": {
			"fontSize": "clamp(1.5rem, 1.5rem + .33vw, 1.5rem)",
			"lineHeight": 1.4
		}
	},
	"h6": {
		"typography": {
			"fontSize": "clamp(1.25rem, 1.25rem + .125vw, 1.125rem)",
			"lineHeight": 1.4
		}
	},

The above font-size will be updated as the customization process progresses.

Defining Body Typography

For the body fonts and font size, I left the Quadrat typography style as it is (see below):

"typography": {
	"lineHeight": "var(--wp--custom--body--typography--line-height)",
	"fontFamily": "var(--wp--custom--body--typography--font-family)",
	"fontSize": "var(--wp--preset--font-size--normal)",
	"fontWeight": "400"
	},

The normal 18px body font size looks OK at this stage.

Custom Colors

For colors and color palettes, for this project I just used very basic colors, except I would like to link color styling slightly differently. Because, I would like to use different background color to footer and header, I modified Quadrat color pallets as follows:

"color": {
	"gradients": [],
	"palette": [
		{
			"slug": "primary",
			"color": "#b3b9c5",
			"name": "Primary"
		},
		{
			"slug": "secondary",
			"color": "#151853",
			"name": "Secondary"
		},
		{
			"slug": "linkcolor",
			"color": "#55ACEE",
			"name": "Link Color"
		},
		{
			"slug": "foreground",
			"color": "#b3b9c5",
			"name": "Foreground"
		},
		{
			"slug": "darkbackground",
			"color": "#000",
			"name": "Dark Background"
		},
		{
			"slug": "background",
			"color": "#1f2022",
			"name": "Background"
		}
	]

For ease to use, the above color palettes were further defined into single word variables as follows:

"color": {
		"foreground": "var(--wp--preset--color--foreground)",
		"background": "var(--wp--preset--color--background)",
		"darkbackground": "var(--wp--preset--color--darkbackground)",
		"primary": "var(--wp--preset--color--primary)",
		"secondary": "var(--wp--preset--color--secondary)",
		"linkcolor": "var(--wp--preset--color--linkcolor)",
		"selection": "var(--wp--preset--color--secondary)"
	},

The dark background color will be used for the header and footer background and background color for the body content background.

Wrapping Up

The fonts, typography and color palettes elected in this post is just the starting point and will be updated frequently in the project as this project is work-in-progress project.

Useful Resources

The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively. Please to refer original posts for more detailed information.