Tag Archives: gutenberg

Tammie Lister 4:30 pm on July 5, 2019
Tags: gutenberg, , wceu-usability-testing   

WCEU usability test results: part one

During WCEU there were a number of usability tests run. For each test, there was a form to follow through and questions. In this first part, five videos will be shared with the answers, then a second post with another five will be made. Thank you every person that both helped run tests and also took part in them. It’s really important to have opportunities to test like this.

As you watch through have a think about a few things:

  • What bugs or enhancements could be made from this?
  • What insights do you gain in the way people use 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/?
  • Any ideas that spring up from this of ways to make the editor even better for people?

Share anything you have as a comment and part two will be along in a few days.

Continue reading →

#gutenberg, #usability-testing, #wceu-usability-testing

Mark Uraine 12:58 pm on June 4, 2019
Tags: gutenberg,   

Gutenberg Usability Testing for May 2019

As noted in last month’s post, I’m conducting a usability test every week on userbrain.net for 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/. These tests are a way to keep track of Gutenberg’s progress and improvements. It also helps reveal any additional UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. issues that may not have been evident.

This month focused on image and video blocks. It also involved editing content in relation to those blocks like moving them up and down in the post, and adding captions.

Testing Script

Imagine you are on assignment to write an article for a new travel blog. Luckily, they are sending you to your favorite vacation spot! Your instructions are to choose a topic you think will get people as excited as you are about this place. It’s up to you to pick a focus (food, activities, lodging, etc.).

  1. Log in.
  2. Create a new post.
  3. Give your post a title and add one sentence.
  4. Add two images side-by-side.
  5. Add a YouTube video (https://www.youtube.com/watch?v=-PcrLWkxZSk).
  6. Add a caption to the video you added.
  7. Swap one of your previously added images with another image.
  8. Add an image on the left and some text on the right and a paragraph below it.
  9. Move the video to the bottom of the content.
  10. Once you’re done, publish the post.

Videos

Video 1 (May 6, 2019)

Video 2 (May 13, 2019)

Video 3 (May 20, 2019)

Video 4 (May 28, 2019)

Feedback

Please watch the videos and comment on anything you noticed particularly interesting about how these users used Gutenberg. It would be great to call out points of struggle which can be connected to opportunities, or even points of success that can be positive indicators of improvements.

As a reminder, if you’re interested in helping with usability testing, there’s a number of things you can try:

  • Join the #research 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/..
  • You can write a test script that can be usability tested for Gutenberg.
  • Or simply watch the videos and leave some feedback below.

Thanks for watching and contributing anywhere you can.

#gutenberg, #usability-testing

Mark Uraine 12:22 am on May 8, 2019
Tags: gutenberg,   

Gutenberg Usability Testing for April 2019

To keep a steady pulse on the user experience in 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/, the Research Team is conducting weekly usability tests on userbrain.net. These tests are meant to be non-moderated tasks for new and experienced WordPress users. One test per week is given and reviewed to help highlight how people might go about completing tasks within Gutenberg.

The tasks will remain the same for each user over the course of two months. This will help compare a few usability tests within a similar range of time throughout the year.

I’ll gather the results at the end of each month to share.

Each user was new to WordPress, but wasn’t screened for demographic data.

Testing script

Imagine your friend has requested that you build a webpage on their site using excerpts from the novel, Moby Dick. They sent you a mockup of what they’d like you to build. And to help you further, they’ve already uploaded all the media and content you’ll need for this. They’ve also created a draft page for you to design called, “Moby Dick ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox..”

  1. In a new tab in your browser, review the mockup at: https://cldup.com/SAtxaMGvA0.png
  2. Now go back to: https://wpuxtesting.com/wp-admin
  3. Log in with
    username: XXXX
    password: XXXX
  4. Find and open the “Moby Dick Excerpt” draft page.
  5. Begin editing the content so that it looks like the mockup. Try to get as close as you can to the mockup’s design before completing. All the assets are already added to the site in the Media Library.
  6. Once you’re done, publish the page.

Please make sure to talk through everything out loud as you complete the tasks.

Videos

Video 1 (April 15, 2019)

Video 2 (April 22, 2019)

Video 3 (April 30, 2019)

Feedback

  1. While watching the above videos, did you have any findings or key takeaways?
  2. Do you have any thoughts on how this script might be improved?
  3. Would you like to create a usability test script? If so, share in the comments below.

Caveat: Because these are non-moderated usability tests, sometimes the people going through the tasks treat them as such – simple tasks they need to finish. This can lead to a lack of creativity and exploration on the part of the user and may not reflect real-life situations when building a site.

#gutenberg, #usability-testing

designsimply 5:20 am on February 5, 2019
Tags: 5.0, , gutenberg   

Call for Testing: Gutenberg 5.0

This release includes two new blocks and a way to change the focal point in a cover image 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.. It also implements a performance improvement when adding/removing blocks, several enhancements, bug fixes, documentation improvements, tooling updates, and removed PHPPHP PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML. http://php.net/manual/en/intro-whatis.php. code now maintained in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

The goal of 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 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. The Gutenberg 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 is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress.
Download 5.0.0-rc.1
To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. You can also see other options for getting setup for testing in the handbook. When testing, use the latest stable release of WordPress (5.0.3) and the Gutenberg 5.0 plugin (download using the links above). All testing is welcome even if it’s just one or two items!
  1. Add an RSS feedRSS Feed RSS is an acronym for Real Simple Syndication which is a type of web feed which allows users to access updates to online content in a standardized, computer-readable format. This is the feed. using the new RSS block. (7966)
  2. Find the Amazon instant preview link for your favorite book and embed it into a post. (13510)
  3. Add a Cover block and change the focal point for the image. (10925)
  4. Add several blocks in quick succession (it should feel faster than in the previous release). (13067)
  5. Try to create a reusable block as a contributor (you should not be able to). (12378)
  6. Log in as an admin and create a reusable block. Log in as an author or contributor and try to delete it (you should not be able to). (12378)
  7. Log in as an author and try to edit the reusable block created in the previous step (you should not be able to). (12378)
  8. Add a SmugMug photo or slideshow embed. Check to make sure the embed works on the front-end but you do not see a preview in the editor (12961).
  9. Add a gallery block with 4 images and set the columns to 4 then click the pencil icon in the gallery block toolbar and remove an image. Check that the columns option changes to 3. (13423)
  10. Create a new categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. with no published posts in it. Start a new post and try to assign the new category to it (you should not be able to). (13549)
  11. Add a columns block with an odd number of columns and check that the margins on the right and left work as expected. Try from different themes. (12199)
  12. Add a list block and use the indent and outdent buttons on various list items in the list. (12667)
  13. 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): using a screen reader, go to the More menu and toggle between the views for Top Toolbar, Spotlight Mode, and Fullscreen Mode and check that the change is announced properly. (13385)
  14. Accessibility: using a screen reader, use the block inserter to search for any block and check that the label “Search for a block” is announced correctly followed by the number of results. (13388)
  15. For more, see pull requests merged in the 5.0 milestone.
