ryelle codes

New Admin Color Schemes

Happy WordPress 5.4 day!

While working on the about page for 5.4, I realized I really liked those colors, and the page would probably look pretty cool with a matching admin color scheme. So I got to work updating Admin Color Schemes (all the way from WP 4.4 😱), updated the build process, and got to work on creating the color scheme.

Most color schemes only set 2-3 custom colors, and the rest are inherited or calculated from there. This works well for simple schemes, but you can also set other colors for finer control. Since I wanted to stick to the bright blues from the about page, I needed that finer control. I had to customize the “bubble” color (when you have comments or updates), since the default put white on a very light blue. I also don’t think the light blue & white have enough contrast in submenus, so I added an underline on hover.

Once I finished the 5.4-inspired theme, I couldn’t make an update with only one theme — so I also made one inspired by 5.3’s release art, Kirk. You can see screenshots of both here:

While working on Adderley, I had tried using the light blue as a base, before realizing it wasn’t exactly the feel I wanted — but it had promise as a light color scheme. After some tweaking and customization, High Contrast Blue was born ✨

This color scheme should pass WCAG 2.1 level AAA for color contrast, (though it doesn’t apply to the editor, so it won’t make your whole admin AAA). Light color schemes need more customization, but I like how this one turned out.

Get these three new color schemes by updating or installing Admin Color Schemes!

Admin Color Schemes

Also, happy trans day of visibility!

Last post of 2019

I was going to do the “posts I’ve drafted over the last decade” thing that Aaron & Jeremy did, but then it sat in my drafts for a week 😅

Instead I’m going to revisit the post I wrote at the end of last year. In it, I mentioned getting engaged, and this year, we got married ❤️

Mel & I walk hand-in-hand after the outdoor ceremony, smiling at family and friends.

The words we use in #a11y

A few days ago, I started this thread on twitter…

reading this report on disability & AI, and I’d highly recommend at least the first few pages to anyone working in tech– raises some great questions, then goes into definitions around disability and technology that might challenge how you think…

Here’s the report I’m talking about: Disability, Bias, and AI [PDF]

In particular, the definition of “Assistive Technology” made me think- it helped solidify something I’ve been thinking about but unable to articulate. The basic definition is “assistive technology is shorthand for technology that assists disabled people.” [1]

Nifty Code #3: Document Outline

When I started the recipe block, I knew that I wanted to allow control over the section heading levels. I felt it wouldn’t be possible to assume fixed heading levels – should the Recipe Title be an h2, and the “ingredients” heading be h3? What if the post title is the recipe title, and the Recipe Title block is deleted?

First, I solved this by copying down the HeadingToolbar component. This let me use the same heading options that the heading block uses. Unfortunately, these would always show in the block’s toolbar, regardless of whether you’re editing the title or the list content.

Editing the ingredients section. My cursor is in the list, but it still looks like I can change the heading level of this text.

Nifty Code #2: Block parents

In my previous post, I described using InnerBlocks to create a template and restrict the blocks allowed in “parent block”. This post is kind of the reverse 🙂

When writing the Recipe Block, I wanted to allow for repeating fields of ingredients and directions. I thought the best way for this would be to make each section blocks as well, but I didn’t want them available to the editor in general.