Tag Archives: call for testing

JuanMa Garrido 5:38 pm on April 8, 2022
Tags: call for testing,   

Help Test the Comments Blocks for WordPress 6.0

The previously monolithic “Post Comments” 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. has been updated to work in a more flexible and modular way by using child blocks. The new version is now called the “Comments Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.” block, and it comes with new blocks that can be used as child blocks within it. These new Comments blocks allow users to define and change the layout of the post comments directly from the 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/ editor.

Table of Contents

Help test this feature

This post is a call for users to test the new blocks that can be used to build a  comments section in a page or post (following the block paradigm). The results of this  testing will allow the contributors behind the development of these blocks to decide whether or not they are ready to be included in the next release of WordPress (v6.0) 

Please report your findings either as issues 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/ in the Gutenberg repository ,or in the comments below. If you have triage access, labelling any issue with “[Block] Comments Query Loop” would be very helpful. Alternatively, you can start the title of your issue with “Comments Blocks: ” to help those triaging the issues to label them appropriately. 

How comments currently work in Full Site Editing

The “Post Comments” block is the block that currently manages a comments section on a post or page, 

For example, the Twenty-Twenty-Two  theme uses this block in its “Single Post” template

But with this “Post Comments” block no option exists to change the styles and the layout of the comments from within the Editor. This block uses the comments_template() function internally to generate 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. for that section and the styles are defined via CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. files.

So, in summary, if you want to customize your comments section (change styles and layout) when using this “Post Comments” block you have to do a bit of coding

What’s new?

With the new Comments Query Loop block, you now have available a set of child blocks that enable you to customize the layout and styles of this section directly from within the Editor.

The new Comments Blocks that are available from Gutenberg v13.0 are:

  • Comments Query Loop: An advanced block that  displays  post comments and allows for various layouts and  configurations.
    • Comment Template: Contains the block elements used to display a comment, such as  the title, date, author, avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. and more.
    • Comments Pagination: Displays next/previous links to paginated comments where this has been enabled in the comment settings in the WordPress admin
      • Previous Page: Displays the link to the previous page of comments.
      • Page Numbers: Displays a list of page numbers for comments pagination.
      • Next Page: Displays the link to the next page of comments.

The addition of these blocks to Gutenberg is just the beginning. With these blocks, in the future you will be able to create and share your own patterns for a comments section.

Testing Environment 

While there’s more information below to ensure you get everything set up properly, here are the key things to consider with regard to your testing environment: 

Testing Instructions

Set proper 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 themes

  1. Have a test site using the latest version of WordPress (5.9.3 at time of writing). It’s important that this is not a production/live site. 
  2. Install and activate the Twenty Twenty-Two theme by going to Appearances > Themes. If you choose to use a different block theme, install and activate by going to Appearances > Themes > Add New and searching for the one that has the `Full Site Editing`  listed as a feature. 
  3. Install and activate Gutenberg 13.0 RC

Customize the “Single Post” template to use the new “Comments Query Loop” block

  1. Go to the “Single Post” template by:
    1. Going to Appearance > Editor
    2. From the Template Editor click on the drop down menu in top centre  to choose the template to Edit (“Home” template selected by default)
    3. From that menú: “Browse all templates” & select “Single Post”
  2. Remove the “Post Comments” block that you’ll find at the bottom with the text “Post comments block: no post found” 
  3. Insert in that same place the “Comments Query Loop” block
  4. Save the “Single Post” template with this new “Comments Query Loop” block inserted

Customize the Comments blocks styles and layouts and check the result of your changes in the frontend

In order to ensure you have comments to play with you can add demo content to your WordPress

  1. Go to the homepage of your testing site and go to the default “Hello world!” post to check how the Comments section looks by default with these new Comments blocks. You can also create a new post by going to Posts > Add 
  2. Go to the “Single Post” template and configure each comments block to set the styles and layout you want
  3. Save the template and go to the post page to see your changes in the frontend (you’ll probably need to refresh the post’s page)
  4. Repeat this process as many times as you want and take note of any bug or User Experience inconsistency you encounter during the process

Insert the “Post Comments Form” block to check the behavior of the Comment Reply Link and the ability to insert new comments

The “Post Comments Form” cannot itself be customised via the Block Editor as yet. There’s an issue open to work on this but for the purpose of this testing we can just use it as it is and focus the testing on the display of the comments

  1. Go to the “Single Post” template and insert a “Post Comments Form” just after  the “Comments Pagination” block
  2. Save the template and go to the post page to see if the form is available from that page (you’ll probably need to refresh the post’s page)
  3. Submit a new comment and check whether the new comment appears and whether the styles you defined for the Comments blocks are also applied to this new comment
  4. Check that the ”Comment Reply Link” and “Comment Edit Link” work properly 
  5. Take note of any bug or User Experience inconsistency you detect in the process

What to test

So, what type of things can you test with these blocks?

This Call for Testing is mainly to check that these blocks work as expected, that is, the changes in the styles and layout work as expected without bugs.

But just to provide some guidance, here are some aspects we specifically would like to have some feedback about:

Styles and Layout

Try to replicate a specific design on your comments section and check that you’re able to implement that design using just  the Block Editor. For example you could try to apply a Duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to the Avatar, or perhaps a two column layout with the avatar on the left and rest of the content on the right – let your imagination run wild!

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)

Check that the comments section is fully accessible in both the Editor and the Frontend and report any issues you find in this regard.

Discussion Settings

Go to Settings > Discussion and check that the different options are fully compatible with the new Comments blocks (i.e. that they work as expected according to the options that have been enabled/disabled).

