Advanced Gutenberg Block Creation for Interactive Sites
0
WordPress Developer
Web Designer
Figma
Block 1: Author Box Development
Tasks:
UI Design:
Design a clean, responsive author box layout.
Include fields for name, bio, avatar, and social media links.
2. Gutenberg Block Development:
Develop a fully customizable Gutenberg block using React and PHP.
Add backend options for easy customization by site admins (e.g., show/hide fields, style settings).
3. Testing & Deployment:
Ensure compatibility across major WordPress themes.
Conduct cross-browser testing to ensure consistent display.
Block 2: Table of Contents Development
Tasks:
TOC Logic Development:
Automatically detect headings (H1, H2, H3, etc.) in the post content.
Create an expandable/collapsible table of contents.
Customization Options:
Add backend controls for TOC position, style, and visibility.
Allow users to enable/disable specific heading levels.
Performance Optimization:
Ensure the block loads efficiently without affecting page speed.
Testing & Deployment:
Test responsiveness and ensure seamless navigation on mobile, tablet, and desktop devices.
Like this project
0
Posted Jan 6, 2025
Developed custom Gutenberg blocks, including an Author Box and Table of Contents, with full customization, responsive design, and reusable code framework.
Likes
0
Views
0
Tags
WordPress Developer
Web Designer
Figma
Responsive Blog Website Transformation from Figma to WordPress
Figma to Functional: WP Theme & WooCommerce Store