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

marybaum commented 1 year ago

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

marybaum commented 1 year ago

Ready for review #1 in this Google doc!

marybaum commented 1 year ago

Buehler?

😜

justintadlock commented 1 year ago

@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 commented 1 year ago

Oops! Of course!

marybaum commented 1 year ago

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

bph commented 1 year ago

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 commented 1 year ago

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

Opened!

justintadlock commented 1 year ago

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 commented 1 year ago

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

justintadlock commented 1 year ago

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

marybaum commented 1 year ago

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

justintadlock commented 1 year ago

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):

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

And many many MANY thanks for the code snippets!

marybaum commented 1 year ago

Ready for second review!

bph commented 1 year ago

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:

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

Post-publishing checklist

[x] add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
[x] 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 commented 1 year ago

Will do!

bph commented 1 year ago

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

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

marybaum commented 1 year ago

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 commented 1 year ago

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 commented 9 months ago

schedule for social media on Sat 2/23

WordPress / developer-blog-content