I could use a snow shovel to clear it. What is this stuff and why is it everywhere?!
This is the web’s equivalent of those old rotary telephones.
Categories
Someone’s celebrating today…
There will be pizza and ice cream cake.
Slide the thing side-to-side to see Mason goofing around with his birthday balloon.
I’m user #572 on Dribbble, with my account created on Jan 19, 2010. Thats kind of cool. Scrolling through this list is like a who’s who of 2010 web design.
Here’s a design I made that walks people through filling out the necessary information to submit their block pattern to the WordPress.org directory.
WordPress 5.8 is scheduled to release at the end of July, and one of the most anticipated features is what’s been affectionately referred to as “Full Site Editing.” In reality Full Site Editing (or, FSE) is really a collection of numerous features that together enable someone to edit their entire website using blocks.
This is a big deal.
But, in traditional WordPress fashion its not all happening at once. Bits and pieces of FSE will be appearing in WordPress over time, spread out across various releases. In WordPress 5.8 the first big and exciting piece of FSE is going to ship; Its called Template Editing and its really powerful, but also very nuanced and subtle. Don’t expect it to change everything over night, but do expect it to be a crucial step towards the future of WordPress theming.
In anticipation of all the “newness” that is coming to WordPress, Anne McCarthy has been managing an outreach program looking to increase participation of testing (and giving feedback) for new features. Its been really amazing to see videos of people using the FSE features to build some really amazing things.
The latest installment in this outreach program is a sixth “call for testing.” This post documents my experience running through the test along with any thoughts and feedback I have as I go.
Buckle up, this is likely to be a long, “stream of consciousness” post full of technical jargon and confusion.
Before I jumped into the test, I asked Anne if there was one particular area that I should focus on; Her response was that I should focus on the “customizing the template experience specifically,” so that’s what I’m going to do.
Like any good test taker, the first thing I do is read all of the instructions — just incase the final instruction is to ignore all previous instructions and sit at my desk quietly.
The “call for testing” post is thorough and detailed. I love that Anne covers “known issues” right up front, which helps me avoid that feeling of “wasting my time” reporting the same duplicate issue for the 8th time.
The first thing I noticed after activating Gutenberg 10.6 and the TT1 Blocks theme is this ever present reminder that I’m in an experiment. It’s probably a good reminder, but I do wish there was a way to get rid of it. Does it need to be so repetitive (experimental full site editing, full site editing experimental) and full of jargon (API!?)?
The test asks that I create three pages, “About,” “Contact,” and “Code of Conduct.” This is all fine, but it makes me long for a simple way to create pages in bulk.
In step #9 in the instructions, I’m told to use the Settings sidebar and look under the Page tab for the Template section. I found it, but it displays an obscure object message…
Opening the accordion doesn’t give me any more indication of what’s happening…
For step #10, the template name UI displays a list of suggestions for the input field; This should likely be disabled as its irrelevant to creating a new template.
Welcome, to Jurassic Park the template editor.
It was a little jarring entering into the template editor. The “snackbar” notification that appears for a few seconds appeared below the welcome tour, which was a little strange.
Templates express the layout of the site. Customize all aspects of your posts and pages using the tools of blocks and patterns.
I think the welcome tour’s copy could probably be improved. I’m not sure what it means to “express the layout of the site.” Additionally, that generic WordPress page “illustration” leaves a lot to be desired. I’d expect something more relevant to blocks and templates.
I also think the “Get started” button should be a primary button — white text on a blue shape. As-is, its not obvious what I need to touch to move ahead.
The “Template” tab in the sidebar is mostly useless. I’m sure there’s more we could do here to educate and relevant functionality we could expose.
When I’m in “Template Editing Mode” there’s a this large black space around the canvas area of the editor. I think this is supposed to help me understand that I’m not editing a single document, but rather that I’m editing something more.
There’s something unsettling about the dark spacing and the border radius; I’m not sure what it is, but this feels strange.
In step #12, the instructions tell me to remove a few blocks from the top of my page template. My instinct is to hold down the cmd key while I use my mouse to select multiple blocks — my past experience with software makes me think this is a common way to select multiple things, but its doesn’t really work in the template editor…
To be fair, I don’t think this is specific to the template editor — selecting multiple blocks using Safari in the block editor has always been problematic; I don’t like the way the text is highlighted, since I know I’m not selecting text but selecting blocks. There is a difference.
You can also see yet-another-example of the in-between inserter getting in the way; That blue [+] and line? That’s the “in-between inserter” and its always trying way too hard.
Step #15 instructs me to drag-and-drop the Title block into the newly created Cover block. I know how to do this, but likely only because I use WordPress everyday; I’ve often thought the drag handle was far-less-than-obvious.
I was able to drag the Title block into the Cover block, but I expected that it would replace the empty Paragraph block — not add itself below the empty Paragraph.
Step #17 request that I use the new duotone feature to stylize my Cover block. Ok, cool. I’ve heard about duotone, but unfortunately the UI is a little chaotic…
When I first set a duotone filter, the popover goes away. But, after that I find it very difficult to hide the popover; It only goes away if I click outside of the toolbar.
In step #19 I’m instructed to add a new Columns block. And I’m able to do this (mostly ’cause I’m a Gutenberg pro…), but its really hard to tell what I’m looking at with an empty Columns block inside a Cover block.
It was at this point I realized I had spent over 2 hours on this test. So, for now, we’ll call this a day. I might pick this back up tomorrow.
In a few weeks, I’ll have worked at Automattic for 10 years. That is just about a third of my life, and the majority of my career as a designer. And here’s the thing, I could see myself doing this for another 10 years.
Looking for a job? automattic.com/work-with-us
Took a little detour today and tried to help with some improvements to the media uploader in WordPress, specifically a new button that will let you quickly copy the URL for a file that you just uploaded.
This is related to the following WordPress Core issue: Add a copy-link button at the media upload page
There’s nothing better than listening to my kids doing the dishes while I enjoy a glass of wine.
WordPress 5.8 is scheduled to be released on July 20, 2021 and one of the new features slated for this release is an update to the way widgets work.
There’s a “call for testing” up on one of the WordPress community blogs. This post covers my experience running through this test. Its important to note that I didn’t actually complete the entire test. I spent just about 90 minutes and never got to test the Customizer updates.
I have a few testing sites setup on my machine using Local, a very handy app that makes it super simple to manage multiple WordPress sites. I made sure I was using the correct versions of both WordPress (5.7.1) and Gutenberg (10.6) and dove into the instructions.
The test specifies installing a plugin that enables widgets. The first one that came to mind was Astra. So, I headed to “Add New” under Plugins and searched for Astra. From the results I clicked “Install Now” and, after a few seconds, I clicked the new Activate button.
Turns out I already had a few widgets setup in my site’s Footer, so I adjusted some of those and then added one of the Astra widgets. I randomly picked the “Astra: Address” widget and was shocked at how terrible the UI was and generally how limiting the widget’s output was. There are inputs and checkbox for all sorts of things, but the output was very anti-climatic for the work required. It would be way easier to accomplish the same thing with some blocks instead.
For instance, in the above screenshot you can see the Astra Address Widget. The icons are kind of nice, but I have no way to get rid of the horrible italicizing of the text. If that was a block, I could just select the text and untoggle the italic button in the toolbar.
And here’s what those same widgets look like when editing from the “legacy” screen…
Ugh. Look at that mess. Its obvious this screen hasn’t changed in years.
Now we’re getting to the fun stuff; The next step of the test is to activate the Gutenberg plugin and enable the widgets experiement. Once I did that, I ventured back to “Appearance > Widgets” and found myself looking at this screen…
Ok, well. My first reaction is that this looks a little nicer. There’s more focus, and it seems like its trying to mimic the design of my website. However, there’s a number of bugs and strange things happening here.
First, the widget area names and toggle buttons are a lot of excess space that seems unintentional. Clicking the toggle button causes a strange shift on the screen; This seems like a few releated bugs, perhaps some CSS “bleed” from the Twenty Twenty theme.
Selecting the first widget area highlights it with a blue outline and I see a block toolbar. Unfortunately, this toolbar is obscured by the editor’s top bar, making it mostly unusable.
When the widget area toolbar is visisble, there’s some spacing issues around the block icon; In the image below you can see the different spacing on the left and right of the icon.
The block toolbar for the widget areas (which I assume are actually blocks themselves) seems mostly useless. The icon is the generic block icon, which doesn’t really convey any helpful information and is not interactive. The ellipsis “more” menu contains few options, and doesn’t seem very relevant to working with widgets.
The toolbar for blocks within a widget area is misaligned. It appears to be indented for some unknown reason. I believe this is caused by the parent selector button that normally appears when a block is nested.
One area the testing instructions specific mention is moving blocks. I found that I was able to move blocks — either with the move buttons or with drag-and-drop — within their current widget area, but I was unable to do the same between widget areas. This feels like a regression, as the “legacy” screen makes moving widgets very easy.
I did discover this “Move to” button in the toolbar of blocks…
…but it seems more like a bandaid than a solution. This is especially confusing when I also see the “Move to…” option that exists in the ellipsis menu.
I started playing with the widgets I had, customizing some of their information, and adding new widgets and blocks.
There’s some confusing things that happens with the height of widgets, in my case, the height of the Astra Address widget when deselected was too short and cut off much of the content.
Its easy to wind up with a “ghost” widget; That is, a widget that definitely exists but you don’t see it until you hover or click on it.
At some point I discover that some — but not all — of my widgets had this curious circular arrow icon (which doesn’t fit with the rest of the icons stylistically) that says it allows me to “Change widget.”
Ok. Change it to what? I clicked on it and found myself looking at this…
The layout of this is a little messy, but it also doesn’t really contain any helpful messaging. The best I can figure, this allows me to swap one widget for another. To be honest though, I’m not entirely sure why I’d want to do that…
This whole sidebar seems very empty and useless.
Whew. Ok. I’ve been going through this for 90 minutes so far, and I haven’t even touched the customizer yet. I’m going to stop here for now and post what I’ve found.