FectionWP Blocks

Versie: 1.0.0
Vereist: WordPress 6.0+, PHP 7.4+

Beschrijving

Bootstrap 5 Gutenberg blocks en shortcodes voor FectionWP Pro theme. Bouw professionele pagina's met kant-en-klare componenten.

Features

🎨 Bootstrap 5.3 Components - Alle officiële Bootstrap componenten
📦 Gutenberg Blocks - Native block editor integratie
⚡ Shortcodes - Gebruik overal in content
📱 Fully Responsive - Mobile-first design
♿ Accessible - WCAG 2.1 compliant
🎯 No jQuery - Pure Vanilla JS
🚀 Performance - Geoptimaliseerd en snel

Componenten

Layout Blocks

• Container (centered/fluid)
• Row & Columns
• Card
• Card Group

Content Blocks

• Alert (alle kleuren + dismissible)
• Accordion
• Tabs & Pills
• Badge
• Progress Bar
• Spinner/Loader

Navigation

• Breadcrumbs
• Pagination
• Button Group

Forms

• Button (alle stijlen)
• Input Groups
• Form layouts

Shortcodes

Alerts

[fwp_alert type="success" dismissible="true"]
Your message here
[/fwp_alert]

Attributes:

• type: primary, secondary, success, danger, warning, info, light, dark
• dismissible: true/false (default: false)

Buttons

[fwp_button type="primary" size="lg" url="#" target="_blank"]
Click Me
[/fwp_button]

Attributes:

• type: primary, secondary, success, danger, warning, info, light, dark, link
• size: sm, lg (default: normal)
• outline: true/false
• url: link URL
• target: _blank, _self
• block: true/false (full width)

Cards

[fwp_card title="Card Title" image="image-url.jpg" footer="Footer text"]
Card body content
[/fwp_card]

Attributes:

• title: Card header
• image: Featured image URL
• footer: Card footer
• class: Additional CSS classes

Accordion

[fwp_accordion]
  [fwp_accordion_item title="Section 1" open="true"]
    Content 1
  [/fwp_accordion_item]
  [fwp_accordion_item title="Section 2"]
    Content 2
  [/fwp_accordion_item]
[/fwp_accordion]

Tabs

[fwp_tabs style="pills"]
  [fwp_tab title="Tab 1" active="true"]
    Content 1
  [/fwp_tab]
  [fwp_tab title="Tab 2"]
    Content 2
  [/fwp_tab]
[/fwp_tabs]

Attributes:

• style: tabs, pills (default: tabs)

Modal

[fwp_modal button="Open Modal" title="Modal Title"]
Modal content here
[/fwp_modal]

Attributes:

• button: Button text
• title: Modal header
• size: sm, lg, xl
• centered: true/false

Badge

[fwp_badge type="primary"]New[/fwp_badge]

Progress Bar

[fwp_progress value="75" striped="true" animated="true"]

Attributes:

• value: 0-100
• type: primary, success, info, warning, danger
• striped: true/false
• animated: true/false

Grid / Columns

[fwp_row]
  [fwp_col md="6"]
    Column 1
  [/fwp_col]
  [fwp_col md="6"]
    Column 2
  [/fwp_col]
[/fwp_row]

Column Attributes:

• xs, sm, md, lg, xl, xxl: 1-12
• offset_md: Offset columns
• order_md: Change order

Page Section Shortcodes

Hero Sections

[fwp_hero type="centered" 
    title="Welcome" 
    subtitle="Amazing subtitle"
    bg_image="url"
    btn_text="Get Started"
    btn_url="#"]

Features

[fwp_features title="Our Features" cols="3"]
  [fwp_feature icon="bi-star" title="Feature 1"]
    Description
  [/fwp_feature]
[/fwp_features]

Pricing

[fwp_pricing]
  [fwp_pricing_card 
      title="Basic" 
      price="€19" 
      period="/maand"
      features="Feature 1, Feature 2, Feature 3"
      btn_text="Aan de slag"
      btn_link="#"]
[/fwp_pricing]

Testimonials

[fwp_testimonials cols="3"]
  [fwp_testimonial 
      quote="Great service!" 
      author="John Doe"
      role="CEO"
      image="url"]
[/fwp_testimonials]

CTA Banner

[fwp_cta 
    title="Ready to start?" 
    subtitle="Get in touch today"
    btn_text="Contact Us"
    btn_url="#contact"
    bg="primary"]

Stats

[fwp_stats]
  [fwp_stat number="1000+" label="Customers" icon="bi-people"]
  [fwp_stat number="50+" label="Countries" icon="bi-globe"]
[/fwp_stats]

Gutenberg Blocks

All shortcodes zijn ook beschikbaar als Gutenberg blocks met een visuele interface.

Block Category: "FectionWP Blocks"

Blocks hebben live preview in de editor en kunnen worden gestyled via de sidebar.

Developer Hooks

Filters

// Customize available block types
add_filter( 'fwp_blocks_available_blocks', function( $blocks ) {
    // Add or remove blocks
    return $blocks;
});

// Modify shortcode output
add_filter( 'fwp_shortcode_button_output', function( $html, $atts, $content ) {
    // Modify button HTML
    return $html;
}, 10, 3 );

// Custom block registration
add_action( 'fwp_blocks_register', function() {
    // Register custom blocks
});

Actions

// After blocks are loaded
add_action( 'fwp_blocks_loaded', function() {
    // Your code
});

// Before block rendering
add_action( 'fwp_blocks_before_render', function( $block_name ) {
    // Your code
});

Customization

Custom Styles

/* Override block styles */
.fwp-block-button.custom {
    /* Your styles */
}

Block Templates

// Use in theme
do_action( 'fwp_render_block', 'alert', array(
    'type' => 'success',
    'content' => 'Success message'
) );

Installatie

1. Upload plugin naar /wp-content/plugins/fectionwp-blocks/
2. Activeer via WordPress admin 'Plugins' menu
3. Blocks verschijnen automatisch in de Block Editor
4. Shortcodes werken overal in content

Browser Support

• Chrome (laatste 2 versies)
• Firefox (laatste 2 versies)
• Safari (laatste 2 versies)
• Edge (laatste 2 versies)
• iOS Safari 12+
• Chrome Android (laatste)

Compatibility

• WordPress: 6.0+
• PHP: 7.4+
• Bootstrap: 5.3.4 (included in FectionWP Pro)
• Gutenberg: Latest

Support

Website: https://fectionlabs.com
Email: support@fectionlabs.com
Docs: https://fectionlabs.com/docs/blocks

Changelog

1.0.0 - 2024-12-09

• Initial release
• 40+ Bootstrap 5 shortcodes
• 20+ Gutenberg blocks
• Complete Bootstrap component library
• Page section builders
• Full documentation

Credits

Ontwikkeld door FectionLabs
Bootstrap 5.3 by Twitter, Inc.

License

GPL v2 or later