If you find a new bug, please file it in gutenberg on GitHub. Thank you! Please join us in #core-test on WordPress Slack any time if you have questions about testing!

#5-0, #call-for-testing, #gutenberg

Riad Benguella 7:36 am on January 22, 2019
Tags: 4-9, , gutenberg   

Call for Testing: Gutenberg 4.9

This release includes a lot of tweaks, bug fixes and performance improvements. It includes a new Async Rendering Mode for blocks so it’s important to test it with custom blocks.

The goal of 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 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. The Gutenberg 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 is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress.
Download 4.9.0
To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. You can also see other options for getting setup for testing in the handbook. When testing, use the latest stable release of WordPress (5.0.3) and the Gutenberg 4.9 plugin (download using the links above). All testing is welcome even if it’s just one or two items!
  1. Open a large document and quickly type a short word. Typing should not feel slow, if it does please note the document size you tested. (13056)
  2. Check custom blocks from many available plugins. (13056)
  3. Mark a post as pending review and check that the publish date still says “immediately”. (13178)
  4. Upload an image with a title in its metadata and check that the title in the media library is the same. (13193)
  5. Try applying background colors for the table 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. stripes. (10611)
  6. Try using the fullscreen mode in different browsers including Edge and notice that you only have a single scrollbar on long posts. (13327)
  7. Try using the alignment toolbar in the Cover and Categories blocks .
  8. For more, see pull requests merged in the 4.8 milestone.