Pagination Links

Test that the pagination links work as expected. To test this you’ll need enough comments for the comments to actually paginate. Comment pagination also needs to be enabled in the WordPress admin under Settings -> Discussion -> Break comments into pages

Thank you!

Thank you for helping to test these new Comments Blocks! With the adoption of Full Site Editing, bringing the power and flexibility of blocks to more parts of the page  is really helpful in enabling  users to customise their layouts and take full control of their sites.

Thanks to @mburridge @cbravobernal @santosguillamot for reviewing and helping shape this post

#call-for-testing, #gutenberg

designsimply 5:20 am on February 5, 2019
Tags: 5.0, call for testing,   

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, call for testing,   

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, call for testing,   

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 6:08 pm on December 12, 2018
Tags: 4.7, call for testing,   

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: call for testing, , , 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: , call for testing, ,   

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

designsimply 6:44 pm on October 31, 2018
Tags: , call for testing, , ,   

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.

Download Gutenberg v4.2.0-rc.1

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

designsimply 11:50 pm on October 19, 2018
Tags: 4.1, call for testing, ,   

Call for Testing: Gutenberg 4.1 Pre-release

The feature-complete version 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/ (4.1) is now ready for pre-release testing! 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.

UPDATE: Links have been updated to 4.1 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. 2 as of Oct 22, 2018, 12:11 PM UTC.

Download Gutenberg v4.1-rc.2

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.1 release notes). Testing even just a few items is helpful. All testing is welcome!

  1. Move around in a long post or page using 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. navigation. (10545)
  2. Add a video background using the Cover block. Try different browsers. (10659)
  3. Add a table block and change the style variation to striped using the Settings > Block 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.. (10428, 10543)
  4. Use the Media & Text block to add side-by-side media and text. (9416)
  5. Resize things in the Media & Text block in various ways.  (9416)
  6. 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): test the date picker. (7621)
  7. Accessibility: test the color picker using keyboard navigation. (10564)
  8. Check that each setting in More > Options works and persists when the page reloads. (10215)
  9. Add a list block and try pasting both single lines and multiple lines into it. (10614)
  10. Insert an image using a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (9264)
  11. Switch to an RTL language and try the LTR toggle button in the paragraph block. (10663)
  12. Add a quote block, convert it to a pullquote, convert it back to a quote. (10683)
  13. Add a quote block with a citation, convert it to a paragraph block, make sure the citation is still there. (10685)
  14. Embed some YouTube videos and make sure they look as expected in the editor and after publishing. (10411)
  15. Test the custom color picker for the button block on mobile. (10481)
  16. Test the responsiveness of the Columns block—still designated 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. but improvements have been made, try just a few columns for now. (10541)
  17. Enable or disable Advanced Panels (AKA 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) using More > Options. (10215)
  18. Bonus: test with Advanced Custom Forms (ACF) and check that you can toggle the Custom Fields meta box on/off using the More > Options panel. (10676)
  19. Bonus: test with Yoast SEO.
  20. There is more to test! See What’s new in Gutenberg? (19th Oct) and general needs-testing.

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

Block developers: note the deprecation in 4.1: wp.data.dispatch( 'core/editor' ).checkTemplateValidity has been removed. Please look ahead and keep an eye on deprecations in 4.2 as well! There are several coming up as prep for merging with WordPress 5.0 is now underway.

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

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

designsimply 12:39 am on October 19, 2018
Tags: call for testing,   

Gutenberg Needs Testing Areas

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. 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/ development is moving fast right now and there are a few general areas which could use extra help with testing.

If you are here to help, thank you so much! To triage issues that have been reported by others, use the steps for testing bugs in the make/test handbook as a good starting place and guideline. To test in general, see the lists below for ideas about what to test and then either file an issue, post a comment here, or mention your findings in #core-test on WordPress Slack. All testing is welcome!

Some general areas that need testing are:

  1. Everything in the Needs Testing label. Use the steps for testing bugs. 😊
  2. RTL languages.
  3. Roles/Capabilities.
  4. Undo/Redo.

Areas that need testing from a developer perspective:

  1. Everything in the Needs Technical Feedback label. 😊
  2. Backwards Compatibility label.

Testing ideas to help you get started:

  1. Switch to an RTL language and try adding as many different types of blocks as possible.
  2. Switch to an RTL language and test all 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. settings such as categories, tags, changing the publish date, etc.
  3. Create and schedule a new post. Try from a different role.
  4. Create and publish a post with several different blocks using the Editor role.
  5. Create and publish a post with several different blocks using the Author role.
  6. Create and submit a post with several different blocks using the Contributor role.
  7. Add a pending post as one user and try to approve it as another user.
  8. Edit the demo post, make changes, undo and redo the changes as you go.
  9. Edit a page and try making changes and then undoing the changes.
  10. Publish a post with 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. type you haven’t used before yet.
  11. Developers: reach out to those with questions at Needs Technical Feedback and chime in if you can confirm a bug or give an alternate code-related solution to a help request. ❤️
  12. If you have an idea about something else to test, add it in the comments!

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

If you are new to testing Gutenberg, the first thing you’ll want to do is get setup for testing with one of the following options:

The stable release is the easiest to test and the local dev env is a bit more technical. Testing any of these will be a great option at this stage. Choose whichever works well for you! If you’re not sure which one to pick, ask and someone will help. 🤓

Any questions? Please ask here or in #core-test on WordPress Slack any time! We would love to see you there.

#call-for-testing, #gutenberg