Home » Blog » News » Excited by WordPress block development and modern workflows? We’d love to meet you

Excited by WordPress block development and modern workflows? We’d love to meet you

—

by

Ash Shaw
in

Learn what it means to be a WordPress Block Developer at LightSpeed & how it transforms the way we create websites.

We’ve all seen it: a CV-free email from a self-proclaimed “full stack developer.” No references. Maybe a couple of links to generic sites. A cover letter that’s fine, but forgettable. And more often than not, there’s no mention of WordPress anywhere.

If that’s you, hit pause. Because at LightSpeed, full stack means something very specific.

We’re talking modern WordPress block development — not just wrangling HTML/CSS and sprinkling some jQuery. This is about knowing how WordPress Core is evolving, working with modern JavaScript APIs, theme.json, custom blocks with block.json, and block plugins. It’s about following the Make WordPress blog, tracking key community members, and building in a way that adds to the platform instead of hacking around it.

Job Specification – WordPress Block Developer (Intermediate to Advanced)

Role Purpose: 

Design, develop, and maintain advanced block-based WordPress themes and plugins, integrating tightly with LightSpeed’s design systems and modern development workflows.

Key Responsibilities:

  • Build and maintain block themes and block plugins from scratch.
  • Integrate Figma Dev Mode designs into code with pixel accuracy.
  • Implement and extend theme.json configurations.
  • Write custom blocks using React/JSX and modern WordPress APIs.
  • Work with GitHub (issues, branching, PRs, code reviews) as a power user.
  • Use WP-CLI for automation and admin tasks.
  • Maintain code quality, accessibility, and performance at scale.
  • Contribute to and document our internal workflows and open-source projects.

Core Skills:

  • Advanced PHP and JavaScript (ESNext) for WordPress.
  • Strong understanding of the block editor, patterns, templates, and block variations.
  • Build tools: WP-Scripts, Webpack.
  • Git power user: rebasing, resolving merge conflicts, stashing, cherry-picking.
  • Command line proficiency (Git CLI, WP-CLI).
  • Familiarity with accessibility standards and best practices.
  • Understanding of WordPress database architecture.
  • Comfort with local development tools (Dev Containers, Docker, LocalWP or Studio).

Nice to Have:

  • WooCommerce block customisation.
  • REST API and GraphQL integrations.
  • Experience with automated testing frameworks (Playwright, PHPUnit).
  • Deployment automation experience.

Required Profiles:

  • GitHub with public repos demonstrating relevant work.
  • LinkedIn with complete work history and endorsements.
  • (Optional but valuable) Figma profile with design handoff examples.

Minimum Curriculum

We expect you to have completed — or commit to completing before interview — the following:

What This Role Is (and Isn’t)

  • ❌ Not a page builder job. If you can’t code a block with  block.json or work with theme.json, this isn’t for you.
  • ❌ Not for those who only dip into WordPress occasionally.
  • ✅ For developers who live and breathe modern WordPress.
  • ✅ For those who can integrate AI tools like Copilot & Model Context Protocol into their workflow.

LightSpeed Unified Block Theme & Block Plugin Development Workflow

A single, practical workflow that covers block theme and block (plugin) development, end‑to‑end. Optimised for collaboration, AI‑assist, accessibility, and speed.

Principles

  • Accessibility-first from design through deployment.
  • Design-token driven: Figma → theme.json → code.
  • Automate the boring: CI checks, deployments, scaffolding.
  • Document as you go: README.md + issue/PR notes are the source of truth.

1) Project Bootstrapping

  1. Base Theme: Start from the latest default core theme (e.g. Twenty Twenty‑Five) for a stable, standards-aligned baseline.
  2. Repo & CI: Create GitHub repo; enable CI/CD (CodeRabbit + Copilot checks, build, lint, test). Protect main branch.
  3. Environments: Provision dev, staging, production. Wire up auto‑deploys to dev/staging on PR merges; production deploys are explicit and reviewed.
  4. Local Setup: Use Docker/LS local stack. Configure .env, WP salts, and WP‑CLI.
  5. Content Fixtures: Seed representative content via WP‑CLI (posts, pages, products, patterns) for realistic QA.

