Call for Testing: Gutenberg 4.2 Pre-release

GutenbergGutenberg The 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/ is currently the main focus for the testing group and it is the new editing experience in WordPress. The goal of Gutenberg is to simplify the creation of rich pages and posts in WordPress by replacing old custom HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites., CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., and shortcodes with native Blocks.

To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the 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, and try testing any of the items listed below (or anything listed in the 4.2 release notes). Testing even just a few items is helpful. All testing is welcome!

  1. In blockBlock Block 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. toolbars, check that all writing formatters (e.g. bold, italic, link, strikethrough) work as expected. Try both clicking and keyboard shortcuts. Try from different browsers. (10209)
  2. Add several blocks and use the sibling inserter to add new blocks between them. Try from different browsers. (11018, 11243)
  3. Add new categories to a post. Save draft. Refresh. Are categories added as expected? (10089)
  4. Type some text into a paragraph block and check that pressing Escape makes the block toolbar appear (note: Unified Toolbar mode should be off for this test). (10906)
  5. Type /img into a new block and check that the image block appears as an option. (10955)
  6. Add the Latest Posts block, toggle “Display post date” on, publish or preview the post and check that the has-dates class appears in the source code both in the editor and on the front end. (10727)
  7. Using a small screen (mobile), check that you can open and close the Options panel from More menu (three dots, very top right) > Options (near the bottom). (10894)
  8. Add an image, add a link for the image (sidebarSidebar A 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. near the bottom), toggle “Open in New Window” on, publish the post and check that a new window opens when you click on the image. (9520)
  9. Add a button block and change the background and text color. Do the color changes work as you expected? (10658)
  10. Add a file block, attache a file, publish the post, and check that the “Download” button works normally. Try different types of files. (10976)
  11. Turn on Unified Toolbar mode. Add a Media & Text block and check that you can resize media. (10913)
  12. Add a classic block and include some inline images, links, bold text, italic text and try modifying each of those after making edits throughout.  (10723)
  13. Using a small screen (mobile), log in as a contributor, submit a post, and make sure the “Submit for Review” button appears. (10941)
  14. General: performance improvements were made to toolbars, inserters, and the classic block. Did you notice the changes? (ref)
  15. General: some descriptions of blocks and options in block settings have changed. If you spot one that doesn’t make sense to you, leave a note in the comments here or ask about it in #core-editor on 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/..
  16. General accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): in the WP Admin main menu on the left, go to Gutenberg > Demo and try to navigate to the pullquote block using the keyboard. Did keyboard navigation work as expected for you? Why or why not? Add notes for this one to the comments here and I will pull details and compile them for a succinct issue if needed. 🙂
  17. There is more to test! See What’s new in Gutenberg? (30th Oct) .

Accessibility Related

I wanted to call out accessibility-related testing steps this time in order to highlight some of the important accessibility updates coming through right now and because it may make sense to group them together while testing. Anyone can help test these!

  1. Type some text into a paragraph block and check that the toolbar shows when you press Escape. (10906)
  2. Add a Media & Text block with an image and change the alt text for the image. (11073)
  3. Open the sidebar, click “Document”, press Tab, press Spacebar, check that the “Block” tab is still focused. (10917)
  4. Using a screen reader (if you have a Mac you can use VoiceOver and Safari), open the block inserter, search for a block, and check that you hear an audible response for the number of search results or “no results”. (10755)
  5. Using a screen reader (if you have a Mac you can use VoiceOver and Safari): add, edit, and then remove a link and check that those actions are announced audibly. (10795)

Bonus Round

