I’ve spent the last 8 months telling anybody I talk to about custom WordPress block development that they were way less scary and much easier than I thought they were going to be as somebody with minimal React experience, and that achieving a 1:1 editor experience where you manipulate directly in the content area instead of metaboxes or panels really comes alive when you reuse the same markup and CSS from the front-end and leverage the React components the block editor ships with. Because of that, I think a big game-changer for adoption and shifting thinking would be to find a way to unify templating between the front-end and the editor, essentially swapping the places where you output content with the corresponding editor component.
So what had happened was… I was once again going on and on about this to Mark Jaquith, who blessedly seems to enjoy walls of text from me about programming puzzles, and it turns out he’s been thinking about the same thing as he gets into block development. A weekend later, and:
Weekend exploration, egged on and sparked by @helenhousandi:
“What if building custom blocks for the Block Editor was as easy as supplying attributes and a block of HTML? What if this produced React editing code and PHP rendering code without a build step?” pic.twitter.com/r86Phu88SX
The first time I saw the Naked60BMP it was sold out, but I knew it had to be mine. The layout I like and the ability to make it Bluetooth, in something so unique and portable? Sold. So when it finally came back in stock, I immediately grabbed a red one, because that was the only one that came with the artwork on a white background. Not necessarily my favorite cover color or material, but I figured I could source some interesting PU type of material and make it look like a makeup compact that’s actually a surprise keyboard.
Many years ago (October 2015, to be exact) I wrote a small plugin that allows you to add a note when updating a post, intended as a way to describe what was changed in that revision. For the developer set, it’s kind of like commit messages for your WordPress post/content updates. It was created to fill a need on various WordPress.org sites, such as the handbooks, but it seemed generally useful so I released it as a public plugin. After one more update in August 2016, it just sat there, usable and useful but without any attention. Until this week.
I stream my open source work semi-regularly, and decided that working through how to adapt an old plugin to the block editor (2 years late) would make for a useful exercise. So I did that, for almost 4 hours! But that’s not how long it takes to do this – the base work of this really took about 45 minutes, with the rest of the time spent chatting and chasing a bug related to revisions. So, for this post I’m going to explain the process of achieving the final code, first demonstrating what most people will need, then what I actually did because of some specific UX needs, and then dissect the revision bug and things I tried that didn’t work out.
Like many people, between general interest and needing a pandemic-friendly hobby, I have gotten into mechanical keyboards. In browsing through endless photos of interesting builds, I discovered a really cool keycap set called GMK Dots by a really cool designer known as biip. Originally a joke, people loved them so much that they really got made. And I loved them! But as an idea, not the colors. Even now, with a round 2 coming including a light version, it’s just not for me. I also do not like Cherry profile keycaps, which is what GMK produces. The KAT Milkshake set, also by biip, had a Dots kit with amazing colors, but is no longer available and between commanding extremely high resale prices and not quite including the colors in the rows that I would prefer, it was not a reasonable option.
So, with copious credit to biip as the originator of the idea, I decided to make my own set using KAT Blanks, my current favorite profile, with pastel/vaporwave-ish colors to match my general aesthetic. KAT Blanks are made of PBT, which is compatible with dye sublimation (dye sub), a process in which things are heated up to the point where ink and surface fuse, creating a permanent print. With a number of retail dye sub products available, I decided this would be a fun DIY project.
Here’s the general concept:
Print dots using dye sub ink or cut them out of ink-saturated paper
Center them on clean PBT keycaps (not ABS!)
Tape them down securely
Heat them up to 400ºF for a length of time related to pressure
Let cool before peeling off tape/paper
Mount and enjoy
I personally have a Cricut cutter machine, and they make both dye sub markers and dye sub sheets, so in the interest of having clean circles, I decided to use the dye sub sheets. I am also currently on a full grid ortholinear keyboard so I only need to worry about 1U keycaps for the moment. Here’s the specific process I used, and then below I will get into a bunch of details / a build log.
Cut 6mm dots inside of 12mm squares on Infusible Ink paper
Cut the squares out and peel off excess material
Center the squares on the keycaps, add a little bit of heat conductive material to the center of the tops to level them out a bit, and then tape the whole thing down to maintain contact
Bake for 400ºF in a pre-heated, precise oven (Breville Smart Oven, no convection) for 4 minutes
Let cool before peeling everything off and mounting
Just kidding I’m not going to wax poetic on virality. But, I posted this timelapse to Twitter once upon a time and later set it to a truly annoying sound on TikTok because I was curious about the video editor and have almost 3 million views there, which just goes to show it’s all meaningless. Anyway, people seem to like it, and of course I like it, and I’ve gotten a few questions about specifics like how many eggs, so I finally took some pictures as I made one this morning (sans bacon and cheese) so I could post about it.
Oh, and one other thing, I want to give credit to my two inspirations. The first is my dad, who doesn’t really like sweet breakfasts, so we grew up eating savory egg bread as a special breakfast item instead of French toast. The other is this video of an Indian street food called a bread omelette (among other things, I think?) that also got a lot of attention. It seemed like a smart way to not make a mess with fully dipping the bread and being a born New Yorker, egg sandwiches are always a good thing to me. My “egg bread” gets its name from my childhood and does not involve anything particularly special, but of course you can adapt as you like. If I have flowering garlic chives around, I will use them. The only thing I will say is that I am not open to commentary on the cheese from the original video – a proper New Yorker bacon egg and cheese is made with cheese that is engineered to melt, end of story. 🙂
Gather your ingredients
This process goes pretty fast, so gather your necessary materials:
Two slices of bread
A nonstick or cast iron pan that closely fits them side by side
Neutral oil or butter (I personally do not like the taste of cooked butter with eggs, which is why I use oil)
A mixing bowl
Two eggs, or three if you’re hungry or your bread is large
Salt
Pepper (optional)
Milk (also optional, for a little extra fluff)
Heat up the pan while you beat the eggs
Heat your pan up over medium to medium-high-ish heat. If you like your eggs creamier, use lower heat. I like mine fluffier and slightly browned, so I use higher heat. It’s all preference. Beat the eggs with about the same amount of salt you’d use for scrambled eggs and some pepper if you like until foamy across the top, then beat in some milk (or water, or chicken stock, or leave that out, whatever).
Add oil to your hot pan
Drizzle a bit of oil in the bottom of your pan and swirl it around. You are welcome to try making it with less oil, but here’s a tip from Chinese cooking: we use at least enough oil to coat the bottom of whatever pan we’re using to scramble eggs in and heat it up hot because it makes them fluffier. If you like creamy eggs, don’t do that. Again, it’s up to you to figure out how you like things. Anyway, let the oil heat up until it shimmers a bit.
Pour in the eggs and dip+flip the bread
This is the part that most frequently seems to be missed upon recreation, so here’s a regular speed GIF. Since I’m using a regular sandwich loaf that has defined sides and is wider than it is tall, I want the the bottom sides to be facing each other post-flip, so I start with the top side facing the middle for the dip. Hope that makes sense. If you use square bread, that’s much easier.
After I’ve dipped and flipped, I scrape any remaining egg out of the bowl to cover any remaining dry spots on the bread. You don’t have to, but you have to let the eggs cook for a moment anyway so you might as well not have any waste. Cook the eggs until they’re mostly set – you can move the edges in and swirl the egg around if you want.
Flip the whole thing
Next you want to get your spatula under the bread and flip the entire thing over. It might make a small mess if the egg is still super runny. Let the remaining egg set for a few seconds over the heat and then fold the edges of the egg in like so.
Fold and flip
Now you’ll want to fold it so that the slices are stacked like a sandwich. Remember in the beginning where I said I wanted the bottom sides to face each other? That’s why. They’re flat so the fold is easier to manage. Anyway, toast each side until it’s lightly golden brown. I also like to prop it up with the help of another utensil and toast each edge a bit, that’s up to you.
Enjoy!
The most important part!! It doesn’t need to look pretty if it tastes good! I use a knife and fork but I guess you could pick it up with your hands if you really want.
