README

A collection of essential, ready-to-use blocks for the Bagisto Visual Editor. This package provides foundational building blocks for professional Bagisto storefronts. It comes pre-installed with fresh Bagisto visual themes, enabling drag-and-drop page building without writing code.

Blocks are built with Laravel Blade templates, styled with Tailwind CSS, and enhanced with Alpine.js for interactivity. Some blocks also leverage Livewire for dynamic functionality.

Installation

This package comes pre-installed with fresh Bagisto visual themes. If you need to install it manually, you can do so via composer:

composer require bagistoplus/basic-blocks

That's it! The package will automatically register itself via Laravel's package auto-discovery.

Usage

This package provides basic blocks for the Bagisto Visual Editor. Once installed, the blocks are automatically available in the visual editor interface at visual.bagistoplus.com.

Simply use the drag-and-drop interface to add blocks to your pages and customize them through the visual editor.

Host Theme Integration

Most blocks work with zero configuration. This package also ships an optional shared stylesheet entry for packaged block styles.

Shared stylesheet (optional)

Themes can import the package stylesheet entry:

@import '../../../vendor/bagistoplus/basic-blocks/resources/assets/css/index.css';

Adjust the relative path to match your theme's CSS file location.

This file contains the packaged block CSS (including button styles) and Tailwind source hints used by those styles.

For button customization, override the button CSS custom properties (--btn-radius, --btn-border-width, --btn-font-size, --btn-letter-spacing, --btn-text-transform, and the shadow/inset variables). The full list is in resources/assets/css/index.css.

If the stylesheet is not imported, blocks still function; packaged visual styles are simply not applied.

Icon block

No setup is required. The bagistoplus/visual package every Bagisto visual theme depends on already registers blade-ui-kit/blade-icons along with the Lucide and Heroicons sets, so the default lucide-* icons work out of the box.

Optional: theme developers who want additional icon sets (e.g. Tabler, Feather) can composer require them in the theme. Any set registered with blade-icons becomes selectable in the Icon block from the visual editor.

Technology Stack

The blocks in this package are built using:

• Laravel Blade - For templating and server-side rendering
• Tailwind CSS - For modern, utility-first styling
• Alpine.js - For lightweight JavaScript interactivity
• Livewire - For dynamic, reactive components (used in select blocks)

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Eldo Magan
• All Contributors

License

The MIT License (MIT). Please see License File for more information.