Call for Feedback: Automated Theme Testing

Ensuring that a theme follows all WordPress Theme Directory requirements can be challenging. While theme requirements are important for maintaining a high standard for themes that are distributed through WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/, checking that themes meet these requirements can be time-consuming for reviewers. Additionally, sometimes theme authors aren’t sure whether their theme meets our requirements, before submitting a theme to the directory.

The Theme Review team maintains a number of different tools and datasets to help theme authors. The Theme Check 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 Theme Sniffer do a good job of informing theme authors of problems with their code but aren’t able to cover some of the tricker aspects of theme reviews, as both tools run static code analysisStatic code analysis "...the analysis of computer software that is performed without actually executing programs, in contrast with dynamic analysis, which is analysis performed on programs while they are executing." - Wikipedia. As a result, theme authors & Theme Review team members spend countless hours manually testing themes. 

If we could combine some of the existing code analysis tools, automate away some of the manual testing and open them up to more development workflows, could we improve theme quality, alleviate pressure on manual testing and speed up the theme review process?

The Theme Review Action project is looking to answer this question.

It’s also worth noting that this project was loosely informed by the Theme Review’s proposed updates to the overall process designed to improve communication during theme reviews. This proof of concept doesn’t intend to be a replacement for that work, but hopefully an extension.

Guiding Principles

The project should:

  • Go beyond simply identifying where themes don’t match our guidelines and help improve theme quality
  • Leverage existing tooling
  • Provide actionable feedback to theme authors
  • Be able to run in different contexts
    • Continuous development platforms
    • Local machines

Proof of Concept

In the last quarter of 2020, we worked on getting something in a state for developers to try, in the hopes of sparking discussion and educating a path forward. 

The project has been added to GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/: https://github.com/WordPress/theme-review-action.

How does it work?

As mentioned in the project’s Readme.md on GitHub, you can test a theme by doing any of the following:

  1. Navigate to your WordPress theme folder and run npx wordpress-theme-check-action
  2. Add the Action to your WordPress Theme Repository on GitHub
  3. Clone the project and run it locally.

Once triggered, the project roughly does the following: 

  1. Creates a development environment using wordpress/env (& docker)
    1. Installs the latest version of WordPress
    2. Installs parent theme if applicable
    3. Imports the test data
    4. Activates theme
  2. Tests to make sure theme has minimum required files
  3. Runs Theme Review Plugin
  4. Opens a Browser Session programmatically and runs User Interface tests.
  5. Outputs results of tests

The User Interface tests use the Browser (Puppeteer), mimicking a user, to answer the following questions :

  • Does your theme have appropriate: 
    • Skip links?
    • Element focus states?
    • Keyboard navigation?
  • Does your theme follow other WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 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) standards?
  • Are there any errors in your:
    • JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.?
    • 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.?
    • 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.?
    • 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/ 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. Templates?
  • Does your theme include prohibited content?

Of course, since this is only a proof of concept, the test coverage isn’t extensive and will require more refinement. 

Example 1: Here’s an example of it running locally using npx. 

Note, running using npx on windows isn’t working yet :).

Example 2: Here’s an example of its output GitHub:

Test results from project displayed in the GitHub actions interface.

What’s next?

Can you try it out on your a theme and answer any of the following questions:

  • Did you find it easy to use?
  • Does the information help you make changes that improve your theme? 
  • Did you find any bugs?
  • Is there anything missing that could be added?
  • Although it’s currently a little slow, can you see yourself using it during your development process (or theme review) if it were faster and more complete? 
  • Is there an alternative approach to consider?

Ready?

Check out https://github.com/WordPress/theme-review-action and read the Readme file for more detailed information on how to use the project. Any issues or feedback can also be logged as issues in the GitHub repository

Sincere thanks to @poena for the help!

New Slack channel for Learn development discussions

We now have a #meta-learn 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/. for discussions specifically around development topics for learn.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. Note that non-development discussions should still happen in other channels, such as #training.

+make.wordpress.org/training/

Protecting Children’s Privacy On WordPress (through the lens of COPPA)

Disclaimer:

Nothing in this proposal constitutes professional advice, legal or otherwise.

Although substantial care was taken when compiling this post, no guarantee is made with regards to its accuracy. Please exercise your own judgement.

Common beliefs about WordPress and COPPA:

To start off, let’s examine a couple of common beliefs about WordPress and COPPA:

This is a wider platform issue.”

Yes and no.

WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ has thus far appeared to be a general audience platform – and therefore did not appear to have specific obligations under COPPA.

WordPress.org can become subject to COPPA requirements by:
1. Publishing child-directed content; or
2. Obtaining specific knowledge that children under 13 are using the platform.

Publishing KidsCamp content on Learn WordPress appears to “trigger” COPPA obligations because the content is directed at children.
However, as Learn WordPress makes use of wider WordPress.org infrastructure (and default WordPress installations are not COPPA friendly), becoming COPPA-compliant would require some platform-wide changes.

We are not collecting any personal information.

WordPress offers users the ability to add personal information,
including bios and origin stories, to their profiles.

Personal information is collected when a user registers for a WordPress.org profile.

Here the username itself is personal information, as it functions in the same manner as online contact information (@-mentions).

Visitors to KidsCamp content on Learn WordPress can sign up for a WordPress.org account.

Users can sign up for a WordPress.org account from pages that contain child-directed content.

There is no neutral age verification mechanism when registering for a WordPress.org account, or when accessing other parts of the website.

Learn WordPress offers users the ability to register for discussion groups.

Feedback forms, registration for and participation in discussion groups, notifications and comments all include personal information.

