If you have directly landed here, and have questions about this whole “assignment” thing, you may read this first!

Now you are settled, the purpose of this assignment is to check if you can write the quality Front End code and have a little understanding of WordPress.

Assignment Alternatives

If you have existing work samples to show and you missed them to submit during the application process, you can still submit them by replying to the email you receive upon your application.

Acceptable

You can send us Github/Gitlab or other links to a public source that contains:

  1. WordPress theme ➞ If you have already worked on a WordPress theme project, even when the PHP portion of the theme is not developed by you.
  2. Front-end source ➞ If you have already worked on some project which uses CSS & JS. The JS portion can use WordPress using REST/GraphQL or even XML-RPC API.
  3. Gutenberg blocks ➞ If you have already created a custom Gutenberg block that also works.

Not Acceptable

  1. Any work sample which does not make use of WordPress in any way.
  2. Sending links to public sites! It doesn’t tell us anything about your code quality or if you have followed the coding standard or written test cases.
  3. Sending zip files either as an attachment or via dropbox or some public link. Zip files do not give us visibility into your commit history over time which tells a lot about your thought process when building stuff.

Sample Challenge for Assignment

Since you are reading this, we are assuming that you would like to proceed with building something for fun and for the application purpose. Please complete the following slideshow block assignment.

Gutenberg Slideshow Block for WordPress Posts

Problem Statement

You must complete this assignment using core JS & CSS. No frameworks. Not even jQuery. Not even for AJAX. You are free to Google as much as you want!

Now, please accomplish the following:

  1. Create a plugin that provides the users with a custom Gutenberg block that fetches the latest data using WP REST API from a WordPress site. You can use WPTavern (REST API endpoint). Decide for yourself if you will need a dynamic block or a static one.
  2. Once you fetch the data, display data as a slideshow. Make sure your slideshow covers post title, post featured image, post date, and any other meta-data you can find. Clicking on the title/image should open the original post link.
  3. Decide the block’s editorial experience and make it as user-friendly as possible.
  4. Think of possible block settings for the block. Toggling various visual elements or metadata of the posts, controlling the behavior of the slider, auto-scroll, rendering manual controls, etc.
  5. The slideshow must support keyboard navigation. The right arrow key to move to the next slide and the left arrow key to move to the previous slide.
  6. The slideshow must be responsive.
  7. Further, on mobile devices, a viewer should be able to swipe with a thumb to move between the next and previous slides.
  8. When your page loads, it will display a slideshow for the latest WPTavern’s post, but it must be possible to change it to any website URL and with a click of a button change slideshow content from this website. As an example, we will input rtcamp.com and click a button that should change the slideshow to display rtCamp’s latest blog post.
  9. Implement caching for better performance.

Submission Guidelines

  1. Source Code Hosting ➞ You must use Github (recommended) or Gitlab for source code hosting.
  2. Web Hosting for demo ➞ As your app work doesn’t have any server-side component development — besides using data from WordPress sites which are already publicly hosted — you should be able to use Github pages for hosting. You can even try Vercel or any other hosting of your choice.

Have Questions?

We request you to read FAQ here.