Testing the WordLand Baseline Theme
Author: shanson
April 22, 2025 by Scott Hanson

This is a paragraph of text that comes above the list. These five random items were generated by AI.

  1. Mango
  2. Telescope
  3. Jazz music
  4. Notebook
  5. Bicycle pump

And this is a paragraph to finish this list.

It looks like WordPress is putting 22 px top and bottom margin on the paragraphs and the ordered list, and 18 px top and bottom between the list items (actually the margin is on the p element within the li).

Here are the same items as an unordered list.

  • Mango
  • Telescope
  • Jazz music
  • Notebook
  • Bicycle pump

And finally some text as a paragraph that appears below the list.

April 22, 2025 by Scott Hanson

For Change #5, I once again used an add_filter function to replace the HTML generated by WordPress, this time for the next/prev links. The links show only an arrow at 1.5em (24 px), no underline, with the post title in the title attribute of the anchor tag so it shows up as a tool tip.

April 22, 2025 by Scott Hanson

For Change #10, since we can include PHP code in the theme, we don't need to use JavaScript to filter out the Uncategorized category. We can use an add_filter function on the get_the_terms hook in functions.php to remove Uncategorized before the wp:post-terms block displays the categories.

The block also has a parameter for the prefix to the displayed list, so we changed it from "Posted in " to "Categories: ".

April 21, 2025 by Scott Hanson

I thought Change #11 would be simple. The icons are in a social-links block, and an RSS feed is among the supported services.

However, adding

<!-- wp:social-link {"url":"#","service":"rss"} /--> 

to the sidebar failed. I had to dig into the WordPress code itself to find the service is named "feed", not "rss". The correct syntax for the RSS feed icon is

<!-- wp:social-link {"url":"#","service":"feed"} /-->.

🙄

Hooking up the correct link to the icon is a task for later.

Update: We put an add_filter function in functions.php to put the actual feed link on the icon (Commit 38b1a45).

April 20, 2025 by Scott Hanson

For Change #4 some adjustments to the post body text were requested.

  • Font size should be 18px
  • Font weight should be 400
  • Font color black on white background
  • Values should be able to be changed in browser dev tools

In block style WordPress themes most of the CSS is in the theme.json file.

  • The font size in a post is set in core WordPress to the CSS variable –wp–preset–font-size–normal. "normal" is set in WordPress itself to 16px, so I set "normal" in theme.json to 18px.
  • I also increased the "small" font size from 16px to 18px. 
  • Under "typography" I changed the font weight from 300 to 400.
  • Also under "typography" the background was already set to white, so I left it.
  • Yesterday I posted on how to view and change CSS variables in dev tools.  
  • On my own, I also increased the size of "x-small" text from 14px to 16px, since the text in the sidebar and the footer seemed too small compared to the 18px post body text.

Once these changes are tested, they will become version 0.0.2 of the theme.

April 19, 2025 by Scott Hanson

In the list of change requests, regarding font sizes Dave asked: “Also if you can make it so those values can be changed in the browser. The way they have it set up, I can’t play with via the debugger, and that’s much faster than going back and forth in the editor.”

The font sizes in the base Retrospect theme are set using CSS variables. I’ve never worked with CSS variables before, so I asked my friend ChatGPT 4o: “In the Chrome dev tools, I am viewing a site where the font-size is set with a css variable. How can I try out a new font-size in the dev tools?”

ChatGPT answered:


Nice — Chrome DevTools is great for this kind of experimentation! If the font-size is set using a CSS variable, you can easily test a new value by overriding that variable or applying a direct style.

Here are your options:


✅ Option 1: Override the CSS variable in DevTools

Example situation:

The element has this style:

font-size: var(--wp--preset--font-size--small);

To test a new size:

  1. Open Chrome DevTools (Right-click > Inspect).
  2. Find the element in the Elements panel.
  3. In the Styles pane on the right, find the rule that uses the variable.
  4. Right below it, add a new line and override the variable:
--wp--preset--font-size--small: 24px;

You’re directly changing the variable value — everything using it will update.

🔁 If multiple elements use that variable, they’ll all reflect your test size immediately.


✅ Option 2: Add a temporary inline override

If you just want to test the result on a single element without affecting others:

  1. In the same Styles panel, add:
font-size: 24px !important;

This overrides the variable usage completely.


✅ Option 3: Modify the variable on the :root or body

Some variables are defined globally on the :root or body element. You can go to the Styles pane for html or body, find the declaration like:

:root {
  --wp--preset--font-size--small: 16px;
}

And change it there to:

--wp--preset--font-size--small: 24px;

That updates the variable site-wide — great for testing global changes.


🎯 Pro Tip: See the resolved size

If you hover over the computed font-size in DevTools, Chrome will show you:

  • The computed pixel value
  • The source CSS variable

April 18, 2025 by Scott Hanson

I implemented Dave's Change #2 first, as it was the easiest to do. 

  • I first set up a child theme to Retrospect, as described in the WordPress support docs. Files and settings in the child theme override those in the parent theme, and all of my changes will be in one place. The child theme is on GitHub at https://github.com/scotthansonde/wordlandBaseline
  • I copied over the parts/footer.html file from the parent theme folder to the child theme folder.
  • I edited the text as requested. The footer now reads "Written in WordLand, running on the WordPress platform."

Update

  • Corrected the text and changed the text to black (using theme-5 instead of theme-3 in footer.html)
March 26, 2025 by Scott Hanson

If I intend to use WordLand permanently, it would be silly to have a site named wordland-test.shanson.de. So I'm changing the name to wordland.shanson.de. Let's see if that breaks anything. 😃

  • Changed the settings for the docker container running WordPress to accept connections from a second domain 
  • In the WordPress General settings, change the WordPress URL and Site URL 
  • At wordpress.com, the new URL already shows up under Sites 
  • In WordLand, log out of wordpress.com and log back it. The new URL shows up from my site.
  • Try a new post to the new URL. That's what this is.
  • Check the WordPress RSS feed. Only the new domain is contained in the feed. The feed is visible at both the old and the new feed URLs.
  • The WordLand RSS feed uses the new URL for the new post and keeps the old URL for older posts. That's OK, since the old URLs still work, and will eventually be redirected to the new URL

 

So I didn't really break much of anything.

March 10, 2025 by Scott Hanson

This time last year, my wife was preparing for emergency heart surgery and we had no idea why. Her pulse was racing, she was short of breath, and the cardiologist said she had the heart of an unhealthy 80-year-old (she was 60 and healthy). The song "Beautiful Things", released 6 weeks before, was a reminder of how fleeting the good things in life, and even life itself, can be.

Please stay
I want you, I need you, oh God
Don't take
These beautiful things that I've got

A few days later we had the answer, and the solution. She had been born with a bicuspid aortic valve, with two flaps instead of three. Her aorta had expanded over the years to compensate, but was starting to become clogged. The valve was replaced, and today she is as good as new.

That was a year ago Friday, and this week we will be travelling to Lanzarote (Canary Islands, Spain) to celebrate her new first birthday.

Last update: 6/30/25; 4:46:04 PM.