Dan Antion

Old but I Can Fix This – #1Linerweds

I haven’t seen any elderly…yet.

My post on Monday about Reusable Blocks in the Block Editor spawned a few questions. I tried to answer them in the comments, but one from Janis over at Retirementally Challenged, stands out because it allows me to be geeky and share a one-liner. Here’s the best part, you get the one-liner before the geek. So, if the geek doesn’t interest you, you can skip to the gallery.

Janis was complaining about the fact that bulleted lists don’t line up with text on her blog. She noticed that my list was indented, and she wondered if there was a trick to that. There is, that’s the geeky part, but there’s also a story.

When I first tried using the Block Editor in the spring of 2019, I was concerned when I didn’t see any way to indent a paragraph. I use this feature often in my posts to set off an explanation, or a somewhat irrelevant bit of information. I know, I was surprised that I include those, too.  Anyway, I contacted the Happiness Engineers (HE) to ask for help.

The HE suggested that I use a Quote block. I explained that I use Quote blocks for, quotes, but that sometimes I like to just indent a paragraph. The HE explained that, other than using a Classic block, there was no way to do this in the “new and improved editor.” I ask why they would eliminate a simple formatting feature that is used, by my observation, by many people. He explained that “indenting is an old-school formatting style that is no longer in fashion.” He added:

“By indenting a paragraph, you’re showing your age!”

We won’t go into what I said.

OK, the geeky part is next. If you want to skip that, click here. By the way, the click here thing, is using a feature of the Block editor, which lets you insert an “anchor” in your post. I put an anchor at the block explaining the One-Liner Wednesday challenge and that link above points to that anchor.

Disclaimer – The explanation below includes instructions for creating and using custom CSS in your theme. If you are using the free plan, you won’t have this option. I’m sorry. Given how many things in the Block editor need to be fixed with custom CSS, I would think WordPress would make the option available to everyone. Still, you can use your theme’s Quote block, and you can insert a Classic block and indent as before. This block has been indented using the CSS I am going to explain below.

CSS stands for Cascading Style Sheets, a markup language that controls the appearance of text and graphic elements on your blog page. The easiest example I can point you to is the Quote block mentioned above. Quote blocks are often indented and may include a graphic element, as well as a font and color change. All of those bits of markup language are stored in a CSS script called Quote. Styles are great, because they save time and ensure consistency. The “Cascading” part of CSS refers to the fact that the styles can be overridden. WordPress can offer a Quote block, but the developer of your theme can override that with his/her own. You could override that style, but it can get messy. WordPress offers a somewhat simpler way to do that.

The examples I am using are the CSS for my indent feature and for a thicker, wider, black separator (for Hugh). The CSS text is included at the end of the post, if anyone wants it. We start the process in the Admin panel.

Select “Customize” from the Appearance section of the Admin menu.
In the Customizer, the very last option it “Additional CSS” choose that.
This is the CSS I added for my indent option and for Hugh’s bigger black separator. As you see, it’s not a lot of code. The indent option is moving the left margin in 40 pixels – my image measurements are in pixels. – – – the Separator is really just a Border element. I’m showing the Top segment only. It’s 6 pixels thick, and solid. The #000 is the color code for black. The width is 30% of the width of the page, and the “auto” margin will cause the separator to be centered.

The custom CSS is available to you until you change themes. This is important! You need to keep track of the custom CSS that you use, and you need to keep the code in a document, preferably a text file (with no formatting). If you change themes, you need to add the custom CSS to the new theme – KEEPING THE SAME NAME – in order for your previous posts to render correctly under the new theme.

One the CSS is added, invoking it is very easy in the Block editor.

  • Select the block you want to apply the CSS to.
  • Open the Block settings.
  • Drop-down the Advanced Block settings.
  • Add the CSS class name WITHOUT the leading ‘.’!
Place the cursor anywhere in side the block you wish to apply the CSS to.
In the Block settings pane, scroll down to the Advanced section and drop down the list.
I recommend saving these as Reusable blocks, so you can tell what’s being used and where it is.