I’m also adding a separate section as an optional bonus round for testing. You should test these if you know of (or can find) custom plugins that use some of the updated capabilities (such as registering new toolbar buttons in blocks) or if you would like to help test Gutenberg with popular plugins. If you think of a plugin you’d like to see added, please comment to note it!

  1. Add a WordPress embed and check that there is not a big empty space after the block. (10985)
  2. Find a plugin that adds buttons to any block toolbar and check that the added buttons are working as expected. (11196)
  3. i18n: using a small screen (mobile) and with the site language set to something other than English, log in as a contributor, submit a post, and make sure the “Submit for Review” button appears. (10941)
  4. i18n: change your site language to something other than English and check that taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. panels display localized strings. (8449)
  5. i18n: install a plugin which contains a block name made in a non-Latin script (e.g. Список for the List block in Russian) and check that the block appears when you type /сп into a new block. Note that searching for names with diacrytics should also work. (10961, 10770)
  6. Plugin developers can now disable post publishing (lock the post) if certain conditions aren’t met such as a required a minimum title length, requiring a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., disallowing certain types of content, etc. If you have a plugin which has a pre-publish lock or checklist, can you note it in the comments with testing steps? 🙂 (10649)
  7. Test with Advanced Custom Forms (ACF).
  8. Test with Yoast SEO.

If you find a new bug, please file it in gutenberg on GitHub. Thank you!

Block developers: note that there are several deprecations in 4.2 to keep an eye on. It is also noteworthy that you can now write a format that is usable across all blocks that use RichText (10209).

Please join us in #core-test on WordPress Slack any time if you have questions about testing!

#4-2, #call-for-testing, #editor, #gutenberg

Menus (admin) with Windows Phone on 4.2

  • WordPress 4.2.2
  • Old menus admin screen (to be compared with Menu 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.)
  • Windows Phone 8.1, IE11 Mobile (only browser allowed on this device)
  • Testing on an actual site whose menu I actually needed to make a couple edits to… because why not 🙂

#4-2, #customize, #customizer, #flow-comparison, #menus, #mobile, #phone, #visual-comparison, #winphone

Remove a widget with the customizer, iPhone 6+

The goal is to remove a widgetWidget A 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. from the hamburger accessed sidebarSidebar A 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. menu in Twenty Fifteen.

Notes:

When in preview mode, the stacked nav of widgets is pretty subtle. There is no transition other than < changing to X.

I accidentally move widgets when swiping to scroll all the time. I’ve taken to very carefully swiping along the edges to avoid the widget headers, similar to what I have to do in the post editor. I notice there’s a Reorder button at the bottom of the widgets panel. Should widget rearrangement be confined to it?

 

4.2-beta4-31998

#4-2, #customize, #customizer, #ios, #mobile, #phablet, #web, #widgets

Image rotation and editing, mobile vs. desktop

Images uploaded from my phone via Press This or post-new.php seem oriented as I wish when viewed from a phone.

When viewed from desktop, they look like this.

After rotating them in WP’s editor, they show correctly in the image details modal.

But they still show incorrectly in the editor and on the front page.

This happens to me often. I’ve learned not to trust images uploaded from mobile or the image editor.

4.2-beta4-31998 on Macnchrome and iPhone 6+.

#4-2, #desktop, #image-editor, #image-rotation, #ios, #macos, #media, #mobile, #phablet, #sideways

Previewing and switching themes in the customizer, iPhone 6+

4.2-beta3-31985

Switch back to Twenty Fifteen, this time using the Theme Details flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
.

#4-2, #customize, #customizer, #mobile, #theme-switcher

Single image post with preview, Press This, iPhone 6+

4.2-beta3-31975

#4-2, #mobile, #press-this

Visual survey of dismissable admin notices

Auditioning 31233.13.diff for #31233.

#4-2, #desktop, #mobile, #patch-testing

4.2 Nux Group Recap, March 17, 2015

Slack log (Requires 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/. login to view. Set one up if you don’t have a Slack account)


Last week, and the week before, we sought volunteers to examine each of the flows out of the Welcome Panel. This week we went over the reports that came in about the various flows.

Settings

Set your timezone and date format” – @courtneyengle

Issues

  • Users don’t do this at the start. They don’t discover that they need to change things until they actively post something and noticed date/time aren’t how they expect them to appear. They don’t know where to change that.
  • There is a hazard with the proximity of these settings to other settings that could have potentially hazardous consequences, i.e. users also changing site/home URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org?