If you find a new bug, please file it in gutenberg on GitHub. Thank you! Please join us in #core-test on WordPress Slack any time if you have questions about testing! #4-9, #call-for-testing, #gutenberg
designsimply 12:32 am on January 4, 2019
Tags: 4.8, , gutenberg   

Call for Testing: Gutenberg 4.8

This release includes 5.0.3 fixes and other small improvements, including another round of performance improvements. It will line up with includes WordPress 5.0.3 fixes but it doesn’t align with it completely and can be first tested as 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 version 4.8.

The goal of 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 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. The Gutenberg plugin is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress.
Download 4.8.0
To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. You can also see other options for getting setup for testing in the handbook. When testing, use the latest stable release of WordPress (5.0.2) and the Gutenberg 4.8 plugin (download using the links above). All testing is welcome even if it’s just one or two items!
  1. Open a large document and quickly type a short word. Typing should not feel slow, if it does please note the document size you tested. (12312)
  2. Check that drag and drop works as expected when adding media before/after blocks and on the media placeholder. (12852)
  3. Open the editor and try to drag an image that is larger than the max file upload limit. You should see a relevant error message. (10224)
  4. Add a File 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., upload a large file, click the Copy URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org button. Make sure the URL copied does not start with “blob”. Throttle your connection speed if needed. (12499)
  5. Add a gallery of images, set an alignment, convert the gallery into images and verify the alignment is preserved. (12242)
  6. Create a post with multiple paragraphs, ensure you have a large number of plugins active that make the left hand menu long (e.g. 10 custom post types), publish or refresh, attempt to scroll to the end. (12644)
  7. Add a Latest Posts block, add an extra class in Additional CSS Class box, make sure the date position does not change. (12725)
  8. Add a Latest Posts block, click on Align Center, and check that the content centers as expected. (12306)
  9. Add a short sentence to a paragraph block, enable dropcaps from block options, hover over the block and note the hover area is shown around the dropcap and content. (12177)
  10. Create a classic post, insert an image with a caption AND link to the media file, publish the classic post, edit the post in the block editor, convert the classic block to blocks. There should not be a duplicate image. (12315)
  11. Open any post, run this command in the console dispatch action command 'wp.data.dispatch('core/editor').lockPostSaving('lockName');' then click on “Update”. Update button should not do any action if it is locked. (11809)
  12. If you use custom post types with taxonomies, ensure all taxonomies have show_in_rest, and check that you can see more than 10 taxonomies. (12971)
  13. If you use custom posts types with 'publicly_queryable' => false, check that you can save the post without any problems. (12800)
  14. For more, see issues in the 4.8 milestone.
If you find a new bug, please file it in gutenberg on GitHub. Thank you! Block developers: make sure to be aware of deprecations. Please join us in #core-test on WordPress Slack any time if you have questions about testing! #4-8, #call-for-testing, #gutenberg
designsimply 10:20 pm on December 19, 2018
Tags: gutenberg,   

Comparing the Classic Editor and Gutenberg

Some videos of people using the Classic Editor were shown in the State of the WordState of the Word This is the annual report given by Matt Mullenweg, founder of WordPress at WordCamp US. It looks at what we’ve done, what we’re doing, and the future of WordPress. https://wordpress.tv/tag/state-of-the-word/. 2018. These videos illustrate some of the pain points found in past usability testing, studies, surveys, and feedback. We added a few tests of 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/ with same tasks and are sharing them here.