2) Design Integration

  1. Site Editor First: Translate Figma designs in Figma Dev Mode into the WordPress Site Editor (templates, template parts, patterns).
  2. Create Block Theme Export: Use the Create Block Theme plugin to export the current site design into a theme skeleton.
  3. Design Tokens Sync: In VS Code, align theme.json with Figma design tokens (colours, typography, spacing). Use GitHub Copilot and MCP servers to keep Figma variables and theme configuration in sync.

3) Version Control & Tasking

  1. Issues → Branches: Break work into GitHub Issues. Create one branch per issue (naming: feature/…, fix/…).
  2. Commit Early/Often: Small commits with clear messages. Rebase to keep history clean. Use stash/cherry‑pick when needed.
  3. PR Discipline: Link PRs to Issues. Describe context, decisions, and edge cases. Reference screenshots/video where helpful.

4) Theme Development (Block Theme)

  1. Structure: Evolve templates, parts, and patterns to mirror the design system. Keep custom CSS minimal and confined.
  2. theme.json: Centralise global styles, presets, and custom settings. Reflect Figma tokens 1:1 to reduce drift.
  3. Accessibility: Validate landmarks, headings, focus states, colour contrast as you build—not at the end.
  4. Documentation: Update README.md after each milestone (what changed, why, how to extend).

5) Block & Plugin Development

  1. Scaffold: Use modern tooling (e.g., Webpack build already in repo). Generate block/plugin skeletons and register via block.json.
  2. Editor & Frontend Parity: Ensure blocks render consistently in editor and frontend; avoid editor‑only styling quirks.
  3. Data & APIs: Use the REST API/@wordpress/data for stateful blocks. Keep server logic in PHP with clear separation of concerns.
  4. Performance: Split bundles, lazy‑load where sensible. Lint JS/PHP and enforce coding standards.
  5. WP‑CLI Utilities: Add commands for data imports, content sync, and environment setup.

6) Tooling & Build

  1. Build System: Use Webpack to bundle assets, lint code, and run tests. (Vite may be evaluated per project.)
  2. AI Assistance: Use GitHub Copilot and MCP servers (GitHub/Figma) with context‑rich prompts; let AI handle boilerplate while humans focus on logic and UX.
  3. Automated Checks: Run ESLint/PHPCS/Stylelint, type checks (if applicable), and unit tests on every PR.

7) Testing & QA

  1. Continuous Review: CodeRabbit and Copilot provide the first pass; human reviewers validate architecture, accessibility, and design fidelity.
  2. Manual QA: Run through predefined user journeys with fixture content; test responsive states and keyboard navigation.
  3. Automated Browser Tests (Roadmap): Integrate Playwright for interaction tests across critical flows (navigation, forms, checkout, etc.).

8) Deployments

  1. Dev/Staging: Auto‑deploy on PR merges for quick feedback. Share preview URLs with designers and stakeholders.
  2. Production: Deliberate, reviewed merges trigger production deploys. Maintain rollback strategy and release notes.

9) Documentation & Knowledge

  1. README.md as Logbook: Record milestones, decisions, and caveats continuously.
  2. PR Notes: Capture edge cases, trade‑offs, and follow‑ups in PR descriptions.
  3. Contributor Onboarding: Keep a short “Getting Started” section with commands, environment setup, and common WP‑CLI tasks.

10) Governance & Future‑Proofing

  1. Token Evolution: Update Figma tokens first, propagate to theme.json, then to blocks.
  2. Accessibility Debt: Track any exceptions as Issues with owners and due dates.
  3. Roadmap: Expand automated tests (Playwright), increase pattern coverage, and refine performance budgets

Conclusion & How to Apply

If you’ve read this far and you’re still excited, here’s your move:

  1. Review all linked materials and complete the minimum curriculum.
  2. Prepare your GitHub profile to showcase your relevant work.
  3. Polish your LinkedIn and add any Figma examples.
  4. Write a cover letter explaining how you’ll contribute to LightSpeed’s mission and why you thrive in a workflow like ours.

If you think you’ve got the passion and curiosity to grow into a modern WordPress developer, we’d love to meet you. Send us  your application through our contact page when you can prove you’ve done the homework and request an interview and start your journey with LightSpeed. We’re here for serious developers ready to build the future of WordPress — not just talk about it.

Share:

Recent Posts