You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.
WordPress 5.8 (released last week 🎉) brings the power of GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ blocks to widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas — which means highly customizable layout and styling options, and a more WYSIWYGWhat You See Is What You GetWhat You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page. editing experience. I made a test site based on oldie-but-goodie Twenty Sixteen theme, which has 3 separate widget areas to work with. In this post, I’ll highlight a few cool things that are now possible to do with your widgets, and a take a look at where things may be heading next.
Create interesting visual effects with overlapping layouts and Duotone images
Appearance-wise, users have a lot more control over widgets areas than ever before — especially through the use of blocks with tons of customization options like the Cover and Image blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. Here’s what I’m able to create in the classic widgets editor (above) versus what I’m able to create in the new block-based widget editor (below).
Intersperse widgets and custom code throughout your visual designs
Container blocks like Cover and Columns make it really easy to weave dynamic or interactive elements into your designs. While dynamic/interactive elements are sort of a given for many types of widgets, the block versions of widgets can be easily wrapped and layered within container blocks to more fully integrate them into your layout.
In the example below, I tried placing a Search block in front of a Cover block, which creates a nice layered effect. I also tried inserting Custom HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. blocks within a Columns block to display different messaging depending on the time of day. (jQuery script here)
Use traditional widget layouts (or not) with lots of flexibility over title and structure
Classic widgets have always had a lockup that includes a widget title. One cool thing about having blocks in widget areas is that you have complete flexibility over how titles appear. For example, you might choose to have a title over every widget, you might only want one title at the top of each widget area, or your design might not need titles at all.
Note: Some themes, like Twenty Twenty-One, are designed to flow content horizontally within widget areas. If you’re having trouble with a theme splitting your layout into columns, you could try keeping the lockup together by containing it within a Group block.
Ungrouped layouts (left) versus grouped layouts (right)
Copy & paste existing layouts from the WordPress Pattern Directory
While patterns haven’t been fully integrated into the widget editors yet, one thing you can do is copy and paste patterns from the game-changing new WordPress Pattern Directory into your site’s widget areas. I used this horizontal call to action pattern from the directory almost exactly as is, with minor color and copy adjustments:
FYI: Patterns have not been curated for or integrated into widget areas yet, so you may run into some unexpected behavior!
Inserting widget patterns
There is some early discussions about how patterns can begin to be integrated into the widget editors in GitHub issue #26170. Some of the conversation has been around introducing a Patterns tab into the inserter, which would allow users to browse patterns the same way as in the post editor.
A couple of goals for introducing pattern insertion UIUIUI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. into the widget editors are:
Display patterns that make sense to use in a constrained sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. or footer area, depending on the type of widget area being edited.
Surface patterns in a extra discoverable way for users (including classic widget users who want to quickly recreate a traditional layout).
Based on this, I’ve been exploring ways that patterns could be surfaced in the quick inserter as a default/resting state as soon as the popover is opened:
Currently, patterns are surfaced below quick inserter options after the user begins typing in the search box. Perhaps a couple of patterns could be visible by default.The quick insterter could display a list of patterns that show a fly-out preview when hovered. A similar style has previously been explored for the block switcher menu.The quick inserter could contain a single large preview with carousel navigation to browse through patterns. This mimics the pattern placeholder setup UI.
Thoughts?
How would you like to see patterns incorporated into the new block-based widget editors? Join the discussion by opening a new issue on GitHub or commenting below!
As noted in an earlier Gutenberg design update, I wanted to communicate a proposed UXUXUX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. flow for rolling out the widgets-to-blocks interface changes. It’s a proposal and still up for discussion along with further communication in the GithubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ PR, Add blocks in widget areas RFC.
Widgets are now blocks which require a new GutenbergGutenbergThe Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ interface to help people transition to this new paradigm. What is the best way to introduce the new widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.-blockBlockBlock is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. screens to users? How can we do this with the least amount of development time, use existing patterns, and clearly communicate the gradual transition to blocks?
Diverging to explore solutions
I began by segmenting the use cases:
Users with existing widgets
Users without widgets
New users
My initial work included using different menu items in wp-admin and the CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. based on if the user had existing widgets in their site. A user with existing widgets would need more help transitioning to a new interface than a user without any prior widget paradigms.
Segmentation notes
After further investigation of this, I opted out. If the menu items segmented, it might cause more confusion because there would be some users with the new menu items while another may have the old. Documentation and internet tutorials could get difficult to follow at that point. I’d like to do this with the least amount of development time, and confusion on the user’s end.
Converging on a solution
wp-admin
To achieve a simple and non-confusing rollout, keeping the wp-admin menu items the same might be the best option. The user would still see “Widgets” under the “Appearance” menu item. When clicking that to view the widgets, the user would now get the new Gutenberg Widget Areas screen.
The new Widget Area screen
We’d need to make sure the proper messaging or tips are displayed on this page to help orient the user to the new layout.
Tips in the Widget Areas screen
Customizer
This scenario would work similarly to the one above. When clicking into the Customizer, the user would still see “Widgets” as an option if the Theme provides it. This shouldn’t require any additional work on the part of the theme outside what is currently required. Once clicked the user sorts through the blocks and can add 3rd party unconverted widgets with the Legacy Widget block.
Feedback
So that everyone’s aware, the discussions around why blocks are being introduced in the widget screens is already explained in the Github issues, and in comments on other sites. This is one of the 9 projects for 2019, and aims at helping everyone slowly make the transition to the block paradigm.
The feedback I’m looking for here is:
How do you feel about keeping the “Widgets” menu item through the transition even though these really aren’t widgets anymore?
Does it make sense to call these “Widget Areas” through this transition phase?
Is there anything I may have missed or not thought of?
We’ve gotten some general feedback that the context switch makes it feel different from adding an image to a page or a post, so people are having some trouble finding where in the image widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. to add a link. I ran a couple usability tests on the existing image widget, as well as this PR from @timmydcrawford to expose the link within the widget itself. We wanted to compare both versions and see which one was easier.
I want to share the test details, some stats, and finally some conclusions I found from testing, which I’ve summarized into a list organized by 👓 observations, 💡 ideas, and 🐛 bugs.
I’ve tested the Widget Customizer 0.14pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party with the Twenty Fourteen theme on WordPress r27060.
Summary
No trouble adding, rearranging, or removing widgets
Widgets can be tough to spot if they are added “below the fold”
Widgets that require extra prep are easily dismissed
User Testing the WidgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. 0.13 PluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party
No problems adding, reordering, or removing widgets
Content and Primary labels for widget locations weren’t clear to the user
Trouble with scrolling the slide-out, but it could have been a one-time user error</
Widgets can get a little lost if you add one to an already long list
”Find widgets” search seems to obscure the last widget description
Feels messy to see all the widget controls stay open
Its not clear, at first, how to exit the customizer
Successes
No trouble adding a text widget. She clicks “Save & Pubilsh” a lot—seems to assume it’s needed to see the changes. (0:23)
No trouble reordering widgets, but again hesitates when looking for right vs left sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. (0:56)
No trouble removing widgets. (1:01)
Points of Confusion
She has no idea what sidebar is which. The quick red glow seems to have helped a bit. (0:31)
Scrollbar jumps back to the top, not sure what she did to trigger that. (0:12)
She expected the new widgets to be added to the top. (0:18)
Has some trouble reading the “Twenty Fourteen Ephemera” widget description at the bottom of the slide-out panel. (0:17)
Other Insights
It doesn’t seem to bother her that all the widget controls stay open — but boy does it feel messy. (0:19)
Its not clear, at first, how to exit the customizer. But she gets it eventually. (0:33)
If you’d like to see the full video, you can download it here: 2b86a9a1.mp4 (9:25)
(For Reference) Tasks Used in the Test
Go to Appearance > Customize Add some text in a new widget at the top of the left sidebar.
Look through the widgets and pick two that you like. Add both of them to the sidebar and say why you picked them.
Rearrange the widgets so the bio appears at the bottom of the right sidebar.
Remove all of the widgets from the left sidebar except the text you added before and one other widget you think is the most important to keep.
Verify that the updates you’ve made are visible on the site separate from the live preview in the dashboard.
User’s Computer Info
Operating System: Windows 7 6.1
Browser: Windows Firefox 26.0
Display: 1920
Next up: a couple more tests with version 0.14 of this plugin.
Let’s keep going with the work on widgets! I’ve tested the Better Widgets 0.1pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party with the Twenty Eleven theme on WordPress 3.7.1 and there is some interesting stuff in the results.
Summary
No problem at all rearranging or deleting widgets
Had trouble with the drag-and-drop target area at first
Suggests adding a way to add new widgets directly from the Widgets page
Uses the wrong widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. area, completely misses the pre-expanded “Main SidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.”
CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. is slow
Successes
No problem rearranging widgets:
No problem deleting widgets:
Points of Confusion
Unsure where to go when asked to add a bio to the sidebar:
Drag-and-drop misfires:
Completely misses the pre-expanded “main sidebar” widgets (longest clip at 4:11):
Other Insights
Wants to know how to add more widgets from the Widgets screen:
Reasons for picking search and calendar widgets:
Unrelated to Widgets
Slow customizer is slow, takes ~24s for this user to load it up:
If you’d like to see the full video, you can download it here: Better Widgets v0.1
(For Reference) Tasks Used in the Test
Add a bio to the bottom of the sidebar.
Look through the widgets and pick two that you like. Add both of them to the sidebar and say why you picked them.
Rearrange the widgets so the bio appears at the top of the sidebar.
Remove all of the widgets except the bio and one other widget you think is the most important to keep.
The test website is using the Twenty Eleven theme. It has a widget area called “Showcase Sidebar.” What do you think that’s for, and how would you go about figuring out how to set it up?
User’s Computer Info
Operating System: Windows NT (unknown) 6.2
Browser: Windows Chrome 30.0.1599.101
Display: 1366
My Observations & Suggestions
The drag-and-drop misses in this video are interesting, makes me wonder if having widget areas side-by-side is good or not—or perhaps arranging them more masonry style instead of in a grid would be better
Interesting that she didn’t connect “sidebar” and “widgets” right away, but getting into that label is tricky business and I’d like to watch that area with more users in order to spot trends
Love the suggestion to have an “Add New” button on the widgets page
Different sidebar areas for themes is tough, I think it’s pretty hard to tell what in the world the “Showcase Sidebar” is for if you’re not familiar with Twenty Eleven
It’d be great to focus on customizer performance speed
Next up: same test, except run it on WP 3.8 trunk. What specifics are you interested in finding out from tests like these?
I’ve analyzed user testing for two videos shaunandrews kicked off for v1 of Widgets + MP6. The clips represent the main points of interest and user confusion from the tests and range from 12 to 49 seconds, so they should be quick and easy to watch.
Expects clicking “Save” will close the widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.:
Troubles with drag and drop:
Windows 7 6.1
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
1920 x 1080
Hover tip proves useful when figuring out the MetaMetaMeta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. widget:
No trouble with drag and drop to add a widget:
Expects widget to close after saving:
Windows Vista 6.0
Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36
One user spotted the hover tips and the other didn’t
Both users said they expected the widget to close after saving
May need to increase sensitivity of the widget drop area, check Chrome 30 on Win7 for issues
Just because a couple users mention they’d like to see a widget area close after saving doesn’t necessarily mean you should do that. Additional testing in situations where someone is working for a longer time with one particular widget and may want to save periodically would be good. Adding some other visual indicator to show when saving is finished might be sufficient, as opposed to closing the widget on save.
The widgets team has been working hard! We’ve spent some time working with (and joining) the MP6 team to get a redesigned widgets screen into the latest version of MP6. If you haven’t seen it yet, download (or update) MP6, and you’ll get this beauty:
We’ve also created a new pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party named Widget Area Chooser, which lets you click to add a widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. to any of your sidebars:
We’ve also made some great progress on the Widget Customizer plugin, which lets you manage your widgets from within the customizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.:
How can you help?
This week, we’ll be focusing on getting the Widget Customizer plugin updated to let you add new widgets. If you want to join in, you can head over to GitHub and submit some patches, do some testing and add an issue, or just drop your ideas/thoughts. Or, you can just post a comment below and we’ll add you to our group Skype chat.
Also, we’d love some code review on the Widget Area Chooser plugin.
We’ll be meeting next week in #wordpress-ui at our normal time, October 28 @ 20:00 UTC.
We adopted the Widget CustomizerpluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party as our customizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. prototype
I tossed out the idea of a “mission control” view for the tabbed prototype, which would let you see all your sidebars at once. The goal with this is to make it easier to move (and maybe copy) widgets between sidebars. Check out the video of this concept in action.
We pondered the question “Can the tabbed prototype and the customizer prototype coexist?” Turns out every one seems to agree that both interfaces can coexist. The tabbed prototype lends itself to more advanced functionality with lots of widgets, while the customizer plugin makes it super simple to edit (and perhaps add) widgets to the areas that are currently visible in the preview.
I brought up the idea of a way to preview widgets from the tabbed prototype. Turns out this is difficult (and maybe impossible) to accomplish since we won’t know what page the sidebarSidebarA sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. lives on, or if it even exists. I’d love to find a way to make this possible.
Weston got his temporary hooksHooksIn WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. included in 25580 — yay! This opens up a lot of possibilities for the customizer plugin.
Weston brought up the idea of preview thumbnails for widgets. The thumbnails would show a preview of how that widgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. would look in the current theme. This would require that all widgets have some “dummy” content. Perhaps we could extend this to existing widgets, as well. Having a preview of each widget in the tabbed prototype may help solidify the connection to their location on the front-end. Super cool idea.
We discussed the menu-like prototype briefly. I’ve chatted with jtsternburg about his progress. He and his his wife recently welcomed their third child (and future blogger) into the world — congrats! As his time is limited, he’s unable to continue work on the menu-like prototype. He’ll be sharing his code soon, so we can pick it up and get it to a testable stage.
Our next steps:
Continued work on the customizer plugin, and lots more user testing.
Connect with the front-end team to see how we can collaborate with widget editing.
Pickup the menu-like prototype and get it to a testable stage.
Follow @lessbloat‘s lead and create a planning spreadsheet to help define tasks and roles.
I’ll be out of town next week. While I encourage everyone to meet in IRC, our next official meeting will be in two weeks on October 7th, 2013 @ 20:00 UTC.
More work on the tabbed prototype, with some more user testing.
RichardTape is feeling better, and ready to get to work on his prototype.
jtsternberg has the foundation for the menu-like prototype ready, and plans to make more progress this week.
Discussed the Widget CustomizerpluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, and pinged the developers to join us. (Hi Weston and John!)
Short and sweet. Lets keep the conversation going on the comments here, in skype, and in IRC. See you next week. Same bat time; Same bat channel.
You must be logged in to post a comment.