🚀 WordPress Gutenberg in React App

A modern React application that integrates WordPress Gutenberg block editor, providing a standalone environment for building and testing Gutenberg blocks with full WordPress functionality.

✨ Features

• Full Gutenberg Integration: Complete WordPress block editor experience
• Modern Tech Stack: Built with React, TypeScript, Vite, and Sass
• Block Development: Create, edit, and test Gutenberg blocks
• Real-time Preview: See block markup and data in real-time
• Responsive Design: Mobile-friendly editor interface
• Custom Styling: Comprehensive SCSS setup with WordPress base styles

🛠️ Tech Stack

• Frontend: React 18 + TypeScript
• Build Tool: Vite 5
• Styling: Sass with WordPress base styles
• Package Manager: Yarn
• WordPress: Latest Gutenberg packages (v12.26.0+)

📋 Prerequisites

• Node.js: 18.x or higher
• npm: 8.x or higher
• Yarn: 1.22.x or higher

🚀 Quick Start

1. Clone the Repository

git clone <repository-url>
cd gutenberg-in-react-app

2. Install Dependencies

yarn install

3. Start Development Server

yarn dev

The application will be available at http://localhost:5173

4. Build for Production

yarn build

5. Preview Production Build

yarn serve

🏗️ Project Structure

gutenberg-in-react-app/
├── src/
│   ├── components/          # React components
│   ├── scss/               # Stylesheets
│   │   ├── _variables.scss # SCSS variables and fixes
│   │   ├── style.scss      # Main styles
│   │   ├── reset.scss      # CSS reset
│   │   └── editor-styles.scss # Editor-specific styles
│   ├── starter-blocks/     # Sample block data
│   ├── App.tsx            # Main application component
│   ├── loadGutenbergDependencies.js # WordPress loader
│   └── utils.jsx          # Utility functions
├── package.json            # Dependencies and scripts
├── vite.config.ts         # Vite configuration
└── tsconfig.json          # TypeScript configuration

🔧 WordPress Integration

Gutenberg Dependencies

The app automatically loads all necessary WordPress packages:

• Block Editor: Core editing functionality
• Block Library: Standard WordPress blocks
• Components: WordPress UI components
• Data Store: WordPress data management
• Format Library: Text formatting tools
• Icons: WordPress icon system

Global WordPress Object

All WordPress functionality is available through the global window.wp object, making it easy to access Gutenberg APIs from anywhere in your application.

🎨 Styling

SCSS Architecture

• Variables: Centralized SCSS variables in _variables.scss
• WordPress Styles: Full integration with WordPress base styles
• Custom Styles: Responsive design with mobile-first approach
• Error Handling: Comprehensive fixes for WordPress SCSS compatibility

Key Features

• Responsive sidebar layout
• Mobile-friendly block editor
• WordPress component styling
• Custom block editor themes

📱 Usage

Editor Interface

1. Main Editor: Full Gutenberg block editor experience
2. Sidebar: Block inspector and settings panel
3. Toolbar: Block manipulation tools
4. Content Area: Visual block editing

Block Management

• Add Blocks: Use the block inserter
• Edit Blocks: Click blocks to edit content
• Move Blocks: Drag and drop block reordering
• Block Settings: Configure block properties in sidebar

Actions

• Save: Save current blocks to Gutenberg store
• Clear: Reset editor to initial state
• Preview: View block markup and data

🧪 Development

Adding New Blocks

1. Create block data in src/starter-blocks/
2. Import and use in your application
3. Customize block behavior using WordPress APIs

Custom Styling

1. Modify src/scss/_variables.scss for global changes
2. Update component-specific styles in respective SCSS files
3. Use WordPress base styles for consistency

WordPress Extensions

• Hooks: Use WordPress hooks system
• Data Store: Extend WordPress data management
• Components: Create custom WordPress components

🐛 Troubleshooting

Common Issues

SCSS Compilation Errors

• Ensure all WordPress dependencies are properly installed
• Check import order in style.scss
• Verify SCSS variables are defined in _variables.scss

WordPress Object Not Available

• Check browser console for errors
• Verify loadGutenbergDependencies.js is imported
• Ensure all WordPress packages are installed

Build Errors

• Clear node_modules and reinstall dependencies
• Check Node.js version compatibility
• Verify TypeScript configuration

Debug Mode

Enable debug logging by checking browser console for WordPress object availability and any error messages.

📚 API Reference

WordPress Gutenberg APIs

• Block Editor API
• Components API
• Data Store API
• Blocks API

React Integration

• Use @wordpress/element for React compatibility
• Access WordPress data through useDispatch and useSelect
• Integrate with WordPress hooks system

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is unlicensed. See package.json for details.

🙏 Acknowledgments

• WordPress Gutenberg team for the block editor
• React team for the frontend framework
• Vite team for the build tool
• All contributors to this project

📞 Support

For issues and questions:

1. Check the troubleshooting section
2. Review WordPress Gutenberg documentation
3. Open an issue in the repository
4. Check browser console for error details

---

Happy Block Building! 🎉