Furthermore, the FTC has specifically indicated that personal information includes information that is associated with any persistent identifier – so that would include usernames, user ids, identifiers in cookies, IP addresses and more.

It also includes any such information that is collected by plugins, or third party services on behalf of WordPress.org, including, but not limited to Jetpack, GravatarGravatar Is an acronym for Globally Recognized Avatar. It is the avatar system managed by WordPress.com, and used within the WordPress software. https://gravatar.com/. and Meetup.com.

So… How can WordPress.org become COPPA-compliant?

A Prominent Privacy Policy

COPPA-compliant privacy policies need to be prominent. As such, the usual privacy link in the footer does not qualify.

Audit Data Practices on WordPress.org

In order to compile a COPPA-compliant privacy policy, it would be highly advisable to do a full code and data audit to create a data flowchart for CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and any plugins that are running on WordPress.org

This includes determining and documenting exactly what information is being collected, where it is stored and any parties with whom the information is shared and for what purpose.

#51092 could provide a solid approach.

Verifiable Parental Consent

Obtaining parental consent that is verifiable can be a significant administrative burden (outside of physical KidsCamps, where volumes are more manageable), as a simple checkbox will not do the trick.

Do Not Collect Data From Child-Directed Content

A Consent 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. (incorporating #51188) can provide a basis to ensure that information is not collected on child-directed content.

Where information is needed to support internal operations, data should be compartmentalized so that it cannot be accessed for other uses.

List of abbreviations:

COPPA: Children’s Online Privacy Protection Act (United States)

FTC: Federal Trade Commission (United States)

Licensing:

This content is made available under Creative Commons 4.0. BY SA.

Please add your thoughts below:

Please add any concerns, questions and suggestions below.

Your input is greatly appreciated.

Block Pattern Directory ideas and discussion

Block Patterns were introduced in WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. in version 5.5 (May 2020) as a way to register predefined blocks in themes and plugins. Once registered on a site, these 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. patterns can easily be inserted into the block editor and then configured by the content creator. Block Patterns help people to add complex block-based layouts to a site in a consistent way.

Question:

Could this feature, the ability to insert community-sourced block patterns into posts from inside the edit screen, help end users unlock the power of the block editor?

A Few Ideas:

  • The Block Pattern Directory could be similar to the Block Directory feature introduced in WordPress 5.5, except that no plugins would need to be installed.
  • Block Patterns could be submitted on WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/.
  • Users could search the Block Patterns directory from the Block Inserter.
  • Block Patterns from the directory could be displayed in a visual way.
  • A one-click installation of Block Patterns could be accessed from the block inserter.

Additional Questions:

  • How could the block patterns be represented in the search results?
  • What should the process and 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. for submitting patterns to a directory look like?
  • How could previews of Block Patterns account for the visual effect of themes?
  • How might a Block Pattern Directory accommodate localization?
  • Should the Block Pattern Directory be limited to patterns using only core blocks?

Call for Feedback:

Some contributors have started exploring some early technical ideas in this GitHub repo. Check it out to see what technical considerations have been identified so far.

Feedback will help this idea to be more successful. Would this idea be helpful for end users? Are there any other things that should be considered? How could this feature be implemented in an easy to use but helpful way? Please share your thoughts and suggestions in the comments below.

#pattern-directory #blocks

X-post: Learn WordPress is Live

X-comment from +make.wordpress.org/community: Comment on Learn WordPress is Live

X-post: Learn WordPress: Project Details and Roadmap

X-comment from +make.wordpress.org/community: Comment on Learn WordPress: Project Details and Roadmap

Next WordCamp.org ticket scrub on August 6th, 2020

This ticket scrub will happen on 2020-08-06 17:00 UTC in the #meta-wordcamp channel.

The focus is on 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. tickets with the WordCamp Site & Plugins component.

Comment below if there’s a specific ticket or topic you’d like to discuss.

#wordcamp #ticket-scrub

+make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//community

Dev requirements for learn.wordpress.org

As per this post on the Community P2, we are going to be using learn.wordpress.org to host the workshops that will be made available to the community.

The Training team has been working on a new site design, which is on a demo server here: https://learnwp.jco.dev/ with the code available on GitHub. We have tacit confirmation from @chetan200891 to collaborate with the Training team on making this site a hub for WordPress learning – including the excellent lesson plans that they have been working on, and these new workshops along with planning for synchronous discussion groups around the content.

The next step here is to finish the work on the learn site (which already looks fantastic) so that it meets the requirements that we need. This includes:

  • A new CPT and 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. for workshops (I don’t think a full-featured LMS is necessary at this stage, but we may want to consider thsat for the future)
  • Frontend layouts for the new and existing CPTs
  • An additional call to action on the home page that directs people to the workshop content
  • A link to an external scheduling platform for discussion groups

Please discuss any further dev requirements in comments on this post.

I’m very excited about this platform and the collaboration between Community and Training on the work here!

/cc +make.wordpress.org/training/ +make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//community/ +make.wordpress.org/design/ (since we’ll need design work done on this too)

Next WordCamp.org ticket scrub on July 23rd, 2020

This ticket scrub will happen on 2020-7-23 17:00 UTC in the #meta-wordcamp channel.

The focus is on 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. tickets with the WordCamp Site & Plugins component.

Comment below if there’s a specific ticket or topic you’d like to discuss.

+make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org//community

#ticket-scrub, #wordcamp-org

X-post: External Linking Policy – “Commercial blogs”

X-post from +make.wordpress.org/docs: External Linking Policy – "Commercial blogs"