Demographics

  • Classic Editor: 10 participants (6 female, 4 male), 3 countries, age range: 20-39, web expertise: average or advanced, WP experience: novice or average, NPS: 6.4.
  • Gutenberg: 3 participants (2 female, 1 male), 2 countries, age range: 19-36, web expertise: average or advanced, WP experience: novice or average, NPS: 8.3.

Tasks

  • You are on assignment to write an article for a new travel blog. Luckily, they are sending you to your favorite vacation spot! Your instructions are to choose a topic you think will get people as excited as you are about this place. It’s up to you to pick a focus (food, activities, lodging, etc.). Start at https://plastic-fox.jurassic.ninja/wp-admin/post-new.php
  1. Log in with username demo and password pass037538
  2. Give your post a title and add one sentence.
  3. Add two images side-by-side. 
  4. Add a YouTube video.
  5. Click “Preview” to check your work so far.
  6. Go back to editing and add a caption to the video you added before.
  7. Add an image on the left and some text on the right and a paragraph below it.
  8. Move the video or images from one part of the content to another (i.e. from the top to the bottom or vice versa).
  9. You love to close each article with the same snippet. Open the following link, copy the 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., and add it to the end of your post.
1<img draggable=”false” class=”emoji” alt=”<img draggable=”false” class=”emoji” alt=”” src=”https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f44b.svg”>” src=”https://s.w.org/images/core/emoji/2.3/svg/1f44b.svg”>
  1. Publish the post!

Classic Editor Highlight Reels

Gutenberg Highlight Reels

Although the questions were initially created for the Classic Editor, the same tasks in Gutenberg were compared.

Net Promoter Score (NPS)

We asked, “based on your experience today, how likely are you to recommend this editor to a friend or colleague? (0=Not at all likely, and 10=Very Likely)?” after each test. Users rated the Classic Editor experience at an average of 6.4 and the Gutenberg experience 8.3.

Links to Full Videos

  1. Session 1 — VideoPress
  2. Session 2 — VideoPress
  3. Session 3 — VideoPress
  4. Session 4 — VideoPress
  5. Session 5 — VideoPress
  6. Session 6 — VideoPress
  7. Session 7 — VideoPress
  8. Session 8 — VideoPress
  9. Session 9 — VideoPress
  10. Session 10 —VideoPress
  11. Session 1 — VideoPress
  12. Session 2 — VideoPress
  13. Session 3 — VideoPress
    (One task was modified here accidentally: “Add two images side-by-side in a gallery” and this little bit helped the user discover how to complete the task.)

There’s More!

A sitebuilding study is under way, and you can volunteer to get involved or follow along on the Make WordPress Design blog.

#gutenberg, #usability-testing

designsimply 6:08 pm on December 12, 2018
Tags: 4.7, , gutenberg   

Call for Testing: Gutenberg 4.7

This 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/ release includes several bug fixes and focuses on improving the performance of the 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. editor, particularly when editing large posts. It will line up with WordPress 5.0.1 and can be first tested as a 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 version 4.7.

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. The Gutenberg plugin is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress.
Download 4.7.0
To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. You can also see other options for getting setup for testing in the handbook. Currently, you should be testing with WordPress 5.0 stable alongside the Gutenberg 4.7 plugin. This is because 5.1-alpha trunk is currently undergoing some cleanup (normally, testing with trunk is fine). All testing is welcome even if it’s just one or two items!
  1. Create a very long post with thousands of words. (12480)
  2. Open a very long post and begin typing to add new content. (12386, 12460, 12521, 12547)
  3. Create a large post with many different types of blocks. (12384, 12510)
  4. Add an image to the Media & Text block and try to resize the image. (12619)
  5. Add an image by selecting one from the media library, click undo, and make sure the placeholder shows properly at that point. (12567)
  6. Copy and paste content from one block to another. Switch to Code Editor mode. (12543)
  7. Insert several images into a classic block and make sure they are inserted into the correct location where the cursor was positioned. (10509)
  8. Try tabbing through blocks and check to see if it works as expected even after pressing Ctrl + backtick twice to jump to the top toolbar and back to the content area. (12390)
  9. Create, delete, add, then trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. a reusable block. After it is trashed checked to see that a “Deleted or unavailable” message appears in its place in the editor. (12345)
  10. Copy content from a word processing app and confirm no spaces are collapsed unexpectedly. (12166)
  11. Edit a paragraph as HTML. Remove a space and insert a line break (use ENTER). Edit visually. You should see a space where you inserted the line break. Edit the content. Edit as HTML. The line break should be replaced by a space. (12166)
  12. Disable a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block, try pasting content that will trigger that block, expect it to. (11057)
  13. Install ACF and make sure hidden metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes stay hidden. (12628)
  14. Install a plugin which uses TinyMCE in a textarea in a meta box area, such as Memberlite Elements or Meta Box (and can you think of any others we can test?), then create a post using that content and make sure it saves. (12568)
  15. For more, see issues in the 4.7 milestone.