Note: The CSS for the custom separators are added to an empty paragraph block. The reason my separator has a name, is because I saved it as a Reusable block.

The CSS may not change the appearance in the editor window, but, if you did it correctly, it will appear in the preview.

This is the preview of the separators.

To summaraize, the custom CSS classes I added are:

.da_indent40                             .hvn_thick_wide_sep

The class name I use to apply them to a block in my post are:

da_indent40                               hvn_thick_wide_sep       

As you might have guessed, I am indenting my blocks 40 pixels. If you want to use this bit of CSS, give it a name that makes sense to you, like: ‘myIndent40px’ and pick a number of pixels that suits your fancy.

Remember, if in the future, you want to indent a paragraph/list by 80 pixels, create ‘myIndent80px’ and use that. If you change ‘40px’ in the script shown to ‘80px’ you will change it everywhere it has been used before.

If you have any questions, please ask in the comments or send me an email. I will be happy to help.

Here’s the text for the CSS classes:

For Hugh at Hugh’s views and news.

.hvn_thick_wide_sep {
border-top: 6px solid #000;
width: 30%;
margin: auto;
}

For indenting:

.da_indent40 { margin-left: 40px; }

This post is part of Linda G. Hill’s fun weekly series One-Liner Wednesday. If you have a one-liner, If you would like to join in on the fun, you can follow this link to participate and to see the one-liners from the other participants.

I’m not sure which foot that is. Sometime, I wake MiMi and ask her, but not today.
It’s still too early to go for our walk.
For Rivergirl.
“I told them to go slow!”
They stage the school buses in the park. Either that or John Howell is going to tour the neighborhood.
Some trees are changing colors in bits and pieces.
Maddie likes to wander into this little wooded area near the park.
Maddie, I’m not sure that’s going to make a good picture.
The State of CT is moving to Phase-3 on Thursday. These guys will be able to sit closer.
This tree always is among the first to change.
This is the same tree as before.
The benefit of walking early.
This guy looks like he means business.
Maddie’s keeping an eye out for intruders.

