umanit / block-collection-bundle
A collection of blocks ready to use in your project
Installs: 4 242
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 6
Forks: 2
Open Issues: 5
Type:symfony-bundle
Requires
- php: ^7.3|^8.0
- artgris/media-bundle: ^5.2|^6.0
- doctrine/doctrine-bundle: ^1.12|^2.1
- friendsofsymfony/ckeditor-bundle: ^2.2
- symfony/twig-bundle: ^4.4|^5.2|^6.2
- umanit/block-bundle: ^2.0
This package is auto-updated.
Last update: 2024-10-25 18:16:17 UTC
README
A collection of blocks ready to use with umanit/block-bundle.
Prerequisites
- Install and configure FOSCKEditorBundle
- Install and configure ArtgrisMediaBundle
- The assets' installation is not necessary because they're all rewrite in this bundle, you only need to declare the bundle and his routing.
- Install and configure UmanitBlockBundle
Front requirements
- Use Symfony UX
Install
Register the bundle to your config/bundles.php
<?php return [ // ... Umanit\BlockCollectionBundle\UmanitBlockCollectionBundle::class => ['all' => true], ];
Add one of the Twig's form theme
# config/packages/twig.yaml twig: form_themes: # When using Sylius, the only available for the moment - '@UmanitBlockCollection/sylius/artgris/field_media.html.twig'
Add @umanit/block-collection-bundle
dev-dependency in your package.json
. This part is automatically done if you use
Flex in your projet.
{ //... "devDependencies": { // ... "@umanit/block-collection-bundle": "file:vendor/umanit/block-collection-bundle/Resources/assets" } }
Add stimulus controllers to your assets/controllers.json
. This part is automatically done if you use Flex in your
projet.
{ "controllers": { // ... "@umanit/block-collection-bundle": { "collection": { "enabled": true, "fetch": "eager" }, "ckeditor": { "enabled": true, "fetch": "eager" }, "crop": { "enabled": true, "fetch": "eager", "autoimport": { "cropperjs/dist/cropper.min.css": true } }, "file-manager": { "enabled": true, "fetch": "eager" }, "media": { "enabled": true, "fetch": "eager" }, "modal": { "enabled": true, "fetch": "eager", "autoimport": { "@umanit/block-collection-bundle/src/modal-style.css": true } } } } // ... }
Don't forget to install the JavaScript dependencies as well and compile
yarn install --force
yarn encore dev
Available blocks
FAQ
A collection of question/answer.
The answer field uses the CKEditorType
from
FOSCKEditorBundle.
Image
An image with an alt
field. The form type uses the MediaType
from
ArtgrisMediaBundle.
Images collection
A collection of images (without alt
field, for the moment?). The form type uses the MediaCollectionType
from
ArtgrisMediaBundle.
Link
A simple URLs and it's associated label.
Quote
A blockquote and an optional author.
Triptych
A block composed of a title, a wysiwyg text, and an image with an alt
field.
The text form type uses the CKEditorType
from
FOSCKEditorBundle.
The image form type uses the MediaType
from ArtgrisMediaBundle.
Video
A link to YouTube or Vimeo to render a player in an iframe.
WYSIWYG
A WYSIWYG which uses the CKEditorType
from
FOSCKEditorBundle.
Customize blocks
FormType
You can use Symfony Form Type Extension to modify any of available form type.
Rendering
You can override any of the Twig template to customize the rendering of each block. The default path will be
templates/bundles/UmanitBlockCollectionBundle/blocks/
.
Utils - TwigRenderableTrait
If you need to create your own blocks, you can use the Umanit\BlockCollectionBundle\BlockManager\TwigRenderableTrait
in your block manager.
It will allow you to use a Twig view to render your block. All you need to do is to define the property
protected $template
in your manager which should be the name of a view placed in
templates/bundles/UmanitBlockCollectionBundle/blocks/
(without the suffix .html.twig
).
For example, using this manager:
<?php declare(strict_types=1); namespace App\BlockManager; use App\Entity\Block\Simple; use App\Form\Type\Block\SimpleType; use Umanit\BlockBundle\Block\AbstractBlockManager; class SimpleBlockManager extends AbstractBlockManager { use TwigRenderableTrait; /** @var string */ protected $template = 'simple'; public function getManagedBlockType(): string { return Simple::class; } public function getManagedFormType(): string { return SimpleType::class; } }
Once the entity and the form type are created, we only need to create the view
templates/bundles/UmanitBlockCollectionBundle/blocks/simple.html.twig
.