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]

Continue reading “The words we use in #a11y”

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.
Continue reading “Nifty Code #3: Document Outline”

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.

Continue reading “Nifty Code #2: Block parents”

Nifty Code #1: InnerBlocks

A new series I’m hoping to write this year, full of cool things you can do in the block editor or in JS in general. Some of this has been written about before, but I’ll also point out the use in projects I’m working on. 👩🏼‍💻

When writing the Recipe Block, I wanted to set out a “recipe post” framework, but not lock people into a fixed format. If you use it, you’ll see that inserting the block inserts a few blocks, including an image, title, ingredients, etc. But maybe you don’t have photos, or you want to add a video. If you try to insert a new block inside the “Recipe” container, you’ll see a restricted set of blocks, mostly things that would make sense – text, video, gallery… but not another Recipe block, or Latest Comments, etc.

This is thanks to a combination of the <InnerBlocks /> component, with the template & allowedBlocks props.

Continue reading “Nifty Code #1: InnerBlocks”

Recipe Block

Screenshot of the recipe block
Recipe block used on a site with the Twenty Nineteen theme

Over the holidays, I put together a “Recipe Block” plugin for Gutenberg. You can download a ready-to-use zip of the plugin on the github releases page; or you can download & build the developer version by cloning it from github. There are developer installation instructions in the github page.

I was solving my own problem, really– I have a private site where I collect recipes & notes (things like, “dough was too dry, add more water next time”). I used ACF for separating out the ingredients and some other meta, but when WP 5.0 came out I wanted to be using the new editor. Luckily, Mel had a design laying around, so I built this.

Continue reading “Recipe Block”