Configuring content blocks
๐ซ Content blocks schema
Blocks defines a renderable element that can have a set of attributes (see next paragraph).
Their configuration is composed by the following properties:
- template (string, required)
The twig rendering template - block_name (string, required)
Renders a label above the block in the DegDitor admin interface - block_description (string, optional)
Renders a description in the block form in the DegDitor admin interface - allowed_inner_blocks (array, optional)
The list of blocks that can be nested inside this block - allowed_as_root (boolean, optional)
If the block could be added at root level, default is true - attributes (array, optional)
The list of attributes for this block, see next paragraph
๐งฉ Attributes Schema
Attributes define configurable properties of each block.
Their configuration is composed by the following properties:
- type (array, required) that defines the attribute nature with following allowed values:
booleanRenders a checkboxtextRenders a text inputurlRenders a url inputlinkRenders a combobox that allows to create a dynamic link to products, taxons, DegDitor pages and categoriesnumberRenders a number inputdateRenders a date pickerselectRenders a selectradioRenders a radio buttonsliderRenders a slider inputtextareaRenders a textareamarkupRenders a Rich Text EditorproductRenders a Sylius product selector with autocompletetaxonRenders a Sylius taxon selector with autocompletedegditor_categoryRenders a DegDitor category selector with autocompletedegditor_pageRenders a DegDitor category selector with autocompletedegditor_imageRenders a media browser dialogcolor_pickerRenders a color pickerui_headingRenders a title and subtitle (used only in the DegDitor admin interface, designed for merchants)ui_alertRenders an alert (used only in the DegDitor admin interface, designed for merchants)
- name (string, required)
Renders a label above the field in the DegDitor admin interface - description (string, optional)
Renders a description above the field in the DegDitor admin interface - regex (string, optional)
The regex to be used to validate the attribute value - required (boolean, optional, default false)
Sets the field as required, or not - values ({label: string, value: string|int|bool|float|null}[], optional)
Available values for the attribute, if the attribute is of typeselect, or a pair ofmin-maxvalues if the attribute is of typeslider - fallback
The key of the attribute to be used as fallback in case the current one has no value or nullish value
๐ Configure via Symfony Tags
Blocks and their attributes can be defined through Symfony Service Tags.
Blocks definitions must implement
packages/FiftyDegSyliusDegditorBasePlugin/src/Configuration/BlockConfigurationInterface.php
FiftyDeg\SyliusDegditorBasePlugin\Configuration\BlockConfigurationInterfaceAttributes definition must implement
packages/FiftyDegSyliusDegditorBasePlugin/src/Configuration/AttributeConfigurationInterface.php
FiftyDeg\SyliusDegditorBasePlugin\Configuration\AttributeConfigurationInterfaceFor convenince we provide the following abstract classes to be extended:
packages/FiftyDegSyliusDegditorBasePlugin/src/Configuration/AbstractBlockConfiguration.php
FiftyDeg\SyliusDegditorBasePlugin\Configuration\AbstractBlockConfigurationpackages/FiftyDegSyliusDegditorBasePlugin/src/Configuration/AbstractAttributeConfiguration.php
FiftyDeg\SyliusDegditorBasePlugin\Configuration\AbstractAttributeConfigurationOnce you extended the abstract classes (or implemented the interfaces) then you can tag your services with the
fifty_deg_sylius_degditor_base.block_configurationtag in your services configuration.
๐งช Example: Button Block (Service tags)
- Add your attributes definition, e.g.
1<?php
2
3declare(strict_types=1);
4
5namespace YourBundle\BlockConfiguration\Attributes;
6
7use FiftyDeg\SyliusDegditorBasePlugin\Configuration\AbstractAttributeConfiguration;
8
9class LinkAttribute extends AbstractAttributeConfiguration
10{
11 public function __construct(
12 private readonly string $id,
13 private readonly string $name = 'Link target',
14 private readonly string $description = 'Select the entity type and search the resource to create a link.',
15 private readonly bool $required = false,
16 private readonly ?string $fallback = null,
17 ) {
18 parent::__construct(
19 id: $this->id,
20 type: self::TYPE_LINK,
21 name: $this->name,
22 description: $this->description,
23 required: $this->required,
24 fallback: $this->fallback,
25 );
26 }
27}
281<?php
2
3declare(strict_types=1);
4
5namespace YourBundle\BlockConfiguration\Attributes;
6
7use FiftyDeg\SyliusDegditorBasePlugin\Configuration\AbstractAttributeConfiguration;
8
9class InputTextAttribute extends AbstractAttributeConfiguration
10{
11 public function __construct(
12 private readonly string $id,
13 private readonly string $name = 'Text input',
14 private readonly string $description = '',
15 private readonly bool $required = false,
16 private readonly string $regex = '',
17 private readonly ?string $fallback = null,
18 ) {
19 parent::__construct(
20 id: $this->id,
21 type: self::TYPE_TEXT,
22 name: $this->name,
23 required: $this->required,
24 description: $this->description,
25 regex: $this->regex,
26 fallback: $this->fallback,
27 );
28 }
29}
30
31- Configure the button block with its attributes
1<?php
2
3declare(strict_types=1);
4
5namespace YourBundle\BlockConfiguration\Blocks;
6
7use FiftyDeg\SyliusDegditorBasePlugin\Configuration\AbstractBlockConfiguration;
8use YourBundle\BlockConfiguration\Attributes\InputTextAttribute;
9use YourBundle\BlockConfiguration\Attributes\LinkAttribute;
10
11class ButtonBlock extends AbstractBlockConfiguration
12{
13 public function __construct()
14 {
15 parent::__construct(
16 id: static::class,
17 template: '@YourBundle/blocks/atoms/button.html.twig',
18 name: 'Button',
19 description: 'A prompt that tells the user to take some specified action, like a button or a link.',
20 allowedAsRoot: false,
21 allowedInnerBlocks: [],
22 attributes: [
23 new InputTextAttribute(
24 id: 'button_label',
25 name: 'Button label',
26 description: 'The label shown inside the button.',
27 required: true,
28 ),
29 new LinkAttribute(
30 id: 'button_link',
31 name: 'Button link',
32 description: 'The link of the button.',
33 required: true,
34 ),
35 ],
36 );
37 }
38}
39- Register the block configuration by using the
fifty_deg_sylius_degditor_base.block_configurationservice tag
config/services.yaml
1services:
2 # ...
3 your_bundle.block_configuration.blocks.button_block:
4 class: YourBundle\BlockConfiguration\Blocks\ButtonBlock
5 tags:
6 - { name: fifty_deg_sylius_degditor_base.block_configuration, priority: 100 }
7๐ Why This Approach Rocks
This approach is recommended over the YAML configuration mode, even if it's more verbose, because:
- it's easier to define generic attributes and reuse them across different blocks types
- IDs are auto-generated based on class name, improving:
- attributes referencing
- inner blocks referencing
- avoid typos and IDs duplications
- typehinting
- you can add conditional logics
- you can create attributes builders utilities, such as bootstrap responsive class names generation
- you can also benefit of dependency injection and pass services (and attributes as a service) in constructor
- quickly define their sorting thanks to the
prioritytag attribute
๐ง Note: Changes to block services require cache clearing!
This code is evaluate at compile time so, each time you update your configuration, you need to clear cache
php bin/console c:c
๐งพ YAML-Based Configuration
Alongside with the Symfony tags block configuration mode, you can define your blocks and their attributes also with YAML.
Anyway, we recommend using the Symfony tags way.
To configure blocks with YAML, create the
file in your project and follow the following examples.
Anyway, we recommend using the Symfony tags way.
To configure blocks with YAML, create the
config/packages/fiftydeg_sylius_degditor_base.yamlโ๏ธ Example: Button Block (YAML)
Below you will find the same button configured via YAML.
As you can see, it is much more concise, but it is more difficult to reuse attributes and you cannot use custom logic / generator functions when defining the content block.
1fifty_deg_sylius_degditor_base:
2 blocks:
3 button:
4 template: "@YourBundle/Blocks/button.html.twig"
5 block_name: Button
6 block_description: A prompt that tells the user to take some specified action, like a button or a link.
7 allowed_inner_blocks: [ ]
8 allowed_as_root: false
9 attributes:
10 button_link:
11 {
12 type: "link",
13 name: "Button link",
14 description: "The link of the button.",
15 required: true,
16 }
17 button_label:
18 {
19 type: "text",
20 name: "Button label",
21 description: "The label shown inside the button.",
22 required: false,
23 fallback: button_link
24 }
25โป๏ธ YAML configuration with reusable Attributes
Thanks to the
reusable_attributes configuration key, it's possible to define reusable blocks' attributes also using YAML configuration.1fifty_deg_sylius_degditor_base:
2 reusable_attributes:
3 button_attributes: &button_attributes
4 button_link:
5 {
6 type: "link",
7 name: "Button link",
8 description: "The link of the button.",
9 required: true,
10 }
11 button_label:
12 {
13 type: "text",
14 name: "Button label",
15 description: "The label shown inside the button.",
16 required: false,
17 fallback: button_link
18 }
19 blocks:
20 button:
21 template: "@YourBundle/Blocks/button.html.twig"
22 block_name: Button
23 block_description: A prompt that tells the user to take some specified action, like a button or a link.
24 allowed_inner_blocks: [ ]
25 allowed_as_root: false
26 attributes:
27 <<: *button_attributes
28
29Three, two, one...
Ready for DegDitor?
Try the plugin
Experience the best features at no cost
Get a better understanding of DegDitor and how it works
Test it risk-free and see the results
Get a demo
Get a personalized demo tailored to your unique needs
Preview our pricing plans
Evaluate DegDitor against your requirements
We are here for you
After months of intense development, itโs time to put DegDitor to work. For feedback, questions or information please contact us!
Contact us