WP Manifestindependent plugin directory
manifest / editor / gutenberg-block-collection

Gutenberg Block Collection

A collection of accessible and responsive WordPress Gutenberg blocks built with JavaScript, React and automated testing.

by Aderonmu Akintunde Emmanuel · github.com/emmanuel0635/gutenberg-block-collection · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/emmanuel0635/gutenberg-block-collection/archive/refs/heads/main.zip

Readme

Gutenberg Block Collection

A production-style WordPress plugin containing seven reusable Gutenberg blocks. The project demonstrates modern block metadata, React/JSX editor interfaces, immutable state updates, responsive CSS, semantic HTML, accessibility, automated testing, and continuous integration.

Blocks

Block Main capabilities
Testimonial Quote, author image, role, rating, accessible figure markup
Pricing Table Multiple plans, highlighted plan, feature lists, responsive grid
Frequently Asked Questions Multiple items, native keyboard-accessible disclosure controls
Call to Action Heading, body, primary and secondary actions, alignment controls
Author Profile Portrait, biography, role, and labelled profile links
Product Comparison Accessible table, feature matrix, horizontal keyboard-scroll region
Responsive Image and Text Media selection, layout direction, vertical alignment, mobile stacking

Engineering decisions

Metadata-first block registration

Each block has its own block.json. PHP reads those metadata files with register_block_type(), while JavaScript imports the same files for editor registration. This keeps names, attributes, supports, titles, and assets in one canonical place.

Shared assets

All blocks use one generated editor bundle, one front-end stylesheet, and one editor stylesheet. WordPress enqueues the registered handles only when a matching block is rendered or edited.

Accessibility

  • Native anchors, buttons, headings, lists, tables, <details>, and <summary> elements are preferred over custom interactive widgets.
  • Every focusable control receives a visible focus indicator.
  • Images expose editable alternative text.
  • Product comparisons use captions and scoped table headers.
  • Horizontal overflow regions are keyboard focusable and labelled.
  • Link text is descriptive and external-link behavior is explicit.
  • Layouts remain usable at narrow viewport widths and with text zoom.

State management

Complex blocks store serializable content in WordPress block attributes. Local React state tracks the currently selected pricing plan, FAQ item, product, or comparison feature without duplicating persisted content.

Security

The editor normalizes URLs before saving them. The plugin does not accept unauthenticated requests, store secrets, create database tables, or execute user-provided JavaScript. WordPress capabilities and content sanitization remain the final server-side boundary.

Requirements

  • WordPress 6.6 or later
  • PHP 7.4 or later
  • Node.js 20 or later for development
  • Docker for the included wp-env test environment

Development

npm install
npm run env:start
npm start

WordPress is available at http://localhost:8888. The default local credentials are admin / password.

Commands

npm run build          # production bundle
npm run lint:js        # JavaScript linting
npm run lint:css       # stylesheet linting
npm run test:unit      # Jest and React Testing Library
npm run test:e2e       # Playwright against wp-env tests site
npm test               # lint, unit tests, and build
npm run plugin-zip     # distributable plugin archive

Testing strategy

Unit tests cover immutable collection helpers, safe URL handling, FAQ semantic markup, testimonial accessible rating output, and comparison-table headers. Playwright tests cover inserter registration, publishing, keyboard interaction with FAQ disclosures, and a mobile overflow check for the comparison block.

Roadmap

  • Add block variations and reusable patterns.
  • Add automated accessibility checks with Axe in the Playwright suite.
  • Add translation files and internationalisation coverage.
  • Publish a tagged release containing the generated plugin ZIP.
  • Add editor, front-end, and mobile screenshots under docs/screenshots/.

License

GPL-2.0-or-later.

Read the full README on GitHub →