Nextjs Elementor Init by Naved #63
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add WordPress plugin infrastructure (dapflow-blocks) - REST API extension for block data exposure - Auto-registration of blocks from blocks/ directory - Admin dashboard for plugin management - Build system using @wordpress/scripts - Implement Next.js block renderer system - BlockRenderer component for WordPress blocks - Block registry for component mapping - Block parser utilities - Core blocks fallback renderer - TypeScript types for all blocks - Create Hero block as first example - Prop-driven Hero component with full TypeScript - WordPress block with editor controls - Sidebar panels for content, CTAs, branding, styling - Live preview in editor with custom styles - Complete integration with design system - Update WordPress types - Add blocks field to Page and Post interfaces - Support for EditorBlock type - Update page template - Hybrid rendering (blocks or HTML fallback) - Backward compatibility maintained - Add comprehensive documentation - ADR for architectural decisions - Feature specification - Implementation tasks - Session notes - Testing guides - Getting started guide Related: ADR-2025-001, FEAT-2025-001, TASK-001, TASK-002, TASK-003
- Add WordPress plugin infrastructure (dapflow-blocks) - REST API extension for block data exposure - Auto-registration of blocks from blocks/ directory - Admin dashboard for plugin management - Build system using @wordpress/scripts - Implement Next.js block renderer system - BlockRenderer component for WordPress blocks - Block registry for component mapping - Block parser utilities - Core blocks fallback renderer - TypeScript types for all blocks - Create Hero block as first example - Prop-driven Hero component with full TypeScript - WordPress block with editor controls - Sidebar panels for content, CTAs, branding, styling - Live preview in editor with custom styles - Complete integration with design system - Update WordPress types - Add blocks field to Page and Post interfaces - Support for EditorBlock type - Update page template - Hybrid rendering (blocks or HTML fallback) - Backward compatibility maintained - Add comprehensive documentation - ADR for architectural decisions - Feature specification - Implementation tasks - Session notes - Testing guides - Getting started guide Related: ADR-2025-001, FEAT-2025-001, TASK-001, TASK-002, TASK-003
- Create automated block generation CLI (scripts/generate-block.js) - Interactive prompts for block configuration - Generates WordPress block files (block.json, edit.js, index.js, style.scss) - Generates Next.js component with TypeScript - Auto-updates block registry and types - Auto-updates plugin entry point - Add npm script: 'npm run generate-block' - Create comprehensive documentation - CLI README with examples and troubleshooting - Quick start guide (CLI_GUIDE.md) - Common block patterns and best practices Time savings: 70-80% faster block creation (5 min vs 30-60 min) Usage: npm run generate-block # Follow interactive prompts # Files generated automatically # Ready to customize and test Related: TASK-009
- Create automated block generation CLI (scripts/generate-block.js) - Interactive prompts for block configuration - Generates WordPress block files (block.json, edit.js, index.js, style.scss) - Generates Next.js component with TypeScript - Auto-updates block registry and types - Auto-updates plugin entry point - Add npm script: 'npm run generate-block' - Create comprehensive documentation - CLI README with examples and troubleshooting - Quick start guide (CLI_GUIDE.md) - Common block patterns and best practices Time savings: 70-80% faster block creation (5 min vs 30-60 min) Usage: npm run generate-block # Follow interactive prompts # Files generated automatically # Ready to customize and test Related: TASK-009
COMPLETED IMPLEMENTATION: - WordPress plugin (dapflow-blocks) fully functional - Next.js block renderer system operational - REST API extension (view context only - fixed editor bug) - Hero Basic block working end-to-end - Hero Ultra Simple and Test Minimal blocks - Block Generator CLI tool FIXES: - REST API context limited to 'view' only (prevents editor errors) - CoreBlockRenderer handles nested blocks (columns, groups) - Attribute handling: empty arrays → empty objects - Added @headlessui/react and @heroicons/react dependencies - Fixed navigation attribute issue (removed complex nested arrays) - Added useEffect for safe attribute migration FEATURES: - Content editors can build hero sections in WordPress - Renders with shadcn/ui + craft + Tailwind - Fully type-safe throughout stack - Backward compatible with HTML rendering - CLI tool for rapid block generation (npm run generate-block) PLUGIN STRUCTURE: - plugin/dapflow-blocks/ - WordPress plugin - blocks/hero-basic/ - Working Hero block - blocks/hero-ultra-simple/ - Minimal Hero - blocks/test-minimal/ - Test block - includes/ - PHP classes (REST API, Registry, Admin) - build/ - Compiled JavaScript - Build script for clean distribution (20KB) NEXT.JS INTEGRATION: - lib/blocks/ - Block renderer system - components/blocks/ - Hero components - Updated page templates with BlockRenderer - TypeScript types for all blocks DOCUMENTATION: - ADR-2025-001: Architecture decisions - Feature spec: gutenberg_blocks.md - Session notes: SES-2025-001 - Getting started guides (GETTING_STARTED_BLOCKS.md) - Testing documentation (TASK-003) - Success summary (BLOCK_SYSTEM_SUCCESS.md) - CLI documentation (CLI_GUIDE.md, scripts/README.md) TESTED & VERIFIED: ✅ WordPress editor works without errors ✅ Blocks insert and edit successfully ✅ Content saves correctly ✅ REST API returns block data ✅ Frontend renders with correct styling at localhost:3001 ✅ Core WordPress blocks compatible ✅ Hero Basic block fully functional Related: ADR-2025-001, FEAT-2025-001, SES-2025-001
COMPLETED IMPLEMENTATION: - WordPress plugin (dapflow-blocks) fully functional - Next.js block renderer system operational - REST API extension (view context only - fixed editor bug) - Hero Basic block working end-to-end - Hero Ultra Simple and Test Minimal blocks - Block Generator CLI tool FIXES: - REST API context limited to 'view' only (prevents editor errors) - CoreBlockRenderer handles nested blocks (columns, groups) - Attribute handling: empty arrays → empty objects - Added @headlessui/react and @heroicons/react dependencies - Fixed navigation attribute issue (removed complex nested arrays) - Added useEffect for safe attribute migration FEATURES: - Content editors can build hero sections in WordPress - Renders with shadcn/ui + craft + Tailwind - Fully type-safe throughout stack - Backward compatible with HTML rendering - CLI tool for rapid block generation (npm run generate-block) PLUGIN STRUCTURE: - plugin/dapflow-blocks/ - WordPress plugin - blocks/hero-basic/ - Working Hero block - blocks/hero-ultra-simple/ - Minimal Hero - blocks/test-minimal/ - Test block - includes/ - PHP classes (REST API, Registry, Admin) - build/ - Compiled JavaScript - Build script for clean distribution (20KB) NEXT.JS INTEGRATION: - lib/blocks/ - Block renderer system - components/blocks/ - Hero components - Updated page templates with BlockRenderer - TypeScript types for all blocks DOCUMENTATION: - ADR-2025-001: Architecture decisions - Feature spec: gutenberg_blocks.md - Session notes: SES-2025-001 - Getting started guides (GETTING_STARTED_BLOCKS.md) - Testing documentation (TASK-003) - Success summary (BLOCK_SYSTEM_SUCCESS.md) - CLI documentation (CLI_GUIDE.md, scripts/README.md) TESTED & VERIFIED: ✅ WordPress editor works without errors ✅ Blocks insert and edit successfully ✅ Content saves correctly ✅ REST API returns block data ✅ Frontend renders with correct styling at localhost:3001 ✅ Core WordPress blocks compatible ✅ Hero Basic block fully functional Related: ADR-2025-001, FEAT-2025-001, SES-2025-001
Changed EditorBlock[] to inline type definition matching WordPressBlock interface. This fixes Vercel build error: Type 'EditorBlock[]' is not assignable to type 'WordPressBlock[]' The blocks field now uses the same shape as WordPressBlock from lib/blocks/types.ts
Changed EditorBlock[] to inline type definition matching WordPressBlock interface. This fixes Vercel build error: Type 'EditorBlock[]' is not assignable to type 'WordPressBlock[]' The blocks field now uses the same shape as WordPressBlock from lib/blocks/types.ts
…onents - Created comprehensive CoreBlocks.tsx with all core WP block components - Fixed hydration errors by avoiding nested semantic HTML elements - Added global CSS styling for WordPress blocks (responsive) - Simplified page rendering logic in app/pages/[slug]/page.tsx - All blocks now render with Tailwind/shadcn/ui design system - 100% Next.js frontend with WordPress as headless CMS only Supported Blocks: - Layout: Columns, Column, Group - Content: Paragraph, Heading, List, Quote, Code, Preformatted - Media: Image, Gallery, Video, Audio - Interactive: Buttons, Button (using shadcn/ui) - Formatting: Separator, Spacer - Embed: YouTube, Twitter, etc. - Table: Data tables Documentation: - Added SES-2025-002-core-blocks-implementation.md session notes - Updated current_state.md with latest status - Moved completed tasks to completed folder - Created CORE_BLOCKS.md with full documentation Testing: ✅ Zero hydration errors ✅ All blocks rendering correctly ✅ Responsive design working ✅ Tested on careers page (localhost:3000/pages/careers)
…onents - Created comprehensive CoreBlocks.tsx with all core WP block components - Fixed hydration errors by avoiding nested semantic HTML elements - Added global CSS styling for WordPress blocks (responsive) - Simplified page rendering logic in app/pages/[slug]/page.tsx - All blocks now render with Tailwind/shadcn/ui design system - 100% Next.js frontend with WordPress as headless CMS only Supported Blocks: - Layout: Columns, Column, Group - Content: Paragraph, Heading, List, Quote, Code, Preformatted - Media: Image, Gallery, Video, Audio - Interactive: Buttons, Button (using shadcn/ui) - Formatting: Separator, Spacer - Embed: YouTube, Twitter, etc. - Table: Data tables Documentation: - Added SES-2025-002-core-blocks-implementation.md session notes - Updated current_state.md with latest status - Moved completed tasks to completed folder - Created CORE_BLOCKS.md with full documentation Testing: ✅ Zero hydration errors ✅ All blocks rendering correctly ✅ Responsive design working ✅ Tested on careers page (localhost:3000/pages/careers)
- Added proper type assertion for align property - Used Record type for alignClasses object - Ensures type safety for button alignment options
- Added proper type assertion for align property - Used Record type for alignClasses object - Ensures type safety for button alignment options
- Add WordPress Menu REST API (class-menu-api.php)
- Implement dynamic header with Headless UI components
- Add dropdown menu support and mobile slide-out navigation
- Integrate theme toggle and 85rem width consistency
- Fix z-index conflicts between Hero block and main navigation
- Add graceful fallback to static menu when WordPress unavailable
- Update all core blocks to use 85rem max-width
- Add comprehensive documentation and deployment guides
WordPress Plugin:
- New Menu API endpoints: /wp-json/wp/v2/menus/{slug}
- Updated plugin with menu functionality
- Rebuilt deployment package: dapflow-blocks-menu.zip
Next.js Frontend:
- Dynamic header component with server-side menu fetching
- Mobile-responsive navigation with smooth animations
- URL conversion from WordPress CMS to frontend paths
- TypeScript support with MenuItem/Menu interfaces
Documentation:
- Complete session notes (SES-2025-003)
- Feature specification (dynamic_menus.md)
- Deployment instructions (MENU_SYSTEM.md)
- Updated roadmap with actual progress
All changes preserve existing functionality and are backwards compatible.
- Add WordPress Menu REST API (class-menu-api.php)
- Implement dynamic header with Headless UI components
- Add dropdown menu support and mobile slide-out navigation
- Integrate theme toggle and 85rem width consistency
- Fix z-index conflicts between Hero block and main navigation
- Add graceful fallback to static menu when WordPress unavailable
- Update all core blocks to use 85rem max-width
- Add comprehensive documentation and deployment guides
WordPress Plugin:
- New Menu API endpoints: /wp-json/wp/v2/menus/{slug}
- Updated plugin with menu functionality
- Rebuilt deployment package: dapflow-blocks-menu.zip
Next.js Frontend:
- Dynamic header component with server-side menu fetching
- Mobile-responsive navigation with smooth animations
- URL conversion from WordPress CMS to frontend paths
- TypeScript support with MenuItem/Menu interfaces
Documentation:
- Complete session notes (SES-2025-003)
- Feature specification (dynamic_menus.md)
- Deployment instructions (MENU_SYSTEM.md)
- Updated roadmap with actual progress
All changes preserve existing functionality and are backwards compatible.
…unt; robust menu fetch; graceful WP 500 handling; base URL fallback
…unt; robust menu fetch; graceful WP 500 handling; base URL fallback
### WS-2025-001 – Summary of changes
- **Block rendering fix**
- Updated `lib/blocks/block-renderer.tsx` to pass the full `block` prop to primitive layout blocks (`dap/row`, `dap/stack`, `dap/grid`, `dap/box`) and spread `attrs` for presentation blocks (e.g., `dapflow/hero-basic`). Resolves `innerBlocks` undefined errors.
- **Core Cover support**
- Added `CoreCover` in `components/blocks/CoreBlocks.tsx` to render `core/cover` with background image, overlay dim ratio, min height, and nested `innerBlocks`.
- **Columns respect count**
- Modified `CoreColumns` to read `attrs.columns` (or inner block count) and optionally stack on mobile via `isStackedOnMobile`. No longer defaults to 3 columns.
- **Menu fetch hardening**
- Improved `lib/wordpress-menu.ts`:
- Graceful handling of non-404 errors (warn instead of error).
- Fallback attempts for common slugs: primary (`primary-menu`, `primary`, `main`, `menu-1`) and footer (`footer`, `footer-menu`, `menu-2`).
- Kept fallback to static menu when WP menu is missing/unavailable.
- **Page route resilience**
- `app/pages/[slug]/page.tsx`:
- Wrapped `generateStaticParams`/`generateMetadata`/page fetch with try/catch to avoid crashing on WP 500s.
- Shows a readable fallback if content/blocks aren’t available.
- **WordPress client robustness**
- `lib/wordpress.ts`:
- Base URL fallback to `WORDPRESS_URL` → `NEXT_PUBLIC_WP_API_URL` (strip `/wp-json`) → `https://cms.dapflow.com`.
- Enhanced error messages include status, endpoint, and a short response body snippet to aid debugging.
### WS-2025-001 – Summary of changes
- **Block rendering fix**
- Updated `lib/blocks/block-renderer.tsx` to pass the full `block` prop to primitive layout blocks (`dap/row`, `dap/stack`, `dap/grid`, `dap/box`) and spread `attrs` for presentation blocks (e.g., `dapflow/hero-basic`). Resolves `innerBlocks` undefined errors.
- **Core Cover support**
- Added `CoreCover` in `components/blocks/CoreBlocks.tsx` to render `core/cover` with background image, overlay dim ratio, min height, and nested `innerBlocks`.
- **Columns respect count**
- Modified `CoreColumns` to read `attrs.columns` (or inner block count) and optionally stack on mobile via `isStackedOnMobile`. No longer defaults to 3 columns.
- **Menu fetch hardening**
- Improved `lib/wordpress-menu.ts`:
- Graceful handling of non-404 errors (warn instead of error).
- Fallback attempts for common slugs: primary (`primary-menu`, `primary`, `main`, `menu-1`) and footer (`footer`, `footer-menu`, `menu-2`).
- Kept fallback to static menu when WP menu is missing/unavailable.
- **Page route resilience**
- `app/pages/[slug]/page.tsx`:
- Wrapped `generateStaticParams`/`generateMetadata`/page fetch with try/catch to avoid crashing on WP 500s.
- Shows a readable fallback if content/blocks aren’t available.
- **WordPress client robustness**
- `lib/wordpress.ts`:
- Base URL fallback to `WORDPRESS_URL` → `NEXT_PUBLIC_WP_API_URL` (strip `/wp-json`) → `https://cms.dapflow.com`.
- Enhanced error messages include status, endpoint, and a short response body snippet to aid debugging.
- Add try-catch blocks to all WordPress API functions - Return empty arrays/null instead of throwing errors during build - Update pages listing to handle empty results gracefully - Prevents build failures when WordPress API is unavailable - Maintains functionality while being more resilient to API issues
- Add .pnpm-store/ to .gitignore to prevent cache files from being committed - Remove .pnpm-store directory from git tracking - Improve WordPress API error handling for build resilience - Return empty arrays/null instead of throwing errors during build - Update pages listing to handle empty results gracefully - Prevents build failures when WordPress API is unavailable
|
@navedfakru is attempting to deploy a commit to the 9d8 Team on Vercel. A member of the Team first needs to authorize it. |
|
Important Review skippedMore than 25% of the files skipped due to max files limit. The review is being skipped to prevent a low-quality review. 66 files out of 187 files are above the max files limit of 100. Please upgrade to Pro plan to get higher limits. You can disable this status message by setting the ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
9 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.