[WordPress] 外掛分享： WBD Timeline Block For Gutenberg

內容簡介

WBD Timeline Block For Gutenberg 是一款直觀、輕量且可自訂的 WordPress 時間軸外掛，專為現代區塊編輯器設計。無需撰寫程式碼，即可輕鬆建立美觀、響應式的時間軸，適合展示公司歷史、專案路線圖、活動日程或個人里程碑。

【主要功能】
• 三種驚豔佈局選擇
• 響應式控制，適應各種裝置
• 高度可自訂的時間軸卡片內容
• 進階排版與設計控制
• 滾動觸發動畫效果
• 伺服器端渲染，SEO 友好

外掛標籤

開發者團隊

原文外掛簡介

WBD Timeline Block for Gutenberg is the most intuitive, lightweight, and customizable WordPress timeline plugin designed specifically for the modern block editor. Whether you need to showcase a company history, a project roadmap, event schedules, or personal milestones, this plugin allows you to build beautiful, responsive, and animated timelines without writing a single line of code or relying on heavy page builders.
Built entirely with native WordPress Gutenberg components, the WBD Timeline Block ensures zero bloat, lightning-fast performance, and a seamless editing experience inside the block editor.
Key Features for a Perfect Timeline:

3 Stunning Layouts: Choose from Vertical Alternating (zigzag), Vertical One-sided, and a touch-friendly Horizontal slider layout with left/right navigation.
Responsive Control: Set custom columns for the horizontal slider (Desktop, Tablet, Mobile) and watch vertical timelines automatically adapt to smaller screens.
Highly Customizable Content: Each timeline card supports a Custom Date/Label, Title, Description, Image (with position and object-fit control), Call-to-Action Link, and a custom Marker Icon.
Advanced Typography & Design: Fully control font families, responsive font sizes, link padding, border radius, and accent colors for every single element.
Scroll-Triggered Animations: Bring your history or roadmap to life with smooth reveal animations (Fade Up, Fade In, Slide In, Zoom In) as users scroll down the page.
Accessible & Performance-Optimized: Respects prefers-reduced-motion settings for accessibility. Powered by vanilla JS and IntersectionObserver—no heavy jQuery libraries.
Server-Side Rendered: Ensures SEO-friendly HTML markup, dynamic CSS variable injection, and maximum security.

Where can you use WBD Timeline Block?

Showcase tutorial/process steps in timeline format.
Create a program timeline.
Represent history.
Create events/appointments timeline.
Job stories/achievements timeline.
Personal story timeline.
Product roadmap.

Timeline Content
Each timeline item can include:

Custom date or label
Title
Description
Image
Call-to-action link
Custom marker
Marker icon

Image settings include position and object-fit controls to help maintain a consistent visual presentation.
Responsive Timeline Design
WBD Timeline Builder is designed for responsive WordPress websites.
For the horizontal timeline layout, you can configure columns for:

Desktop
Tablet
Mobile

Vertical timeline layouts adapt to smaller screen sizes so your chronological content remains usable across different devices.
Timeline Animations
WBD Timeline Builder includes scroll-triggered reveal animations for timeline content.
Available animation styles include:

Fade Up
Fade In
Slide In
Zoom In

Accessibility-Conscious Motion
Accessibility is considered in the timeline animation experience.
WBD Timeline Builder respects the user’s prefers-reduced-motion setting. When reduced motion is enabled at the operating-system or browser level, timeline animations are disabled. For best accessibility, use clear headings, readable text, descriptive links, and meaningful content when creating your timeline.
Performance-Conscious Implementation
WBD Timeline Builder uses vanilla JavaScript and the browser’s IntersectionObserver API for timeline animations.
The plugin does not require jQuery for its timeline functionality. Keeping the timeline functionality focused helps avoid adding unrelated page-building features to your WordPress website.
Actual frontend performance can vary depending on your WordPress theme, hosting environment, other plugins, assets, and page content.
Server-Side Rendered Block
The timeline block uses server-side rendering to generate its frontend output.
This allows timeline content to be generated as part of the WordPress page output while keeping the editing experience integrated with Gutenberg.
SEO-Friendly Timeline Content
WBD Timeline Builder helps you organize chronological information in a clear and structured timeline format using the WordPress Block Editor.
Timeline content can be useful for:

Company history pages
Product development timelines
Project roadmaps
Event schedules
Process steps
Milestone pages
Achievement timelines
Personal stories
Tutorials and sequential content

Development
Public source code repository:
https://github.com/wpbranddigital/timeline-builder-block
Build Instructions:

npm install
npm run build
npm run start (development)
WBD Timeline Builder is built using @wordpress/scripts.