Book Viewer Block

A Gutenberg block for displaying images as a flipable book with realistic page-turn effects.

If you want to install this plugin, DON'T DOWNLOAD THIS REPO. You can download the latest stable version from the releases page or just click here.

Features

• Realistic page-flip animations powered by StPageFlip
• Front and back cover support
• Drag-and-drop page reordering in the editor
• Insert blank pages anywhere in the book
• Full-screen viewing mode
• Zoom functionality on individual pages
• Responsive design (single-page view on mobile, two-page spread on desktop)
• CSS fallback for no-JavaScript environments
• Lazy loading with IntersectionObserver
• Customisable page dimensions
• Customisable padding/border colour

Requirements

• WordPress 6.0 or higher
• PHP 7.4 or higher

Installation

1. Download the latest release from the releases page
2. Upload the pinkcrab-book-block folder to your /wp-content/plugins/ directory
3. Activate the plugin through the 'Plugins' menu in WordPress
4. Add the "Book Viewer" block to any post or page

Usage

1. Add the Book Viewer block to your post or page
2. Click "Select Pages" to choose images from your Media Library
3. Optionally set front and back covers in the block sidebar
4. Adjust page dimensions and padding colour as needed
5. Drag and drop pages to reorder them
6. Add blank pages where needed

Building

Run npm install to install all the Node.js dependencies.

Below you will find some information on how to run scripts.

npm start

• Use to compile and run the block in development mode.
• Watches for any changes and reports back any errors in your code.

npm run build

• Use to build production code for your block inside build folder.
• Runs once and reports back the gzip file sizes of the produced code.

Changelog

1.0.0

• Initial release

License

GPL-2.0-or-later

Credits

• Page flip animation: StPageFlip by Nickolay Odintsov
• Drag and drop: dnd kit

Author

Glynn Quelch

• Website: glynnquelch.co.uk
• GitHub: @Pink-Crab