Widgets, Menus and Customize Changesets

Earlier today “converted” a Squarespace user, sat there and watched them struggle with hierarchical categories, pages (and why they don’t show on the site), then creating a menu and adding to it. Then widgets… At the end had to explain how all these work, they were pretty happy to set and use them.

From this user (well, hoping to find more “uninitiated” soon), it looks like a good thing would be to tie creating pages with adding them to the menu. Also adding to the menu on the separate Categories and Tags screens.

Apparently the separate widgets screen was easier to grasp for a first-timer, possibly because it’s all about widgets/not that overloaded with all kinds of (new) things.

Menus were easier as soon as a menu was added to the proper location. However the flow of making a page and then needing to add to the menu so the page shows on the site sucked. It was even more confusing when I tried to explain that a tag can be created and then added to the menu and it will show an “archive” of all the posts that were tagged with it. The separate Tags screen makes this somewhat clearer, and having an “Add to the menu” button/link for each tag would probably be a winner.

Thinking that we need “Annoyingly Aggressive Help” for new users 🙂 Maybe something like a modal overlay when they go to a page that is full of new concepts and “things” (of course that modal will also need “Don’t show again!” button).

I’ve been looking at the discussions around Customize Changesets. They seem like a good idea at first look, but IMHO they are an advanced feature that only few users need, and only a fraction of these users will understand and use. Helping out this person earlier made me think that what we have is already hard enough 🙂

Core support for WordPress images to open in a modal window

Goal: Create a mobile and user friendly default for viewing image details in WordPress.

One issue brought up in the NUX discussions on Slack is the way WordPress defaults handling of image details and linking when inserted into the content.

Screen Shot

Currently, by default, images link to attachment pages. There are options to link to nothing, the image source, or custom URLs.

Ticket #31467 proposes a new default to not link to anything when inserting an image.

I believe we should explore an option (and perhaps a default) to some style of mobile friendly modal window.

How others are doing it:

A number of sites have image detail linking methods that are worth looking into:

Tumblr links to modal Image only, with no flair:
Screen Shot
You can see more examples by clicking images on their Staff Picks page: https://www.tumblr.com/explore/staff-picks

Image linking to full size with an “X” to leave the view:
Screen Shot

You can explore more examples: https://michelesons.exposure.co/the-colors-of-antarctica

Photo site 500px.com pops up a modal with various options attached:
Screen Shot

The NYTimes has a hint on hover that the image can be viewed in more detail.
Screen Shot

Upon click, it pops up a model that includes pagination to other images in the article, as well as the caption, image source, and an exist button:
Screen Shot

Flickr has a similar method to 500px, but can additionally be clicked to review a full size non-screen restricted modal. See on their site.

WordPress.com / Jetpack utilize a carousel with pagination of an article’s images, comments, and permalink:
Screen Shot

Live example: http://en.blog.wordpress.com/2015/01/27/customizing-twenty-fifteen/

I believe that something simple, but extensible would be ideal. Perhaps a modal with an “X” for intent, but that has extensibility for including other items, like image captions and pagination to other attached images in an article.

Challenges and requirements

There are a number of challenges to consider.

  • Technology: This may well introduce a need for front-end Javascript, though there are modals now that rely upon CSS only. Either will need to consider browser support.
  • Backward compatibility: We’d need to figure out how to treat images on existing posts and installs.
  • Gallery vs inline image support: We need to consider whether to utilize a feature like this for galleries and inline images, and even perhaps featured images outside of the_content (which would present challenges, as we can’t easily assume how those are being linked or not linked).
  • Library vs home-grown: Modals are not new to the web. Would we prefer to make our own solution for WordPress, or rely on an existing library.
  • Mobile and A11y: Excellent mobile support would not be an option for this feature. We’d need to ensure quality mobile and a11y experiences.

Feature or feature plugin?

I’m wondering if a project like this should be a small feature plugin. It’d be a good way to stretch our legs and test options in the real world, and prepare for merge to core at a later date.