A WordPress plugin that provides custom Gutenberg blocks for the Usercentrics website. This plugin was created as part of a job offer challenge for the Senior WordPress Developer role.

• FAQ Component: A dynamic, reusable FAQ block with question and answer pairs, similar to the layout on the Pricing page.
  • Includes schema.org markup for SEO optimization
  • Fully accessible according to WCAG 2.1 standards
  • Mobile responsive design

Before setting up this project, ensure you have the following installed:

• Docker
• Node.js (v16 or higher)
• PNPM (v9.15.2 or higher)
• Composer
• @wordpress/env (npm install -g @wordpress/env)

git clone https://github.com/italloleon/usercentrics-custom-blocks.git
cd usercentrics-custom-blocks

# Install PHP dependencies
composer install

# Install JavaScript dependencies
pnpm install

wp-env start

This will set up a local WordPress environment with the plugin activated. You can access it at:

• WordPress site: http://localhost:8888
• WordPress admin: http://localhost:8888/wp-admin/ (Username: admin, Password: password)

# Development mode (with watch)
pnpm run start:blocks

# Production build
pnpm run build:blocks

# Lint JavaScript files
pnpm run lint:js

# Lint CSS/SCSS files
pnpm run lint:css

# Check PHP code style
composer phpcs

# Fix PHP code style automatically
composer phpcbf

pnpm run create-block your-block-name

composer test

pnpm run zip

The WordPress environment is configured in the .wp-env.json file:

• PHP Version: 8.1
• WordPress Debug Mode: Enabled
• Debug Log: Enabled
• Debug Display: Disabled

This project uses PHP_CodeSniffer for code quality checks and automatic code formatting.

The following Git hooks are configured:

• pre-commit: Automatically runs PHP Code Beautifier and Fixer (PHPCBF), PHP Code Sniffer (PHPCS), JavaScript linter, and CSS linter before allowing a commit.

The coding standards are defined in phpcs.xml in the project root. This project follows PSR-12 coding standards.

The blocks in this plugin are built with accessibility in mind:

• Semantic HTML structure
• Proper ARIA attributes

The FAQ block includes schema.org markup for better search engine visibility:

• Uses FAQPage schema for FAQ content
• Structured data is automatically generated based on the content

This project is licensed under the GPL-2.0+ License - see the LICENSE file for details.

Itallo Leonardo - GitHub