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:
    • boolean Renders a checkbox
    • text Renders a text input
    • url Renders a url input
    • link Renders a combobox that allows to create a dynamic link to products, taxons, DegDitor pages and categories
    • number Renders a number input
    • date Renders a date picker
    • select Renders a select
    • radio Renders a radio button
    • slider Renders a slider input
    • textarea Renders a textarea
    • markup Renders a Rich Text Editor
    • product Renders a Sylius product selector with autocomplete
    • taxon Renders a Sylius taxon selector with autocomplete
    • degditor_category Renders a DegDitor category selector with autocomplete
    • degditor_page Renders a DegDitor category selector with autocomplete
    • degditor_image Renders a media browser dialog
    • color_picker Renders a color picker
    • ui_heading Renders a title and subtitle (used only in the DegDitor admin interface, designed for merchants)
    • ui_alert Renders 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 type select, or a pair of min-max values if the attribute is of type slider
  • 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\BlockConfigurationInterface
Attributes definition must implement

packages/FiftyDegSyliusDegditorBasePlugin/src/Configuration/AttributeConfigurationInterface.php

FiftyDeg\SyliusDegditorBasePlugin\Configuration\AttributeConfigurationInterface

For convenince we provide the following abstract classes to be extended:

packages/FiftyDegSyliusDegditorBasePlugin/src/Configuration/AbstractBlockConfiguration.php

FiftyDeg\SyliusDegditorBasePlugin\Configuration\AbstractBlockConfiguration

packages/FiftyDegSyliusDegditorBasePlugin/src/Configuration/AbstractAttributeConfiguration.php

FiftyDeg\SyliusDegditorBasePlugin\Configuration\AbstractAttributeConfiguration
Once you extended the abstract classes (or implemented the interfaces) then you can tag your services with the
fifty_deg_sylius_degditor_base.block_configuration
tag in your services configuration.

๐Ÿงช Example: Button Block (Service tags)

  1. 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} 28
1<?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

  1. 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

  1. Register the block configuration by using the fifty_deg_sylius_degditor_base.block_configuration service 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 priority tag 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
config/packages/fiftydeg_sylius_degditor_base.yaml
file in your project and follow the following examples.

โœ๏ธ 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 29
Three, 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

Try it

Get a demo

Get a personalized demo tailored to your unique needs

Preview our pricing plans

Evaluate DegDitor against your requirements

Get a demo

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