Beatriz Fialho has posted some designs she’s been working on to update the WordPress.org News blog, which has been mostly stagnant for years. Her new designs are full of freshly vibrant colors and feelings. Give it a look and let everyone know what you think.
Here’s a couple of quick sketches for a 404 (page not found) error on WordPress.org in the style of old jazz album covers.
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.
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.
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
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.
As we progress on building a directory for WordPress block patterns, I thought it would be helpful to put together a guide for building patterns. Here’s a first sketch at this guide, which I think can probably live at wordpress.org/patterns/guide:
What do you think — does this help, and does it cover the basics? What else should this document contain?
Recently, I’ve noticed the need to move from sidebars, to popovers, to modals. For example, in the WordPress block editor you can add blocks from a small and quick popover called the Quick Library, or from the larger Sidebar Libary. And, there’s been a few designs floating around that use a modal to browse patterns.
I wondered if there was a way to ease the transition between these different UI’s and came up with this animation.
I’m working on designs for the brand new Patterns section for WordPress.org. This new section of the site will allow anyone to create and submit patterns — a collection of WordPress blocks — that can be shared and used by any WordPress site.
One aspect of build a great pattern is understanding how your design adapts to various widths. And I don’t just mean device widths, like a tablet or phone — but also container widths. In the world of the block editor, you can place patterns within wide pages or narrow columns, and your pattern must adapt accordingly.
Here’s how a Width tool could work when designing and building a pattern…