If you find a new bug, please file it in gutenberg on GitHub. Thank you! Block developers: make sure to be aware of deprecations. Please join us in #core-test on WordPress Slack any time if you have questions about testing!

#4-7, #call-for-testing, #gutenberg

designsimply 7:28 am on December 6, 2018
Tags: , gutenberg, , popular plugins   

Call for Testing: Gutenberg + Popular Plugins

Calls for testing WordPress 5.0 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. have been running since Oct 24, and the release is right around the corner. While we have highlighted a few plugins to test in past calls for testing here on make/test, it was pointed out that more 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 testing would be helpful to have and so let’s add it in!

Plugins that are most likely to have compatibility issues are those that modify the the interface of the post edit screen, perform actions on post update/save or add custom taxonomies. /hat tip @gschoppe via https://twitter.com/gschoppe/status/1070344946643816448
To help test, you can install and activate the WordPress Beta Tester plugin on a test site, select “Bleeding edge nightlies” from the Tools > Beta Testing page and then click “Update Now” on the Dashboard > Updates page in wp-admin. From there, pick any plugin from the list below and see what you can break. 🙂 If you find a plugin conflict between the plugin you are testing and 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/, the very best place to report it is to the plugin developer directly. Each plugin has a support forumSupport Forum WordPress Support Forums is a place to go for help and conversations around using WordPress. Also the place to go to report issues that are caused by errors with the WordPress code and implementations. available by using the Support tab at the top of the plugin directory page. You may also report plugin conflicts to the gutenberg repository on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ where you will likely get more help testing and advice on where and how to report back to the plugin author if needed. To start, I’ve picked a handful of plugins either because they seem like good candidates from the popular plugins list or have been mentioned in  gutenberg on GitHub or on this blog:
  1. Yoast SEO
  2. Advanced Custom Forms
  3. Wordfence
  4. Elementor
  5. Contact Form 7
  6. WPForms
  7. NextGEN Gallery
  8. Divi Theme
There are many more plugins to test, and suggestions are welcome if you think any should be added to this list. This list should be considered a starting point and anything from the first four pages of the popular plugins list would also be good to consider for testing. If you are able to help test, pick something you like, or that looks interesting to you, or (even better!) that you use on your own site. It is worth noting that several of these plugins have been tested already and many developers have been working hard on updates along the way—some even include custom Gutenberg blocks. This call for testing is an extra way to try to provide help for those developers. If you are a plugin developer and would like to add your plugin as a suggested addition for testing, it would be helpful to provide a link and a short list of testing ideas or steps to help testers get oriented with your work. Please leave a comment if you’re interested!

#call-for-testing, #gutenberg, #plugins, #popular-plugins

designsimply 12:43 am on November 10, 2018
Tags: , , , gutenberg   

Call for Testing: Gutenberg 4.3 Pre-release

This release will have a short turnaround time for testing in order to allow 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 coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. code to get better aligned for merging.

