Make WordPress Core

Updates from shaunandrews Toggle Comment Threads | Keyboard Shortcuts

  • shaunandrews 3:18 pm on April 22, 2014 Permalink
    Tags: media library, , media-grid   

    Remember the Media Grid project? It was original proposed back in the 3.7/3.8 cycle but never really took off — mainly due to our focus on The-Project-Formerly-Known-As-MP6 and the Widget team.

    Since then, I’ve been working on a plugin in some spare time: https://wordpress.org/plugins/media-grid/

    Its messy. Its basic. But I think there’s potential in the idea to bring the media modal’s layout to the Media Library. @helen created a GitHub repo for development: https://github.com/helenhousandi/wp-media-grid-view (Make sure you checkout the issues, especially: https://github.com/helenhousandi/wp-media-grid-view/issues/7)

    I’m looking to form a team to work on this project. I think we could have something ready for 4.0, but 4.1 is a possibility as well. It all depends on you. 🙂

    I’m looking for any-and-all help, but specifically 1-2 backbone-capable developers with familiarity with the Media Modal would be a huge help.

    Maybe we can chat about this a bit during tomorrow’s Dev Chat. Outside of that, lets plan on meeting in #wordpress-ui this Friday, Apr 25 @ 16:00 UTC.

    So, are you interested? Leave a comment below and/or join us on Friday. Thanks!

  • shaunandrews 2:59 pm on December 16, 2013 Permalink

    Better Widgets 

    The Widgets team has been busy. 🙂 Outside of the Widget Customizer plugin (posted about previously), we’re also working on some updates to the main wp-admin widgets screen through the Better Widgets plugin. This plugin does a bunch of things:

    • Available widgets have moved to the right side of the screen. The idea is that your widget areas (a.k.a. sidebars) should be the real focus of the screen — these are the things you can edit and manage. This may be a controversial change, as its the opposite of the menu screen (widgets closest cousin.)
    • Brings the widget icons from the Widget Customizer plugin to wp-admin.
    • Available widgets are now contained in a separately scrollable area. The goal is to help reduce to drag-and-scroll-and-scroll-and-scroll-and-drop problem that is so common from our initial research.
    • Widget descriptions are displayed in a single line, and truncated if they are too long. Clicking/Tapping on a widget expands the description (along with the area chooser from 3.8.)
    • Inactive Widgets are displayed below your active widget areas. This may be problematic as you have to drag-and-drop inactive widgets to active widget areas, but its an area we’d like to improve — maybe they should get an “area chooser”-like UI?
    • When editing a widget, the title is highlighted (using your current color scheme).
    • Clicking/Tapping on the “Save” button inside a widget now closes the widget and gives a quick confirmation message that the settings have been saved. This is based on some of our earlier user tests.
    • You’ve always been able to drag an active/inactive widget over the list of available widgets to deactivate it (yes, really!), but its been ugly. We’ve made it a little more tolerable. Give it a try.

    The plugin is still very young, but we’re looking to the community to get some interested from designers, developers, and testers. Please, install the plugin and play around. If you’d like to help us improve widgets, please join us every Monday at 20:00 UTC in #wordpress-ui — you can also drop your Skype nick below and we’ll add you to our ongoing chat.

    Some things to keep in mind when testing the Better Widgets plugin:

    • Responsive styles are essentially broken. Its on our short list, but we haven’t gotten to it yet.
    • The code is quick and dirrty — I’ve been the only developer committing code. Please, lets change this!
    • Some of this may look familiar to early MP6 adopters — this code comes from an earlier version of MP6, and was removed before the MP6 merge into 3.8.
    • We need accessibility help! Keyboard navigation is a must. I’d love to ditch the separate “accessibility mode” altogether and make it accessible out of the box.
    • PeterRKnight 3:26 pm on December 16, 2013 Permalink | Log in to Reply

      These improvements are really good!

      Better Widgets 0.2 gives me a php fatal error PHP Fatal error: Cannot redeclare wp_widget_control()
      (wp 3.8, no mp6 activated)

      • shaunandrews 3:44 pm on December 16, 2013 Permalink | Log in to Reply

        Ah shoot. This is why I shouldn’t be the sole developer on a plugin!

        I ended up modifying a core file so that I could make wp_widget_control() “pluggable” — hopefully someone knows a better way of doing this: https://gist.github.com/shaunandrews/7989121

        • Jose Castaneda 4:52 pm on December 19, 2013 Permalink | Log in to Reply

          jQuery would be one way. Remove then append. Not entirely ideal but can get it done. Unless we can make wp_widget_control filterable/pluggable in core.

      • shaunandrews 4:37 pm on December 16, 2013 Permalink | Log in to Reply

        For now, I’ve removed that “pluggable” function and bumped the plugin to v0.3. Unfortunately this means we lose the widget icon and the fancy styling of the widget descriptions.

    • DownHouse00 3:45 pm on December 16, 2013 Permalink | Log in to Reply

      Fatal error: Cannot redeclare wp_widget_control() (previously declared in domains\red.test\wp-content\plugins\better-widgets\widgets.php:24) in domains\red.test\wp-admin\includes\widgets.php on line 241

      • shaunandrews 5:40 pm on December 16, 2013 Permalink | Log in to Reply

        Grab the latest version (0.3) of the plugin — it should resolve this fatal error, but comes at the cost of some of the design/functionality. I’m hoping someone more knowledgable than me can help “fix” the issue at hand.

    • neojp 4:27 pm on December 16, 2013 Permalink | Log in to Reply

      I would love to see a built-in feature to choose what widgets show up depending on the page template / page url, like on Widget Context.


      • Weston Ruter 5:41 pm on December 16, 2013 Permalink | Log in to Reply

        @neojp In terms of sidebars, this is a feature of the Widget Customizer. The sidebar sections in the customizer will show/hide based on which sidebars are used on a given page. You can click around inside of the customizer to navigate to a page, and if that page template uses different sidebars, you’ll see the sections in the customizer change while navigating.

        It doesn’t, however, hide widgets from the sidebar sections if they aren’t currently rendered in the sidebar (e.g. via Widget Context or Jetpack’s Widget Visibility). Perhaps the widget controls could be made opaque or minimized, for example:

        I opened a Widget Customizer issue for this: https://github.com/x-team/wp-widget-customizer/issues/65

    • tomdryan 5:23 pm on December 16, 2013 Permalink | Log in to Reply

      Better Widgets is a great improvement already! The active widgets should definitely be front and center instead of off to the right as they have been historically — it makes much more sense.

      Is there a way to display which plugin created each widget? That would be very helpful info. Perhaps there could be a filter at the top of the available widgets column. It’s often difficult to figure this out from the name of the widget, especially if you are evaluating a number of plugins with similar functionality.

      • shaunandrews 5:39 pm on December 16, 2013 Permalink | Log in to Reply

        Filtering of available widgets is on my shortlist. Look at the live search-like filter UI available in the Widget Customizer plugin for a start. Sorting available widgets by their creator (think “default/core,” “Jetpack,” “theme name,” etc) could be useful as well. The icons may help with this, too.

    • Weston Ruter 5:32 pm on December 16, 2013 Permalink | Log in to Reply


      We need accessibility help! Keyboard navigation is a must. I’d love to ditch the separate “accessibility mode” altogether and make it accessible out of the box

      See @michaelarestad‘s work on adding a keyboard-accessible way to reorder widgets: https://github.com/x-team/wp-widget-customizer/issues/21#issuecomment-30152142

    • Mike Schinkel 7:15 pm on December 16, 2013 Permalink | Log in to Reply

      +1 on having the widgets on the right. I’d like to see menus reorganized in that manner, actually.

      Any thoughts given to targeting? For example, coming up with a “query language” based on resultant query vars from URL routing that would allow targeting specific pages or a group of pages. The query language could be used behind the scenes, of course, and give users nice and easy drop-downs. This was something I thought about doing a while back but then had to focus on other issues for clients.

    • Zoe Rooney 2:23 am on December 17, 2013 Permalink | Log in to Reply

      Just sent you (@shaunandrews) a pull request that improves the responsiveness via Github, so that at least it isn’t totally broken. Are you planning to use the issue tracker there for suggestions as well or do you want to keep commentary here mainly?

      • Zoe Rooney 3:16 am on December 17, 2013 Permalink | Log in to Reply

        Actually, I’ve noticed that the github repo is out of date. Would be happy to send you my suggestions for improving the responsiveness another way, as/ when it’s helpful!

    • David A. Kennedy 2:05 am on December 19, 2013 Permalink | Log in to Reply

      Hi all (and @shaunandrews)!

      I’m with the WP Accessibility team, and today during our team chat while discussing some of the needs of the plugin teams, I volunteered to help you all out. I love me some widgets, so I’m excited that they’re getting some love and look forward to helping bring accessibility into the fold. 🙂

      I’m leaving for vacation Friday and will be out of pocket for most of the Christmas holiday, but will spend some time catching up on the plugin goals and past posts. I’ll definitely install the plugin and play around with it from an accessibility standpoint. I’ll try to make the chat Monday (assuming there is one), and definitely those following the holiday.

      Let me know if you’ve tested anything from an accessibility standpoint or what questions you might have. I figure I’ll audit the plugin from all points accessibility, with a focus on keyboard navigation. I would love if we could remove the accessibility mode too.

      Where is primary development happening? Github? Somewhere else? I couldn’t find that in my brief scan of things. Where should I post feedback or contribute code?

      Thanks for thinking about accessibility and asking for help! Looking forward to making widgets a better experience for all!

  • shaunandrews 7:39 pm on December 7, 2013 Permalink  

    Widgets ♥ the Customizer 

    The Widgets team has been hard at work on our latest project which adds widget management to the customizer. It looks a little something like this:

    We’d love to have some more help, especially PHP and Javascript developers with experience with the customizer, to help up polish things up and get ready for a proposal for including in 3.9! If you’re interested in helping, please leave a comment with your Skype handle. I’ll add you to our ongoing chat, and all are welcome to join us in #wordpress-ui every Monday at 20:00 UTC.

    • Gustavo Bordoni 7:48 pm on December 7, 2013 Permalink | Log in to Reply

      Hey Guys, I would love to help. Skype: “webord”

    • Frankie Jarrett 7:48 pm on December 7, 2013 Permalink | Log in to Reply

      Very exciting! Way to go @shaunandrews @westonruter and team.

    • Brad Touesnard 7:55 pm on December 7, 2013 Permalink | Log in to Reply

      Dude, that’s awesome! One of the top questions when I was freelancing was how do I edit the sidebar/footer/some other area that uses a widget.

    • Rohit Tripathi 8:12 pm on December 7, 2013 Permalink | Log in to Reply

      Tremendous. Amazing. Lovely. Excited for it!

    • PeterRKnight 8:39 pm on December 7, 2013 Permalink | Log in to Reply

      This is really cool. I’ve been working with x-team’s plugin, but I can already see a lot of changes in this version. Is there a link to the plugin that is on display in the video? I’ll try to catch the chat on Monday. My main concern is allowing widgets that need a bit more space (width mainly) to function well.

    • Weston Ruter 9:34 pm on December 7, 2013 Permalink | Log in to Reply

      There are two big things being worked on right now:

      1) The new fly-in panel for selecting a widget to add (as opposed to the old select drop-down). Branch new-widget-addition, PR #58.

      2) Realtime previews of widget changes (as opposed to triggering a refresh of the preview). Branch issue-37-postmessage, PR #37.

      There are other issues that have been logged, some of which are low-hanging fruit and others which aren’t critical to address.

      Please fork the wp-widget-customizer repo, and open pull requests for the issues you want to tackle! For new issues, open pull requests to the develop branch; if you want to contribute to an existing branch (pull request), simply branch off of the existing branch (e.g. new-widget-addition) and then issue the pull request back to that branch so that your commits will be included when original branch (and pull request) is merged.

    • Graham Armfield 9:06 am on December 8, 2013 Permalink | Log in to Reply

      Please can I ask that anyone who gets involved with building this keeps accessibility in mind.

      Some things to think about would be: firstly, ensuring that all controls and settings can be reached and influenced by keyboard interaction – ie not requiring the user to use a mouse. The second thing to keep in mind is how the stuff you’re presenting will be voiced by screen readers. Please also ensure that there is good colour contrast.

      If there’s anything you are not sure about, please reach out to the Make WordPress Accessible team – we’re there to help devs understand more about accessibility when they’re putting new WordPress functionality together. And as soon as you’ve got something functional, let us know and we’ll try to put it through its paces.


    • Nashwan Doaqan 4:40 pm on December 8, 2013 Permalink | Log in to Reply

      Amazing! .. Five for X-TEAM and all the contributed developers!

    • Weston Ruter 11:23 pm on December 9, 2013 Permalink | Log in to Reply

      We could really use help testing the live previews for widget changes (PR #37), and the new UI for adding widgets (PR #58).

    • Jose Castaneda 12:01 am on December 10, 2013 Permalink | Log in to Reply

      That is amazing! I sort of wish I had known about this a little sooner! I’d love to help however I can just not as proficient with PHP/JS as I would like to be though. I can try and make the IRC chats and possible skype ( jmcasta85 ) but it’s not always easy for me since I work graveyard shifts.

      I’ll have to mess with this a little more in the coming days. 🙂

    • Primoz Cigler 11:18 am on December 13, 2013 Permalink | Log in to Reply

      I would be interested in this as well. I haven’t contributed to core yet, but I have build quite some themes with customizer, so I have some experiences. My skype: primozcigler

    • doubleyoumusic 10:29 am on December 16, 2013 Permalink | Log in to Reply

      I’m new to wordpress development but I really like this project and would like to help.
      Twitter: @jonathan_wilke

    • tomdryan 5:34 pm on December 16, 2013 Permalink | Log in to Reply

      It’s not working for me yet. When I run the Customizer, I see the list of widgets load, than it disappears and is replaced by the standard Customizer menus. Any ideas on this one?

      • Weston Ruter 5:49 pm on December 16, 2013 Permalink | Log in to Reply

        @tomdryan Does the template you have loaded into the customizer preview have dynamic_sidebar() calls in it? If not, then there are no sidebars on the page, and you’ll need to navigate to a page in the customizer which does.

        Also, if you are not running on trunk, you will not have problems seeing sidebars in the customizer if they are empty of widgets. See this notice shown in the plugin’s description:

        Unless you are running trunk, you won’t be able to add widgets to empty sidebars. This is because the temporary hooks necessary are removed in final releases. So you must currently add at least one widget to each sidebar (in the traditional way) for it to appear in the customizer.

    • tomdryan 6:45 pm on December 16, 2013 Permalink | Log in to Reply

      Count me in. Skype: tomdryan

  • shaunandrews 7:25 pm on November 4, 2013 Permalink
    Tags: ,   

    Widgets Area Chooser – 3.8 Proposal 

    Placing widgets with drag-and-drop can be tedious and annoying — especially if you have lots of sidebars on which to drop widgets. The Widgets team has been working on a few solutions (for this problem, and more), including redesigning the wp-admin widgets interface and adding the ability to manage widgets from within the customizer. These projects are still ongoing, and not ready for 3.8. However, along the way we’ve found a few incremental changes which improve the overall experience of working with widgets. Some of these improvements have made their way into MP6. Others involve more functional changes which don’t belong in MP6. This plugin is one of those improvements.

    The Widgets Area Chooser is available at: https://wordpress.org/plugins/widget-area-chooser/

    The Problem
    Dragging widgets from the available widgets in the top-left, to a sidebar “below the fold” is hard. Almost impossible. Dragging widgets on a touch screen device is also difficult.

    The Solution
    Clicking (or tapping) on an available widget brings up a list of available sidebars that you can place the widget in to — its pretty simple, and works great on touch devices.

    There’s also the accessibility problems that drag-and-drop introduces, which necessitates the need for the separate (and often neglected) Accessibility Mode. This plugin provides a much easier way for those with screen readers to add new widgets without having to drag-and-drop. In fact, this could be the first step towards removing the need for an Accessibility Mode for widgets.

    Here’s what the chooser looks like:

    Here’s a quick video of the plugin in action:

    Please let us know what you think!

    • william.deangelis 7:37 pm on November 4, 2013 Permalink | Log in to Reply

      Not bad. I assume that on mobile each of those two panels would be its own screen? If that’s the case then I say wicked. Go for it!

    • Jeff Behnke 8:20 pm on November 4, 2013 Permalink | Log in to Reply

      I like it. Solves the problems that need solving in the widget admin.

    • Bryan Petty 8:20 pm on November 4, 2013 Permalink | Log in to Reply

      Just wanted to say that I’m excited that you’re working on this @shaunandrews, and it’s coming along nicely.

      I’m still curious how well this UI handles with 3-5 widget areas, and maybe 50+ available widgets, and what happens with the stored/saved widget settings, but this really is a great start.

      • shaunandrews 1:43 am on November 5, 2013 Permalink | Log in to Reply

        Hey Bryan, thanks for the kind words — I’m super excited to be working on this!

        I think you may be getting the Widgets Area Chooser (WAC) plugin confused with the general layout updates as part of MP6 and the separate widgets project. This post is focused solely on the WAC plugin, which lets you click-to-add a new widget.

    • and0r1995 8:25 pm on November 4, 2013 Permalink | Log in to Reply

      I don’t know, I like the idea and stuff, but I personally prefer the drag and drop, Although when there are a lot of widget areas it’s a bit annoying.

    • Marcus 8:36 pm on November 4, 2013 Permalink | Log in to Reply

      I like this, already an improvement, nicely done!

      Aside from @bpetty ‘s point, another (minor) idea/tweak also is for UX just clicking on the area to place a widget instead of click area > add widget will save a click for non-default widget areas. The cancel button should probably still remain.

      • shaunandrews 1:47 am on November 5, 2013 Permalink | Log in to Reply

        …just clicking on the area to place a widget…

        I thought about that initially, primarily because it was one less new UI element to show on the screen — the widget areas are already there, just let the user click on them to add the selected widget. This caused two problems:
        1) It wasn’t immediately obvious what to click.
        2) It didn’t really solve the problem of the widget area being off the screen.

        If you have an idea on how to make this all better, please don’t hesitate to sketch it out and/or attend our chat on Monday at 20:00 UTC. Your thoughts and feedback is greatly appreciated. Thanks!

        • Luke McDonald 6:25 pm on November 8, 2013 Permalink | Log in to Reply

          My initial thought when trying this out for the first time was I would click on the widget area I wanted and the widget would be added to that area. I was testing on a theme that had 7 or 8 widget locations, which is why I didn’t see the “Add Widget” button below the chooser list.

          That said, for me it was *obvious* what to click, and I think it would be for many others too. It seems this functionality should replicate that of a select menu or your typical drop-down menu. In both cases, once you select an item, an action takes place.

          If it’s not immediately obvious for users the first time, it will be the next time they do it. I think after someone knows how it works, it would be preferred not to have to make an extra click or even scroll down to the “Add widget” button in cases where there are many widget areas.

    • mbootsman 9:17 pm on November 4, 2013 Permalink | Log in to Reply

      Major UI improvement. Thanks for developing this!

      • shaunandrews 1:49 am on November 5, 2013 Permalink | Log in to Reply

        Thanks for trying it — hope you like it. Please let me know if you find any problems, or have any suggestions for improvements.

    • Dan Milward 2:59 am on November 5, 2013 Permalink | Log in to Reply

      Awesome work man. I don’t know why but on one of my test sites the list of available widgets is on the right hand side of the screen instead of the left hand side of the screen. Its pretty weird.

      Also I hope the menus screen gets a similar overhaul.

      • shaunandrews 3:16 am on November 5, 2013 Permalink | Log in to Reply

        Perhaps you’re using an older version of MP6? Can you provide version details for WordPress, MP6, and the Widgets Area Chooser plugin? Also, what browser and OS? A screenshot would go a long ways as well.

    • Grant Palin 5:17 am on November 5, 2013 Permalink | Log in to Reply

      I like it. I’ve found the drag and drop setup a bit finicky before, and the click, click, click seems a usability improvement, especially when multiple widget areas are involved. Plus the UI fits nicely with the MP6 theme.

    • HerrLlama 11:19 am on November 6, 2013 Permalink | Log in to Reply

      I don’t like it. The UI is nice tough, but the usability is … well how could I say it neat? … a piece of crap. Now I drag and drop the widget on the wanted position in the wanted widget area. With this “improvment” I have to click on the widget, then I have to choose the area and than click I have to click the add button. But after all that I have to drag and drop the widget on the right position. Seriously, that makes it more complicate than it could be.

      • shaunandrews 2:51 pm on November 6, 2013 Permalink | Log in to Reply

        You can still drag-and-drop widgets in to place. You don’t have to click.

        • HerrLlama 3:57 pm on November 6, 2013 Permalink | Log in to Reply

          Yes, I already read this, but your proposal is a way more to confuse the users. WordPress itself said that they wanted to implement decisions, not options. It would help if we don’t work on the frontend for the widgets and create an API (e.g. add_widget_to_sidebar( $widget_type, $sidebar ) or stuff like that) which actually works.

          I agree, that the UI needs some improvements, but there are plenty of different screens of editing things (tags, posts, menus, widgets, options, etc) which also confuses the users. I think we should focus on a consistent backend before we implement new things. If not, I think that is a major problem of WordPress. Have you ever been to a Typo3 backend? Everything looks like it is in one pour.

          And also: Sorry for beeing rude, but I’m german 😉

      • Helen Hou-Sandi 3:20 pm on November 6, 2013 Permalink | Log in to Reply

        As @shaunandrews noted, this does not replace drag and drop; it provides an alternate method for those who can’t or don’t want to drag and drop for whatever reason. Also, you are being rude, and that is unnecessary.

      • Matt Thomas 6:19 pm on November 7, 2013 Permalink | Log in to Reply

        I would recommend re-reading the original proposal. Managing widgets is currently not possible on a mobile device because drag-and-drop is the only supported method of adding or removing widgets.

      • PeterRKnight 4:17 am on November 8, 2013 Permalink | Log in to Reply

        drag and dropping a position vertically is easy (on desktop), the issue with the current widgets screen that this improvement solves is about making it much easier to add widgets to widget areas without having to do acrobatics. Try dragging and dropping a widget on a screen that requires scrolling because there’s so many widgets and so many widget areas. This however is a major usability improvement for desktop as well as mobile.

    • bfintal 2:08 pm on November 11, 2013 Permalink | Log in to Reply

      I like it. This would solve the drag and drop problem in mobile versions also.

      This is just me, but a method of duplicating a widget would be helpful.

      • shaunandrews 2:46 pm on November 11, 2013 Permalink | Log in to Reply

        Yup, part of the goal with this was to improve the experience of adding widgets on mobile.

        This is just me, but a method of duplicating a widget would be helpful.

        This isn’t the first time I’ve heard this request, so you are not alone. 🙂

      • Weston Ruter 6:20 pm on November 11, 2013 Permalink | Log in to Reply

        Regarding duplicating a widget, there is this Duplicate Widget plugin and there is the Clone Widgets plugin. The former does a shallow-copy/symlink/reference for the widget, and the latter seems to do a clone or deep copy of the widget. Which use case are you interested in? Do these plugins do what you want?

  • shaunandrews 3:32 pm on August 14, 2013 Permalink
    Tags: , ,   

    Howdy everyone! There’s been a lot of discussion over the last week or two around widgets for 3.8. Inspired by @lessbloat, I’ve made a short survey with a few basic questions about widgets and how you use them. It you could, please take a few minutes to share your thoughts:

    Take the Widgets Survey


    • pekz0r 5:21 pm on August 14, 2013 Permalink | Log in to Reply

      I think we should rethink the whole widget and rewrite of the whole widget API, not just the hot up the widgets screen.
      I want widgets to be a lot more flexible and pluggable. First of all, it should be extremely easy to create a widgets. Everything that should be needed should be a function/file/hook for the configuration form and one function/file/hook for the presentation. It would also be cool to have a widget repository like the repositories for plugins and themes so you can install new widgets with a simple click right in wp-admin.

      I would also like a simple solution for using these Widgets in the content areas, not just the sidebars. Maybe by using shortcodes to add a widet to a content area or, even better, just use them as objects(like videos and images) that you can resize and drag around. Widgets would be more like pluggable views than inflexible sidebar boxes.

    • Nashwan Doaqan 5:42 pm on August 14, 2013 Permalink | Log in to Reply

      Survey Completed 🙂

    • Sallie Goetsch 6:18 pm on August 14, 2013 Permalink | Log in to Reply

      The question about the number of sidebars is problematic. First, actual sidebars or widgetized areas? Second, which theme on which site?

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc
Skip to toolbar