I’ve never attended a WordCamp outside of Seattle, so a small silver lining of the pandemic is that WordCamp US was online this year for me to attend!

As with my trips to NTC or the Washington State Nonprofit Conference, I like to post my slightly cleaned up notes online. It’s mostly for myself, but I hope there’s something small in here that you’ll find interesting too.

I’ll note here that I didn’t attend a session in every time slot. As I’ve attended more online conferences, I’ve found that taking time away from them is important. It’s better to save my mental energy for focusing on the topics I’m most interested in rather than pushing to pay attention to talks that don’t grab me in the moment.

“Demystifying Gutenberg Blocks – Understanding First Steps to Becoming a Gutenberg Developer” with Corey Webb

Learning how to build custom WordPress blocks—and generally improving my JavaScript skills—has been an ongoing focus this year, and especially over the last few months.

This first talk was a helpful review of intro content. Overall, there wasn’t much new information for me in this talk, but any time I’m learning a big complex new skill, reading and hearing the same content explained multiple ways—and with different emphases and approaches—is still quite helpful!

Points of interest:

• When making a custom block, make sure there isn’t an existing block that meets your needs.
  • My reaction: He recommends using some popular block libraries, though I have a hard time using an existing block library with a bunch of blocks when I only need one block. I asked about working around this problem and I don’t think there are any great answers.
• Some useful tools for starting blocks: Genesis Custom Blocks, ACF Blocks, and Create Block (@wordpress/create-block) script for native custom blocks.
• It’s helpful to know React and JSX along with ES6 ahead of working with custom blocks. Recommends Wes Bos’s React for Beginners course for learning React.
• Blocks have an isSelected property that is really useful for conditionally showing parts of the editing UI.

“Building Modern WordPress Sites: The Interplay of Blocks, Patterns & Theme.json” with Rich Tabor

This presentation was a fairly detailed look at the upcoming changes to WordPress that will allow editing the entire site design through the editor. (This overall effort in WordPress is called Full Site Editing or “FSE”.)

I know that I—and many other developers—are nervous about these upcoming features. They could potentially result in people changing (or breaking!) the site’s overall design. It’s an exciting set of features for DIY WordPress users, but will be very challenging to adopt when delivering sites to larger organizations with existing brand guidelines.

But importantly, as I reflect on my nerves, I do see reasons to remain open to these changes. Specifically, I’m thinking about the new “Query” block in WordPress. this is a very powerful new block that enables people to create complex dynamic lists of posts. This seems like a huge change for WordPress and one where developers will have to “give up control” to site editors. However, the Query block is awfully similar to the Views feature in Drupal that is well over a decade old and used by Drupal developers without a thought. (I do think that the context in which the Query block appears will encourage more tinkering and adjustments than Views.) This is a useful example to check my initial reactions to these new features and see if they still hold.

That said, the Query block was recently added to WordPress in version 5.8, and I’m currently hiding it by default with my Simplified Editor plugin until I can get a better handle on what sites will and won’t benefit from it.

The theme.json file is probably the thing in this presentation I’m most excited about. It provides some immediate access to some new features I’ve wanted to control, and it’s available in WordPress right now. I’ll probably test this out on a client project over the lunch break.

“A Voice for the New White House Administration with the Block Editor” with Helen Hou-Sandi

Demo Custom Block from presentation

This presentation was about the six-week-long project to build the new WhiteHouse.gov website for the Biden-Harris administration before inauguration.

The project needed:

• Extremely easy content entry and management
• “1-to-1” WYSIWYG design of the editor
• Focused on front-end outcomes first (performance and accessibility)

Rather than customizing core blocks, they decided to create a number of custom blocks (~15) to avoid having to wrestle with core styles and focus on perfectly aligning the block editor interface with front end markup.

Her [extremely compelling] argument against overuse of many metabox/form-driven editing interfaces: “In a modern web environment with non-technical users… we should be aiming for something far more visually driven and interactive [than a web form].”

The “old” way asked site editors to adjust their experience to meet developer convenience. But we developers should be telling the computers what to do in a way that meets our editors’ experience!

We should think of the editor’s sidebar as a tertiary experience for editing blocks. It will become less and less useful as Full Site Editing adoption increases and it makes the editing display less immersive and accurate.

I have to say that Helen is possibly the best person I’ve read and seen present who makes creating custom blocks feel approachable by providing both good mental models and inspiration.

Great tip for custom blocks: Return null from the block’s save function and use Dynamic Blocks to protect against breaking the site when changing block markup.

She closed with some really exciting musings about how custom blocks can be made even more approachable, easy, and efficient to write. It was a call to action about embracing the new models of editing and experimenting and sharing the ways we are making it work for ourselves and our clients.

“Creative Use of Block Styles” with Kjell Reigstad

Custom styles from presentation

The last presentation I went to was all about block styles, which I just presented about myself! Block Styles are super easy to use in the WordPress editor and really powerful because they allow you to drastically change the look of a block with CSS. I love block styles, and so I am always excited to see more examples of them!

Kjell focused on impractical block styles after noting that so much of the internet is now practical. His emphasis was on impracticality because many of our first websites were highly impractical because we were learning and experimenting. Through building impractical things, we learn!

One small good tip: use .is-style-my-style:not(.is-selected) in the editor styles to prevent the style from applying when editing in cases where the style might interfere with editing.

He showed styles that:

• Spun the block a full rotation every 20s
• Applied a “photocopy” style to an image
• Created a collage style combining all images in a gallery block to create a single image that looked like it was made of ripped-up images (super cool!)
• Warped text (as if moving a paper while making a scan/copy)
  • He used SVG Filter Builder to build this. This looks like a sweet tool that I will be using in the future.
• A masked image evoking the album covers from Blue Note Records
  • He searches for “Convert SVG to polygon” to make a clip path in SVG but then output it with the more efficient CSS syntax that can be animated in CSS.
• Unevenly aligned letters or even randomly moved letters

The last two talks in particular were as inspiring as they were instructive (and they were instructive), which is the best sign to me that a conference session was worthwhile.

Thanks to the presenters and organizers of WordCamp US for a useful and fun day of WordPress learning!