1. Challenge Overview

Scenario

Usercentrics requires two custom Gutenberg blocks for their WordPress site:

FAQ Component:

A dynamic, reusable FAQ section featuring question-and-answer pairs. The layout should be similar to the FAQ section on the Pricing page.

Product Feature Carousel:

A scrollable carousel showcasing items with a header, copy, image, and a call-to-action (CTA), resembling the one in the Upcoming Events section.

Task

Candidates must:

• Choose one of the blocks to develop.
• Provide a live demo link and a GitHub repository URL for code review.
• Ensure the block is optimized for accessibility (WCAG 2.1), SEO (with schema.org markup), and mobile responsiveness.

The deliverable should include:

• The complete HTML/CSS/JS/PHP code for the chosen custom Gutenberg block.
• A discussion on how accessibility standards and schema.org markup (either for FAQ or Event) were implemented.
• An explanation of how iterative improvements would be managed based on user feedback.

2. The Proposed Solution

Custom plugin development

To register the custom blocks, I created a custom plugin that handles the registration of blocks built with wp-scripts. The generated blocks include configuration files compiled into a dedicated build folder. These assets are then loaded by the plugin using the register_block_type function, ensuring a streamlined integration with WordPress.

The plugin code can be checked here on Github.

Personal Experience & Rationale

Experience:

I have previously developed the FAQ block, which is a common component on service-based websites. This block has been reused and refined across several projects.

Rationale for Selection:

Although I also developed a branch for the carousel block, the FAQ block has historically generated more discussions and requests for enhancements. This real-world feedback validates its importance and potential for further improvement.

3. Technical Implementation

Environment & Tools

Local Development:

The project uses wp-env to initialize the local environment, aligning with modern WordPress development practices.

Build Process:

The project relies on @wp-scripts to manage the build and watch processes. Using this package as a development dependency ensures a completely isolated development environment, while the generated build contains only the dependencies managed by WordPress.

Testing:

Although the plugin currently only includes a bootstrap class, a simple test suite is in place. The structure is designed to be scalable and adaptable to future changes.

Possible improvements

Asset Optimization:

One key improvement is the combination of assets from all blocks into a single bundle, which can be served via a CDN to boost performance.

Deployment

Production deployments can be managed via CI/CD pipelines. While I currently use GitLab CI/CD, GitHub Actions or Bitbucket Pipelines could also be implemented.

4. Accessibility Proposal

HTML Structure & Native Tags

HTML Semantics:

A proper HTML structure combined with native tags (such as <details> and <summary>) lays the foundation for an accessible FAQ component.

• The <summary> tag has an inferred role of “button”.
• The <details> tag has an inferred role of “group”.

Interaction Considerations

The accordion component must be operable by all users:

• Mouse: Operable via click.
• Touch: Supports operation on smartphones, tablets, and touch-enabled desktops/laptops.
• Keyboard: Fully navigable for keyboard-only users and those using screen readers.
• Speech Recognition: Compatible with tools like Dragon NaturallySpeaking.
• Screen Magnification: Easily operable for users with magnification tools.
• Screen Readers: Clearly indicates interactive states (content hidden or visible).

Usability:

• All panels can be closed if required.
• Does not rely solely on JavaScript to reveal content.
• Provides clear visual cues to indicate interactivity.

5. SEO Integration

Implementation

Schema Markup:

Microdata has been applied to the HTML using the FAQPage schema to enhance SEO.

Validation:

The implemented structure has been validated successfully using tools such as Schema Validator and Google’s Rich Results Test.

6. Client Feedback and Future Enhancements

Opportunities for Iterative Improvement

Based on previous implementations, clients have provided varied and innovative feedback. Two notable suggestions include:

FAQ Content Management:

Allowing FAQ items to be saved as a separate “FAQ” post type via the editor.

Content Source Flexibility:

Providing the option to choose between FAQs created directly on the page and those dynamically pulled from the database listing FAQ post types.