The goal of 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 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. The Gutenberg plugin is currently the main focus for the testing group and Gutenberg is the new editing experience in WordPress. 

Download Gutenberg v4.3.0-rc.1

To help test, please download gutenberg.zip from the releases page or use the button above, install/activate the plugin, and try testing any of the items listed below. If you don’t have time to test everything on the list, try just doing a few items. All testing is welcome!

  1. Add several blocks with various alignments (left, right, center) and check to make sure the toolbar appears properly for each one. (11357)
  2. Press meta+A to select a 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. and meta+A again to select all blocks. Test with Safari and Firefox. (8180)
  3. Test the sibling inserter with Firefox and Safari. (11684)
  4. Create a new post and start typing for at least 10 seconds. Verify that autosave does not occur while typing and that autosave does occur after 10 seconds of no action. (10103)
  5. Add a pullquote and change the colors in various ways. Make sure the text is readable. (10792)
  6. Add a Media & Text block, select the “Stack on mobile” option, publish and view on mobile and see that the blocks are responsive. (10969)
  7. Create a Google Docs document with text that is both bold and italics and that has text with strikethrough, subscript, and superscript. Copy and paste the content into the editor and check that the formatting is correct. (11207)
  8. Drag and drop multiple files into the editor and check that file blocks are created for each one. (11297)
  9. Insert a thumbnail-sized image and set the link settings to media file. Check that clicking on the image from the published post opens the full-sized image. (11254)
  10. Change the permalink for an existing post and save changes. Make sure the “View as” link in the black toolbar at the top works as expected. (11262)
  11. Try opening a draft or a previously published post, do not make changes, close the browser tab—make sure you are not prompted to save changes if you opened a post and did not make any changes. (4687)
  12. Activate a dropdown item, such as the inserter, and click outside of it to close the dropdown. (11253)
  13. Add a YouTube URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to a video block and make sure it gets added as a working YouTube embed. (6824)
  14. Schedule a post and make sure it works as expected. (11418)
  15. Transform a Media & Text block to a video or image block and vice versa. (11420)
  16. Convert a classic block to blocks with e.g. a span with attributes in a paragraph. (11539)
  17. Upload ~10 large (10 MB) images into a gallery and see that they upload without error. (11565)
  18. Use Alt+F10 to navigate to the block toolbar (not the editor toolbar). (11607)
  19. Add a columns block with various content. (11620, 11659)
  20. For more, see issues in the 4.3 milestone.

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) Related

These are accessibility-related testing steps, though anyone can help test these!

  1. Publish a post using the keyboard only (4187).
  2. Navigate through the images in a gallery using the keyboard. Try different browsers. (11205)
  3. Add a link to another existing post from your site using the keyboard only. (10838)
  4. Using a screen reader, add a link, search for a post, select a link, and check that the result is announced. (10838)
  5. Using a screen reader, select multiple blocks, and check that the number of blocks selected is read out. (11422)

Bonus Round

You should test these if you’re willing to dig in a little deeper, if you know of (or can find) custom plugins that use some of the updated capabilities, or if you would like to help test Gutenberg with popular plugins.

  1. Go to More > Options and check the option for Custom Fields. Check that custom fields work as expected. (11084)
  2. Add a left aligned and a right-aligned image to a post. Switch the site to use an RTL language and check that the alignments are the same. (11293)
  3. Add a bunch of metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes and check to make sure the editor still has ample room. (11482)
  4. Find a plugin that removes the “kitchen sinkKitchen Sink When using the WYSIWYG (What You See Is What You Get) editor in WordPress, you can expand the capabilities to allow more options. This expanded area is called the "Kitchen Sink."” button from the old editor and confirm it works as expected. (10964)
  5. Install a plugin that uses the SlotFill APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. (for example: DropIt or Yoast SEO) and make sure it works as expected. (11123)
  6. Test with Advanced Custom Forms (ACF).
  7. Test with Yoast SEO.

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

Block developers: make sure to be aware of deprecations.

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

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