86 comments

  1. I’ve been discouraged by the (for me new) block editor every single day of October Poetry Writing Month. Looks like I need to start reading your posts more. I’d love it if by the end of the month the block editor doesn’t feel like a fight anymore.

    And I don’t care to show my age :)

    Liked by 1 person

    Reply

  3. Dan, thanks so much for including my request for a thicker, bolder separator block. (I think) I’ve done what you’ve outlined in this post. Certainly, in preview, I get the thicker black separator. Now all I need to do is try it out on a published post. If all else fails, I may come back to you (if that’s ok?).

    I’ve also learned something new from this post – the anchor block – I had no idea it existed.

    Liked by 1 person

    Reply

  4. I didn’t realize there was an “Additional CSS” option under “Customize” (probably because I never selected “Customize” before). I will have to keep that in mind. I have used style sheets. Nice caution sign for the elderly.

    Liked by 1 person

    Reply

    • I tried avoiding the custom CSS, Frank (it reminded me too much of my old job), but in these cases, there simply was no other way forward. It is a nice option to have.

      We’ve gone from “Caution – Children Present” to “Elderly Crossing” – oh well.

      Liked by 1 person

      Reply

  7. I’ve seen some magnificent pictures of the changing season, yours included. Funny how I’ve been down here for 50 years, but pictures like that and covered bridges, make me homesick for up north!!

    Liked by 1 person

    Reply

  8. Beautiful Autumn leaves. Sweet Maddie. About that computer stuff, my brain understands these things when my son shows me but I refuse to hit the ‘save’ button because I might lose something really important up there. Thank goodness I don’t indent. BUT, a perpetual problem for me since the beginning of Microsoft Works was how to set margins. Still can’t do it right. Talk about showing your age…I miss my typewriter. I could set some margins and indents there! 😉

    Liked by 2 people

    Reply

  9. Beautiful fall colors on your trees. I wouldn’t have questioned MiMi as to which foot was showing. She looks so comfy and content. And Maddie doesn’t look like she’s ready for a walk yet anyway. Bunny always seems up for a photo session!

    I shouldn’t be laughing at the Caution sign being toppled over, but it hit my funny bone! It’s a sign of the times that nothing’s the way it’s supposed to be any more. Laugh or cry are our two choices.

    Good for Maddie leaving no leaf unturned! And look at the size of that tail on the squirrel! Yowzer!

    Happy Hump Day!
    Ginger

    Liked by 1 person

    Reply

    • Sage advice on not bothering MiMi, Ginger. It was echoed by the Editor – “leave her alone!” – as I started to give her a good morning scritch. MuMu, on the other hand, is loud and demanding to be brushed, scratched, and otherwise attended to.

      Maddie checks out everything on the ground. Nothing is unimportant to that nose.

      The “Slow” sign guy is back on his feet today. No one pays attention, but that seems par for the course.

      We always talk to the bunny. We cross the street so he doesn’t have to leave the good-eating-spot he’s found.

      I hope you’re having a good week, Ginger. Sorry for two techie posts in a row. But, I have some nice doors for tomorrow.

      Like

      Reply

  10. I recall a feeling of shame when I learned that typesetters don’t use two spaces after a sentence. But I thought the paragraph indentation thing was optional. Apparently not. I prefer no indent, but still…

    Great one liner!

    Liked by 1 person

    Reply

    • I don’t use two spaces after a sentence, but the my wife swears that’s what is required. The thing I don’t understand is why they would eliminate such a simple-to-program feature (indent) that a lot of people use. I don’t see why the geeks at WordPress should be the arbiters of style.

      Liked by 2 people

      Reply

  11. ‘As you might have guessed, I am indenting my blocks 40 pixels.’–and then I saw you went to ‘Advanced.’ Aha! I am in the wrong class. :) I didn’t even know what CSS stood for… heavy sigh Maddie makes every photo look great, Dan. Autumn is her season. She looks beautiful among the fall colors. So punctuation as we learned it is now out of date. Who would ever have thought?

    Liked by 1 person

    Reply

  12. WP switched me over against my will a few days ago. I am still reeling with no idea how to do anything but the most basic insert text, insert image. Ugh. I feel like I’ve lost all flexibility. So I skipped down to the gallery. Lots to smile about there. I love the NE autumn photos. Enjoy the changing leaves. :-)

    Liked by 2 people

    Reply

  13. Fall. Cooler air. Color in the trees. Apples. It is almost like we can breathe again.

    Can you use child themes with your paid version of WP? I was thinking it might be transportable that way, but theme developers do not use the same element names, so that is a futile thought I imagine.

    Liked by 1 person

    Reply

    • I’ve never seen that as an option, and I wouldn’t expect theme developers to be consistent, unless they’re overriding WP’s styled. I don’t know if WP supports namespaces. I won’t have more than a dozen bits of CSS when I’m done. I’ll just go with ‘da_’ something

      I do love fall.

      Like

      Reply

  14. I see the reason I haven’t had (too much) trouble with the block editor is that I’m a simple woman and evidently don’t try to do anything interesting/unusual on my blog. :-) Ah, well, I’m happy for the most part where I am right now, so I don’t mind. The idea that indenting a paragraph is old-fashioned is quite annoying. Not everyone wants to skip a line every time s/he wants to have a new paragraph. Sigh.

    janet

    Liked by 1 person

    Reply

  15. It is the latest and greatest. The best thing since sliced bread. Versatile ! Computers can do anything. …except for the things we intentionally program out… Some days progress is spelled so backwards that expletives just don’t cover it. Kind of reminds me of Sections in Cobol. Now as to that sign – I need to make a slight addition to it and post it in my garden. ” Elderly Crossing Flowers “.

    Liked by 1 person

    Reply

  18. I appreciate the information, but I’ve never worked up the courage to tackle CSS. The only times I’ve tried, I’ve made a mess. :( And any picture with Maddie is a good picture, don’t be silly! :D

    Liked by 1 person

    Reply

  19. Lordy, lordly, showing your age, huh? Hilarious. How to use the blockhead editor has been THE topic this week. I’ve done a little bit with CSS in an older blog, but haven’t touched it in this one. Like I said yesterday in my post, I resent this confusing system being dumped on me during a difficult year. Still snarling a bit about it in fact.

    Liked by 1 person

    Reply

  20. Your geeky workaround description gives me a headache, but I suspect it’s going to be useful at some point in the future. I think I can follow the process, even though it will likely give me a headache. It was bad enough several years ago when I actually had to switch to the “text” view to delete some stupid code that was messing up one of my posts. I wasn’t totally sure what I was doing, but whatever I did at that time worked. I hate computers.

    (And now I see that, even for my older posts, WP has 2 editing options ‘ “Edit” or “Classic Edit.” Obviously, they intend to force me into the block editor soon.)

    Liked by 1 person

    Reply

  21. Well, most of that was way over my head especially when I first read it a 3:30 this morning, but I’m going to put a little memory marker in my head to come back to this post and your fancy art deco separator post should I ever want to add those features.

    The oranges you get there are just beautiful. We have mostly yellow out here not many oranges and the reds are usually cultivated trees.

    Yep, I think John Howell might be staging a tour of your neighborhood next. 😜

    Liked by 1 person

    Reply

  23. Thank you for the detailed indenting instructions (and the link)! I’m not sure if I have a WP version that allows CSS, but I’ll try. Whether I am successful or not will be evident in my next post (fingers crossed). I wouldn’t even care as much about indenting (except for the joy of knowing that I’m pissing off that Happiness Engineer) but the current block editor places my list way to the left of my paragraph… that can’t be right, can it? I’d be happy if it just aligned with my paragraph.

    Thanks again for your generous help!

    Liked by 1 person

    Reply

      • Ok, to report back… I, apparently, don’t have the premium level needed for CSS (which is just as well since I’m afraid that much of this is over my head). BUT, I did figure out how to get my list back within the confines of my regular paragraph block. I have no idea how it worked but, hopefully, I can remember what I clicked on so I can do it next time. I have to admit not indenting made me feel 20 years younger :)

        Liked by 1 person

        Reply

  24. Huh? You lost me at “there’s not a lot of code”. Any code is too much code. Lol. As for indenting showing your age? Well pfft. Likely said to you by someone who can’t write in cursive. Ha!

    Liked by 1 person

    Reply

  26. I actually read through your technical explanation, Dan, and think I could actually insert custom CSS code, but I find it much easier to stick with the Classic Editor for creating and editing my posts. I have dabbled with the block editor and have learned how to solve some problems for others (like poets who want to paste text into a block without changing the format), but am reluctant to change to this “improved” editor. As always, I enjoy seeing New England fall color–here in Northern Virginia we often go straight from green to brown, it seems.

    Liked by 1 person

    Reply

  27. Yes, this is very geeky. Haha! I cannot believe the HE said that to you!! And speaking of eliminating things that we oldsters consider basic, justifying was eliminated in the classic editor, too. Love the autumn tree photo!

    Liked by 1 person

    Reply

  30. Ummm…yeah, I love the photo gallery (MiMi paw!) and I think I’ll stick with the basics of Block Editor and what it will allow with the free plan.

    PS: I hope the HE gets what comes around to him when he’s my age. ;-)

    Liked by 1 person

    Reply

  31. Interesting, Dan. The block editor is new to me as well; I just published my first post using it, as you know. I appreciate your efforts to orient us. Some things I like, others not so much. This will take some time.

    Liked by 1 person

    Reply

Add your thoughts or join the discussion. One relevant link is OK, more require moderation. Markdown is supported.

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.