Previewing Site Responsiveness in the Customizer

Note: This proposal was merged to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.Core Core is the set of software required to run WordPress. The Core Development Team builds WordPress. in [36532]. Download the latest nightly build and give it a try!

The customizer is a framework for live-previewing changes to WordPress sites. And by now, nearly every WordPress theme/site features responsive designs intended to look good on any device. Previewing site changes is just important on mobile as it is on desktop, to ensure that front-end user experience is exactly as intended.

Bringing these ideas together, #31195 proposes a new feature in the customizer that allows users to quickly preview their site on various device sizes. Here’s a quick walkthrough:

customize-device-preview

The proposed feature focuses on simplicity. The device previewer is in the customizer controls footer, near the “Collapse” button. Only three options are available by default, and they’re intentionally ambiguous. Rather than looking like specific devices, the intent is to understand what a site may look like on a roughly tablet-sized, portrait-orientation device or a roughly phone-sized device, in addition to the standard desktop view. A further extension in #34051 may allow larger screen sizes to be previewed on smaller devices with forced horizontal scrolling; for now, the feature is only available on larger devices.

For Developers

Along with this feature would come a couple of ways to customize the behavior. Please keep in mind that these are proposed and subject to change.

The new customize_previewable_devices filter lets you customize the devices available for preview. One use case may be to turn off this feature entirely:

add_filter( 'customize_previewable_devices', '__return_empty_array' );

Or, developers can add additional custom device preview buttons. The button element will be rendered and the appropriate JS applied to custom devices when the button is clicked; however, developers need to provide CSS to add an icon to the button and to react to the preview size changing.

In JavaScript, themes and plugins can react to changes in the device size being previewed with:

wp.customize.previewedDevice.bind( function( newDevice ) {
     // Do something to adapt to the new device being previewed.
});

This is particularly useful if your theme requires a JS trigger for responsive elements to apply, instead of using CSS solely.

Summary

Any feedback and testing is much appreciated. Device previews in the Customizer can be tested with the latest patch on #31195.

Comments are welcome on this post, the ticket (#31195), or our continuous chat in #core-customize on Slack.

#customize, #mobile, #needs-testing

Shiny Updates v2

Shiny Updates v2

What is Shiny Updates?

With the stated goal of “Hiding the The Bleak Screen of Sadness”, the shiny updates team is working on bringing a smoother experience for managing plugins and themes to WordPress.

Shiny Updates v2 is an effort to continue the shiny updates effort from WordPress 4.2. The original shiny update feature only includes shiny pluginPlugin A 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 updates. The new version aims to extend this to all aspects of updates, installs, and deletes for plugins, themes in WordPress.

There are numerous screens in the Adminadmin (and super admin) that allow you to install, update, and delete themes, plugins and WordPress itself. Shiny updates is exploring ways to improve their design and especially to offer a better user experience by improving perceived performance and limiting confusing notifications.

What does it do?

The shiny updates plugin currently enables the following features:

  • Deleting single plugins, bulk updating and bulk deleting plugins from the plugin page.
  • Shiny plugin installs from the plugin install screen: multiple actions can be queued up.
  • Shiny theme installs, updates, and deletes, multiple queue-able, including multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site.

What is still being worked on?

Currently the team is brainstorming a complete rethink of the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. updates page (update-core.php), working to improve clarity and enable easier Update All functionality. Work on that is happening here: https://github.com/obenland/shiny-updates/issues/5

How can I help?

Anyone can help by testing the plugin! Download and install the plugin, then test out all the shiny features: try installing, updating, and deleting plug7ins and themes, including bulk actions, on both single and multisite. Does everything work as expected? Are there any jarring flows? Missing notifications?

Please report any issues on the Github repository, or drop in the #feature-shinyupdates channel in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to ask questions or give feedback. It’s also where we have our weekly chats, on Tuesdays 19:00 UTC. Thank you!

P.S. Props @adamsilverstein for ghost-writing this post.

#feature-plugins, #needs-testing, #shiny-updates, #upgrade-install

Call for Testing: Customizer Menus

First, thank you so much if you help out by taking the time to test new features!

Customize > Menus will be one of the new features in WordPress 4.3. It is being added in addition to the Appearance > Menus page and the Appearance > Menus page will not be changed as part of the new feature.

How to Setup for Testing

  1. Always backup first or test on a site that was made for testing (see warnings below).
  2. Go to Plugins > Add New and search for “WordPress BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. Tester”
  3. Click the “Install Now” button for the WordPress Beta Tester pluginPlugin A 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
  4. Go to Tools > Beta Testing
  5. Select the “Bleeding edgebleeding edge The latest revision of the software, generally in development and often unstable. Also known as trunk. nightlies” option
  6. Click the “Save Changes” button
  7. Go to Dashboard > Updates
  8. Click the “Update Now” button

You should see the a message similar to this in the footer in wp-adminadmin (and super admin) pages:
“You are using a development version (4.3-alpha-123456).”

Warning!

  • Do not use the WordPress Beta Tester plugin with a production siteProduction Site A production site is a live site online meant to be viewed by your visitors, as opposed to a site that is staged for development or testing..
  • To test locally on your computer, install a local server, and then install WordPress.

How to Test CustomizerCustomizer Tool 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. Menus

Test creating menus including adding, removing, and editing menus. You may just poke around and test on your own to see if you can find any bugs, or you can use the following checklist as a guide:

Before you begin:

Sample testing checklist (time estimate: ~20 minutes for new users):

  1. Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). sure you have installed the latest nightly WordPress releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. (see setup steps above).
  2. Go to Appearance > Customize and then click on Menus.
  3. Add a new menu named “Main Menu.”
  4. Add all of the pages already saved on the site to the menu.
  5. Save the changes you’ve made so far, exit the Customizer, then navigate back to the menu you just created in the previous step.
  6. Set the “Main Menu” as the primary menu so it shows in the live preview.
  7. Reverse the order of the menu items.
  8. Add the “Travel” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. to the menu.
  9. Move “Travel” so it is a child of the first item in the list.
  10. Add a link to Twitter and make it a submenu item next to Travel.
  11. Move Travel and Twitter from the first item so they are submenu items under the About page. Save changes.
  12. Create a new menu for social media with at least one social media link in it and find a way to make it show up in the live preview on the right.
  13. There is a way to use advanced menu settings to enable descriptions for menu items. Try to find it and add a description for the “About” page.

Other testing ideas:

  1. Test using a very large menu with a lot of items. (Also see #32769.)
  2. Test using a menu that is 10 levels deep.
  3. Test with various themes and other types of menus.
  4. Comment on this post with any other testing ideas!

If you want to dig in deeper and get involved with usability testing with others, that would be so cool! Please comment on this post or in the #core-customize Slack channel if you’re interested in doing more.

What to Look For

Look for blockers! A blockerblocker A bug which is so severe that it blocks a release. is a very bad bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. that blocks people from using the feature. At this stage, the biggest problems are the top priority and you should look for those first and foremost. Be aware of the known issues (see below).

If you do find a bug, report it in Trac or ask about it in the #core-customize Slack channel.

Known Issues

Here are a few key issues still being worked on:

/cc @jimmysmutek @lisaleague @kevinwhoffman @dinamiko
(because you expressed interest in helping with testing somewhere along the way) 🙂

#call-for-testing, #customize, #menus, #needs-testing