Suggestions

  • Change the corresponding date/time settings when you manually change the language – have WordPress suggest it, but not do it automatically.
  • Group in the week-starts-on value with that automagicallness might be helpful as well.
  • Add warning text about changing your site/home URLs

Change URL structure” – @bethsoderberg

Issues

  • Confusion of what the “custom structure” could mean and lack of explanation of the parameters accepted by it.
  • The headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. “optional” isn’t really descriptive for the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging./tag base settings section
  • The page “number of tags are available” links to is pretty complicated https://codex.wordpress.org/Using_Permalinks
  • New users rarely know what “permalink” means.

Suggestions

  • Educating users on Permalinks: we all loved the help tab description – “A permalink is the web address used to link to your content. The URL to each post should be permanent, and never change — hence the name permalink.” That should be reused elsewhere.
  • Group Permalinks settings with change site/home URLs settings.
  • This may be less of an issue once 4.2 ships and “Day and name” is the new default.

Appearance

View your site” – @liljimmi

Issues

  • The icon isn’t enough of an indicator that the Site name link links to the Dashboard.
  • The problem is that users don’t typically realize that’s a link back to the Dashboard.

Suggestions

  • Make the link “Dashboard” when viewing the front end and “Visit Site” when in the admin (keep the icons as is).
  • Absence of the site name will be an issue on MultisiteMultisite Multisite is a WordPress feature which allows users to create a network of sites on a single WordPress installation. Available since WordPress version 3.0, Multisite is a continuation of WPMU or WordPress Multiuser project. WordPress MultiUser project was discontinued and its features were included into WordPress core.https://codex.wordpress.org/Create_A_Network.. A suggestion to address this is to add the site name to the right end of the sitebar next to “Howdy, Display Name {gravatarGravatar Is an acronym for Globally Recognized Avatar. It is the avatar system managed by WordPress.com, and used within the WordPress software. https://gravatar.com/.}” This would be the same for single/Multisite.
  • If the Sitename is added to the right end of the sidebarSidebar A 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. should it link to anything? Some say it should link to the front page and others think it does not need to link to anything. Either way, long site names should be truncated.

#4-2, #nux

4.2 NUX Group Agenda, March 17, 2015

Here’s the agenda for Tuesday’s NUX working group chat in the #core-flow channel on Slack.

This is the sixth weekly chat for the 4.2 NUX working group. Just as a reminder, group discussions are open to anyone who would like to attend and participate. So please, join us!

Time/Date: Tuesday March 17 2015 19:00 UTC

DST Reminder:The Time/Date link above should display the correct time for you, whether you’re in DST or not. If you’re in Daylight Saving Time, the meeting will be an hour later than usual for you until March 31st.

Chat Leader: @DrewAPicture
Topic: Reviewing Welcome Panel flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
reports

Welcome Screen Final from 2 24 2015 NUX meeting

  1. Last week and the week before, we sought volunteers to examine each of the flows out of the Welcome Panel.
  2. This week, we’ll go over any of the reports that came in about the various flows, check the comments on the above-linked recap post.

#4-2, #nux

4.2 NUX Group Agenda, March 10, 2015

Here’s the agenda for Tuesday’s NUX working group chat in the #core-flow channel on Slack.

This is the fifth weekly chat for the 4.2 NUX working group. Just as a reminder, group discussions are open to anyone who would like to attend and participate. So please, join us!

Time/Date: Tuesday March 10 2015 19:00 UTC

DST Reminder: If you changed over to Daylight Saving Time over the weekend, the NUX chat will be an hour later for you, though still 19:00 UTC.

Chat Leaders: @DrewAPicture
Topic: Working Meeting: Examining Welcome Panel Flows

  1. Last week we sought volunteers to examine each of the flows out of the Welcome Panel.
  2. This week, we’ll use the meeting time as a working meeting to continue documenting those flows. If you haven’t yet volunteered to document a flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
    Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
    , check out the recap posted over the weekend and leave a comment with the flow you’d like to work on.
  3. Next week, group members will report back with their findings and recommendations

#4-2, #nux