#151 Type series post 3: Setting body-conscious type for long-form text

[marybaum]

No description provided.

[marybaum]

New post title. A great read: four steps to your best body copy ever

[marybaum]

Ready for review #1 in this Google doc!

[marybaum]

Buehler?

😜

[justintadlock]

@marybaum - Sorry for not getting to this earlier. I've been on a different project for the last month, but I'm back working on the Dev Blog now.

Can you open the Google Doc up to public comment?

[marybaum]

Oops! Of course!

[marybaum]

https://docs.google.com/document/d/1IyjJjDRgc2eFJ6cXzQZDV2m7q0qCgLPL-qY_0_PTaZk/edit?usp=sharing

[bph]

Hi @marybaum in case you were wondering why no one comments on your what I am sure is a brilliant article.
You need give comment or editor access before we can review it.

[marybaum]

The problem was between the keyboard and the chair: error ID#10T.

Opened!

[justintadlock]

Overall, the writing is excellent. No issues there.

The biggest issues seem to be with the theme.json examples. As far as I can tell, none of them are valid. Well, they're valid JSON code, but I don't think they're valid with the most current theme.json schema.

Edit: I'm happy to write out some code examples for this and add them here to the ticket.

[marybaum]

That would be lovely, Justin, and good for me to know, Thanks!

[justintadlock]

Cool. I'll work on those tomorrow and share them here.

[marybaum]

I play tennis on the pickleball court, and it would appear you've caught me writing CSS in a theoretical JSON file ... ;-D

[justintadlock]

I've added three code sections below, corresponding to the steps in your post. These are full theme.json examples, which includes the necessary version and usually-best-to-include $schema. Typically, it's best to add those to theme.json examples to clarify the structure.

Some handbook links related to your theme.json code (these are from a new chapter just published this week):

• https://developer.wordpress.org/themes/global-settings-and-styles/settings/layout/
• https://developer.wordpress.org/themes/global-settings-and-styles/styles/styles-reference/

Well, there's probably several other handbook links that might be worthwhile, so feel free to add any others you think would fit.

Step 1

Basically just setting the default content width here. I haven't used ch with theme.json, but I'm fairly certain it's a supported unit.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "66ch"
		}
	}
}

Step 2

My guess is that you want to specifically set the global line-height here instead of focusing on an individual block/element (this can always be overwritten for more specific cases, like for headings). That's what I'd do anyway, but we can always just target paragraphs too.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "66ch"
		}
	},
	"styles": {
		"typography": {
			"lineHeight": "1.5"
		}
	}
}

Step 3

A few notes on the code below:

• I targeted styles.elements.heading, but you can also target styles.elements.h2 if you only want to change <h2> elements.
• There's no way to style all lists, but you can target styles.blocks.core/list.
• For the list styling, I combined your left padding + margin into a single padding-left. You almost never want to touch horizontal margins in WP because it will either break some layout things or layout CSS will overrule your code.
• blockGap is the best way to achieve spacing between elements. I'd only touch vertical margins to fine-tune a few things (I also do this in CSS instead of theme.json just because of some...ahem...wonkiness).

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"layout": {
			"contentSize": "66ch"
		}
	},
	"styles": {
		"spacing": {
			"blockGap": "2rem"
		},
		"typography": {
			"lineHeight": "1.5"
		},
		"elements": {
			"heading": {
				"typography": {
					"lineHeight": "0.9"
				}
			}
		},
		"blocks": {
			"core/list": {
				"spacing": {
					"padding": {
						"left": "2.5rem"
					}
				}
			}
		}
	}
}

[marybaum]

Thank you very much!

I was doing something a couple of days ago where I started to tumble to the fact that the order of things is important in theme.json — it was obvious that I had tried to nest some things in a way only a very large cat would attempt (I know I weigh 16 pounds! But I used to fit in that box!)

[abhansnuk]

Is there anything more you need on this @marybaum . I did a review two weeks back so just checking in as see this ticket was still open and there was a link to a published post yet.

[marybaum]

Hope to finish it right now (well in a couple of hours of focused work) I let myself get hijacked by some things here on the ground, but am coming back to the blog for regular participation. Thanks for asking!

[marybaum]

And many many MANY thanks for the code snippets!

[marybaum]

Ready for second review!

[bph]

That's a great primer to content spacing and readability. I had minor comments...

@marybaum why don't you move it to the CMS and we'll get it ready for publishing?

Pre-publishing checklist:

• Post Title in Sentence case
• Use "Center Column" template
• Are Category or Categories selected?
• Are Tags identifies?
• Is there an explicit Excerpt?
• Do all images have an alt-text?
• Assign or upload a featured image
• add copy for a social post as comment to this issue (example)
• Props added? (See Guidelines)
  🙌 Publish! 📗

Post-publishing checklist

• add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
• close the issue with a comment to link to the published post
• close the accompanying discussion with the link to the published post.

And if you are already off, Happy Thanksgiving 🦃 🍠 🥧 🍗

[marybaum]

Will do!

[bph]

Published, A great read—four simple steps to your best body copy ever

• Still needs a copy for social post on Facebook/Twitter/LInkedin.
• and post publish task list.

[marybaum]

Social copy:

Whether it's blog posts, documentation or sell copy, great typography can take your long copy from a hard slog to a great read. In just four steps! Find out how, in part 3 of the WordPress Developer Blog's type series.

[marybaum]

Closing this issue as published: https://developer.wordpress.org/news/2023/12/a-great-read-four-simple-steps-to-your-best-body-copy-ever/

[bph]

schedule for social media on Sat 2/23