Feature/print button

[arifulhoque7]

trafficstars

Close issue

🆕 New Print Button Block Implementation

3 Commits Made:

1. feat: Add Print Button block - Core implementation
2. fix: change color UI default block - UI improvements
3. fix: frontend design - Design refinements

📁 Files Added/Modified:

New Block Files Created:

1. src/blocks/PrintButton/ - Complete new block directory with:
   • block.json - Block configuration and attributes
   • edit.js - Block editor interface (195 lines)
   • index.js - Block registration
   • Inspector.js - Block settings panel (200+ lines)
   • render.php - Server-side rendering (169 lines)
   • style.scss - Block styling (253 lines)

Core Files Modified:

• wedocs.php - Added block registration and category
• src/blocks/index.js - Registered new PrintButton block
• assets/js/frontend.js - Enhanced print functionality
• Various build files updated automatically

🎨 Key Features Implemented:

1. Block Configuration (block.json):

• Block Name: wedocs/print-button
• Category: wedocs (new custom category)
• Icon: Printer icon
• Supports: Left/Center/Right alignment
• 20+ Customizable Attributes including:
  • Layout options (3 different layouts)
  • Colors (background, text, hover states)
  • Spacing (padding, margin)
  • Typography (font size, weight)
  • Border styling
  • Custom CSS classes

2. Three Layout Variations:

• Layout 1: Horizontal button with icon and text
• Layout 2: Enhanced button style with shadow
• Layout 3: Vertical layout (icon above text)

3. Advanced Customization Options:

• Color Controls: Background, text, hover states, borders
• Spacing Controls: Padding and margin with box controls
• Typography: Font size (10-32px), font weight options
• Border Styling: Width, radius, style, color
• Button Sizes: Small, medium, large
• Button Styles: Primary, secondary, outline, ghost

4. Print Functionality:

• Smart Detection: Only shows on docs post type pages
• Enhanced Print Logic: Updated frontend JavaScript for better printing
• Print Styling: Comprehensive CSS to hide print buttons during printing
• Responsive Design: Mobile-friendly layouts

5. Block Category System:

• New weDocs Category: Created dedicated block category
• Proper Registration: Added to WordPress block categories

🔧 Technical Implementation Details:

Server-Side Rendering (render.php):

• Post type validation (only shows on docs pages)
• Comprehensive attribute handling with defaults
• Dynamic CSS generation with unique IDs
• Responsive layout switching
• Print media query hiding

Editor Interface (edit.js):

• Real-time preview with hover effects
• Block controls integration
• Alignment toolbar
• Inspector controls integration
• Layout switching with live preview

Styling (style.scss):

• 253 lines of comprehensive CSS
• Print media queries (hides button when printing)
• Responsive design
• High contrast mode support
• Reduced motion accessibility
• Multiple selector specificity for theme compatibility

🎯 User Experience Improvements:

1. Easy Integration: Simple drag-and-drop block
2. Visual Customization: Extensive styling options
3. Accessibility: Proper ARIA labels, keyboard support
4. Mobile Responsive: Adapts to different screen sizes
5. Print Optimization: Automatically hidden during printing
6. Theme Compatibility: High specificity CSS to override theme styles

🔗 Integration Points:

• Frontend JavaScript: Enhanced existing print functionality
• Block Registration: Properly integrated with WordPress block system
• Category System: New weDocs block category for organization
• Asset Management: Proper enqueueing of styles and scripts

Summary by CodeRabbit

• New Features

  • Added “weDocs – Print Button” block (three layouts, optional icon, customizable text, alignment, colors, borders, spacing, size, extra classes). Server-rendered output scoped with unique IDs and hidden during printing.
  • Added a “weDocs” block category for easier discovery.

• Enhancements

  • Improved printing flow: event-driven lifecycle with load/afterprint handling, reliable cleanup, and 30s fallback.

• Style

  • Added comprehensive responsive, hover, print, high-contrast, reduced-motion, and editor color-control styles.

[coderabbitai[bot]]

Walkthrough

Adds a new Gutenberg "weDocs - Print Button" block (editor UI, inspector, server renderer, styles, and built assets), converts frontend printing to an event-driven lifecycle, and renames internal locals in the bundled React JSX runtime in assets/build/block.js.

Changes

Cohort / File(s)	Summary
JSX runtime refactor assets/build/block.js	Internal renaming/reordering of temporaries and the second parameter in t.jsx plus related local-variable renames; behavior preserved.
Built PrintButton artifacts assets/build/blocks/PrintButton/block.json, assets/build/blocks/PrintButton/render.php	Adds built block manifest and server-side renderer (layouts, attributes, inline CSS, docs-only rendering).
Source: PrintButton block src/blocks/PrintButton/block.json, src/blocks/PrintButton/index.js, src/blocks/PrintButton/edit.js, src/blocks/PrintButton/Inspector.js, src/blocks/PrintButton/render.php, src/blocks/PrintButton/style.scss	New block metadata, registration, Edit UI with three layouts, Inspector controls, server render callback, and SCSS styles.
Built global block styles assets/build/style-block.css	Adds .wedocs-color-control and .wp-block-wedocs-print-button CSS with variants, responsive rules, hover/active states, and print-hide rules.
Frontend print lifecycle assets/js/frontend.js	Replaces fixed timeout with event-driven printing: waits for print window load, uses afterprint/onafterprint handlers, a 30s fallback, and deterministic cleanup/close.
Blocks index wiring src/blocks/index.js	Imports/loads PrintButton so it registers during blocks initialization.
Plugin integration wedocs.php	Adds register_block_category method, hooks block category registration, and registers PrintButton with render_wedocs_print_button callback.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related issues

• weDevsOfficial/wedocs-pro#161 — Adds the same wedocs/print-button block end-to-end (manifest, editor UI, server renderer, assets), matching this PR's objectives.

Poem

A rabbit taps the print with cheer,
Three tiny layouts gather near.
CSS and PHP hum in tune,
JS waits for afterprint soon.
Hop — the paper leaps from the moon! 🐇🖨️

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "Feature/print button" accurately and concisely reflects the primary change — adding a Print Button feature/block — and is directly related to the changeset. It is short and clear for teammates scanning history, though minor stylistic tweaks (e.g., "Feature: Print Button" or capitalization) could improve consistency.

✨ Finishing touches

• [ ] 📝 Generate Docstrings

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}