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