WP Challenge #1: Block Development

Welcome to the WordPress Challenge #1.

In this challenge, we will focus on WordPress Block Development.

As with any challenge, you’ll be expected to try and do it all on yourself, but don’t worry.

Somewhere between 2nd or 3rd week of this month, I’ll send more tips & tricks for every challenge to get you closer.

See these challenges as exercises.

Hopefully, we’ll get subscribers who’ll send back their solutions and thus, if anyone is stuck, they’ll be able to learn from the provided solutions.

If none are sent, I’ll provide my own solutions to such in the upcoming month.

Junior Challenge: Create a Custom Gutenberg Block

Points: 1

Task:

Develop a custom Gutenberg block that displays a testimonial card with fields for a testimonial quote, author name, and author's job title.

Requirements:

1. Create a custom block using @wordpress/create-block,

2. Implement a block that includes fields for testimonial quotes, author name, and job title,

3. Fields can be displayed either inside the block in the editor or on the side panel

4. Use Editor and Block Styles (editor if fields are displayed inside the block in the editor). Block Styles for the front.

Starting Tips:

1. Complete Block Tutorial (with a custom field): https://developer.wordpress.org/block-editor/getting-started/tutorial/ 

2. Block Handbook: https://developer.wordpress.org/block-editor/

Medior Challenge: Fetch & Display Dynamic Content

Points: 2

Task:

Create a block that fetches and displays posts from a specific category dynamically.

Requirements:

1. Have a dropdown that shows categories on the side panel,

2. Display fetched posts within the block (It can be only a linked title or more info if you want).

Starting Tips:

1. Use ServerSideRender to render the posts,

2. Use apiFetch to get categories for displaying in the side panel,

3. Use the default REST API endpoints to fetch categories or create your own.

Senior Challenge: Accordion

Points: 3

Task:

Create an accordion block where you can add multiple items that can be toggled.

Requirements:

1. Items need to be added through an “Add” button inside of the editor (not the panel)

2. Each item will have an accordion Title and accordion body

3. To keep it simple, each accordion body can be a simple text control

4. Accordions items should be collapsable on the front (optional on the editor)

For an additional 2 points, you can allow entering more content types for each item using InnerBlocks (for inspiration & example, check Block “Columns” & “Column” as those use the same InnerBlocks).

Starting Tips:

1. Check Gutenberg Accordion discussion in the repository

2. Check code from https://wordpress.org/plugins/lightweight-accordion/ for inspiration

Happy Coding!