A modern web application built with React, TypeScript, and Tailwind CSS that showcases a curated collection of WordPress block development examples. The directory helps developers find and explore practical examples for building custom blocks and extending the WordPress Block Editor.

• 🔍 Search functionality across all examples
• 🏷️ Filter by multiple tags
• 📱 Responsive design
• 🔗 URL-based filtering (shareable filtered views)
• 📅 Automatic sorting by last update date
• 📄 Pagination support
• Built with Vite for fast development experience
• Uses TypeScript for type safety
• Styled with Tailwind CSS

src/
├── components/
│   ├── features/
│   │   ├── Pagination.tsx    # Handles page navigation
│   │   ├── SampleCard.tsx    # Individual example card
│   │   └── SearchBar.tsx     # Search input component
│   └── layout/
│       ├── Header.tsx        # App header with search
│       ├── Sidebar.tsx       # Tags filter panel
│       └── SampleGrid.tsx    # Grid of examples
├── data/
│   └── samples.json         # Example data
├── types/
│   └── sample.ts           # TypeScript interfaces
├── App.tsx                 # Main application component
└── main.tsx               # Application entry point

• Node.js 16.x or later
• npm 7.x or later

• Install dependencies:

npm install

• Copy the latest metadata of the examples that will be used in the app

npm run data:copy

• Start the development server:

npm run dev

• Open your browser and visit:

http://localhost:5173

First ensure the latest metadata of the examples are copied in the app's project

npm run data:copy

To generate a production build do from /_app

npm run build

To deploy the production build do from the root of the project /

npm run gh:deploy

This will deploy the app in https://wordpress.github.io/block-development-examples/

This project is licensed under the MIT License - see the LICENSE file for details.