shazzoo / dropblockeditor
A nice block based editor made with Laravel Livewire.
Requires
- php: ^8.1
- illuminate/contracts: ^10.0|^11.0
- livewire/livewire: ^3.3
- spatie/laravel-package-tools: ^1.13.0
Requires (Dev)
- larastan/larastan: ^2.9
- laravel/pint: ^1.0
- orchestra/testbench: ^8.0|^9.0
- pestphp/pest: ^2.34
- pestphp/pest-plugin-laravel: ^2.0
- phpstan/extension-installer: ^1.1
- phpstan/phpstan-deprecation-rules: ^1.0
- phpstan/phpstan-phpunit: ^1.0
- phpunit/phpunit: ^10.4
- spatie/laravel-ray: ^1.28
- spatie/x-ray: ^1.1
README
Introduction
The DropBlockEditor package provides you with a cool drag and drop editor. It allows you to easily create your own custom blocks and make them editable through Livewire components.
-
Note: This package is in the pre-release stage. Code is subject to change and should not considered stable at this time.
Requirements
To use this package, you'll need:
-
To use with Livewire v3.
-
PHP 8.1 or higher
Installation
You can install the package via composer:
composer require shazzoo/dropblockeditor
You can publish all files with:
php artisan vendor:publish --provider="Shazzoo\DropBlockEditor\DropBlockEditorServiceProvider" –-force
Once all files are published, open routes/web.php, and add this code at the end of the page:
require __DIR__.'/dropblockeditor.php';
After that, run this command:
php artisan migrate
Run the following artisan command to create a new Block with an edit component
php artisan dropblockeditor:make Text
Migrations
-
Name: pages
Model
-
Name: pages
-
Data: [title, slug, status, content]
-
The Route key is a slug
Route
-
update_page/{page:slug}: if you have a page -
create_page: to make a page -
Both routes using the same page: PageEiditor
PageEiditor
-
Location: App\Livewire\DropBlockEditor
-
Function: Check if the URL has
(page:slug). If a page exists with(page:slug), then send all info page to DropBlockEditor. Else return 404. If the URL doesn't have(page:slug), then call DropBlockEditor.
DropBlockEditor
-
Location: App\Livewire\DropBlockEditor
-
Function: Get all existing blocks, page settings, and change Blocks location.
Blocks
A block has a visual side which is the Block class and an optional modified Livewire component (BlockEditComponent) to make it editable.
-
Block location: App\Classes\Blocks
-
BlockEditComponent: App\Livewire\DropBlockEditor\Components
Credits
- Mohmad Yazan Sweed
- Hamzah Sari
License
The MIT License (MIT). Please see License File for more information.